Make a node act like input tag

Show
1

I have node with a tag name ‘figcaption’. I need to make this act like a input tag. ie., an input tag with tagname, ‘figcaption’. Is there any way?

2

What do you mean by an input tag? If you mean something like a paragraph with a content hole, then

  get schema(): NodeSpec {
    return {
      content: "inline*",
      group: "figure",
      parseDOM: [{tag: "figcaption"}],
      toDOM() { return ["figcaption", 0]; },
    };
  }
3

Thanks for the reply. Yes I need the figcaption tag, but with a placeholder. I have done the similar. content: ‘inline*’,

  group: 'figure',

  draggable: true,

  attrs: {

    class: { default: '' },

    dataContent: { default: '' },

  },

  toDOM: node => {

    return ['figcaption', node.attrs, 0];

  },

  parseDOM: [

    {

      tag: 'figcaption',

      getAttrs(dom) {

        return {

          class: dom.getAttribute('class'),

          dataContent: dom.getAttribute('dataContent'),

        };

      },

    },

  ],

Any solution? . I insert this node inside another node figure eg: Some caption. Also, when I drag the figure, the caption doesnt gets dragged because i have set contenteditable as true. Any suggestion?

4

If you want a placeholder, I would recommend making an extension like this which either adds a class or a decoration when the node itself is empty.

Also, when I drag the figure, the caption doesnt gets dragged because i have set contenteditable as true.

You shouldn’t need contenteditable to be set to true cause it has a content hole. As for dragging, make sure you’re dragging the figure not the figcaption only.

5

The image node ( firstchild node) gets dragged along with its parentnode( figure), leaving the figcaption ( second child node ). I have draggable: true to all the three nodes.