How to add buttons to the ProseMirror Menu?

The title is only part of the question, I have already added a button and dropdown to ProseMirror, that inserts text at the cursor. That works fine and all, however I'd like to be able to wrap the selected paragraph in a div that has a custom css class. (similar to the Fonts wrapping the elected text in a span with custom styling)

I have inspected the foundry code, how they did it. However they use functions that aren't available from a module scope (at least not that I found them)

I also couldn't find any modules that add similar functionality to the PM Editor... is that just not possible for a module?

Solution

try something like this

Hooks.on("getProseMirrorMenuDropDowns", (menu, items) => {
    const wrapIn = foundry.prosemirror.commands.wrapIn;
    if ("format" in items) {
        items.format.entries.push({
            action: "foo",
            title: "Foo",
            children: [
                {
                    action: "bar",
                    title: "Bar",
                    node: menu.schema.nodes.div,
                    attrs: { class: "foobar" },
                    cmd: () => {
                        menu._toggleBlock(menu.schema.nodes.div, wrapIn, {
                            attrs: { _preserve: { class: "foobar" } },
                        });
                        return true;
                    },
                }
            ]
        });
    }
});

Hooks.on("getProseMirrorMenuDropDowns", (menu, items) => {
    const wrapIn = foundry.prosemirror.commands.wrapIn;
    if ("format" in items) {
        items.format.entries.push({
            action: "foo",
            title: "Foo",
            children: [
                {
                    action: "bar",
                    title: "Bar",
                    node: menu.schema.nodes.div,
                    attrs: { class: "foobar" },
                    cmd: () => {
                        menu._toggleBlock(menu.schema.nodes.div, wrapIn, {
                            attrs: { _preserve: { class: "foobar" } },
                        });
                        return true;
                    },
                }
            ]
        });
    }
});

Jump to solution

LoEFD

League of Extraordinary FoundryVTT Developers•2y ago•

7 replies

Lyynix

How to add buttons to the ProseMirror Menu?

Solution

try something like this

Hooks.on("getProseMirrorMenuDropDowns", (menu, items) => {
    const wrapIn = foundry.prosemirror.commands.wrapIn;
    if ("format" in items) {
        items.format.entries.push({
            action: "foo",
            title: "Foo",
            children: [
                {
                    action: "bar",
                    title: "Bar",
                    node: menu.schema.nodes.div,
                    attrs: { class: "foobar" },
                    cmd: () => {
                        menu._toggleBlock(menu.schema.nodes.div, wrapIn, {
                            attrs: { _preserve: { class: "foobar" } },
                        });
                        return true;
                    },
                }
            ]
        });
    }
});

Hooks.on("getProseMirrorMenuDropDowns", (menu, items) => {
    const wrapIn = foundry.prosemirror.commands.wrapIn;
    if ("format" in items) {
        items.format.entries.push({
            action: "foo",
            title: "Foo",
            children: [
                {
                    action: "bar",
                    title: "Bar",
                    node: menu.schema.nodes.div,
                    attrs: { class: "foobar" },
                    cmd: () => {
                        menu._toggleBlock(menu.schema.nodes.div, wrapIn, {
                            attrs: { _preserve: { class: "foobar" } },
                        });
                        return true;
                    },
                }
            ]
        });
    }
});

Jump to solution

How to add buttons to the ProseMirror Menu?

Similar Threads

How to add buttons to the ProseMirror Menu?

Similar Threads

Similar Threads

Similar Threads