Do not display editor block placeholder when disabled

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/src/RichEditor/PlaceholderExtension.ts

@@ -3,21 +3,17 @@
 // that can be found in the LICENSE file.
 
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { type EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet, type EditorView } from "@tiptap/pm/view";
 
 const placeholderKey = new PluginKey("placeholder");
 
-export const PlaceholderExtension = Extension.create({
-  name: "placeholder",
+function computeDecorations(
+  state: EditorState,
+  editable: boolean,
+): DecorationSet {
+  if (!editable) return DecorationSet.empty;
 
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: placeholderKey,
-
-        props: {
-          decorations(state) {
   const { selection } = state;
   if (!selection.empty) return DecorationSet.empty;
 
@@ -46,6 +42,52 @@ export const PlaceholderExtension = Extension.create({
       "data-placeholder": "Write or type / for commands\u2026",
     }),
   ]);
+}
+
+export const PlaceholderExtension = Extension.create({
+  name: "placeholder",
+
+  addProseMirrorPlugins() {
+    const { editor } = this;
+
+    return [
+      new Plugin({
+        key: placeholderKey,
+
+        view() {
+          let lastEditable = editor.isEditable;
+          return {
+            update(view: EditorView) {
+              const editable = editor.isEditable;
+              if (editable !== lastEditable) {
+                lastEditable = editable;
+                view.dispatch(
+                  view.state.tr.setMeta(placeholderKey, true),
+                );
+              }
+            },
+          };
+        },
+
+        state: {
+          init(_config, state) {
+            return computeDecorations(state, editor.isEditable);
+          },
+          apply(tr, value, _oldState, newState) {
+            if (
+              !tr.docChanged
+              && !tr.selectionSet
+              && !tr.getMeta(placeholderKey)
+            ) {
+              return value;
+            }
+            return computeDecorations(newState, editor.isEditable);
+          },
+        },
+
+        props: {
+          decorations(state) {
+            return placeholderKey.getState(state) as DecorationSet;
           },
         },
       }),