Decorating text selection

1

When the user selects some text, I would like to:

  1. Wrap selected text in a wrapper node.
  2. Remove that same wrapper once the text becomes unfocused.

Currently attempting the first hurdle using Decorations but am not having much luck. The decorator is created, but nothing happens.

plugin

new Plugin({
  props: {
    decorations(state) {
      const { to, from } = state.selection;
      const decoration = Decoration.node(to, from, {
        class: "selected",
      });
      return DecorationSet.create(state.doc, [decoration]);
    }
  }
});

decorator

{
  "from": 62,
  "to": 56,
  "type": {
    "spec": {},
    "attrs": {
      "class": "draggable-container",
      "nodeName": "span"
    }
  }
}

Could anyone point me in the right direction?

Thank you!

2

I think you’re misunderstanding what Decoration.node does—it acts on a document node, it doesn’t create a node where there wasn’t one before. So you probably need Decoration.inline, but be advised that that isn’t guaranteed to create a single wrapper node—when the decorated text includes changes in marks or other decorations (or block boundaries) there’ll be one node created for nodeName for each of the pieces of text in the range.

3

Thank you @marijn! I’ll have another go at it with the Decoration.inline