kabulmark
Version:
A React-based rich text editor built as a wrapper over Meta's Lexical library.
22 lines (21 loc) • 1.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { $getRoot } from "lexical";
import { useEffect, useState } from "react";
import km from "../shared/km";
export default function EditorContent({ placeholder, height }) {
const [editor] = useLexicalComposerContext();
const [isEmpty, setIsEmpty] = useState(true);
useEffect(() => {
const unregister = editor.registerUpdateListener(({ editorState }) => {
editorState.read(() => {
setIsEmpty($getRoot().getChildrenSize() === 0);
});
});
return unregister;
}, [editor]);
return (_jsxs("div", { className: km("relative"), children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: km("editor-content font-editor text-editor-text"), style: { height, overflowY: "auto" }, role: "textbox", "aria-multiline": "true", "aria-label": "Rich text editing area" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), isEmpty && (_jsx("div", { className: km("editor-placeholder absolute top-4 left-4"), children: placeholder }))] }));
}