@anywhichway/nerd-editor/src/type-aheads.js

A JavaScript rich text editor based on and with support for custom elements.

import {createElement} from "./create-element";
import {mentionTypeAhead} from "./typeaheads/mention";

const typeAheads = {
    formula: {
        match:/(\\[\[\(][\S\s]+)/s,
        matchEnd:/(\\[\]\)])/s,
        template(item) {
            item = item.replace("\\[","").replace("\\(","").replace("\\]","").replace("\\)","");
            if(item.endsWith("\\")) {
                item = item.substring(0,item.length-1)
            }
            if(item.startsWith("\\ce") & !item.includes("{")) {
                return createElement({tagName:"span",innerHTML:"Chemical Formula ..."})
            }
            return createElement({tagName:"math-science-formula",innerHTML:item});
        },
        options(matched,use) {
            const open = matched.split("{").length,
                close = matched.split("}").length,
                closers = open > close ? "}".repeat(open-close) : "";
            matched = matched.replaceAll(/->/g,"→") + closers;
            use([matched]);
        },
        content(item) {
            const display = item.startsWith("\\[") ? "block" : "";
            item = item.replace("\\[","").replace("\\(","").replace("\\]","").replace("\\)","");
            if(item.endsWith("\\")) {
                item = item.substring(0,item.length-1)
            }
            const node = createElement({tagName:"math-science-formula",attributes:{style:{display:display}},innerHTML:item});
            requestAnimationFrame(() => {
                if(!node.nextSibling || node.nextSibling.textContent.length===0) {
                    node.insertAdjacentHTML("afterend"," ");
                }
            });
            return node;
        }
    },
    mention: mentionTypeAhead
}

export {typeAheads}