Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 19:57:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8877 from 01zulfi/editor/fix-outline-images

Browse Source 
editor: fix images from older version not rendering in outline list
This commit is contained in:
Abdullah Atta
2025-10-30 13:28:00 +05:00
committed by GitHub
parent dbecd6a466 1f47df0f45
commit b30c35e59d
3 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/editor/src/extensions/outline-list-item/__tests__/__snapshots__/outline-list-item.test.ts.snap
View File

@@ -128,3 +128,5 @@ exports[`outline list item > code block in outline list item 1`] = `
"type": "doc",
}
`;
exports[`outline list item > inline image as first child in the old outline list item 1`] = `"<ul data-type="outlineList"><li data-type="outlineListItem"><p data-spacing="double">item 1</p></li><li data-type="outlineListItem"><p data-spacing="double"></p><img src="image.png" data-aspect-ratio="1"></li></ul>"`;

28
packages/editor/src/extensions/outline-list-item/__tests__/outline-list-item.test.ts
View File

@@ -28,6 +28,8 @@ 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";
import { Paragraph } from "../../paragraph/paragraph.js";
import { ImageNode } from "../../image/image.js";
describe("outline list item", () => {
beforeAll(() => {
@@ -70,4 +72,30 @@ describe("outline list item", () => {
expect(editor.getJSON()).toMatchSnapshot();
});
/**
* Two changes happened:
* 1. Images were converted from inline nodes to block nodes (https://github.com/streetwriters/notesnook/pull/8563)
* 2. Outline list item's `content` schema was changed from `paragraph + list?` to `block+` to `paragraph block*` (https://github.com/streetwriters/notesnook/pull/8772 and https://github.com/streetwriters/notesnook/commit/0b943d8ecdf04fd7d996fd0a4b1d62ec9569f071)
*
* In the old editor, it was possible to have an inline image as the first item in the outline list item, but based on the new schema it is not possible anymore. So the editor should insert an empty paragraph before the image.
*/
test("inline image as first child in the old outline list item", async () => {
const el = outlineList(
outlineListItem(["item 1"]),
outlineListItem([h("img", [], { src: "image.png" })])
);
const { editor } = createEditor({
initialContent: el.outerHTML,
extensions: {
outlineList: OutlineList,
outlineListItem: OutlineListItem,
paragraph: Paragraph,
image: ImageNode
}
});
expect(editor.getHTML()).toMatchSnapshot();
});
});

14
packages/editor/src/extensions/outline-list-item/outline-list-item.ts
View File

@@ -29,6 +29,7 @@ import {
import { OutlineList } from "../outline-list/outline-list.js";
import { keybindings, tiptapKeys } from "@notesnook/common";
import { Paragraph } from "../paragraph/paragraph.js";
import { DOMParser } from "@tiptap/pm/model";
export interface ListItemOptions {
HTMLAttributes: Record<string, unknown>;
@@ -64,7 +65,18 @@ export const OutlineListItem = Node.create<ListItemOptions>({
return [
{
priority: 100,
tag: `li[data-type="${this.name}"]`
tag: `li[data-type="${this.name}"]`,
getContent: (node, schema) => {
const parser = DOMParser.fromSchema(schema);
const fragment = parser.parse(node).content;
const firstNode = fragment.firstChild;
if (firstNode && firstNode.type.name !== "paragraph") {
const emptyParagraph = schema.nodes.paragraph.create();
return fragment.addToStart(emptyParagraph);
}
return fragment;
}
}
];
},