samclarke/SCEditor

Tag <code> not triggered on different BBCode code name

Opened this issue · 4 comments

It looks like another bug with the tag code :)
if we want to set for HTML tag <code> two behavior it will not trigger format: if it has a BBCode different from [code] when we switch from WYSIWYG to Source mode.
Examle:
Override [code] for triggering to a class

         code = {
            tags: {
                // code: null,
                code:
                    {
                        class: 'code-block',
                    },
            },
            isInline: false,
            allowedChildren: ['#', '#newline'],
            format: '[code]{0}[/code]',
            html: '<code class="code-block">{0}</code>',
        };
        sceditor.formats.bbcode.set('code', code);

Add [codeinline]

         codeInline = {
            tags: {
                code:
                    {
                        class: 'code-inline',
                    },
            },
            allowedChildren: ['#', '#newline'],
            format: '[codeinline]{0}[/codeinline]',  <--- this won't be triggered if we switch to source mode
            html: '<code class="code-inline">{0}</code>'
        };
        sceditor.formats.bbcode.set('codeinline', codeInline);

If we do that with different BBcode, for example with [sub] it will work correctly.
Example with code and sub.
https://jsbin.com/yirolubile/1/edit?html,js,output

Ok debugged it, and found where is problem.

if (tag !== 'code') {

Is it possible to add a variable, that give us a chance to ignore that check? allowedTagStyles false by default for [code], but true for others.
And replace if (tag !== 'code') to if (allowedTagStyles)

Like

        code = {
            tags: {
                // code: null,
                code:
                    {
                        class: 'code-block',
                    },
            },
            allowedTagStyles: false,  <------
            isInline: false,
            allowedChildren: ['#', '#newline'],
            format: '[code]{0}[/code]',
            html: '<code class="code-block">{0}</code>',
        };
        sceditor.formats.bbcode.set('code', code);

        codeInline = {
            tags: {
                code:
                    {
                        class: 'code-inline',
                    },
            },
            allowedTagStyles: true,           <------
            allowedChildren: ['#', '#newline'],
            format: '[codeinline]{0}[/codeinline]',
            html: '<code class="code-inline">{0}</code>'
        };

Also it looks, like this check not need at all:

if (tag !== 'code') {

this check does it job and prevents to add [left] :

if (name === 'style' && element.nodeName === 'CODE') {

Sorry if i'm wrong :)

Unfortunately this is down to the special casing of the <code> tag, as you've found it can't be used as an inline. There are plans to make this configurable but not until the next breaking release.

Thinking about it, it could be done as an opt-in without a breaking change. Have it default to this behaviour but opt-in to new behaviour although that would increase number of code paths and make things even harder to debug. Not sure if that would be a good idea or not.

The easiest solution for now would be to use a different tag, like a span tag for inline codes within the editor. Not ideal though.

Also it looks, like this check not need at all:

It's not that clear but they are both needed. The first stops inline tags and styles being converted and the latter stops block level styles being converted. It really isn't great code and will be changed in the next breaking release but stuck with it for now.

Thank for the idea, I replaced it via span.