Thank you, this worked great. I have one more problem with deleting nodes.
My current document structure:
<section>
<p>text
<image_section>
<image_block>
<img>
<caption>
<section>
<p>
When using backspace in last <p> node, it used to join the <p> backwards into image_section as described here. so I constrained image_section content to be:
image_section: {
content: "(image_block){1}(caption){1}",
group: "container",
defining: true, /* Don't know what this is. */
parseDOM: [{tag: "div.section_content.editor-image"}],
toDOM(node) { return ["div", {class: "section_content editor-image"}, 0] }
},
I also modified image node to be not inline and as a leaf node, as I did not want it to be treated as text.
If I press backspace, the cursor moves back into caption as expected. When caption is empty, it deletes the <img> but not image_section, image_block or caption nodes. These nodes cannot be deleted at the moment.
How would you define your nodes to delete whole <image_section> with backspace, when caption is empty?
My nodes for reference:
doc: {
content: "(section|image_section)+"
},
image_section: {
content: "(image_block){1}(caption){1}",
group: "container",
defining: true, /* Don't know what this is. */
parseDOM: [{tag: "div.section_content.editor-image"}],
toDOM(node) { return ["div", {class: "section_content editor-image"}, 0] }
},
// :: NodeSpec Wrapper tag around images.
image_block: {
content: "image{1}",
group: "block",
defining: true,
parseDOM: [{ tag: "div.imageblock" }],
toDOM() { return ["div", { class: "imageblock"}, 0] }
},
// :: NodeSpec An inline image (`<img>`) node. Supports `src`,
// `alt`, and `href` attributes. The latter two default to the empty
// string.
image: {
inline: false,
isLeaf: true,
attrs: {
src: { default: null},
alt: {default: null},
title: {default: null}
},
/*group: "",*/
/*draggable: true,*/
parseDOM: [{tag: "img[src]", getAttrs(dom) {
return {
src: dom.getAttribute("src"),
title: dom.getAttribute("title"),
alt: dom.getAttribute("alt")
}
}}],
toDOM(node) { return ["img", node.attrs] }
},
// A special paragraph that goes under images only.
caption: {
content: "inline*",
group: "block",
attrs: { class: {default: "caption"}},
parseDOM: [{tag: "p.caption"}],
toDOM(node) {
node.attrs["data-placeholder"] = "Add caption here.";
return ["p", node.attrs, 0]
}
},
Alternatively I could define a tooltip on the image and a special delete command, but I’d love to have your advice first.
Thank you, Bahadir