fix: "Prevent editing" option not working correctly for Super notes

packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ReadonlyPlugin/ReadonlyPlugin.tsx

@@ -0,0 +1,30 @@
+import { useApplication } from '@/Components/ApplicationView/ApplicationProvider'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { SNNote, ContentType } from '@standardnotes/snjs'
+import { useState, useEffect } from 'react'
+
+const ReadonlyPlugin = ({ note }: { note: SNNote }) => {
+  const application = useApplication()
+  const [editor] = useLexicalComposerContext()
+  const [readOnly, setReadOnly] = useState(note.locked)
+
+  useEffect(() => {
+    return application.streamItems<SNNote>(ContentType.Note, ({ changed }) => {
+      const changedNoteItem = changed.find((changedItem) => changedItem.uuid === note.uuid)
+
+      if (changedNoteItem) {
+        setReadOnly(changedNoteItem.locked)
+      }
+    })
+  }, [application, note.uuid])
+
+  useEffect(() => {
+    editor.update(() => {
+      editor.setEditable(!readOnly)
+    })
+  }, [editor, readOnly])
+
+  return null
+}
+
+export default ReadonlyPlugin

packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx

@@ -37,6 +37,7 @@ import { ExportPlugin } from './Plugins/ExportPlugin/ExportPlugin'
 import GetMarkdownPlugin, { GetMarkdownPluginInterface } from './Plugins/GetMarkdownPlugin/GetMarkdownPlugin'
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'
 import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
+import ReadonlyPlugin from './Plugins/ReadonlyPlugin/ReadonlyPlugin'
 
 const NotePreviewCharLimit = 160
 
@@ -190,6 +191,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
                   <NodeObserverPlugin nodeType={BubbleNode} onRemove={handleBubbleRemove} />
                   <NodeObserverPlugin nodeType={FileNode} onRemove={handleBubbleRemove} />
                   <ExportPlugin />
+                  <ReadonlyPlugin note={note.current} />
                   {controller.isTemplateNote ? <AutoFocusPlugin /> : null}
                 </BlocksEditor>
               </BlocksEditorComposer>