diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts index 3800418aa1..89b0fcf5cc 100644 --- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts +++ b/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); }, }; }; diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index ee6c8a02f3..f86f6bb135 100644 --- a/packages/core/src/editor/Block.css +++ b/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); diff --git a/packages/core/src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts b/packages/core/src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts index bec1b792f6..f47e4a8919 100644 --- a/packages/core/src/extensions/NonEditableBlocks/NonEditableBlockPlugin.ts +++ b/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 diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx index dacdf77fa1..8ee4737070 100644 --- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx +++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx @@ -68,9 +68,35 @@ 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 ( -
@@ -78,7 +104,7 @@ export const AddFileButton = ( {props.buttonIcon || }
{props.buttonText}
- + ); };