@anywhichway/nerd-editor/src/editors.js

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

const editors = {
    a: {
        popover() {},
        editor() {}
    },
    audio: {
        popover() {},
        editor() {}
    },
    blockquote: {
        popover:[
            '<label><input type="radio" name="transform" value="q"> Quote</label>',
            '<label><input type="radio" name="transform" value="blockquote"> Block Quote</label>',
        ].join("")
    },
    code: {
        popover:[
            '<select name="class">',
                hljs.listLanguages().reduce((options,language) => {
                    return options += `<option value="language-${language}">${language}</option>`
                },""),
            '</select>',
            '<label><input type="radio" name="style.display" value=""> Inline</label>',
            '<label><input type="radio" name="style.display" value="block"> Block</label>'
        ].join(""),
        editor: [
            '<select name="class">',
                hljs.listLanguages().reduce((options,language) => {
                    return options += `<option value="language-${language}">${language}</option>`
                },""),
            '</select>',
            '<textarea style="display:block;white-space:nowrap" name="innerText" title="Code" spellcheck="false" placeholder="code, e.g. function() { return 1 + 1 }">',
            '<div name="preview"></div>'
        ].join(""),
        render() {
            hljs.highlightElement(this);
        },
        autoAttributes: {
            spellcheck: false
        }
    },
    details: {
        popover() {}, // todo edit summary value and content
        editor() {}
    },
    "data-block": {
        popover:[
            '<label><input type="radio" name="style.display" value=""> Inline</label>',
            '<label><input type="radio" name="style.display" value="block"> Block</label>'
        ].join(""),
        editor:[
            '<input type="url" name="attribute.src">'
        ].join("")
    },
    img: {
        popover:[
            '<label><input type="radio" name="style.float" value="left"> Left</label>',
            '<label><input type="radio" name="style.float" value=""> Normal</label>',
            '<label><input type="radio" name="style.float" value="right"> Right</label>',
        ].join(""),
        editor: [
            '<input type="text" name="attribute.src" title="Current Image Source" placeholder="No current source" readoly disabled>',
            '<input type="file" name="attribute.src" title="Select File" accept="image/*">',
            '<div><label><input type="radio" name="style.float" value="left"> Left</label>',
            '<label><input type="radio" name="style.float" value=""> Normal</label>',
            '<label><input type="radio" name="style.float" value="right"> Right</label></div>',
            '<div name="preview"></div>',
            '<div><input type="text" name="attribute.height" title="Image Height" placeholder="height #% or #px">',
            '<input type="text" name="attribute.width" title="Image Width" placeholder="width #% or #px"></div>',
            '<label><input name="style.scale.%" type="range" title="Image Scale" min="0" max="100" value="100"> Scale</label>'
        ].join("")
    },
    "inline-function": {
        popover:[
            '<label><input type="checkbox" name="attribute.showfunction" value="true">Show Function</label>',
            '<label><input type="radio" name="style.display" value=""> Inline</label>',
            '<label><input type="radio" name="style.display" value="block"> Block</label>',
        ].join(""),
        editor: [
            '<label><input type="checkbox" name="attribute.showfunction" value="true">Show Function</label>',
            '<input type="text" name="element.expression.innerHTML" title="Expression" placeholder="Expression, e.g. 2 + 2">',
            '<div name="preview"></div>'
        ].join("")
    },
    "math-science-formula": {
        popover() {},
        editor() {}
    },
    "sheet-music": {
        popover() {},
        editor() {}
    },
    "plotly-chart": {
        popover() {},
        editor() {}
    },
    ol: {
        popover() {}
    },
    q: {
        popover:[
            '<label><input type="radio" name="transform" value="q"> Quote</label>',
            '<label><input type="radio" name="transform" value="blockquote"> Block Quote</label>',
        ].join("")
    },
    table: {
        popover() {},
        editor() {}
    },
    ul: {
        popover() {}
    },
    video: {
        popover() {},
        editor() {}
    }
}

export {editors}