CODEWITHSUNDEEP
javascripttiptap
Nex
Nex

Reputation: 137

Tiptap editor getAttribute of a "text" (span) element

Using TipTap Editor I would like to get the attributes of the selected range, however it always gives me the element wrapping my selection.

The editor.getAttribute(nodeType) accepts a node type name. As per my observation the editor.state.selection.$anchor.node(depth).type.name always returns paragraph or its referred element: <p>. The problem with this that specific styles applied from the editor tools are appended inside that paragraph to a <span> that is referred as text type node.

In practice I want to get the color attribute of a selected range. If the selection contains 1 or more text node, I want to get their color attributes.

As an example I am trying to get attributes like this:

editor.on("selectionUpdate", ({ editor, event }) => {
    const selectedElement = editor.state.selection.$anchor.node().type.name; // always "paragraph" while styles I want is appended to its child "text" nodes
    const style = editor.getAttributes(selectedElement);
    console.log({ style });
});

Is there a way or better way than this to return the attributes of a selection range?

Upvotes: 0

Views: 50

Answers (0)

Related Questions