Changed add block button to be a button element and added Enter handler

Author: matthewlipski

packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -52,7 +52,7 @@ export const createAddFileButton = (
   buttonText?: string,
   buttonIcon?: HTMLElement
 ) => {
-  const addFileButton = document.createElement("div");
+  const addFileButton = document.createElement("button");
   addFileButton.className = "bn-add-file-button";
 
   const addFileButtonIcon = document.createElement("div");
@@ -81,6 +81,18 @@ export const createAddFileButton = (
       })
     );
   };
+  const windowKeyDownHandler = (event: KeyboardEvent) => {
+    if (
+      event.key === "Enter" &&
+      editor.getTextCursorPosition().block.id === block.id
+    ) {
+      editor._tiptapEditor.view.dispatch(
+        editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+          block: block,
+        })
+      );
+    }
+  };
 
   addFileButton.appendChild(addFileButtonIcon);
   addFileButton.appendChild(addFileButtonText);
@@ -91,6 +103,7 @@ export const createAddFileButton = (
     true
   );
   addFileButton.addEventListener("click", addFileButtonClickHandler, true);
+  window.addEventListener("keydown", windowKeyDownHandler, true);
 
   return {
     dom: addFileButton,
@@ -105,6 +118,7 @@ export const createAddFileButton = (
         addFileButtonClickHandler,
         true
       );
+      window.removeEventListener("keydown", windowKeyDownHandler, true);
     },
   };
 };

packages/core/src/editor/Block.css

@@ -30,9 +30,9 @@ BASIC STYLES
   /*margin: 0px;*/
 }
 
-.bn-block-content.ProseMirror-selectednode > *,
+.ProseMirror-focused .bn-block-content.ProseMirror-selectednode > *,
 /* Case for node view renderers */
-.ProseMirror-selectednode > .bn-block-content > * {
+.ProseMirror-focused .ProseMirror-selectednode > .bn-block-content > * {
   border-radius: 4px;
   outline: 4px solid rgb(100, 160, 255);
 }
@@ -256,6 +256,7 @@ NESTED BLOCKS
 [data-file-block] .bn-add-file-button {
   align-items: center;
   background-color: rgb(242, 241, 238);
+  border: none;
   border-radius: 4px;
   color: rgb(125, 121, 122);
   cursor: pointer;
@@ -295,6 +296,26 @@ NESTED BLOCKS
   width: 100%;
 }
 
+[data-text-alignment="left"] .bn-file-default-preview, [data-text-alignment="left"] .bn-file-and-caption-wrapper {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+[data-text-alignment="center"] .bn-file-default-preview, [data-text-alignment="center"] .bn-file-and-caption-wrapper {
+  align-items: center;
+  justify-content: center;
+}
+
+[data-text-alignment="right"] .bn-file-default-preview, [data-text-alignment="right"] .bn-file-and-caption-wrapper {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+[data-text-alignment="justify"] .bn-file-default-preview, [data-text-alignment="justify"] .bn-file-and-caption-wrapper {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
 [data-file-block] .bn-file-default-preview:hover,
 .ProseMirror-selectednode .bn-file-default-preview {
   background-color: rgb(225, 225, 225);

packages/core/src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts

@@ -34,6 +34,30 @@ export const NonEditableBlockPlugin = () => {
           }
           // Checks if key press is Enter
           if (event.key === "Enter") {
+            // Kind of a hacky way to ensure that pressing Enter when a file
+            // block is showing the add file button will open the file panel.
+            // Here, we just make the Enter handler skip this case and the file
+            // block's implementation will have to handle it itself. It would be
+            // cleaner if both handlers were in the same place, however:
+            // - This plugin takes precedence over handlers in the file block's
+            // implementation, so we can't override the behaviour there.
+            // - This plugin has no access to the BN schema, so it can't convert
+            // the node to a block for the file panel plugin, and therefore
+            // can't open the file plugin here.
+            let blockContentDOM = view.domAtPos(view.state.selection.from)
+              .node as HTMLElement;
+            while (!blockContentDOM.className.includes("bn-block-content")) {
+              blockContentDOM = blockContentDOM.firstChild as HTMLElement;
+            }
+
+            const isFileBlock =
+              blockContentDOM.getAttribute("data-file-block") !== null;
+            const hasURL = blockContentDOM.getAttribute("data-url") !== null;
+
+            if (isFileBlock && !hasURL) {
+              return false;
+            }
+
             const tr = view.state.tr;
             view.dispatch(
               tr

packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx

@@ -68,17 +68,43 @@ export const AddFileButton = (
     props.editor._tiptapEditor.view,
     props.editor.filePanel,
   ]);
+  const windowKeyDownHandler = useCallback(
+    (event: KeyboardEvent) => {
+      if (
+        event.key === "Enter" &&
+        props.editor.getTextCursorPosition().block.id === props.block.id
+      ) {
+        props.editor._tiptapEditor.view.dispatch(
+          props.editor._tiptapEditor.state.tr.setMeta(
+            props.editor.filePanel!.plugin,
+            {
+              block: props.block,
+            }
+          )
+        );
+      }
+    },
+    [props.block, props.editor]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", windowKeyDownHandler);
+
+    return () => {
+      window.removeEventListener("keydown", windowKeyDownHandler);
+    };
+  }, [windowKeyDownHandler]);
 
   return (
-    <div
+    <button
       className={"bn-add-file-button"}
       onMouseDown={addFileButtonMouseDownHandler}
       onClick={addFileButtonClickHandler}>
       <div className={"bn-add-file-button-icon"}>
         {props.buttonIcon || <RiFile2Line size={24} />}
       </div>
       <div className={"bn-add-file-button-text"}>{props.buttonText}</div>
-    </div>
+    </button>
   );
 };