From 89c4c300f7abee5af480f0288a37bfb2e0b6e2bd Mon Sep 17 00:00:00 2001 From: sudarshanshenoy Date: Wed, 28 Dec 2022 01:14:33 +0530 Subject: [PATCH 1/4] fix-39: Adding new block remove last character --- .../src/extensions/DraggableBlocks/components/DragHandle.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx b/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx index c880b556b8..191cc50db4 100644 --- a/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx +++ b/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx @@ -51,6 +51,8 @@ export const DragHandle = (props: { .run(); } + props.editor.commands.focus(endPos); + // Focuses and activates the suggestion menu. props.editor.view.focus(); props.editor.view.dispatch( From d44ad837f07d9d56c114bc6c7e07b93e95ccb238 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 8 Feb 2023 18:26:20 +0100 Subject: [PATCH 2/4] Minor change and added test --- .../DraggableBlocks/components/DragHandle.tsx | 4 +- .../end-to-end/draghandle/draghandle.test.ts | 8 +++ ...dnonselectedemptyblock-chromium-linux.json | 55 +++++++++++++++++++ ...ddnonselectedemptyblock-firefox-linux.json | 55 +++++++++++++++++++ ...addnonselectedemptyblock-webkit-linux.json | 55 +++++++++++++++++++ 5 files changed, 175 insertions(+), 2 deletions(-) create mode 100644 tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json create mode 100644 tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json create mode 100644 tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json diff --git a/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx b/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx index 191cc50db4..f4df4772b8 100644 --- a/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx +++ b/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx @@ -49,10 +49,10 @@ export const DragHandle = (props: { .BNSetContentType(newBlockContentPos, "textContent") .setTextSelection(newBlockContentPos) .run(); + } else { + props.editor.commands.setTextSelection(endPos); } - props.editor.commands.focus(endPos); - // Focuses and activates the suggestion menu. props.editor.view.focus(); props.editor.view.dispatch( diff --git a/tests/end-to-end/draghandle/draghandle.test.ts b/tests/end-to-end/draghandle/draghandle.test.ts index f9c924ea35..68e33ca087 100644 --- a/tests/end-to-end/draghandle/draghandle.test.ts +++ b/tests/end-to-end/draghandle/draghandle.test.ts @@ -128,6 +128,14 @@ test.describe("Check Draghandle functionality", () => { await page.waitForSelector(DRAG_HANDLE_ADD_SELECTOR, { state: "detached" }); }); + test("Click add button for non-selected empty block", async () => { + await executeSlashCommand(page, "h1"); + await page.keyboard.type("Heading 1"); + await hoverAndAddBlockFromDragHandle(page, PARAGRAPH_SELECTOR, "h1"); + + await compareDocToSnapshot(page, "addnonselectedemptyblock"); + }); + test("Clicking delete button should delete block", async () => { await executeSlashCommand(page, "h1"); await page.keyboard.type("Hover over this text"); diff --git a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json new file mode 100644 index 0000000000..3db39c2be5 --- /dev/null +++ b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json @@ -0,0 +1,55 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "block", + "attrs": { + "id": 0 + }, + "content": [ + { + "type": "headingContent", + "attrs": { + "headingLevel": "1" + }, + "content": [ + { + "type": "text", + "text": "Heading 1" + } + ] + } + ] + }, + { + "type": "block", + "attrs": { + "id": 1 + }, + "content": [ + { + "type": "headingContent", + "attrs": { + "headingLevel": "1" + } + } + ] + }, + { + "type": "block", + "attrs": { + "id": 2 + }, + "content": [ + { + "type": "textContent" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json new file mode 100644 index 0000000000..3db39c2be5 --- /dev/null +++ b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json @@ -0,0 +1,55 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "block", + "attrs": { + "id": 0 + }, + "content": [ + { + "type": "headingContent", + "attrs": { + "headingLevel": "1" + }, + "content": [ + { + "type": "text", + "text": "Heading 1" + } + ] + } + ] + }, + { + "type": "block", + "attrs": { + "id": 1 + }, + "content": [ + { + "type": "headingContent", + "attrs": { + "headingLevel": "1" + } + } + ] + }, + { + "type": "block", + "attrs": { + "id": 2 + }, + "content": [ + { + "type": "textContent" + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json new file mode 100644 index 0000000000..3db39c2be5 --- /dev/null +++ b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json @@ -0,0 +1,55 @@ +{ + "type": "doc", + "content": [ + { + "type": "blockGroup", + "content": [ + { + "type": "block", + "attrs": { + "id": 0 + }, + "content": [ + { + "type": "headingContent", + "attrs": { + "headingLevel": "1" + }, + "content": [ + { + "type": "text", + "text": "Heading 1" + } + ] + } + ] + }, + { + "type": "block", + "attrs": { + "id": 1 + }, + "content": [ + { + "type": "headingContent", + "attrs": { + "headingLevel": "1" + } + } + ] + }, + { + "type": "block", + "attrs": { + "id": 2 + }, + "content": [ + { + "type": "textContent" + } + ] + } + ] + } + ] +} \ No newline at end of file From 12ed24cb65676b43aac46de505edd72c12a0bc56 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 8 Feb 2023 18:30:42 +0100 Subject: [PATCH 3/4] Moved changes to `DraggableBlocksPlugin.ts` --- .../DraggableBlocks/DraggableBlocksPlugin.ts | 2 + .../DraggableBlocks/components/DragHandle.tsx | 82 ------------------- 2 files changed, 2 insertions(+), 82 deletions(-) delete mode 100644 packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx diff --git a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts index 19ea7bc77a..64847e51e0 100644 --- a/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +++ b/packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts @@ -379,6 +379,8 @@ export class BlockMenuView { .BNUpdateBlock(newBlockContentPos, { type: "paragraph", props: {} }) .setTextSelection(newBlockContentPos) .run(); + } else { + this.editor.commands.setTextSelection(endPos); } // Focuses and activates the suggestion menu. diff --git a/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx b/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx deleted file mode 100644 index f4df4772b8..0000000000 --- a/packages/core/src/extensions/DraggableBlocks/components/DragHandle.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Editor } from "@tiptap/core"; -import { ActionIcon, Menu } from "@mantine/core"; -import { AiOutlinePlus, MdDragIndicator } from "react-icons/all"; -import DragHandleMenu from "./DragHandleMenu"; -import { SlashMenuPluginKey } from "../../SlashMenu/SlashMenuExtension"; -import { getBlockInfoFromPos } from "../../Blocks/helpers/getBlockInfoFromPos"; - -export const DragHandle = (props: { - editor: Editor; - coords: { left: number; top: number }; - onShow?: () => void; - onHide?: () => void; - onAddClicked?: () => void; -}) => { - const onDelete = () => { - const pos = props.editor.view.posAtCoords(props.coords); - if (!pos) { - return; - } - - props.editor.commands.BNDeleteBlock(pos.pos); - }; - - const onAddClick = () => { - if (props.onAddClicked) { - props.onAddClicked(); - } - - const pos = props.editor.view.posAtCoords(props.coords); - if (!pos) { - return; - } - - const blockInfo = getBlockInfoFromPos(props.editor.state.doc, pos.pos); - if (blockInfo === undefined) { - return; - } - - const { contentNode, endPos } = blockInfo; - - // Creates a new block if current one is not empty for the suggestion menu to open in. - if (contentNode.textContent.length !== 0) { - const newBlockInsertionPos = endPos + 1; - const newBlockContentPos = newBlockInsertionPos + 2; - - props.editor - .chain() - .BNCreateBlock(newBlockInsertionPos) - .BNSetContentType(newBlockContentPos, "textContent") - .setTextSelection(newBlockContentPos) - .run(); - } else { - props.editor.commands.setTextSelection(endPos); - } - - // Focuses and activates the suggestion menu. - props.editor.view.focus(); - props.editor.view.dispatch( - props.editor.view.state.tr.scrollIntoView().setMeta(SlashMenuPluginKey, { - // TODO import suggestion plugin key - activate: true, - type: "drag", - }) - ); - }; - - return ( -
- - {} - - - - - {} - - - - -
- ); -}; From 948031e43d8ce74e3b6cd6947714d7f5bd847592 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 8 Feb 2023 18:47:36 +0100 Subject: [PATCH 4/4] Updated test snapshots --- ...dnonselectedemptyblock-chromium-linux.json | 33 ++++++++++++------- ...ddnonselectedemptyblock-firefox-linux.json | 33 ++++++++++++------- ...addnonselectedemptyblock-webkit-linux.json | 33 ++++++++++++------- 3 files changed, 66 insertions(+), 33 deletions(-) diff --git a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json index 3db39c2be5..23d734e9d7 100644 --- a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json +++ b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-chromium-linux.json @@ -5,15 +5,18 @@ "type": "blockGroup", "content": [ { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 0 + "id": 0, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "headingContent", + "type": "heading", "attrs": { - "headingLevel": "1" + "textAlignment": "left", + "level": "1" }, "content": [ { @@ -25,27 +28,35 @@ ] }, { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 1 + "id": 1, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "headingContent", + "type": "heading", "attrs": { - "headingLevel": "1" + "textAlignment": "left", + "level": "1" } } ] }, { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 2 + "id": 2, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "textContent" + "type": "paragraph", + "attrs": { + "textAlignment": "left" + } } ] } diff --git a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json index 3db39c2be5..23d734e9d7 100644 --- a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json +++ b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-firefox-linux.json @@ -5,15 +5,18 @@ "type": "blockGroup", "content": [ { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 0 + "id": 0, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "headingContent", + "type": "heading", "attrs": { - "headingLevel": "1" + "textAlignment": "left", + "level": "1" }, "content": [ { @@ -25,27 +28,35 @@ ] }, { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 1 + "id": 1, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "headingContent", + "type": "heading", "attrs": { - "headingLevel": "1" + "textAlignment": "left", + "level": "1" } } ] }, { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 2 + "id": 2, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "textContent" + "type": "paragraph", + "attrs": { + "textAlignment": "left" + } } ] } diff --git a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json index 3db39c2be5..23d734e9d7 100644 --- a/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json +++ b/tests/end-to-end/draghandle/draghandle.test.ts-snapshots/addnonselectedemptyblock-webkit-linux.json @@ -5,15 +5,18 @@ "type": "blockGroup", "content": [ { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 0 + "id": 0, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "headingContent", + "type": "heading", "attrs": { - "headingLevel": "1" + "textAlignment": "left", + "level": "1" }, "content": [ { @@ -25,27 +28,35 @@ ] }, { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 1 + "id": 1, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "headingContent", + "type": "heading", "attrs": { - "headingLevel": "1" + "textAlignment": "left", + "level": "1" } } ] }, { - "type": "block", + "type": "blockContainer", "attrs": { - "id": 2 + "id": 2, + "textColor": "default", + "backgroundColor": "default" }, "content": [ { - "type": "textContent" + "type": "paragraph", + "attrs": { + "textAlignment": "left" + } } ] }