[Bug] Plugin conflicts

[wh1t3h47]

Hello 김대연,

I was writing a plugin for tui text editor, which is the best wysiwyg editor that is XSS safe, so I made this alignment plugin, which is a lot similar to color syntax plugin:

       /**
         * Align plugin
         * @param {Object} context - plugin context for communicating with editor
         * @param {Object} options - options for plugin
         */
        const alignTextPlugin = (
            context,
            options = {}
        ) => {
            const { eventEmitter, i18n, usageStatistics = false, pmState } = context;

            addLangs(i18n);
            const toolbarItems = createToolbarItemOption(null, i18n);

            const pluginReturn = {
                markdownCommands: {
                    alignTextLeft: (_, ...rest) => pluginReturn.markdownCommands.alignText({ selectedAlignment: 'left' }, ...rest),
                    alignTextRight: (_, ...rest) => pluginReturn.markdownCommands.alignText({ selectedAlignment: 'right' }, ...rest),
                    alignTextCenter: (_, ...rest) => pluginReturn.markdownCommands.alignText({ selectedAlignment: 'center' }, ...rest),
                    alignTextJustify: (_, ...rest) => pluginReturn.markdownCommands.alignText({ selectedAlignment: 'justify' }, ...rest),

                    alignText: ({ selectedAlignment }, { tr, selection, schema }, dispatch) => {
                        if (selectedAlignment) {
                            const slice = selection.content();
                            const textContent = slice.content.textBetween(0, slice.content.size, '\n');
                            const openTag = `<span style="display: block; text-align: ${selectedAlignment};">`;
                            const closeTag = `</span>`;
                            const aligned = `${openTag}${textContent}${closeTag}`;

                            tr.replaceSelectionWith(schema.text(aligned)).setSelection(
                                createSelection(tr, selection, pmState.TextSelection, openTag, closeTag)
                            );

                            dispatch(tr);

                            return true;
                        }
                        return false;
                    },
                },
                wysiwygCommands: {
                    alignTextLeft: (_, ...rest) => pluginReturn.wysiwygCommands.alignText({ selectedAlignment: 'left' }, ...rest),
                    alignTextRight: (_, ...rest) => pluginReturn.wysiwygCommands.alignText({ selectedAlignment: 'right' }, ...rest),
                    alignTextCenter: (_, ...rest) => pluginReturn.wysiwygCommands.alignText({ selectedAlignment: 'center' }, ...rest),
                    alignTextJustify: (_, ...rest) => pluginReturn.wysiwygCommands.alignText({ selectedAlignment: 'justify' }, ...rest),

                    alignText: ({ selectedAlignment }, { tr, selection, schema }, dispatch) => {
                        if (selectedAlignment) {
                            const { from, to } = selection;
                            console.log({ from, to });
                            console.log(selection, schema);
                            const attrs = { htmlAttrs: { style: `display: block; text-align: ${selectedAlignment};` } };
                            const mark = schema.marks.span.create(attrs);
                            console.log(tr)

                            tr.addMark(from, to, mark);
                            console.log(tr)
                            dispatch(tr);

                            return true;
                        }
                        return false;
                    },
                },
                toolbarItems: toolbarItems.map((item, i) => ({
                    groupIndex: 0,
                    itemIndex: 3 + i,
                    item,
                })),
                toHTMLRenderers: {
                    htmlInline: {
                        span(node, { entering }) {
                            return entering
                                ? { type: 'openTag', tagName: 'span', attributes: node.attrs }
                                : { type: 'closeTag', tagName: 'span' };
                        },
                    },
                },
            };

            return pluginReturn;
        }

        // Adiciona o CSS do alinhador de imagens
        const addInlineCss = (css) => {
            const { head } = document;
            const style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = css;
            head.appendChild(style);
        }
        addInlineCss(
            `.align-left {
                background: url({% static 'align_text_left-64x64.png' %});
                background-position: center;
                background-size: contain;
            }
            .align-center {
                background: url({% static 'align_text_center-64x64.png' %});
                background-position: center;
                background-size: contain;
            }
            .align-justify {
                background: url({% static 'align_text_justify-64x64.png' %});
                background-position: center;
                background-size: contain;
            }
            .align-right {
                background: url({% static 'align_text_right-64x64.png' %});
                background-position: center;
                background-size: contain;
            }`
        );

Now, this works fine, but when I try to align a text that is colored with color picker, the color disappears, and when I try to color an aligned item, the alignment resets to default.

I tried all the ways around solving it, but I can't figure how to solve this bug...

Also, if you would like to incorporate the alignPlugin into the oficial editor, it would be awesome.

Thank you in advance,
Tom.