github.com/ngocphuongnb/tetua@v0.0.7-alpha/packages/editor/src/extensions/codeblock.ts (about)

     1  import CodeBlockLowlight from './codeblock-lowlight';
     2  import { HTMLElementEvent } from '../global';
     3  import * as lowlight from 'lowlight/lib/core';
     4  
     5  export const CodeBlock = CodeBlockLowlight.extend({
     6    addNodeView() {
     7      return ({ editor, node, getPos, HTMLAttributes: _HTMLAttributes, decorations: _decorations, extension }) => {
     8        const dom = document.createElement('div');
     9        dom.className = 'code-block';
    10        const languageSelectElm = document.createElement<'select'>('select');
    11        languageSelectElm.contentEditable = 'false';
    12        languageSelectElm.setAttribute('defaultValue', node.attrs.language);
    13        languageSelectElm.addEventListener('change', (e: HTMLElementEvent<HTMLSelectElement>) => {
    14          if (typeof getPos === 'function') {
    15            editor.view.dispatch(editor.view.state.tr.setNodeMarkup(
    16              getPos(),
    17              null,
    18              { language: e.target.value }
    19            ));
    20          }
    21        });
    22        languageSelectElm.innerHTML = `<option value="null">auto</option><option disabled>—</option>`;
    23        extension.options.lowlight.listLanguages().map((lang: string) => {
    24          const option = document.createElement<'option'>('option');
    25          option.value = lang;
    26          option.innerText = lang;
    27  
    28          if (node.attrs.language === lang) {
    29            option.selected = true;
    30          }
    31  
    32          languageSelectElm.appendChild(option);
    33        });
    34  
    35        dom.appendChild(languageSelectElm);
    36        const pre = document.createElement<'pre'>('pre');
    37        pre.setAttribute('as', 'code');
    38        dom.appendChild(pre);
    39  
    40        return {
    41          dom,
    42          contentDOM: pre,
    43        }
    44      }
    45    },
    46  }).configure({ lowlight: (lowlight as any).lowlight })