From 652f6eab0bb4fe3d453902e7a30a1976a20ca801 Mon Sep 17 00:00:00 2001 From: 01zulfi <85733202+01zulfi@users.noreply.github.com> Date: Wed, 15 Oct 2025 10:56:43 +0500 Subject: [PATCH 1/6] editor: fix inserting images in outline lists * inserting images in outline list was splitting the outline list into two, this commit fixes it Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com> --- .../src/extensions/outline-list-item/outline-list-item.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/extensions/outline-list-item/outline-list-item.ts b/packages/editor/src/extensions/outline-list-item/outline-list-item.ts index 86fe24405..8d81db153 100644 --- a/packages/editor/src/extensions/outline-list-item/outline-list-item.ts +++ b/packages/editor/src/extensions/outline-list-item/outline-list-item.ts @@ -52,7 +52,7 @@ export const OutlineListItem = Node.create({ }; }, - content: "paragraph+ list?", + content: "paragraph+ (image* | list?)", defining: true, From 7af1596038053939da0b876c67bdca35131f9151 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Thu, 16 Oct 2025 09:21:45 +0500 Subject: [PATCH 2/6] editor: remove custom inline image -> block image migration --- .../__snapshots__/image.test.ts.snap | 171 ++++++++++++++++++ .../extensions/image/__tests__/image.test.ts | 85 +++++++++ packages/editor/src/extensions/image/image.ts | 33 ---- 3 files changed, 256 insertions(+), 33 deletions(-) create mode 100644 packages/editor/src/extensions/image/__tests__/__snapshots__/image.test.ts.snap create mode 100644 packages/editor/src/extensions/image/__tests__/image.test.ts diff --git a/packages/editor/src/extensions/image/__tests__/__snapshots__/image.test.ts.snap b/packages/editor/src/extensions/image/__tests__/__snapshots__/image.test.ts.snap new file mode 100644 index 000000000..acd067595 --- /dev/null +++ b/packages/editor/src/extensions/image/__tests__/__snapshots__/image.test.ts.snap @@ -0,0 +1,171 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`migration > inline image in outline list 1`] = ` +{ + "content": [ + { + "content": [ + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "item 1", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "hello", + "type": "text", + }, + ], + "type": "paragraph", + }, + { + "attrs": { + "align": undefined, + "aspectRatio": 1, + "filename": undefined, + "hash": undefined, + "height": null, + "mime": undefined, + "progress": 0, + "size": undefined, + "src": "image.png", + "type": "image", + "width": null, + }, + "type": "image", + }, + { + "content": [ + { + "text": "world", + "type": "text", + }, + ], + "type": "paragraph", + }, + { + "content": [ + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "sub item 2", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "sub item 3", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + ], + "type": "outlineList", + }, + ], + "type": "outlineListItem", + }, + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "item 4", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + ], + "type": "outlineList", + }, + ], + "type": "doc", +} +`; + +exports[`migration > inline image in paragraph 1`] = ` +{ + "content": [ + { + "content": [ + { + "text": "hello", + "type": "text", + }, + ], + "type": "paragraph", + }, + { + "attrs": { + "align": undefined, + "aspectRatio": 1, + "filename": undefined, + "hash": undefined, + "height": null, + "mime": undefined, + "progress": 0, + "size": undefined, + "src": "image.png", + "type": "image", + "width": null, + }, + "type": "image", + }, + { + "content": [ + { + "text": "world", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "doc", +} +`; diff --git a/packages/editor/src/extensions/image/__tests__/image.test.ts b/packages/editor/src/extensions/image/__tests__/image.test.ts new file mode 100644 index 000000000..392259e0c --- /dev/null +++ b/packages/editor/src/extensions/image/__tests__/image.test.ts @@ -0,0 +1,85 @@ +/* +This file is part of the Notesnook project (https://notesnook.com/) + +Copyright (C) 2023 Streetwriters (Private) Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ + +import { createEditor, h, ul, li, p } from "../../../../test-utils/index.js"; +import { test, expect, describe } from "vitest"; +import { ImageNode } from "../index.js"; +import { OutlineList } from "../../outline-list/outline-list.js"; +import { OutlineListItem } from "../../outline-list-item/outline-list-item.js"; + +function outlineList(...children: HTMLLIElement[]) { + return ul(children, { "data-type": "outlineList" }); +} + +function outlineListItem( + paragraphChildren: (string | HTMLElement)[], + subList?: HTMLUListElement +) { + const children: HTMLElement[] = [h("p", paragraphChildren)]; + if (subList) children.push(subList); + + return li(children, { + "data-type": "outlineListItem" + }); +} + +describe("migration", () => { + test(`inline image in paragraph`, async () => { + const el = p(["hello", h("img", [], { src: "image.png" }), "world"]); + const { + builder: { image }, + editor + } = createEditor({ + initialContent: el.outerHTML, + extensions: { + image: ImageNode.configure({}) + } + }); + + expect(editor.getJSON()).toMatchSnapshot(); + }); + + test(`inline image in outline list`, async () => { + const el = outlineList( + outlineListItem(["item 1"]), + outlineListItem( + ["hello", h("img", [], { src: "image.png" }), "world"], + outlineList( + outlineListItem(["sub item 2"]), + outlineListItem(["sub item 3"]) + ) + ), + outlineListItem(["item 4"]) + ); + + const { + builder: { image }, + editor + } = createEditor({ + initialContent: el.outerHTML, + extensions: { + outlineList: OutlineList, + outlineListItem: OutlineListItem, + image: ImageNode + } + }); + + expect(editor.getJSON()).toMatchSnapshot(); + }); +}); diff --git a/packages/editor/src/extensions/image/image.ts b/packages/editor/src/extensions/image/image.ts index b59554d2a..85f7a8ce7 100644 --- a/packages/editor/src/extensions/image/image.ts +++ b/packages/editor/src/extensions/image/image.ts @@ -131,39 +131,6 @@ export const ImageNode = Node.create({ getAttrs(node) { if (node.querySelectorAll("img").length <= 0) return false; return null; - }, - getContent: (dom, schema) => { - const wrapper = document.createElement("div"); - let buffer = ""; - - const flushBuffer = () => { - if (buffer.trim().length > 0) { - const pEl = document.createElement("p"); - pEl.innerHTML = buffer; - wrapper.appendChild(pEl); - buffer = ""; - } - }; - - for (const child of dom.childNodes) { - if ( - child.nodeType === globalThis.Node.ELEMENT_NODE && - (child as HTMLElement).tagName === "IMG" - ) { - flushBuffer(); - wrapper.appendChild(child); - } else { - if (child.nodeType === globalThis.Node.ELEMENT_NODE) { - buffer += (child as HTMLElement).outerHTML; - } else if (child.nodeType === globalThis.Node.TEXT_NODE) { - buffer += child.textContent; - } - } - } - flushBuffer(); - - const parser = DOMParser.fromSchema(schema); - return parser.parse(wrapper).content; } }, { From d43e856fea03b700dc7843c1a6f0e970f174c989 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Thu, 16 Oct 2025 09:22:15 +0500 Subject: [PATCH 3/6] editor: add support for all block types in outline list item --- .../src/extensions/outline-list-item/outline-list-item.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/extensions/outline-list-item/outline-list-item.ts b/packages/editor/src/extensions/outline-list-item/outline-list-item.ts index 8d81db153..19c3b5e84 100644 --- a/packages/editor/src/extensions/outline-list-item/outline-list-item.ts +++ b/packages/editor/src/extensions/outline-list-item/outline-list-item.ts @@ -52,13 +52,14 @@ export const OutlineListItem = Node.create({ }; }, - content: "paragraph+ (image* | list?)", + content: "block+", defining: true, parseHTML() { return [ { + priority: 100, tag: `li[data-type="${this.name}"]` } ]; From 9eebda86c27e2915bfae790689f62f68217668c6 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Thu, 16 Oct 2025 09:22:49 +0500 Subject: [PATCH 4/6] editor: fix enter/tab not working in block nodes inside outline list item --- .../outline-list-item/outline-list-item.ts | 43 +++++++++++++------ 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/extensions/outline-list-item/outline-list-item.ts b/packages/editor/src/extensions/outline-list-item/outline-list-item.ts index 19c3b5e84..14165ee14 100644 --- a/packages/editor/src/extensions/outline-list-item/outline-list-item.ts +++ b/packages/editor/src/extensions/outline-list-item/outline-list-item.ts @@ -25,6 +25,7 @@ import { import { findParentNodeOfTypeClosestToPos } from "../../utils/prosemirror.js"; import { OutlineList } from "../outline-list/outline-list.js"; import { keybindings, tiptapKeys } from "@notesnook/common"; +import { Paragraph } from "../paragraph/paragraph.js"; export interface ListItemOptions { HTMLAttributes: Record; @@ -93,21 +94,37 @@ export const OutlineListItem = Node.create({ return true; }); }, - Enter: () => { - // const subList = findSublist(editor, this.type); - // if (!subList) return this.editor.commands.splitListItem(this.name); - - // const { isCollapsed, subListPos } = subList; - - // if (isCollapsed) { - // return this.editor.commands.toggleOutlineCollapse(subListPos, false); - // } + Enter: ({ editor }) => { + const { $anchor } = editor.state.selection; + if ( + $anchor.parent.type.name !== Paragraph.name || + ($anchor.parent.type.name === Paragraph.name && + $anchor.node($anchor.depth - 1)?.type.name !== this.type.name) + ) + return false; return this.editor.commands.splitListItem(this.name); }, - Tab: () => this.editor.commands.sinkListItem(this.name), - [keybindings.liftListItem.keys]: () => - this.editor.commands.liftListItem(this.name) + Tab: ({ editor }) => { + const { $anchor } = editor.state.selection; + if ( + $anchor.parent.type.name !== Paragraph.name || + ($anchor.parent.type.name === Paragraph.name && + $anchor.node($anchor.depth - 1)?.type.name !== this.type.name) + ) + return false; + return this.editor.commands.sinkListItem(this.name); + }, + [keybindings.liftListItem.keys]: ({ editor }) => { + const { $anchor } = editor.state.selection; + if ( + $anchor.parent.type.name !== Paragraph.name || + ($anchor.parent.type.name === Paragraph.name && + $anchor.node($anchor.depth - 1)?.type.name !== this.type.name) + ) + return false; + return this.editor.commands.liftListItem(this.name); + } }; }, @@ -125,7 +142,7 @@ export const OutlineListItem = Node.create({ function onClick(e: MouseEvent | TouchEvent) { if (e instanceof MouseEvent && e.button !== 0) return; - if (!(e.target instanceof HTMLParagraphElement)) return; + if (!(e.target instanceof HTMLElement)) return; if (!li.classList.contains("nested")) return; const pos = typeof getPos === "function" ? getPos() : 0; From 9f4c0a4c9af657053caf815ab5e99be18d4d1ea0 Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Thu, 16 Oct 2025 09:23:19 +0500 Subject: [PATCH 5/6] editor: move outline list item indicator to li from first child --- packages/editor/styles/styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/editor/styles/styles.css b/packages/editor/styles/styles.css index 3ff2ec936..e676c1ee2 100644 --- a/packages/editor/styles/styles.css +++ b/packages/editor/styles/styles.css @@ -536,11 +536,11 @@ p > *::selection { .outline-list li.collapsed .outline-list { display: none; } -.outline-list li > :first-child { +.outline-list li { position: relative; } -.outline-list > li > :first-child::before { +.outline-list > li::before { position: absolute; top: 0px; cursor: pointer; @@ -560,13 +560,13 @@ p > *::selection { left: -22px; } -.outline-list li:not(.nested) > :first-child::before { +.outline-list li:not(.nested)::before { mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9IiM4ODg4ODgiIGQ9Ik0xMiAyQTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTIgMloiLz48L3N2Zz4=) no-repeat 50% 50%; scale: 0.4; } -.outline-list li.collapsed > :first-child::before { +.outline-list li.collapsed::before { transform: rotate(-90deg); } From 2d5fe1058cbb8400dc5ad0c36617376e454ac655 Mon Sep 17 00:00:00 2001 From: 01zulfi <85733202+01zulfi@users.noreply.github.com> Date: Thu, 16 Oct 2025 10:46:31 +0500 Subject: [PATCH 6/6] editor: add test for code block in outline list Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com> --- .../extensions/image/__tests__/image.test.ts | 24 +--- .../outline-list-item.test.ts.snap | 130 ++++++++++++++++++ .../__tests__/outline-list-item.test.ts | 73 ++++++++++ packages/editor/test-utils/index.ts | 16 +++ 4 files changed, 226 insertions(+), 17 deletions(-) create mode 100644 packages/editor/src/extensions/outline-list-item/__tests__/__snapshots__/outline-list-item.test.ts.snap create mode 100644 packages/editor/src/extensions/outline-list-item/__tests__/outline-list-item.test.ts diff --git a/packages/editor/src/extensions/image/__tests__/image.test.ts b/packages/editor/src/extensions/image/__tests__/image.test.ts index 392259e0c..00b80bb92 100644 --- a/packages/editor/src/extensions/image/__tests__/image.test.ts +++ b/packages/editor/src/extensions/image/__tests__/image.test.ts @@ -17,28 +17,18 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { createEditor, h, ul, li, p } from "../../../../test-utils/index.js"; +import { + createEditor, + h, + p, + outlineList, + outlineListItem +} from "../../../../test-utils/index.js"; import { test, expect, describe } from "vitest"; import { ImageNode } from "../index.js"; import { OutlineList } from "../../outline-list/outline-list.js"; import { OutlineListItem } from "../../outline-list-item/outline-list-item.js"; -function outlineList(...children: HTMLLIElement[]) { - return ul(children, { "data-type": "outlineList" }); -} - -function outlineListItem( - paragraphChildren: (string | HTMLElement)[], - subList?: HTMLUListElement -) { - const children: HTMLElement[] = [h("p", paragraphChildren)]; - if (subList) children.push(subList); - - return li(children, { - "data-type": "outlineListItem" - }); -} - describe("migration", () => { test(`inline image in paragraph`, async () => { const el = p(["hello", h("img", [], { src: "image.png" }), "world"]); diff --git a/packages/editor/src/extensions/outline-list-item/__tests__/__snapshots__/outline-list-item.test.ts.snap b/packages/editor/src/extensions/outline-list-item/__tests__/__snapshots__/outline-list-item.test.ts.snap new file mode 100644 index 000000000..100c63fd2 --- /dev/null +++ b/packages/editor/src/extensions/outline-list-item/__tests__/__snapshots__/outline-list-item.test.ts.snap @@ -0,0 +1,130 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`outline list item > code block in outline list item 1`] = ` +{ + "content": [ + { + "content": [ + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "item 1", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "hello", + "type": "text", + }, + ], + "type": "paragraph", + }, + { + "attrs": { + "caretPosition": undefined, + "id": "codeblock-test-id-123456", + "indentLength": 2, + "indentType": "space", + "language": null, + "lines": [], + }, + "content": [ + { + "text": "const x = 1;", + "type": "text", + }, + ], + "type": "codeblock", + }, + { + "content": [ + { + "text": "world", + "type": "text", + }, + ], + "type": "paragraph", + }, + { + "content": [ + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "sub item 2", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "sub item 3", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + ], + "type": "outlineList", + }, + ], + "type": "outlineListItem", + }, + { + "attrs": { + "collapsed": false, + }, + "content": [ + { + "content": [ + { + "text": "item 4", + "type": "text", + }, + ], + "type": "paragraph", + }, + ], + "type": "outlineListItem", + }, + ], + "type": "outlineList", + }, + ], + "type": "doc", +} +`; diff --git a/packages/editor/src/extensions/outline-list-item/__tests__/outline-list-item.test.ts b/packages/editor/src/extensions/outline-list-item/__tests__/outline-list-item.test.ts new file mode 100644 index 000000000..e083e89fb --- /dev/null +++ b/packages/editor/src/extensions/outline-list-item/__tests__/outline-list-item.test.ts @@ -0,0 +1,73 @@ +/* +This file is part of the Notesnook project (https://notesnook.com/) + +Copyright (C) 2023 Streetwriters (Private) Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see . +*/ + +import { + createEditor, + h, + li, + outlineList, + outlineListItem +} from "../../../../test-utils/index.js"; +import { test, expect, describe, beforeAll, vi } from "vitest"; +import { OutlineList } from "../../outline-list/outline-list.js"; +import { OutlineListItem } from "../outline-list-item.js"; +import { CodeBlock } from "../../code-block/code-block.js"; + +describe("outline list item", () => { + beforeAll(() => { + vi.mock("nanoid", () => ({ + nanoid: () => "test-id-123456" + })); + }); + + test(`code block in outline list item`, async () => { + const subList = outlineList( + outlineListItem(["sub item 2"]), + outlineListItem(["sub item 3"]) + ); + const listItemWithCodeBlock = li( + [ + h("p", ["hello"]), + h("pre", [h("code", ["const x = 1;"])]), + h("p", ["world"]), + subList + ], + { "data-type": "outlineListItem" } + ); + const el = outlineList( + outlineListItem(["item 1"]), + listItemWithCodeBlock, + outlineListItem(["item 4"]) + ); + + const { + builder: { codeBlock }, + editor + } = createEditor({ + initialContent: el.outerHTML, + extensions: { + outlineList: OutlineList, + outlineListItem: OutlineListItem, + codeBlock: CodeBlock + } + }); + + expect(editor.getJSON()).toMatchSnapshot(); + }); +}); diff --git a/packages/editor/test-utils/index.ts b/packages/editor/test-utils/index.ts index 208577dbe..3474c87de 100644 --- a/packages/editor/test-utils/index.ts +++ b/packages/editor/test-utils/index.ts @@ -92,3 +92,19 @@ export const p = elem("p"); export function text(text: string) { return document.createTextNode(text); } + +export function outlineList(...children: HTMLLIElement[]) { + return ul(children, { "data-type": "outlineList" }); +} + +export function outlineListItem( + paragraphChildren: (string | HTMLElement)[], + subList?: HTMLUListElement +) { + const children: HTMLElement[] = [h("p", paragraphChildren)]; + if (subList) children.push(subList); + + return li(children, { + "data-type": "outlineListItem" + }); +}