How to split the figure block correctly

1

I have customized a figure node.

figure: {
    attrs: { src: "" },
    group: "block",
    marks: "",
    content: "inline*",
    parseDOM: [
      {
        tag: "img[src]",
        getAttrs(dom) {
          return {
            src: dom.getAttribute("src")
          };
        }
      },
      {
        tag: "figure",
        contentElement: "figcaption",
        getAttrs(dom) {
          let img = dom.querySelector("img");
          return { src: img ? img.src : null };
        }
      }
    ],
    toDOM(node) {
      return ["figure", ["img", { src: node.attrs.src }], ["figcaption", 0]];
    }
}

And the rendered html:

<figure>
    <img src="example.jpg" />
    <figcaption>This is description</figcaption>
</figure>

Suppose the cursor is after “is”, press Enter.

The expected result is

<figure>
    <img src="example.jpg" />
    <figcaption>This is</figcaption>
</figure>
<p> description</p>

But actually it is

<figure>
    <img src="example.jpg" />
    <figcaption>This is</figcaption>
</figure>

<figure>
    <img src="example.jpg" />
    <figcaption> description</figcaption>
</figure>

How can I get the expected results?:sob::sob:

1 Like
2

I haven’t found a solution yet, so I can only use other processing logic.

Determines if the cursor is at the end of the content, and if so, allows splitting, otherwise no action is taken.

But I still want to know if there is an easy way to achieve the above results. :grinning::grinning:

3

You’ll want to bind a custom command to enter (along with the default commands) that detects this situation and produces the effect you want (replace the cursor position with, basically, </figcaption></figure><p>, so a slice that has an empty caption wrapped in a figure, followed by an empty paragraph, and openStart == 2 and openEnd == 1)

4

thank you for your reply.

I have tried other editors before, such as slatejs draftjs, but they perform badly on mobile browsers. Until I used prosemirror, it was really cool.