Embedding image in a figure element with a figcaption

[svennerberg]

I'm struggling with how to do this:

<figure class="is-left">
  <img src="image.jpg" alt="alt text">
  <figcaption>Caption for image goes here</figcaption>
</figure>

The things I want to achieve here is to:

• upload an image
• put it inside a figure element in the document
• be able to set a class on the figure element (for example is-left, is-centered, is-right)
• be able to write a caption for the image
• be able to add an alt-text for the image

I guess it involves creating a schema for <figure> but I have a hard time understanding how schemas work in general and with nested elements in particular.

Has anyone done something similar to this and/or have some example code to show? I would really appreciate any help!

[BrianHung]

These nodes should work for the most part, but you're going to have to modify them to do what you want to achieve:

• upload an image
  depends on you're storing images
• put it inside a figure element in the document
  "image figcaption" takes care of that
• be able to set a class on the figure element (for example is-left, is-centered, is-right)
  modify the figure schema to support this
• be able to write a caption for the image
  figcaption takes care of that
• be able to add an alt-text for the image
  alt in image schema takes care of that

Figure.js

import { Node   } from 'tiptap'
import { Plugin } from 'prosemirror-state'

export default class Figure extends Node {

  get name() {
    return "figure";
  }

  get schema() {
    return {
      content: "image figcaption",
      group: "block",
      parseDOM: [{tag: "figure"}],
      toDOM: node => ["figure", 0],
    };
  }

  // Deletes the entire figure node if imageNode is empty.
  get plugins() {
    return [
      new Plugin ({
        appendTransaction: (transactions, oldState, newState) => {
          const tr = newState.tr
          let modified = false;
          // TO-DO: Iterate through transactions instead of descendants.
          newState.doc.descendants((node, pos, parent) => {
            if (node.type.name != "figure") return;
            let imageNode = node.firstChild;
            if (imageNode.attrs.src == imageNode.type.defaultAttrs.src &&
                imageNode.attrs.alt == imageNode.type.defaultAttrs.alt)
              {
                tr.deleteRange(pos, pos + node.nodeSize);
                modified = true;
              }
          })
          if (modified) return tr;
        }
      })
    ];
  }

}

Image.js

import { Node, Plugin } from "tiptap"
import { fs, Path, Buffer } from "filer"

export default class Image extends Node {

  get name() {
    return "image"
  }

  get schema() {
    return {
      inline: false,
      attrs: {src: {default: ""}, alt: {default: ""}},
      parseDOM: [{tag: "img", getAttrs: dom => ({src: dom.src, alt: dom.alt})}],
      toDOM: node => ["img", node.attrs],
    }
  }

  commands({ type }) {
    return attrs => (state, dispatch) => {
      const { selection } = state
      const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
      const node = type.create(attrs)
      const transaction = state.tr.insert(position, node)
      dispatch(transaction)
    }
  }

  get plugins() {
    return [
      new Plugin({
        props: {
          handleDOMEvents: {
            drop(view, event) {

              if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length)
                return

              const images = Array.from(event.dataTransfer.files).filter(file => {
                return (/image/i).test(file.type)
              })

              if (images.length == 0) return

              event.preventDefault()

              const { schema } = view.state
              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })

              images.forEach(image => {

                // This is where you would upload image to a server or a filesystem,
                // then create an imageNode.
                const node = schema.nodes.image.create({src: XXX, alt: YYY})
                const tr = view.state.tr.insert(coordinates.pos, node)
                view.dispatch(tr)

              })

            },
          },
        },
      }),
    ]
  }

}

Figcaption.js

import {Node} from 'tiptap'

export default class Figcaption extends Node {

  get name() {
    return "figcaption"
  }

  get schema() {
    return {
      content: "inline*",
      group: "figure",
      // TO-DO: get image alt if figcaption not found using prosemirror-model
      parseDOM: [{tag: "figcaption"}],
      toDOM: node => ["figcaption", 0],
    }
  }
}

[svennerberg]

Thanks a lot @BrianHung! I will give this a try.

[deepaksisodiya]

Hey, we are creating our editor using tiptap. Made a custom block for Image. We will going to open source it soon.

For Image

import { Image as TiptapImage } from "tiptap-extensions";
import { TextSelection } from "tiptap";

export default class Image extends TiptapImage {
  get schema() {
    return {
      attrs: {
        src: {},
        alt: {
          default: ""
        },
        caption: {
          default: ""
        }
      },
      group: "block",
      draggable: true,
      selectable: false,
      parseDOM: [
        {
          tag: "img[src]",
          getAttrs: dom => ({
            src: dom.getAttribute("src"),
            alt: dom.getAttribute("alt"),
            caption: dom.getAttribute("caption")
          })
        }
      ],
      toDOM: node => ["img", node.attrs]
    };
  }

  commands({ type }) {
    return attrs => (state, dispatch) => {
      return dispatch(state.tr.replaceSelectionWith(type.create(attrs)));
    };
  }

  get view() {
    return {
      props: ["node", "updateAttrs", "view", "getPos"],
      data() {
        return {
          editor: null
        };
      },
      watch: {
        "view.editable"() {
          this.editor.setOptions({
            editable: this.view.editable
          });
        }
      },
      computed: {
        src: {
          get() {
            return this.node.attrs.src;
          },
          set(src) {
            this.updateAttrs({
              src
            });
          }
        },
        caption: {
          get() {
            return this.node.attrs.caption;
          },
          set(caption) {
            this.updateAttrs({
              caption
            });
          }
        }
      },
      mounted() {},
      methods: {
        captionPlaceHolder() {
          return "Placeholder";
        },
        handleKeyup(event) {
          let {
            state: { tr }
          } = this.view;
          const pos = this.getPos();
          if (event.key === "Backspace" && !this.caption) {
            let textSelection = TextSelection.create(tr.doc, pos, pos + 1);
            this.view.dispatch(
              tr.setSelection(textSelection).deleteSelection(this.src)
            );
            this.view.focus();
          } else if (event.key === "Enter") {
            let textSelection = TextSelection.create(tr.doc, pos + 2, pos + 2);
            this.view.dispatch(tr.setSelection(textSelection));
            this.view.focus();
          }
        }
      },
      template: `
          <figure>
            <img :src="src" />
            <figcaption><input v-model="caption" placeholder="Type caption for image (optional)" @keyup="handleKeyup"/></figcaption>
          </figure>
        `
    };
  }
}

[neelay92]

@BrianHung
So this works well. However if I want to set figure caption via command.image({src}), how do I achieve it. Any help would be appreciated

[BrianHung]

@neelay92

You would have to modify the commands function. I would recommend, instead of modifying command.image directly, creating a command.figure({src, caption}) in figure.js that creates (using createAndFill) and inserts a figure node into the document.

[neelay92]

@BrianHung
Here's what I did. It seems to work. Any further optimisations would be appreciated. I am still trying to learn prosemirror and tiptap.

commands({ type }) {
		return attrs => (state, dispatch) => {
			const { selection } = state
			const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
			const node = type.createAndFill(attrs)
			// node.content.content[0].attrs.src = attrs.src;
			node.content.content[0].attrs = Object.assign({}, { src: node.attrs.src, alt: node.attrs.caption });
			const transaction = state.tr.insert(selection.anchor, node).insertText(node.attrs.caption, position + 3);
			// transaction.setMeta('addingImage', true)
			dispatch(transaction)
		}
	}

[BrianHung]

@neelay92

I haven't checked this, but try this out

// figure.js
commands({ type, schema }) {
  return attrs => (state, dispatch) => {
     const { tr, selection } = state
     const pos = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
     const node = type.createAndFill(attrs, schema.text(attrs.caption));
     dispatch(tr.insert(pos, node));
  }
}

I made two modifications.

1. Instead of using insertText on the figcaption node, we'll just pass it in as the content to the figure node by using schema.text. The figure content (and attrs) should propagate to the image node and figcaption node that's created since both are children defined in the schema. If you add console.log statements in the toDom methods, you should see that the figure toDom method is called before the other two.

2. For the same reason, I removed the node.content.content[0].attrs line. Another point: although this may work because the node isn't yet inserted into the document, directly mutating the content of nodes is a bad practice in ProseMirror. Instead, node content should be updated using transaction methods, such as setNodeMarkup. There's this line from the ProseMirror guide that summarizes this:

   Since nodes and fragments are persistent, you should never mutate them. If you have a handle to a document (or node, or fragment) that object will stay the same. Most of the time, you'll use transformations to update documents, and won't have to directly touch the nodes. These also leave a record of the changes, which is necessary when the document is part of an editor state.

[neelay92]

@BrianHung
So I tried everything at my disposal, but running your code always returns null for
const node = type.createAndFill(attrs, schema.text(attrs.caption));

And according to the ProseMirror doc,
createAndFill will returns null if no fitting wrapping can be found, return null.
So I wonder why there is no wrapping found!

[hakla]

Hey @neelay92, I've been giving this a try today and this is what I ended up with:

commands({ type, schema }) {
  return attrs => (state, dispatch) => {
    const { tr, selection } = state
    const pos = selection.$cursor ? selection.$cursor.pos : selection.$to.pos

    const node = type.create(null, [
      schema.nodes.image.create({
        alt: attrs.caption,
        src: attrs.src,
      }),
      schema.nodes.figcaption.create(
        null,
        attrs.caption ? schema.text(attrs.caption) : 'default caption'
      ),
    ])

    dispatch(tr.insert(pos, node))
  }
}

I still have no idea why createAndFill returns null or whatever a fitting wrapping should be, but creating the components manually (and therefore being able to pass attributes) works well for me.

[portikM]

So I used code from #573 (comment) and it worked well.

However what I am still struggling with is this part:

// TO-DO: get image alt if figcaption not found using prosemirror-model

Here's my Figcaption.js:

import { Node } from 'tiptap'

export default class Figcaption extends Node {
    get name() {
        return "figcaption"
    }

    get schema() {
        return {
            content: "inline*",
            group: "figure",
            attrs: { attribution: { default: "" } },
            parseDOM: [
                { tag: "img", getAttrs: dom => ({ attribution: dom.dataset.attribution }) },
                { tag: "figcaption" }
            ],
            toDOM: node => [
                "figcaption",
                {
                    contenteditable: node.attrs.attribution ? false : true,
                },
                node.attrs.attribution || "Add attribution here"
            ],
        }
    }
}

But node.attrs.attribution here is undefined even though when I inspect element, the data-attribution="some text" is there. Does anyone know what I am doing wrong?

[BrianHung]

@portikM Try using hakla's method #573 (comment) of initializing the figcaption within the figure creation. I would also try expanding the getAttrs function to be more debug-able:

getAttrs: dom => {
  console.log(dom); // check if dom.dataset exists
  return {attribution: dom.dataset.attribution}
}

[portikM]

@BrianHung that makes sense, yes. But when I try to console.log(dom) it's not even being triggered which means the img node isn't found in the nodes list.

[dokudoki]

@BrianHung Thank you for the code, it helped me a lot. I ended up using state.tr.replaceSelectionWith(node) instead of insert. With insert() it created extra paragraphs top and bottom of the figure.

[enkota]

@BrianHung Thank you for the code, it helped me a lot. I ended up using state.tr.replaceSelectionWith(node) instead of insert. With insert() it created extra paragraphs top and bottom of the figure.

That didn't seem to solve the issue after you save. The paragraphs top/bottom still seem to add. Did you solve it?

Edit: Was related to the div I wrapped around the toDOM method.