Prepend extension slot in TipTap style menu

[bjarnef]

I had a look at extension using custom style menu in TipTap:
https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/style-menu

https://forum.umbraco.com/t/tiptap-extension-to-change-color-style-of-bullets/6615

export const manifests: Array<UmbExtensionManifest> = [
    {
        type: "tiptapToolbarExtension",
        kind: "styleMenu",
        alias: "Custom.Tiptap.StyleMenu",
        name: "Custom Tiptap Style Menu",
        meta: {
            alias: "mcbCustomStyleMenu",
            icon: "icon-palette",
            label: "Custom styles"
        },
        items: [
            {
                label: "Lists",
                items: [
                    {
                        label: "Bullet Primary",
                        data: { tag: "ul,ol", 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 I can only have a single tag per item, although same CSS class should be applied.
Should "tag" allow an array to match multiple elements (or split by comma)?

Besides that and besides icon, perhaps an extension the adjust "prepend".
In this use-use I could style element text color, but not ideal when #ffffff is an option 😅

E.g. a swatch preview in front of text.

I made a "hack" in DOM in "icon" slot to visualize this:

[bjarnef]

@leekelleher would it make sense to apply other custom markup instead on icon, e.g. a symbol (although this could just be part of text).

[bjarnef]

Emojis is an option, but may not always fit in the specific project + browsers render emojis different

[leekelleher]

@bjarnef With the the Tiptap toolbar menu items, they default to use <umb-action-menu-item>, which in turn uses <uui-menu-item>, this has an "icon" slot - of course this is a <slot>, it doesn't need to be an icon - but that the intention.

At the stage of wanting customisations to the menu-item, you could define your own web-component and reference that in the Tiptap menu's manifest, e.g.

{
    label: "Bullet Secondary",
    data: { tag: "ol", class: "list-primary" },
    elementName: "my-custom-menu-item", // to note, the `element: () => import()` equivalent hasn't been implemented yet.
}

Although, now that I'm revisiting this code, I'm noticing that the Tiptap style-menu API (and data object) might not get wired up with a custom web-component, so you may end up with workarounds or duplicating code. But we can iron those issues out in due course.

[bjarnef]

Okay thanks.. I may try that out.

For now this works okay, although it is a bit annoying it toggle the list style, when switching from one ul style to another ul style.
It would also be useful if I could combine ul and ol styles - or perhaps some grouping (either a nested level or just a group header perhaps).

items: [
    {
        label: "Lists",
        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" }
            }
        ]
    }
]

[bjarnef]

I also noticed when renaming alias of my extension on local environment from Custom.Tiptap.StyleMenu to Mcb.Tiptap.StyleMenu, the new alias was appended in datatype schema, but I still has the old alias.

I haven't included that change in my working PR for this project, but I can't see how to get rid of that - except probably just discard change and import Umbraco schemas from disk via Umbraco Deploy dashboard.