TipTap extension to change color/style of bullets

Questions
,
1

In a design we have some custom style for unordered/ordered lists, where the blue background cna be changed to other predefined colors.

image
image566×327 10 KB

The are a few options to solve this:

  • Block in richtext (TipTap) editor. Benefit it that is can be re-used in other parts on code, familiar configuration of block. Downside is that text is isolated from rest on the text.
  • Custom class/style to select for ul/ol elements. It probably doesn’t require much configuration, but downside is that it probably isn’t very editor friendly (or different approach that in other parts where same predefined colors are used for background colors).
  • TipTap extension. I haven’t looked much into this yet. I wonder e.g. uui-swatches component can be used here:
    Extensions | Umbraco CMS
2

I tried using a custom style menu:

export const manifests: Array<UmbExtensionManifest> = [
    {
        type: "tiptapToolbarExtension",
        kind: "styleMenu",
        alias: "Custom.Tiptap.StyleMenu",
        name: "Custom Tiptap Style Menu",
        meta: {
            alias: "myCustomStyleMenu",
            icon: "icon-palette",
            label: "Custom styles"
        },
        items: [
            {
                label: "Lists",
                items: [
                    {
                        label: "Bullet Primary",
                        data: { tag: "ul", class: "list-primary" },
                        appearance: { icon: "icon-circle-dotted-active" }
                    },
                    {
                        label: "Bullet Secondary",
                        data: { tag: "ol", class: "list-primary" },
                        appearance: { icon: "icon-circle-dotted-active" }
                    }
                ]
            }
        ]
    }
];

I think it is only valid to have a single tag per item.

It works using these items and switching betweeen ul/ol styles on from paragraph, but if I switch between the unordered styles it also toggle between ul/p elements.

items: [
    {
        label: "Bullet Primary (blue)",
        data: { tag: "ul", class: "list-primary" },
        appearance: { icon: "icon-circle-dotted-active" }
    },
    {
        label: "Bullet Secondary (orange)",
        data: { tag: "ul", class: "list-secondary" },
        appearance: { icon: "icon-circle-dotted-active" }
    },
    {
        label: "Bullet Dark (dark blue)",
        data: { tag: "ul", class: "list-dark" },
        appearance: { icon: "icon-circle-dotted-active" }
    },
    {
        label: "Bullet Default (white)",
        data: { tag: "ul", class: "list-default" },
        appearance: { icon: "icon-circle-dotted-active" }
    },
    {
        label: "Bullet Primary (blue)",
        data: { tag: "ol", class: "list-primary" },
        appearance: { icon: "icon-shape-circle" }
    },
    {
        label: "Bullet Secondary (orange)",
        data: { tag: "ol", class: "list-secondary" },
        appearance: { icon: "icon-shape-circle" }
    },
    {
        label: "Bullet Dark (dark blue)",
        data: { tag: "ol", class: "list-dark" },
        appearance: { icon: "icon-shape-circle" }
    },
    {
        label: "Bullet Default (white)",
        data: { tag: "ol", class: "list-default" },
        appearance: { icon: "icon-shape-circle" }
    }
]