Prosemirror Plugin for GrapesJS Studio SDK

1

Hey all,

I’m using GrapesJS’s plugin for Prosemirror (https://app.grapesjs.com/docs-sdk/plugins/rte/prosemirror) but it looks like they’ve configured their schema to output <div> tags for everything instead of semantic HTML like paragraph tags. I’ve been able to extend the schema and modify it to do so with the code below, however some things are breaking as a result:

  1. Text Align no longer functions correctly, when I click on those buttons nothing happens - no error logging or anything. I suspect this is because I’m updating the “div” node but not confirmed

  2. Setting text to a header and then back to normal text results in it converting from paragraph → header → div, so my fix below isn’t actually kicking in when I use the header options apparently

Any ideas how to solve these? Thanks!

StudioSdkPlugins_prosemirror.init({

        schema: ({ schema }) => {

            const Schema = schema.constructor;

            const newNodes = schema.spec.nodes.update("div", {

                ...schema.spec.nodes.get("div"),

                parseDOM: [{ tag: "p" }],  

                toDOM() { return ["p", { class: 'x_text' }, 0]; }

            });

            return new Schema({

                nodes: newNodes,

                marks: schema.spec.marks

            });

        },
2

If there’s another node type in the schema using <p> tags, you’ll need to make sure your parse rule matches only the proper nodes (tag: "p.x_text") and make it run with a higher precedence than regular paragraphs. But the alignment problem doesn’t really sound like that’s the issue. Maybe there’s some CSS rule only targeting <div> elements?