扩展tiptap2的两个TextStyle自定义扩展

Question

在tiptap2中，我有两个自定义扩展，它们添加了一个类与一个样式，因为我使用的是尾风，它只利用类，而不是内联样式。

因此，第一个增加‘class=’文本-绿色-500“(或其他什么)，同样，‘class=’bg-绿色-500”。我在这两个自定义扩展中扩展了TextStyle，以便允许类和跨。我相信答案在于一次扩展textstyle，但我不知道如何做到这一点，并捕捉这两种结果。

我不能通过高光跨度和颜色跨度将两者结合在一起。

如果我采取以下措施：

​

然后试着把"w“变成不同的颜色，我得到：

​

我想要实现的是“你好”与完全青色，但仍然能够应用单独的字体颜色在外部跨度(反之亦然)。

import { TextStyle } from '@tiptap/extension-text-style';

export const HighlightColorStyle = TextStyle.extend({
    parseHTML() {
        return [
            {
                tag: 'span',
                getAttrs: (node) => /text|bg-[\w]*-[1-9]00/.test(node.className)
            }
        ];
    }
});

export const HighlightColor = Extension.create({
    name: 'highlightColor',

    addGlobalAttributes() {
        return [
            {
                types: ['textStyle'],
                attributes: {
                    class: {
                        default: ''
                    }
                }
            }
        ];
    },
    addCommands() {
        return {
            setHighlightColor:
                (color) =>
                ({ chain }) => {
                    console.log('hoadodoadfaf', color);
                    return chain().setMark('textStyle', { class: color });
                },
            toggleHighlightColor:
                () =>
                ({ chain }) => {
                    return chain().toggleMark('textStyle');
                },
            unsetHighlightColor:
                () =>
                ({ chain }) => {
                    return chain().setMark('textStyle', { class: null }).removeEmptyTextStyle();
                }
        };
    }
});

和

import { Extension } from '@tiptap/core';
import { TextStyle } from '@tiptap/extension-text-style';

export const TextColorStyle = TextStyle.extend({
    parseHTML() {
        return [
            {
                tag: 'span',
                getAttrs: node => /text-[\w]*-[1-9]00/.test(node.className) 
            }
        ];
    }
});

export const TextColor = Extension.create({
    name: 'textColor',

    addGlobalAttributes() {
        return [
            {
                types: ['textStyle'],
                attributes: {
                    class: {
                        default: ''
                    }               }
            }
        ];
    },
    addCommands() {
        return {
            setTextColor:
                color =>
                ({ chain }) => {
                    console.log('hoadodoadfaf', color)
                    return chain().setMark('textStyle', { class: color });
                },
            toggleTextColor:
                () =>
                ({ chain }) => {
                    return chain().toggleMark('textStyle');
                },
            unsetTextColor:
                () =>
                ({ chain }) => {
                    return chain().setMark('textStyle', { class: null }).removeEmptyTextStyle();
                }
        };
    }
});

Answer 1

您应该将类视为对象而不是字符串，这样多个类就可以组合在一起，然后添加一个ClassExtension将类应用到标记中。

ClassExtension的工作方式类似于textStyle，但它将应用类，textStyle不应用样式，因为样式是由单个扩展应用的对象。

根据修改后的classNames扩展扩展编写一个简单的testStyle。