diff --git a/packages/core/src/blocks/File/helpers/render/createResizableFileBlockWrapper.ts b/packages/core/src/blocks/File/helpers/render/createResizableFileBlockWrapper.ts index 0ee0a18394..4b78b8029f 100644 --- a/packages/core/src/blocks/File/helpers/render/createResizableFileBlockWrapper.ts +++ b/packages/core/src/blocks/File/helpers/render/createResizableFileBlockWrapper.ts @@ -47,9 +47,13 @@ export const createResizableFileBlockWrapper = ( const leftResizeHandle = document.createElement("div"); leftResizeHandle.className = "bn-resize-handle"; leftResizeHandle.style.left = "4px"; + leftResizeHandle.style.display = "none"; + resizeHandlesContainerElement.appendChild(leftResizeHandle); const rightResizeHandle = document.createElement("div"); rightResizeHandle.className = "bn-resize-handle"; rightResizeHandle.style.right = "4px"; + rightResizeHandle.style.display = "none"; + resizeHandlesContainerElement.appendChild(rightResizeHandle); // This element ensures `mousemove` and `mouseup` events are captured while // resizing when the cursor is over the wrapper content. This is because @@ -75,13 +79,9 @@ export const createResizableFileBlockWrapper = ( // offset from when the resize began, and which resize handle is being used. const windowMouseMoveHandler = (event: MouseEvent | TouchEvent) => { if (!resizeParams) { - if ( - !editor.isEditable && - resizeHandlesContainerElement.contains(leftResizeHandle) && - resizeHandlesContainerElement.contains(rightResizeHandle) - ) { - resizeHandlesContainerElement.removeChild(leftResizeHandle); - resizeHandlesContainerElement.removeChild(rightResizeHandle); + if (!editor.isEditable) { + leftResizeHandle.style.display = "none"; + rightResizeHandle.style.display = "none"; } return; @@ -128,14 +128,12 @@ export const createResizableFileBlockWrapper = ( const windowMouseUpHandler = (event: MouseEvent | TouchEvent) => { // Hides the drag handles if the cursor is no longer over the element. if ( - (!event.target || - !wrapper.contains(event.target as Node) || - !editor.isEditable) && - resizeHandlesContainerElement.contains(leftResizeHandle) && - resizeHandlesContainerElement.contains(rightResizeHandle) + !event.target || + !wrapper.contains(event.target as Node) || + !editor.isEditable ) { - resizeHandlesContainerElement.removeChild(leftResizeHandle); - resizeHandlesContainerElement.removeChild(rightResizeHandle); + leftResizeHandle.style.display = "none"; + rightResizeHandle.style.display = "none"; } if (!resizeParams) { @@ -158,8 +156,8 @@ export const createResizableFileBlockWrapper = ( // Shows the resize handles when hovering over the wrapper with the cursor. const wrapperMouseEnterHandler = () => { if (editor.isEditable) { - resizeHandlesContainerElement.appendChild(leftResizeHandle); - resizeHandlesContainerElement.appendChild(rightResizeHandle); + leftResizeHandle.style.display = ""; + rightResizeHandle.style.display = ""; } }; // Hides the resize handles when the cursor leaves the wrapper, unless the @@ -176,13 +174,9 @@ export const createResizableFileBlockWrapper = ( return; } - if ( - editor.isEditable && - resizeHandlesContainerElement.contains(leftResizeHandle) && - resizeHandlesContainerElement.contains(rightResizeHandle) - ) { - resizeHandlesContainerElement.removeChild(leftResizeHandle); - resizeHandlesContainerElement.removeChild(rightResizeHandle); + if (editor.isEditable) { + leftResizeHandle.style.display = "none"; + rightResizeHandle.style.display = "none"; } }; diff --git a/packages/react/src/blocks/Audio/block.tsx b/packages/react/src/blocks/Audio/block.tsx index d7efb9857e..89ebcd5aca 100644 --- a/packages/react/src/blocks/Audio/block.tsx +++ b/packages/react/src/blocks/Audio/block.tsx @@ -83,6 +83,9 @@ export const AudioBlock = ( export const ReactAudioBlock = createReactBlockSpec( createAudioBlockConfig, (config) => ({ + meta: { + fileBlockAccept: ["audio/*"], + }, render: AudioBlock, parse: audioParse(config), toExternalHTML: AudioToExternalHTML, diff --git a/packages/react/src/blocks/File/helpers/render/ResizableFileBlockWrapper.tsx b/packages/react/src/blocks/File/helpers/render/ResizableFileBlockWrapper.tsx index 96d361b1a6..210bd6f698 100644 --- a/packages/react/src/blocks/File/helpers/render/ResizableFileBlockWrapper.tsx +++ b/packages/react/src/blocks/File/helpers/render/ResizableFileBlockWrapper.tsx @@ -178,22 +178,24 @@ export const ResizableFileBlockWrapper = ( ref={ref} > {props.children} - {(hovered || resizeParams) && ( - <> -
-
- - )} +
+
{/* This element ensures `mousemove` and `mouseup` events are captured while resizing when the cursor is over the wrapper content. This is because embeds are treated as separate HTML documents, so if the diff --git a/packages/react/src/blocks/Image/block.tsx b/packages/react/src/blocks/Image/block.tsx index 974adc50b5..92de17d8cc 100644 --- a/packages/react/src/blocks/Image/block.tsx +++ b/packages/react/src/blocks/Image/block.tsx @@ -88,8 +88,12 @@ export const ImageBlock = ( export const ReactImageBlock = createReactBlockSpec( createImageBlockConfig, (config) => ({ + meta: { + fileBlockAccept: ["image/*"], + }, render: ImageBlock, parse: imageParse(config), toExternalHTML: ImageToExternalHTML, + runsBefore: ["file"], }), ); diff --git a/packages/react/src/blocks/Video/block.tsx b/packages/react/src/blocks/Video/block.tsx index 56a8b88fd1..08a8f47d53 100644 --- a/packages/react/src/blocks/Video/block.tsx +++ b/packages/react/src/blocks/Video/block.tsx @@ -82,8 +82,12 @@ export const VideoBlock = ( export const ReactVideoBlock = createReactBlockSpec( createVideoBlockConfig, (config) => ({ + meta: { + fileBlockAccept: ["video/*"], + }, render: VideoBlock, parse: videoParse(config), toExternalHTML: VideoToExternalHTML, + runsBefore: ["file"], }), ); diff --git a/packages/react/src/schema/ReactBlockSpec.tsx b/packages/react/src/schema/ReactBlockSpec.tsx index 952f0a06ed..1ab1b43da8 100644 --- a/packages/react/src/schema/ReactBlockSpec.tsx +++ b/packages/react/src/schema/ReactBlockSpec.tsx @@ -242,6 +242,9 @@ export function createReactBlockSpec< blockProps={block.props} propSchema={blockConfig.propSchema} domAttributes={this.blockContentDOMAttributes} + isFileBlock={ + blockImplementation.meta?.fileBlockAccept !== undefined + } > converts to HTML (blocksToFullHTML) 1`] = `"

Heading 2

Paragraph

list item

Example

Caption

Example

Caption

"`; +exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"

Heading 2

Paragraph

list item

Example

Caption

Example

Caption

"`; exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 1`] = `"

Heading 2

Paragraph

  • list item

Example
Caption
Example

Caption

"`; diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image.html index c26a9764e1..cf93dca684 100644 --- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image.html +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image.html @@ -18,6 +18,8 @@ alt="BlockNote image" draggable="false" /> + +
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html index 586f875965..5c7411f3ed 100644 --- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html @@ -16,6 +16,8 @@ >
example + +

Caption

diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/nested.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/nested.html index a36d9be3f1..7eac772896 100644 --- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/nested.html +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/nested.html @@ -15,6 +15,8 @@ >
Caption + +

Caption

@@ -36,6 +38,8 @@ >
Caption + +

Caption

diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noCaption.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noCaption.html index 5f2ec1644c..67d4f962f0 100644 --- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noCaption.html +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noCaption.html @@ -15,6 +15,8 @@ >
example + +
diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noName.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noName.html index 9403217ea6..315d8db293 100644 --- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noName.html +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noName.html @@ -15,6 +15,8 @@ >
Caption + +

Caption

diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/video.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/video.html index 916688f455..8bc01016c4 100644 --- a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/video.html +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/video.html @@ -19,6 +19,8 @@ draggable="false" width="0" > + + diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/basic.html b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/basic.html index 586f875965..5c7411f3ed 100644 --- a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/basic.html +++ b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/basic.html @@ -16,6 +16,8 @@ >
example + +

Caption

diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/nested.html b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/nested.html index b070592ced..3a0d0d50b0 100644 --- a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/nested.html +++ b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/nested.html @@ -16,6 +16,8 @@ >
example + +

Caption

@@ -38,6 +40,8 @@ >
example + +

Caption

diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noCaption.html b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noCaption.html index 5f2ec1644c..67d4f962f0 100644 --- a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noCaption.html +++ b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noCaption.html @@ -15,6 +15,8 @@ >
example + +
diff --git a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noName.html b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noName.html index 9403217ea6..315d8db293 100644 --- a/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noName.html +++ b/tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/noName.html @@ -15,6 +15,8 @@ >
Caption + +

Caption