Migrating from `<input>` to contentEditable and handle selection

I'd like to migrate from using

<input>

<input>

<input>

<input> to using

<div contenteditable="true">

<div contenteditable="true">

<div contenteditable="true">

<div contenteditable="true"> (to enable text selection across multiple elements) but I am not sure how to migrate some code, and whether I should use some SolidJS-specific way to handle selections. The specific code I am wondering about is here: https://github.com/ToposInstitute/CatColab/blob/43e054aa5efb57bf98fa4fabc2c9c21c9a0a9493/packages/frontend/src/model/object_cell_editor.tsx#L19-L26

    let nameRef!: HTMLInputElement;

    createEffect(() => {
        if (props.isActive) {
            nameRef.focus();
            nameRef.selectionStart = nameRef.selectionEnd = nameRef.value.length;
        }
    });

    let nameRef!: HTMLInputElement;

    createEffect(() => {
        if (props.isActive) {
            nameRef.focus();
            nameRef.selectionStart = nameRef.selectionEnd = nameRef.value.length;
        }
    });

    let nameRef!: HTMLInputElement;

    createEffect(() => {
        if (props.isActive) {
            nameRef.focus();
            nameRef.selectionStart = nameRef.selectionEnd = nameRef.value.length;
        }
    });

    let nameRef!: HTMLInputElement;

    createEffect(() => {
        if (props.isActive) {
            nameRef.focus();
            nameRef.selectionStart = nameRef.selectionEnd = nameRef.value.length;
        }
    });

GitHub

CatColab/packages/frontend/src/model/object_cell_editor.tsx at 43e0...

A collaborative environment for formal, interoperable, conceptual modeling - ToposInstitute/CatColab

Migrating from `<input>` to contentEditable and handle selection

Similar Threads

Similar Threads

Similar Threads