League of Extraordinary FoundryVTT Developers•7mo ago

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 ```js Hooks.on("getProseMirrorMenuDropDowns", (menu, items) => { const wrapIn = foundry.prosemirror.commands.wrapIn; if ("format" in items) {...

Jump to solution

5 Replies

Solution

Clemente•7mo ago

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;
                    },
                }
            ]
        });
    }
});

LyynixOP•7mo ago

Thanks, that helped alot 👍 for people that need this in v11: exchange foundry.prosemirror.commands.wrapIn with ProseMirror.commands.wrapIn at least for me foundry.prosemirror is undefined

Leo The League Lion•7mo ago

@Lyynix gave :vote: LeaguePoints™ to @Clemente (#49 • 57)

Clemente•7mo ago

Ah, I copied it from a V12-only code. I didn't notice it wasn't V11-compatible

LyynixOP•7mo ago

oh, so in v12 its foundry.prosemirror? good to know^^

Gaming

Programming

How to add buttons to the ProseMirror Menu?