Using <input> in TipTap editor

[Tom-DK]

import {Node} from '@tiptap/core';

export interface InputOptions {
    HTMLAttributes: Record<string, any>,
}

export const Input = Node.create<InputOptions>({
    name: 'input',
    group: 'inline',
    inline: true,
    content: 'text*',
    draggable: false,
    isolating: true,
    addOptions() {
        return {
            HTMLAttributes: {},
        };
    },
    addAttributes() {
        return {
            type: {
                default: 'text',
                parseHTML: element => element.getAttribute('type'),
            },
            class: {
                default: 'input input-sm input-bordered'
            },
            value: {
                parseHTML: element => element.getAttribute('value'),
            },
            placeholder: {
                parseHTML: element => element.getAttribute('placeholder'),
            },
            id: {
                parseHTML: element => element.getAttribute('id'),
            },
        };
    },
    parseHTML() {
        return [
            {tag: 'input'},
        ];
    },
    renderHTML({HTMLAttributes}) {
        return ['input', HTMLAttributes, 0];
    },
});

When I straight click onto my input and start typing I cannot use backspace. I first have focus the editor itself. Moreover, when I press Ctrl+A in the input, the selection is not limited to the input text itself. It selects the whole editor content.

Anyone tips, on how I can tackle these two issues?

[Nantris]

You might try making your Input an atom - though the thing you're trying to do is rather complicated since you have a number of decisions to make about how things are supposed to interact (or not) with the editor - so it's difficult to give one-size fits all answers.

Regarding the atom approach:

• https://tiptap.dev/api/schema#atom
• https://prosemirror.net/docs/ref/#model.NodeSpec.atom

[Tom-DK]

Thanks for the suggestion I’ll try it out tomorrow!

Nonetheless, I should give more context; the behaviour that I’m trying to achieve is an editor with preloaded text filled with inputs. The inputs serve as guideline for the user, where he should fill in missing information. Which can be either filled in by the user, or programmatically. When an input is empty a placeholder should be shown. Basically the same as these pdfs with inputs, which you can fill in. However, on top of that you should also be able to edit all the surrounding text as well.

[Nantris]

I'm planning to build something like that myself eventually so I'll be interested to know how you fare. Let me know!

[Tom-DK]

This is were I got so far:

As you can see I no longer use an actual <input> tag, the default html behaviour caused me to much headaches. Currently, the extension almost works as it should, but still not great. I'm assuming that my approach using event.target as HTMLElement is causing concurrent behaviour with the editor.state. Causing the placeholder to not always reset correctly.

I've looked into dispatching transactions to the editor (to reset the placeholder), but without success. Anyone that can assist me here?

HTML:

<input-node id="uniqueId" data-placeholder="test">test</input-node>

CSS (for replicating placeholder):

.div-placeholder:empty:before {
    content: attr(data-placeholder);
    color: gray
}

TS

import {Plugin, PluginKey} from '@tiptap/pm/state';
import {Node} from '@tiptap/react';
import '../../styles/input.css';

export interface InputOptions {
    HTMLAttributes: Record<string, any>,
}

let inputNodeElement: HTMLElement;

export const Input = Node.create<InputOptions>({
    name: 'input-node',
    group: 'inline',
    content: 'text*',
    inline: true,
    atom: true,
    isolating: true,
    addOptions() {
        return {
            HTMLAttributes: {},
        };
    },
    addAttributes() {
        return {
            class: {
                default: 'rounded-lg border-2 inline cursor-text div-placeholder'
            },
            placeholder: {
                parseHTML: element => element.getAttribute('data-placeholder'),
                renderHTML: attributes => {
                    return {'data-placeholder': attributes.placeholder};
                }
            },
            id: {
                parseHTML: element => element.getAttribute('id'),
            },
        };
    },
    parseHTML() {
        return [
            {tag: 'input-node'},
        ];
    },
    renderHTML({HTMLAttributes}) {
        return ['input-node', HTMLAttributes, 0];
    },
    addKeyboardShortcuts() {
        return {
            Backspace: ({editor}) => {
                const selection = editor.state.selection;
                const inputNode = selection.$anchor.parent;
                if (inputNode && inputNode.type.name === this.name) {
                    if (inputNode.content.firstChild?.text?.length === 1) {
                        inputNodeElement.innerHTML = '';
                        return editor.commands.blur();
                    }
                }
                return false;
            },
        };
    },
    addProseMirrorPlugins() {
        return [
            new Plugin({
                key: new PluginKey('eventHandler'),
                props: {
                    handleClick(view, pos, event: MouseEvent) {
                        const element = event.target as HTMLElement;
                        if (element.className.includes('div-placeholder')) {
                            if (element.innerHTML === '') {
                                // Insert ZeroWidthSpace
                                element.innerHTML = '&#8203;';
                                inputNodeElement = element;
                            }
                        }
                        return false;
                    },
                },
            }),
        ];
    },
});
````

[icyxianyu]

I wonder if there is a solution for this. I am also trying to implement such a function, but there are always various problems

[Eucotopia]

As far as I know, we need to achieve these through the NodeViewContent element.“I’ve tried the solution on the input, and overall it works, but there are some interaction issues and a few minor flaws.

[Eucotopia]

1111.mp4

This is one of the issues. Of course, binding the value is not actually the difficult part.

[Eucotopia]

22222Screen_Recording_2024-11-25_at_19.48.00.mov

If we only have one input, the issue is easy to handle. However, if we have multiple inputs, I haven’t found a good solution yet. NodeViewContent seems to only support a single input, and if I use input, there are issues with binding values and interactions