fix: Issues when editor is non-editable (#783)

* Fixed some issues when editor is non-editable

* Small typing fix

* Added comment

Author: matthewlipski

packages/core/src/api/parsers/pasteExtension.ts

@@ -27,6 +27,11 @@ export const createPasteFromClipboardExtension = <
             handleDOMEvents: {
               paste(_view, event) {
                 event.preventDefault();
+
+                if (!editor.isEditable) {
+                  return;
+                }
+
                 let format: (typeof acceptedMIMETypes)[number] | null = null;
 
                 for (const mimeType of acceptedMIMETypes) {

packages/core/src/editor/Block.css

@@ -279,15 +279,14 @@ NESTED BLOCKS
   background-color: rgb(242, 241, 238);
   border-radius: 4px;
   color: rgb(125, 121, 122);
-  cursor: pointer;
   display: flex;
   flex-direction: row;
   gap: 10px;
   padding: 12px;
   width: 100%;
 }
 
-[data-file-block] .bn-add-file-button:hover {
+.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
   background-color: rgb(225, 225, 225);
 }
 

packages/core/src/editor/BlockNoteEditor.ts

@@ -194,11 +194,7 @@ export class BlockNoteEditor<
     ISchema,
     SSchema
   >;
-  public readonly filePanel?: FilePanelProsemirrorPlugin<
-    BSchema,
-    ISchema,
-    SSchema
-  >;
+  public readonly filePanel?: FilePanelProsemirrorPlugin<ISchema, SSchema>;
   public readonly tableHandles?: TableHandlesProsemirrorPlugin<
     ISchema,
     SSchema

packages/core/src/extensions/FilePanel/FilePanelPlugin.ts

@@ -5,7 +5,6 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import type {
   BlockFromConfig,
-  BlockSchema,
   FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
@@ -26,9 +25,12 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
   public state?: FilePanelState<I, S>;
   public emitUpdate: () => void;
 
-  public prevWasEditable: boolean | null = null;
-
   constructor(
+    private readonly editor: BlockNoteEditor<
+      Record<string, FileBlockConfig>,
+      I,
+      S
+    >,
     private readonly pluginKey: PluginKey,
     private readonly pmView: EditorView,
     emitUpdate: (state: FilePanelState<I, S>) => void
@@ -81,7 +83,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
       block: BlockFromConfig<FileBlockConfig, I, S>;
     } = this.pluginKey.getState(view.state);
 
-    if (!this.state?.show && pluginState.block) {
+    if (!this.state?.show && pluginState.block && this.editor.isEditable) {
       const blockElement = document.querySelector(
         `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
       )!;
@@ -99,7 +101,8 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 
     if (
       !view.state.selection.eq(prevState.selection) ||
-      !view.state.doc.eq(prevState.doc)
+      !view.state.doc.eq(prevState.doc) ||
+      !this.editor.isEditable
     ) {
       if (this.state?.show) {
         this.state.show = false;
@@ -128,22 +131,21 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
 const filePanelPluginKey = new PluginKey("FilePanelPlugin");
 
 export class FilePanelProsemirrorPlugin<
-  B extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
   private view: FilePanelView<I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(_editor: BlockNoteEditor<B, I, S>) {
+  constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>) {
     super();
     this.plugin = new Plugin<{
       block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
     }>({
       key: filePanelPluginKey,
       view: (editorView) => {
-        this.view = new FilePanelView(
-          // editor,
+        this.view = new FilePanelView<I, S>(
+          editor,
           filePanelPluginKey,
           editorView,
           (state) => {

packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -15,7 +15,6 @@ export class FormattingToolbarView implements PluginView {
 
   public preventHide = false;
   public preventShow = false;
-  public prevWasEditable: boolean | null = null;
 
   public shouldShow: (props: {
     view: EditorView;
@@ -96,16 +95,10 @@ export class FormattingToolbarView implements PluginView {
     const isSame =
       oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 
-    if (
-      (this.prevWasEditable === null ||
-        this.prevWasEditable === this.editor.isEditable) &&
-      (composing || isSame)
-    ) {
+    if (composing || isSame) {
       return;
     }
 
-    this.prevWasEditable = this.editor.isEditable;
-
     // support for CellSelections
     const { ranges } = selection;
     const from = Math.min(...ranges.map((range) => range.$from.pos));
@@ -119,11 +112,12 @@ export class FormattingToolbarView implements PluginView {
     });
 
     // Checks if menu should be shown/updated.
-    if (
-      this.editor.isEditable &&
-      !this.preventShow &&
-      (shouldShow || this.preventHide)
-    ) {
+    if (!this.preventShow && (shouldShow || this.preventHide)) {
+      // Unlike other UI elements, we don't prevent the formatting toolbar from
+      // showing when the editor is not editable. This is because some buttons,
+      // e.g. the download file button, should still be accessible. Therefore,
+      // logic for hiding when the editor is non-editable is handled
+      // individually in each button.
       this.state = {
         show: true,
         referencePos: this.getSelectionBoundingBox(),

packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx

@@ -101,7 +101,7 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
     return !!selectedBlocks.find((block) => block.content !== undefined);
   }, [basicTextStyleInSchema, selectedBlocks]);
 
-  if (!show) {
+  if (!show || !editor.isEditable) {
     return null;
   }
 

packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx

@@ -131,7 +131,7 @@ export const ColorStyleButton = () => {
     return false;
   }, [backgroundColorInSchema, selectedBlocks, textColorInSchema]);
 
-  if (!show) {
+  if (!show || !editor.isEditable) {
     return null;
   }
 

packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx

@@ -78,7 +78,11 @@ export const CreateLinkButton = () => {
     return true;
   }, [linkInSchema, selectedBlocks]);
 
-  if (!show || !("link" in editor.schema.inlineContentSchema)) {
+  if (
+    !show ||
+    !("link" in editor.schema.inlineContentSchema) ||
+    !editor.isEditable
+  ) {
     return null;
   }
 

packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx

@@ -69,7 +69,11 @@ export const FileCaptionButton = () => {
     []
   );
 
-  if (!fileBlock || checkBlockIsFileBlockWithPlaceholder(fileBlock, editor)) {
+  if (
+    !fileBlock ||
+    checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
+    !editor.isEditable
+  ) {
     return null;
   }
 

packages/react/src/components/FormattingToolbar/DefaultButtons/FileDeleteButton.tsx

@@ -45,7 +45,11 @@ export const FileDeleteButton = () => {
     editor.removeBlocks([fileBlock!]);
   }, [editor, fileBlock]);
 
-  if (!fileBlock || checkBlockIsFileBlockWithPlaceholder(fileBlock, editor)) {
+  if (
+    !fileBlock ||
+    checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
+    !editor.isEditable
+  ) {
     return null;
   }