mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-08 20:23:39 +00:00
Change {{ span to Marked.js extension
This commit is contained in:
@@ -19,12 +19,62 @@ renderer.paragraph = function(text){
|
|||||||
let match;
|
let match;
|
||||||
if(text.startsWith('<div') || text.startsWith('</div'))
|
if(text.startsWith('<div') || text.startsWith('</div'))
|
||||||
return `${text}`;
|
return `${text}`;
|
||||||
else if(match = text.match(/(^|^.*?\n)<span class="inline([^>]*><\/span>)$/))
|
else if(match = text.match(/(^|^.*?\n)<span class="inline(.*?<\/span>)$/)) {
|
||||||
return `<p>${match[1]}</p><span class="inline-block"${match[2]}`;
|
return `${match[1].trim() ? `<p>${match[1]}</p>` : ''}<span class="inline-block${match[2]}`; }
|
||||||
else
|
else
|
||||||
return `<p>${text}</p>\n`;
|
return `<p>${text}</p>\n`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mustacheSpans = {
|
||||||
|
name: 'mustacheSpans',
|
||||||
|
level: 'inline', // Is this a block-level or inline-level tokenizer?
|
||||||
|
start(src) { return src.match(/{{[^{]/)?.index; }, // Hint to Marked.js to stop and check for a match
|
||||||
|
tokenizer(src, tokens) {
|
||||||
|
const completeSpan = /^{{[^\n]*}}/; // Regex for the complete token
|
||||||
|
const inlineRegex = /{{(?:="[\w,\-. ]*"|[^"'{}}\s])*\s*|}}/g;
|
||||||
|
const match = completeSpan.exec(src);
|
||||||
|
if (match) {
|
||||||
|
//Find closing delimiter
|
||||||
|
let blockCount = 0;
|
||||||
|
let tags = '';
|
||||||
|
let endIndex = 0;
|
||||||
|
let delim;
|
||||||
|
while (delim = inlineRegex.exec(match[0])) {
|
||||||
|
if(delim[0].startsWith('{{')) {
|
||||||
|
tags = tags || ' ' + processStyleTags(delim[0].substring(2));
|
||||||
|
blockCount++;
|
||||||
|
}
|
||||||
|
else if(delim[0] == '}}' && blockCount !== 0) {
|
||||||
|
blockCount--;
|
||||||
|
if(blockCount == 0) {
|
||||||
|
endIndex = inlineRegex.lastIndex;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(endIndex) {
|
||||||
|
const raw = src.slice(0, endIndex);
|
||||||
|
const text = raw.slice((raw.indexOf(' ')+1) || -2, -2)
|
||||||
|
|
||||||
|
return { // Token to generate
|
||||||
|
type: 'mustacheSpans', // Should match "name" above
|
||||||
|
raw: raw, // Text to consume from the source
|
||||||
|
text: text, // Additional custom properties
|
||||||
|
tags: tags,
|
||||||
|
tokens: this.inlineTokens(text) // inlineTokens to process **bold**, *italics*, etc.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
renderer(token) {
|
||||||
|
console.log(token);
|
||||||
|
return `<span class="inline${token.tags}>${this.parseInline(token.tokens)}</span>`; // parseInline to turn child tokens into HTML
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Markdown.use({extensions : [mustacheSpans]});
|
||||||
|
|
||||||
// Mustache-style Divs {{class \n content ... \n}}
|
// Mustache-style Divs {{class \n content ... \n}}
|
||||||
let blockCount = 0;
|
let blockCount = 0;
|
||||||
const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/gm;
|
const blockRegex = /^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/gm;
|
||||||
@@ -35,32 +85,10 @@ renderer.text = function(text){
|
|||||||
const newText = text.replaceAll('"', '"');
|
const newText = text.replaceAll('"', '"');
|
||||||
let matches;
|
let matches;
|
||||||
|
|
||||||
if(matches = newText.match(inlineFullRegex)) {
|
if(matches = newText.match(blockRegex)) {
|
||||||
|
|
||||||
//SPAN - INLINE
|
|
||||||
matches = newText.match(inlineRegex);
|
|
||||||
let matchIndex = 0;
|
|
||||||
const res = _.reduce(newText.split(inlineRegex), (r, splitText)=>{
|
|
||||||
|
|
||||||
if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
|
|
||||||
|
|
||||||
const block = matches[matchIndex] ? matches[matchIndex].trimLeft() : '';
|
|
||||||
if(block && block.startsWith('{{')) {
|
|
||||||
const values = processStyleTags(block.substring(2));
|
|
||||||
r.push(`<span class="inline ${values}>`);
|
|
||||||
blockCount++;
|
|
||||||
} else if(block == '}}' && blockCount !== 0){
|
|
||||||
r.push('</span>');
|
|
||||||
blockCount--;
|
|
||||||
}
|
|
||||||
|
|
||||||
matchIndex++;
|
|
||||||
|
|
||||||
return r;
|
|
||||||
}, []).join('');
|
|
||||||
return `${res}`;
|
|
||||||
} else if(matches = newText.match(blockRegex)) {
|
|
||||||
//DIV - BLOCK-LEVEL
|
//DIV - BLOCK-LEVEL
|
||||||
|
console.log({match: matches});
|
||||||
|
console.log({newText: newText});
|
||||||
let matchIndex = 0;
|
let matchIndex = 0;
|
||||||
const res = _.reduce(newText.split(blockRegex), (r, splitText)=>{
|
const res = _.reduce(newText.split(blockRegex), (r, splitText)=>{
|
||||||
if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
|
if(splitText) r.push(Markdown.parseInline(splitText, { renderer: renderer }));
|
||||||
@@ -177,7 +205,7 @@ const processStyleTags = (string)=>{
|
|||||||
const id = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
|
const id = _.remove(tags, (tag)=>tag.startsWith('#')).map((tag)=>tag.slice(1))[0];
|
||||||
const classes = _.remove(tags, (tag)=>!tag.includes('"'));
|
const classes = _.remove(tags, (tag)=>!tag.includes('"'));
|
||||||
const styles = tags.map((tag)=>tag.replace(/="(.*)"/g, ':$1;'));
|
const styles = tags.map((tag)=>tag.replace(/="(.*)"/g, ':$1;'));
|
||||||
return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles ? `style="${styles.join(' ')}"` : ''}`;
|
return `${classes.join(' ')}" ${id ? `id="${id}"` : ''} ${styles.length ? `style="${styles.join(' ')}"` : ''}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|||||||
Reference in New Issue
Block a user