Code block wrapping in quill

[misericorda]

Hi, I've been using Quill fore some time and now need to add a button for code snippets. The problem is, quill's default 'code-block' wraps content into pre tags. And even if I add some pre->code blocks and save the content, quill strips "code" tag if I load the saved text into the editor.

Is there some way to use pre>code wrapping for code snippets in Quill?

Version:

1.3.6

[benbro]

Please fork the CodePen and show what you are trying to do and what doesn't work.

[misericorda]

Already solved the problem. In case someone's looking for the solution, that's what I used:

class CustomCode extends BlockEmbed {
  static create(value) {
    let {lang, content} = value;
    let node = super.create(value);
    const code = document.createElement('code');
    code.setAttribute('class', lang);
    code.textContent = content;
    node.appendChild(code);
    return node;
  }

  static value(node) {
    return {
      lang: node.firstChild.getAttribute('class'),
      content: node.firstChild.innerText
    };
  }
}

CustomCode.blotName = 'code-custom';
CustomCode.tagName = 'pre';

[JellyBool]

Hi @misericorda !

where does the BlockEmbed comes from? is it :

var BlockEmbed = Quill.import('modules/blockembed')

class CustomCode extends BlockEmbed {
   // another codes
}
// then register it ?
Quill.register('modules/blockembed', CustomCode, true)

[cmd05]

I am getting this error: quill Cannot import modules/blockembed. Are you sure it was registered?

[jdgamble555]

@misericorda How did you implement the code? Like this? Does not work on my end. It does not add code blocks...

        var BlockEmbed = Quill.import('blots/block/embed');

        class CustomCode extends BlockEmbed {
            static create(value) {
                let { lang, content } = value;
                let node = super.create(value);
                const code = document.createElement('code');
                code.setAttribute('class', lang);
                code.textContent = content;
                node.appendChild(code);
                return node;
            }

            static value(node) {
                return {
                    lang: node.firstChild.getAttribute('class'),
                    content: node.firstChild.innerText
                };
            }
        }
        CustomCode.blotName = 'code-custom';
        CustomCode.tagName = 'pre';

        Quill.register('modules/CustomCode', CustomCode);

        var editor = new Quill("#editor", {
            readOnly: true,
            modules: {
                syntax: true,
                CustomCode
            },
            theme: "bubble"
        });