diff --git a/.gitignore b/.gitignore index bc0541fef0..2e58c2279b 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,5 @@ release /test-results/ /playwright-report/ /playwright/.cache/ +blocknote-core-*.tgz +blocknote-react-*.tgz diff --git a/examples/editor/index.html b/examples/editor/index.html index 1f8f0c6f25..f713d58f2d 100644 --- a/examples/editor/index.html +++ b/examples/editor/index.html @@ -4,7 +4,12 @@ - BlockNote demo + BlockNote demo 123 + +
diff --git a/examples/editor/package.json b/examples/editor/package.json index 7a00982079..313c5a4c04 100644 --- a/examples/editor/package.json +++ b/examples/editor/package.json @@ -17,7 +17,9 @@ "devDependencies": { "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", + "@types/diff": "^5.0.0", "@vitejs/plugin-react": "^3.1.0", + "diff": "^5.0.0", "eslint": "^8.10.0", "eslint-config-react-app": "^7.0.0", "typescript": "^5.0.4", diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx index 55ce63eb93..90ee509768 100644 --- a/examples/editor/src/App.tsx +++ b/examples/editor/src/App.tsx @@ -2,25 +2,92 @@ import "@blocknote/core/style.css"; import { BlockNoteView, useBlockNote } from "@blocknote/react"; import styles from "./App.module.css"; +import { + parseNoteToBlocks, + serializeBlocksToNote, +} from "../../../packages/core/src/api/formatConversions/notePlanConversions"; +import { diffChars } from "diff"; -type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any }; +import { useEffect, useState } from "react"; +import { + BlockNoteEditor, + DefaultBlockSchema, + PartialBlock, +} from "@blocknote/core"; + +type WindowWithProseMirror = Window & + typeof globalThis & { ProseMirror: any; editor?: any }; function App() { - const editor = useBlockNote({ - onEditorContentChange: (editor) => { - console.log(editor.topLevelBlocks); + const [input, setInput] = useState(""); + const [markdown, setMarkdown] = useState(""); + const [json, setJSON] = useState(""); + const [diff, setDiff] = useState(""); + + const editor: BlockNoteEditor | null = useBlockNote({ + onEditorContentChange: (editor: BlockNoteEditor) => { + const note = serializeBlocksToNote(editor.topLevelBlocks); + setMarkdown(note); + const json: string = JSON.stringify(editor.topLevelBlocks, null, 2); + setJSON(json); + if (input !== note) { + // calculate diff + const diffResult = diffChars(input, note); + let diffString = ""; + diffResult.forEach((part) => { + const color = part.added ? "blue" : part.removed ? "red" : "grey"; + diffString += `${part.value}`; + }); + setDiff(diffString); + } }, editorDOMAttributes: { class: styles.editor, "data-test": "editor", }, - theme: "light", + theme: window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light", }); + useEffect(() => { + if (editor) { + // Whenever the current Markdown content changes, converts it to an array + // of PartialBlock objects and replaces the editor's content with them. + const getBlocks = async () => { + const blocks: PartialBlock[] = + parseNoteToBlocks(input); + editor.replaceBlocks(editor.topLevelBlocks, blocks); + }; + getBlocks(); + } + }, [editor, input]); + // Give tests a way to get prosemirror instance (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor; + (window as WindowWithProseMirror).editor = editor; - return ; + return ( +
+

Input

+