BlockNote demo

${cell}
${cell}

")) { + html += line; + continue; + } + + html += parseMarkdownLine(lines[i]).outerHTML; + } + + return html; +} diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts index ee81bf47b7..8a675fa55c 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts @@ -34,7 +34,6 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({ parseHTML() { return [ - // Case for regular HTML list structure. { tag: "li", getAttrs: (element) => { @@ -54,7 +53,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({ return false; }, - node: "bulletListItem", + node: this.name, }, // Case for BlockNote list structure. { @@ -77,7 +76,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({ return false; }, priority: 300, - node: "bulletListItem", + node: this.name, }, ]; }, From ef0af0fcbfe30e0851f92fd326fff90a3d29d7b1 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Mon, 17 Jul 2023 09:43:46 -0500 Subject: [PATCH 11/48] added scheduled as icon and prop --- examples/editor/src/App.tsx | 6 ++---- .../src/extensions/Blocks/api/defaultBlocks.ts | 3 +++ .../src/extensions/Blocks/nodes/Block.module.css | 14 +++++++++++++- .../ListItemKeyboardShortcuts.ts | 4 ++-- .../CheckListItemBlockContent.ts | 7 +++++++ .../TaskListItemBlockContent.ts | 8 ++++++++ .../TaskListItemNodeView.ts | 3 +++ 7 files changed, 38 insertions(+), 7 deletions(-) diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx index 5e2ae4e925..737067555f 100644 --- a/examples/editor/src/App.tsx +++ b/examples/editor/src/App.tsx @@ -2,7 +2,7 @@ import "@blocknote/core/style.css"; import { BlockNoteView, useBlockNote } from "@blocknote/react"; import styles from "./App.module.css"; -import { parseMarkdown } from "../../../packages/core/src/api/formatConversions/npMarkdownConversions"; +// import { parseMarkdown } from "../../../packages/core/src/api/formatConversions/npMarkdownConversions"; type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any; editor?: any }; @@ -18,8 +18,6 @@ function App() { "editorContent", JSON.stringify(editor.topLevelBlocks) ); - - console.log(editor.topLevelBlocks); }, editorDOMAttributes: { class: styles.editor, @@ -31,7 +29,7 @@ function App() { // Give tests a way to get prosemirror instance (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor; (window as WindowWithProseMirror).editor = editor; - window.parseMarkdown = parseMarkdown; + // window.parseMarkdown = parseMarkdown; return ; } diff --git a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts index acc1f4703a..05b53c6bb7 100644 --- a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts +++ b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts @@ -24,6 +24,9 @@ export const defaultProps = { cancelled: { default: "false" as const, }, + scheduled: { + default: "false" as const, + }, } satisfies PropSchema; export type DefaultProps = typeof defaultProps; diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css index d4644660ba..df82a77ee2 100644 --- a/packages/core/src/extensions/Blocks/nodes/Block.module.css +++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css @@ -326,7 +326,8 @@ NESTED BLOCKS position: relative; &[data-checked="true"], - &[data-cancelled="true"] { + &[data-cancelled="true"], + &[data-scheduled="true"] { opacity: 0.4; } @@ -347,6 +348,12 @@ NESTED BLOCKS color: inherit; } + &[data-scheduled="true"] > label:before { + content: "\f017"; + font: var(--fa-font-regular); + color: inherit; + } + > label { user-select: none; font: var(--fa-font-regular); @@ -378,6 +385,11 @@ NESTED BLOCKS &[data-cancelled="true"] > label:before { content: "\f2d3"; } + + /* TODO: Need to get the custom icon working here from the native apps */ + &[data-scheduled="true"] > label:before { + content: "\f017"; + } } /* .blockOuter[data-prev-type="taskListItem"] > .block > .blockContent::before { diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts index 10d86462a7..db9869a78a 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts @@ -58,7 +58,7 @@ export const handleComplete = (editor: Editor) => { tr.setNodeMarkup(editor.state.selection.$from.before(), undefined, { checked: !node.attrs.checked, cancelled: false, - checklist: node.attrs.checklist, + scheduled: false, }); return true; }) @@ -77,7 +77,7 @@ export const handleCancel = (editor: Editor) => { tr.setNodeMarkup(editor.state.selection.$from.before(), undefined, { checked: false, cancelled: !node.attrs.cancelled, - checklist: node.attrs.checklist, + scheduled: false, }); return true; }) diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts index d95679b6a1..eeb0fe0955 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts @@ -59,6 +59,13 @@ export const CheckListItemBlockContent = createTipTapBlock<"checkListItem">({ "data-cancelled": attributes.cancelled, }), }, + scheduled: { + default: false, + parseHTML: (element) => element.getAttribute("data-scheduled"), + renderHTML: (attributes) => ({ + "data-scheduled": attributes.scheduled, + }), + }, }; }, diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts index 910afec4cf..d86054c673 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts @@ -60,6 +60,14 @@ export const TaskListItemBlockContent = createTipTapBlock<"taskListItem">({ "data-cancelled": attributes.cancelled, }), }, + scheduled: { + default: false, + keepOnSplit: false, + parseHTML: (element) => element.getAttribute("data-scheduled"), + renderHTML: (attributes) => ({ + "data-scheduled": attributes.scheduled, + }), + }, }; }, diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemNodeView.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemNodeView.ts index 5145b7cf06..c7fea5c57f 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemNodeView.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemNodeView.ts @@ -18,6 +18,7 @@ export function TaskListItemNodeView( dom.dataset.contentType = type; dom.dataset.checked = checked; dom.dataset.cancelled = node.attrs.cancelled || false; + dom.dataset.scheduled = node.attrs.scheduled || false; const label = document.createElement("label"); const input = document.createElement("input"); @@ -48,6 +49,7 @@ export function TaskListItemNodeView( : currentNode.attrs), checked: altKey ? true : checked, cancelled: altKey ? true : false, + scheduled: false, }); return true; }) @@ -74,6 +76,7 @@ export function TaskListItemNodeView( dom.dataset.checked = updatedNode.attrs.checked || false; dom.dataset.cancelled = updatedNode.attrs.cancelled || false; + dom.dataset.scheduled = updatedNode.attrs.scheduled || false; if (updatedNode.attrs.checked) { input.setAttribute("checked", "checked"); From ce70ffd15f9c2e1d4fc4ea6cec68124f45f3f205 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Mon, 17 Jul 2023 15:42:42 -0500 Subject: [PATCH 12/48] support checking off multiple tasks --- .../ListItemKeyboardShortcuts.ts | 81 ++++++++++--------- .../CheckListItemBlockContent.ts | 10 +-- .../TaskListItemBlockContent.ts | 10 +-- 3 files changed, 50 insertions(+), 51 deletions(-) diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts index db9869a78a..0496c334c9 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts @@ -46,42 +46,49 @@ export const handleEnter = (editor: Editor) => { ]); }; -export const handleComplete = (editor: Editor) => { - const node = editor.state.selection.$from.node(); - - console.log(node.attrs); - if (node) { - // transaction to toggle checked attribute - return editor - .chain() - .command(({ tr }) => { - tr.setNodeMarkup(editor.state.selection.$from.before(), undefined, { - checked: !node.attrs.checked, - cancelled: false, - scheduled: false, - }); - return true; - }) - .run(); - } - return false; -}; +export const handleAttribute = ( + editor: Editor, + attribute: "checked" | "cancelled" | "scheduled" +) => { + const { from, to } = editor.state.selection; -export const handleCancel = (editor: Editor) => { - const node = editor.state.selection.$from.node(); - if (node) { - // transaction to toggle checked attribute - return editor - .chain() - .command(({ tr }) => { - tr.setNodeMarkup(editor.state.selection.$from.before(), undefined, { - checked: false, - cancelled: !node.attrs.cancelled, - scheduled: false, - }); - return true; - }) - .run(); - } - return false; + // First, find if any node in the range has attribute = false + let anyUnset = false; + editor.state.doc.nodesBetween(from, to, (node) => { + if (node.attrs[attribute] !== undefined && !node.attrs[attribute]) { + anyUnset = true; + } + }); + + // Then, set all nodes' attribute based on anyUnset + editor.state.doc.nodesBetween(from, to, (node, pos) => { + if (node.attrs[attribute] !== undefined) { + const newAttributes = { + ...node.attrs, + [attribute]: anyUnset, // if any node had attribute = false, all nodes will have it set to true + }; + + if (attribute !== "cancelled") { + newAttributes.cancelled = false; + } + + if (attribute !== "scheduled") { + newAttributes.scheduled = false; + } + + if (attribute !== "checked") { + newAttributes.checked = false; + } + + editor + .chain() + .command(({ tr }) => { + tr.setNodeMarkup(pos, undefined, newAttributes); + return true; + }) + .run(); + } + }); + + return true; }; diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts index eeb0fe0955..f03138f93d 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts @@ -1,10 +1,6 @@ import { InputRule } from "@tiptap/core"; import { createTipTapBlock } from "../../../../api/block"; -import { - handleEnter, - handleComplete, - handleCancel, -} from "../ListItemKeyboardShortcuts"; +import { handleEnter, handleAttribute } from "../ListItemKeyboardShortcuts"; import { TaskListItemNodeView } from "./TaskListItemNodeView"; import { TaskListItemHTMLParser } from "./TaskListItemHTMLParser"; import { TaskListItemListHTMLRender } from "./TaskListItemHTMLRender"; @@ -38,8 +34,8 @@ export const CheckListItemBlockContent = createTipTapBlock<"checkListItem">({ addKeyboardShortcuts() { return { Enter: () => handleEnter(this.editor), - "Cmd-d": () => handleComplete(this.editor), - "Cmd-s": () => handleCancel(this.editor), + "Cmd-d": () => handleAttribute(this.editor, "checked"), + "Cmd-s": () => handleAttribute(this.editor, "cancelled"), }; }, diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts index d86054c673..f9c6d8fe12 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts @@ -1,10 +1,6 @@ import { InputRule } from "@tiptap/core"; import { createTipTapBlock } from "../../../../api/block"; -import { - handleEnter, - handleComplete, - handleCancel, -} from "../ListItemKeyboardShortcuts"; +import { handleEnter, handleAttribute } from "../ListItemKeyboardShortcuts"; import { TaskListItemNodeView } from "./TaskListItemNodeView"; import { TaskListItemHTMLParser } from "./TaskListItemHTMLParser"; import { TaskListItemListHTMLRender } from "./TaskListItemHTMLRender"; @@ -38,8 +34,8 @@ export const TaskListItemBlockContent = createTipTapBlock<"taskListItem">({ addKeyboardShortcuts() { return { Enter: () => handleEnter(this.editor), - "Cmd-d": () => handleComplete(this.editor), - "Cmd-s": () => handleCancel(this.editor), + "Cmd-d": () => handleAttribute(this.editor, "checked"), + "Cmd-s": () => handleAttribute(this.editor, "cancelled"), }; }, From c554fbdeb3712db91d2618bc5688e8b064679618 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Mon, 17 Jul 2023 18:43:51 -0500 Subject: [PATCH 13/48] add shorcuts for moving one or more lines up and down (control+option+up/down arrows), still needs a tooltip somewhere to explain this --- .../ListItemKeyboardShortcuts.ts | 100 ++++++++++++++++++ .../CheckListItemBlockContent.ts | 1 + .../ParagraphBlockContent.ts | 8 ++ 3 files changed, 109 insertions(+) diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts index 0496c334c9..b918d5fe73 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts @@ -92,3 +92,103 @@ export const handleAttribute = ( return true; }; + +export const handleMove = (editor: Editor, direction: "up" | "down") => { + const { from, to } = editor.state.selection; + + const nodes: any[] = []; + editor.state.doc.nodesBetween(from, to, (node) => { + // Check if defaultBlockSchema has the node type + if (node.type.name === "blockContainer") { + nodes.push(node); + } + }); + + // Save first and last nodes for setting the cursor later + const startNode = editor.state.selection.$from.node(-1); + const endNode = editor.state.selection.$to.node(-1); + + // Save the cursor offset within the taskNode before moving + const cursorOffsetStart = editor.state.selection.$from.parentOffset; + const cursorOffsetEnd = editor.state.selection.$to.parentOffset; + + // Get task or check node of the text node and its index + const nodeIndexStart = editor.state.selection.$from.index(-2); + const nodeIndexEnd = editor.state.selection.$to.index(-2); + + // Determine the target index based on the direction + const targetIndex = + direction === "up" ? nodeIndexStart - 1 : nodeIndexEnd + 2; + + // Ensure movement is possible (not out of bounds) + const listNode = editor.state.selection.$from.node(-2); + const isWithinBounds = + direction === "up" + ? nodeIndexStart > 0 + : nodeIndexEnd < listNode.childCount - 1; + + if (nodes.length > 0 && isWithinBounds) { + // Start a transaction + let tr = editor.state.tr; + + // Delete the range + const deleteAction = () => { + tr = tr.deleteRange( + editor.state.selection.$from.posAtIndex(nodeIndexStart, -2), + editor.state.selection.$to.posAtIndex(nodeIndexEnd + 1, -2) + ); + }; + + const insertAction = () => { + // Insert the fragment at the target index + // Loop through all nodes in nodes + for (let i = nodes.length - 1; i >= 0; i--) { + const node = nodes[i]; + + // Insert each node at the target index + tr = tr.insert( + editor.state.selection.$from.posAtIndex(targetIndex, -2), + node + ); + } + }; + + if (direction === "up") { + deleteAction(); + insertAction(); + } else { + insertAction(); + deleteAction(); + } + + // Apply the transaction + editor.view.dispatch(tr); + + // Fix the cursor selection or it's always at the end of the node, which is not good if the node has children + // First find the first and last node in the list to fetch the start and end pos + let startPos = -1; + let endPos = -1; + editor.state.doc.descendants((node, pos) => { + if (node.attrs.id === startNode.attrs.id) { + startPos = pos; + } + + if (node.attrs.id === endNode.attrs.id) { + endPos = pos; + } + }); + + // Set the cursor selection to the pos + if (startPos > -1 && endPos > -1) { + editor + .chain() + .setTextSelection({ + from: startPos + cursorOffsetStart + 2, + to: endPos + cursorOffsetEnd + 2, + }) + .run(); + } + } + + return true; +}; diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts index f03138f93d..d2e189d4f5 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts @@ -22,6 +22,7 @@ export const CheckListItemBlockContent = createTipTapBlock<"checkListItem">({ props: { checked: "false", canceled: "false", + scheduled: "false", }, }) // Removes the "*" character used to set the list. diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts index 9d44f9bb7a..9bc244a9e7 100644 --- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts +++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts @@ -1,11 +1,19 @@ import { mergeAttributes } from "@tiptap/core"; import { createTipTapBlock } from "../../../api/block"; import styles from "../../Block.module.css"; +import { handleMove } from "../ListItemBlockContent/ListItemKeyboardShortcuts"; export const ParagraphBlockContent = createTipTapBlock<"paragraph">({ name: "paragraph", content: "inline*", + addKeyboardShortcuts() { + return { + "Control-alt-ArrowDown": () => handleMove(this.editor, "down"), + "Control-alt-ArrowUp": () => handleMove(this.editor, "up"), + }; + }, + parseHTML() { return [ { From 91d99efe230c8872c1d84168aadc6eda046bf96e Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Tue, 18 Jul 2023 17:14:16 -0500 Subject: [PATCH 14/48] adjust headings sizes --- packages/core/src/extensions/Blocks/nodes/Block.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css index df82a77ee2..ff7a03afb6 100644 --- a/packages/core/src/extensions/Blocks/nodes/Block.module.css +++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css @@ -132,10 +132,10 @@ NESTED BLOCKS /* HEADINGS*/ [data-level="1"] { - --level: 3em; + --level: 1.9em; } [data-level="2"] { - --level: 2em; + --level: 1.6em; } [data-level="3"] { --level: 1.3em; From 50e5836f97744d759774a710751ed2f1285892e3 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Wed, 19 Jul 2023 18:57:36 -0500 Subject: [PATCH 15/48] add hashtags/mentions --- packages/core/src/BlockNoteExtensions.ts | 2 + .../api/nodeConversions/nodeConversions.ts | 1 + .../Blocks/api/inlineContentTypes.ts | 1 + .../core/src/extensions/Blocks/inline/tags.ts | 104 ++++++++++++++++++ .../extensions/Blocks/nodes/Block.module.css | 17 +++ 5 files changed, 125 insertions(+) create mode 100644 packages/core/src/extensions/Blocks/inline/tags.ts diff --git a/packages/core/src/BlockNoteExtensions.ts b/packages/core/src/BlockNoteExtensions.ts index 084432e32e..9140bce455 100644 --- a/packages/core/src/BlockNoteExtensions.ts +++ b/packages/core/src/BlockNoteExtensions.ts @@ -4,6 +4,7 @@ import { BlockNoteEditor } from "./BlockNoteEditor"; import { Bold } from "@tiptap/extension-bold"; import { Code } from "@tiptap/extension-code"; +import { Hashtag } from "./extensions/Blocks/inline/tags"; import Collaboration from "@tiptap/extension-collaboration"; import CollaborationCursor from "@tiptap/extension-collaboration-cursor"; import { Dropcursor } from "@tiptap/extension-dropcursor"; @@ -99,6 +100,7 @@ export const getBlockNoteExtensions = (opts: { Italic, Strike, Underline, + Hashtag, TextColorMark, TextColorExtension, BackgroundColorMark, diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts index dc7f53c226..09aab9559d 100644 --- a/packages/core/src/api/nodeConversions/nodeConversions.ts +++ b/packages/core/src/api/nodeConversions/nodeConversions.ts @@ -26,6 +26,7 @@ const toggleStyles = new Set([ "underline", "strike", "code", + "hashtag", ]); const colorStyles = new Set(["textColor", "backgroundColor"]); diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts index 9d63930d95..1895c2df6b 100644 --- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts +++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts @@ -6,6 +6,7 @@ export type Styles = { code?: true; textColor?: string; backgroundColor?: string; + hashtag?: true; }; export type ToggledStyle = { diff --git a/packages/core/src/extensions/Blocks/inline/tags.ts b/packages/core/src/extensions/Blocks/inline/tags.ts new file mode 100644 index 0000000000..078c88970d --- /dev/null +++ b/packages/core/src/extensions/Blocks/inline/tags.ts @@ -0,0 +1,104 @@ +import { InputRule, Mark, markPasteRule } from "@tiptap/core"; +import { Plugin } from "prosemirror-state"; + +export interface HashtagOptions { + HTMLAttributes: Record; +} + +export const hashtagInputRegex = /(?<=(^|\s))(((#|@)(?:[\w-_/]+)))$/; +export const hashtagPasteRegex = /(?<=(^|\s))(((#|@)(?:[\w-_/]+)))/g; + +export const Hashtag = Mark.create({ + name: "hashtag", + + parseHTML() { + return [ + { + tag: "span", + getAttrs: (element: HTMLElement | string) => { + if (typeof element === "string") { + return false; + } + + if (element.getAttribute("data-hashtag") === this.name) { + return {}; + } + + return false; + }, + }, + ]; + }, + + renderHTML() { + return ["span", { "data-hashtag": this.name }, 0]; + }, + + addAttributes() { + return { + hashtag: { + default: false, + parseHTML: (element) => element.getAttribute("data-hashtag"), + renderHTML: () => ({ + "data-hashtag": true, + }), + }, + }; + }, + + addInputRules() { + return [ + new InputRule({ + find: new RegExp(hashtagInputRegex), + handler: ({ state, match, range }) => { + const attrs = { hashtag: true }; + const tr = state.tr.insertText(match[0], range.from, range.to); + state.tr.addMark(range.from, range.to + 1, this.type.create(attrs)); + state.applyTransaction(tr); + }, + }), + ]; + }, + + addPasteRules() { + return [ + markPasteRule({ + find: hashtagPasteRegex, + type: this.type, + }), + ]; + }, + + addProseMirrorPlugins() { + // this plugin will clear the hashtag mark when a space is typed + return [ + new Plugin({ + props: { + handleTextInput: (view, from, to, text) => { + const { state } = view; + const { $from } = state.selection; + const markType = this.type; + + console.log($from.marks().some((mark) => mark.type === markType)); + + if ( + text === " " && + $from.marks().some((mark) => mark.type === markType) + ) { + const transaction = state.tr.replaceWith( + from, + to, + state.schema.text(text) + ); + view.dispatch(transaction); + + return true; + } + + return false; + }, + }, + }), + ]; + }, +}); diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css index ff7a03afb6..7efda543f4 100644 --- a/packages/core/src/extensions/Blocks/nodes/Block.module.css +++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css @@ -450,6 +450,13 @@ NESTED BLOCKS content: "List"; } +/* Inline Code */ +code { + color: #0091f9; + font-family: "SF Mono", Menlo, Monaco, "Courier New", Courier, monospace; + font-weight: 550; +} + /* TEXT COLORS */ [data-text-color="gray"] { color: #9b9a97; @@ -540,3 +547,13 @@ NESTED BLOCKS [data-text-alignment="justify"] { text-align: justify; } + +/* HASHTAG */ +span[data-hashtag] { + color: var(--orange-noteplan); + cursor: pointer; + padding: 2px 5px; /* adjust as needed */ + border-radius: 10px; /* this gives the pill shape */ + background-color: #d8700120; /* replace with your desired background color */ + text-decoration: none; /* optional: removes underline if your hashtags are also links */ +} From 36307c77c8fcfdef2636ad77a7a21d22efc47e43 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Wed, 19 Jul 2023 19:08:09 -0500 Subject: [PATCH 16/48] Fix tag pasting issues --- packages/core/src/extensions/Blocks/inline/tags.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/core/src/extensions/Blocks/inline/tags.ts b/packages/core/src/extensions/Blocks/inline/tags.ts index 078c88970d..11b0c36eb3 100644 --- a/packages/core/src/extensions/Blocks/inline/tags.ts +++ b/packages/core/src/extensions/Blocks/inline/tags.ts @@ -5,8 +5,9 @@ export interface HashtagOptions { HTMLAttributes: Record; } -export const hashtagInputRegex = /(?<=(^|\s))(((#|@)(?:[\w-_/]+)))$/; -export const hashtagPasteRegex = /(?<=(^|\s))(((#|@)(?:[\w-_/]+)))/g; +export const hashtagInputRegex = /((#|@)[\w-_/]+)$/; +export const hashtagPasteRegex = /((^|\s)#[\w-_/]+)/g; +export const mentionPasteRegex = /((^|\s)@[\w-_/]+)/g; export const Hashtag = Mark.create({ name: "hashtag", @@ -66,6 +67,10 @@ export const Hashtag = Mark.create({ find: hashtagPasteRegex, type: this.type, }), + markPasteRule({ + find: mentionPasteRegex, + type: this.type, + }), ]; }, @@ -79,8 +84,6 @@ export const Hashtag = Mark.create({ const { $from } = state.selection; const markType = this.type; - console.log($from.marks().some((mark) => mark.type === markType)); - if ( text === " " && $from.marks().some((mark) => mark.type === markType) From 9481874b80e6cd10af8006e2079843e328724897 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Wed, 19 Jul 2023 19:10:32 -0500 Subject: [PATCH 17/48] fix in tags it should have space before the tag --- packages/core/src/extensions/Blocks/inline/tags.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/extensions/Blocks/inline/tags.ts b/packages/core/src/extensions/Blocks/inline/tags.ts index 11b0c36eb3..e8e1b95030 100644 --- a/packages/core/src/extensions/Blocks/inline/tags.ts +++ b/packages/core/src/extensions/Blocks/inline/tags.ts @@ -5,7 +5,7 @@ export interface HashtagOptions { HTMLAttributes: Record; } -export const hashtagInputRegex = /((#|@)[\w-_/]+)$/; +export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)$/; export const hashtagPasteRegex = /((^|\s)#[\w-_/]+)/g; export const mentionPasteRegex = /((^|\s)@[\w-_/]+)/g; From 93146234de67b4d7be1889a58f8ecd8432bd58c6 Mon Sep 17 00:00:00 2001 From: Eduard Metzger Date: Wed, 19 Jul 2023 22:15:09 -0500 Subject: [PATCH 18/48] fixed tagging issue --- .../core/src/extensions/Blocks/inline/tags.ts | 107 ++++++++++-------- 1 file changed, 58 insertions(+), 49 deletions(-) diff --git a/packages/core/src/extensions/Blocks/inline/tags.ts b/packages/core/src/extensions/Blocks/inline/tags.ts index e8e1b95030..18bd4e600b 100644 --- a/packages/core/src/extensions/Blocks/inline/tags.ts +++ b/packages/core/src/extensions/Blocks/inline/tags.ts @@ -4,10 +4,11 @@ import { Plugin } from "prosemirror-state"; export interface HashtagOptions { HTMLAttributes: Record; } +// export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)$/; -export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)$/; -export const hashtagPasteRegex = /((^|\s)#[\w-_/]+)/g; -export const mentionPasteRegex = /((^|\s)@[\w-_/]+)/g; +export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)/g; +export const hashtagPasteRegex = /(?:^|\s)(#[\w-_/]+)/g; +export const mentionPasteRegex = /(?:^|\s)(@[\w-_/]+)/g; export const Hashtag = Mark.create({ name: "hashtag", @@ -47,59 +48,67 @@ export const Hashtag = Mark.create({ }; }, - addInputRules() { - return [ - new InputRule({ - find: new RegExp(hashtagInputRegex), - handler: ({ state, match, range }) => { - const attrs = { hashtag: true }; - const tr = state.tr.insertText(match[0], range.from, range.to); - state.tr.addMark(range.from, range.to + 1, this.type.create(attrs)); - state.applyTransaction(tr); - }, - }), - ]; - }, + // addInputRules() { + // return [ + // new InputRule({ + // find: new RegExp(hashtagInputRegex), + // handler: ({ state, match, range }) => { + // const attrs = { hashtag: true }; + // const tr = state.tr.insertText(match[0], range.from, range.to); + // state.tr.addMark(range.from, range.to + 1, this.type.create(attrs)); + // state.applyTransaction(tr); + // }, + // }), + // ]; + // }, - addPasteRules() { - return [ - markPasteRule({ - find: hashtagPasteRegex, - type: this.type, - }), - markPasteRule({ - find: mentionPasteRegex, - type: this.type, - }), - ]; - }, + // addPasteRules() { + // return [ + // markPasteRule({ + // find: hashtagPasteRegex, + // type: this.type, + // }), + // markPasteRule({ + // find: mentionPasteRegex, + // type: this.type, + // }), + // ]; + // }, addProseMirrorPlugins() { // this plugin will clear the hashtag mark when a space is typed + // and also detect valid mentions and hashtags that become valid due to space insertion return [ new Plugin({ - props: { - handleTextInput: (view, from, to, text) => { - const { state } = view; - const { $from } = state.selection; - const markType = this.type; - - if ( - text === " " && - $from.marks().some((mark) => mark.type === markType) - ) { - const transaction = state.tr.replaceWith( - from, - to, - state.schema.text(text) - ); - view.dispatch(transaction); - - return true; - } + props: {}, + appendTransaction: (_transactions, _oldState, newState) => { + const state = newState; + const markType = this.type; + const { tr } = state; - return false; - }, + // Start of line position + const lineStart = state.doc + .resolve(state.selection.$from.pos) + .start(-1); + // End of line position + const lineEnd = state.doc.resolve(state.selection.$from.pos).end(-1); + + // Remove all hashtag marks in the line + tr.removeMark(lineStart, lineEnd, markType); + + // Scan the whole line for valid mentions or hashtags + const lineText = state.doc.textBetween(lineStart, lineEnd, "\n"); + + let match; + while ((match = hashtagInputRegex.exec(lineText)) !== null) { + // If there is a valid mention or hashtag, add the mark + const fromHashtag = lineStart + match.index + 1; + const toHashtag = fromHashtag + match[0].length; + const attrs = { hashtag: true }; + tr.addMark(fromHashtag, toHashtag, markType.create(attrs)); + } + + return tr; }, }), ]; From 928451c1394f00af17362c73f110abd5d9e902a3 Mon Sep 17 00:00:00 2001 From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com> Date: Thu, 20 Jul 2023 20:23:15 +0900 Subject: [PATCH 19/48] WIP noteplan to blocks conversion and test page --- examples/editor/src/App.tsx | 62 +- package-lock.json | 301 +++---- packages/core/package.json | 1 + .../formatConversions/notePlanConversions.ts | 747 ++++++++++++++++++ 4 files changed, 917 insertions(+), 194 deletions(-) create mode 100644 packages/core/src/api/formatConversions/notePlanConversions.ts diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx index 5e2ae4e925..613ecb4009 100644 --- a/examples/editor/src/App.tsx +++ b/examples/editor/src/App.tsx @@ -2,24 +2,30 @@ import "@blocknote/core/style.css"; import { BlockNoteView, useBlockNote } from "@blocknote/react"; import styles from "./App.module.css"; -import { parseMarkdown } from "../../../packages/core/src/api/formatConversions/npMarkdownConversions"; +import { parseNoteToBlocks } from "../../../packages/core/src/api/formatConversions/notePlanConversions"; + +import { useEffect, useState } from "react"; +import { BlockNoteEditor, BlockSchema, PartialBlock } from "@blocknote/core"; type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any; editor?: any }; -// Gets the previously stored editor contents. -const initialContent: string | null = localStorage.getItem("editorContent"); - function App() { - const editor = useBlockNote({ - initialContent: initialContent ? JSON.parse(initialContent) : undefined, - onEditorContentChange: (editor) => { - localStorage.setItem( - "editorContent", - JSON.stringify(editor.topLevelBlocks) - ); - - console.log(editor.topLevelBlocks); + const [input, setInput] = useState(""); + const [markdown, setMarkdown] = useState(""); + const [json, setJSON] = useState(""); + + const editor: BlockNoteEditor | null = useBlockNote({ + onEditorContentChange: (editor: BlockNoteEditor) => { + const saveBlocksAsMarkdown = async () => { + const markdown: string = await editor.blocksToMarkdown( + editor.topLevelBlocks + ); + setMarkdown(markdown); + const json: string = JSON.stringify(editor.topLevelBlocks, null, 2); + setJSON(json); + }; + saveBlocksAsMarkdown(); }, editorDOMAttributes: { class: styles.editor, @@ -28,12 +34,38 @@ function App() { theme: "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); + console.log(blocks); + 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; - window.parseMarkdown = parseMarkdown; - return ; + return ( +

Input

setInput(event.target.value)}
+      />
+      <h3>Editor</h3>
+      <BlockNoteView editor={editor} />
+      <h3>Output</h3>
+      <pre>{json}</pre>
+      <pre>{markdown}</pre>
+    </div>
+  );
 }
 
 export default App;
diff --git a/package-lock.json b/package-lock.json
index c3a865294d..edb2db1c92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,15 @@
         "vite-plugin-eslint": "^1.8.1"
       }
     },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@algolia/autocomplete-core": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.8.2.tgz",
@@ -3177,9 +3186,9 @@
       }
     },
     "node_modules/@lerna/add/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3243,9 +3252,9 @@
       }
     },
     "node_modules/@lerna/bootstrap/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3349,12 +3358,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/@lerna/child-process/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/@lerna/child-process/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3467,12 +3470,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/@lerna/collect-uncommitted/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/@lerna/collect-uncommitted/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3565,9 +3562,9 @@
       }
     },
     "node_modules/@lerna/conventional-commits/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3639,9 +3636,9 @@
       }
     },
     "node_modules/@lerna/create/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3824,9 +3821,9 @@
       }
     },
     "node_modules/@lerna/has-npm-version/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3983,12 +3980,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/@lerna/listable/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/@lerna/listable/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -4189,9 +4180,9 @@
       }
     },
     "node_modules/@lerna/package-graph/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4234,9 +4225,9 @@
       }
     },
     "node_modules/@lerna/prerelease-id-from-version/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4378,9 +4369,9 @@
       }
     },
     "node_modules/@lerna/publish/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4647,12 +4638,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/@lerna/version/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/@lerna/version/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -4675,9 +4660,9 @@
       }
     },
     "node_modules/@lerna/version/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5042,9 +5027,9 @@
       }
     },
     "node_modules/@npmcli/arborist/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5100,9 +5085,9 @@
       }
     },
     "node_modules/@npmcli/fs/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5150,9 +5135,9 @@
       }
     },
     "node_modules/@npmcli/git/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -5262,9 +5247,9 @@
       }
     },
     "node_modules/@npmcli/metavuln-calculator/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6584,9 +6569,9 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6747,9 +6732,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -6828,9 +6813,9 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -8125,9 +8110,9 @@
       }
     },
     "node_modules/builtins/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -10175,12 +10160,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/eslint/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/eslint/node_modules/globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -11777,9 +11756,9 @@
       }
     },
     "node_modules/init-package-json/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -11878,12 +11857,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/inquirer/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/inquirer/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -12528,12 +12501,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/jake/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/jake/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -12954,9 +12921,9 @@
       }
     },
     "node_modules/libnpmaccess/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -13054,9 +13021,9 @@
       }
     },
     "node_modules/libnpmpublish/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -13263,12 +13230,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/log-symbols/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/log-symbols/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -13817,9 +13778,9 @@
       }
     },
     "node_modules/meow/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -14846,9 +14807,9 @@
       }
     },
     "node_modules/node-gyp/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -14914,9 +14875,9 @@
       }
     },
     "node_modules/normalize-package-data/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -14977,9 +14938,9 @@
       }
     },
     "node_modules/npm-install-checks/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -15048,9 +15009,9 @@
       }
     },
     "node_modules/npm-package-arg/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -15177,9 +15138,9 @@
       }
     },
     "node_modules/npm-pick-manifest/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -15264,9 +15225,9 @@
       }
     },
     "node_modules/npm-registry-fetch/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -15442,12 +15403,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/nx/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/nx/node_modules/fast-glob": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
@@ -15823,17 +15778,17 @@
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -15905,12 +15860,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/ora/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/ora/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -16154,9 +16103,9 @@
       }
     },
     "node_modules/pacote/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -16361,12 +16310,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/patch-package/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/patch-package/node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -16450,9 +16393,9 @@
       }
     },
     "node_modules/patch-package/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -17321,9 +17264,9 @@
       }
     },
     "node_modules/read-package-json/node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -17515,9 +17458,9 @@
       }
     },
     "node_modules/read-pkg/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -18209,9 +18152,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -18964,10 +18907,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tokenizr": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/tokenizr/-/tokenizr-1.6.10.tgz",
+      "integrity": "sha512-X+b3uWUlezYyvjltWlIEG8R2v7uLif3kr4UGmlmGbJpmg3CCnedzoWjQ5DIfr2q+EuIjAbc4AgItWguzl+0LyQ=="
+    },
     "node_modules/tough-cookie": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz",
-      "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
       "dev": true,
       "dependencies": {
         "psl": "^1.1.33",
@@ -20132,12 +20080,6 @@
         "node": ">=7.0.0"
       }
     },
-    "node_modules/wrap-ansi/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -20244,9 +20186,9 @@
       }
     },
     "node_modules/write-pkg/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -20502,6 +20444,7 @@
         "remark-parse": "^10.0.1",
         "remark-rehype": "^10.1.0",
         "remark-stringify": "^10.0.2",
+        "tokenizr": "^1.6.10",
         "unified": "^10.1.2",
         "uuid": "^8.3.2",
         "y-prosemirror": "1.0.20",
diff --git a/packages/core/package.json b/packages/core/package.json
index 11a309b765..59f11adc8d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -78,6 +78,7 @@
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
     "remark-stringify": "^10.0.2",
+    "tokenizr": "^1.6.10",
     "unified": "^10.1.2",
     "uuid": "^8.3.2",
     "y-prosemirror": "1.0.20",
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
new file mode 100644
index 0000000000..3b34ff283f
--- /dev/null
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -0,0 +1,747 @@
+import {
+  PartialBlock,
+  BlockSchema,
+  PropSchema,
+  Props,
+} from "../../extensions/Blocks/api/blockTypes";
+import { PartialInlineContent } from "../../extensions/Blocks/api/inlineContentTypes";
+import { DefaultBlockSchema } from "../..";
+import Tokenizr from "tokenizr";
+
+var attachmentCount = 0;
+var imageCount = 0;
+var attachments = [];
+const imageExtension = ["png", "jpeg", "jpg", "bmp", "tiff", "ico", "svg"];
+
+const codeFenceOpenRegex = /^```/;
+const codeFenceCloseRegex = /^```\s*$/;
+const separatorRegex =
+  /(?:^|\v)([\-\_]{3,}|\*\*\* |(\-(\h|$)){3,}|\*{5,})(?:$|\v)/;
+
+window.matchMedia =
+  window.matchMedia ||
+  function () {
+    return {
+      matches: false,
+      addListener: function () {},
+      removeListener: function () {},
+      addEventListener: function () {},
+      removeEventListener: function () {},
+    };
+  };
+
+function downloadFile(url: string, isImage: boolean): string | null {
+  // If we find an attachment, be in an image or file, we donwload it from CloudKit, then display it. That's the only way.
+  // It would be better if we can simply link file attachments, but we get an odd downloadURL from Apple, which downloads the
+  // file when clicking on it with a weird filename.
+  // TODO create image and file block: https://www.blocknotejs.org/docs/block-types#custom-block-types
+  let currentAttachmentCount = isImage ? imageCount : attachmentCount;
+  // Get the downloadURL from the asset object from CloudKit
+  if (!attachments || !attachments[currentAttachmentCount]) {
+    return null;
+  }
+
+  // Extract the extension (so we can check if its an image) and the filename.
+  let split = url.split(".");
+  let ext = split[split.length - 1];
+
+  split = url.split("/");
+  let filename = split[split.length - 1];
+
+  if (ext) {
+    isImage = imageExtension.includes(ext);
+  }
+
+  let downloadUrl = attachments[currentAttachmentCount].downloadURL;
+
+  fetch(downloadUrl)
+    .then((response) => {
+      return response.blob();
+    })
+    .then((blob) => {
+      // Create an URL to the blob, which can be opened by the browser (PDF) or displayed (image)
+      const url = window.URL.createObjectURL(
+        new Blob([blob], { type: "application/" + ext })
+      );
+
+      // Find the placeholder which we are showing before the file is downloaded.
+      const item = document.getElementById(
+        "attachment-" + currentAttachmentCount
+      );
+
+      // Either set the image source or link up the attachment.
+      if (isImage) {
+        item.src = url;
+      } else {
+        item.href = url;
+        item.className = "note-attachment"; // Indicate the attachment is clickable now
+        if (ext !== "pdf") {
+          // If it's a PDF we can open it directly, no need to download
+          item.download = filename;
+        }
+      }
+
+      // Hide the loading indicator
+      document
+        .getElementById("attachment-loading-" + currentAttachmentCount)
+        ?.remove();
+    });
+
+  // Create the placeholder html object while we load the attachments
+  let placeholderId = "attachment-" + currentAttachmentCount;
+  let placeholderLoadingId = "attachment-loading-" + currentAttachmentCount;
+  let replace = isImage
+    ? "<div><div id='" +
+      placeholderLoadingId +
+      "' class='inline-loader'></div><img class='note-image' id='" +
+      placeholderId +
+      "'/></div>"
+    : "<div class='attachment-container'><div id='" +
+      placeholderLoadingId +
+      "' class='inline-loader'></div><a target='_blank' class='note-attachment-disabled' id='" +
+      placeholderId +
+      "'><i class='far fa-paperclip'></i><span class='attachment-name'>" +
+      filename +
+      "</span></a></div>";
+
+  // Attachment counter to walk through the assets array
+  if (isImage) {
+    imageCount += 1;
+  } else {
+    attachmentCount += 1;
+  }
+
+  return replace;
+}
+
+type BlockType = keyof DefaultBlockSchema;
+
+function createBlock(
+  type: BlockType,
+  innerText: string,
+  props?: Props<PropSchema>
+): PartialBlock<BlockSchema> {
+  let block: PartialBlock<BlockSchema> = {
+    type: type,
+    content: [],
+    children: [],
+  };
+
+  block.content = createInlineContent(innerText);
+
+  if (props) {
+    return { ...block, props: props };
+  } else {
+    return block;
+  }
+}
+
+function createInlineContent(text: string): PartialInlineContent[] {
+  const fileLinkRegex = /\!\[(file)\]$([^\($]+)\)/;
+  const imageLinkRegex = /\!\[(image)\]$([^\($]+)\)/;
+  const namedLinkRegex = /\[([^\[\]]*)\]$([^\($]+)\)/;
+  const linkRegex =
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&\/\/=]*)/;
+  const doneDateRegex =
+    /@done$(([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]))( ((0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]( ?[aApP][mM])?))?$/;
+  const hashTagRegex =
+    /(?!#[\d!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~]+(\s|$))(#([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+?\$.*?\$|#([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+)/;
+  const atRegex =
+    /(?!@[\d!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+?\$.*?\$|@([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+)/;
+
+  let lexer = new Tokenizr();
+  // file link
+  lexer.rule(fileLinkRegex, (ctx, match) => {
+    ctx.accept("file-link", match[2]);
+  });
+  // image link
+  lexer.rule(imageLinkRegex, (ctx, match) => {
+    ctx.accept("image-link", match[2]);
+  });
+  // named link
+  lexer.rule(namedLinkRegex, (ctx, match) => {
+    ctx.accept("named-link", { name: match[1], link: match[2] });
+  });
+  // link
+  lexer.rule(linkRegex, (ctx, match) => {
+    ctx.accept("link");
+  });
+  // done date
+  lexer.rule(doneDateRegex, (ctx, match) => {
+    ctx.accept("done-date");
+  });
+  // hash tag
+  lexer.rule(hashTagRegex, (ctx, match) => {
+    ctx.accept("hash-tag");
+  });
+  // at tag
+  lexer.rule(atRegex, (ctx, match) => {
+    ctx.accept("at-tag");
+  });
+  // code
+  lexer.rule(/`(.*?)`/, (ctx, match) => {
+    ctx.accept("code", match[1]);
+  });
+  // bold
+  lexer.rule(/\*\*(.*?)\*\*/, (ctx, match) => {
+    ctx.accept("bold", match[1]);
+  });
+  // bold with underscore
+  lexer.rule(/__(.*?)__/, (ctx, match) => {
+    ctx.accept("bold", match[1]);
+  });
+  // italic
+  lexer.rule(/\*(.*?)\*/, (ctx, match) => {
+    ctx.accept("italic", match[1]);
+  });
+  // italic with underscore
+  lexer.rule(/_(.*?)_/, (ctx, match) => {
+    ctx.accept("italic", match[1]);
+  });
+  // strikethrough
+  lexer.rule(/~~(.*?)~~/, (ctx, match) => {
+    ctx.accept("strike", match[1]);
+  });
+  // highlight
+  lexer.rule(/::(.*?)::/, (ctx, match) => {
+    ctx.accept("highlight", match[1]);
+  });
+  // plain text
+  let plaintext = "";
+  lexer.before((ctx, match, rule) => {
+    if (rule.name !== "text" && plaintext !== "") {
+      ctx.accept("text", plaintext);
+      plaintext = "";
+    }
+  });
+  lexer.rule(
+    /./,
+    (ctx, match) => {
+      plaintext += match[0];
+      ctx.ignore();
+    },
+    "text"
+  );
+  lexer.finish((ctx) => {
+    if (plaintext !== "") {
+      ctx.accept("text", plaintext);
+    }
+  });
+
+  lexer.input(text);
+
+  let inlineContent: PartialInlineContent[] = [];
+  lexer.tokens().forEach((token) => {
+    switch (token.type) {
+      case "text":
+        inlineContent.push({ type: "text", text: token.value, styles: {} });
+        break;
+      case "bold":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { bold: true },
+        });
+        break;
+      case "italic":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { italic: true },
+        });
+        break;
+      case "strike":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { strike: true },
+        });
+        break;
+      case "highlight":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { backgroundColor: "highlight-color" },
+        });
+        break;
+      case "code":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { code: true },
+        });
+        break;
+      case "file-link":
+        inlineContent.push({
+          type: "link",
+          href: token.value,
+          content: token.value,
+        });
+        downloadFile(token.value, false);
+        break;
+      case "image-link":
+        inlineContent.push({
+          type: "link",
+          href: token.value,
+          content: token.value,
+        });
+        downloadFile(token.value, true);
+        break;
+      case "link":
+        inlineContent.push({
+          type: "link",
+          href: token.value,
+          content: token.value,
+        });
+        break;
+      case "named-link":
+        inlineContent.push({
+          type: "link",
+          href: token.value.link,
+          content: token.value.name,
+        });
+        break;
+      case "done-date":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { textColor: "done-color" },
+        });
+        break;
+      case "hash-tag":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { textColor: "hashtag-color" },
+        });
+        break;
+      case "at-tag":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { textColor: "at-color" },
+        });
+        break;
+    }
+  });
+
+  return inlineContent;
+}
+
+function parseHeader(
+  line: string,
+  regex: RegExp,
+  level: number
+): PartialBlock<BlockSchema> | null {
+  let matches = regex.exec(line);
+
+  if (matches == null) {
+    return null;
+  }
+
+  let substring = line.substring(matches[0].length);
+  // let header = createElement(type, substring);
+  // header.id = generateHeaderID(substring);
+  // TODO use as BlockIdentifier?
+  let header = createBlock("heading", substring, { level: level.toString() });
+
+  return header;
+}
+
+function parseIndentedBlock(
+  line: string,
+  regex: RegExp,
+  type: BlockType
+): PartialBlock<BlockSchema> | null {
+  let matches = regex.exec(line);
+
+  if (matches == null) {
+    return null;
+  }
+
+  let substring = line.substring(matches[0].length);
+  let block = createBlock(type, substring);
+
+  // TODO how to handle indeted quote blocks?
+  // let leadingWhitespace = matches[1].length;
+  // let div = document.createElement(outterType);
+  // if (leadingWhitespace > 0) {
+  //   div.style.marginLeft = (leadingWhitespace * 36).toString() + "px";
+  // }
+
+  return block;
+}
+
+function parseParagraph(line: string): PartialBlock<BlockSchema> {
+  if (line.length === 0) {
+    return createBlock("paragraph", "");
+  }
+
+  let matches = /^(\s*)\S*/.exec(line);
+  console.log(matches);
+  if (matches != null) {
+    let leadingWhitespace = matches[1].length;
+    if (leadingWhitespace > 1) {
+      let level = Math.floor(leadingWhitespace / 2);
+      return createBlock("paragraph", line.substring(leadingWhitespace), {
+        level: level.toString(),
+      });
+    }
+  }
+
+  return createBlock("paragraph", line);
+}
+
+function parseHeader1(line: string): PartialBlock<BlockSchema> | null {
+  return parseHeader(line, /^#\s+/, 1);
+}
+
+function parseHeader2(line: string): PartialBlock<BlockSchema> | null {
+  return parseHeader(line, /^##\s+/, 2);
+}
+
+function parseHeader3(line: string): PartialBlock<BlockSchema> | null {
+  return parseHeader(line, /^###\s+/, 3);
+}
+
+function parseHeader4(line: string): PartialBlock<BlockSchema> | null {
+  return parseHeader(line, /^#+\s+/, 4);
+}
+
+function parseQuote(line: string): PartialBlock<BlockSchema> | null {
+  return parseIndentedBlock(line, /^(\s*?)>\s+/, "quoteListItem");
+}
+
+function parseListWithIcon(
+  line: string,
+  regex: RegExp,
+  type: BlockType,
+  props?: Props<PropSchema>
+): PartialBlock<BlockSchema> | null {
+  let matches = regex.exec(line);
+
+  if (matches == null) {
+    return null;
+  }
+
+  let substring = line.substring(matches[0].length);
+
+  let leadingWhitespace = matches[1].length;
+  let level = 0;
+  if (leadingWhitespace > 1) {
+    level = Math.floor(leadingWhitespace / 2);
+  }
+
+  let block = createBlock(type, substring, {
+    ...props,
+    level: level.toString(),
+  });
+  return block;
+}
+
+function parseOrderedList(line: string): PartialBlock<BlockSchema> | null {
+  let matches = /^(\s*?)(\d+)\.\s+/.exec(line);
+
+  if (matches == null) {
+    return null;
+  }
+
+  let substring = line.substring(matches[0].length);
+
+  let leadingWhitespace = matches[1].length;
+  let level = 0;
+  if (leadingWhitespace > 1) {
+    level = Math.floor(leadingWhitespace / 2);
+  }
+
+  let block = createBlock("numberedListItem", substring, {
+    level: level.toString(),
+  });
+  return block;
+}
+
+function parseToDoHyphen(line: string): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)- \[ \]\s+/, "taskListItem");
+}
+
+function parseToDoHyphenCancelled(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)- \[-\]\s+/, "taskListItem", {
+    canceled: "true",
+  });
+}
+
+function parseToDoHyphenComplete(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)- \[x\]\s+/, "taskListItem", {
+    checked: "true",
+  });
+}
+
+function parseToDoHyphenScheduled(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)- \[>\]\s+/, "taskListItem", {
+    scheduled: "true",
+  });
+}
+
+function parseToDoAsteriskCancelled(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\* \[-\]\s+/, "taskListItem", {
+    canceled: "true",
+  });
+}
+
+function parseToDoAsteriskComplete(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\* \[x\]\s+/, "taskListItem", {
+    checked: "true",
+  });
+}
+
+function parseToDoAsteriskScheduled(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\* \[>\]\s+/, "taskListItem", {
+    scheduled: "true",
+  });
+}
+
+function parseToDoAsterisk(line: string): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\*( \[ \])?\s+/, "taskListItem");
+}
+
+function parseChecklistPlusCancelled(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\+ \[-\]\s+/, "checkListItem", {
+    canceled: "true",
+  });
+}
+
+function parseChecklistPlusComplete(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\+ \[x\]\s+/, "checkListItem", {
+    checked: "true",
+  });
+}
+
+function parseChecklistPlusScheduled(
+  line: string
+): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\+ \[>\]\s+/, "checkListItem", {
+    scheduled: "true",
+  });
+}
+
+function parseChecklistPlus(line: string): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)\+( \[ \])?\s+/, "checkListItem");
+}
+
+function parseUnorderedList(line: string): PartialBlock<BlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)-\s+/, "bulletListItem");
+}
+
+const parseFunctions = [
+  parseHeader1,
+  parseHeader2,
+  parseHeader3,
+  parseHeader4,
+  parseQuote,
+  parseToDoHyphen,
+  parseToDoHyphenComplete,
+  parseToDoHyphenCancelled,
+  parseToDoHyphenScheduled,
+  parseToDoAsteriskComplete,
+  parseToDoAsteriskCancelled,
+  parseToDoAsteriskScheduled,
+  parseToDoAsterisk,
+  parseChecklistPlusComplete,
+  parseChecklistPlusCancelled,
+  parseChecklistPlusScheduled,
+  parseChecklistPlus,
+  parseUnorderedList,
+  parseOrderedList,
+  parseParagraph,
+];
+
+function parseNoteLine(line: string): PartialBlock<BlockSchema> {
+  let parseFunctionsLength = parseFunctions.length;
+
+  for (let i = 0; i < parseFunctionsLength; ++i) {
+    //TODO handle lines with separator
+    let block = parseFunctions[i](line);
+
+    if (block != null) {
+      return block;
+    }
+  }
+  // nothing matched, return a paragraph
+  return createBlock("paragraph", line);
+}
+
+// TODO adapt to new block structure
+function parseTable(markdown: string): string {
+  const tableRegex = /\|(.+)\|\n\|( *[-:]+[-| :]*)+\|\n((\|.*\|\n)+)/gm;
+  let match;
+
+  while ((match = tableRegex.exec(markdown)) !== null) {
+    const rows = match[0].trim().split("\n");
+    const headerCells = rows[0]
+      .split("|")
+      .map((cell) => cell.trim())
+      .slice(1, -1);
+    const numColumns = headerCells.length;
+
+    let html = "<table><thead><tr>";
+    for (const cell of headerCells) {
+      html += `<th>${cell}</th>`;
+    }
+    html += "</tr></thead><tbody>";
+
+    for (let i = 2; i < rows.length; i++) {
+      const cells = rows[i]
+        .split("|")
+        .map((cell) => cell.trim())
+        .slice(1, -1);
+      if (cells.length !== numColumns) {
+        throw new Error(
+          `Row ${i} has ${cells.length} cells, expected ${numColumns}`
+        );
+      }
+      html += "<tr>";
+      for (const cell of cells) {
+        html += `<td>${cell}</td>`;
+      }
+      html += "</tr>";
+    }
+
+    html += "</tbody></table>";
+    markdown = markdown.replace(
+      match[0],
+      "<div class='table-content'>" + html + "</div><br>"
+    );
+  }
+
+  return markdown;
+}
+
+function findCodeFenceClose(lines: string[], start: number) {
+  let linesLength = lines.length;
+
+  for (let i = start; i < linesLength; i++) {
+    if (codeFenceCloseRegex.test(lines[i])) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+function createCodeFence(
+  lines: string[],
+  first: number,
+  last: number
+): HTMLElement {
+  let div = document.createElement("div");
+  div.classList.add("code-fence");
+
+  let code = "";
+  for (let i = first; i < last; i++) {
+    code += lines[i] + "\n";
+  }
+
+  // Render the React element into the div
+  //   ReactDOM.render(<Highlight>{code}</Highlight>, div);
+
+  return div;
+}
+
+function postProcessBlocks(blocks: PartialBlock<BlockSchema>[]): void {
+  let blocksLength = blocks.length;
+  // go through all blocks and nest blocks with lower level into previous blocks
+  for (let i = 1; i < blocksLength; ++i) {
+    let currentBlock = blocks[i];
+    let previousBlock = blocks[i - 1];
+
+    if (
+      [
+        "bulletListItem",
+        "taskListItem",
+        "numberedListItem",
+        "checkListItem",
+        "paragraph",
+      ].includes(currentBlock.type || "") &&
+      [
+        "bulletListItem",
+        "taskListItem",
+        "numberedListItem",
+        "checkListItem",
+        "paragraph",
+      ].includes(previousBlock.type || "")
+    ) {
+      const previousLevel = previousBlock.props?.level || 0;
+      const currentLevel = currentBlock.props?.level || 0;
+      if (previousBlock.children && currentLevel > previousLevel) {
+        previousBlock.children.push(currentBlock);
+        blocks.splice(i, 1);
+        --blocksLength;
+        --i;
+      }
+      postProcessBlocks(previousBlock.children || []);
+    }
+  }
+}
+
+export function parseMarkdown(markdown: string): string {
+  // Count the images beforehand, because in the attachments array (where the images and files are stored), the images come first, then the other files, so we need to keep track of the index
+  imageCount = (markdown.match(imageLinkRegex) || []).length;
+  markdown = parseTable(markdown);
+
+  let lines = markdown.split(/\r?\n/);
+  let linesCount = lines.length;
+  let html = "";
+
+  for (let i = 0; i < linesCount; i++) {
+    let line = lines[i];
+
+    if (codeFenceOpenRegex.test(line)) {
+      let first = i + 1;
+      let last = findCodeFenceClose(lines, first);
+
+      if (last !== -1) {
+        let codeFenceNode = createCodeFence(lines, first, last);
+        html += codeFenceNode.outerHTML;
+        i = last;
+        continue;
+      }
+    }
+
+    // If the line starts with <table>, ignore it
+    if (line.startsWith("<div class='table-content'>")) {
+      html += line;
+      continue;
+    }
+
+    // html += parseMarkdownLine(lines[i]).outerHTML;
+  }
+
+  return html;
+}
+
+export function parseNoteToBlocks(note: string): PartialBlock<BlockSchema>[] {
+  let lines = note.split(/\r?\n/);
+  const linesCount = lines.length;
+  let blocks = [];
+  for (let i = 0; i < linesCount; i++) {
+    blocks.push(parseNoteLine(lines[i]));
+  }
+  postProcessBlocks(blocks);
+  return blocks;
+}

From 14fc9dab0e64d02d0f4d79b7dec8526995920bce Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Fri, 21 Jul 2023 13:15:45 -0500
Subject: [PATCH 20/48] make tags to links

---
 .../core/src/extensions/Blocks/inline/tags.ts | 65 +++++++++----------
 .../extensions/Blocks/nodes/Block.module.css  |  2 +-
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/packages/core/src/extensions/Blocks/inline/tags.ts b/packages/core/src/extensions/Blocks/inline/tags.ts
index 18bd4e600b..159b861a85 100644
--- a/packages/core/src/extensions/Blocks/inline/tags.ts
+++ b/packages/core/src/extensions/Blocks/inline/tags.ts
@@ -1,8 +1,9 @@
-import { InputRule, Mark, markPasteRule } from "@tiptap/core";
+import { Mark } from "@tiptap/core";
 import { Plugin } from "prosemirror-state";
 
 export interface HashtagOptions {
   HTMLAttributes: Record<string, any>;
+  href: string;
 }
 // export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)$/;
 
@@ -16,14 +17,16 @@ export const Hashtag = Mark.create<HashtagOptions>({
   parseHTML() {
     return [
       {
-        tag: "span",
+        tag: "a",
         getAttrs: (element: HTMLElement | string) => {
           if (typeof element === "string") {
             return false;
           }
 
           if (element.getAttribute("data-hashtag") === this.name) {
-            return {};
+            return {
+              href: element.getAttribute("href") || null,
+            };
           }
 
           return false;
@@ -32,12 +35,28 @@ export const Hashtag = Mark.create<HashtagOptions>({
     ];
   },
 
-  renderHTML() {
-    return ["span", { "data-hashtag": this.name }, 0];
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      {
+        ...HTMLAttributes,
+        href: "/?search=" + HTMLAttributes.href,
+        target: "_self",
+        "data-hashtag": this.name,
+      },
+      0,
+    ];
   },
 
   addAttributes() {
     return {
+      href: {
+        default: "test",
+        parseHTML: (element) => element.getAttribute("href"),
+        renderHTML: (attributes) => ({
+          href: attributes.href,
+        }),
+      },
       hashtag: {
         default: false,
         parseHTML: (element) => element.getAttribute("data-hashtag"),
@@ -48,33 +67,6 @@ export const Hashtag = Mark.create<HashtagOptions>({
     };
   },
 
-  //   addInputRules() {
-  //     return [
-  //       new InputRule({
-  //         find: new RegExp(hashtagInputRegex),
-  //         handler: ({ state, match, range }) => {
-  //           const attrs = { hashtag: true };
-  //           const tr = state.tr.insertText(match[0], range.from, range.to);
-  //           state.tr.addMark(range.from, range.to + 1, this.type.create(attrs));
-  //           state.applyTransaction(tr);
-  //         },
-  //       }),
-  //     ];
-  //   },
-
-  //   addPasteRules() {
-  //     return [
-  //       markPasteRule({
-  //         find: hashtagPasteRegex,
-  //         type: this.type,
-  //       }),
-  //       markPasteRule({
-  //         find: mentionPasteRegex,
-  //         type: this.type,
-  //       }),
-  //     ];
-  //   },
-
   addProseMirrorPlugins() {
     // this plugin will clear the hashtag mark when a space is typed
     // and also detect valid mentions and hashtags that become valid due to space insertion
@@ -104,11 +96,16 @@ export const Hashtag = Mark.create<HashtagOptions>({
             // If there is a valid mention or hashtag, add the mark
             const fromHashtag = lineStart + match.index + 1;
             const toHashtag = fromHashtag + match[0].length;
-            const attrs = { hashtag: true };
+            const attrs = { hashtag: true, href: match[0] };
             tr.addMark(fromHashtag, toHashtag, markType.create(attrs));
           }
 
-          return tr;
+          if (tr.docChanged) {
+            // Only return the transaction if the document has changed
+            return tr;
+          } else {
+            return newState.tr;
+          }
         },
       }),
     ];
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 7efda543f4..4b221054ba 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -549,7 +549,7 @@ code {
 }
 
 /* HASHTAG */
-span[data-hashtag] {
+a[data-hashtag] {
   color: var(--orange-noteplan);
   cursor: pointer;
   padding: 2px 5px; /* adjust as needed */

From 1f594d5f23db661cce10b344d3359b42202382be Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Fri, 21 Jul 2023 18:21:22 -0500
Subject: [PATCH 21/48] Refactor hashtag class so we have a general
 inlineparser that works similar to NotePlan native and runs a regexp on the
 current line every time it was changed, might be we need to tweak the
 performance later, but so far it seems fast enough

---
 packages/core/src/BlockNoteExtensions.ts      |   4 +-
 .../api/nodeConversions/nodeConversions.ts    |   1 +
 .../Blocks/api/inlineContentTypes.ts          |   1 +
 .../src/extensions/Blocks/inline/hashtags.ts  |  76 ++++++++
 .../extensions/Blocks/inline/inlineParser.ts  | 170 ++++++++++++++++++
 .../core/src/extensions/Blocks/inline/tags.ts | 113 ------------
 .../src/extensions/Blocks/inline/wikiLinks.ts |  76 ++++++++
 .../extensions/Blocks/nodes/Block.module.css  |   8 +
 8 files changed, 335 insertions(+), 114 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/inline/hashtags.ts
 create mode 100644 packages/core/src/extensions/Blocks/inline/inlineParser.ts
 delete mode 100644 packages/core/src/extensions/Blocks/inline/tags.ts
 create mode 100644 packages/core/src/extensions/Blocks/inline/wikiLinks.ts

diff --git a/packages/core/src/BlockNoteExtensions.ts b/packages/core/src/BlockNoteExtensions.ts
index 9140bce455..57116efcc6 100644
--- a/packages/core/src/BlockNoteExtensions.ts
+++ b/packages/core/src/BlockNoteExtensions.ts
@@ -4,7 +4,8 @@ import { BlockNoteEditor } from "./BlockNoteEditor";
 
 import { Bold } from "@tiptap/extension-bold";
 import { Code } from "@tiptap/extension-code";
-import { Hashtag } from "./extensions/Blocks/inline/tags";
+import { Hashtag } from "./extensions/Blocks/inline/hashtags";
+import { WikiLink } from "./extensions/Blocks/inline/wikiLinks";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { Dropcursor } from "@tiptap/extension-dropcursor";
@@ -101,6 +102,7 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     Strike,
     Underline,
     Hashtag,
+    WikiLink,
     TextColorMark,
     TextColorExtension,
     BackgroundColorMark,
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index 09aab9559d..775099f26d 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -27,6 +27,7 @@ const toggleStyles = new Set<ToggledStyle>([
   "strike",
   "code",
   "hashtag",
+  "wikilink",
 ]);
 const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
 
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index 1895c2df6b..d85834c33c 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -7,6 +7,7 @@ export type Styles = {
   textColor?: string;
   backgroundColor?: string;
   hashtag?: true;
+  wikilink?: true;
 };
 
 export type ToggledStyle = {
diff --git a/packages/core/src/extensions/Blocks/inline/hashtags.ts b/packages/core/src/extensions/Blocks/inline/hashtags.ts
new file mode 100644
index 0000000000..ad721536fc
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/hashtags.ts
@@ -0,0 +1,76 @@
+import { Mark } from "@tiptap/core";
+import { InlineParser } from "./inlineParser";
+
+export interface HashtagOptions {
+  HTMLAttributes: Record<string, any>;
+  href: string;
+}
+
+export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)/g;
+
+export const Hashtag = Mark.create<HashtagOptions>({
+  name: "hashtag",
+
+  parseHTML() {
+    return [
+      {
+        tag: "a",
+        getAttrs: (element: HTMLElement | string) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-hashtag") === this.name) {
+            return {
+              href: element.getAttribute("href") || null,
+            };
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      {
+        ...HTMLAttributes,
+        href: "/?search=" + HTMLAttributes.href,
+        target: "_self",
+        "data-hashtag": this.name,
+      },
+      0,
+    ];
+  },
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("href"),
+        renderHTML: (attributes) => ({
+          href: attributes.href,
+        }),
+      },
+      hashtag: {
+        default: false,
+        parseHTML: (element) => element.getAttribute("data-hashtag"),
+        renderHTML: () => ({
+          "data-hashtag": true,
+        }),
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new InlineParser({
+        markType: this.type,
+        regex: hashtagInputRegex,
+        matchIndex: 0,
+      }).plugin,
+    ];
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/inline/inlineParser.ts b/packages/core/src/extensions/Blocks/inline/inlineParser.ts
new file mode 100644
index 0000000000..317149d7fe
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/inlineParser.ts
@@ -0,0 +1,170 @@
+import { EditorState, Plugin } from "prosemirror-state";
+import { MarkType } from "@tiptap/pm/model";
+import { Node } from "prosemirror-model";
+
+// Define the mark options which include the MarkType and regex to be used for parsing the content.
+interface MarkOptions {
+  markType: MarkType;
+  regex: RegExp;
+  matchIndex: number;
+}
+
+// Class to manage the key of a Mark.
+class MarkKey {
+  constructor(public from: number, public to: number, public href: string) {}
+
+  // Convert the MarkKey instance into a string representation.
+  toString() {
+    return JSON.stringify(this);
+  }
+}
+
+// Main class for the inline parser.
+export class InlineParser {
+  private markType: MarkType;
+  private regex: RegExp;
+  private matchIndex: number;
+
+  constructor({ markType, regex, matchIndex = 0 }: MarkOptions) {
+    this.markType = markType;
+    this.regex = regex;
+    this.matchIndex = matchIndex;
+  }
+
+  // Extract the existing marks within the given range.
+  private extractExistingMarks(
+    state: EditorState,
+    lineStart: number,
+    lineEnd: number
+  ): Map<string, MarkKey> {
+    let existingMarks = new Map<string, MarkKey>();
+
+    // Traverse the nodes within the line.
+    state.doc.nodesBetween(lineStart, lineEnd, (node: Node, pos: number) => {
+      // If the node has the markType, create a MarkKey and add it to the map.
+      node.marks.forEach((mark) => {
+        if (mark.type === this.markType) {
+          const key = new MarkKey(pos, pos + node.nodeSize, mark.attrs.href);
+          existingMarks.set(key.toString(), key);
+        }
+      });
+    });
+
+    return existingMarks;
+  }
+
+  // Extract the new marks from the content using regex.
+  private extractNewMarks(
+    state: EditorState,
+    lineStart: number,
+    lineEnd: number
+  ): Map<string, MarkKey> {
+    const lineText = state.doc.textBetween(lineStart, lineEnd, "\n");
+    let newMarks = new Map<string, MarkKey>();
+
+    // Use the regex to find the new marks.
+    let match;
+    while ((match = this.regex.exec(lineText)) !== null) {
+      // Calculate prefix length (full match length minus group length)
+      const prefixLength = match[0].length - match[this.matchIndex].length;
+
+      // Adjust `from` and `to` to only cover the group
+      const from = lineStart + match.index + 1 + prefixLength / 2; // Adjusted for prefix
+      const to = from + match[this.matchIndex].length; // match[1] is the content of the first group
+      const attrs = {
+        [this.markType.name]: true,
+        href: match[this.matchIndex],
+      };
+      const key = new MarkKey(from, to, attrs.href);
+      newMarks.set(key.toString(), key);
+    }
+
+    return newMarks;
+  }
+
+  // Generate a ProseMirror Plugin for handling the marks.
+  get plugin() {
+    // Helper function to ensure lineStart and lineEnd are within bounds of document
+    const validateBounds = (
+      lineStart: number,
+      lineEnd: number,
+      docSize: number
+    ) => {
+      return !(lineStart >= docSize || lineEnd > docSize);
+    };
+
+    // Helper function to handle mark changes
+    const handleMarkChanges = (
+      tr: any,
+      existingMarks: Map<string, MarkKey>,
+      newMarks: Map<string, MarkKey>
+    ) => {
+      // Remove marks that no longer exist
+      for (let [key, markKey] of existingMarks) {
+        if (!newMarks.has(key)) {
+          tr = tr.removeMark(markKey.from, markKey.to, this.markType);
+        }
+      }
+
+      // Add new marks
+      for (let [key, markKey] of newMarks) {
+        if (!existingMarks.has(key)) {
+          tr = tr.addMark(
+            markKey.from,
+            markKey.to,
+            this.markType.create({
+              [this.markType.name]: true,
+              href: markKey.href,
+            })
+          );
+        }
+      }
+      return tr;
+    };
+
+    return new Plugin({
+      props: {},
+      appendTransaction: (_transactions, oldState, newState) => {
+        // Start and end of line positions
+        const lineStart = newState.doc
+          .resolve(newState.selection.$from.pos)
+          .start(-1);
+        const lineEnd = newState.doc
+          .resolve(newState.selection.$from.pos)
+          .end(-1);
+
+        // If lineStart and lineEnd are not within the bounds of the oldState document, return early
+        if (!validateBounds(lineStart, lineEnd, oldState.doc.content.size)) {
+          return null;
+        }
+
+        // Get the old and new line text
+        const oldLineText = oldState.doc.textBetween(lineStart, lineEnd, "\n");
+        const newLineText = newState.doc.textBetween(lineStart, lineEnd, "\n");
+
+        // If the line text has not changed, return early
+        if (oldLineText === newLineText) {
+          return null;
+        }
+
+        // Get the existing and new marks.
+        let existingMarks = this.extractExistingMarks(
+          newState,
+          lineStart,
+          lineEnd
+        );
+        let newMarks = this.extractNewMarks(newState, lineStart, lineEnd);
+
+        // Handle mark changes
+        let tr = handleMarkChanges(newState.tr, existingMarks, newMarks);
+
+        // Only return the transaction if the document has changed to avoid an infinite loop
+        if (tr.docChanged) {
+          return tr;
+        } else {
+          return null;
+        }
+      },
+    });
+  }
+}
diff --git a/packages/core/src/extensions/Blocks/inline/tags.ts b/packages/core/src/extensions/Blocks/inline/tags.ts
deleted file mode 100644
index 159b861a85..0000000000
--- a/packages/core/src/extensions/Blocks/inline/tags.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { Mark } from "@tiptap/core";
-import { Plugin } from "prosemirror-state";
-
-export interface HashtagOptions {
-  HTMLAttributes: Record<string, any>;
-  href: string;
-}
-// export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)$/;
-
-export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)/g;
-export const hashtagPasteRegex = /(?:^|\s)(#[\w-_/]+)/g;
-export const mentionPasteRegex = /(?:^|\s)(@[\w-_/]+)/g;
-
-export const Hashtag = Mark.create<HashtagOptions>({
-  name: "hashtag",
-
-  parseHTML() {
-    return [
-      {
-        tag: "a",
-        getAttrs: (element: HTMLElement | string) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          if (element.getAttribute("data-hashtag") === this.name) {
-            return {
-              href: element.getAttribute("href") || null,
-            };
-          }
-
-          return false;
-        },
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "a",
-      {
-        ...HTMLAttributes,
-        href: "/?search=" + HTMLAttributes.href,
-        target: "_self",
-        "data-hashtag": this.name,
-      },
-      0,
-    ];
-  },
-
-  addAttributes() {
-    return {
-      href: {
-        default: "test",
-        parseHTML: (element) => element.getAttribute("href"),
-        renderHTML: (attributes) => ({
-          href: attributes.href,
-        }),
-      },
-      hashtag: {
-        default: false,
-        parseHTML: (element) => element.getAttribute("data-hashtag"),
-        renderHTML: () => ({
-          "data-hashtag": true,
-        }),
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    // this plugin will clear the hashtag mark when a space is typed
-    // and also detect valid mentions and hashtags that become valid due to space insertion
-    return [
-      new Plugin({
-        props: {},
-        appendTransaction: (_transactions, _oldState, newState) => {
-          const state = newState;
-          const markType = this.type;
-          const { tr } = state;
-
-          // Start of line position
-          const lineStart = state.doc
-            .resolve(state.selection.$from.pos)
-            .start(-1);
-          // End of line position
-          const lineEnd = state.doc.resolve(state.selection.$from.pos).end(-1);
-
-          // Remove all hashtag marks in the line
-          tr.removeMark(lineStart, lineEnd, markType);
-
-          // Scan the whole line for valid mentions or hashtags
-          const lineText = state.doc.textBetween(lineStart, lineEnd, "\n");
-
-          let match;
-          while ((match = hashtagInputRegex.exec(lineText)) !== null) {
-            // If there is a valid mention or hashtag, add the mark
-            const fromHashtag = lineStart + match.index + 1;
-            const toHashtag = fromHashtag + match[0].length;
-            const attrs = { hashtag: true, href: match[0] };
-            tr.addMark(fromHashtag, toHashtag, markType.create(attrs));
-          }
-
-          if (tr.docChanged) {
-            // Only return the transaction if the document has changed
-            return tr;
-          } else {
-            return newState.tr;
-          }
-        },
-      }),
-    ];
-  },
-});
diff --git a/packages/core/src/extensions/Blocks/inline/wikiLinks.ts b/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
new file mode 100644
index 0000000000..1078688ce0
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
@@ -0,0 +1,76 @@
+import { Mark } from "@tiptap/core";
+import { InlineParser } from "./inlineParser";
+
+export interface WikiLinkOptions {
+  HTMLAttributes: Record<string, any>;
+  href: string;
+}
+
+export const wikiLinkRegex = /\[{2}(.*?)\]{2}/g;
+
+export const WikiLink = Mark.create<WikiLinkOptions>({
+  name: "wikilink",
+
+  parseHTML() {
+    return [
+      {
+        tag: "a",
+        getAttrs: (element: HTMLElement | string) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-wikilink") === this.name) {
+            return {
+              href: element.getAttribute("href") || null,
+            };
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "a",
+      {
+        ...HTMLAttributes,
+        href: "/?search=" + HTMLAttributes.href,
+        target: "_self",
+        "data-wikilink": true,
+      },
+      0,
+    ];
+  },
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("href"),
+        renderHTML: (attributes) => ({
+          href: attributes.href,
+        }),
+      },
+      wikilink: {
+        default: false,
+        parseHTML: (element) => element.getAttribute("data-wikilink"),
+        renderHTML: () => ({
+          "data-wikilink": true,
+        }),
+      },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new InlineParser({
+        markType: this.type,
+        regex: wikiLinkRegex,
+        matchIndex: 1,
+      }).plugin,
+    ];
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 4b221054ba..1f765c3d1e 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -557,3 +557,11 @@ a[data-hashtag] {
   background-color: #d8700120; /* replace with your desired background color */
   text-decoration: none; /* optional: removes underline if your hashtags are also links */
 }
+
+/* HASHTAG */
+a[data-wikilink] {
+  color: var(--orange-noteplan);
+  cursor: pointer;
+
+  text-decoration: none; /* optional: removes underline if your hashtags are also links */
+}

From 005e427ce4c691ec02ee42665eebbffa9e387a8f Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Sun, 23 Jul 2023 16:33:30 +0900
Subject: [PATCH 22/48] Add blocks to NotePlan syntax conversion

- add api methods editor
- fix file and image links
- add post processing for numbering list items
- add diff view to check conversions
---
 examples/editor/package.json                  |   2 +
 examples/editor/src/App.tsx                   |  42 +++--
 package-lock.json                             |  14 +-
 packages/core/src/BlockNoteEditor.ts          |  24 +++
 .../formatConversions/notePlanConversions.ts  | 143 +++++++++++++++++-
 5 files changed, 208 insertions(+), 17 deletions(-)

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 613ecb4009..6799b9f26b 100644
--- a/examples/editor/src/App.tsx
+++ b/examples/editor/src/App.tsx
@@ -2,7 +2,11 @@
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import styles from "./App.module.css";
-import { parseNoteToBlocks } from "../../../packages/core/src/api/formatConversions/notePlanConversions";
+import {
+  parseNoteToBlocks,
+  serializeBlocksToNote,
+} from "../../../packages/core/src/api/formatConversions/notePlanConversions";
+import { diffChars } from "diff";
 
 import { useEffect, useState } from "react";
 import { BlockNoteEditor, BlockSchema, PartialBlock } from "@blocknote/core";
@@ -14,18 +18,28 @@ function App() {
   const [input, setInput] = useState<string>("");
   const [markdown, setMarkdown] = useState<string>("");
   const [json, setJSON] = useState<string>("");
+  const [equals, setEquals] = useState<boolean>(false);
+  const [diff, setDiff] = useState<string>("");
 
   const editor: BlockNoteEditor | null = useBlockNote({
     onEditorContentChange: (editor: BlockNoteEditor) => {
-      const saveBlocksAsMarkdown = async () => {
-        const markdown: string = await editor.blocksToMarkdown(
-          editor.topLevelBlocks
-        );
-        setMarkdown(markdown);
-        const json: string = JSON.stringify(editor.topLevelBlocks, null, 2);
-        setJSON(json);
-      };
-      saveBlocksAsMarkdown();
+      const note = serializeBlocksToNote(editor.topLevelBlocks);
+      setMarkdown(note);
+      const json: string = JSON.stringify(editor.topLevelBlocks, null, 2);
+      setJSON(json);
+      if (input === note) {
+        setEquals(true);
+      } else {
+        // calculate diff
+        const diffResult = diffChars(input, note);
+        let diffString = "";
+        diffResult.forEach((part) => {
+          const color = part.added ? "blue" : part.removed ? "red" : "grey";
+          diffString += `<span style="color:${color}">${part.value}</span>`;
+        });
+        console.log(diffString);
+        setDiff(diffString);
+      }
     },
     editorDOMAttributes: {
       class: styles.editor,
@@ -61,9 +75,15 @@ function App() {
       />
       <h3>Editor</h3>
       <BlockNoteView editor={editor} />
+      {diff && (
+        <div>
+          <h3>Diff</h3>
+          <pre dangerouslySetInnerHTML={{ __html: diff }} />
+        </div>
+      )}
       <h3>Output</h3>
-      <pre>{json}</pre>
       <pre>{markdown}</pre>
+      <pre>{json}</pre>
     </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index edb2db1c92..cd9b26eddc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,9 +28,11 @@
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
+        "@types/diff": "^5.0.0",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.9",
         "@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",
@@ -6358,6 +6360,12 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/diff": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/diff/-/diff-5.0.3.tgz",
+      "integrity": "sha512-amrLbRqTU9bXMCc6uX0sWpxsQzRIo9z6MJPkH1pkez/qOxuqSZVuryJAWoBRq94CeG8JxY+VK4Le9HtjQR5T9A==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "8.40.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.0.tgz",
@@ -20022,9 +20030,9 @@
       }
     },
     "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz",
+      "integrity": "sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts
index 87fe240136..39c9a51958 100644
--- a/packages/core/src/BlockNoteEditor.ts
+++ b/packages/core/src/BlockNoteEditor.ts
@@ -23,7 +23,9 @@ import {
   Block,
   BlockIdentifier,
   BlockSchema,
+  BlockSpec,
   PartialBlock,
+  PropSchema,
 } from "./extensions/Blocks/api/blockTypes";
 import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import {
@@ -41,6 +43,10 @@ import {
   BaseSlashMenuItem,
   defaultSlashMenuItems,
 } from "./extensions/SlashMenu";
+import {
+  parseNoteToBlocks,
+  serializeBlocksToNote,
+} from "./api/formatConversions/notePlanConversions";
 
 export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
   // TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
@@ -722,6 +728,15 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     return blocksToMarkdown(blocks, this._tiptapEditor.schema);
   }
 
+  /**
+   * Serializes blocks into a NotePlan string.
+   * @param blocks An array of blocks that should be serialized into a NotePlan string.
+   * @returns The blocks, serialized as a NotePlan string.
+   */
+  public blocksToNotePlan(blocks: Block<BlockSchema>[]): string {
+    return serializeBlocksToNote(blocks);
+  }
+
   /**
    * Creates a list of blocks from a Markdown string. Tries to create `Block` and `InlineNode` objects based on
    * Markdown syntax, though not all symbols are recognized. If BlockNote doesn't recognize a symbol, it will parse it
@@ -733,6 +748,15 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     return markdownToBlocks(markdown, this.schema, this._tiptapEditor.schema);
   }
 
+  /**
+   * Creates a list of blocks from a NotePlan string.
+   * @param notePlan The NotePlan string to parse blocks from.
+   * @returns The blocks parsed from the NotePlan string.
+   */
+  public notePlanToBlocks(notePlan: string): PartialBlock<BlockSchema>[] {
+    return parseNoteToBlocks(notePlan);
+  }
+
   /**
    * Updates the user info for the current user that's shown to other collaborators.
    */
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index 3b34ff283f..2a17bbfb49 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -1,10 +1,14 @@
 import {
+  Block,
   PartialBlock,
   BlockSchema,
   PropSchema,
   Props,
 } from "../../extensions/Blocks/api/blockTypes";
-import { PartialInlineContent } from "../../extensions/Blocks/api/inlineContentTypes";
+import {
+  InlineContent,
+  PartialInlineContent,
+} from "../../extensions/Blocks/api/inlineContentTypes";
 import { DefaultBlockSchema } from "../..";
 import Tokenizr from "tokenizr";
 
@@ -275,7 +279,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
         inlineContent.push({
           type: "link",
           href: token.value,
-          content: token.value,
+          content: "file",
         });
         downloadFile(token.value, false);
         break;
@@ -283,7 +287,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
         inlineContent.push({
           type: "link",
           href: token.value,
-          content: token.value,
+          content: "image",
         });
         downloadFile(token.value, true);
         break;
@@ -745,3 +749,136 @@ export function parseNoteToBlocks(note: string): PartialBlock<BlockSchema>[] {
   postProcessBlocks(blocks);
   return blocks;
 }
+
+function serializeTaskStates(prop: Props<PropSchema>): string {
+  if (prop.checked === "true") {
+    return "[x]";
+  } else if (prop.canceled === "true") {
+    return "[-]";
+  } else if (prop.scheduled === "true") {
+    return "[>]";
+  } else {
+    return "[ ]";
+  }
+}
+
+function serializeBlockContent(content: InlineContent[]): string {
+  let text = "";
+  let contentLength = content.length;
+  for (let i = 0; i < contentLength; ++i) {
+    let contentItem = content[i];
+    switch (contentItem.type) {
+      case "text":
+        // serialize styles
+        if (contentItem.styles.bold) {
+          text += "**" + contentItem.text + "**";
+        } else if (contentItem.styles.italic) {
+          text += "*" + contentItem.text + "*";
+        } else if (contentItem.styles.strike) {
+          text += "~~" + contentItem.text + "~~";
+        } else if (contentItem.styles.backgroundColor === "highlight-color") {
+          text += "::" + contentItem.text + "::";
+        } else if (contentItem.styles.code) {
+          text += "`" + contentItem.text + "`";
+        } else {
+          text += contentItem.text;
+        }
+        break;
+      case "link":
+        const linkContent = serializeBlockContent(contentItem.content);
+        switch (linkContent) {
+          case "file":
+          case "image":
+            text += "![" + linkContent + "](" + contentItem.href + ")";
+            break;
+          default:
+            text += "[" + linkContent + "](" + contentItem.href + ")";
+            break;
+        }
+        break;
+    }
+  }
+  return text;
+}
+
+export function serializeBlock(
+  block: Block<BlockSchema>,
+  depth: number
+): string {
+  let text = "  ".repeat(depth);
+  // serialize block types
+  switch (block.type) {
+    case "heading":
+      text += "#".repeat(parseInt(block.props?.level || "1")) + " ";
+      break;
+    case "quoteListItem":
+      text += "> ";
+      break;
+    case "bulletListItem":
+      text += "- ";
+      break;
+    case "numberedListItem":
+      text += "1. ";
+      break;
+    case "taskListItem":
+      text += "* " + serializeTaskStates(block.props || {}) + " ";
+      break;
+    case "checkListItem":
+      text += "+ " + serializeTaskStates(block.props || {}) + " ";
+      break;
+    case "paragraph":
+      break;
+  }
+
+  // serialize content array with InlineContent
+  text += serializeBlockContent(block.content);
+
+  // end block with newline
+  text += "\n";
+  let children = block.children || [];
+  let childrenLength = children.length;
+
+  for (let i = 0; i < childrenLength; ++i) {
+    text += serializeBlock(children[i], depth + 1);
+  }
+
+  return text;
+}
+
+function postProcessNote(note: string): string {
+  // adjust numbering of numbered list items according to their level
+  let lines = note.split(/\r?\n/);
+  let linesLength = lines.length;
+  let currentNumber = 0;
+  let previousLevel = 0;
+  for (let i = 0; i < linesLength; ++i) {
+    let line = lines[i];
+    let matches = /^(\s*?)(\d+)\.\s+(.*)/.exec(line);
+    console.log(matches);
+    if (matches != null) {
+      let leadingWhitespace = matches[1].length;
+      let level = 0;
+      if (leadingWhitespace > 1) {
+        level = Math.floor(leadingWhitespace / 2);
+      }
+      if (level === previousLevel) {
+        currentNumber++;
+      } else {
+        currentNumber = 1;
+      }
+      lines[i] = matches[1] + currentNumber.toString() + ". " + matches[3];
+      previousLevel = level;
+    }
+  }
+  return lines.join("\n");
+}
+
+export function serializeBlocksToNote(blocks: Block<BlockSchema>[]): string {
+  let text = "";
+  let blocksLength = blocks.length;
+  for (let i = 0; i < blocksLength; ++i) {
+    text += serializeBlock(blocks[i], 0);
+  }
+  // post process text
+  return postProcessNote(text);
+}

From 6e6775e6276455042f5ba90bca9220996d1f8d40 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:50:20 +0900
Subject: [PATCH 23/48] Fix typescript warnings and remove console.log()

---
 examples/editor/src/App.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx
index 6799b9f26b..adb771f18e 100644
--- a/examples/editor/src/App.tsx
+++ b/examples/editor/src/App.tsx
@@ -9,7 +9,11 @@ import {
 import { diffChars } from "diff";
 
 import { useEffect, useState } from "react";
-import { BlockNoteEditor, BlockSchema, PartialBlock } from "@blocknote/core";
+import {
+  BlockNoteEditor,
+  DefaultBlockSchema,
+  PartialBlock,
+} from "@blocknote/core";
 
 type WindowWithProseMirror = Window &
   typeof globalThis & { ProseMirror: any; editor?: any };
@@ -18,7 +22,6 @@ function App() {
   const [input, setInput] = useState<string>("");
   const [markdown, setMarkdown] = useState<string>("");
   const [json, setJSON] = useState<string>("");
-  const [equals, setEquals] = useState<boolean>(false);
   const [diff, setDiff] = useState<string>("");
 
   const editor: BlockNoteEditor | null = useBlockNote({
@@ -27,9 +30,7 @@ function App() {
       setMarkdown(note);
       const json: string = JSON.stringify(editor.topLevelBlocks, null, 2);
       setJSON(json);
-      if (input === note) {
-        setEquals(true);
-      } else {
+      if (input !== note) {
         // calculate diff
         const diffResult = diffChars(input, note);
         let diffString = "";
@@ -37,7 +38,6 @@ function App() {
           const color = part.added ? "blue" : part.removed ? "red" : "grey";
           diffString += `<span style="color:${color}">${part.value}</span>`;
         });
-        console.log(diffString);
         setDiff(diffString);
       }
     },
@@ -53,8 +53,8 @@ function App() {
       // 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<BlockSchema>[] = parseNoteToBlocks(input);
-        console.log(blocks);
+        const blocks: PartialBlock<DefaultBlockSchema>[] =
+          parseNoteToBlocks(input);
         editor.replaceBlocks(editor.topLevelBlocks, blocks);
       };
       getBlocks();

From 896ec52d65e64361eefe83834febc292411e5a57 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:52:42 +0900
Subject: [PATCH 24/48] Fix typescript warnings and remove unused code

---
 .../formatConversions/notePlanConversions.ts  | 452 +++++++-----------
 1 file changed, 160 insertions(+), 292 deletions(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index 2a17bbfb49..2fa82d4e02 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -1,7 +1,6 @@
 import {
   Block,
   PartialBlock,
-  BlockSchema,
   PropSchema,
   Props,
 } from "../../extensions/Blocks/api/blockTypes";
@@ -12,16 +11,7 @@ import {
 import { DefaultBlockSchema } from "../..";
 import Tokenizr from "tokenizr";
 
-var attachmentCount = 0;
-var imageCount = 0;
-var attachments = [];
-const imageExtension = ["png", "jpeg", "jpg", "bmp", "tiff", "ico", "svg"];
-
-const codeFenceOpenRegex = /^```/;
-const codeFenceCloseRegex = /^```\s*$/;
-const separatorRegex =
-  /(?:^|\v)([\-\_]{3,}|\*\*\* |(\-(\h|$)){3,}|\*{5,})(?:$|\v)/;
-
+// fallback polyfill for window.matchMedia
 window.matchMedia =
   window.matchMedia ||
   function () {
@@ -34,98 +24,14 @@ window.matchMedia =
     };
   };
 
-function downloadFile(url: string, isImage: boolean): string | null {
-  // If we find an attachment, be in an image or file, we donwload it from CloudKit, then display it. That's the only way.
-  // It would be better if we can simply link file attachments, but we get an odd downloadURL from Apple, which downloads the
-  // file when clicking on it with a weird filename.
-  // TODO create image and file block: https://www.blocknotejs.org/docs/block-types#custom-block-types
-  let currentAttachmentCount = isImage ? imageCount : attachmentCount;
-  // Get the downloadURL from the asset object from CloudKit
-  if (!attachments || !attachments[currentAttachmentCount]) {
-    return null;
-  }
-
-  // Extract the extension (so we can check if its an image) and the filename.
-  let split = url.split(".");
-  let ext = split[split.length - 1];
-
-  split = url.split("/");
-  let filename = split[split.length - 1];
-
-  if (ext) {
-    isImage = imageExtension.includes(ext);
-  }
-
-  let downloadUrl = attachments[currentAttachmentCount].downloadURL;
-
-  fetch(downloadUrl)
-    .then((response) => {
-      return response.blob();
-    })
-    .then((blob) => {
-      // Create an URL to the blob, which can be opened by the browser (PDF) or displayed (image)
-      const url = window.URL.createObjectURL(
-        new Blob([blob], { type: "application/" + ext })
-      );
-
-      // Find the placeholder which we are showing before the file is downloaded.
-      const item = document.getElementById(
-        "attachment-" + currentAttachmentCount
-      );
-
-      // Either set the image source or link up the attachment.
-      if (isImage) {
-        item.src = url;
-      } else {
-        item.href = url;
-        item.className = "note-attachment"; // Indicate the attachment is clickable now
-        if (ext !== "pdf") {
-          // If it's a PDF we can open it directly, no need to download
-          item.download = filename;
-        }
-      }
-
-      // Hide the loading indicator
-      document
-        .getElementById("attachment-loading-" + currentAttachmentCount)
-        ?.remove();
-    });
-
-  // Create the placeholder html object while we load the attachments
-  let placeholderId = "attachment-" + currentAttachmentCount;
-  let placeholderLoadingId = "attachment-loading-" + currentAttachmentCount;
-  let replace = isImage
-    ? "<div><div id='" +
-      placeholderLoadingId +
-      "' class='inline-loader'></div><img class='note-image' id='" +
-      placeholderId +
-      "'/></div>"
-    : "<div class='attachment-container'><div id='" +
-      placeholderLoadingId +
-      "' class='inline-loader'></div><a target='_blank' class='note-attachment-disabled' id='" +
-      placeholderId +
-      "'><i class='far fa-paperclip'></i><span class='attachment-name'>" +
-      filename +
-      "</span></a></div>";
-
-  // Attachment counter to walk through the assets array
-  if (isImage) {
-    imageCount += 1;
-  } else {
-    attachmentCount += 1;
-  }
-
-  return replace;
-}
-
 type BlockType = keyof DefaultBlockSchema;
 
 function createBlock(
   type: BlockType,
   innerText: string,
   props?: Props<PropSchema>
-): PartialBlock<BlockSchema> {
-  let block: PartialBlock<BlockSchema> = {
+): PartialBlock<DefaultBlockSchema> {
+  let block: PartialBlock<DefaultBlockSchema> = {
     type: type,
     content: [],
     children: [],
@@ -141,17 +47,17 @@ function createBlock(
 }
 
 function createInlineContent(text: string): PartialInlineContent[] {
-  const fileLinkRegex = /\!\[(file)\]$([^\($]+)\)/;
-  const imageLinkRegex = /\!\[(image)\]$([^\($]+)\)/;
-  const namedLinkRegex = /\[([^\[\]]*)\]$([^\($]+)\)/;
+  const fileLinkRegex = /!\[(file)\]$([^()]+)$/;
+  const imageLinkRegex = /!\[(image)\]$([^()]+)$/;
+  const namedLinkRegex = /\[([^[\]]*)\]$([^()]+)$/;
   const linkRegex =
-    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&\/\/=]*)/;
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
   const doneDateRegex =
     /@done$(([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]))( ((0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]( ?[aApP][mM])?))?$/;
   const hashTagRegex =
-    /(?!#[\d!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~]+(\s|$))(#([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+?\$.*?\$|#([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+)/;
+    /(?!#[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(#([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|#([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
   const atRegex =
-    /(?!@[\d!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+?\$.*?\$|@([^!"#$%&'()*+,\-.\/:;<=>?@[\]^_`{|}~\s]|[\-_\/])+)/;
+    /(?!@[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
 
   let lexer = new Tokenizr();
   // file link
@@ -167,19 +73,19 @@ function createInlineContent(text: string): PartialInlineContent[] {
     ctx.accept("named-link", { name: match[1], link: match[2] });
   });
   // link
-  lexer.rule(linkRegex, (ctx, match) => {
+  lexer.rule(linkRegex, (ctx, _match) => {
     ctx.accept("link");
   });
   // done date
-  lexer.rule(doneDateRegex, (ctx, match) => {
+  lexer.rule(doneDateRegex, (ctx, _match) => {
     ctx.accept("done-date");
   });
   // hash tag
-  lexer.rule(hashTagRegex, (ctx, match) => {
+  lexer.rule(hashTagRegex, (ctx, _match) => {
     ctx.accept("hash-tag");
   });
   // at tag
-  lexer.rule(atRegex, (ctx, match) => {
+  lexer.rule(atRegex, (ctx, _match) => {
     ctx.accept("at-tag");
   });
   // code
@@ -212,7 +118,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
   });
   // plain text
   let plaintext = "";
-  lexer.before((ctx, match, rule) => {
+  lexer.before((ctx, _match, rule) => {
     if (rule.name !== "text" && plaintext !== "") {
       ctx.accept("text", plaintext);
       plaintext = "";
@@ -281,7 +187,6 @@ function createInlineContent(text: string): PartialInlineContent[] {
           href: token.value,
           content: "file",
         });
-        downloadFile(token.value, false);
         break;
       case "image-link":
         inlineContent.push({
@@ -289,7 +194,6 @@ function createInlineContent(text: string): PartialInlineContent[] {
           href: token.value,
           content: "image",
         });
-        downloadFile(token.value, true);
         break;
       case "link":
         inlineContent.push({
@@ -336,7 +240,7 @@ function parseHeader(
   line: string,
   regex: RegExp,
   level: number
-): PartialBlock<BlockSchema> | null {
+): PartialBlock<DefaultBlockSchema> | null {
   let matches = regex.exec(line);
 
   if (matches == null) {
@@ -347,7 +251,9 @@ function parseHeader(
   // let header = createElement(type, substring);
   // header.id = generateHeaderID(substring);
   // TODO use as BlockIdentifier?
-  let header = createBlock("heading", substring, { level: level.toString() });
+  let header = createBlock("heading" as BlockType, substring, {
+    level: level.toString(),
+  });
 
   return header;
 }
@@ -356,7 +262,7 @@ function parseIndentedBlock(
   line: string,
   regex: RegExp,
   type: BlockType
-): PartialBlock<BlockSchema> | null {
+): PartialBlock<DefaultBlockSchema> | null {
   let matches = regex.exec(line);
 
   if (matches == null) {
@@ -376,9 +282,9 @@ function parseIndentedBlock(
   return block;
 }
 
-function parseParagraph(line: string): PartialBlock<BlockSchema> {
+function parseParagraph(line: string): PartialBlock<DefaultBlockSchema> {
   if (line.length === 0) {
-    return createBlock("paragraph", "");
+    return createBlock("paragraph" as BlockType, "");
   }
 
   let matches = /^(\s*)\S*/.exec(line);
@@ -387,33 +293,37 @@ function parseParagraph(line: string): PartialBlock<BlockSchema> {
     let leadingWhitespace = matches[1].length;
     if (leadingWhitespace > 1) {
       let level = Math.floor(leadingWhitespace / 2);
-      return createBlock("paragraph", line.substring(leadingWhitespace), {
-        level: level.toString(),
-      });
+      return createBlock(
+        "paragraph" as BlockType,
+        line.substring(leadingWhitespace),
+        {
+          level: level.toString(),
+        }
+      );
     }
   }
 
-  return createBlock("paragraph", line);
+  return createBlock("paragraph" as BlockType, line);
 }
 
-function parseHeader1(line: string): PartialBlock<BlockSchema> | null {
+function parseHeader1(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseHeader(line, /^#\s+/, 1);
 }
 
-function parseHeader2(line: string): PartialBlock<BlockSchema> | null {
+function parseHeader2(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseHeader(line, /^##\s+/, 2);
 }
 
-function parseHeader3(line: string): PartialBlock<BlockSchema> | null {
+function parseHeader3(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseHeader(line, /^###\s+/, 3);
 }
 
-function parseHeader4(line: string): PartialBlock<BlockSchema> | null {
+function parseHeader4(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseHeader(line, /^#+\s+/, 4);
 }
 
-function parseQuote(line: string): PartialBlock<BlockSchema> | null {
-  return parseIndentedBlock(line, /^(\s*?)>\s+/, "quoteListItem");
+function parseQuote(line: string): PartialBlock<DefaultBlockSchema> | null {
+  return parseIndentedBlock(line, /^(\s*?)>\s+/, "quoteListItem" as BlockType);
 }
 
 function parseListWithIcon(
@@ -421,7 +331,7 @@ function parseListWithIcon(
   regex: RegExp,
   type: BlockType,
   props?: Props<PropSchema>
-): PartialBlock<BlockSchema> | null {
+): PartialBlock<DefaultBlockSchema> | null {
   let matches = regex.exec(line);
 
   if (matches == null) {
@@ -443,7 +353,9 @@ function parseListWithIcon(
   return block;
 }
 
-function parseOrderedList(line: string): PartialBlock<BlockSchema> | null {
+function parseOrderedList(
+  line: string
+): PartialBlock<DefaultBlockSchema> | null {
   let matches = /^(\s*?)(\d+)\.\s+/.exec(line);
 
   if (matches == null) {
@@ -458,98 +370,163 @@ function parseOrderedList(line: string): PartialBlock<BlockSchema> | null {
     level = Math.floor(leadingWhitespace / 2);
   }
 
-  let block = createBlock("numberedListItem", substring, {
+  let block = createBlock("numberedListItem" as BlockType, substring, {
     level: level.toString(),
   });
   return block;
 }
 
-function parseToDoHyphen(line: string): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)- \[ \]\s+/, "taskListItem");
+function parseToDoHyphen(
+  line: string
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)- \[ \]\s+/,
+    "taskListItem" as BlockType
+  );
 }
 
 function parseToDoHyphenCancelled(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)- \[-\]\s+/, "taskListItem", {
-    canceled: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)- \[-\]\s+/,
+    "taskListItem" as BlockType,
+    {
+      cancelled: "true",
+    }
+  );
 }
 
 function parseToDoHyphenComplete(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)- \[x\]\s+/, "taskListItem", {
-    checked: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)- \[x\]\s+/,
+    "taskListItem" as BlockType,
+    {
+      checked: "true",
+    }
+  );
 }
 
 function parseToDoHyphenScheduled(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)- \[>\]\s+/, "taskListItem", {
-    scheduled: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)- \[>\]\s+/,
+    "taskListItem" as BlockType,
+    {
+      scheduled: "true",
+    }
+  );
 }
 
 function parseToDoAsteriskCancelled(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\* \[-\]\s+/, "taskListItem", {
-    canceled: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\* \[-\]\s+/,
+    "taskListItem" as BlockType,
+    {
+      cancelled: "true",
+    }
+  );
 }
 
 function parseToDoAsteriskComplete(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\* \[x\]\s+/, "taskListItem", {
-    checked: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\* \[x\]\s+/,
+    "taskListItem" as BlockType,
+    {
+      checked: "true",
+    }
+  );
 }
 
 function parseToDoAsteriskScheduled(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\* \[>\]\s+/, "taskListItem", {
-    scheduled: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\* \[>\]\s+/,
+    "taskListItem" as BlockType,
+    {
+      scheduled: "true",
+    }
+  );
 }
 
-function parseToDoAsterisk(line: string): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\*( \[ \])?\s+/, "taskListItem");
+function parseToDoAsterisk(
+  line: string
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\*( \[ \])?\s+/,
+    "taskListItem" as BlockType
+  );
 }
 
 function parseChecklistPlusCancelled(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\+ \[-\]\s+/, "checkListItem", {
-    canceled: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\+ \[-\]\s+/,
+    "checkListItem" as BlockType,
+    {
+      cancelled: "true",
+    }
+  );
 }
 
 function parseChecklistPlusComplete(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\+ \[x\]\s+/, "checkListItem", {
-    checked: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\+ \[x\]\s+/,
+    "checkListItem" as BlockType,
+    {
+      checked: "true",
+    }
+  );
 }
 
 function parseChecklistPlusScheduled(
   line: string
-): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\+ \[>\]\s+/, "checkListItem", {
-    scheduled: "true",
-  });
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\+ \[>\]\s+/,
+    "checkListItem" as BlockType,
+    {
+      scheduled: "true",
+    }
+  );
 }
 
-function parseChecklistPlus(line: string): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)\+( \[ \])?\s+/, "checkListItem");
+function parseChecklistPlus(
+  line: string
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(
+    line,
+    /^(\s*?)\+( \[ \])?\s+/,
+    "checkListItem" as BlockType
+  );
 }
 
-function parseUnorderedList(line: string): PartialBlock<BlockSchema> | null {
-  return parseListWithIcon(line, /^(\s*?)-\s+/, "bulletListItem");
+function parseUnorderedList(
+  line: string
+): PartialBlock<DefaultBlockSchema> | null {
+  return parseListWithIcon(line, /^(\s*?)-\s+/, "bulletListItem" as BlockType);
 }
 
 const parseFunctions = [
@@ -575,7 +552,7 @@ const parseFunctions = [
   parseParagraph,
 ];
 
-function parseNoteLine(line: string): PartialBlock<BlockSchema> {
+function parseNoteLine(line: string): PartialBlock<DefaultBlockSchema> {
   let parseFunctionsLength = parseFunctions.length;
 
   for (let i = 0; i < parseFunctionsLength; ++i) {
@@ -587,87 +564,10 @@ function parseNoteLine(line: string): PartialBlock<BlockSchema> {
     }
   }
   // nothing matched, return a paragraph
-  return createBlock("paragraph", line);
-}
-
-// TODO adapt to new block structure
-function parseTable(markdown: string): string {
-  const tableRegex = /\|(.+)\|\n\|( *[-:]+[-| :]*)+\|\n((\|.*\|\n)+)/gm;
-  let match;
-
-  while ((match = tableRegex.exec(markdown)) !== null) {
-    const rows = match[0].trim().split("\n");
-    const headerCells = rows[0]
-      .split("|")
-      .map((cell) => cell.trim())
-      .slice(1, -1);
-    const numColumns = headerCells.length;
-
-    let html = "<table><thead><tr>";
-    for (const cell of headerCells) {
-      html += `<th>${cell}</th>`;
-    }
-    html += "</tr></thead><tbody>";
-
-    for (let i = 2; i < rows.length; i++) {
-      const cells = rows[i]
-        .split("|")
-        .map((cell) => cell.trim())
-        .slice(1, -1);
-      if (cells.length !== numColumns) {
-        throw new Error(
-          `Row ${i} has ${cells.length} cells, expected ${numColumns}`
-        );
-      }
-      html += "<tr>";
-      for (const cell of cells) {
-        html += `<td>${cell}</td>`;
-      }
-      html += "</tr>";
-    }
-
-    html += "</tbody></table>";
-    markdown = markdown.replace(
-      match[0],
-      "<div class='table-content'>" + html + "</div><br>"
-    );
-  }
-
-  return markdown;
+  return createBlock("paragraph" as BlockType, line);
 }
 
-function findCodeFenceClose(lines: string[], start: number) {
-  let linesLength = lines.length;
-
-  for (let i = start; i < linesLength; i++) {
-    if (codeFenceCloseRegex.test(lines[i])) {
-      return i;
-    }
-  }
-
-  return -1;
-}
-
-function createCodeFence(
-  lines: string[],
-  first: number,
-  last: number
-): HTMLElement {
-  let div = document.createElement("div");
-  div.classList.add("code-fence");
-
-  let code = "";
-  for (let i = first; i < last; i++) {
-    code += lines[i] + "\n";
-  }
-
-  // Render the React element into the div
-  //   ReactDOM.render(<Highlight>{code}</Highlight>, div);
-
-  return div;
-}
-
-function postProcessBlocks(blocks: PartialBlock<BlockSchema>[]): void {
+function postProcessBlocks(blocks: PartialBlock<DefaultBlockSchema>[]): void {
   let blocksLength = blocks.length;
   // go through all blocks and nest blocks with lower level into previous blocks
   for (let i = 1; i < blocksLength; ++i) {
@@ -703,43 +603,9 @@ function postProcessBlocks(blocks: PartialBlock<BlockSchema>[]): void {
   }
 }
 
-export function parseMarkdown(markdown: string): string {
-  // Count the images beforehand, because in the attachments array (where the images and files are stored), the images come first, then the other files, so we need to keep track of the index
-  imageCount = (markdown.match(imageLinkRegex) || []).length;
-  markdown = parseTable(markdown);
-
-  let lines = markdown.split(/\r?\n/);
-  let linesCount = lines.length;
-  let html = "";
-
-  for (let i = 0; i < linesCount; i++) {
-    let line = lines[i];
-
-    if (codeFenceOpenRegex.test(line)) {
-      let first = i + 1;
-      let last = findCodeFenceClose(lines, first);
-
-      if (last !== -1) {
-        let codeFenceNode = createCodeFence(lines, first, last);
-        html += codeFenceNode.outerHTML;
-        i = last;
-        continue;
-      }
-    }
-
-    // If the line starts with <table>, ignore it
-    if (line.startsWith("<div class='table-content'>")) {
-      html += line;
-      continue;
-    }
-
-    // html += parseMarkdownLine(lines[i]).outerHTML;
-  }
-
-  return html;
-}
-
-export function parseNoteToBlocks(note: string): PartialBlock<BlockSchema>[] {
+export function parseNoteToBlocks(
+  note: string
+): PartialBlock<DefaultBlockSchema>[] {
   let lines = note.split(/\r?\n/);
   const linesCount = lines.length;
   let blocks = [];
@@ -753,7 +619,7 @@ export function parseNoteToBlocks(note: string): PartialBlock<BlockSchema>[] {
 function serializeTaskStates(prop: Props<PropSchema>): string {
   if (prop.checked === "true") {
     return "[x]";
-  } else if (prop.canceled === "true") {
+  } else if (prop.cancelled === "true") {
     return "[-]";
   } else if (prop.scheduled === "true") {
     return "[>]";
@@ -802,7 +668,7 @@ function serializeBlockContent(content: InlineContent[]): string {
 }
 
 export function serializeBlock(
-  block: Block<BlockSchema>,
+  block: Block<DefaultBlockSchema>,
   depth: number
 ): string {
   let text = "  ".repeat(depth);
@@ -873,7 +739,9 @@ function postProcessNote(note: string): string {
   return lines.join("\n");
 }
 
-export function serializeBlocksToNote(blocks: Block<BlockSchema>[]): string {
+export function serializeBlocksToNote(
+  blocks: Block<DefaultBlockSchema>[]
+): string {
   let text = "";
   let blocksLength = blocks.length;
   for (let i = 0; i < blocksLength; ++i) {

From a983e26837a8946e3d71fe1a4ccfc08d8b5120fe Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:53:47 +0900
Subject: [PATCH 25/48] Exclude npMarkdownConversions from executing and just
 use as reference

---
 .../{npMarkdownConversions.ts => npMarkdownConversions.txt}       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/core/src/api/formatConversions/{npMarkdownConversions.ts => npMarkdownConversions.txt} (100%)

diff --git a/packages/core/src/api/formatConversions/npMarkdownConversions.ts b/packages/core/src/api/formatConversions/npMarkdownConversions.txt
similarity index 100%
rename from packages/core/src/api/formatConversions/npMarkdownConversions.ts
rename to packages/core/src/api/formatConversions/npMarkdownConversions.txt

From 884eb661c7383bdf9d108a45630aaeda83c51897 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 00:55:31 +0900
Subject: [PATCH 26/48] Fix typescript errors, add missing icons, extract props

---
 packages/core/src/BlockNoteEditor.ts          |  8 ++--
 .../formatConversions.test.ts                 | 22 ++++++++++
 .../extensions/Blocks/api/defaultBlocks.ts    | 43 ++++++++++++++++---
 .../DefaultButtons/ToggledStyleButton.tsx     |  7 ++-
 4 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts
index 39c9a51958..3c14b6dfec 100644
--- a/packages/core/src/BlockNoteEditor.ts
+++ b/packages/core/src/BlockNoteEditor.ts
@@ -23,9 +23,7 @@ import {
   Block,
   BlockIdentifier,
   BlockSchema,
-  BlockSpec,
   PartialBlock,
-  PropSchema,
 } from "./extensions/Blocks/api/blockTypes";
 import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import {
@@ -733,7 +731,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param blocks An array of blocks that should be serialized into a NotePlan string.
    * @returns The blocks, serialized as a NotePlan string.
    */
-  public blocksToNotePlan(blocks: Block<BlockSchema>[]): string {
+  public blocksToNotePlan(blocks: Block<DefaultBlockSchema>[]): string {
     return serializeBlocksToNote(blocks);
   }
 
@@ -753,7 +751,9 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param notePlan The NotePlan string to parse blocks from.
    * @returns The blocks parsed from the NotePlan string.
    */
-  public notePlanToBlocks(notePlan: string): PartialBlock<BlockSchema>[] {
+  public notePlanToBlocks(
+    notePlan: string
+  ): PartialBlock<DefaultBlockSchema>[] {
     return parseNoteToBlocks(notePlan);
   }
 
diff --git a/packages/core/src/api/formatConversions/formatConversions.test.ts b/packages/core/src/api/formatConversions/formatConversions.test.ts
index 0d8e4054c1..b76134dbac 100644
--- a/packages/core/src/api/formatConversions/formatConversions.test.ts
+++ b/packages/core/src/api/formatConversions/formatConversions.test.ts
@@ -56,6 +56,7 @@ beforeEach(() => {
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -73,6 +74,7 @@ beforeEach(() => {
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -90,6 +92,7 @@ beforeEach(() => {
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -136,6 +139,7 @@ Paragraph
             backgroundColor: "default",
             textColor: "default",
             textAlignment: "left",
+            level: "0",
           },
           content: [
             {
@@ -152,6 +156,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -168,6 +173,7 @@ Paragraph
                     backgroundColor: "default",
                     textColor: "default",
                     textAlignment: "left",
+                    level: "0",
                   },
                   content: [
                     {
@@ -203,6 +209,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -326,6 +333,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -346,6 +354,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -382,6 +391,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -418,6 +428,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -435,6 +446,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
@@ -451,6 +463,7 @@ Paragraph
             backgroundColor: "default",
             textColor: "default",
             textAlignment: "left",
+            level: "0",
           },
           content: [
             {
@@ -467,6 +480,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -484,6 +498,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -501,6 +516,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -518,6 +534,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -535,6 +552,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -551,6 +569,7 @@ Paragraph
                     backgroundColor: "default",
                     textColor: "default",
                     textAlignment: "left",
+                    level: "0",
                   },
                   content: [
                     {
@@ -570,6 +589,7 @@ Paragraph
                 backgroundColor: "default",
                 textColor: "default",
                 textAlignment: "left",
+                level: "0",
               },
               content: [
                 {
@@ -589,6 +609,7 @@ Paragraph
             backgroundColor: "default",
             textColor: "default",
             textAlignment: "left",
+            level: "0",
           },
           content: [
             {
@@ -608,6 +629,7 @@ Paragraph
         backgroundColor: "default",
         textColor: "default",
         textAlignment: "left",
+        level: "0",
       },
       content: [
         {
diff --git a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
index 05b53c6bb7..885e1bf61a 100644
--- a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
+++ b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
@@ -18,6 +18,11 @@ export const defaultProps = {
     default: "left" as const,
     values: ["left", "center", "right", "justify"] as const,
   },
+} satisfies PropSchema;
+
+export type DefaultProps = typeof defaultProps;
+
+const taskAndCheckProps = {
   checked: {
     default: "false" as const,
   },
@@ -29,11 +34,18 @@ export const defaultProps = {
   },
 } satisfies PropSchema;
 
-export type DefaultProps = typeof defaultProps;
+const levelProps = {
+  level: {
+    default: "0" as const,
+  },
+} satisfies PropSchema;
 
 export const defaultBlockSchema = {
   paragraph: {
-    propSchema: defaultProps,
+    propSchema: {
+      ...defaultProps,
+      ...levelProps,
+    },
     node: ParagraphBlockContent,
   },
   heading: {
@@ -44,23 +56,40 @@ export const defaultBlockSchema = {
     node: HeadingBlockContent,
   },
   bulletListItem: {
-    propSchema: defaultProps,
+    propSchema: {
+      ...defaultProps,
+      ...levelProps,
+    },
     node: BulletListItemBlockContent,
   },
   taskListItem: {
-    propSchema: defaultProps,
+    propSchema: {
+      ...defaultProps,
+      ...levelProps,
+      ...taskAndCheckProps,
+    },
     node: TaskListItemBlockContent,
   },
   checkListItem: {
-    propSchema: defaultProps,
+    propSchema: {
+      ...defaultProps,
+      ...levelProps,
+      ...taskAndCheckProps,
+    },
     node: CheckListItemBlockContent,
   },
   quoteListItem: {
-    propSchema: defaultProps,
+    propSchema: {
+      ...defaultProps,
+      ...levelProps,
+    },
     node: QuotListItemBlockContent,
   },
   numberedListItem: {
-    propSchema: defaultProps,
+    propSchema: {
+      ...defaultProps,
+      ...levelProps,
+    },
     node: NumberedListItemBlockContent,
   },
 } as const;
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
index 375d9475ab..4f39ba8174 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
@@ -6,6 +6,8 @@ import {
   RiItalic,
   RiStrikethrough,
   RiUnderline,
+  RiHashtag,
+  RiLink,
 } from "react-icons/ri";
 import { BlockNoteEditor, BlockSchema, ToggledStyle } from "@blocknote/core";
 import { IconType } from "react-icons";
@@ -16,6 +18,8 @@ const shortcuts: Record<ToggledStyle, string> = {
   underline: "Mod+U",
   strike: "Mod+Shift+X",
   code: "",
+  hashtag: "",
+  wikilink: "",
 };
 
 const icons: Record<ToggledStyle, IconType> = {
@@ -24,13 +28,14 @@ const icons: Record<ToggledStyle, IconType> = {
   underline: RiUnderline,
   strike: RiStrikethrough,
   code: RiCodeFill,
+  hashtag: RiHashtag,
+  wikilink: RiLink,
 };
 
 export const ToggledStyleButton = <BSchema extends BlockSchema>(props: {
   editor: BlockNoteEditor<BSchema>;
   toggledStyle: ToggledStyle;
 }) => {
-
   const toggleStyle = (style: ToggledStyle) => {
     props.editor.focus();
     props.editor.toggleStyles({ [style]: true });

From ee17d58c4098a49e243af4a276b4df1b55fd9fcb Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Sun, 23 Jul 2023 15:36:31 -0500
Subject: [PATCH 27/48] add missing dependency, fix hashtag/mentions conversion
 and add wikilinks

---
 package.json                                     |  3 +++
 .../api/formatConversions/notePlanConversions.ts | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 71175075e7..918b10ed48 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "prosemirror-model": "1.18.3"
+  },
+  "dependencies": {
+    "tokenizr": "^1.6.10"
   }
 }
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index 2fa82d4e02..cf71a6b1f3 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -47,6 +47,7 @@ function createBlock(
 }
 
 function createInlineContent(text: string): PartialInlineContent[] {
+  const wikilink = /(\[{2}(.*?)\]{2})/;
   const fileLinkRegex = /!\[(file)\]$([^()]+)$/;
   const imageLinkRegex = /!\[(image)\]$([^()]+)$/;
   const namedLinkRegex = /\[([^[\]]*)\]$([^()]+)$/;
@@ -60,6 +61,10 @@ function createInlineContent(text: string): PartialInlineContent[] {
     /(?!@[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
 
   let lexer = new Tokenizr();
+  // wiki link
+  lexer.rule(wikilink, (ctx, match) => {
+    ctx.accept("wiki-link", { name: match[1], link: match[2] });
+  });
   // file link
   lexer.rule(fileLinkRegex, (ctx, match) => {
     ctx.accept("file-link", match[2]);
@@ -220,14 +225,21 @@ function createInlineContent(text: string): PartialInlineContent[] {
         inlineContent.push({
           type: "text",
           text: token.value,
-          styles: { textColor: "hashtag-color" },
+          styles: { hashtag: true },
         });
         break;
       case "at-tag":
         inlineContent.push({
           type: "text",
           text: token.value,
-          styles: { textColor: "at-color" },
+          styles: { hashtag: true },
+        });
+        break;
+      case "wiki-link":
+        inlineContent.push({
+          type: "text",
+          text: token.value.name,
+          styles: { wikilink: true },
         });
         break;
     }

From 5b82690c4fda4c931aa17fdee33e4d1dbbe02c17 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Sun, 23 Jul 2023 17:08:21 -0500
Subject: [PATCH 28/48] Fix moving indented items up/down with shortcuts

---
 .../ListItemKeyboardShortcuts.ts              | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

From cbf5ef3d7ec8343c2fb836aafb0ad9e26cfbb640 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Sun, 23 Jul 2023 18:42:47 -0500
Subject: [PATCH 29/48] Add support for horizontal rule / separators

---
 .../formatConversions/notePlanConversions.ts  | 17 +++++--
 .../extensions/Blocks/api/defaultBlocks.ts    |  7 +++
 .../extensions/Blocks/nodes/Block.module.css  | 30 ++++++++++++
 .../SeparatorBlockContent.ts                  | 49 +++++++++++++++++++
 4 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index cf71a6b1f3..87ee94afdd 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -47,7 +47,7 @@ function createBlock(
 }
 
 function createInlineContent(text: string): PartialInlineContent[] {
-  const wikilink = /(\[{2}(.*?)\]{2})/;
+  const wikilinkRegex = /(\[{2}(.*?)\]{2})/;
   const fileLinkRegex = /!\[(file)\]$([^()]+)$/;
   const imageLinkRegex = /!\[(image)\]$([^()]+)$/;
   const namedLinkRegex = /\[([^[\]]*)\]$([^()]+)$/;
@@ -62,7 +62,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
 
   let lexer = new Tokenizr();
   // wiki link
-  lexer.rule(wikilink, (ctx, match) => {
+  lexer.rule(wikilinkRegex, (ctx, match) => {
     ctx.accept("wiki-link", { name: match[1], link: match[2] });
   });
   // file link
@@ -118,7 +118,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
     ctx.accept("strike", match[1]);
   });
   // highlight
-  lexer.rule(/::(.*?)::/, (ctx, match) => {
+  lexer.rule(/==(.*?)==/, (ctx, match) => {
     ctx.accept("highlight", match[1]);
   });
   // plain text
@@ -334,6 +334,14 @@ function parseHeader4(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseHeader(line, /^#+\s+/, 4);
 }
 
+function parseSeparator(line: string): PartialBlock<DefaultBlockSchema> | null {
+  return parseIndentedBlock(
+    line,
+    /^\s*([-*]\s*){3,}$/,
+    "separator" as BlockType
+  );
+}
+
 function parseQuote(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseIndentedBlock(line, /^(\s*?)>\s+/, "quoteListItem" as BlockType);
 }
@@ -547,6 +555,7 @@ const parseFunctions = [
   parseHeader3,
   parseHeader4,
   parseQuote,
+  parseSeparator,
   parseToDoHyphen,
   parseToDoHyphenComplete,
   parseToDoHyphenCancelled,
@@ -732,7 +741,7 @@ function postProcessNote(note: string): string {
   for (let i = 0; i < linesLength; ++i) {
     let line = lines[i];
     let matches = /^(\s*?)(\d+)\.\s+(.*)/.exec(line);
-    console.log(matches);
+    // console.log(matches);
     if (matches != null) {
       let leadingWhitespace = matches[1].length;
       let level = 0;
diff --git a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
index 885e1bf61a..afbc0c5ace 100644
--- a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
+++ b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
@@ -1,4 +1,5 @@
 import { HeadingBlockContent } from "../nodes/BlockContent/HeadingBlockContent/HeadingBlockContent";
+import { SeparatorBlockContent } from "../nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent";
 import { BulletListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
 import { NumberedListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
 import { QuotListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/QuoteListItemBlockContent/QuoteBlockContent";
@@ -55,6 +56,12 @@ export const defaultBlockSchema = {
     },
     node: HeadingBlockContent,
   },
+  separator: {
+    propSchema: {
+      ...defaultProps,
+    },
+    node: SeparatorBlockContent,
+  },
   bulletListItem: {
     propSchema: {
       ...defaultProps,
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 1f765c3d1e..a0cf5b1f31 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -565,3 +565,33 @@ a[data-wikilink] {
 
   text-decoration: none; /* optional: removes underline if your hashtags are also links */
 }
+
+/* SEPARATOR */
+[data-content-type="separator"] {
+  width: 100%;
+  margin: 0;
+  border: 0px;
+  height: 50%;
+  position: relative;
+}
+
+[data-content-type="separator"] > hr {
+  border: 0px;
+  height: 50%;
+  margin: 0;
+}
+
+[data-content-type="separator"] > hr::before {
+  content: "";
+  display: block;
+  position: absolute;
+  border-top: 2px solid rgb(215, 215, 215);
+  margin: 0 auto;
+  left: 0;
+  right: 0;
+  top: 50%;
+}
+
+[data-content-type="separator"].hasAnchor > hr::before {
+  border-top: 2px solid rgb(156, 192, 255);
+}
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
new file mode 100644
index 0000000000..95fdf069b2
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
@@ -0,0 +1,49 @@
+import { InputRule, mergeAttributes } from "@tiptap/core";
+import { createTipTapBlock } from "../../../api/block";
+import styles from "../../Block.module.css";
+
+export const SeparatorBlockContent = createTipTapBlock<"separator">({
+  name: "separator",
+  content: "inline*",
+  selectable: true,
+
+  addInputRules() {
+    return [
+      // Creates a heading of appropriate level when starting with "#", "##", or "###".
+      new InputRule({
+        find: new RegExp(/^\s*([-*]\s*){3,}$/),
+        handler: ({ state, chain, range }) => {
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: this.name,
+            })
+            // Removes the "#" character(s) used to set the heading.
+            .deleteRange({ from: range.from, to: range.to })
+            .insertContentAt(range.to + 1, {
+              type: "paragraph",
+              props: {},
+            });
+        },
+      }),
+    ];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "hr",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: styles.blockContent,
+        "data-content-type": this.name,
+      }),
+      ["hr", { contenteditable: false }, 0],
+    ];
+  },
+});

From 71fe44e0f70fddd850ecf610011e077c974024d6 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 16:42:52 +0900
Subject: [PATCH 30/48] Remove console.log()

---
 packages/core/src/api/formatConversions/notePlanConversions.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index 2fa82d4e02..2fbd2f84b9 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -288,7 +288,6 @@ function parseParagraph(line: string): PartialBlock<DefaultBlockSchema> {
   }
 
   let matches = /^(\s*)\S*/.exec(line);
-  console.log(matches);
   if (matches != null) {
     let leadingWhitespace = matches[1].length;
     if (leadingWhitespace > 1) {
@@ -720,7 +719,6 @@ function postProcessNote(note: string): string {
   for (let i = 0; i < linesLength; ++i) {
     let line = lines[i];
     let matches = /^(\s*?)(\d+)\.\s+(.*)/.exec(line);
-    console.log(matches);
     if (matches != null) {
       let leadingWhitespace = matches[1].length;
       let level = 0;

From 628c197121081daff6ba8069de5f6556b11a4ec1 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:06:35 +0900
Subject: [PATCH 31/48] Add npm run pack command to build local packages

---
 .gitignore   | 2 ++
 package.json | 1 +
 2 files changed, 3 insertions(+)

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/package.json b/package.json
index 918b10ed48..f8216a6c79 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "test": "lerna run --stream test",
     "install-playwright": "npx playwright install --with-deps",
     "deploy": "lerna publish -- --access public",
+    "pack": "npm run build && cd packages/core/dist && npm pack && cd ../.. && cd react/dist && npm pack && cd ../../.. && mv packages/core/dist/*.tgz . && mv packages/react/dist/*.tgz .",
     "prepublishOnly": "npm run build && cp README.md packages/core/README.md && cp README.md packages/react/README.md",
     "postpublish": "rm -rf packages/core/README.md && rm -rf packages/react/README.md",
     "test-ct": "playwright test -c playwright-ct.config.ts --headed",

From fb1ed5ca1ac57db2c6f2929719decb8e65e38816 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:06:56 +0900
Subject: [PATCH 32/48] Change conversion method to static

---
 packages/core/src/BlockNoteEditor.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts
index 3c14b6dfec..7934730219 100644
--- a/packages/core/src/BlockNoteEditor.ts
+++ b/packages/core/src/BlockNoteEditor.ts
@@ -731,7 +731,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param blocks An array of blocks that should be serialized into a NotePlan string.
    * @returns The blocks, serialized as a NotePlan string.
    */
-  public blocksToNotePlan(blocks: Block<DefaultBlockSchema>[]): string {
+  public static blocksToNotePlan(blocks: Block<DefaultBlockSchema>[]): string {
     return serializeBlocksToNote(blocks);
   }
 
@@ -751,7 +751,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * @param notePlan The NotePlan string to parse blocks from.
    * @returns The blocks parsed from the NotePlan string.
    */
-  public notePlanToBlocks(
+  public static notePlanToBlocks(
     notePlan: string
   ): PartialBlock<DefaultBlockSchema>[] {
     return parseNoteToBlocks(notePlan);

From ce5ea77317f49b04f06fb27408f87217b8c6f87c Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:07:05 +0900
Subject: [PATCH 33/48] Fix build errors

---
 packages/core/src/api/formatConversions/notePlanConversions.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index aa556209f2..645fed973f 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -1,5 +1,6 @@
 import {
   Block,
+  BlockSchema,
   PartialBlock,
   PropSchema,
   Props,
@@ -587,7 +588,7 @@ function parseNoteLine(line: string): PartialBlock<DefaultBlockSchema> {
   return createBlock("paragraph" as BlockType, line);
 }
 
-function postProcessBlocks(blocks: PartialBlock<DefaultBlockSchema>[]): void {
+function postProcessBlocks(blocks: PartialBlock<BlockSchema>[]): void {
   let blocksLength = blocks.length;
   // go through all blocks and nest blocks with lower level into previous blocks
   for (let i = 1; i < blocksLength; ++i) {

From 9c79aa914fe52552131355a59dae9566c4baebb0 Mon Sep 17 00:00:00 2001
From: Anh Tuan Van <217000+anhtuanvan@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:54:41 +0900
Subject: [PATCH 34/48] Remove additional line from editor

---
 .../core/src/api/formatConversions/notePlanConversions.ts  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index 645fed973f..d7adf8f650 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -756,7 +756,12 @@ function postProcessNote(note: string): string {
       previousLevel = level;
     }
   }
-  return lines.join("\n");
+  let text = lines.join("\n");
+  // if there are more than one line and the last line is empty, remove it
+  if (linesLength > 1 && lines[linesLength - 1] === "") {
+    text = text.substring(0, text.length - 2);
+  }
+  return text;
 }
 
 export function serializeBlocksToNote(

From 49934b8171040dacb2ba4ae61baf7108db7bb55b Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Mon, 24 Jul 2023 19:47:51 -0500
Subject: [PATCH 35/48] Add shortcut to jump to the next previous node from the
 separator

---
 .../ListItemKeyboardShortcuts.ts              | 44 +++++++++++++++++++
 .../SeparatorBlockContent.ts                  |  8 ++++
 2 files changed, 52 insertions(+)

diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
index 96228ca62a..b0f36bdde8 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
@@ -1,5 +1,6 @@
 import { Editor } from "@tiptap/core";
 import { getBlockInfoFromPos } from "../../../helpers/getBlockInfoFromPos";
+import { TextSelection } from "prosemirror-state";
 
 export const handleEnter = (editor: Editor) => {
   const { node, contentType } = getBlockInfoFromPos(
@@ -46,6 +47,49 @@ export const handleEnter = (editor: Editor) => {
   ]);
 };
 
+export const handleSelectAboveBelow = (
+  editor: Editor,
+  direction: "above" | "below"
+) => {
+  const { selection } = editor.state;
+
+  const blockInfo = getBlockInfoFromPos(
+    editor.state.doc,
+    editor.state.selection.from
+  );
+
+  if (blockInfo?.contentType.name !== "separator") {
+    return false;
+  }
+
+  const $position = direction === "above" ? selection.$from : selection.$to;
+  let targetPos = null;
+
+  if (direction === "above") {
+    // For above, we need to get the node before the current one
+    if ($position.depth > 0) {
+      targetPos = $position.before($position.depth - 1);
+    }
+  } else {
+    // For below, we need to get the node after the current one
+    targetPos = $position.after($position.depth - 1);
+  }
+
+  // If no node is found, return false
+  if (targetPos === null) {
+    console.log("target pos is nul");
+    return false;
+  }
+
+  // Create a new selection around the node
+  const nodeSelection = TextSelection.create(editor.state.doc, targetPos);
+
+  // Apply the new selection
+  editor.view.dispatch(editor.state.tr.setSelection(nodeSelection));
+
+  return true;
+};
+
 export const handleAttribute = (
   editor: Editor,
   attribute: "checked" | "cancelled" | "scheduled"
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
index 95fdf069b2..6154f40e45 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
@@ -1,6 +1,7 @@
 import { InputRule, mergeAttributes } from "@tiptap/core";
 import { createTipTapBlock } from "../../../api/block";
 import styles from "../../Block.module.css";
+import { handleSelectAboveBelow } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
 
 export const SeparatorBlockContent = createTipTapBlock<"separator">({
   name: "separator",
@@ -28,6 +29,13 @@ export const SeparatorBlockContent = createTipTapBlock<"separator">({
     ];
   },
 
+  addKeyboardShortcuts() {
+    return {
+      ArrowUp: () => handleSelectAboveBelow(this.editor, "above"),
+      ArrowDown: () => handleSelectAboveBelow(this.editor, "below"),
+    };
+  },
+
   parseHTML() {
     return [
       {

From 744d61740cb70a12a9042af17ea21623f99957ec Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Wed, 26 Jul 2023 19:28:21 -0500
Subject: [PATCH 36/48] update inline parser to be more flexible

---
 .../extensions/Blocks/inline/inlineParser.ts  | 34 +++++++++++++------
 .../src/extensions/Blocks/inline/wikiLinks.ts |  4 +--
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/core/src/extensions/Blocks/inline/inlineParser.ts b/packages/core/src/extensions/Blocks/inline/inlineParser.ts
index 317149d7fe..1d4d4cf819 100644
--- a/packages/core/src/extensions/Blocks/inline/inlineParser.ts
+++ b/packages/core/src/extensions/Blocks/inline/inlineParser.ts
@@ -63,20 +63,34 @@ export class InlineParser {
     let newMarks = new Map<string, MarkKey>();
 
     // Use the regex to find the new marks.
-    let match;
-    while ((match = this.regex.exec(lineText)) !== null) {
-      // Calculate prefix length (full match length minus group length)
-      const prefixLength = match[0].length - match[this.matchIndex].length;
-
-      // Adjust `from` and `to` to only cover the group
-      const from = lineStart + match.index + 1 + prefixLength / 2; // Adjusted for prefix
-      const to = from + match[this.matchIndex].length; // match[1] is the content of the first group
+    const addMarkKey = (from: number, to: number, matchGroup: string) => {
       const attrs = {
         [this.markType.name]: true,
-        href: match[this.matchIndex],
+        href: matchGroup, // TODO: Add here an href only if defined in the constructor
       };
-      const key = new MarkKey(from, to, attrs.href);
+      const key = new MarkKey(from + 1, to + 1, attrs.href);
       newMarks.set(key.toString(), key);
+    };
+
+    // Use the regex to find the new marks.
+    let match;
+    while ((match = this.regex.exec(lineText)) !== null) {
+      if (this.matchIndex === 0) {
+        const from = lineStart + match.index;
+        const to = from + match[0].length;
+        addMarkKey(from, to, match[0]);
+      } else {
+        let index = match.index;
+        for (let groupIndex = 1; groupIndex < match.length; groupIndex++) {
+          const from = lineStart + index;
+          const to = from + match[groupIndex].length;
+          if (groupIndex === this.matchIndex) {
+            addMarkKey(from, to, match[groupIndex]);
+          }
+          // Update the index to start after the current group
+          index = to - lineStart;
+        }
+      }
     }
 
     return newMarks;
diff --git a/packages/core/src/extensions/Blocks/inline/wikiLinks.ts b/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
index 1078688ce0..4d35bacacd 100644
--- a/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
+++ b/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
@@ -6,7 +6,7 @@ export interface WikiLinkOptions {
   href: string;
 }
 
-export const wikiLinkRegex = /\[{2}(.*?)\]{2}/g;
+export const wikiLinkRegex = /(\[{2})(.*?)(\]{2})/g;
 
 export const WikiLink = Mark.create<WikiLinkOptions>({
   name: "wikilink",
@@ -69,7 +69,7 @@ export const WikiLink = Mark.create<WikiLinkOptions>({
       new InlineParser({
         markType: this.type,
         regex: wikiLinkRegex,
-        matchIndex: 1,
+        matchIndex: 2,
       }).plugin,
     ];
   },

From 746ecff4b62eeef41b63d1612d5267aa74cb55b9 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Thu, 27 Jul 2023 14:12:47 -0500
Subject: [PATCH 37/48] Refactor link inline styles and add date links

---
 packages/core/src/BlockNoteExtensions.ts      |  2 +
 .../formatConversions/notePlanConversions.ts  | 12 +++
 .../api/nodeConversions/nodeConversions.ts    |  1 +
 .../extensions/Blocks/api/createLinkMark.ts   | 89 +++++++++++++++++++
 .../Blocks/api/inlineContentTypes.ts          |  1 +
 .../Blocks/{inline => api}/inlineParser.ts    | 55 +++++-------
 .../src/extensions/Blocks/inline/datelink.ts  | 13 +++
 .../src/extensions/Blocks/inline/hashtags.ts  | 80 ++---------------
 .../src/extensions/Blocks/inline/wikiLinks.ts | 80 ++---------------
 .../extensions/Blocks/nodes/Block.module.css  | 10 ++-
 .../DefaultButtons/ToggledStyleButton.tsx     |  2 +
 11 files changed, 167 insertions(+), 178 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/api/createLinkMark.ts
 rename packages/core/src/extensions/Blocks/{inline => api}/inlineParser.ts (77%)
 create mode 100644 packages/core/src/extensions/Blocks/inline/datelink.ts

diff --git a/packages/core/src/BlockNoteExtensions.ts b/packages/core/src/BlockNoteExtensions.ts
index 57116efcc6..217670a32a 100644
--- a/packages/core/src/BlockNoteExtensions.ts
+++ b/packages/core/src/BlockNoteExtensions.ts
@@ -6,6 +6,7 @@ import { Bold } from "@tiptap/extension-bold";
 import { Code } from "@tiptap/extension-code";
 import { Hashtag } from "./extensions/Blocks/inline/hashtags";
 import { WikiLink } from "./extensions/Blocks/inline/wikiLinks";
+import { DateLink } from "./extensions/Blocks/inline/datelink";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { Dropcursor } from "@tiptap/extension-dropcursor";
@@ -103,6 +104,7 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     Underline,
     Hashtag,
     WikiLink,
+    DateLink,
     TextColorMark,
     TextColorExtension,
     BackgroundColorMark,
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index d7adf8f650..ff0bf539cc 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -48,6 +48,8 @@ function createBlock(
 }
 
 function createInlineContent(text: string): PartialInlineContent[] {
+  const dateLinkRegex =
+    /([>@](today|tomorrow|yesterday|(([0-9]{4})(-((0[1-9]|1[0-2])(-(0[1-9]|1[0-9]|2[0-9]|3[0-1]))?|Q[1-4]|W0[1-9]|W[1-4]\d|W5[0-3]))?)))/;
   const wikilinkRegex = /(\[{2}(.*?)\]{2})/;
   const fileLinkRegex = /!\[(file)\]$([^()]+)$/;
   const imageLinkRegex = /!\[(image)\]$([^()]+)$/;
@@ -62,6 +64,10 @@ function createInlineContent(text: string): PartialInlineContent[] {
     /(?!@[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
 
   let lexer = new Tokenizr();
+  // date link
+  lexer.rule(dateLinkRegex, (ctx, match) => {
+    ctx.accept("date-link", { name: match[1], link: match[2] });
+  });
   // wiki link
   lexer.rule(wikilinkRegex, (ctx, match) => {
     ctx.accept("wiki-link", { name: match[1], link: match[2] });
@@ -243,6 +249,12 @@ function createInlineContent(text: string): PartialInlineContent[] {
           styles: { wikilink: true },
         });
         break;
+      case "date-link":
+        inlineContent.push({
+          type: "text",
+          text: token.value.name,
+          styles: { datelink: true },
+        });
     }
   });
 
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index 775099f26d..2de6ae1b68 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -28,6 +28,7 @@ const toggleStyles = new Set<ToggledStyle>([
   "code",
   "hashtag",
   "wikilink",
+  "datelink",
 ]);
 const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
 
diff --git a/packages/core/src/extensions/Blocks/api/createLinkMark.ts b/packages/core/src/extensions/Blocks/api/createLinkMark.ts
new file mode 100644
index 0000000000..8b9ea0ccd4
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/api/createLinkMark.ts
@@ -0,0 +1,89 @@
+import { Mark } from "@tiptap/core";
+import { InlineParser } from "./inlineParser";
+
+export interface LinkOptions {
+  HTMLAttributes: Record<string, any>;
+  href: string;
+}
+
+interface LinkMarkOptions {
+  name: string;
+  regex: RegExp;
+  dataAttr: string;
+  hrefPrefix: string | undefined;
+  attrsMap: { [attr: string]: number };
+}
+
+export const createLinkMark = ({
+  name,
+  regex,
+  dataAttr,
+  hrefPrefix,
+  attrsMap,
+}: LinkMarkOptions) =>
+  Mark.create<LinkOptions>({
+    name,
+
+    parseHTML() {
+      return [
+        {
+          tag: "a",
+          getAttrs: (element: HTMLElement | string) => {
+            if (typeof element === "string") {
+              return false;
+            }
+
+            if (element.getAttribute(dataAttr) === this.name) {
+              return {
+                href: element.getAttribute("href") || null,
+              };
+            }
+
+            return false;
+          },
+        },
+      ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return [
+        "a",
+        {
+          ...HTMLAttributes,
+          href: "/?" + (hrefPrefix ?? "search") + "=" + HTMLAttributes.href,
+          target: "_self",
+          [dataAttr]: this.name,
+        },
+        0,
+      ];
+    },
+
+    addAttributes() {
+      return {
+        href: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("href"),
+          renderHTML: (attributes) => ({
+            href: attributes.href,
+          }),
+        },
+        [name]: {
+          default: false,
+          parseHTML: (element) => element.getAttribute(dataAttr),
+          renderHTML: () => ({
+            [dataAttr]: true,
+          }),
+        },
+      };
+    },
+
+    addProseMirrorPlugins() {
+      return [
+        new InlineParser({
+          markType: this.type,
+          regex,
+          attrsMap: attrsMap,
+        }).plugin,
+      ];
+    },
+  });
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index d85834c33c..c2af9ddf31 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -8,6 +8,7 @@ export type Styles = {
   backgroundColor?: string;
   hashtag?: true;
   wikilink?: true;
+  datelink?: true;
 };
 
 export type ToggledStyle = {
diff --git a/packages/core/src/extensions/Blocks/inline/inlineParser.ts b/packages/core/src/extensions/Blocks/api/inlineParser.ts
similarity index 77%
rename from packages/core/src/extensions/Blocks/inline/inlineParser.ts
rename to packages/core/src/extensions/Blocks/api/inlineParser.ts
index 1d4d4cf819..5cd074002f 100644
--- a/packages/core/src/extensions/Blocks/inline/inlineParser.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineParser.ts
@@ -6,12 +6,16 @@ import { Node } from "prosemirror-model";
 interface MarkOptions {
   markType: MarkType;
   regex: RegExp;
-  matchIndex: number;
+  attrsMap: { [attr: string]: number };
 }
 
 // Class to manage the key of a Mark.
 class MarkKey {
-  constructor(public from: number, public to: number, public href: string) {}
+  constructor(
+    public from: number,
+    public to: number,
+    public attrs: { [attr: string]: string | Boolean }
+  ) {}
 
   // Convert the MarkKey instance into a string representation.
   toString() {
@@ -23,12 +27,12 @@ class MarkKey {
 export class InlineParser {
   private markType: MarkType;
   private regex: RegExp;
-  private matchIndex: number;
+  private attrsMap: { [attr: string]: number };
 
-  constructor({ markType, regex, matchIndex = 0 }: MarkOptions) {
+  constructor({ markType, regex, attrsMap }: MarkOptions) {
     this.markType = markType;
     this.regex = regex;
-    this.matchIndex = matchIndex;
+    this.attrsMap = attrsMap;
   }
 
   // Extract the existing marks within the given range.
@@ -44,7 +48,7 @@ export class InlineParser {
       // If the node has the markType, create a MarkKey and add it to the map.
       node.marks.forEach((mark) => {
         if (mark.type === this.markType) {
-          const key = new MarkKey(pos, pos + node.nodeSize, mark.attrs.href);
+          const key = new MarkKey(pos, pos + node.nodeSize, mark.attrs);
           existingMarks.set(key.toString(), key);
         }
       });
@@ -62,33 +66,21 @@ export class InlineParser {
     const lineText = state.doc.textBetween(lineStart, lineEnd, "\n");
     let newMarks = new Map<string, MarkKey>();
 
-    // Use the regex to find the new marks.
-    const addMarkKey = (from: number, to: number, matchGroup: string) => {
-      const attrs = {
-        [this.markType.name]: true,
-        href: matchGroup, // TODO: Add here an href only if defined in the constructor
-      };
-      const key = new MarkKey(from + 1, to + 1, attrs.href);
-      newMarks.set(key.toString(), key);
-    };
-
     // Use the regex to find the new marks.
     let match;
     while ((match = this.regex.exec(lineText)) !== null) {
-      if (this.matchIndex === 0) {
-        const from = lineStart + match.index;
-        const to = from + match[0].length;
-        addMarkKey(from, to, match[0]);
-      } else {
-        let index = match.index;
-        for (let groupIndex = 1; groupIndex < match.length; groupIndex++) {
-          const from = lineStart + index;
+      let attrs: { [key: string]: string | Boolean } = {};
+
+      for (const [attrKey, groupIndex] of Object.entries(this.attrsMap)) {
+        if (match[groupIndex] !== undefined) {
+          attrs[attrKey] = match[groupIndex];
+
+          const from =
+            lineStart + match.index + match[0].indexOf(match[groupIndex]);
           const to = from + match[groupIndex].length;
-          if (groupIndex === this.matchIndex) {
-            addMarkKey(from, to, match[groupIndex]);
-          }
-          // Update the index to start after the current group
-          index = to - lineStart;
+
+          const key = new MarkKey(from + 1, to + 1, attrs);
+          newMarks.set(key.toString(), key);
         }
       }
     }
@@ -126,10 +118,7 @@ export class InlineParser {
           tr = tr.addMark(
             markKey.from,
             markKey.to,
-            this.markType.create({
-              [this.markType.name]: true,
-              href: markKey.href,
-            })
+            this.markType.create(markKey.attrs)
           );
         }
       }
diff --git a/packages/core/src/extensions/Blocks/inline/datelink.ts b/packages/core/src/extensions/Blocks/inline/datelink.ts
new file mode 100644
index 0000000000..2cfd52fc40
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/datelink.ts
@@ -0,0 +1,13 @@
+import { createLinkMark } from "../api/createLinkMark";
+
+export const DateLink = createLinkMark({
+  name: "datelink",
+  regex:
+    /[>@](today|tomorrow|yesterday|(([0-9]{4})(-((0[1-9]|1[0-2])(-(0[1-9]|1[0-9]|2[0-9]|3[0-1]))?|Q[1-4]|W0[1-9]|W[1-4]\d|W5[0-3]))?))/g,
+  dataAttr: "data-datelink",
+  hrefPrefix: "date",
+  attrsMap: {
+    wikilink: 0,
+    href: 1,
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/inline/hashtags.ts b/packages/core/src/extensions/Blocks/inline/hashtags.ts
index ad721536fc..b83a14dd9a 100644
--- a/packages/core/src/extensions/Blocks/inline/hashtags.ts
+++ b/packages/core/src/extensions/Blocks/inline/hashtags.ts
@@ -1,76 +1,12 @@
-import { Mark } from "@tiptap/core";
-import { InlineParser } from "./inlineParser";
+import { createLinkMark } from "../api/createLinkMark";
 
-export interface HashtagOptions {
-  HTMLAttributes: Record<string, any>;
-  href: string;
-}
-
-export const hashtagInputRegex = /(?<=(^|\s))((#|@)[\w-_/]+)/g;
-
-export const Hashtag = Mark.create<HashtagOptions>({
+export const Hashtag = createLinkMark({
   name: "hashtag",
-
-  parseHTML() {
-    return [
-      {
-        tag: "a",
-        getAttrs: (element: HTMLElement | string) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          if (element.getAttribute("data-hashtag") === this.name) {
-            return {
-              href: element.getAttribute("href") || null,
-            };
-          }
-
-          return false;
-        },
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "a",
-      {
-        ...HTMLAttributes,
-        href: "/?search=" + HTMLAttributes.href,
-        target: "_self",
-        "data-hashtag": this.name,
-      },
-      0,
-    ];
-  },
-
-  addAttributes() {
-    return {
-      href: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("href"),
-        renderHTML: (attributes) => ({
-          href: attributes.href,
-        }),
-      },
-      hashtag: {
-        default: false,
-        parseHTML: (element) => element.getAttribute("data-hashtag"),
-        renderHTML: () => ({
-          "data-hashtag": true,
-        }),
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new InlineParser({
-        markType: this.type,
-        regex: hashtagInputRegex,
-        matchIndex: 0,
-      }).plugin,
-    ];
+  regex: /(?<=(^|\s))((#|@)[\w-_/]+)/g,
+  dataAttr: "data-hashtag",
+  hrefPrefix: undefined,
+  attrsMap: {
+    wikilink: 0,
+    href: 0,
   },
 });
diff --git a/packages/core/src/extensions/Blocks/inline/wikiLinks.ts b/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
index 4d35bacacd..4f4a887d51 100644
--- a/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
+++ b/packages/core/src/extensions/Blocks/inline/wikiLinks.ts
@@ -1,76 +1,12 @@
-import { Mark } from "@tiptap/core";
-import { InlineParser } from "./inlineParser";
+import { createLinkMark } from "../api/createLinkMark";
 
-export interface WikiLinkOptions {
-  HTMLAttributes: Record<string, any>;
-  href: string;
-}
-
-export const wikiLinkRegex = /(\[{2})(.*?)(\]{2})/g;
-
-export const WikiLink = Mark.create<WikiLinkOptions>({
+export const WikiLink = createLinkMark({
   name: "wikilink",
-
-  parseHTML() {
-    return [
-      {
-        tag: "a",
-        getAttrs: (element: HTMLElement | string) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          if (element.getAttribute("data-wikilink") === this.name) {
-            return {
-              href: element.getAttribute("href") || null,
-            };
-          }
-
-          return false;
-        },
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "a",
-      {
-        ...HTMLAttributes,
-        href: "/?search=" + HTMLAttributes.href,
-        target: "_self",
-        "data-wikilink": true,
-      },
-      0,
-    ];
-  },
-
-  addAttributes() {
-    return {
-      href: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("href"),
-        renderHTML: (attributes) => ({
-          href: attributes.href,
-        }),
-      },
-      wikilink: {
-        default: false,
-        parseHTML: (element) => element.getAttribute("data-wikilink"),
-        renderHTML: () => ({
-          "data-wikilink": true,
-        }),
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new InlineParser({
-        markType: this.type,
-        regex: wikiLinkRegex,
-        matchIndex: 2,
-      }).plugin,
-    ];
+  regex: /(\[{2})(.*?)(\]{2})/g,
+  dataAttr: "data-wikilink",
+  hrefPrefix: "title",
+  attrsMap: {
+    wikilink: 2,
+    href: 2,
   },
 });
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index a0cf5b1f31..37b9336b74 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -558,7 +558,7 @@ a[data-hashtag] {
   text-decoration: none; /* optional: removes underline if your hashtags are also links */
 }
 
-/* HASHTAG */
+/* WIKILINK */
 a[data-wikilink] {
   color: var(--orange-noteplan);
   cursor: pointer;
@@ -566,6 +566,14 @@ a[data-wikilink] {
   text-decoration: none; /* optional: removes underline if your hashtags are also links */
 }
 
+/* DATELINK */
+a[data-datelink] {
+  color: var(--orange-noteplan);
+  cursor: pointer;
+
+  text-decoration: none; /* optional: removes underline if your hashtags are also links */
+}
+
 /* SEPARATOR */
 [data-content-type="separator"] {
   width: 100%;
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
index 4f39ba8174..ee0f9b0672 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
@@ -20,6 +20,7 @@ const shortcuts: Record<ToggledStyle, string> = {
   code: "",
   hashtag: "",
   wikilink: "",
+  datelink: "",
 };
 
 const icons: Record<ToggledStyle, IconType> = {
@@ -30,6 +31,7 @@ const icons: Record<ToggledStyle, IconType> = {
   code: RiCodeFill,
   hashtag: RiHashtag,
   wikilink: RiLink,
+  datelink: RiLink,
 };
 
 export const ToggledStyleButton = <BSchema extends BlockSchema>(props: {

From c2f528943bf694e63571fada94a3feea6e2bf43a Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Thu, 27 Jul 2023 15:40:05 -0500
Subject: [PATCH 38/48] Fix markdown conversion of new link styles: wikilinks,
 hashtags, mentions and date links

---
 .../formatConversions/notePlanConversions.ts  | 58 ++++++++++++-------
 .../api/nodeConversions/nodeConversions.ts    |  3 +-
 .../extensions/Blocks/api/createLinkMark.ts   |  1 -
 .../Blocks/api/inlineContentTypes.ts          |  3 +
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index ff0bf539cc..cd846bd5dc 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -58,19 +58,19 @@ function createInlineContent(text: string): PartialInlineContent[] {
     /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
   const doneDateRegex =
     /@done$(([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-9]|3[0-1]))( ((0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]( ?[aApP][mM])?))?$/;
-  const hashTagRegex =
-    /(?!#[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(#([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|#([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
-  const atRegex =
-    /(?!@[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
+  const hashTagRegex = /(?<=(^|\s))((#)[\w-_/]+)/;
+  // /(?!#[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(#([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|#([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
+  const atRegex = /(?<=(^|\s))((@)[\w-_/]+)/;
+  // /(?!@[\d!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~]+(\s|$))(@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+?\$.*?\$|@([^!"#$%&'()*+,\-./:;<=>?@[\]^_`{|}~\s]|[-_/])+)/;
 
   let lexer = new Tokenizr();
   // date link
   lexer.rule(dateLinkRegex, (ctx, match) => {
-    ctx.accept("date-link", { name: match[1], link: match[2] });
+    ctx.accept("date-link", { name: match[0], href: match[2] });
   });
   // wiki link
   lexer.rule(wikilinkRegex, (ctx, match) => {
-    ctx.accept("wiki-link", { name: match[1], link: match[2] });
+    ctx.accept("wiki-link", { name: match[2], href: match[2] });
   });
   // file link
   lexer.rule(fileLinkRegex, (ctx, match) => {
@@ -82,7 +82,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
   });
   // named link
   lexer.rule(namedLinkRegex, (ctx, match) => {
-    ctx.accept("named-link", { name: match[1], link: match[2] });
+    ctx.accept("named-link", { name: match[1], href: match[2] });
   });
   // link
   lexer.rule(linkRegex, (ctx, _match) => {
@@ -93,12 +93,12 @@ function createInlineContent(text: string): PartialInlineContent[] {
     ctx.accept("done-date");
   });
   // hash tag
-  lexer.rule(hashTagRegex, (ctx, _match) => {
-    ctx.accept("hash-tag");
+  lexer.rule(hashTagRegex, (ctx, match) => {
+    ctx.accept("hash-tag", { name: match[0], href: match[0] });
   });
   // at tag
-  lexer.rule(atRegex, (ctx, _match) => {
-    ctx.accept("at-tag");
+  lexer.rule(atRegex, (ctx, match) => {
+    ctx.accept("at-tag", { name: match[0], href: match[0] });
   });
   // code
   lexer.rule(/`(.*?)`/, (ctx, match) => {
@@ -231,29 +231,45 @@ function createInlineContent(text: string): PartialInlineContent[] {
       case "hash-tag":
         inlineContent.push({
           type: "text",
-          text: token.value,
+          text: token.value.name,
           styles: { hashtag: true },
+          attr: { href: token.value.href },
         });
         break;
       case "at-tag":
         inlineContent.push({
           type: "text",
-          text: token.value,
+          text: token.value.name,
           styles: { hashtag: true },
+          attr: { href: token.value.href },
         });
         break;
       case "wiki-link":
-        inlineContent.push({
-          type: "text",
-          text: token.value.name,
-          styles: { wikilink: true },
-        });
+        inlineContent.push(
+          {
+            type: "text",
+            text: "[[",
+            styles: {},
+          },
+          {
+            type: "text",
+            text: token.value.name,
+            styles: { wikilink: true },
+            attr: { href: token.value.href },
+          },
+          {
+            type: "text",
+            text: "]]",
+            styles: {},
+          }
+        );
         break;
       case "date-link":
         inlineContent.push({
           type: "text",
           text: token.value.name,
           styles: { datelink: true },
+          attr: { href: token.value.href },
         });
     }
   });
@@ -675,8 +691,10 @@ function serializeBlockContent(content: InlineContent[]): string {
           text += "*" + contentItem.text + "*";
         } else if (contentItem.styles.strike) {
           text += "~~" + contentItem.text + "~~";
-        } else if (contentItem.styles.backgroundColor === "highlight-color") {
-          text += "::" + contentItem.text + "::";
+        } else if (contentItem.styles.highlighted) {
+          text += "==" + contentItem.text + "==";
+        } else if (contentItem.styles.underlined) {
+          text += "~" + contentItem.text + "~";
         } else if (contentItem.styles.code) {
           text += "`" + contentItem.text + "`";
         } else {
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index 2de6ae1b68..95f9b7287d 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -38,10 +38,9 @@ const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
  */
 function styledTextToNodes(styledText: StyledText, schema: Schema): Node[] {
   const marks: Mark[] = [];
-
   for (const [style, value] of Object.entries(styledText.styles)) {
     if (toggleStyles.has(style as ToggledStyle)) {
-      marks.push(schema.mark(style));
+      marks.push(schema.mark(style, styledText.attr));
     } else if (colorStyles.has(style as ColorStyle)) {
       marks.push(schema.mark(style, { color: value }));
     }
diff --git a/packages/core/src/extensions/Blocks/api/createLinkMark.ts b/packages/core/src/extensions/Blocks/api/createLinkMark.ts
index 8b9ea0ccd4..24a8f5c280 100644
--- a/packages/core/src/extensions/Blocks/api/createLinkMark.ts
+++ b/packages/core/src/extensions/Blocks/api/createLinkMark.ts
@@ -3,7 +3,6 @@ import { InlineParser } from "./inlineParser";
 
 export interface LinkOptions {
   HTMLAttributes: Record<string, any>;
-  href: string;
 }
 
 interface LinkMarkOptions {
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index c2af9ddf31..4b0d54c79b 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -6,6 +6,8 @@ export type Styles = {
   code?: true;
   textColor?: string;
   backgroundColor?: string;
+  highlighted?: string;
+  underlined?: string;
   hashtag?: true;
   wikilink?: true;
   datelink?: true;
@@ -23,6 +25,7 @@ export type StyledText = {
   type: "text";
   text: string;
   styles: Styles;
+  attr?: {};
 };
 
 export type Link = {

From 9764c4563536b209ace86a23c2fdd12d6ece6325 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Fri, 28 Jul 2023 16:40:20 -0500
Subject: [PATCH 39/48] add table conversion and adding tables with typing
 '===' or more

---
 .../formatConversions/notePlanConversions.ts  | 72 ++++++++++++++-
 .../src/extensions/Blocks/api/blockTypes.ts   |  8 +-
 .../extensions/Blocks/api/defaultBlocks.ts    | 17 +++-
 .../extensions/Blocks/nodes/Block.module.css  | 61 +++++++++++--
 .../ListItemKeyboardShortcuts.ts              |  5 +-
 .../SeparatorBlockContent.ts                  |  4 +-
 .../TableBlockContent/TableBlockContent.ts    | 90 +++++++++++++++++++
 7 files changed, 240 insertions(+), 17 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index cd846bd5dc..b77e1d506f 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -12,6 +12,8 @@ import {
 import { DefaultBlockSchema } from "../..";
 import Tokenizr from "tokenizr";
 
+const encodedTablePrefix = "%%%npTableData:";
+
 // fallback polyfill for window.matchMedia
 window.matchMedia =
   window.matchMedia ||
@@ -370,6 +372,28 @@ function parseSeparator(line: string): PartialBlock<DefaultBlockSchema> | null {
   );
 }
 
+function parseTable(line: string): PartialBlock<DefaultBlockSchema> | null {
+  // Check if the line starts with %%%npTableData:
+  if (!line.startsWith(encodedTablePrefix)) {
+    return null;
+  }
+
+  // Remove the %%%npTableData: from the beginning
+  line = line.substring(encodedTablePrefix.length);
+
+  // Convert the line which is a JSON string into an object, the JSON might be invalid, check for it
+  let tableData: [];
+  try {
+    tableData = JSON.parse(line);
+  } catch (e) {
+    return null;
+  }
+
+  return createBlock("tableBlockItem" as BlockType, "", {
+    data: tableData,
+  });
+}
+
 function parseQuote(line: string): PartialBlock<DefaultBlockSchema> | null {
   return parseIndentedBlock(line, /^(\s*?)>\s+/, "quoteListItem" as BlockType);
 }
@@ -578,6 +602,7 @@ function parseUnorderedList(
 }
 
 const parseFunctions = [
+  parseTable,
   parseHeader1,
   parseHeader2,
   parseHeader3,
@@ -601,11 +626,50 @@ const parseFunctions = [
   parseParagraph,
 ];
 
+// Converts the multi-line table into a one-liner, so we can pick it up in the line-by-line processing
+function preParseTablesIntoSingleLines(markdown: string): string {
+  const tableRegex = /\|(.+)\|\n\|( *[-:]+[-| :]*)+\|\n((\|.*\|\n)+)/gm;
+  let match;
+
+  while ((match = tableRegex.exec(markdown)) !== null) {
+    const rows = match[0].trim().split("\n");
+    const headerCells = rows[0]
+      .split("|")
+      .map((cell) => cell.trim())
+      .slice(1, -1);
+    const numColumns = headerCells.length;
+
+    const tableRows = [];
+
+    for (let i = 1; i < rows.length; i++) {
+      const cells = rows[i]
+        .split("|")
+        .map((cell) => cell.trim())
+        .slice(1, -1);
+      if (cells.length !== numColumns) {
+        throw new Error(
+          `Row ${i} has ${cells.length} cells, expected ${numColumns}`
+        );
+      }
+      const pattern = /^-+$/;
+      if (cells.some((cell) => !pattern.test(cell))) {
+        tableRows.push(cells);
+      }
+    }
+
+    const tableData = [headerCells, ...tableRows];
+    const encodedTableData = encodedTablePrefix + JSON.stringify(tableData);
+
+    markdown = markdown.replace(match[0], encodedTableData);
+  }
+
+  return markdown;
+}
+
 function parseNoteLine(line: string): PartialBlock<DefaultBlockSchema> {
   let parseFunctionsLength = parseFunctions.length;
 
   for (let i = 0; i < parseFunctionsLength; ++i) {
-    //TODO handle lines with separator
     let block = parseFunctions[i](line);
 
     if (block != null) {
@@ -655,9 +719,15 @@ function postProcessBlocks(blocks: PartialBlock<BlockSchema>[]): void {
 export function parseNoteToBlocks(
   note: string
 ): PartialBlock<DefaultBlockSchema>[] {
+  // Parse first the multi-line blocks like code-fences and tables into a single line, so we can process it later line by line
+  note = preParseTablesIntoSingleLines(note);
+
+  // TODO: Code fences
+
   let lines = note.split(/\r?\n/);
   const linesCount = lines.length;
   let blocks = [];
+
   for (let i = 0; i < linesCount; i++) {
     blocks.push(parseNoteLine(lines[i]));
   }
diff --git a/packages/core/src/extensions/Blocks/api/blockTypes.ts b/packages/core/src/extensions/Blocks/api/blockTypes.ts
index ee49d9921d..b9b405eed1 100644
--- a/packages/core/src/extensions/Blocks/api/blockTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/blockTypes.ts
@@ -34,8 +34,8 @@ export type TipTapNode<
 // Defines a single prop spec, which includes the default value the prop should
 // take and possible values it can take.
 export type PropSpec = {
-  values?: readonly string[];
-  default: string;
+  values?: readonly any[];
+  default: any;
 };
 
 // Defines multiple block prop specs. The key of each prop is the name of the
@@ -49,9 +49,9 @@ export type PropSchema = Record<string, PropSpec>;
 // each prop spec into a union type of its possible values, or a string if no
 // values are specified.
 export type Props<PSchema extends PropSchema> = {
-  [PType in keyof PSchema]: PSchema[PType]["values"] extends readonly string[]
+  [PType in keyof PSchema]: PSchema[PType]["values"] extends readonly any[]
     ? PSchema[PType]["values"][number]
-    : string;
+    : any;
 };
 
 // Defines the config for a single block. Meant to be used as an argument to
diff --git a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
index afbc0c5ace..884687d95a 100644
--- a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
+++ b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
@@ -7,6 +7,7 @@ import { TaskListItemBlockContent } from "../nodes/BlockContent/ListItemBlockCon
 import { CheckListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent";
 import { ParagraphBlockContent } from "../nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent";
 import { PropSchema, TypesMatch } from "./blockTypes";
+import { TableBlockContent } from "../nodes/BlockContent/TableBlockContent/TableBlockContent";
 
 export const defaultProps = {
   backgroundColor: {
@@ -35,6 +36,12 @@ const taskAndCheckProps = {
   },
 } satisfies PropSchema;
 
+const tableProps = {
+  data: {
+    default: "" as const,
+  },
+} satisfies PropSchema;
+
 const levelProps = {
   level: {
     default: "0" as const,
@@ -80,7 +87,6 @@ export const defaultBlockSchema = {
   checkListItem: {
     propSchema: {
       ...defaultProps,
-      ...levelProps,
       ...taskAndCheckProps,
     },
     node: CheckListItemBlockContent,
@@ -88,17 +94,22 @@ export const defaultBlockSchema = {
   quoteListItem: {
     propSchema: {
       ...defaultProps,
-      ...levelProps,
     },
     node: QuotListItemBlockContent,
   },
   numberedListItem: {
     propSchema: {
       ...defaultProps,
-      ...levelProps,
     },
     node: NumberedListItemBlockContent,
   },
+  tableBlockItem: {
+    propSchema: {
+      ...defaultProps,
+      ...tableProps,
+    },
+    node: TableBlockContent,
+  },
 } as const;
 
 export type DefaultBlockSchema = TypesMatch<typeof defaultBlockSchema>;
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 37b9336b74..56f93155ea 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -1,8 +1,3 @@
-/* @tailwind base;
-@tailwind components;
-@tailwind utilities;
-@tailwind colors; */
-
 :root {
   --blue-noteplan: #0091f8;
   --orange-noteplan: #d87001;
@@ -603,3 +598,59 @@ a[data-datelink] {
 [data-content-type="separator"].hasAnchor > hr::before {
   border-top: 2px solid rgb(156, 192, 255);
 }
+
+/* TABLE */
+
+[data-content-type="tableBlockItem"] {
+  border-width: 2px;
+  border-color: #e2e8f0;
+  border-style: solid;
+  text-align: left;
+  border-radius: 10px;
+}
+
+[data-content-type="tableBlockItem"] table {
+  line-height: 1.5;
+  font-size: 1rem;
+  background-color: transparent;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  overflow: hidden;
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+[data-content-type="tableBlockItem"] table th,
+td {
+  border-width: 2px;
+  border-color: #e2e8f0;
+  border-style: solid;
+  padding: 0.5rem;
+  text-align: left;
+  outline: none;
+  vertical-align: top;
+}
+
+[data-content-type="tableBlockItem"].hasAnchor {
+  border-color: rgb(156, 192, 255);
+}
+
+[data-content-type="tableBlockItem"] tr th:first-child {
+  border-left: none;
+}
+[data-content-type="tableBlockItem"] tr th:last-child {
+  border-right: none;
+}
+[data-content-type="tableBlockItem"] tr:first-child th {
+  border-top: none;
+}
+[data-content-type="tableBlockItem"] tr:last-child td {
+  border-bottom: none;
+}
+[data-content-type="tableBlockItem"] tr td:first-child {
+  border-left: none;
+}
+[data-content-type="tableBlockItem"] tr td:last-child {
+  border-right: none;
+}
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
index b0f36bdde8..ecee9d4c9f 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
@@ -49,7 +49,8 @@ export const handleEnter = (editor: Editor) => {
 
 export const handleSelectAboveBelow = (
   editor: Editor,
-  direction: "above" | "below"
+  direction: "above" | "below",
+  contentType: string
 ) => {
   const { selection } = editor.state;
 
@@ -58,7 +59,7 @@ export const handleSelectAboveBelow = (
     editor.state.selection.from
   );
 
-  if (blockInfo?.contentType.name !== "separator") {
+  if (blockInfo?.contentType.name !== contentType) {
     return false;
   }
 
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
index 6154f40e45..6c7e4709d2 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/SeparatorBlockContent/SeparatorBlockContent.ts
@@ -31,8 +31,8 @@ export const SeparatorBlockContent = createTipTapBlock<"separator">({
 
   addKeyboardShortcuts() {
     return {
-      ArrowUp: () => handleSelectAboveBelow(this.editor, "above"),
-      ArrowDown: () => handleSelectAboveBelow(this.editor, "below"),
+      ArrowUp: () => handleSelectAboveBelow(this.editor, "above", this.name),
+      ArrowDown: () => handleSelectAboveBelow(this.editor, "below", this.name),
     };
   },
 
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts
new file mode 100644
index 0000000000..c851e1a49e
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts
@@ -0,0 +1,90 @@
+import { InputRule, mergeAttributes } from "@tiptap/core";
+import { createTipTapBlock } from "../../../api/block";
+import styles from "../../Block.module.css";
+import { handleSelectAboveBelow } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
+
+export const TableBlockContent = createTipTapBlock<"tableBlockItem">({
+  name: "tableBlockItem",
+  content: "inline*",
+  selectable: true,
+
+  addAttributes() {
+    return {
+      data: {
+        default: [
+          ["", "", ""],
+          ["", "", ""],
+          ["", "", ""],
+        ],
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      // Creates a table when typing "===".
+      new InputRule({
+        find: /^(={3,})\s$/,
+        handler: ({ state, match, chain, range }) => {
+          const matchLength = match[1].length;
+
+          chain()
+            .BNUpdateBlock(state.selection.from, {
+              type: this.name,
+              props: {
+                data: Array.from({ length: matchLength }, () =>
+                  Array(matchLength).fill("")
+                ),
+              },
+            })
+            // Removes the "#" character(s) used to set the heading.
+            .deleteRange({ from: range.from, to: range.to })
+            .insertContentAt(range.to + 1, {
+              type: "paragraph",
+              props: {},
+            });
+        },
+      }),
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ArrowUp: () => handleSelectAboveBelow(this.editor, "above", this.name),
+      ArrowDown: () => handleSelectAboveBelow(this.editor, "below", this.name),
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "table",
+      },
+    ];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const tableData = node.attrs.data || [[]];
+    const tableRows = [];
+
+    // Generate the rows with td elements
+    for (let i = 0; i < tableData.length; i++) {
+      const cells = tableData[i];
+      const tableCells = cells.map((cell: string) => [
+        i === 0 ? "th" : "td",
+        { contenteditable: true },
+        cell,
+      ]);
+      tableRows.push(["tr", ...tableCells]);
+    }
+
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        class: styles.blockContent,
+        "data-content-type": this.name,
+      }),
+      ["table", ...tableRows],
+    ];
+  },
+});

From 6f73c562d48ecb7c394d53e9b1562bf66ba9abf3 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Sat, 29 Jul 2023 17:37:21 -0500
Subject: [PATCH 40/48] add missing conversions to markdown for tables and
 separators

---
 .../formatConversions/notePlanConversions.ts  | 51 +++++++++++++++----
 .../extensions/Blocks/api/defaultBlocks.ts    |  6 +--
 .../extensions/Blocks/nodes/Block.module.css  |  4 +-
 .../CheckListItemBlockContent.ts              |  6 +--
 .../TaskListItemBlockContent.ts               |  5 +-
 5 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index b77e1d506f..d198bec788 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -736,16 +736,43 @@ export function parseNoteToBlocks(
 }
 
 function serializeTaskStates(prop: Props<PropSchema>): string {
-  if (prop.checked === "true") {
-    return "[x]";
-  } else if (prop.cancelled === "true") {
-    return "[-]";
-  } else if (prop.scheduled === "true") {
-    return "[>]";
+  if (prop.checked === true) {
+    return " [x]";
+  } else if (prop.cancelled === true) {
+    return " [-]";
+  } else if (prop.scheduled === true) {
+    return " [>]";
   } else {
-    return "[ ]";
+    return ""; // alternative: "[ ]", however, in NotePlan this is valid markdown without
   }
 }
+// Create a markdown table from the data arryay. The first row is the header and the second should be a line like | --- | --- | --- |
+function serializeTableData(data: any[]): string {
+  let table = "";
+  const dataLength = data.length;
+  for (let i = 0; i < dataLength; ++i) {
+    let row = data[i];
+    const rowLength = row.length;
+    for (let j = 0; j < rowLength; ++j) {
+      table += "|" + row[j];
+    }
+    table += "|\n";
+    if (i === 0) {
+      for (let j = 0; j < rowLength; ++j) {
+        table += "|";
+        if (row[j].length === 0) {
+          table += "-";
+        } else {
+          for (let k = 0; k < row[j].length; ++k) {
+            table += "-";
+          }
+        }
+      }
+      table += "|\n";
+    }
+  }
+  return table;
+}
 
 function serializeBlockContent(content: InlineContent[]): string {
   let text = "";
@@ -808,10 +835,16 @@ export function serializeBlock(
       text += "1. ";
       break;
     case "taskListItem":
-      text += "* " + serializeTaskStates(block.props || {}) + " ";
+      text += "*" + serializeTaskStates(block.props || {}) + " ";
       break;
     case "checkListItem":
-      text += "+ " + serializeTaskStates(block.props || {}) + " ";
+      text += "+" + serializeTaskStates(block.props || {}) + " ";
+      break;
+    case "tableBlockItem":
+      text += serializeTableData(block.props?.data || []);
+      break;
+    case "separator":
+      text += "---";
       break;
     case "paragraph":
       break;
diff --git a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
index 884687d95a..1d081dc18a 100644
--- a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
+++ b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
@@ -26,13 +26,13 @@ export type DefaultProps = typeof defaultProps;
 
 const taskAndCheckProps = {
   checked: {
-    default: "false" as const,
+    default: false,
   },
   cancelled: {
-    default: "false" as const,
+    default: false,
   },
   scheduled: {
-    default: "false" as const,
+    default: false,
   },
 } satisfies PropSchema;
 
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 56f93155ea..0824c55dc9 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -602,7 +602,7 @@ a[data-datelink] {
 /* TABLE */
 
 [data-content-type="tableBlockItem"] {
-  border-width: 2px;
+  border-width: 1.5px;
   border-color: #e2e8f0;
   border-style: solid;
   text-align: left;
@@ -623,7 +623,7 @@ a[data-datelink] {
 
 [data-content-type="tableBlockItem"] table th,
 td {
-  border-width: 2px;
+  border-width: 1.5px;
   border-color: #e2e8f0;
   border-style: solid;
   padding: 0.5rem;
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts
index d2e189d4f5..da63e44124 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent.ts
@@ -20,9 +20,9 @@ export const CheckListItemBlockContent = createTipTapBlock<"checkListItem">({
             .BNUpdateBlock(state.selection.from, {
               type: this.name,
               props: {
-                checked: "false",
-                canceled: "false",
-                scheduled: "false",
+                checked: false,
+                canceled: false,
+                scheduled: false,
               },
             })
             // Removes the "*" character used to set the list.
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts
index f9c6d8fe12..62a7df11fa 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent.ts
@@ -20,8 +20,9 @@ export const TaskListItemBlockContent = createTipTapBlock<"taskListItem">({
             .BNUpdateBlock(state.selection.from, {
               type: this.name,
               props: {
-                checked: "false",
-                canceled: "false",
+                checked: false,
+                canceled: false,
+                scheduled: false,
               },
             })
             // Removes the "*" character used to set the list.

From 3f8a021d7e9c2453db4a7146ca97b24aa60e2d4f Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Mon, 31 Jul 2023 10:50:06 -0500
Subject: [PATCH 41/48] Add table experiments with documentation of how to
 continue, enable dark mode for testing

---
 examples/editor/src/App.tsx                   |  4 +-
 examples/editor/src/index.css                 | 12 ++++
 .../extensions/Blocks/nodes/Block.module.css  |  4 +-
 .../TableBlockContent/TableBlockContent.ts    | 71 ++++++++++++++++++-
 .../TableBlockContentCell.ts                  | 36 ++++++++++
 5 files changed, 123 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContentCell.ts

diff --git a/examples/editor/src/App.tsx b/examples/editor/src/App.tsx
index adb771f18e..90ee509768 100644
--- a/examples/editor/src/App.tsx
+++ b/examples/editor/src/App.tsx
@@ -45,7 +45,9 @@ function App() {
       class: styles.editor,
       "data-test": "editor",
     },
-    theme: "light",
+    theme: window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light",
   });
 
   useEffect(() => {
diff --git a/examples/editor/src/index.css b/examples/editor/src/index.css
index 06f062d46b..79073af3ae 100644
--- a/examples/editor/src/index.css
+++ b/examples/editor/src/index.css
@@ -3,3 +3,15 @@ body,
 #root {
   height: 100%;
 }
+
+body {
+  background-color: white;
+}
+
+/* Check if system is in dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1f1f1f;
+    color: #cfcfcf;
+  }
+}
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 0824c55dc9..3dd47e2c96 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -603,7 +603,7 @@ a[data-datelink] {
 
 [data-content-type="tableBlockItem"] {
   border-width: 1.5px;
-  border-color: #e2e8f0;
+  border-color: #8e8e8e44;
   border-style: solid;
   text-align: left;
   border-radius: 10px;
@@ -624,7 +624,7 @@ a[data-datelink] {
 [data-content-type="tableBlockItem"] table th,
 td {
   border-width: 1.5px;
-  border-color: #e2e8f0;
+  border-color: #8e8e8e44;
   border-style: solid;
   padding: 0.5rem;
   text-align: left;
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts
index c851e1a49e..c48c066a49 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContent.ts
@@ -1,4 +1,5 @@
 import { InputRule, mergeAttributes } from "@tiptap/core";
+
 import { createTipTapBlock } from "../../../api/block";
 import styles from "../../Block.module.css";
 import { handleSelectAboveBelow } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
@@ -37,12 +38,29 @@ export const TableBlockContent = createTipTapBlock<"tableBlockItem">({
                 ),
               },
             })
-            // Removes the "#" character(s) used to set the heading.
+            // Removes the "=== " character(s) used to set the table.
             .deleteRange({ from: range.from, to: range.to })
             .insertContentAt(range.to + 1, {
               type: "paragraph",
               props: {},
             });
+
+          // WIP: We need to create the table instead as a node and then add the table cells individually also as block items
+          // Otherwise, we can't get the content of the cells as the user types them into the table into the node
+          // To do this, we need to use NoteType.createChecked(null, cells), do this also with rows.
+          // See: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/src/utilities/createTable.ts
+
+          // Current issue with this: It creates the table node as a child of a paragraph
+          //   const node = this.type.createChecked(null);
+
+          //   // Add this node to the documen
+          //   const tr = state.tr;
+          //   //   tr.deleteRange(range.from, range.to);
+          //   tr.insert(range.from, node);
+          //   const newState = state.apply(tr);
+
+          //   // Update the editor with the new state.
+          //   this.editor.view.updateState(newState);
         },
       }),
     ];
@@ -52,6 +70,22 @@ export const TableBlockContent = createTipTapBlock<"tableBlockItem">({
     return {
       ArrowUp: () => handleSelectAboveBelow(this.editor, "above", this.name),
       ArrowDown: () => handleSelectAboveBelow(this.editor, "below", this.name),
+      //   Tab: () => {
+      //     if (this.editor.commands.goToNextCell()) {
+      //       return true
+      //     }
+
+      //     if (!this.editor.can().addRowAfter()) {
+      //       return false
+      //     }
+
+      //     return this.editor.chain().addRowAfter().goToNextCell().run()
+      //   },
+      //   'Shift-Tab': () => this.editor.commands.goToPreviousCell(),
+      //   Backspace: deleteTableWhenAllCellsSelected,
+      //   'Mod-Backspace': deleteTableWhenAllCellsSelected,
+      //   Delete: deleteTableWhenAllCellsSelected,
+      //   'Mod-Delete': deleteTableWhenAllCellsSelected,
     };
   },
 
@@ -87,4 +121,39 @@ export const TableBlockContent = createTipTapBlock<"tableBlockItem">({
       ["table", ...tableRows],
     ];
   },
+
+  //    Set the data prop here after the user changes the table
+  //    This is another approach that doesn't quite work. We are able to get the data.
+  //    But we are not able to find the node to add it:
+  //   addProseMirrorPlugins() {
+  //     return [
+  //       new Plugin({
+  //         props: {
+  //           handleDOMEvents: {
+  //             input(view, event) {
+  //               // As the user types into the table cells, get the content
+  //               const tableData = [];
+  //               const tableRows = view.dom.querySelectorAll("tr");
+
+  //               for (let i = 0; i < tableRows.length; i++) {
+  //                 const row = tableRows[i];
+  //                 const rowData = [];
+  //                 const cells = row.querySelectorAll("td, th");
+  //                 for (let j = 0; j < cells.length; j++) {
+  //                   const cell = cells[j];
+  //                   rowData.push(cell.textContent);
+  //                 }
+  //                 tableData.push(rowData);
+  //               }
+
+  //               // How to access the current node
+  //               console.log(view.state.selection.$from.nodeBefore);
+
+  //               //   this.props.attributes.data = tableData;
+  //             },
+  //           },
+  //         },
+  //       }),
+  //     ];
+  //   },
 });
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContentCell.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContentCell.ts
new file mode 100644
index 0000000000..a6778ec786
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/TableBlockContent/TableBlockContentCell.ts
@@ -0,0 +1,36 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+// WIP: This is work in progress, when we create a table, we need to add this as a cell. Also, rows are still missing.
+// See: https://tiptap.dev/api/nodes/table#allow-table-node-selection
+// See: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/src/table-cell.ts
+
+export interface TableCellOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+export const TableCell = Node.create<TableCellOptions>({
+  name: "tableCell",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "block+",
+  tableRole: "cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "td" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+});

From 2507800eb46cf99d85be41d69599df0f32649577 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Mon, 31 Jul 2023 13:20:43 -0500
Subject: [PATCH 42/48] add highlighted, strikethrough and underlined

---
 packages/core/src/BlockNoteEditor.ts          |  9 +-
 packages/core/src/BlockNoteExtensions.ts      | 10 +-
 .../formatConversions/notePlanConversions.ts  | 26 +++--
 .../api/nodeConversions/nodeConversions.ts    |  5 +-
 .../Blocks/api/inlineContentTypes.ts          |  6 +-
 .../extensions/Blocks/inline/highlighted.ts   | 96 +++++++++++++++++++
 .../extensions/Blocks/inline/strikethrough.ts | 96 +++++++++++++++++++
 .../extensions/Blocks/inline/underlined.ts    | 96 +++++++++++++++++++
 .../extensions/Blocks/nodes/Block.module.css  | 30 ++++++
 .../DefaultButtons/ToggledStyleButton.tsx     |  9 +-
 10 files changed, 360 insertions(+), 23 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/inline/highlighted.ts
 create mode 100644 packages/core/src/extensions/Blocks/inline/strikethrough.ts
 create mode 100644 packages/core/src/extensions/Blocks/inline/underlined.ts

diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts
index 7934730219..b21fa4b2de 100644
--- a/packages/core/src/BlockNoteEditor.ts
+++ b/packages/core/src/BlockNoteEditor.ts
@@ -537,7 +537,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       "bold",
       "italic",
       "underline",
-      "strike",
+      "strikethrough",
+      "highlighted",
       "code",
     ]);
     const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
@@ -562,7 +563,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       "bold",
       "italic",
       "underline",
-      "strike",
+      "strikethrough",
+      "highlighted",
       "code",
     ]);
     const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
@@ -599,7 +601,8 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       "bold",
       "italic",
       "underline",
-      "strike",
+      "strikethrough",
+      "highlighted",
       "code",
     ]);
     const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
diff --git a/packages/core/src/BlockNoteExtensions.ts b/packages/core/src/BlockNoteExtensions.ts
index 217670a32a..425ce0efd2 100644
--- a/packages/core/src/BlockNoteExtensions.ts
+++ b/packages/core/src/BlockNoteExtensions.ts
@@ -2,6 +2,8 @@ import { Extensions, extensions } from "@tiptap/core";
 
 import { BlockNoteEditor } from "./BlockNoteEditor";
 
+import { Strikethrough } from "./extensions/Blocks/inline/strikethrough";
+import { Highlighted } from "./extensions/Blocks/inline/highlighted";
 import { Bold } from "@tiptap/extension-bold";
 import { Code } from "@tiptap/extension-code";
 import { Hashtag } from "./extensions/Blocks/inline/hashtags";
@@ -15,9 +17,8 @@ import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Italic } from "@tiptap/extension-italic";
 import { Link } from "@tiptap/extension-link";
-import { Strike } from "@tiptap/extension-strike";
 import { Text } from "@tiptap/extension-text";
-import { Underline } from "@tiptap/extension-underline";
+import { Underlined } from "./extensions/Blocks/inline/underlined";
 import * as Y from "yjs";
 import styles from "./editor.module.css";
 import { BackgroundColorExtension } from "./extensions/BackgroundColor/BackgroundColorExtension";
@@ -98,10 +99,11 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
 
     // marks:
     Bold,
+    Highlighted,
+    Strikethrough,
     Code,
     Italic,
-    Strike,
-    Underline,
+    Underlined,
     Hashtag,
     WikiLink,
     DateLink,
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index d198bec788..f3ad1f0afe 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -124,11 +124,16 @@ function createInlineContent(text: string): PartialInlineContent[] {
   });
   // strikethrough
   lexer.rule(/~~(.*?)~~/, (ctx, match) => {
-    ctx.accept("strike", match[1]);
+    ctx.accept("strikethrough", match[1]);
   });
+  // underlined
+  lexer.rule(/~(.*?)~/, (ctx, match) => {
+    ctx.accept("underlined", match[1]);
+  });
+
   // highlight
   lexer.rule(/==(.*?)==/, (ctx, match) => {
-    ctx.accept("highlight", match[1]);
+    ctx.accept("highlighted", match[1]);
   });
   // plain text
   let plaintext = "";
@@ -174,18 +179,25 @@ function createInlineContent(text: string): PartialInlineContent[] {
           styles: { italic: true },
         });
         break;
-      case "strike":
+      case "strikethrough":
+        inlineContent.push({
+          type: "text",
+          text: token.value,
+          styles: { strikethrough: true },
+        });
+        break;
+      case "underlined":
         inlineContent.push({
           type: "text",
           text: token.value,
-          styles: { strike: true },
+          styles: { underlined: true },
         });
         break;
-      case "highlight":
+      case "highlighted":
         inlineContent.push({
           type: "text",
           text: token.value,
-          styles: { backgroundColor: "highlight-color" },
+          styles: { highlighted: true },
         });
         break;
       case "code":
@@ -786,7 +798,7 @@ function serializeBlockContent(content: InlineContent[]): string {
           text += "**" + contentItem.text + "**";
         } else if (contentItem.styles.italic) {
           text += "*" + contentItem.text + "*";
-        } else if (contentItem.styles.strike) {
+        } else if (contentItem.styles.strikethrough) {
           text += "~~" + contentItem.text + "~~";
         } else if (contentItem.styles.highlighted) {
           text += "==" + contentItem.text + "==";
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index 95f9b7287d..9d19c53ed8 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -23,12 +23,13 @@ import { UnreachableCaseError } from "../../shared/utils";
 const toggleStyles = new Set<ToggledStyle>([
   "bold",
   "italic",
-  "underline",
-  "strike",
+  "underlined",
+  "strikethrough",
   "code",
   "hashtag",
   "wikilink",
   "datelink",
+  "highlighted",
 ]);
 const colorStyles = new Set<ColorStyle>(["textColor", "backgroundColor"]);
 
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index 4b0d54c79b..5386ad2441 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -2,12 +2,12 @@ export type Styles = {
   bold?: true;
   italic?: true;
   underline?: true;
-  strike?: true;
+  strikethrough?: true;
   code?: true;
   textColor?: string;
   backgroundColor?: string;
-  highlighted?: string;
-  underlined?: string;
+  highlighted?: true;
+  underlined?: true;
   hashtag?: true;
   wikilink?: true;
   datelink?: true;
diff --git a/packages/core/src/extensions/Blocks/inline/highlighted.ts b/packages/core/src/extensions/Blocks/inline/highlighted.ts
new file mode 100644
index 0000000000..b14d5f447a
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/highlighted.ts
@@ -0,0 +1,96 @@
+import {
+  Mark,
+  markInputRule,
+  markPasteRule,
+  mergeAttributes,
+} from "@tiptap/core";
+
+export interface BoldOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    highlighted: {
+      /**
+       * Set a highlighted mark
+       */
+      setHighlighted: () => ReturnType;
+      /**
+       * Toggle a highlighted mark
+       */
+      toggleHighlighted: () => ReturnType;
+      /**
+       * Unset a highlighted mark
+       */
+      unsetHighlighted: () => ReturnType;
+    };
+  }
+}
+
+export const highlightedInputRegex = /(?:^|\s)((?:==)((?:[^=`]+))(?:==))$/;
+export const highlightedPasteRegex = /(?:^|\s)((?:==)((?:[^=`]+))(?:==))/g;
+
+export const Highlighted = Mark.create({
+  name: "highlighted",
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  parseHTML() {
+    return [{ tag: "mark" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "mark",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setHighlighted:
+        () =>
+        ({ commands }) => {
+          return commands.setMark(this.name);
+        },
+      toggleHighlighted:
+        () =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name);
+        },
+      unsetHighlighted:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-M": () => this.editor.commands.toggleHighlighted(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: highlightedInputRegex,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: highlightedPasteRegex,
+        type: this.type,
+      }),
+    ];
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/inline/strikethrough.ts b/packages/core/src/extensions/Blocks/inline/strikethrough.ts
new file mode 100644
index 0000000000..098ba8bc62
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/strikethrough.ts
@@ -0,0 +1,96 @@
+import {
+  Mark,
+  markInputRule,
+  markPasteRule,
+  mergeAttributes,
+} from "@tiptap/core";
+
+export interface BoldOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    strikethrough: {
+      /**
+       * Set a strikethrough mark
+       */
+      setStrikethrough: () => ReturnType;
+      /**
+       * Toggle a strikethrough mark
+       */
+      toggleStrikethrough: () => ReturnType;
+      /**
+       * Unset a strikethrough mark
+       */
+      unsetStrikethrough: () => ReturnType;
+    };
+  }
+}
+
+export const strikethroughInputRegex = /(?:^|\s)((?:~~)((?:[^~`]+))(?:~~))$/;
+export const strikethroughPasteRegex = /(?:^|\s)((?:~~)((?:[^~`]+))(?:~~))/g;
+
+export const Strikethrough = Mark.create({
+  name: "strikethrough",
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  parseHTML() {
+    return [{ tag: "del" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "del",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setStrikethrough:
+        () =>
+        ({ commands }) => {
+          return commands.setMark(this.name);
+        },
+      toggleStrikethrough:
+        () =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name);
+        },
+      unsetStrikethrough:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-S": () => this.editor.commands.toggleStrikethrough(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: strikethroughInputRegex,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: strikethroughPasteRegex,
+        type: this.type,
+      }),
+    ];
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/inline/underlined.ts b/packages/core/src/extensions/Blocks/inline/underlined.ts
new file mode 100644
index 0000000000..dc48c34534
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/underlined.ts
@@ -0,0 +1,96 @@
+import {
+  Mark,
+  markInputRule,
+  markPasteRule,
+  mergeAttributes,
+} from "@tiptap/core";
+
+export interface BoldOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    underlined: {
+      /**
+       * Set a underlined mark
+       */
+      setUnderlined: () => ReturnType;
+      /**
+       * Toggle a underlined mark
+       */
+      toggleUnderlined: () => ReturnType;
+      /**
+       * Unset a underlined mark
+       */
+      unsetUnderlined: () => ReturnType;
+    };
+  }
+}
+
+export const underlinedInputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/;
+export const underlinedPasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/g;
+
+export const Underlined = Mark.create({
+  name: "underlined",
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  parseHTML() {
+    return [{ tag: "u" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "u",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setUnderlined:
+        () =>
+        ({ commands }) => {
+          return commands.setMark(this.name);
+        },
+      toggleUnderlined:
+        () =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name);
+        },
+      unsetUnderlined:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-U": () => this.editor.commands.toggleUnderlined(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: underlinedInputRegex,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: underlinedPasteRegex,
+        type: this.type,
+      }),
+    ];
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 3dd47e2c96..0980eee20b 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -654,3 +654,33 @@ td {
 [data-content-type="tableBlockItem"] tr td:last-child {
   border-right: none;
 }
+
+/* HIGHLIGHTED */
+
+.blockContent mark {
+  background-color: #84ff0066;
+  border-radius: 6px;
+  padding: 1px 3px;
+}
+
+del {
+  opacity: 0.8;
+  text-decoration: line-through;
+  text-decoration-color: #333333;
+}
+
+u {
+  text-decoration: underline;
+  text-decoration-color: #ffcc66;
+  text-decoration-thickness: 2px;
+}
+
+@media (prefers-color-scheme: dark) {
+  mark {
+    background-color: #5ccfe677;
+  }
+
+  del {
+    text-decoration-color: #ccccc6;
+  }
+}
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
index ee0f9b0672..bff67ee445 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
@@ -15,8 +15,8 @@ import { IconType } from "react-icons";
 const shortcuts: Record<ToggledStyle, string> = {
   bold: "Mod+B",
   italic: "Mod+I",
-  underline: "Mod+U",
-  strike: "Mod+Shift+X",
+  underlined: "Mod+U",
+  strikethrough: "Mod+Shift+X",
   code: "",
   hashtag: "",
   wikilink: "",
@@ -26,8 +26,9 @@ const shortcuts: Record<ToggledStyle, string> = {
 const icons: Record<ToggledStyle, IconType> = {
   bold: RiBold,
   italic: RiItalic,
-  underline: RiUnderline,
-  strike: RiStrikethrough,
+  underlined: RiUnderline,
+  strikethrough: RiStrikethrough,
+  highlighted: RiCodeFill,
   code: RiCodeFill,
   hashtag: RiHashtag,
   wikilink: RiLink,

From a0b8f39bd3cad88d722a7939fa8ab1d0982eafd0 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Mon, 31 Jul 2023 13:25:54 -0500
Subject: [PATCH 43/48] fix errors

---
 .../components/DefaultButtons/ToggledStyleButton.tsx       | 1 +
 .../src/FormattingToolbar/components/FormattingToolbar.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
index bff67ee445..30d93650ea 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
@@ -17,6 +17,7 @@ const shortcuts: Record<ToggledStyle, string> = {
   italic: "Mod+I",
   underlined: "Mod+U",
   strikethrough: "Mod+Shift+X",
+  highlighted: "Mod+Shift+H",
   code: "",
   hashtag: "",
   wikilink: "",
diff --git a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx
index 85b3650d0b..b47b2305e0 100644
--- a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx
+++ b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx
@@ -19,8 +19,11 @@ export const FormattingToolbar = <BSchema extends BlockSchema>(props: {
 
       <ToggledStyleButton editor={props.editor} toggledStyle={"bold"} />
       <ToggledStyleButton editor={props.editor} toggledStyle={"italic"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"underline"} />
-      <ToggledStyleButton editor={props.editor} toggledStyle={"strike"} />
+      <ToggledStyleButton editor={props.editor} toggledStyle={"underlined"} />
+      <ToggledStyleButton
+        editor={props.editor}
+        toggledStyle={"strikethrough"}
+      />
 
       <TextAlignButton editor={props.editor as any} textAlignment={"left"} />
       <TextAlignButton editor={props.editor as any} textAlignment={"center"} />

From f158ab6ed28f7a78b515f8a72f7e44f52d6d27b1 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Mon, 31 Jul 2023 16:40:56 -0500
Subject: [PATCH 44/48] add inline images and fix tab conversion

---
 packages/core/src/BlockNoteEditor.ts          |  6 +-
 packages/core/src/BlockNoteExtensions.ts      |  2 +
 .../formatConversions/notePlanConversions.ts  | 26 ++++++---
 .../api/nodeConversions/nodeConversions.ts    |  1 +
 .../Blocks/api/inlineContentTypes.ts          |  2 +-
 .../src/extensions/Blocks/inline/datelink.ts  |  2 +-
 .../src/extensions/Blocks/inline/hashtags.ts  |  2 +-
 .../extensions/Blocks/inline/inlineImage.ts   | 56 +++++++++++++++++++
 8 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/inline/inlineImage.ts

diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts
index b21fa4b2de..449ff5895a 100644
--- a/packages/core/src/BlockNoteEditor.ts
+++ b/packages/core/src/BlockNoteEditor.ts
@@ -536,7 +536,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     const toggleStyles = new Set<ToggledStyle>([
       "bold",
       "italic",
-      "underline",
+      "underlined",
       "strikethrough",
       "highlighted",
       "code",
@@ -562,7 +562,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     const toggleStyles = new Set<ToggledStyle>([
       "bold",
       "italic",
-      "underline",
+      "underlined",
       "strikethrough",
       "highlighted",
       "code",
@@ -600,7 +600,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     const toggleStyles = new Set<ToggledStyle>([
       "bold",
       "italic",
-      "underline",
+      "underlined",
       "strikethrough",
       "highlighted",
       "code",
diff --git a/packages/core/src/BlockNoteExtensions.ts b/packages/core/src/BlockNoteExtensions.ts
index 425ce0efd2..0a161131da 100644
--- a/packages/core/src/BlockNoteExtensions.ts
+++ b/packages/core/src/BlockNoteExtensions.ts
@@ -2,6 +2,7 @@ import { Extensions, extensions } from "@tiptap/core";
 
 import { BlockNoteEditor } from "./BlockNoteEditor";
 
+import { InlineImage } from "./extensions/Blocks/inline/inlineImage";
 import { Strikethrough } from "./extensions/Blocks/inline/strikethrough";
 import { Highlighted } from "./extensions/Blocks/inline/highlighted";
 import { Bold } from "@tiptap/extension-bold";
@@ -98,6 +99,7 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
     Text,
 
     // marks:
+    InlineImage,
     Bold,
     Highlighted,
     Strikethrough,
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index f3ad1f0afe..a9d9278e22 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -216,9 +216,10 @@ function createInlineContent(text: string): PartialInlineContent[] {
         break;
       case "image-link":
         inlineContent.push({
-          type: "link",
-          href: token.value,
-          content: "image",
+          type: "text",
+          text: "image",
+          styles: { inlineImage: true },
+          attr: { src: token.value },
         });
         break;
       case "link":
@@ -229,9 +230,10 @@ function createInlineContent(text: string): PartialInlineContent[] {
         });
         break;
       case "named-link":
+        console.log("it's a named link " + token.value);
         inlineContent.push({
           type: "link",
-          href: token.value.link,
+          href: token.value.href,
           content: token.value.name,
         });
         break;
@@ -423,12 +425,17 @@ function parseListWithIcon(
   }
 
   let substring = line.substring(matches[0].length);
+  // First replace 4 whitespaces with tabs and then remove anything that's not a tab
+  let leadingWhitespace = matches[1]
+    .replace(/ {4}/g, "\t")
+    .replace(/[^\t ]/g, "");
 
-  let leadingWhitespace = matches[1].length;
-  let level = 0;
-  if (leadingWhitespace > 1) {
-    level = Math.floor(leadingWhitespace / 2);
-  }
+  // Count the number of tabs in the leadingWhitespace string.
+  let tabsCount = leadingWhitespace
+    ? leadingWhitespace.split("\t").length - 1
+    : 0;
+
+  let level = tabsCount;
 
   let block = createBlock(type, substring, {
     ...props,
@@ -621,6 +628,7 @@ const parseFunctions = [
   parseHeader4,
   parseQuote,
   parseSeparator,
+  // parseImage,
   parseToDoHyphen,
   parseToDoHyphenComplete,
   parseToDoHyphenCancelled,
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index 9d19c53ed8..e42b3cb1d1 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -28,6 +28,7 @@ const toggleStyles = new Set<ToggledStyle>([
   "code",
   "hashtag",
   "wikilink",
+  "inlineImage",
   "datelink",
   "highlighted",
 ]);
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index 5386ad2441..30a6e0e6f1 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -1,8 +1,8 @@
 export type Styles = {
   bold?: true;
   italic?: true;
-  underline?: true;
   strikethrough?: true;
+  inlineImage?: true;
   code?: true;
   textColor?: string;
   backgroundColor?: string;
diff --git a/packages/core/src/extensions/Blocks/inline/datelink.ts b/packages/core/src/extensions/Blocks/inline/datelink.ts
index 2cfd52fc40..eb4210fe87 100644
--- a/packages/core/src/extensions/Blocks/inline/datelink.ts
+++ b/packages/core/src/extensions/Blocks/inline/datelink.ts
@@ -7,7 +7,7 @@ export const DateLink = createLinkMark({
   dataAttr: "data-datelink",
   hrefPrefix: "date",
   attrsMap: {
-    wikilink: 0,
+    datelink: 0,
     href: 1,
   },
 });
diff --git a/packages/core/src/extensions/Blocks/inline/hashtags.ts b/packages/core/src/extensions/Blocks/inline/hashtags.ts
index b83a14dd9a..5302308cf5 100644
--- a/packages/core/src/extensions/Blocks/inline/hashtags.ts
+++ b/packages/core/src/extensions/Blocks/inline/hashtags.ts
@@ -6,7 +6,7 @@ export const Hashtag = createLinkMark({
   dataAttr: "data-hashtag",
   hrefPrefix: undefined,
   attrsMap: {
-    wikilink: 0,
+    hashtag: 0,
     href: 0,
   },
 });
diff --git a/packages/core/src/extensions/Blocks/inline/inlineImage.ts b/packages/core/src/extensions/Blocks/inline/inlineImage.ts
new file mode 100644
index 0000000000..c75d03700f
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/inlineImage.ts
@@ -0,0 +1,56 @@
+import { Mark } from "@tiptap/core";
+
+export const InlineImage = Mark.create({
+  name: "inlineImage",
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("src"),
+        renderHTML: (attributes) => ({
+          src: attributes.src,
+        }),
+      },
+    };
+  },
+
+  //   addInputRules() {
+  //     return [
+
+  //     ];
+  //   },
+
+  parseHTML() {
+    return [
+      {
+        tag: "img",
+        getAttrs: (element: HTMLElement | string) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-inline-image") === this.name) {
+            return {
+              src: element.getAttribute("src") || null,
+            };
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "img",
+      {
+        ...HTMLAttributes,
+        src: HTMLAttributes.src,
+        "data-inline-image": this.name,
+      },
+      0,
+    ];
+  },
+});

From 9bf2572ee50623c2adee855141e6ac0264c816b1 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Mon, 31 Jul 2023 17:35:16 -0500
Subject: [PATCH 45/48] Add inline files, but to convert them back to markdown
 we somehow need to pass on the url, not sure how yet

---
 packages/core/src/BlockNoteExtensions.ts      |  2 +
 .../formatConversions/notePlanConversions.ts  | 16 +++--
 .../api/nodeConversions/nodeConversions.ts    |  1 +
 .../Blocks/api/inlineContentTypes.ts          |  1 +
 .../extensions/Blocks/inline/inlineFile.ts    | 62 +++++++++++++++++++
 .../extensions/Blocks/nodes/Block.module.css  | 43 +++++++++++++
 .../DefaultButtons/ToggledStyleButton.tsx     |  4 ++
 7 files changed, 125 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/src/extensions/Blocks/inline/inlineFile.ts

diff --git a/packages/core/src/BlockNoteExtensions.ts b/packages/core/src/BlockNoteExtensions.ts
index 0a161131da..e2f998cb3d 100644
--- a/packages/core/src/BlockNoteExtensions.ts
+++ b/packages/core/src/BlockNoteExtensions.ts
@@ -3,6 +3,7 @@ import { Extensions, extensions } from "@tiptap/core";
 import { BlockNoteEditor } from "./BlockNoteEditor";
 
 import { InlineImage } from "./extensions/Blocks/inline/inlineImage";
+import { InlineFile } from "./extensions/Blocks/inline/inlineFile";
 import { Strikethrough } from "./extensions/Blocks/inline/strikethrough";
 import { Highlighted } from "./extensions/Blocks/inline/highlighted";
 import { Bold } from "@tiptap/extension-bold";
@@ -100,6 +101,7 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
 
     // marks:
     InlineImage,
+    InlineFile,
     Bold,
     Highlighted,
     Strikethrough,
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index a9d9278e22..dd6b55b613 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -208,10 +208,13 @@ function createInlineContent(text: string): PartialInlineContent[] {
         });
         break;
       case "file-link":
+        let hrefParts = token.value.split("/");
+
         inlineContent.push({
-          type: "link",
-          href: token.value,
-          content: "file",
+          type: "text",
+          text: hrefParts[hrefParts.length - 1],
+          styles: { inlineFile: true },
+          attr: { href: token.value },
         });
         break;
       case "image-link":
@@ -628,7 +631,6 @@ const parseFunctions = [
   parseHeader4,
   parseQuote,
   parseSeparator,
-  // parseImage,
   parseToDoHyphen,
   parseToDoHyphenComplete,
   parseToDoHyphenCancelled,
@@ -814,6 +816,12 @@ function serializeBlockContent(content: InlineContent[]): string {
           text += "~" + contentItem.text + "~";
         } else if (contentItem.styles.code) {
           text += "`" + contentItem.text + "`";
+        } else if (contentItem.styles.inlineFile) {
+          // TODO: We have to add the attributes from the inline element somehow
+          // text += "![file](" + contentItem.attr?.href + ")";
+        } else if (contentItem.styles.inlineImage) {
+          // TODO: We have to add the attributes from the inline element somehow
+          // text += "![image](" + contentItem.attr?.src + ")";
         } else {
           text += contentItem.text;
         }
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index e42b3cb1d1..100b9c6087 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -29,6 +29,7 @@ const toggleStyles = new Set<ToggledStyle>([
   "hashtag",
   "wikilink",
   "inlineImage",
+  "inlineFile",
   "datelink",
   "highlighted",
 ]);
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index 30a6e0e6f1..c358d59ae2 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -3,6 +3,7 @@ export type Styles = {
   italic?: true;
   strikethrough?: true;
   inlineImage?: true;
+  inlineFile?: true;
   code?: true;
   textColor?: string;
   backgroundColor?: string;
diff --git a/packages/core/src/extensions/Blocks/inline/inlineFile.ts b/packages/core/src/extensions/Blocks/inline/inlineFile.ts
new file mode 100644
index 0000000000..6c11b1c5a8
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/inline/inlineFile.ts
@@ -0,0 +1,62 @@
+import { Mark } from "@tiptap/core";
+
+export const InlineFile = Mark.create({
+  name: "inlineFile",
+  selectable: true,
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("href"),
+        renderHTML: (attributes) => ({
+          href: attributes.href,
+        }),
+      },
+    };
+  },
+
+  //   addInputRules() {
+  //     return [
+
+  //     ];
+  //   },
+
+  parseHTML() {
+    return [
+      {
+        tag: "a",
+        getAttrs: (element: HTMLElement | string) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-content-type") === this.name) {
+            return {
+              href: element.getAttribute("href") || null,
+            };
+          }
+
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      { "data-content-type": this.name },
+      [
+        "a",
+        {
+          ...HTMLAttributes,
+          href: HTMLAttributes.href,
+          target: "_blank",
+        },
+        ["i", { class: "far fa-paperclip" }],
+        ["span", 0],
+      ],
+    ];
+  },
+});
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index 0980eee20b..d736e29725 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -684,3 +684,46 @@ u {
     text-decoration-color: #ccccc6;
   }
 }
+
+/* ATTACHMENTS */
+[data-content-type="inlineFile"] {
+  display: inline-block;
+}
+
+/* .note-attachment-disabled {
+  @apply text-gray-700 dark:text-gray-300;
+} */
+
+/* .note-attachment-disabled i {
+  display: none;
+} */
+
+[data-content-type="inlineFile"] a i {
+  opacity: 0.7;
+  color: #0091f8;
+}
+
+[data-content-type="inlineFile"] a {
+  color: var(--orange-noteplan);
+  text-decoration: none;
+}
+
+[data-content-type="inlineFile"] a span {
+  border-width: 2px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-radius: 0.5rem;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+/* [data-content-type="inlineFile"] a span.hasAnchor {
+  border-color: rgb(156, 192, 255);
+} */
+
+@media (prefers-color-scheme: dark) {
+  [data-content-type="inlineFile"] a span {
+    border-color: rgb(255, 255, 255, 0.2);
+  }
+}
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
index 30d93650ea..1a8aa1de0b 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
@@ -22,6 +22,8 @@ const shortcuts: Record<ToggledStyle, string> = {
   hashtag: "",
   wikilink: "",
   datelink: "",
+  inlineFile: "",
+  inlineImage: "",
 };
 
 const icons: Record<ToggledStyle, IconType> = {
@@ -34,6 +36,8 @@ const icons: Record<ToggledStyle, IconType> = {
   hashtag: RiHashtag,
   wikilink: RiLink,
   datelink: RiLink,
+  inlineFile: RiLink,
+  inlineImage: RiLink,
 };
 
 export const ToggledStyleButton = <BSchema extends BlockSchema>(props: {

From d79253e438c45c55e0c3acb87c4045cd4b7627f1 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Tue, 1 Aug 2023 18:53:01 -0500
Subject: [PATCH 46/48] addedattributes to inlineContent so we can store data
 such as the url of the image or file and then export it to markdown

---
 .../formatConversions/notePlanConversions.ts  | 35 +++++--------------
 .../api/nodeConversions/nodeConversions.ts    | 15 +++++++-
 .../Blocks/api/inlineContentTypes.ts          |  7 +++-
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index dd6b55b613..8cc872feaf 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -214,7 +214,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
           type: "text",
           text: hrefParts[hrefParts.length - 1],
           styles: { inlineFile: true },
-          attr: { href: token.value },
+          attrs: { href: token.value },
         });
         break;
       case "image-link":
@@ -222,7 +222,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
           type: "text",
           text: "image",
           styles: { inlineImage: true },
-          attr: { src: token.value },
+          attrs: { src: token.value },
         });
         break;
       case "link":
@@ -252,7 +252,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
           type: "text",
           text: token.value.name,
           styles: { hashtag: true },
-          attr: { href: token.value.href },
+          attrs: { href: token.value.href },
         });
         break;
       case "at-tag":
@@ -260,7 +260,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
           type: "text",
           text: token.value.name,
           styles: { hashtag: true },
-          attr: { href: token.value.href },
+          attrs: { href: token.value.href },
         });
         break;
       case "wiki-link":
@@ -274,7 +274,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
             type: "text",
             text: token.value.name,
             styles: { wikilink: true },
-            attr: { href: token.value.href },
+            attrs: { href: token.value.href },
           },
           {
             type: "text",
@@ -288,7 +288,7 @@ function createInlineContent(text: string): PartialInlineContent[] {
           type: "text",
           text: token.value.name,
           styles: { datelink: true },
-          attr: { href: token.value.href },
+          attrs: { href: token.value.href },
         });
     }
   });
@@ -332,13 +332,6 @@ function parseIndentedBlock(
   let substring = line.substring(matches[0].length);
   let block = createBlock(type, substring);
 
-  // TODO how to handle indeted quote blocks?
-  // let leadingWhitespace = matches[1].length;
-  // let div = document.createElement(outterType);
-  // if (leadingWhitespace > 0) {
-  //   div.style.marginLeft = (leadingWhitespace * 36).toString() + "px";
-  // }
-
   return block;
 }
 
@@ -817,26 +810,16 @@ function serializeBlockContent(content: InlineContent[]): string {
         } else if (contentItem.styles.code) {
           text += "`" + contentItem.text + "`";
         } else if (contentItem.styles.inlineFile) {
-          // TODO: We have to add the attributes from the inline element somehow
-          // text += "![file](" + contentItem.attr?.href + ")";
+          text += "![file](" + contentItem.attrs?.href + ")";
         } else if (contentItem.styles.inlineImage) {
-          // TODO: We have to add the attributes from the inline element somehow
-          // text += "![image](" + contentItem.attr?.src + ")";
+          text += "![image](" + contentItem.attrs?.src + ")";
         } else {
           text += contentItem.text;
         }
         break;
       case "link":
         const linkContent = serializeBlockContent(contentItem.content);
-        switch (linkContent) {
-          case "file":
-          case "image":
-            text += "![" + linkContent + "](" + contentItem.href + ")";
-            break;
-          default:
-            text += "[" + linkContent + "](" + contentItem.href + ")";
-            break;
-        }
+        text += "[" + linkContent + "](" + contentItem.href + ")";
         break;
     }
   }
diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts
index 100b9c6087..481adac99c 100644
--- a/packages/core/src/api/nodeConversions/nodeConversions.ts
+++ b/packages/core/src/api/nodeConversions/nodeConversions.ts
@@ -8,6 +8,7 @@ import {
 
 import { defaultProps } from "../../extensions/Blocks/api/defaultBlocks";
 import {
+  ContentAttributes,
   ColorStyle,
   InlineContent,
   PartialInlineContent,
@@ -43,7 +44,7 @@ function styledTextToNodes(styledText: StyledText, schema: Schema): Node[] {
   const marks: Mark[] = [];
   for (const [style, value] of Object.entries(styledText.styles)) {
     if (toggleStyles.has(style as ToggledStyle)) {
-      marks.push(schema.mark(style, styledText.attr));
+      marks.push(schema.mark(style, styledText.attrs));
     } else if (colorStyles.has(style as ColorStyle)) {
       marks.push(schema.mark(style, { color: value }));
     }
@@ -108,6 +109,7 @@ function styledTextArrayToNodes(
   for (const styledText of content) {
     nodes.push(...styledTextToNodes(styledText, schema));
   }
+
   return nodes;
 }
 
@@ -212,6 +214,7 @@ function contentNodeToInlineContent(contentNode: Node) {
         currentContent = {
           type: "text",
           text: "\n",
+          attrs: {},
           styles: {},
         };
       }
@@ -220,6 +223,7 @@ function contentNodeToInlineContent(contentNode: Node) {
     }
 
     const styles: Styles = {};
+    let attrs: ContentAttributes = {};
     let linkMark: Mark | undefined;
 
     for (const mark of node.marks) {
@@ -227,8 +231,10 @@ function contentNodeToInlineContent(contentNode: Node) {
         linkMark = mark;
       } else if (toggleStyles.has(mark.type.name as ToggledStyle)) {
         styles[mark.type.name as ToggledStyle] = true;
+        attrs = mark.attrs;
       } else if (colorStyles.has(mark.type.name as ColorStyle)) {
         styles[mark.type.name as ColorStyle] = mark.attrs.color;
+        attrs = mark.attrs;
       } else {
         throw Error("Mark is of an unrecognized type: " + mark.type.name);
       }
@@ -253,6 +259,7 @@ function contentNodeToInlineContent(contentNode: Node) {
               type: "text",
               text: node.textContent,
               styles,
+              attrs,
             };
           }
         } else {
@@ -266,6 +273,7 @@ function contentNodeToInlineContent(contentNode: Node) {
                 type: "text",
                 text: node.textContent,
                 styles,
+                attrs,
               },
             ],
           };
@@ -290,6 +298,7 @@ function contentNodeToInlineContent(contentNode: Node) {
                 type: "text",
                 text: node.textContent,
                 styles,
+                attrs,
               });
             }
           } else {
@@ -303,6 +312,7 @@ function contentNodeToInlineContent(contentNode: Node) {
                   type: "text",
                   text: node.textContent,
                   styles,
+                  attrs,
                 },
               ],
             };
@@ -314,6 +324,7 @@ function contentNodeToInlineContent(contentNode: Node) {
             type: "text",
             text: node.textContent,
             styles,
+            attrs,
           };
         }
       }
@@ -326,6 +337,7 @@ function contentNodeToInlineContent(contentNode: Node) {
           type: "text",
           text: node.textContent,
           styles,
+          attrs,
         };
       }
       // Node is a link.
@@ -338,6 +350,7 @@ function contentNodeToInlineContent(contentNode: Node) {
               type: "text",
               text: node.textContent,
               styles,
+              attrs,
             },
           ],
         };
diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index c358d59ae2..449b9e8898 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -14,6 +14,11 @@ export type Styles = {
   datelink?: true;
 };
 
+export type ContentAttributes = {
+  src?: string;
+  href?: string;
+};
+
 export type ToggledStyle = {
   [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
 }[keyof Styles];
@@ -26,7 +31,7 @@ export type StyledText = {
   type: "text";
   text: string;
   styles: Styles;
-  attr?: {};
+  attrs?: ContentAttributes;
 };
 
 export type Link = {

From 3c87b71cfcf1952805f69046b381c30e7e66e6e9 Mon Sep 17 00:00:00 2001
From: Eduard Metzger <eduard.metzger@googlemail.com>
Date: Wed, 2 Aug 2023 20:02:05 -0500
Subject: [PATCH 47/48] Add code fences by reusing the exsting codeblock
 extension by extending it to make it fit into BlockNote Editor

---
 examples/editor/src/main.tsx                  |   1 +
 package.json                                  |   3 +
 .../formatConversions/notePlanConversions.ts  |   7 ++
 .../extensions/Blocks/api/defaultBlocks.ts    |  29 ++++-
 .../extensions/Blocks/nodes/Block.module.css  |  16 +++
 .../CodeFenceBlockContentItem.ts              | 113 ++++++++++++++++++
 .../ListItemKeyboardShortcuts.ts              |   5 +
 7 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/extensions/Blocks/nodes/BlockContent/CodeFenceBlockContent/CodeFenceBlockContentItem.ts

diff --git a/examples/editor/src/main.tsx b/examples/editor/src/main.tsx
index 0808f1a4d8..6edff8b1ae 100644
--- a/examples/editor/src/main.tsx
+++ b/examples/editor/src/main.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
+import "highlight.js/styles/github-dark.css";
 
 window.React = React;
 
diff --git a/package.json b/package.json
index f8216a6c79..e0278d1e09 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,9 @@
     "prosemirror-model": "1.18.3"
   },
   "dependencies": {
+    "@tiptap/extension-code-block-lowlight": "^2.0.4",
+    "highlight.js": "^11.8.0",
+    "lowlight": "^2.9.0",
     "tokenizr": "^1.6.10"
   }
 }
diff --git a/packages/core/src/api/formatConversions/notePlanConversions.ts b/packages/core/src/api/formatConversions/notePlanConversions.ts
index 8cc872feaf..a292dc5555 100644
--- a/packages/core/src/api/formatConversions/notePlanConversions.ts
+++ b/packages/core/src/api/formatConversions/notePlanConversions.ts
@@ -857,6 +857,9 @@ export function serializeBlock(
     case "separator":
       text += "---";
       break;
+    case "codefence":
+      text += "```" + block.props?.language + "\n";
+      break;
     case "paragraph":
       break;
   }
@@ -864,6 +867,10 @@ export function serializeBlock(
   // serialize content array with InlineContent
   text += serializeBlockContent(block.content);
 
+  if (block.type === "codefence") {
+    text += "\n```\n";
+  }
+
   // end block with newline
   text += "\n";
   let children = block.children || [];
diff --git a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
index 1d081dc18a..e0b15e9257 100644
--- a/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
+++ b/packages/core/src/extensions/Blocks/api/defaultBlocks.ts
@@ -6,8 +6,20 @@ import { QuotListItemBlockContent } from "../nodes/BlockContent/ListItemBlockCon
 import { TaskListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/TaskListItemBlockContent";
 import { CheckListItemBlockContent } from "../nodes/BlockContent/ListItemBlockContent/TaskListItemBlockContent/CheckListItemBlockContent";
 import { ParagraphBlockContent } from "../nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent";
-import { PropSchema, TypesMatch } from "./blockTypes";
+import { PropSchema, TipTapNode, TypesMatch } from "./blockTypes";
 import { TableBlockContent } from "../nodes/BlockContent/TableBlockContent/TableBlockContent";
+import { CodeBlockLowlightBlockContent } from "../nodes/BlockContent/CodeFenceBlockContent/CodeFenceBlockContentItem";
+import { lowlight } from "lowlight";
+
+import css from "highlight.js/lib/languages/css";
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import html from "highlight.js/lib/languages/xml";
+
+lowlight.registerLanguage("html", html);
+lowlight.registerLanguage("css", css);
+lowlight.registerLanguage("js", js);
+lowlight.registerLanguage("ts", ts);
 
 export const defaultProps = {
   backgroundColor: {
@@ -42,6 +54,12 @@ const tableProps = {
   },
 } satisfies PropSchema;
 
+const codeProps = {
+  language: {
+    default: "javascript" as const,
+  },
+} satisfies PropSchema;
+
 const levelProps = {
   level: {
     default: "0" as const,
@@ -110,6 +128,15 @@ export const defaultBlockSchema = {
     },
     node: TableBlockContent,
   },
+  codefence: {
+    propSchema: {
+      ...defaultProps,
+      ...codeProps,
+    },
+    node: CodeBlockLowlightBlockContent.configure({
+      lowlight,
+    }) as TipTapNode<"codefence">,
+  },
 } as const;
 
 export type DefaultBlockSchema = TypesMatch<typeof defaultBlockSchema>;
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index d736e29725..70e8a167f6 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -727,3 +727,19 @@ u {
     border-color: rgb(255, 255, 255, 0.2);
   }
 }
+
+/* Code Blocks */
+pre {
+  background: #0d0d0d;
+  border-radius: 0.5rem;
+  color: #fff;
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+}
+
+code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/CodeFenceBlockContent/CodeFenceBlockContentItem.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/CodeFenceBlockContent/CodeFenceBlockContentItem.ts
new file mode 100644
index 0000000000..2957dc53ac
--- /dev/null
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/CodeFenceBlockContent/CodeFenceBlockContentItem.ts
@@ -0,0 +1,113 @@
+import CodeBlockLowlight, {
+  CodeBlockLowlightOptions,
+} from "@tiptap/extension-code-block-lowlight";
+
+// export const CodeFenceBlockContent = createTipTapBlock<"codefence">({
+//   name: "codefence",
+//   content: "inline*",
+
+//   addInputRules() {
+//     return [
+//       // Creates a code block when starting with "```".
+//       new InputRule({
+//         find: new RegExp(/^`{3}.*?$/),
+//         // handler: ({ state, chain, range }) => {
+//         //   chain().deleteRange({ from: range.from, to: range.to }).run();
+
+//         //   this.editor.commands.insertContent({
+//         //     type: "codeBlockLowlight",
+//         //     content: [
+//         //       {
+//         //         type: "text",
+//         //         text: "var a = b",
+//         //       },
+//         //     ],
+//         //   });
+
+//         //   this.editor.chain().focus().setCodeBlock().run();
+//         // },
+//         handler: ({ state, chain, range }) => {
+//           chain()
+//             .BNUpdateBlock(state.selection.from, {
+//               type: this.name,
+//             })
+//             // Removes the "#" character(s) used to set the heading.
+//             .deleteRange({ from: range.from, to: range.to })
+//             .insertContentAt(range.to + 1, {
+//               type: "paragraph",
+//               props: {},
+//             });
+//           // chain()
+//           //   .setCodeBlock()
+//           //   .deleteRange({ from: range.from, to: range.to })
+//           //   .insertContentAt(range.to + 1, {
+//           //     type: "paragraph",
+//           //     props: {},
+//           //   });
+//         },
+//       }),
+//     ];
+//   },
+
+//   // addKeyboardShortcuts() {
+//   //   return {
+//   //     ArrowUp: () => handleSelectAboveBelow(this.editor, "above", this.name),
+//   //     ArrowDown: () => handleSelectAboveBelow(this.editor, "below", this.name),
+//   //   };
+//   // },
+
+//   parseHTML() {
+//     return [
+//       {
+//         tag: "pre",
+//       },
+//     ];
+//   },
+
+//   renderHTML({ HTMLAttributes }) {
+//     return [
+//       "div",
+//       mergeAttributes(HTMLAttributes, {
+//         class: styles.blockContent,
+//         "data-content-type": this.name,
+//       }),
+//       [
+//         "pre",
+//         [
+//           "code",
+//           mergeAttributes(HTMLAttributes, {
+//             class: "hljs",
+//           }),
+//           0,
+//         ],
+//       ],
+//     ];
+//   },
+// });
+
+// TODO: When I rename this, don't forget to rename it also in the handleEnter func which is in the shortcuts file
+export const CodeBlockLowlightBlockContent =
+  CodeBlockLowlight.extend<CodeBlockLowlightOptions>({
+    name: "codefence",
+    group: "blockContent",
+
+    // renderHTML({ HTMLAttributes }) {
+    //   return [
+    //     "div",
+    //     mergeAttributes(HTMLAttributes, {
+    //       class: styles.blockContent,
+    //       "data-content-type": this.name,
+    //     }),
+    //     [
+    //       "pre",
+    //       [
+    //         "code",
+    //         mergeAttributes(HTMLAttributes, {
+    //           // class: "hljs",
+    //         }),
+    //         0,
+    //       ],
+    //     ],
+    //   ];
+    // },
+  });
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
index ecee9d4c9f..cda697e998 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts
@@ -11,6 +11,11 @@ export const handleEnter = (editor: Editor) => {
   const selectionEmpty =
     editor.state.selection.anchor === editor.state.selection.head;
 
+  if (contentType.name === "codefence") {
+    editor.commands.insertContent("\n");
+    return true;
+  }
+
   if (!contentType.name.endsWith("ListItem") || !selectionEmpty) {
     return false;
   }

From 5081457b4f8b8c498d3f54d20c7db490f99e099c Mon Sep 17 00:00:00 2001
From: Andriy Romashko <andrik996@gmail.com>
Date: Sat, 5 Aug 2023 21:54:56 +0300
Subject: [PATCH 48/48] Update the formatting toolbar in BlockNote to resemble
 the current toolbar and Adapt the slash/+ menu to look like in NotePlan
 native with the same items (whatever is available at the moment)

---
 .../Blocks/api/inlineContentTypes.ts          | 26 +++---
 .../SlashMenu/defaultSlashMenuItems.tsx       | 68 ++++++++++------
 packages/react/src/BlockNoteTheme.ts          | 81 ++++++++++++++-----
 .../DefaultButtons/CreateLinkButton.tsx       |  6 +-
 .../DefaultButtons/TextAlignButton.tsx        | 16 ++--
 .../DefaultButtons/ToggledStyleButton.tsx     | 48 ++++++-----
 .../components/FontIcons.tsx                  | 27 +++++++
 .../components/FormattingToolbar.tsx          | 22 +----
 .../Tooltip/components/TooltipContent.tsx     |  9 ++-
 .../react/src/SlashMenu/ReactSlashMenuItem.ts |  3 +-
 .../src/SlashMenu/components/SlashMenu.tsx    |  9 +--
 .../SlashMenu/components/SlashMenuItem.tsx    |  5 +-
 .../SlashMenu/defaultReactSlashMenuItems.tsx  | 75 ++++++++++-------
 13 files changed, 245 insertions(+), 150 deletions(-)
 create mode 100644 packages/react/src/FormattingToolbar/components/FontIcons.tsx

diff --git a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
index 449b9e8898..2b433561e2 100644
--- a/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
+++ b/packages/core/src/extensions/Blocks/api/inlineContentTypes.ts
@@ -1,17 +1,19 @@
 export type Styles = {
-  bold?: true;
-  italic?: true;
-  strikethrough?: true;
-  inlineImage?: true;
-  inlineFile?: true;
-  code?: true;
+  task?: boolean;
+  checkbox?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  strikethrough?: boolean;
+  inlineImage?: boolean;
+  inlineFile?: boolean;
+  code?: boolean;
   textColor?: string;
   backgroundColor?: string;
-  highlighted?: true;
-  underlined?: true;
-  hashtag?: true;
-  wikilink?: true;
-  datelink?: true;
+  highlighted?: boolean;
+  underlined?: boolean;
+  hashtag?: boolean;
+  wikilink?: boolean;
+  datelink?: boolean;
 };
 
 export type ContentAttributes = {
@@ -20,7 +22,7 @@ export type ContentAttributes = {
 };
 
 export type ToggledStyle = {
-  [K in keyof Styles]-?: Required<Styles>[K] extends true ? K : never;
+  [K in keyof Styles]-?: Required<Styles>[K] extends boolean ? K : never;
 }[keyof Styles];
 
 export type ColorStyle = {
diff --git a/packages/core/src/extensions/SlashMenu/defaultSlashMenuItems.tsx b/packages/core/src/extensions/SlashMenu/defaultSlashMenuItems.tsx
index 2375996560..3005a3d693 100644
--- a/packages/core/src/extensions/SlashMenu/defaultSlashMenuItems.tsx
+++ b/packages/core/src/extensions/SlashMenu/defaultSlashMenuItems.tsx
@@ -26,37 +26,34 @@ function insertOrUpdateBlock<BSchema extends DefaultBlockSchema>(
  * An array containing commands for creating all default blocks.
  */
 export const defaultSlashMenuItems = [
-  // Command for creating a level 1 heading
+  // Command for creating a task item
   new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Heading",
+    "Task",
     (editor) =>
       insertOrUpdateBlock(editor, {
-        type: "heading",
-        props: { level: "1" },
+        type: "taskListItem",
       }),
-    ["h", "heading1", "h1"]
+    ["task", "taskList", "task list"]
   ),
 
-  // Command for creating a level 2 heading
+  // Command for creating a task item
   new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Heading 2",
+    "Checklist",
     (editor) =>
       insertOrUpdateBlock(editor, {
-        type: "heading",
-        props: { level: "2" },
+        type: "checkListItem",
       }),
-    ["h2", "heading2", "subheading"]
+    ["check", "checkbox", "checkList", "check list"]
   ),
 
-  // Command for creating a level 3 heading
+  // Command for creating a bullet list
   new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Heading 3",
+    "Bullet Point",
     (editor) =>
       insertOrUpdateBlock(editor, {
-        type: "heading",
-        props: { level: "3" },
+        type: "bulletListItem",
       }),
-    ["h3", "heading3", "subheading"]
+    ["ul", "list", "bulletPoint", "bullet point"]
   ),
 
   // Command for creating an ordered list
@@ -66,29 +63,52 @@ export const defaultSlashMenuItems = [
       insertOrUpdateBlock(editor, {
         type: "numberedListItem",
       }),
-    ["li", "list", "numberedlist", "numbered list"]
+    ["li", "numberedlist", "numbered list"]
   ),
 
-  // Command for creating a bullet list
+  // Command for creating a level 1 heading
   new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Bullet List",
+    "Heading",
     (editor) =>
       insertOrUpdateBlock(editor, {
-        type: "bulletListItem",
+        type: "heading",
+        props: { level: "1" },
       }),
-    ["ul", "list", "bulletlist", "bullet list"]
+    ["h", "heading1", "h1"]
   ),
 
-  // Command for creating a paragraph (pretty useless)
+  // Command for creating a level 2 heading
+  new BaseSlashMenuItem<DefaultBlockSchema>(
+    "Heading 2",
+    (editor) =>
+      insertOrUpdateBlock(editor, {
+        type: "heading",
+        props: { level: "2" },
+      }),
+    ["h2", "heading2", "subheading"]
+  ),
+
+  // Command for creating a level 3 heading
   new BaseSlashMenuItem<DefaultBlockSchema>(
-    "Paragraph",
+    "Heading 3",
     (editor) =>
       insertOrUpdateBlock(editor, {
-        type: "paragraph",
+        type: "heading",
+        props: { level: "3" },
       }),
-    ["p"]
+    ["h3", "heading3", "subheading"]
   ),
 
+  // Command for creating a paragraph (pretty useless)
+  // new BaseSlashMenuItem<DefaultBlockSchema>(
+  //   "Paragraph",
+  //   (editor) =>
+  //     insertOrUpdateBlock(editor, {
+  //       type: "paragraph",
+  //     }),
+  //   ["p"]
+  // ),
+
   //     replaceRangeWithNode(editor, range, node);
 
   //     return true;
diff --git a/packages/react/src/BlockNoteTheme.ts b/packages/react/src/BlockNoteTheme.ts
index e840718141..c0a47fd2d4 100644
--- a/packages/react/src/BlockNoteTheme.ts
+++ b/packages/react/src/BlockNoteTheme.ts
@@ -78,6 +78,17 @@ export const getBlockNoteTheme = (
     ? blockNoteColorScheme[5]
     : blockNoteColorScheme[3];
 
+    //TODO: Implement NotePlan themes for the approach used above for BlockNote
+  const slashMenuitemColor = "#EADACE";
+  const backgroundSlashMenuColor = "#F2F4F5";
+  const slashMenuIconColor = "#A4A5A7";
+  const slashMenuItemTextColor = "#363638";
+  const slashMenuLabelTextColor = "#858689";
+  const slashMenuBorderColor = "#D8D9DC";
+  const toolbarBackground = "rgb(254 215 170)";
+  const toolbarColor = "rgb(55, 65, 81)";
+
+
   return {
     activeStyles: {
       // Removes button press effect.
@@ -127,19 +138,20 @@ export const getBlockNoteTheme = (
       Menu: {
         styles: () => ({
           dropdown: {
-            backgroundColor: primaryBackground,
+            font: "var(--fa-font-solid)",
+            backgroundColor: backgroundSlashMenuColor,
             border: border,
             borderRadius: "6px",
             boxShadow: boxShadow,
             color: primaryText,
             padding: "2px",
             ".mantine-Menu-item": {
-              backgroundColor: primaryBackground,
+              backgroundColor: slashMenuitemColor,
               border: "none",
               color: primaryText,
             },
             ".mantine-Menu-item[data-hovered]": {
-              backgroundColor: hoveredBackground,
+              backgroundColor: slashMenuitemColor,
               border: "none",
               color: hoveredText,
             },
@@ -205,26 +217,25 @@ export const getBlockNoteTheme = (
             borderRadius: "6px",
             flexWrap: "nowrap",
             gap: "2px",
-            padding: "2px",
+            padding: "5px 8px 6px 8px",
             width: "fit-content",
             // Button (including dropdown target)
             ".mantine-UnstyledButton-root": {
               backgroundColor: primaryBackground,
               border: "none",
               borderRadius: "4px",
-              color: primaryText,
+              color: toolbarColor,
+              fontWeight: 600,
             },
             // Hovered button
             ".mantine-UnstyledButton-root:hover": {
-              backgroundColor: hoveredBackground,
+              backgroundColor: toolbarBackground,
               border: "none",
-              color: hoveredText,
             },
             // Selected button
             ".mantine-UnstyledButton-root[data-selected]": {
-              backgroundColor: selectedBackground,
+              backgroundColor: toolbarBackground,
               border: "none",
-              color: selectedText,
             },
             // Disabled button
             ".mantine-UnstyledButton-root[data-disabled]": {
@@ -252,15 +263,15 @@ export const getBlockNoteTheme = (
       Tooltip: {
         styles: () => ({
           root: {
-            backgroundColor: primaryBackground,
+            backgroundColor: "black",
             border: border,
             borderRadius: "6px",
             boxShadow: boxShadow,
-            color: primaryText,
+            color: "white",
             padding: "4px 10px",
             textAlign: "center",
             "div ~ div": {
-              color: secondaryText,
+              color: "white",
             },
           },
         }),
@@ -269,26 +280,58 @@ export const getBlockNoteTheme = (
         styles: () => ({
           root: {
             position: "relative",
+            background: backgroundSlashMenuColor,
+            padding: "14px 0",
+            border: `1px solid ${slashMenuBorderColor}`,
+            outline: "none",
+            maxHeight: 360,
+            minWidth: 450,
+            width: 450,
+            overflow: "hidden",
             ".mantine-Menu-item": {
               // Icon
+              height: 26,
+              padding: 0,
+              width: "100%",
+              display: "flex",
+              color: slashMenuItemTextColor,
+              backgroundColor: "transparent",
+              alignItems: "flex-end",
+              cursor: "pointer",
+              fontWeight: 400,
+              paddingBottom: 2,
+              fontSize: 13,
+              ":hover,:active": {
+                backgroundColor: slashMenuitemColor,
+              },
               ".mantine-Menu-itemIcon": {
-                backgroundColor: secondaryBackground,
+                backgroundColor: "transparent",
                 borderRadius: "4px",
-                color: primaryText,
-                padding: "8px",
+                color: slashMenuIconColor,
+                width: 47,
+                boxSizing: "content-box",
+                fontSize: 15,
+                marginRight: 6,
+                marginBottom: 1,
               },
               // Text
               ".mantine-Menu-itemLabel": {
-                paddingRight: "16px",
                 ".mantine-Stack-root": {
                   gap: "0",
                 },
               },
-              // Badge (keyboard shortcut)
+              // Badge (markdown hint)
               ".mantine-Menu-itemRightSection": {
+                marginLeft: "auto",
+                textTransform: "lowercase",
                 ".mantine-Badge-root": {
-                  backgroundColor: secondaryBackground,
-                  color: primaryText,
+                  backgroundColor: "transparent",
+                  color: slashMenuLabelTextColor,
+                  fontSize: 10,
+                  fontWeight: 400,
+                  textTransform: "none",
+                  marginBottom: 3,
+                  marginRight: 19,
                 },
               },
             },
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/CreateLinkButton.tsx
index 016b6f4d3e..e92a35b500 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/CreateLinkButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/CreateLinkButton.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from "react";
 import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
-import { RiLink } from "react-icons/ri";
 import LinkToolbarButton from "../LinkToolbarButton";
 import { formatKeyboardShortcut } from "../../../utils";
-
+import iconsData from "../FontIcons";
+const { link } = iconsData;
 export const CreateLinkButton = <BSchema extends BlockSchema>(props: {
   editor: BlockNoteEditor<BSchema>;
 }) => {
@@ -20,7 +20,7 @@ export const CreateLinkButton = <BSchema extends BlockSchema>(props: {
       isSelected={!!props.editor.getSelectedLinkUrl()}
       mainTooltip="Link"
       secondaryTooltip={formatKeyboardShortcut("Mod+K")}
-      icon={RiLink}
+      icon={link}
       hyperlinkIsActive={!!props.editor.getSelectedLinkUrl()}
       activeHyperlinkUrl={props.editor.getSelectedLinkUrl() || ""}
       activeHyperlinkText={props.editor.getSelectedText()}
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx
index dde4fe6342..5131693cbe 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx
@@ -6,21 +6,17 @@ import {
 } from "@blocknote/core";
 import { useCallback, useMemo } from "react";
 import { IconType } from "react-icons";
-import {
-  RiAlignCenter,
-  RiAlignJustify,
-  RiAlignLeft,
-  RiAlignRight,
-} from "react-icons/ri";
 import { ToolbarButton } from "../../../SharedComponents/Toolbar/components/ToolbarButton";
+import iconsData from "../FontIcons";
+const { left, center, right, justify } = iconsData;
 
 type TextAlignment = DefaultProps["textAlignment"]["values"][number];
 
 const icons: Record<TextAlignment, IconType> = {
-  left: RiAlignLeft,
-  center: RiAlignCenter,
-  right: RiAlignRight,
-  justify: RiAlignJustify,
+  left,
+  center,
+  right,
+  justify,
 };
 
 export const TextAlignButton = <BSchema extends BlockSchema>(props: {
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
index 1a8aa1de0b..ee572c3271 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/ToggledStyleButton.tsx
@@ -1,18 +1,24 @@
 import { ToolbarButton } from "../../../SharedComponents/Toolbar/components/ToolbarButton";
 import { formatKeyboardShortcut } from "../../../utils";
-import {
-  RiBold,
-  RiCodeFill,
-  RiItalic,
-  RiStrikethrough,
-  RiUnderline,
-  RiHashtag,
-  RiLink,
-} from "react-icons/ri";
 import { BlockNoteEditor, BlockSchema, ToggledStyle } from "@blocknote/core";
 import { IconType } from "react-icons";
+import iconsData from "../FontIcons";
+const {
+  bold,
+  link,
+  italic,
+  underlined,
+  strikethrough,
+  highlighted,
+  code,
+  hashtag,
+  task,
+  checkbox,
+} = iconsData;
 
 const shortcuts: Record<ToggledStyle, string> = {
+  task: "",
+  checkbox: "",
   bold: "Mod+B",
   italic: "Mod+I",
   underlined: "Mod+U",
@@ -27,17 +33,19 @@ const shortcuts: Record<ToggledStyle, string> = {
 };
 
 const icons: Record<ToggledStyle, IconType> = {
-  bold: RiBold,
-  italic: RiItalic,
-  underlined: RiUnderline,
-  strikethrough: RiStrikethrough,
-  highlighted: RiCodeFill,
-  code: RiCodeFill,
-  hashtag: RiHashtag,
-  wikilink: RiLink,
-  datelink: RiLink,
-  inlineFile: RiLink,
-  inlineImage: RiLink,
+  task,
+  checkbox,
+  bold,
+  italic,
+  underlined,
+  strikethrough,
+  highlighted,
+  code,
+  hashtag,
+  wikilink: link,
+  datelink: link,
+  inlineFile: link,
+  inlineImage: link,
 };
 
 export const ToggledStyleButton = <BSchema extends BlockSchema>(props: {
diff --git a/packages/react/src/FormattingToolbar/components/FontIcons.tsx b/packages/react/src/FormattingToolbar/components/FontIcons.tsx
new file mode 100644
index 0000000000..7b416b4c5a
--- /dev/null
+++ b/packages/react/src/FormattingToolbar/components/FontIcons.tsx
@@ -0,0 +1,27 @@
+const getIcon = (
+  name: string | number,
+  type: string = "solid",
+  family: string = ""
+) => <i className={`fa-${type} fa-${name} ${family}`}></i>;
+
+const iconsData = {
+  task: () => getIcon("circle-check", "regular"),
+  checkbox: () => getIcon("square-check", "regular"),
+  bold: () => getIcon("bold"),
+  italic: () => getIcon("italic"),
+  underlined: () => getIcon("underline"),
+  strikethrough: () => getIcon("strikethrough"),
+  highlighted: () => getIcon("highlighter", "regular", "sharp"),
+  hashtag: () => getIcon("hashtag"),
+  code: () => getIcon("code-simple"),
+  link: () => getIcon("link"),
+  getIcon,
+  bullet: () => getIcon("circle-small"),
+  heading: () => getIcon("heading"),
+  numList: () => getIcon("list-ol"),
+  left: () => getIcon("align-left"),
+  center: () => getIcon("align-center"),
+  right: () => getIcon("align-right"),
+  justify: () => getIcon("align-justify"),
+};
+export default iconsData;
diff --git a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx
index b47b2305e0..463c9388af 100644
--- a/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx
+++ b/packages/react/src/FormattingToolbar/components/FormattingToolbar.tsx
@@ -1,39 +1,23 @@
 import { BlockNoteEditor, BlockSchema } from "@blocknote/core";
 import { Toolbar } from "../../SharedComponents/Toolbar/components/Toolbar";
-import { ColorStyleButton } from "./DefaultButtons/ColorStyleButton";
 import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton";
-import {
-  NestBlockButton,
-  UnnestBlockButton,
-} from "./DefaultButtons/NestBlockButtons";
-import { TextAlignButton } from "./DefaultButtons/TextAlignButton";
 import { ToggledStyleButton } from "./DefaultButtons/ToggledStyleButton";
-import { BlockTypeDropdown } from "./DefaultDropdowns/BlockTypeDropdown";
 
 export const FormattingToolbar = <BSchema extends BlockSchema>(props: {
   editor: BlockNoteEditor<BSchema>;
 }) => {
   return (
     <Toolbar>
-      <BlockTypeDropdown {...props} />
-
       <ToggledStyleButton editor={props.editor} toggledStyle={"bold"} />
       <ToggledStyleButton editor={props.editor} toggledStyle={"italic"} />
       <ToggledStyleButton editor={props.editor} toggledStyle={"underlined"} />
+      <ToggledStyleButton editor={props.editor} toggledStyle={"highlighted"} />
+
       <ToggledStyleButton
         editor={props.editor}
         toggledStyle={"strikethrough"}
       />
-
-      <TextAlignButton editor={props.editor as any} textAlignment={"left"} />
-      <TextAlignButton editor={props.editor as any} textAlignment={"center"} />
-      <TextAlignButton editor={props.editor as any} textAlignment={"right"} />
-
-      <ColorStyleButton editor={props.editor} />
-
-      <NestBlockButton editor={props.editor} />
-      <UnnestBlockButton editor={props.editor} />
-
+      <ToggledStyleButton editor={props.editor} toggledStyle={"code"} />
       <CreateLinkButton editor={props.editor} />
     </Toolbar>
   );
diff --git a/packages/react/src/SharedComponents/Tooltip/components/TooltipContent.tsx b/packages/react/src/SharedComponents/Tooltip/components/TooltipContent.tsx
index ddd5782822..8ad484bd91 100644
--- a/packages/react/src/SharedComponents/Tooltip/components/TooltipContent.tsx
+++ b/packages/react/src/SharedComponents/Tooltip/components/TooltipContent.tsx
@@ -3,14 +3,19 @@ import { createStyles, Stack, Text } from "@mantine/core";
 export const TooltipContent = (props: {
   mainTooltip: string;
   secondaryTooltip?: string;
+  showMainTooltip?: boolean;
 }) => {
   const { classes } = createStyles({ root: {} })(undefined, {
     name: "Tooltip",
   });
-
+  if (!props.secondaryTooltip) {
+    return null;
+  }
   return (
     <Stack spacing={0} className={classes.root}>
-      <Text size={"sm"}>{props.mainTooltip}</Text>
+      {props.showMainTooltip ? (
+        <Text size={"sm"}>{props.mainTooltip}</Text>
+      ) : null}
       {props.secondaryTooltip && (
         <Text size={"xs"}>{props.secondaryTooltip}</Text>
       )}
diff --git a/packages/react/src/SlashMenu/ReactSlashMenuItem.ts b/packages/react/src/SlashMenu/ReactSlashMenuItem.ts
index 44ff73c2a1..05799d8131 100644
--- a/packages/react/src/SlashMenu/ReactSlashMenuItem.ts
+++ b/packages/react/src/SlashMenu/ReactSlashMenuItem.ts
@@ -14,7 +14,8 @@ export class ReactSlashMenuItem<
     public readonly group: string,
     public readonly icon: JSX.Element,
     public readonly hint?: string,
-    public readonly shortcut?: string
+    public readonly shortcut?: string,
+    public readonly markdownHint?: string
   ) {
     super(name, execute, aliases);
   }
diff --git a/packages/react/src/SlashMenu/components/SlashMenu.tsx b/packages/react/src/SlashMenu/components/SlashMenu.tsx
index f775ec7728..c5d07e2bdd 100644
--- a/packages/react/src/SlashMenu/components/SlashMenu.tsx
+++ b/packages/react/src/SlashMenu/components/SlashMenu.tsx
@@ -22,18 +22,14 @@ export function SlashMenu<BSchema extends BlockSchema>(
   const groups = _.groupBy(props.items, (i) => i.group);
 
   _.forEach(groups, (el) => {
-    renderedItems.push(
-      <Menu.Label key={el[0].group}>{el[0].group}</Menu.Label>
-    );
-
     for (const item of el) {
       renderedItems.push(
         <SlashMenuItem
           key={item.name}
           name={item.name}
-          icon={item.icon}
+          icon={item?.icon}
           hint={item.hint}
-          shortcut={item.shortcut}
+          shortcut={item?.markdownHint ?? ""}
           isSelected={props.keyboardHoveredItemIndex === index}
           set={() => props.itemCallback(item)}
         />
@@ -51,6 +47,7 @@ export function SlashMenu<BSchema extends BlockSchema>(
        * close due to trigger="hover".
        */
       defaultOpened={true}
+      unstyled
       trigger={"hover"}
       closeDelay={10000000}>
       <Menu.Dropdown className={classes.root}>
diff --git a/packages/react/src/SlashMenu/components/SlashMenuItem.tsx b/packages/react/src/SlashMenu/components/SlashMenuItem.tsx
index 176889f51b..a5b9365691 100644
--- a/packages/react/src/SlashMenu/components/SlashMenuItem.tsx
+++ b/packages/react/src/SlashMenu/components/SlashMenuItem.tsx
@@ -70,10 +70,7 @@ export function SlashMenuItem(props: SlashMenuItemProps) {
       }>
       <Stack>
         {/*Might need separate classes.*/}
-        <Text size={14} weight={500}>
-          {props.name}
-        </Text>
-        <Text size={10}>{props.hint}</Text>
+        <Text title={props.hint}>{props.name}</Text>
       </Stack>
     </Menu.Item>
   );
diff --git a/packages/react/src/SlashMenu/defaultReactSlashMenuItems.tsx b/packages/react/src/SlashMenu/defaultReactSlashMenuItems.tsx
index 740265e12d..d7c3820236 100644
--- a/packages/react/src/SlashMenu/defaultReactSlashMenuItems.tsx
+++ b/packages/react/src/SlashMenu/defaultReactSlashMenuItems.tsx
@@ -3,16 +3,17 @@ import {
   DefaultBlockSchema,
   defaultSlashMenuItems,
 } from "@blocknote/core";
-import {
-  RiH1,
-  RiH2,
-  RiH3,
-  RiListOrdered,
-  RiListUnordered,
-  RiText,
-} from "react-icons/ri";
 import { formatKeyboardShortcut } from "../utils";
 import { ReactSlashMenuItem } from "./ReactSlashMenuItem";
+import iconsData from "../FormattingToolbar/components/FontIcons";
+const { heading, task, numList, bullet, checkbox, getIcon } = iconsData;
+
+const FullHeadingIcon = ({ order }: { order: number }) => (
+  <>
+    {heading()}
+    {getIcon(order)}
+  </>
+);
 const extraFields: Record<
   string,
   Omit<
@@ -20,42 +21,55 @@ const extraFields: Record<
     keyof BaseSlashMenuItem<DefaultBlockSchema>
   >
 > = {
+  Task: {
+    group: "Basic blocks",
+    icon: task(),
+    markdownHint: "* task",
+    hint: "Used to display a task list",
+    shortcut: "",
+  },
+  Checklist: {
+    group: "Basic blocks",
+    icon: checkbox(),
+    markdownHint: "+ checklist",
+    hint: "Used to display a checkbox list",
+    shortcut: "",
+  },
+  "Bullet Point": {
+    group: "Basic blocks",
+    icon: bullet(),
+    markdownHint: "- bullet",
+    hint: "Used to display an unordered list",
+    shortcut: formatKeyboardShortcut("Mod-Alt-9"),
+  },
+  "Numbered List": {
+    group: "Basic blocks",
+    icon: numList(),
+    markdownHint: ". number",
+    hint: "Used to display a numbered list",
+    shortcut: formatKeyboardShortcut("Mod-Alt-7"),
+  },
   Heading: {
     group: "Headings",
-    icon: <RiH1 size={18} />,
+    icon: <FullHeadingIcon order={1} />,
+    markdownHint: "# H1",
     hint: "Used for a top-level heading",
     shortcut: formatKeyboardShortcut("Mod-Alt-1"),
   },
   "Heading 2": {
     group: "Headings",
-    icon: <RiH2 size={18} />,
+    icon: <FullHeadingIcon order={2} />,
+    markdownHint: "## H2",
     hint: "Used for key sections",
     shortcut: formatKeyboardShortcut("Mod-Alt-2"),
   },
   "Heading 3": {
     group: "Headings",
-    icon: <RiH3 size={18} />,
+    icon: <FullHeadingIcon order={3} />,
+    markdownHint: "### H3",
     hint: "Used for subsections and group headings",
     shortcut: formatKeyboardShortcut("Mod-Alt-3"),
   },
-  "Numbered List": {
-    group: "Basic blocks",
-    icon: <RiListOrdered size={18} />,
-    hint: "Used to display a numbered list",
-    shortcut: formatKeyboardShortcut("Mod-Alt-7"),
-  },
-  "Bullet List": {
-    group: "Basic blocks",
-    icon: <RiListUnordered size={18} />,
-    hint: "Used to display an unordered list",
-    shortcut: formatKeyboardShortcut("Mod-Alt-9"),
-  },
-  Paragraph: {
-    group: "Basic blocks",
-    icon: <RiText size={18} />,
-    hint: "Used for the body of your document",
-    shortcut: formatKeyboardShortcut("Mod-Alt-0"),
-  },
 };
 
 export const defaultReactSlashMenuItems = defaultSlashMenuItems.map(
@@ -67,6 +81,7 @@ export const defaultReactSlashMenuItems = defaultSlashMenuItems.map(
       extraFields[item.name].group,
       extraFields[item.name].icon,
       extraFields[item.name].hint,
-      extraFields[item.name].shortcut
+      extraFields[item.name].shortcut,
+      extraFields[item.name].markdownHint
     )
 );