on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 1.39 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../types.cjs"),p=require("../utils/languages/index.cjs");class u{highlight(t){const n=t.textContent||"",s=this.getLanguage(t),e=p.getLanguageDefinition(s);{const c=this.tokenize(n,e);t.innerHTML=this.renderTokens(c)}}getLanguage(t){const s=t.className.match(/language-(\w+)/);return s?s[1]:"plaintext"}tokenize(t,n){const s=[];let e=t;for(;e;){const c=e.match(/^\s+/);if(c){s.push({type:i.TokenType.Text,value:c[0]}),e=e.slice(c[0].length);continue}if(n.keywords){const l=e.match(/^\b\w+\b/);if(l&&n.keywords.includes(l[0])){s.push({type:i.TokenType.Keyword,value:l[0]}),e=e.slice(l[0].length);continue}}let a={length:0,type:null,value:""};for(const[l,o]of Object.entries(n.patterns)){if(!o)continue;const g=new RegExp(o.source,"y");g.lastIndex=0;const r=g.exec(e);r&&r[0].length>a.length&&(a={length:r[0].length,type:l,value:r[0]})}a.type?(s.push({type:a.type,value:a.value}),e=e.slice(a.length)):(s.push({type:i.TokenType.Text,value:e[0]}),e=e.slice(1))}return s}renderTokens(t){return t.map(n=>n.type===i.TokenType.Text?this.escapeHtml(n.value):`<span class="token ${n.type}">${this.escapeHtml(n.value)}</span>`).join("")}escapeHtml(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}}exports.SyntaxHighlighter=u;