Lexical (or another)

Hi,
I tried to make a poc with Lexical again.
Did you also have a bug that blocks the delete? Or did I do something wrong?

(my goal is to do like discord, everything is displayed with only a visual improvement)

@foolswisdom

const ExampleTheme: EditorThemeClasses = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    text: {
        bold: "editor-text-bold",
        italic: "editor-text-italic",
    },
};

function Placeholder() {
    return <div class="editor-placeholder">Enter some plain text...</div>;
}

function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

export default function TextareaAuto(props: {
    ref_scroll: HTMLElement | undefined,
    value: string,
    placeholder: string,
    class: string,
    onChange: (e: any) => void,
    onInput: (e: string) => void,
    onFocus: () => void,
    onClick?: () => void,
}) {
    const editorConfig = {
        theme: ExampleTheme,
        namespace: "",
        onError(error: any) {
            throw error;
        },
        // editorState: () => $convertFromMarkdownString(props.value, TRANSFORMERS),
    };

    return (
        <LexicalComposer initialConfig={editorConfig}>
          <div class="editor-container">
            <div class="editor-inner">
                <RichTextPlugin
                    contentEditable={<ContentEditable class="editor-input" />}
                    placeholder={<Placeholder />}
                    errorBoundary={LexicalErrorBoundary}
                />
                <TreeViewPlugin />
                <OnChangePlugin onChange={onChange} />
            </div>
          </div>
        </LexicalComposer>
      );
}

const ExampleTheme: EditorThemeClasses = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    text: {
        bold: "editor-text-bold",
        italic: "editor-text-italic",
    },
};

function Placeholder() {
    return <div class="editor-placeholder">Enter some plain text...</div>;
}

function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

export default function TextareaAuto(props: {
    ref_scroll: HTMLElement | undefined,
    value: string,
    placeholder: string,
    class: string,
    onChange: (e: any) => void,
    onInput: (e: string) => void,
    onFocus: () => void,
    onClick?: () => void,
}) {
    const editorConfig = {
        theme: ExampleTheme,
        namespace: "",
        onError(error: any) {
            throw error;
        },
        // editorState: () => $convertFromMarkdownString(props.value, TRANSFORMERS),
    };

    return (
        <LexicalComposer initialConfig={editorConfig}>
          <div class="editor-container">
            <div class="editor-inner">
                <RichTextPlugin
                    contentEditable={<ContentEditable class="editor-input" />}
                    placeholder={<Placeholder />}
                    errorBoundary={LexicalErrorBoundary}
                />
                <TreeViewPlugin />
                <OnChangePlugin onChange={onChange} />
            </div>
          </div>
        </LexicalComposer>
      );
}

const ExampleTheme: EditorThemeClasses = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    text: {
        bold: "editor-text-bold",
        italic: "editor-text-italic",
    },
};

function Placeholder() {
    return <div class="editor-placeholder">Enter some plain text...</div>;
}

function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

export default function TextareaAuto(props: {
    ref_scroll: HTMLElement | undefined,
    value: string,
    placeholder: string,
    class: string,
    onChange: (e: any) => void,
    onInput: (e: string) => void,
    onFocus: () => void,
    onClick?: () => void,
}) {
    const editorConfig = {
        theme: ExampleTheme,
        namespace: "",
        onError(error: any) {
            throw error;
        },
        // editorState: () => $convertFromMarkdownString(props.value, TRANSFORMERS),
    };

    return (
        <LexicalComposer initialConfig={editorConfig}>
          <div class="editor-container">
            <div class="editor-inner">
                <RichTextPlugin
                    contentEditable={<ContentEditable class="editor-input" />}
                    placeholder={<Placeholder />}
                    errorBoundary={LexicalErrorBoundary}
                />
                <TreeViewPlugin />
                <OnChangePlugin onChange={onChange} />
            </div>
          </div>
        </LexicalComposer>
      );
}

const ExampleTheme: EditorThemeClasses = {
    ltr: "ltr",
    rtl: "rtl",
    placeholder: "editor-placeholder",
    paragraph: "editor-paragraph",
    text: {
        bold: "editor-text-bold",
        italic: "editor-text-italic",
    },
};

function Placeholder() {
    return <div class="editor-placeholder">Enter some plain text...</div>;
}

function onChange(editorState: EditorState, editor: LexicalEditor) {
    editorState.read(() => {
        // Read the contents of the EditorState here.
        const root = $getRoot();
        const selection = $getSelection();

        console.log(root, selection);
    });
}

export default function TextareaAuto(props: {
    ref_scroll: HTMLElement | undefined,
    value: string,
    placeholder: string,
    class: string,
    onChange: (e: any) => void,
    onInput: (e: string) => void,
    onFocus: () => void,
    onClick?: () => void,
}) {
    const editorConfig = {
        theme: ExampleTheme,
        namespace: "",
        onError(error: any) {
            throw error;
        },
        // editorState: () => $convertFromMarkdownString(props.value, TRANSFORMERS),
    };

    return (
        <LexicalComposer initialConfig={editorConfig}>
          <div class="editor-container">
            <div class="editor-inner">
                <RichTextPlugin
                    contentEditable={<ContentEditable class="editor-input" />}
                    placeholder={<Placeholder />}
                    errorBoundary={LexicalErrorBoundary}
                />
                <TreeViewPlugin />
                <OnChangePlugin onChange={onChange} />
            </div>
          </div>
        </LexicalComposer>
      );
}

Lexical (or another)

Similar Threads

Similar Threads

Similar Threads