diff --git a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx index 5d0a0219aa9..ac78e875932 100644 --- a/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx +++ b/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawComponent.tsx @@ -38,7 +38,7 @@ export default function ExcalidrawComponent({ }): JSX.Element { const [editor] = useLexicalComposerContext(); const [isModalOpen, setModalOpen] = useState( - data === '[]' && !editor.isReadOnly(), + data === '[]' && editor.isEditable(), ); const imageContainerRef = useRef(null); const buttonRef = useRef(null); @@ -67,9 +67,9 @@ export default function ExcalidrawComponent({ // Set editor to readOnly if excalidraw is open to prevent unwanted changes useEffect(() => { if (isModalOpen) { - editor.setReadOnly(true); + editor.setEditable(false); } else { - editor.setReadOnly(false); + editor.setEditable(true); } }, [isModalOpen, editor]); @@ -124,7 +124,7 @@ export default function ExcalidrawComponent({ }, [editor, nodeKey]); const setData = (newData: ReadonlyArray) => { - if (editor.isReadOnly()) { + if (!editor.isEditable()) { return; } return editor.update(() => { @@ -158,7 +158,7 @@ export default function ExcalidrawComponent({ isShown={isModalOpen} onDelete={deleteNode} onSave={(newData) => { - editor.setReadOnly(false); + editor.setEditable(true); setData(newData); setModalOpen(false); }} diff --git a/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx index b7bc4c4c11d..ac0b3863829 100644 --- a/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx +++ b/packages/lexical-playground/src/plugins/ActionsPlugin/index.tsx @@ -80,7 +80,7 @@ export default function ActionsPlugin({ isRichText: boolean; }): JSX.Element { const [editor] = useLexicalComposerContext(); - const [isReadOnly, setIsReadOnly] = useState(() => editor.isReadOnly()); + const [isEditable, setIsEditable] = useState(() => editor.isEditable()); const [isSpeechToText, setIsSpeechToText] = useState(false); const [connected, setConnected] = useState(false); const [isEditorEmpty, setIsEditorEmpty] = useState(true); @@ -89,8 +89,8 @@ export default function ActionsPlugin({ useEffect(() => { return mergeRegister( - editor.registerReadOnlyListener((readOnly) => { - setIsReadOnly(readOnly); + editor.registerEditableListener((editable) => { + setIsEditable(editable); }), editor.registerCommand( CONNECTED_COMMAND, @@ -110,7 +110,7 @@ export default function ActionsPlugin({ // If we are in read only mode, send the editor state // to server and ask for validation if possible. if ( - isReadOnly && + !isEditable && dirtyElements.size > 0 && !tags.has('historic') && !tags.has('collaboration') @@ -134,7 +134,7 @@ export default function ActionsPlugin({ }); }, ); - }, [editor, isReadOnly]); + }, [editor, isEditable]); const handleMarkdownToggle = useCallback(() => { editor.update(() => { @@ -208,17 +208,17 @@ export default function ActionsPlugin({