javascript - How to use tiptap to implement an editable inline label? - Stack Overflow

admin管理员组

文章数量:1125714

I want to use tiptap to implement an editable inline label, but I found that the cursor cannot focuson the inside of the label. It always automatically jumps to the end of the label.

<script type="module">
    const EditableTag = Node.create({
        name: 'editableTag',
        group: 'inline',
        inline: true,
        content: '(inline | text)*',

        // ...

        renderHTML({ HTMLAttributes }) {
            return ['span', { 'data-type': 'editable-tag', class: 'editable-tag' }, 0]
        },

        addKeyboardShortcuts() {
            return {
                Enter: () => true,
                Backspace: ({editor}) => {
                    const { selection } = editor.state
                    console.log('Backspace', editor.state);
                    return true;
                }
            }
        },

        addNodeView() {
            return ({ node, getPos, editor }) => {
                const wrapper = document.createElement('span')
                wrapper.setAttribute('data-type', 'editable-tag')

                // create contentDOM
                const contentDOM = document.createElement('span')
                contentDOM.textContent = node.attrs.value
                contentDOM.classList.add('editable-tag-content')

                wrapper.appendChild(contentDOM)

                return {
                    dom: wrapper,
                    contentDOM, // set contentDOM as editable area
                }
            }
        },

        addCommands() {
            // ...
        }
    });
</script>

本文标签：