@blocknote/core 0.8.1 → 0.8.3

package/dist/blocknote.js

@@ -1,150 +1,242 @@
-var Nt = Object.defineProperty;
-var At = (o, e, t) => e in o ? Nt(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var h = (o, e, t) => (At(o, typeof e != "symbol" ? e + "" : e, t), t);
-import { Node as R, InputRule as Y, mergeAttributes as w, Extension as v, findChildren as j, combineTransactionSteps as Ht, getChangedRanges as Ot, findChildrenInRange as Dt, Mark as st, findParentNode as Ft, isTextSelection as Rt, isNodeSelection as zt, posToDOMRect as at, getMarkRange as Q, extensions as N, Editor as Ut } from "@tiptap/core";
-import { PluginKey as E, Plugin as C, TextSelection as tt, Selection as G, NodeSelection as $t } from "prosemirror-state";
-import { Slice as I, Fragment as _, DOMSerializer as q, DOMParser as Gt } from "prosemirror-model";
-import { v4 as jt } from "uuid";
+var Lt = Object.defineProperty;
+var Nt = (n, e, t) => e in n ? Lt(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var u = (n, e, t) => (Nt(n, typeof e != "symbol" ? e + "" : e, t), t);
+import { Extension as T, Mark as at, Node as V, InputRule as Y, mergeAttributes as x, combineTransactionSteps as Pt, getChangedRanges as Ot, findChildrenInRange as Dt, findChildren as Q, findParentNode as Rt, extensions as L, isTextSelection as zt, isNodeSelection as Vt, posToDOMRect as j, getMarkRange as tt, Editor as Ut } from "@tiptap/core";
+import { Bold as Ft } from "@tiptap/extension-bold";
+import { Code as $t } from "@tiptap/extension-code";
+import Gt from "@tiptap/extension-collaboration";
+import jt from "@tiptap/extension-collaboration-cursor";
+import { Dropcursor as qt } from "@tiptap/extension-dropcursor";
+import { Gapcursor as Wt } from "@tiptap/extension-gapcursor";
+import { HardBreak as Yt } from "@tiptap/extension-hard-break";
+import { History as Jt } from "@tiptap/extension-history";
+import { Italic as Kt } from "@tiptap/extension-italic";
+import { Link as Xt } from "@tiptap/extension-link";
+import { Strike as Zt } from "@tiptap/extension-strike";
+import { Text as Qt } from "@tiptap/extension-text";
+import { Underline as te } from "@tiptap/extension-underline";
+import { Slice as B, Fragment as I, DOMSerializer as q, DOMParser as ee } from "prosemirror-model";
+import { PluginKey as S, Plugin as y, TextSelection as et, Selection as G, NodeSelection as oe } from "prosemirror-state";
+import { v4 as ne } from "uuid";
+import * as re from "prosemirror-view";
+import { Decoration as R, DecorationSet as z } from "prosemirror-view";
 import lt from "rehype-parse";
-import qt from "rehype-remark";
+import ie from "rehype-remark";
 import dt from "rehype-stringify";
 import ct from "remark-gfm";
-import Wt from "remark-parse";
-import Yt from "remark-rehype";
-import Vt from "remark-stringify";
-import { unified as V } from "unified";
-import { fromDom as et } from "hast-util-from-dom";
-import { Bold as Kt } from "@tiptap/extension-bold";
-import { Code as Jt } from "@tiptap/extension-code";
-import Xt from "@tiptap/extension-collaboration";
-import Zt from "@tiptap/extension-collaboration-cursor";
-import { Dropcursor as Qt } from "@tiptap/extension-dropcursor";
-import { Gapcursor as te } from "@tiptap/extension-gapcursor";
-import { HardBreak as ee } from "@tiptap/extension-hard-break";
-import { History as oe } from "@tiptap/extension-history";
-import { Italic as ne } from "@tiptap/extension-italic";
-import { Link as ut } from "@tiptap/extension-link";
-import { Strike as re } from "@tiptap/extension-strike";
-import { Text as ie } from "@tiptap/extension-text";
-import { Underline as se } from "@tiptap/extension-underline";
-import * as ae from "prosemirror-view";
-import { Decoration as D, DecorationSet as F } from "prosemirror-view";
-const ht = "_blockOuter_xgzwr_5", pt = "_block_xgzwr_5", ft = "_reactNodeViewRenderer_xgzwr_17", mt = "_blockContent_xgzwr_22", gt = "_blockGroup_xgzwr_42", kt = "_isEmpty_xgzwr_240", yt = "_inlineContent_xgzwr_240", bt = "_isFilter_xgzwr_241", vt = "_hasAnchor_xgzwr_263", k = {
-  blockOuter: ht,
+import se from "remark-parse";
+import ae from "remark-rehype";
+import le from "remark-stringify";
+import { unified as J } from "unified";
+import { fromDom as ot } from "hast-util-from-dom";
+const de = "_bnEditor_4vj2p_3", ce = "_bnRoot_4vj2p_20", ue = "_defaultStyles_4vj2p_35", pe = "_dragPreview_4vj2p_68", H = {
+  bnEditor: de,
+  bnRoot: ce,
+  defaultStyles: ue,
+  dragPreview: pe,
+  "collaboration-cursor__caret": "_collaboration-cursor__caret_4vj2p_74",
+  "collaboration-cursor__label": "_collaboration-cursor__label_4vj2p_85"
+};
+function g(n, e) {
+  if (e < 0 || e > n.nodeSize)
+    return;
+  n.resolve(e).parent.type.name === "blockGroup" && e++;
+  const t = n.resolve(e), o = t.depth;
+  let r = t.node(o), i = o;
+  for (; ; ) {
+    if (i < 0)
+      return;
+    if (r.type.name === "blockContainer")
+      break;
+    i -= 1, r = t.node(i);
+  }
+  const s = r.attrs.id, l = r.firstChild, a = l.type, d = r.childCount === 2 ? r.lastChild.childCount : 0, c = t.start(i), p = t.end(i);
+  return {
+    id: s,
+    node: r,
+    contentNode: l,
+    contentType: a,
+    numChildBlocks: d,
+    startPos: c,
+    endPos: p,
+    depth: i
+  };
+}
+const he = T.create({
+  name: "blockBackgroundColor",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["blockContainer"],
+        attributes: {
+          backgroundColor: {
+            default: "default",
+            parseHTML: (n) => n.hasAttribute("data-background-color") ? n.getAttribute("data-background-color") : "default",
+            renderHTML: (n) => n.backgroundColor !== "default" && {
+              "data-background-color": n.backgroundColor
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBlockBackgroundColor: (n, e) => ({ state: t, view: o }) => {
+        const r = g(t.doc, n);
+        return r === void 0 ? !1 : (t.tr.setNodeAttribute(
+          r.startPos - 1,
+          "backgroundColor",
+          e
+        ), o.focus(), !0);
+      }
+    };
+  }
+}), fe = at.create({
+  name: "backgroundColor",
+  addAttributes() {
+    return {
+      color: {
+        default: void 0,
+        parseHTML: (n) => n.getAttribute("data-background-color"),
+        renderHTML: (n) => ({
+          "data-background-color": n.color
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (n) => typeof n == "string" ? !1 : n.hasAttribute("data-background-color") ? { color: n.getAttribute("data-background-color") } : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: n }) {
+    return ["span", n, 0];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (n) => ({ commands: e }) => n !== "default" ? e.setMark(this.name, { color: n }) : e.unsetMark(this.name)
+    };
+  }
+}), ut = "_blockOuter_xgzwr_5", pt = "_block_xgzwr_5", ht = "_reactNodeViewRenderer_xgzwr_17", ft = "_blockContent_xgzwr_22", mt = "_blockGroup_xgzwr_42", gt = "_isEmpty_xgzwr_240", kt = "_inlineContent_xgzwr_240", bt = "_isFilter_xgzwr_241", yt = "_hasAnchor_xgzwr_263", k = {
+  blockOuter: ut,
   block: pt,
-  reactNodeViewRenderer: ft,
-  blockContent: mt,
-  blockGroup: gt,
-  isEmpty: kt,
-  inlineContent: yt,
+  reactNodeViewRenderer: ht,
+  blockContent: ft,
+  blockGroup: mt,
+  isEmpty: gt,
+  inlineContent: kt,
   isFilter: bt,
-  hasAnchor: vt
-}, Yo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  hasAnchor: yt
+}, jo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   block: pt,
-  blockContent: mt,
-  blockGroup: gt,
-  blockOuter: ht,
+  blockContent: ft,
+  blockGroup: mt,
+  blockOuter: ut,
   default: k,
-  hasAnchor: vt,
-  inlineContent: yt,
-  isEmpty: kt,
+  hasAnchor: yt,
+  inlineContent: kt,
+  isEmpty: gt,
   isFilter: bt,
-  reactNodeViewRenderer: ft
+  reactNodeViewRenderer: ht
 }, Symbol.toStringTag, { value: "Module" }));
-function ot(o) {
-  return "data-" + o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+function nt(n) {
+  return "data-" + n.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function le(o) {
+function me(n) {
   const e = {};
-  return Object.entries(o.propSchema).forEach(([t, n]) => {
+  return Object.entries(n.propSchema).forEach(([t, o]) => {
     e[t] = {
-      default: n.default,
+      default: o.default,
       keepOnSplit: !0,
       // Props are displayed in kebab-case as HTML attributes. If a prop's
       // value is the same as its default, we don't display an HTML
       // attribute for it.
-      parseHTML: (r) => r.getAttribute(ot(t)),
-      renderHTML: (r) => r[t] !== n.default ? {
-        [ot(t)]: r[t]
+      parseHTML: (r) => r.getAttribute(nt(t)),
+      renderHTML: (r) => r[t] !== o.default ? {
+        [nt(t)]: r[t]
       } : {}
     };
   }), e;
 }
-function de(o) {
+function ge(n) {
   return [
     {
-      tag: "div[data-content-type=" + o.type + "]"
+      tag: "div[data-content-type=" + n.type + "]"
     }
   ];
 }
-function ce(o, e) {
+function ke(n, e) {
   const t = document.createElement("div");
-  t.setAttribute("data-content-type", o.type);
+  t.setAttribute("data-content-type", n.type);
   for (const [r, i] of Object.entries(e))
     t.setAttribute(r, i);
-  let n;
-  return o.containsInlineContent ? (n = document.createElement("div"), t.appendChild(n)) : n = void 0, n !== void 0 ? {
+  let o;
+  return n.containsInlineContent ? (o = document.createElement("div"), t.appendChild(o)) : o = void 0, o !== void 0 ? {
     dom: t,
-    contentDOM: n
+    contentDOM: o
   } : {
     dom: t
   };
 }
-function Vo(o) {
+function qo(n) {
   return {
-    node: H({
-      name: o.type,
-      content: o.containsInlineContent ? "inline*" : "",
-      selectable: o.containsInlineContent,
+    node: P({
+      name: n.type,
+      content: n.containsInlineContent ? "inline*" : "",
+      selectable: n.containsInlineContent,
       addOptions() {
         return {
           editor: void 0
         };
       },
       addAttributes() {
-        return le(o);
+        return me(n);
       },
       parseHTML() {
-        return de(o);
+        return ge(n);
       },
       renderHTML({ HTMLAttributes: t }) {
-        return ce(o, t);
+        return ke(n, t);
       },
       addNodeView() {
-        return ({ HTMLAttributes: t, getPos: n }) => {
+        return ({ HTMLAttributes: t, getPos: o }) => {
           const r = document.createElement("div");
-          r.className = k.blockContent, r.setAttribute("data-content-type", o.type);
-          for (const [p, f] of Object.entries(t))
-            r.setAttribute(p, f);
+          r.className = k.blockContent, r.setAttribute("data-content-type", n.type);
+          for (const [h, f] of Object.entries(t))
+            r.setAttribute(h, f);
           const i = this.options.editor;
-          if (typeof n == "boolean")
+          if (typeof o == "boolean")
             throw new Error(
               "Cannot find node position as getPos is a boolean, not a function."
             );
-          const s = n(), d = i._tiptapEditor.state.doc.resolve(s).node().attrs.id, c = i.getBlock(d);
-          if (c.type !== o.type)
+          const s = o(), d = i._tiptapEditor.state.doc.resolve(s).node().attrs.id, c = i.getBlock(d);
+          if (c.type !== n.type)
             throw new Error("Block type does not match");
-          const u = o.render(c, i);
-          return "contentDOM" in u && (u.contentDOM.className = `${u.contentDOM.className ? u.contentDOM.className + " " : ""}${k.inlineContent}`), r.appendChild(u.dom), "contentDOM" in u ? {
+          const p = n.render(c, i);
+          return "contentDOM" in p && (p.contentDOM.className = `${p.contentDOM.className ? p.contentDOM.className + " " : ""}${k.inlineContent}`), r.appendChild(p.dom), "contentDOM" in p ? {
             dom: r,
-            contentDOM: u.contentDOM
+            contentDOM: p.contentDOM
           } : {
             dom: r
           };
         };
       }
     }),
-    propSchema: o.propSchema
+    propSchema: n.propSchema
   };
 }
-function H(o) {
-  return R.create({
-    ...o,
+function P(n) {
+  return V.create({
+    ...n,
     group: "blockContent"
   });
 }
-const ue = H({
+const be = P({
   name: "heading",
   content: "inline*",
   addAttributes() {
@@ -152,24 +244,24 @@ const ue = H({
       level: {
         default: "1",
         // instead of "level" attributes, use "data-level"
-        parseHTML: (o) => o.getAttribute("data-level"),
-        renderHTML: (o) => ({
-          "data-level": o.level
+        parseHTML: (n) => n.getAttribute("data-level"),
+        renderHTML: (n) => ({
+          "data-level": n.level
         })
       }
     };
   },
   addInputRules() {
     return [
-      ...["1", "2", "3"].map((o) => new Y({
-        find: new RegExp(`^(#{${parseInt(o)}})\\s$`),
-        handler: ({ state: e, chain: t, range: n }) => {
+      ...["1", "2", "3"].map((n) => new Y({
+        find: new RegExp(`^(#{${parseInt(n)}})\\s$`),
+        handler: ({ state: e, chain: t, range: o }) => {
           t().BNUpdateBlock(e.selection.from, {
             type: "heading",
             props: {
-              level: o
+              level: n
             }
-          }).deleteRange({ from: n.from, to: n.to });
+          }).deleteRange({ from: o.from, to: o.to });
         }
       }))
     ];
@@ -193,47 +285,22 @@ const ue = H({
       }
     ];
   },
-  renderHTML({ node: o, HTMLAttributes: e }) {
+  renderHTML({ node: n, HTMLAttributes: e }) {
     return [
       "div",
-      w(e, {
+      x(e, {
         class: k.blockContent,
         "data-content-type": this.name
       }),
-      ["h" + o.attrs.level, { class: k.inlineContent }, 0]
+      ["h" + n.attrs.level, { class: k.inlineContent }, 0]
     ];
   }
-});
-function g(o, e) {
-  if (e < 0 || e > o.nodeSize)
-    return;
-  const t = o.resolve(e), n = t.depth;
-  let r = t.node(n), i = n;
-  for (; ; ) {
-    if (i < 0)
-      return;
-    if (r.type.name === "blockContainer")
-      break;
-    i -= 1, r = t.node(i);
-  }
-  const s = r.attrs.id, a = r.firstChild, l = a.type, d = r.childCount === 2 ? r.lastChild.childCount : 0, c = t.start(i), u = t.end(i);
-  return {
-    id: s,
-    node: r,
-    contentNode: a,
-    contentType: l,
-    numChildBlocks: d,
-    startPos: c,
-    endPos: u,
-    depth: i
-  };
-}
-const Et = (o) => {
+}), vt = (n) => {
   const { node: e, contentType: t } = g(
-    o.state.doc,
-    o.state.selection.from
-  ), n = o.state.selection.anchor === o.state.selection.head;
-  return !t.name.endsWith("ListItem") || !n ? !1 : o.commands.first(({ state: r, chain: i, commands: s }) => [
+    n.state.doc,
+    n.state.selection.from
+  ), o = n.state.selection.anchor === n.state.selection.head;
+  return !t.name.endsWith("ListItem") || !o ? !1 : n.commands.first(({ state: r, chain: i, commands: s }) => [
     () => (
       // Changes list item block to a text block if the content is empty.
       s.command(() => e.textContent.length === 0 ? s.BNUpdateBlock(r.selection.from, {
@@ -247,7 +314,7 @@ const Et = (o) => {
       s.command(() => e.textContent.length > 0 ? (i().deleteSelection().BNSplitBlock(r.selection.from, !0).run(), !0) : !1)
     )
   ]);
-}, he = H({
+}, ye = P({
   name: "bulletListItem",
   content: "inline*",
   addInputRules() {
@@ -255,8 +322,8 @@ const Et = (o) => {
       // Creates an unordered list when starting with "-", "+", or "*".
       new Y({
         find: new RegExp("^[-+*]\\s$"),
-        handler: ({ state: o, chain: e, range: t }) => {
-          e().BNUpdateBlock(o.selection.from, {
+        handler: ({ state: n, chain: e, range: t }) => {
+          e().BNUpdateBlock(n.selection.from, {
             type: "bulletListItem",
             props: {}
           }).deleteRange({ from: t.from, to: t.to });
@@ -266,7 +333,7 @@ const Et = (o) => {
   },
   addKeyboardShortcuts() {
     return {
-      Enter: () => Et(this.editor)
+      Enter: () => vt(this.editor)
     };
   },
   parseHTML() {
@@ -274,10 +341,10 @@ const Et = (o) => {
       // Case for regular HTML list structure.
       {
         tag: "li",
-        getAttrs: (o) => {
-          if (typeof o == "string")
+        getAttrs: (n) => {
+          if (typeof n == "string")
             return !1;
-          const e = o.parentElement;
+          const e = n.parentElement;
           return e === null ? !1 : e.tagName === "UL" ? {} : !1;
         },
         node: "bulletListItem"
@@ -285,10 +352,10 @@ const Et = (o) => {
       // Case for BlockNote list structure.
       {
         tag: "p",
-        getAttrs: (o) => {
-          if (typeof o == "string")
+        getAttrs: (n) => {
+          if (typeof n == "string")
             return !1;
-          const e = o.parentElement;
+          const e = n.parentElement;
           return e === null ? !1 : e.getAttribute("data-content-type") === "bulletListItem" ? {} : !1;
         },
         priority: 300,
@@ -296,56 +363,56 @@ const Et = (o) => {
       }
     ];
   },
-  renderHTML({ HTMLAttributes: o }) {
+  renderHTML({ HTMLAttributes: n }) {
     return [
       "div",
-      w(o, {
+      x(n, {
         class: k.blockContent,
         "data-content-type": this.name
       }),
       ["p", { class: k.inlineContent }, 0]
     ];
   }
-}), pe = new E("numbered-list-indexing"), fe = () => new C({
-  key: pe,
-  appendTransaction: (o, e, t) => {
-    const n = t.tr;
-    n.setMeta("numberedListIndexing", !0);
+}), ve = new S("numbered-list-indexing"), we = () => new y({
+  key: ve,
+  appendTransaction: (n, e, t) => {
+    const o = t.tr;
+    o.setMeta("numberedListIndexing", !0);
     let r = !1;
     return t.doc.descendants((i, s) => {
       if (i.type.name === "blockContainer" && i.firstChild.type.name === "numberedListItem") {
-        let a = "1";
-        const l = s === 1, d = g(n.doc, s + 1);
+        let l = "1";
+        const a = s === 1, d = g(o.doc, s + 1);
         if (d === void 0)
           return;
-        if (!l) {
-          const p = g(n.doc, s - 2);
-          if (p === void 0)
+        if (!a) {
+          const h = g(o.doc, s - 2);
+          if (h === void 0)
             return;
-          if (!(d.depth !== p.depth)) {
-            const m = p.contentNode;
-            if (p.contentType.name === "numberedListItem") {
-              const U = m.attrs.index;
-              a = (parseInt(U) + 1).toString();
+          if (!(d.depth !== h.depth)) {
+            const m = h.contentNode;
+            if (h.contentType.name === "numberedListItem") {
+              const w = m.attrs.index;
+              l = (parseInt(w) + 1).toString();
             }
           }
         }
-        d.contentNode.attrs.index !== a && (r = !0, n.setNodeMarkup(s + 1, void 0, {
-          index: a
+        d.contentNode.attrs.index !== l && (r = !0, o.setNodeMarkup(s + 1, void 0, {
+          index: l
         }));
       }
-    }), r ? n : null;
+    }), r ? o : null;
   }
-}), me = H({
+}), Se = P({
   name: "numberedListItem",
   content: "inline*",
   addAttributes() {
     return {
       index: {
         default: null,
-        parseHTML: (o) => o.getAttribute("data-index"),
-        renderHTML: (o) => ({
-          "data-index": o.index
+        parseHTML: (n) => n.getAttribute("data-index"),
+        renderHTML: (n) => ({
+          "data-index": n.index
         })
       }
     };
@@ -355,8 +422,8 @@ const Et = (o) => {
       // Creates an ordered list when starting with "1.".
       new Y({
         find: new RegExp("^1\\.\\s$"),
-        handler: ({ state: o, chain: e, range: t }) => {
-          e().BNUpdateBlock(o.selection.from, {
+        handler: ({ state: n, chain: e, range: t }) => {
+          e().BNUpdateBlock(n.selection.from, {
             type: "numberedListItem",
             props: {}
           }).deleteRange({ from: t.from, to: t.to });
@@ -366,11 +433,11 @@ const Et = (o) => {
   },
   addKeyboardShortcuts() {
     return {
-      Enter: () => Et(this.editor)
+      Enter: () => vt(this.editor)
     };
   },
   addProseMirrorPlugins() {
-    return [fe()];
+    return [we()];
   },
   parseHTML() {
     return [
@@ -378,10 +445,10 @@ const Et = (o) => {
       // (e.g.: when pasting from other apps)
       {
         tag: "li",
-        getAttrs: (o) => {
-          if (typeof o == "string")
+        getAttrs: (n) => {
+          if (typeof n == "string")
             return !1;
-          const e = o.parentElement;
+          const e = n.parentElement;
           return e === null ? !1 : e.tagName === "OL" ? {} : !1;
         },
         node: "numberedListItem"
@@ -390,10 +457,10 @@ const Et = (o) => {
       // (e.g.: when pasting from blocknote)
       {
         tag: "p",
-        getAttrs: (o) => {
-          if (typeof o == "string")
+        getAttrs: (n) => {
+          if (typeof n == "string")
             return !1;
-          const e = o.parentElement;
+          const e = n.parentElement;
           return e === null ? !1 : e.getAttribute("data-content-type") === "numberedListItem" ? {} : !1;
         },
         priority: 300,
@@ -401,10 +468,10 @@ const Et = (o) => {
       }
     ];
   },
-  renderHTML({ HTMLAttributes: o }) {
+  renderHTML({ HTMLAttributes: n }) {
     return [
       "div",
-      w(o, {
+      x(n, {
         class: k.blockContent,
         "data-content-type": this.name
       }),
@@ -413,7 +480,7 @@ const Et = (o) => {
       ["p", { class: k.inlineContent }, 0]
     ];
   }
-}), ge = H({
+}), Ce = P({
   name: "paragraph",
   content: "inline*",
   parseHTML() {
@@ -425,17 +492,17 @@ const Et = (o) => {
       }
     ];
   },
-  renderHTML({ HTMLAttributes: o }) {
+  renderHTML({ HTMLAttributes: n }) {
     return [
       "div",
-      w(o, {
+      x(n, {
         class: k.blockContent,
         "data-content-type": this.name
       }),
       ["p", { class: k.inlineContent }, 0]
     ];
   }
-}), A = {
+}), N = {
   backgroundColor: {
     default: "transparent"
   },
@@ -447,41 +514,41 @@ const Et = (o) => {
     default: "left",
     values: ["left", "center", "right", "justify"]
   }
-}, ke = {
+}, wt = {
   paragraph: {
-    propSchema: A,
-    node: ge
+    propSchema: N,
+    node: Ce
   },
   heading: {
     propSchema: {
-      ...A,
+      ...N,
       level: { default: "1", values: ["1", "2", "3"] }
     },
-    node: ue
+    node: be
   },
   bulletListItem: {
-    propSchema: A,
-    node: he
+    propSchema: N,
+    node: ye
   },
   numberedListItem: {
-    propSchema: A,
-    node: me
+    propSchema: N,
+    node: Se
   }
 };
-function ye(o, e = JSON.stringify) {
+function Me(n, e = JSON.stringify) {
   const t = {};
-  return o.filter((n) => {
-    const r = e(n);
+  return n.filter((o) => {
+    const r = e(o);
     return Object.prototype.hasOwnProperty.call(t, r) ? !1 : t[r] = !0;
   });
 }
-function be(o) {
-  const e = o.filter(
-    (n, r) => o.indexOf(n) !== r
+function Ee(n) {
+  const e = n.filter(
+    (o, r) => n.indexOf(o) !== r
   );
-  return ye(e);
+  return Me(e);
 }
-const K = v.create({
+const U = T.create({
   name: "uniqueID",
   // we’ll set a very high priority to make sure this runs first
   // and is compatible with `appendTransaction` hooks of other extensions
@@ -490,7 +557,7 @@ const K = v.create({
     return {
       attributeName: "id",
       types: [],
-      generateID: () => window.__TEST_OPTIONS ? (window.__TEST_OPTIONS.mockID === void 0 ? window.__TEST_OPTIONS.mockID = 0 : window.__TEST_OPTIONS.mockID++, window.__TEST_OPTIONS.mockID.toString()) : jt(),
+      generateID: () => window.__TEST_OPTIONS ? (window.__TEST_OPTIONS.mockID === void 0 ? window.__TEST_OPTIONS.mockID = 0 : window.__TEST_OPTIONS.mockID++, window.__TEST_OPTIONS.mockID.toString()) : ne(),
       filterTransaction: null
     };
   },
@@ -501,9 +568,9 @@ const K = v.create({
         attributes: {
           [this.options.attributeName]: {
             default: null,
-            parseHTML: (o) => o.getAttribute(`data-${this.options.attributeName}`),
-            renderHTML: (o) => ({
-              [`data-${this.options.attributeName}`]: o[this.options.attributeName]
+            parseHTML: (n) => n.getAttribute(`data-${this.options.attributeName}`),
+            renderHTML: (n) => ({
+              [`data-${this.options.attributeName}`]: n[this.options.attributeName]
             })
           }
         }
@@ -511,69 +578,85 @@ const K = v.create({
     ];
   },
   // check initial content for missing ids
-  onCreate() {
-    if (this.editor.extensionManager.extensions.find(
-      (l) => l.name === "collaboration"
-    ))
-      return;
-    const { view: o, state: e } = this.editor, { tr: t, doc: n } = e, { types: r, attributeName: i, generateID: s } = this.options;
-    j(n, (l) => r.includes(l.type.name) && l.attrs[i] === null).forEach(({ node: l, pos: d }) => {
-      t.setNodeMarkup(d, void 0, {
-        ...l.attrs,
-        [i]: s()
-      });
-    }), t.setMeta("addToHistory", !1), o.dispatch(t);
-  },
+  // onCreate() {
+  //   // Don’t do this when the collaboration extension is active
+  //   // because this may update the content, so Y.js tries to merge these changes.
+  //   // This leads to empty block nodes.
+  //   // See: https://github.com/ueberdosis/tiptap/issues/2400
+  //   if (
+  //     this.editor.extensionManager.extensions.find(
+  //       (extension) => extension.name === "collaboration"
+  //     )
+  //   ) {
+  //     return;
+  //   }
+  //   const { view, state } = this.editor;
+  //   const { tr, doc } = state;
+  //   const { types, attributeName, generateID } = this.options;
+  //   const nodesWithoutId = findChildren(doc, (node) => {
+  //     return (
+  //       types.includes(node.type.name) && node.attrs[attributeName] === null
+  //     );
+  //   });
+  //   nodesWithoutId.forEach(({ node, pos }) => {
+  //     tr.setNodeMarkup(pos, undefined, {
+  //       ...node.attrs,
+  //       [attributeName]: generateID(),
+  //     });
+  //   });
+  //   tr.setMeta("addToHistory", false);
+  //   view.dispatch(tr);
+  // },
   addProseMirrorPlugins() {
-    let o = null, e = !1;
+    let n = null, e = !1;
     return [
-      new C({
-        key: new E("uniqueID"),
-        appendTransaction: (t, n, r) => {
-          const i = t.some((m) => m.docChanged) && !n.doc.eq(r.doc), s = this.options.filterTransaction && t.some((m) => {
-            var b, y;
-            return !(!((y = (b = this.options).filterTransaction) === null || y === void 0) && y.call(b, m));
+      new y({
+        key: new S("uniqueID"),
+        appendTransaction: (t, o, r) => {
+          const i = t.some((m) => m.docChanged) && !o.doc.eq(r.doc), s = this.options.filterTransaction && t.some((m) => {
+            var b, v;
+            return !(!((v = (b = this.options).filterTransaction) === null || v === void 0) && v.call(b, m));
           });
           if (!i || s)
             return;
-          const { tr: a } = r, { types: l, attributeName: d, generateID: c } = this.options, u = Ht(
-            n.doc,
+          const { tr: l } = r, { types: a, attributeName: d, generateID: c } = this.options, p = Pt(
+            o.doc,
             t
-          ), { mapping: p } = u;
-          if (Ot(u).forEach(({ newRange: m }) => {
+          ), { mapping: h } = p;
+          if (Ot(p).forEach(({ newRange: m }) => {
             const b = Dt(
               r.doc,
               m,
-              (M) => l.includes(M.type.name)
-            ), y = b.map(({ node: M }) => M.attrs[d]).filter((M) => M !== null), U = be(y);
-            b.forEach(({ node: M, pos: O }) => {
+              (C) => a.includes(C.type.name)
+            ), v = b.map(({ node: C }) => C.attrs[d]).filter((C) => C !== null), w = Ee(v);
+            b.forEach(({ node: C, pos: D }) => {
               var $;
-              const Z = ($ = a.doc.nodeAt(O)) === null || $ === void 0 ? void 0 : $.attrs[d];
+              const Z = ($ = l.doc.nodeAt(D)) === null || $ === void 0 ? void 0 : $.attrs[d];
               if (Z === null) {
-                a.setNodeMarkup(O, void 0, {
-                  ...M.attrs,
+                l.setNodeMarkup(D, void 0, {
+                  ...C.attrs,
                   [d]: c()
                 });
                 return;
               }
-              const { deleted: Lt } = p.invert().mapResult(O);
-              Lt && U.includes(Z) && a.setNodeMarkup(O, void 0, {
-                ...M.attrs,
+              const { deleted: At } = h.invert().mapResult(D);
+              At && w.includes(Z) && l.setNodeMarkup(D, void 0, {
+                ...C.attrs,
                 [d]: c()
               });
             });
-          }), !!a.steps.length)
-            return a;
+          }), !!l.steps.length)
+            return l;
         },
         // we register a global drag handler to track the current drag source element
         view(t) {
-          const n = (r) => {
+          const o = (r) => {
             var i;
-            o = !((i = t.dom.parentElement) === null || i === void 0) && i.contains(r.target) ? t.dom.parentElement : null;
+            n = !((i = t.dom.parentElement) === null || i === void 0) && i.contains(r.target) ? t.dom.parentElement : null;
           };
-          return window.addEventListener("dragstart", n), {
+          return window.addEventListener("dragstart", o), {
             destroy() {
-              window.removeEventListener("dragstart", n);
+              window.removeEventListener("dragstart", o);
             }
           };
         },
@@ -583,9 +666,9 @@ const K = v.create({
           handleDOMEvents: {
             // only create new ids for dropped content while holding `alt`
             // or content is dragged from another editor
-            drop: (t, n) => {
+            drop: (t, o) => {
               var r;
-              return (o !== t.dom.parentElement || ((r = n.dataTransfer) === null || r === void 0 ? void 0 : r.effectAllowed) === "copy") && (o = null, e = !0), !1;
+              return (n !== t.dom.parentElement || ((r = o.dataTransfer) === null || r === void 0 ? void 0 : r.effectAllowed) === "copy") && (n = null, e = !0), !1;
             },
             // always create new ids on pasted content
             paste: () => (e = !0, !1)
@@ -595,29 +678,29 @@ const K = v.create({
           transformPasted: (t) => {
             if (!e)
               return t;
-            const { types: n, attributeName: r } = this.options, i = (s) => {
-              const a = [];
-              return s.forEach((l) => {
-                if (l.isText) {
-                  a.push(l);
+            const { types: o, attributeName: r } = this.options, i = (s) => {
+              const l = [];
+              return s.forEach((a) => {
+                if (a.isText) {
+                  l.push(a);
                   return;
                 }
-                if (!n.includes(l.type.name)) {
-                  a.push(l.copy(i(l.content)));
+                if (!o.includes(a.type.name)) {
+                  l.push(a.copy(i(a.content)));
                   return;
                 }
-                const d = l.type.create(
+                const d = a.type.create(
                   {
-                    ...l.attrs,
+                    ...a.attrs,
                     [r]: null
                   },
-                  i(l.content),
-                  l.marks
+                  i(a.content),
+                  a.marks
                 );
-                a.push(d);
-              }), _.from(a);
+                l.push(d);
+              }), I.from(l);
             };
-            return e = !1, new I(
+            return e = !1, new B(
               i(t.content),
               t.openStart,
               t.openEnd
@@ -628,93 +711,93 @@ const K = v.create({
     ];
   }
 });
-class ve extends Error {
+class Te extends Error {
   constructor(e) {
     super(`Unreachable case: ${e}`);
   }
 }
-const Ct = /* @__PURE__ */ new Set([
+const St = /* @__PURE__ */ new Set([
   "bold",
   "italic",
   "underline",
   "strike",
   "code"
-]), Mt = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
-function nt(o, e) {
+]), Ct = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
+function rt(n, e) {
   const t = [];
-  for (const [n, r] of Object.entries(o.styles))
-    Ct.has(n) ? t.push(e.mark(n)) : Mt.has(n) && t.push(e.mark(n, { color: r }));
-  return o.text.split(/(\n)/g).filter((n) => n.length > 0).map((n) => n === `
-` ? e.nodes.hardBreak.create() : e.text(n, t));
+  for (const [o, r] of Object.entries(n.styles))
+    St.has(o) ? t.push(e.mark(o)) : Ct.has(o) && t.push(e.mark(o, { color: r }));
+  return n.text.split(/(\n)/g).filter((o) => o.length > 0).map((o) => o === `
+` ? e.nodes.hardBreak.create() : e.text(o, t));
 }
-function Ee(o, e) {
+function Be(n, e) {
   const t = e.marks.link.create({
-    href: o.href
+    href: n.href
   });
-  return Bt(o.content, e).map((n) => {
-    if (n.type.name === "text")
-      return n.mark([...n.marks, t]);
-    if (n.type.name === "hardBreak")
-      return n;
+  return Mt(n.content, e).map((o) => {
+    if (o.type.name === "text")
+      return o.mark([...o.marks, t]);
+    if (o.type.name === "hardBreak")
+      return o;
     throw new Error("unexpected node type");
   });
 }
-function Bt(o, e) {
+function Mt(n, e) {
   let t = [];
-  if (typeof o == "string")
+  if (typeof n == "string")
     return t.push(
-      ...nt({ type: "text", text: o, styles: {} }, e)
+      ...rt({ type: "text", text: n, styles: {} }, e)
     ), t;
-  for (const n of o)
-    t.push(...nt(n, e));
+  for (const o of n)
+    t.push(...rt(o, e));
   return t;
 }
-function Tt(o, e) {
+function Et(n, e) {
   let t = [];
-  for (const n of o)
-    if (n.type === "link")
-      t.push(...Ee(n, e));
-    else if (n.type === "text")
-      t.push(...Bt([n], e));
+  for (const o of n)
+    if (o.type === "link")
+      t.push(...Be(o, e));
+    else if (o.type === "text")
+      t.push(...Mt([o], e));
     else
-      throw new ve(n);
+      throw new Te(o);
   return t;
 }
-function z(o, e) {
-  let t = o.id;
-  t === void 0 && (t = K.options.generateID());
-  let n = o.type;
-  n === void 0 && (n = "paragraph");
+function O(n, e) {
+  let t = n.id;
+  t === void 0 && (t = U.options.generateID());
+  let o = n.type;
+  o === void 0 && (o = "paragraph");
   let r;
-  if (!o.content)
-    r = e.nodes[n].create(o.props);
-  else if (typeof o.content == "string")
-    r = e.nodes[n].create(
-      o.props,
-      e.text(o.content)
+  if (!n.content)
+    r = e.nodes[o].create(n.props);
+  else if (typeof n.content == "string")
+    r = e.nodes[o].create(
+      n.props,
+      e.text(n.content)
     );
   else {
-    const a = Tt(o.content, e);
-    r = e.nodes[n].create(o.props, a);
+    const l = Et(n.content, e);
+    r = e.nodes[o].create(n.props, l);
   }
   const i = [];
-  if (o.children)
-    for (const a of o.children)
-      i.push(z(a, e));
+  if (n.children)
+    for (const l of n.children)
+      i.push(O(l, e));
   const s = e.nodes.blockGroup.create({}, i);
   return e.nodes.blockContainer.create(
     {
       id: t,
-      ...o.props
+      ...n.props
     },
     i.length > 0 ? [r, s] : r
   );
 }
-function Ce(o) {
+function xe(n) {
   const e = [];
   let t;
-  return o.content.forEach((n) => {
-    if (n.type.name === "hardBreak") {
+  return n.content.forEach((o) => {
+    if (o.type.name === "hardBreak") {
       t ? t.type === "text" ? t.text += `
 ` : t.type === "link" && (t.content[t.content.length - 1].text += `
 `) : t = {
@@ -727,12 +810,12 @@ function Ce(o) {
     }
     const r = {};
     let i;
-    for (const s of n.marks)
+    for (const s of o.marks)
       if (s.type.name === "link")
         i = s;
-      else if (Ct.has(s.type.name))
+      else if (St.has(s.type.name))
         r[s.type.name] = !0;
-      else if (Mt.has(s.type.name))
+      else if (Ct.has(s.type.name))
         r[s.type.name] = s.attrs.color;
       else
         throw Error("Mark is of an unrecognized type: " + s.type.name);
@@ -742,19 +825,19 @@ function Ce(o) {
       content: [
         {
           type: "text",
-          text: n.textContent,
+          text: o.textContent,
           styles: r
         }
       ]
-    }) : JSON.stringify(t.styles) === JSON.stringify(r) ? t.text += n.textContent : (e.push(t), t = {
+    }) : JSON.stringify(t.styles) === JSON.stringify(r) ? t.text += o.textContent : (e.push(t), t = {
       type: "text",
-      text: n.textContent,
+      text: o.textContent,
       styles: r
     }) : t.type === "link" && (i ? t.href === i.attrs.href ? JSON.stringify(
       t.content[t.content.length - 1].styles
-    ) === JSON.stringify(r) ? t.content[t.content.length - 1].text += n.textContent : t.content.push({
+    ) === JSON.stringify(r) ? t.content[t.content.length - 1].text += o.textContent : t.content.push({
       type: "text",
-      text: n.textContent,
+      text: o.textContent,
       styles: r
     }) : (e.push(t), t = {
       type: "link",
@@ -762,13 +845,13 @@ function Ce(o) {
       content: [
         {
           type: "text",
-          text: n.textContent,
+          text: o.textContent,
           styles: r
         }
       ]
     }) : (e.push(t), t = {
       type: "text",
-      text: n.textContent,
+      text: o.textContent,
       styles: r
     })) : i ? t = {
       type: "link",
@@ -776,271 +859,56 @@ function Ce(o) {
       content: [
         {
           type: "text",
-          text: n.textContent,
+          text: o.textContent,
           styles: r
         }
       ]
     } : t = {
       type: "text",
-      text: n.textContent,
+      text: o.textContent,
       styles: r
     };
   }), t && e.push(t), e;
 }
-function B(o, e, t) {
-  if (o.type.name !== "blockContainer")
+function M(n, e, t) {
+  if (n.type.name !== "blockContainer")
     throw Error(
-      "Node must be of type blockContainer, but is of type" + o.type.name + "."
+      "Node must be of type blockContainer, but is of type" + n.type.name + "."
     );
-  const n = t == null ? void 0 : t.get(o);
-  if (n)
-    return n;
-  const r = g(o, 0);
+  const o = t == null ? void 0 : t.get(n);
+  if (o)
+    return o;
+  const r = g(n, 0);
   let i = r.id;
-  i === null && (i = K.options.generateID());
+  i === null && (i = U.options.generateID());
   const s = {};
-  for (const [c, u] of Object.entries({
+  for (const [c, p] of Object.entries({
     ...r.node.attrs,
     ...r.contentNode.attrs
   })) {
-    const p = e[r.contentType.name];
-    if (!p)
+    const h = e[r.contentType.name];
+    if (!h)
       throw Error(
         "Block is of an unrecognized type: " + r.contentType.name
       );
-    const f = p.propSchema;
-    c in f ? s[c] = u : c !== "id" && !(c in A) && console.warn("Block has an unrecognized attribute: " + c);
+    const f = h.propSchema;
+    c in f ? s[c] = p : c !== "id" && !(c in N) && console.warn("Block has an unrecognized attribute: " + c);
   }
-  const a = Ce(r.contentNode), l = [];
+  const l = xe(r.contentNode), a = [];
   for (let c = 0; c < r.numChildBlocks; c++)
-    l.push(
-      B(r.node.lastChild.child(c), e, t)
+    a.push(
+      M(r.node.lastChild.child(c), e, t)
     );
   const d = {
     id: i,
     type: r.contentType.name,
     props: s,
-    content: a,
-    children: l
-  };
-  return t == null || t.set(o, d), d;
-}
-function J(o, e) {
-  let t, n;
-  if (e.firstChild.descendants((r, i) => t ? !1 : r.type.name !== "blockContainer" || r.attrs.id !== o ? !0 : (t = r, n = i + 1, !1)), t === void 0 || n === void 0)
-    throw Error("Could not find block in the editor with matching ID.");
-  return {
-    node: t,
-    posBeforeNode: n
-  };
-}
-function wt(o, e, t = "before", n) {
-  const r = typeof e == "string" ? e : e.id, i = [];
-  for (const d of o)
-    i.push(z(d, n.schema));
-  let s = -1;
-  const { node: a, posBeforeNode: l } = J(r, n.state.doc);
-  if (t === "before" && (s = l), t === "after" && (s = l + a.nodeSize), t === "nested") {
-    if (a.childCount < 2) {
-      s = l + a.firstChild.nodeSize + 1;
-      const d = n.state.schema.nodes.blockGroup.create(
-        {},
-        i
-      );
-      n.view.dispatch(
-        n.state.tr.insert(s, d)
-      );
-      return;
-    }
-    s = l + a.firstChild.nodeSize + 2;
-  }
-  n.view.dispatch(n.state.tr.insert(s, i));
-}
-function Me(o, e, t) {
-  const n = typeof o == "string" ? o : o.id, { posBeforeNode: r } = J(n, t.state.doc);
-  t.commands.BNUpdateBlock(r + 1, e);
-}
-function St(o, e) {
-  const t = new Set(
-    o.map(
-      (r) => typeof r == "string" ? r : r.id
-    )
-  );
-  let n = 0;
-  if (e.state.doc.descendants((r, i) => {
-    if (t.size === 0)
-      return !1;
-    if (r.type.name !== "blockContainer" || !t.has(r.attrs.id))
-      return !0;
-    t.delete(r.attrs.id);
-    const s = e.state.doc.nodeSize;
-    e.commands.BNDeleteBlock(i - n + 1);
-    const a = e.state.doc.nodeSize;
-    return n += s - a, !1;
-  }), t.size > 0) {
-    let r = [...t].join(`
-`);
-    throw Error(
-      "Blocks with the following IDs could not be found in the editor: " + r
-    );
-  }
-}
-function Be(o, e, t) {
-  wt(e, o[0], "before", t), St(o, t);
-}
-function Te() {
-  const o = (e) => {
-    let t = e.children.length;
-    for (let n = 0; n < t; n++) {
-      const r = e.children[n];
-      if (r.type === "element" && (o(r), r.tagName === "u"))
-        if (r.children.length > 0) {
-          e.children.splice(n, 1, ...r.children);
-          const i = r.children.length - 1;
-          t += i, n += i;
-        } else
-          e.children.splice(n, 1), t--, n--;
-    }
-  };
-  return o;
-}
-function we(o) {
-  const e = /* @__PURE__ */ new Set([
-    ...o.orderedListItemBlockTypes,
-    ...o.unorderedListItemBlockTypes
-  ]), t = (n) => {
-    let r = n.children.length, i;
-    for (let s = 0; s < r; s++) {
-      const l = n.children[s].children[0], d = l.children[0], c = l.children.length === 2 ? l.children[1] : null, u = e.has(
-        d.properties.dataContentType
-      ), p = u ? o.orderedListItemBlockTypes.has(
-        d.properties.dataContentType
-      ) ? "ol" : "ul" : null;
-      if (c !== null && t(c), i && i.tagName !== p) {
-        n.children.splice(
-          s - i.children.length,
-          i.children.length,
-          i
-        );
-        const f = i.children.length - 1;
-        s -= f, r -= f, i = void 0;
-      }
-      if (u) {
-        i || (i = et(
-          document.createElement(p)
-        ));
-        const f = et(
-          document.createElement("li")
-        );
-        f.children.push(d.children[0]), c !== null && f.children.push(...c.children), i.children.push(f);
-      } else if (c !== null) {
-        n.children.splice(s + 1, 0, ...c.children), n.children[s] = d.children[0];
-        const f = c.children.length;
-        s += f, r += f;
-      } else
-        n.children[s] = d.children[0];
-    }
-    i && n.children.splice(
-      r - i.children.length,
-      i.children.length,
-      i
-    );
+    content: l,
+    children: a
   };
-  return t;
-}
-async function xt(o, e) {
-  const t = document.createElement("div"), n = q.fromSchema(e);
-  for (const i of o) {
-    const s = z(i, e), a = n.serializeNode(s);
-    t.appendChild(a);
-  }
-  return (await V().use(lt, { fragment: !0 }).use(we, {
-    orderedListItemBlockTypes: /* @__PURE__ */ new Set(["numberedListItem"]),
-    unorderedListItemBlockTypes: /* @__PURE__ */ new Set(["bulletListItem"])
-  }).use(dt).process(t.innerHTML)).value;
-}
-async function It(o, e, t) {
-  const n = document.createElement("div");
-  n.innerHTML = o.trim();
-  const i = Gt.fromSchema(t).parse(n), s = [];
-  for (let a = 0; a < i.firstChild.childCount; a++)
-    s.push(B(i.firstChild.child(a), e));
-  return s;
+  return t == null || t.set(n, d), d;
 }
-async function Se(o, e) {
-  return (await V().use(lt, { fragment: !0 }).use(Te).use(qt).use(ct).use(Vt).process(await xt(o, e))).value;
-}
-async function xe(o, e, t) {
-  const n = await V().use(Wt).use(ct).use(Yt).use(dt).process(o);
-  return It(n.value, e, t);
-}
-const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4vj2p_35", Le = "_dragPreview_4vj2p_68", P = {
-  bnEditor: Ie,
-  bnRoot: _e,
-  defaultStyles: Pe,
-  dragPreview: Le,
-  "collaboration-cursor__caret": "_collaboration-cursor__caret_4vj2p_74",
-  "collaboration-cursor__label": "_collaboration-cursor__label_4vj2p_85"
-}, Ne = v.create({
-  name: "blockBackgroundColor",
-  addGlobalAttributes() {
-    return [
-      {
-        types: ["blockContainer"],
-        attributes: {
-          backgroundColor: {
-            default: "default",
-            parseHTML: (o) => o.hasAttribute("data-background-color") ? o.getAttribute("data-background-color") : "default",
-            renderHTML: (o) => o.backgroundColor !== "default" && {
-              "data-background-color": o.backgroundColor
-            }
-          }
-        }
-      }
-    ];
-  },
-  addCommands() {
-    return {
-      setBlockBackgroundColor: (o, e) => ({ state: t, view: n }) => {
-        const r = g(t.doc, o);
-        return r === void 0 ? !1 : (t.tr.setNodeAttribute(
-          r.startPos - 1,
-          "backgroundColor",
-          e
-        ), n.focus(), !0);
-      }
-    };
-  }
-}), Ae = st.create({
-  name: "backgroundColor",
-  addAttributes() {
-    return {
-      color: {
-        default: void 0,
-        parseHTML: (o) => o.getAttribute("data-background-color"),
-        renderHTML: (o) => ({
-          "data-background-color": o.color
-        })
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "span",
-        getAttrs: (o) => typeof o == "string" ? !1 : o.hasAttribute("data-background-color") ? { color: o.getAttribute("data-background-color") } : !1
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes: o }) {
-    return ["span", o, 0];
-  },
-  addCommands() {
-    return {
-      setBackgroundColor: (o) => ({ commands: e }) => o !== "default" ? e.setMark(this.name, { color: o }) : e.unsetMark(this.name)
-    };
-  }
-}), rt = new E("previous-blocks"), He = {
+const it = new S("previous-blocks"), _e = {
   // Numbered List Items
   index: "index",
   // Headings
@@ -1049,22 +917,22 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
   type: "type",
   depth: "depth",
   "depth-change": "depth-change"
-}, Oe = () => {
-  let o;
-  return new C({
-    key: rt,
+}, Ie = () => {
+  let n;
+  return new y({
+    key: it,
     view(e) {
       return {
-        update: async (t, n) => {
+        update: async (t, o) => {
           var r;
-          ((r = this.key) == null ? void 0 : r.getState(t.state).updatedBlocks.size) > 0 && (o = setTimeout(() => {
+          ((r = this.key) == null ? void 0 : r.getState(t.state).updatedBlocks.size) > 0 && (n = setTimeout(() => {
             t.dispatch(
-              t.state.tr.setMeta(rt, { clearUpdate: !0 })
+              t.state.tr.setMeta(it, { clearUpdate: !0 })
             );
           }, 0));
         },
         destroy: () => {
-          o && clearTimeout(o);
+          n && clearTimeout(n);
         }
       };
     },
@@ -1079,26 +947,26 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
           updatedBlocks: /* @__PURE__ */ new Set()
         };
       },
-      apply(e, t, n, r) {
-        if (t.currentTransactionOldBlockAttrs = {}, t.updatedBlocks.clear(), !e.docChanged || n.doc.eq(r.doc))
+      apply(e, t, o, r) {
+        if (t.currentTransactionOldBlockAttrs = {}, t.updatedBlocks.clear(), !e.docChanged || o.doc.eq(r.doc))
           return t;
-        const i = {}, s = j(n.doc, (d) => d.attrs.id), a = new Map(
+        const i = {}, s = Q(o.doc, (d) => d.attrs.id), l = new Map(
           s.map((d) => [d.node.attrs.id, d])
-        ), l = j(r.doc, (d) => d.attrs.id);
-        for (let d of l) {
-          const c = a.get(d.node.attrs.id), u = c == null ? void 0 : c.node.firstChild, p = d.node.firstChild;
-          if (c && u && p) {
+        ), a = Q(r.doc, (d) => d.attrs.id);
+        for (let d of a) {
+          const c = l.get(d.node.attrs.id), p = c == null ? void 0 : c.node.firstChild, h = d.node.firstChild;
+          if (c && p && h) {
             const f = {
-              index: p.attrs.index,
-              level: p.attrs.level,
-              type: p.type.name,
+              index: h.attrs.index,
+              level: h.attrs.level,
+              type: h.type.name,
               depth: r.doc.resolve(d.pos).depth
             };
             let m = {
-              index: u.attrs.index,
-              level: u.attrs.level,
-              type: u.type.name,
-              depth: n.doc.resolve(c.pos).depth
+              index: p.attrs.index,
+              level: p.attrs.level,
+              type: p.type.name,
+              depth: o.doc.resolve(c.pos).depth
             };
             i[d.node.attrs.id] = m, e.getMeta("numberedListIndexing") && (d.node.attrs.id in t.prevTransactionOldBlockAttrs && (m = t.prevTransactionOldBlockAttrs[d.node.attrs.id]), f.type === "numberedListItem" && (m.index = f.index)), t.currentTransactionOldBlockAttrs[d.node.attrs.id] = m, JSON.stringify(m) !== JSON.stringify(f) && (m["depth-change"] = m.depth - f.depth, t.updatedBlocks.add(d.node.attrs.id));
           }
@@ -1111,28 +979,28 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
         const t = this.getState(e);
         if (t.updatedBlocks.size === 0)
           return;
-        const n = [];
+        const o = [];
         return e.doc.descendants((r, i) => {
           if (!r.attrs.id || !t.updatedBlocks.has(r.attrs.id))
             return;
-          const s = t.currentTransactionOldBlockAttrs[r.attrs.id], a = {};
+          const s = t.currentTransactionOldBlockAttrs[r.attrs.id], l = {};
           for (let [d, c] of Object.entries(s))
-            a["data-prev-" + He[d]] = c || "none";
-          const l = D.node(i, i + r.nodeSize, {
-            ...a
+            l["data-prev-" + _e[d]] = c || "none";
+          const a = R.node(i, i + r.nodeSize, {
+            ...l
           });
-          n.push(l);
-        }), F.create(e.doc, n);
+          o.push(a);
+        }), z.create(e.doc, o);
       }
     }
   });
-}, De = {
+}, He = {
   blockColor: "data-block-color",
   blockStyle: "data-block-style",
   id: "data-id",
   depth: "data-depth",
   depthChange: "data-depth-change"
-}, Fe = R.create({
+}, Ae = V.create({
   name: "blockContainer",
   group: "blockContainer",
   // A block always contains content, and optionally a blockGroup which contains nested blocks
@@ -1149,27 +1017,27 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
     return [
       {
         tag: "div",
-        getAttrs: (o) => {
-          if (typeof o == "string")
+        getAttrs: (n) => {
+          if (typeof n == "string")
             return !1;
           const e = {};
-          for (let [t, n] of Object.entries(De))
-            o.getAttribute(n) && (e[t] = o.getAttribute(n));
-          return o.getAttribute("data-node-type") === "blockContainer" ? e : !1;
+          for (let [t, o] of Object.entries(He))
+            n.getAttribute(o) && (e[t] = n.getAttribute(o));
+          return n.getAttribute("data-node-type") === "blockContainer" ? e : !1;
         }
       }
     ];
   },
-  renderHTML({ HTMLAttributes: o }) {
+  renderHTML({ HTMLAttributes: n }) {
     return [
       "div",
-      w(o, {
+      x(n, {
         class: k.blockOuter,
         "data-node-type": "block-outer"
       }),
       [
         "div",
-        w(o, {
+        x(n, {
           // TODO: maybe remove html attributes from inner block
           class: k.block,
           "data-node-type": this.name
@@ -1181,55 +1049,55 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
   addCommands() {
     return {
       // Creates a new text block at a given position.
-      BNCreateBlock: (o) => ({ state: e, dispatch: t }) => {
-        const n = e.schema.nodes.blockContainer.createAndFill();
-        return t && e.tr.insert(o, n), !0;
+      BNCreateBlock: (n) => ({ state: e, dispatch: t }) => {
+        const o = e.schema.nodes.blockContainer.createAndFill();
+        return t && e.tr.insert(n, o), !0;
       },
       // Deletes a block at a given position.
-      BNDeleteBlock: (o) => ({ state: e, dispatch: t }) => {
-        const n = g(e.doc, o);
-        if (n === void 0)
+      BNDeleteBlock: (n) => ({ state: e, dispatch: t }) => {
+        const o = g(e.doc, n);
+        if (o === void 0)
           return !1;
-        const { startPos: r, endPos: i } = n;
+        const { startPos: r, endPos: i } = o;
         return t && e.tr.deleteRange(r, i), !0;
       },
       // Updates a block at a given position.
-      BNUpdateBlock: (o, e) => ({ state: t, dispatch: n }) => {
-        const r = g(t.doc, o);
+      BNUpdateBlock: (n, e) => ({ state: t, dispatch: o }) => {
+        const r = g(t.doc, n);
         if (r === void 0)
           return !1;
-        const { startPos: i, endPos: s, node: a, contentNode: l } = r;
-        if (n) {
+        const { startPos: i, endPos: s, node: l, contentNode: a } = r;
+        if (o) {
           if (e.children !== void 0) {
             const d = [];
             for (const c of e.children)
-              d.push(z(c, t.schema));
-            a.childCount === 2 ? t.tr.replace(
-              i + l.nodeSize + 1,
+              d.push(O(c, t.schema));
+            l.childCount === 2 ? t.tr.replace(
+              i + a.nodeSize + 1,
               s - 1,
-              new I(_.from(d), 0, 0)
+              new B(I.from(d), 0, 0)
             ) : t.tr.insert(
-              i + l.nodeSize,
+              i + a.nodeSize,
               t.schema.nodes.blockGroup.create({}, d)
             );
           }
           if (e.content !== void 0) {
             let d = [];
-            typeof e.content == "string" ? d.push(t.schema.text(e.content)) : d = Tt(e.content, t.schema), t.tr.replace(
+            typeof e.content == "string" ? d.push(t.schema.text(e.content)) : d = Et(e.content, t.schema), t.tr.replace(
               i + 1,
-              i + l.nodeSize - 1,
-              new I(_.from(d), 0, 0)
+              i + a.nodeSize - 1,
+              new B(I.from(d), 0, 0)
             );
           }
           t.tr.setNodeMarkup(
             i,
             e.type === void 0 ? void 0 : t.schema.nodes[e.type],
             {
-              ...l.attrs,
+              ...a.attrs,
               ...e.props
             }
           ), t.tr.setNodeMarkup(i - 1, void 0, {
-            ...a.attrs,
+            ...l.attrs,
             ...e.props
           });
         }
@@ -1252,40 +1120,46 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
       //    Block2Block3
       // Block4
       //     Block5
-      BNMergeBlocks: (o) => ({ state: e, dispatch: t }) => {
-        const n = e.doc.resolve(o + 1).node().type.name === "blockContainer", r = e.doc.resolve(o - 1).node().type.name === "blockContainer";
-        if (!n || !r)
+      BNMergeBlocks: (n) => ({ state: e, dispatch: t }) => {
+        const o = e.doc.resolve(n + 1).node().type.name === "blockContainer", r = e.doc.resolve(n - 1).node().type.name === "blockContainer";
+        if (!o || !r)
           return !1;
         const i = g(
           e.doc,
-          o + 1
-        ), { node: s, contentNode: a, startPos: l, endPos: d, depth: c } = i;
+          n + 1
+        ), { node: s, contentNode: l, startPos: a, endPos: d, depth: c } = i;
         if (s.childCount === 2) {
           const f = e.doc.resolve(
-            l + a.nodeSize + 1
+            a + l.nodeSize + 1
           ), m = e.doc.resolve(d - 1), b = f.blockRange(m);
           t && e.tr.lift(b, c - 1);
         }
-        let u = o - 1, p = g(e.doc, u);
-        for (; p.numChildBlocks > 0; )
-          if (u--, p = g(e.doc, u), p === void 0)
+        let p = n - 1, h = g(e.doc, p);
+        for (; h.numChildBlocks > 0; )
+          if (p--, h = g(e.doc, p), h === void 0)
             return !1;
-        return t && (e.tr.deleteRange(l, l + a.nodeSize), e.tr.insertText(a.textContent, u - 1), e.tr.setSelection(
-          new tt(e.doc.resolve(u - 1))
+        return t && (t(
+          e.tr.deleteRange(a, a + l.nodeSize).replace(
+            p - 1,
+            a,
+            new B(l.content, 0, 0)
+          ).scrollIntoView()
+        ), e.tr.setSelection(
+          new et(e.doc.resolve(p - 1))
         )), !0;
       },
       // Splits a block at a given position. Content after the position is moved to a new block below, at the same
       // nesting level.
-      BNSplitBlock: (o, e) => ({ state: t, dispatch: n }) => {
-        const r = g(t.doc, o);
+      BNSplitBlock: (n, e) => ({ state: t, dispatch: o }) => {
+        const r = g(t.doc, n);
         if (r === void 0)
           return !1;
-        const { contentNode: i, contentType: s, startPos: a, endPos: l, depth: d } = r, c = t.doc.cut(a + 1, o), u = t.doc.cut(o, l - 1), p = t.schema.nodes.blockContainer.createAndFill(), f = l + 1, m = f + 2;
-        return n && (t.tr.insert(f, p), t.tr.replace(
+        const { contentNode: i, contentType: s, startPos: l, endPos: a, depth: d } = r, c = t.doc.cut(l + 1, n), p = t.doc.cut(n, a - 1), h = t.schema.nodes.blockContainer.createAndFill(), f = a + 1, m = f + 2;
+        return o && (t.tr.insert(f, h), t.tr.replace(
           m,
           m + 1,
-          u.content.size > 0 ? new I(
-            _.from(u),
+          p.content.size > 0 ? new B(
+            I.from(p),
             d + 2,
             d + 2
           ) : void 0
@@ -1295,12 +1169,12 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
           t.schema.node(s).type,
           i.attrs
         ), t.tr.setSelection(
-          new tt(t.doc.resolve(m))
+          new et(t.doc.resolve(m))
         ), t.tr.replace(
-          a + 1,
-          l - 1,
-          c.content.size > 0 ? new I(
-            _.from(c),
+          l + 1,
+          a - 1,
+          c.content.size > 0 ? new B(
+            I.from(c),
             d + 2,
             d + 2
           ) : void 0
@@ -1309,7 +1183,7 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
     };
   },
   addProseMirrorPlugins() {
-    return [Oe()];
+    return [Ie()];
   },
   addKeyboardShortcuts() {
     return {
@@ -1319,59 +1193,59 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
         // Undoes an input rule if one was triggered in the last editor state change.
         () => t.undoInputRule(),
         // Reverts block content type to a paragraph if the selection is at the start of the block.
-        () => t.command(({ state: n }) => {
+        () => t.command(({ state: o }) => {
           const { contentType: r } = g(
-            n.doc,
-            n.selection.from
-          ), i = n.selection.$anchor.parentOffset === 0, s = r.name === "paragraph";
-          return i && !s ? t.BNUpdateBlock(n.selection.from, {
+            o.doc,
+            o.selection.from
+          ), i = o.selection.$anchor.parentOffset === 0, s = r.name === "paragraph";
+          return i && !s ? t.BNUpdateBlock(o.selection.from, {
             type: "paragraph",
             props: {}
           }) : !1;
         }),
         // Removes a level of nesting if the block is indented if the selection is at the start of the block.
-        () => t.command(({ state: n }) => n.selection.$anchor.parentOffset === 0 ? t.liftListItem("blockContainer") : !1),
+        () => t.command(({ state: o }) => o.selection.$anchor.parentOffset === 0 ? t.liftListItem("blockContainer") : !1),
         // Merges block with the previous one if it isn't indented, isn't the first block in the doc, and the selection
         // is at the start of the block.
-        () => t.command(({ state: n }) => {
+        () => t.command(({ state: o }) => {
           const { depth: r, startPos: i } = g(
-            n.doc,
-            n.selection.from
-          ), s = n.selection.$anchor.parentOffset === 0, a = n.selection.anchor === n.selection.head, l = i === 2, d = i - 1;
-          return !l && s && a && r === 2 ? t.BNMergeBlocks(d) : !1;
+            o.doc,
+            o.selection.from
+          ), s = o.selection.$anchor.parentOffset === 0, l = o.selection.anchor === o.selection.head, a = i === 2, d = i - 1;
+          return !a && s && l && r === 2 ? t.BNMergeBlocks(d) : !1;
         })
       ]),
       Enter: () => this.editor.commands.first(({ commands: t }) => [
         // Removes a level of nesting if the block is empty & indented, while the selection is also empty & at the start
         // of the block.
-        () => t.command(({ state: n }) => {
+        () => t.command(({ state: o }) => {
           const { node: r, depth: i } = g(
-            n.doc,
-            n.selection.from
-          ), s = n.selection.$anchor.parentOffset === 0, a = n.selection.anchor === n.selection.head, l = r.textContent.length === 0, d = i > 2;
-          return s && a && l && d ? t.liftListItem("blockContainer") : !1;
+            o.doc,
+            o.selection.from
+          ), s = o.selection.$anchor.parentOffset === 0, l = o.selection.anchor === o.selection.head, a = r.textContent.length === 0, d = i > 2;
+          return s && l && a && d ? t.liftListItem("blockContainer") : !1;
         }),
         // Creates a new block and moves the selection to it if the current one is empty, while the selection is also
         // empty & at the start of the block.
-        () => t.command(({ state: n, chain: r }) => {
+        () => t.command(({ state: o, chain: r }) => {
           const { node: i, endPos: s } = g(
-            n.doc,
-            n.selection.from
-          ), a = n.selection.$anchor.parentOffset === 0, l = n.selection.anchor === n.selection.head, d = i.textContent.length === 0;
-          if (a && l && d) {
-            const c = s + 1, u = c + 2;
-            return r().BNCreateBlock(c).setTextSelection(u).run(), !0;
+            o.doc,
+            o.selection.from
+          ), l = o.selection.$anchor.parentOffset === 0, a = o.selection.anchor === o.selection.head, d = i.textContent.length === 0;
+          if (l && a && d) {
+            const c = s + 1, p = c + 2;
+            return r().BNCreateBlock(c).setTextSelection(p).run(), !0;
           }
           return !1;
         }),
         // Splits the current block, moving content inside that's after the cursor to a new text block below. Also
         // deletes the selection beforehand, if it's not empty.
-        () => t.command(({ state: n, chain: r }) => {
+        () => t.command(({ state: o, chain: r }) => {
           const { node: i } = g(
-            n.doc,
-            n.selection.from
+            o.doc,
+            o.selection.from
           );
-          return i.textContent.length === 0 ? !1 : (r().deleteSelection().BNSplitBlock(n.selection.from, !1).run(), !0);
+          return i.textContent.length === 0 ? !1 : (r().deleteSelection().BNSplitBlock(o.selection.from, !1).run(), !0);
         })
       ]),
       // Always returning true for tab key presses ensures they're not captured by the browser. Otherwise, they blur the
@@ -1409,7 +1283,7 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
       })
     };
   }
-}), Re = R.create({
+}), Le = V.create({
   name: "blockGroup",
   group: "blockGroup",
   content: "blockContainer+",
@@ -1422,30 +1296,30 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
     return [
       {
         tag: "div",
-        getAttrs: (o) => typeof o == "string" ? !1 : o.getAttribute("data-node-type") === "blockGroup" ? null : !1
+        getAttrs: (n) => typeof n == "string" ? !1 : n.getAttribute("data-node-type") === "blockGroup" ? null : !1
       }
     ];
   },
-  renderHTML({ HTMLAttributes: o }) {
+  renderHTML({ HTMLAttributes: n }) {
     return [
       "div",
-      w(this.options.HTMLAttributes, o, {
+      x(this.options.HTMLAttributes, n, {
         class: k.blockGroup,
         "data-node-type": "blockGroup"
       }),
       0
     ];
   }
-}), ze = [
-  Fe,
-  Re,
-  R.create({
+}), Ne = [
+  Ae,
+  Le,
+  V.create({
     name: "doc",
     topNode: !0,
     content: "blockGroup"
   })
-], Ue = (o) => {
-  const e = q.fromSchema(o);
+], Pe = (n) => {
+  const e = q.fromSchema(n);
   return new q(
     {
       ...e.nodes
@@ -1456,19 +1330,82 @@ const Ie = "_bnEditor_4vj2p_3", _e = "_bnRoot_4vj2p_20", Pe = "_defaultStyles_4v
     },
     e.marks
   );
-}, $e = v.create({
+}, Oe = T.create({
   addProseMirrorPlugins() {
     return [
-      new C({
+      new y({
         props: {
-          clipboardSerializer: Ue(this.editor.schema)
+          clipboardSerializer: Pe(this.editor.schema)
         }
       })
     ];
   }
-}), Ge = Ft(
-  (o) => o.type.name === "blockContainer"
+});
+class F {
+  constructor() {
+    u(this, "callbacks", {});
+  }
+  on(e, t) {
+    return this.callbacks[e] || (this.callbacks[e] = []), this.callbacks[e].push(t), () => this.off(e, t);
+  }
+  emit(e, ...t) {
+    const o = this.callbacks[e];
+    o && o.forEach((r) => r.apply(this, t));
+  }
+  off(e, t) {
+    const o = this.callbacks[e];
+    o && (t ? this.callbacks[e] = o.filter((r) => r !== t) : delete this.callbacks[e]);
+  }
+  removeAllListeners() {
+    this.callbacks = {};
+  }
+}
+const De = Rt(
+  (n) => n.type.name === "blockContainer"
 );
+class Re {
+  constructor(e, t, o = () => {
+  }) {
+    u(this, "suggestionsMenuState");
+    u(this, "updateSuggestionsMenu");
+    u(this, "pluginState");
+    u(this, "handleScroll", () => {
+      var e;
+      if ((e = this.suggestionsMenuState) != null && e.show) {
+        const t = document.querySelector(
+          `[data-decoration-id="${this.pluginState.decorationId}"]`
+        );
+        this.suggestionsMenuState.referencePos = t.getBoundingClientRect(), this.updateSuggestionsMenu();
+      }
+    });
+    this.editor = e, this.pluginKey = t, this.pluginState = W(), this.updateSuggestionsMenu = () => {
+      if (!this.suggestionsMenuState)
+        throw new Error("Attempting to update uninitialized suggestions menu");
+      o(this.suggestionsMenuState);
+    }, document.addEventListener("scroll", this.handleScroll);
+  }
+  update(e, t) {
+    const o = this.pluginKey.getState(t), r = this.pluginKey.getState(e.state), i = !o.active && r.active, s = o.active && !r.active, l = o.active && r.active;
+    if (!i && !l && !s)
+      return;
+    if (this.pluginState = s ? o : r, s || !this.editor.isEditable) {
+      this.suggestionsMenuState.show = !1, this.updateSuggestionsMenu();
+      return;
+    }
+    const a = document.querySelector(
+      `[data-decoration-id="${this.pluginState.decorationId}"]`
+    );
+    this.editor.isEditable && (this.suggestionsMenuState = {
+      show: !0,
+      referencePos: a.getBoundingClientRect(),
+      filteredItems: this.pluginState.items,
+      keyboardHoveredItemIndex: this.pluginState.keyboardHoveredItemIndex
+    }, this.updateSuggestionsMenu());
+  }
+  destroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+  }
+}
 function W() {
   return {
     active: !1,
@@ -1480,260 +1417,862 @@ function W() {
     decorationId: void 0
   };
 }
-class je {
-  constructor({
-    editor: e,
-    pluginKey: t,
-    onSelectItem: n = () => {
-    },
-    suggestionsMenuFactory: r
-  }) {
-    h(this, "editor");
-    h(this, "pluginKey");
-    h(this, "suggestionsMenu");
-    h(this, "pluginState");
-    h(this, "itemCallback");
-    h(this, "handleScroll", () => {
-      this.pluginKey.getState(this.editor._tiptapEditor.state).active && this.suggestionsMenu.render(this.getDynamicParams(), !1);
-    });
-    this.editor = e, this.pluginKey = t, this.pluginState = W(), this.itemCallback = (i) => {
-      e._tiptapEditor.chain().focus().deleteRange({
-        from: this.pluginState.queryStartPos - this.pluginState.triggerCharacter.length,
-        to: e._tiptapEditor.state.selection.from
-      }).run(), n({
-        item: i,
-        editor: e
-      });
-    }, this.suggestionsMenu = r(this.getStaticParams()), document.addEventListener("scroll", this.handleScroll);
-  }
-  update(e, t) {
-    const n = this.pluginKey.getState(t), r = this.pluginKey.getState(e.state), i = !n.active && r.active, s = n.active && !r.active, a = n.active && r.active;
-    !i && !a && !s || (this.pluginState = s ? n : r, (s || !this.editor.isEditable) && (this.suggestionsMenu.hide(), this.suggestionsMenu.element.removeEventListener(
-      "mousedown",
-      (l) => l.preventDefault()
-    )), a && this.suggestionsMenu.render(this.getDynamicParams(), !1), i && this.editor.isEditable && (this.suggestionsMenu.render(this.getDynamicParams(), !0), this.suggestionsMenu.element.addEventListener(
-      "mousedown",
-      (l) => l.preventDefault()
-    )));
-  }
-  destroy() {
-    document.removeEventListener("scroll", this.handleScroll);
-  }
-  getStaticParams() {
-    return {
-      itemCallback: (e) => this.itemCallback(e)
-    };
-  }
-  getDynamicParams() {
-    const e = document.querySelector(
-      `[data-decoration-id="${this.pluginState.decorationId}"]`
-    );
-    return {
-      items: this.pluginState.items,
-      keyboardHoveredItemIndex: this.pluginState.keyboardHoveredItemIndex,
-      referenceRect: e.getBoundingClientRect()
-    };
-  }
-}
-function qe({
-  pluginKey: o,
-  editor: e,
-  defaultTriggerCharacter: t,
-  suggestionsMenuFactory: n,
-  onSelectItem: r = () => {
-  },
-  items: i = () => []
-}) {
-  if (t.length !== 1)
+const ze = (n, e, t, o, r = () => [], i = () => {
+}) => {
+  if (o.length !== 1)
     throw new Error("'char' should be a single character");
-  const s = (a) => {
-    a.dispatch(a.state.tr.setMeta(o, { deactivate: !0 }));
+  let s;
+  const l = (a) => {
+    a.dispatch(a.state.tr.setMeta(t, { deactivate: !0 }));
   };
-  return new C({
-    key: o,
-    view: (a) => new je({
-      editor: e,
-      pluginKey: o,
-      onSelectItem: (l) => {
-        s(a), r(l);
-      },
-      suggestionsMenuFactory: n
-    }),
-    state: {
-      // Initialize the plugin's internal state.
-      init() {
-        return W();
-      },
-      // Apply changes to the plugin state from an editor transaction.
-      apply(a, l, d, c) {
-        var p, f, m, b;
-        if (a.getMeta("orderedListIndexing") !== void 0)
-          return l;
-        if ((p = a.getMeta(o)) != null && p.activate)
-          return {
-            active: !0,
-            triggerCharacter: ((f = a.getMeta(o)) == null ? void 0 : f.triggerCharacter) || "",
-            queryStartPos: c.selection.from,
-            items: i(""),
-            keyboardHoveredItemIndex: 0,
-            // TODO: Maybe should be 1 if the menu has no possible items? Probably redundant since a menu with no items
-            //  is useless in practice.
-            notFoundCount: 0,
-            decorationId: `id_${Math.floor(Math.random() * 4294967295)}`
-          };
-        if (!l.active)
-          return l;
-        const u = { ...l };
-        if (u.items = i(
-          c.doc.textBetween(l.queryStartPos, c.selection.from)
-        ), u.notFoundCount = 0, u.items.length === 0 && (u.notFoundCount = Math.max(
-          0,
-          l.notFoundCount + (c.selection.from - d.selection.from)
-        )), // Highlighting text should hide the menu.
-        c.selection.from !== c.selection.to || // Transactions with plugin metadata {deactivate: true} should hide the menu.
-        (m = a.getMeta(o)) != null && m.deactivate || // Certain mouse events should hide the menu.
-        // TODO: Change to global mousedown listener.
-        a.getMeta("focus") || a.getMeta("blur") || a.getMeta("pointer") || // Moving the caret before the character which triggered the menu should hide it.
-        l.active && c.selection.from < l.queryStartPos || // Entering more than 3 characters, after the last query that matched with at least 1 menu item, should hide
-        // the menu.
-        u.notFoundCount > 3)
+  return {
+    plugin: new y({
+      key: t,
+      view: () => (s = new Re(
+        n,
+        t,
+        e
+      ), s),
+      state: {
+        // Initialize the plugin's internal state.
+        init() {
           return W();
-        if (((b = a.getMeta(o)) == null ? void 0 : b.selectedItemIndexChanged) !== void 0) {
-          let y = a.getMeta(o).selectedItemIndexChanged;
-          y < 0 ? y = l.items.length - 1 : y >= l.items.length && (y = 0), u.keyboardHoveredItemIndex = y;
+        },
+        // Apply changes to the plugin state from an editor transaction.
+        apply(a, d, c, p) {
+          var f, m, b, v;
+          if (a.getMeta("orderedListIndexing") !== void 0)
+            return d;
+          if ((f = a.getMeta(t)) != null && f.activate)
+            return {
+              active: !0,
+              triggerCharacter: ((m = a.getMeta(t)) == null ? void 0 : m.triggerCharacter) || "",
+              queryStartPos: p.selection.from,
+              items: r(""),
+              keyboardHoveredItemIndex: 0,
+              // TODO: Maybe should be 1 if the menu has no possible items? Probably redundant since a menu with no items
+              //  is useless in practice.
+              notFoundCount: 0,
+              decorationId: `id_${Math.floor(Math.random() * 4294967295)}`
+            };
+          if (!d.active)
+            return d;
+          const h = { ...d };
+          if (h.items = r(
+            p.doc.textBetween(
+              d.queryStartPos,
+              p.selection.from
+            )
+          ), h.notFoundCount = 0, h.items.length === 0 && (h.notFoundCount = Math.max(
+            0,
+            d.notFoundCount + (p.selection.from - c.selection.from)
+          )), // Highlighting text should hide the menu.
+          p.selection.from !== p.selection.to || // Transactions with plugin metadata {deactivate: true} should hide the menu.
+          (b = a.getMeta(t)) != null && b.deactivate || // Certain mouse events should hide the menu.
+          // TODO: Change to global mousedown listener.
+          a.getMeta("focus") || a.getMeta("blur") || a.getMeta("pointer") || // Moving the caret before the character which triggered the menu should hide it.
+          d.active && p.selection.from < d.queryStartPos || // Entering more than 3 characters, after the last query that matched with at least 1 menu item, should hide
+          // the menu.
+          h.notFoundCount > 3)
+            return W();
+          if (((v = a.getMeta(t)) == null ? void 0 : v.selectedItemIndexChanged) !== void 0) {
+            let w = a.getMeta(t).selectedItemIndexChanged;
+            w < 0 ? w = d.items.length - 1 : w >= d.items.length && (w = 0), h.keyboardHoveredItemIndex = w;
+          } else
+            c.selection.from !== p.selection.from && (h.keyboardHoveredItemIndex = 0);
+          return h;
         }
-        return u;
-      }
-    },
-    props: {
-      handleKeyDown(a, l) {
-        const d = this.getState(a.state).active;
-        if (l.key === t && !d)
-          return a.dispatch(
-            a.state.tr.insertText(t).scrollIntoView().setMeta(o, {
-              activate: !0,
-              triggerCharacter: t
-            })
-          ), !0;
-        if (!d)
-          return !1;
-        const {
-          triggerCharacter: c,
-          queryStartPos: u,
-          items: p,
-          keyboardHoveredItemIndex: f
-        } = o.getState(a.state);
-        return l.key === "ArrowUp" ? (a.dispatch(
-          a.state.tr.setMeta(o, {
-            selectedItemIndexChanged: f - 1
-          })
-        ), !0) : l.key === "ArrowDown" ? (a.dispatch(
-          a.state.tr.setMeta(o, {
-            selectedItemIndexChanged: f + 1
-          })
-        ), !0) : l.key === "Enter" ? (s(a), e._tiptapEditor.chain().focus().deleteRange({
-          from: u - c.length,
-          to: e._tiptapEditor.state.selection.from
-        }).run(), r({
-          item: p[f],
-          editor: e
-        }), !0) : l.key === "Escape" ? (s(a), !0) : !1;
-      },
-      // Hides menu in cases where mouse click does not cause an editor state change.
-      handleClick(a) {
-        s(a);
       },
-      // Setup decorator on the currently active suggestion.
-      decorations(a) {
-        const { active: l, decorationId: d, queryStartPos: c, triggerCharacter: u } = this.getState(a);
-        if (!l)
-          return null;
-        if (u === "") {
-          const p = Ge(a.selection);
-          if (p)
-            return F.create(a.doc, [
-              D.node(
-                p.pos,
-                p.pos + p.node.nodeSize,
-                {
-                  nodeName: "span",
-                  class: "suggestion-decorator",
-                  "data-decoration-id": d
-                }
-              )
-            ]);
+      props: {
+        handleKeyDown(a, d) {
+          const c = this.getState(a.state).active;
+          if (d.key === o && !c)
+            return a.dispatch(
+              a.state.tr.insertText(o).scrollIntoView().setMeta(t, {
+                activate: !0,
+                triggerCharacter: o
+              })
+            ), !0;
+          if (!c)
+            return !1;
+          const {
+            triggerCharacter: p,
+            queryStartPos: h,
+            items: f,
+            keyboardHoveredItemIndex: m
+          } = t.getState(a.state);
+          return d.key === "ArrowUp" ? (a.dispatch(
+            a.state.tr.setMeta(t, {
+              selectedItemIndexChanged: m - 1
+            })
+          ), !0) : d.key === "ArrowDown" ? (a.dispatch(
+            a.state.tr.setMeta(t, {
+              selectedItemIndexChanged: m + 1
+            })
+          ), !0) : d.key === "Enter" ? (l(a), n._tiptapEditor.chain().focus().deleteRange({
+            from: h - p.length,
+            to: n._tiptapEditor.state.selection.from
+          }).run(), i({
+            item: f[m],
+            editor: n
+          }), !0) : d.key === "Escape" ? (l(a), !0) : !1;
+        },
+        // Setup decorator on the currently active suggestion.
+        decorations(a) {
+          const { active: d, decorationId: c, queryStartPos: p, triggerCharacter: h } = this.getState(a);
+          if (!d)
+            return null;
+          if (h === "") {
+            const f = De(a.selection);
+            if (f)
+              return z.create(a.doc, [
+                R.node(
+                  f.pos,
+                  f.pos + f.node.nodeSize,
+                  {
+                    nodeName: "span",
+                    class: "suggestion-decorator",
+                    "data-decoration-id": c
+                  }
+                )
+              ]);
+          }
+          return z.create(a.doc, [
+            R.inline(
+              p - h.length,
+              p,
+              {
+                nodeName: "span",
+                class: "suggestion-decorator",
+                "data-decoration-id": c
+              }
+            )
+          ]);
         }
-        return F.create(a.doc, [
-          D.inline(
-            c - u.length,
-            c,
-            {
-              nodeName: "span",
-              class: "suggestion-decorator",
-              "data-decoration-id": d
-            }
-          )
-        ]);
       }
+    }),
+    itemCallback: (a) => {
+      l(n._tiptapEditor.view), n._tiptapEditor.chain().focus().deleteRange({
+        from: s.pluginState.queryStartPos - s.pluginState.triggerCharacter.length,
+        to: n._tiptapEditor.state.selection.from
+      }).run(), i({
+        item: a,
+        editor: n
+      });
     }
-  });
+  };
+}, K = new S("SlashMenuPlugin");
+class Ve extends F {
+  constructor(t, o) {
+    super();
+    u(this, "plugin");
+    u(this, "itemCallback");
+    const r = ze(
+      t,
+      (i) => {
+        this.emit("update", i);
+      },
+      K,
+      "/",
+      (i) => o.filter(
+        ({ name: s, aliases: l }) => s.toLowerCase().startsWith(i.toLowerCase()) || l && l.filter(
+          (a) => a.toLowerCase().startsWith(i.toLowerCase())
+        ).length !== 0
+      ),
+      ({ item: i, editor: s }) => i.execute(s)
+    );
+    this.plugin = r.plugin, this.itemCallback = r.itemCallback;
+  }
+  onUpdate(t) {
+    return this.on("update", t);
+  }
 }
-const X = new E("suggestions-slash-commands"), We = () => v.create({
-  name: "slash-command",
+const Ue = new S("blocknote-placeholder"), Fe = T.create({
+  name: "placeholder",
   addOptions() {
     return {
-      editor: void 0,
-      commands: void 0,
-      slashMenuFactory: void 0
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty",
+      isFilterClass: "is-filter",
+      hasAnchorClass: "has-anchor",
+      placeholder: "Write something …",
+      showOnlyWhenEditable: !0,
+      showOnlyCurrent: !0,
+      includeChildren: !1
     };
   },
   addProseMirrorPlugins() {
-    if (!this.options.slashMenuFactory || !this.options.commands)
-      throw new Error("required args not defined for SlashMenuExtension");
-    const o = this.options.commands;
     return [
-      qe({
-        pluginKey: X,
-        editor: this.options.editor,
-        defaultTriggerCharacter: "/",
-        suggestionsMenuFactory: this.options.slashMenuFactory,
-        items: (e) => o.filter(
-          (t) => t.match(e)
-        ),
-        onSelectItem: ({ item: e, editor: t }) => {
-          e.execute(t);
+      new y({
+        key: Ue,
+        props: {
+          decorations: (n) => {
+            const { doc: e, selection: t } = n, o = K.getState(n), r = this.editor.isEditable || !this.options.showOnlyWhenEditable, { anchor: i } = t, s = [];
+            if (r)
+              return e.descendants((l, a) => {
+                const d = i >= a && i <= a + l.nodeSize, c = !l.isLeaf && !l.childCount;
+                if ((d || !this.options.showOnlyCurrent) && c) {
+                  const p = [this.options.emptyNodeClass];
+                  this.editor.isEmpty && p.push(this.options.emptyEditorClass), d && p.push(this.options.hasAnchorClass), (o == null ? void 0 : o.triggerCharacter) === "" && (o != null && o.active) && p.push(this.options.isFilterClass);
+                  const h = R.node(a, a + l.nodeSize, {
+                    class: p.join(" ")
+                  });
+                  s.push(h);
+                }
+                return this.options.includeChildren;
+              }), z.create(e, s);
+          }
         }
       })
     ];
   }
-});
-class L extends G {
-  constructor(t, n) {
-    super(t, n);
-    h(this, "nodes");
+}), $e = T.create({
+  name: "textAlignment",
+  addGlobalAttributes() {
+    return [
+      {
+        // Attribute is applied to block content instead of container so that child blocks don't inherit the text
+        // alignment styling.
+        types: ["paragraph", "heading", "bulletListItem", "numberedListItem"],
+        attributes: {
+          textAlignment: {
+            default: "left",
+            parseHTML: (n) => n.getAttribute("data-text-alignment"),
+            renderHTML: (n) => n.textAlignment !== "left" && {
+              "data-text-alignment": n.textAlignment
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setTextAlignment: (n) => ({ state: e }) => {
+        const t = [], o = g(
+          e.doc,
+          e.selection.from
+        );
+        if (o === void 0)
+          return !1;
+        let r = o.startPos;
+        for (; r < e.selection.to; )
+          e.doc.resolve(r).node().type.spec.group === "blockContent" ? (t.push(r - 1), r += e.doc.resolve(r).node().nodeSize - 1) : r += 1;
+        for (const i of t)
+          e.tr.setNodeAttribute(i, "textAlignment", n);
+        return !0;
+      }
+    };
+  }
+}), Ge = T.create({
+  name: "blockTextColor",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["blockContainer"],
+        attributes: {
+          textColor: {
+            default: "default",
+            parseHTML: (n) => n.hasAttribute("data-text-color") ? n.getAttribute("data-text-color") : "default",
+            renderHTML: (n) => n.textColor !== "default" && {
+              "data-text-color": n.textColor
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBlockTextColor: (n, e) => ({ state: t, view: o }) => {
+        const r = g(t.doc, n);
+        return r === void 0 ? !1 : (t.tr.setNodeAttribute(r.startPos - 1, "textColor", e), o.focus(), !0);
+      }
+    };
+  }
+}), je = at.create({
+  name: "textColor",
+  addAttributes() {
+    return {
+      color: {
+        default: void 0,
+        parseHTML: (n) => n.getAttribute("data-text-color"),
+        renderHTML: (n) => ({
+          "data-text-color": n.color
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (n) => typeof n == "string" ? !1 : n.hasAttribute("data-text-color") ? { color: n.getAttribute("data-text-color") } : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: n }) {
+    return ["span", n, 0];
+  },
+  addCommands() {
+    return {
+      setTextColor: (n) => ({ commands: e }) => n !== "default" ? e.setMark(this.name, { color: n }) : e.unsetMark(this.name)
+    };
+  }
+}), qe = T.create({
+  name: "trailingNode",
+  addProseMirrorPlugins() {
+    const n = new S(this.name);
+    return [
+      new y({
+        key: n,
+        appendTransaction: (e, t, o) => {
+          const { doc: r, tr: i, schema: s } = o, l = n.getState(o), a = r.content.size - 2, d = s.nodes.blockContainer, c = s.nodes.paragraph;
+          if (l)
+            return i.insert(
+              a,
+              d.create(void 0, c.create())
+            );
+        },
+        state: {
+          init: (e, t) => {
+          },
+          apply: (e, t) => {
+            if (!e.docChanged)
+              return t;
+            let o = e.doc.lastChild;
+            if (!o || o.type.name !== "blockGroup")
+              throw new Error("Expected blockGroup");
+            if (o = o.lastChild, !o || o.type.name !== "blockContainer")
+              throw new Error("Expected blockContainer");
+            return o.nodeSize > 4;
+          }
+        }
+      })
+    ];
+  }
+}), We = (n) => {
+  const e = [
+    L.ClipboardTextSerializer,
+    L.Commands,
+    L.Editable,
+    L.FocusEvents,
+    L.Tabindex,
+    // DevTools,
+    Wt,
+    // DropCursor,
+    Fe.configure({
+      emptyNodeClass: k.isEmpty,
+      hasAnchorClass: k.hasAnchor,
+      isFilterClass: k.isFilter,
+      includeChildren: !0,
+      showOnlyCurrent: !1
+    }),
+    U.configure({
+      types: ["blockContainer"]
+    }),
+    Yt,
+    // Comments,
+    // basics:
+    Qt,
+    // marks:
+    Ft,
+    $t,
+    Kt,
+    Zt,
+    te,
+    Xt,
+    je,
+    Ge,
+    fe,
+    he,
+    $e,
+    // custom blocks:
+    ...Ne,
+    ...Object.values(n.blockSchema).map(
+      (t) => t.node.configure({ editor: n.editor })
+    ),
+    Oe,
+    qt.configure({ width: 5, color: "#ddeeff" }),
+    // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
+    // should be handled before Enter handlers in other components like splitListItem
+    qe
+  ];
+  if (n.collaboration) {
+    e.push(
+      Gt.configure({
+        fragment: n.collaboration.fragment
+      })
+    );
+    const t = (o) => {
+      const r = document.createElement("span");
+      r.classList.add(H["collaboration-cursor__caret"]), r.setAttribute("style", `border-color: ${o.color}`);
+      const i = document.createElement("span");
+      i.classList.add(H["collaboration-cursor__label"]), i.setAttribute("style", `background-color: ${o.color}`), i.insertBefore(document.createTextNode(o.name), null);
+      const s = document.createTextNode("⁠"), l = document.createTextNode("⁠");
+      return r.insertBefore(s, null), r.insertBefore(i, null), r.insertBefore(l, null), r;
+    };
+    e.push(
+      jt.configure({
+        user: n.collaboration.user,
+        render: n.collaboration.renderCursor || t,
+        provider: n.collaboration.provider
+      })
+    );
+  } else
+    e.push(Jt);
+  return e;
+};
+function X(n, e) {
+  let t, o;
+  if (e.firstChild.descendants((r, i) => t ? !1 : r.type.name !== "blockContainer" || r.attrs.id !== n ? !0 : (t = r, o = i + 1, !1)), t === void 0 || o === void 0)
+    throw Error("Could not find block in the editor with matching ID.");
+  return {
+    node: t,
+    posBeforeNode: o
+  };
+}
+function Tt(n, e, t = "before", o) {
+  const r = typeof e == "string" ? e : e.id, i = [];
+  for (const d of n)
+    i.push(O(d, o.schema));
+  let s = -1;
+  const { node: l, posBeforeNode: a } = X(r, o.state.doc);
+  if (t === "before" && (s = a), t === "after" && (s = a + l.nodeSize), t === "nested") {
+    if (l.childCount < 2) {
+      s = a + l.firstChild.nodeSize + 1;
+      const d = o.state.schema.nodes.blockGroup.create(
+        {},
+        i
+      );
+      o.view.dispatch(
+        o.state.tr.insert(s, d)
+      );
+      return;
+    }
+    s = a + l.firstChild.nodeSize + 2;
+  }
+  o.view.dispatch(o.state.tr.insert(s, i));
+}
+function Ye(n, e, t) {
+  const o = typeof n == "string" ? n : n.id, { posBeforeNode: r } = X(o, t.state.doc);
+  t.commands.BNUpdateBlock(r + 1, e);
+}
+function Bt(n, e) {
+  const t = new Set(
+    n.map(
+      (r) => typeof r == "string" ? r : r.id
+    )
+  );
+  let o = 0;
+  if (e.state.doc.descendants((r, i) => {
+    if (t.size === 0)
+      return !1;
+    if (r.type.name !== "blockContainer" || !t.has(r.attrs.id))
+      return !0;
+    t.delete(r.attrs.id);
+    const s = e.state.doc.nodeSize;
+    e.commands.BNDeleteBlock(i - o + 1);
+    const l = e.state.doc.nodeSize;
+    return o += s - l, !1;
+  }), t.size > 0) {
+    let r = [...t].join(`
+`);
+    throw Error(
+      "Blocks with the following IDs could not be found in the editor: " + r
+    );
+  }
+}
+function Je(n, e, t) {
+  Tt(e, n[0], "before", t), Bt(n, t);
+}
+function Ke() {
+  const n = (e) => {
+    let t = e.children.length;
+    for (let o = 0; o < t; o++) {
+      const r = e.children[o];
+      if (r.type === "element" && (n(r), r.tagName === "u"))
+        if (r.children.length > 0) {
+          e.children.splice(o, 1, ...r.children);
+          const i = r.children.length - 1;
+          t += i, o += i;
+        } else
+          e.children.splice(o, 1), t--, o--;
+    }
+  };
+  return n;
+}
+function Xe(n) {
+  const e = /* @__PURE__ */ new Set([
+    ...n.orderedListItemBlockTypes,
+    ...n.unorderedListItemBlockTypes
+  ]), t = (o) => {
+    let r = o.children.length, i;
+    for (let s = 0; s < r; s++) {
+      const a = o.children[s].children[0], d = a.children[0], c = a.children.length === 2 ? a.children[1] : null, p = e.has(
+        d.properties.dataContentType
+      ), h = p ? n.orderedListItemBlockTypes.has(
+        d.properties.dataContentType
+      ) ? "ol" : "ul" : null;
+      if (c !== null && t(c), i && i.tagName !== h) {
+        o.children.splice(
+          s - i.children.length,
+          i.children.length,
+          i
+        );
+        const f = i.children.length - 1;
+        s -= f, r -= f, i = void 0;
+      }
+      if (p) {
+        i || (i = ot(
+          document.createElement(h)
+        ));
+        const f = ot(
+          document.createElement("li")
+        );
+        f.children.push(d.children[0]), c !== null && f.children.push(...c.children), i.children.push(f);
+      } else if (c !== null) {
+        o.children.splice(s + 1, 0, ...c.children), o.children[s] = d.children[0];
+        const f = c.children.length;
+        s += f, r += f;
+      } else
+        o.children[s] = d.children[0];
+    }
+    i && o.children.splice(
+      r - i.children.length,
+      i.children.length,
+      i
+    );
+  };
+  return t;
+}
+async function xt(n, e) {
+  const t = document.createElement("div"), o = q.fromSchema(e);
+  for (const i of n) {
+    const s = O(i, e), l = o.serializeNode(s);
+    t.appendChild(l);
+  }
+  return (await J().use(lt, { fragment: !0 }).use(Xe, {
+    orderedListItemBlockTypes: /* @__PURE__ */ new Set(["numberedListItem"]),
+    unorderedListItemBlockTypes: /* @__PURE__ */ new Set(["bulletListItem"])
+  }).use(dt).process(t.innerHTML)).value;
+}
+async function _t(n, e, t) {
+  const o = document.createElement("div");
+  o.innerHTML = n.trim();
+  const i = ee.fromSchema(t).parse(o), s = [];
+  for (let l = 0; l < i.firstChild.childCount; l++)
+    s.push(M(i.firstChild.child(l), e));
+  return s;
+}
+async function Ze(n, e) {
+  return (await J().use(lt, { fragment: !0 }).use(Ke).use(ie).use(ct).use(le).process(await xt(n, e))).value;
+}
+async function Qe(n, e, t) {
+  const o = await J().use(se).use(ct).use(ae).use(dt).process(n);
+  return _t(o.value, e, t);
+}
+class to {
+  constructor(e, t, o) {
+    u(this, "formattingToolbarState");
+    u(this, "updateFormattingToolbar");
+    u(this, "preventHide", !1);
+    u(this, "preventShow", !1);
+    u(this, "prevWasEditable", null);
+    u(this, "shouldShow", ({ view: e, state: t, from: o, to: r }) => {
+      const { doc: i, selection: s } = t, { empty: l } = s, a = !i.textBetween(o, r).length && zt(t.selection);
+      return !(!e.hasFocus() || l || a);
+    });
+    u(this, "viewMousedownHandler", () => {
+      this.preventShow = !0;
+    });
+    u(this, "viewMouseupHandler", () => {
+      this.preventShow = !1, setTimeout(() => this.update(this.pmView));
+    });
+    // For dragging the whole editor.
+    u(this, "dragstartHandler", () => {
+      var e;
+      (e = this.formattingToolbarState) != null && e.show && (this.formattingToolbarState.show = !1, this.updateFormattingToolbar());
+    });
+    u(this, "focusHandler", () => {
+      setTimeout(() => this.update(this.pmView));
+    });
+    u(this, "blurHandler", (e) => {
+      var o;
+      if (this.preventHide) {
+        this.preventHide = !1;
+        return;
+      }
+      const t = this.pmView.dom.parentElement;
+      // An element is clicked.
+      e && e.relatedTarget && // Element is inside the editor.
+      (t === e.relatedTarget || t.contains(e.relatedTarget)) || (o = this.formattingToolbarState) != null && o.show && (this.formattingToolbarState.show = !1, this.updateFormattingToolbar());
+    });
+    u(this, "scrollHandler", () => {
+      var e;
+      (e = this.formattingToolbarState) != null && e.show && (this.formattingToolbarState.referencePos = this.getSelectionBoundingBox(), this.updateFormattingToolbar());
+    });
+    this.editor = e, this.pmView = t, this.updateFormattingToolbar = () => {
+      if (!this.formattingToolbarState)
+        throw new Error(
+          "Attempting to update uninitialized formatting toolbar"
+        );
+      o(this.formattingToolbarState);
+    }, t.dom.addEventListener("mousedown", this.viewMousedownHandler), t.dom.addEventListener("mouseup", this.viewMouseupHandler), t.dom.addEventListener("dragstart", this.dragstartHandler), t.dom.addEventListener("focus", this.focusHandler), t.dom.addEventListener("blur", this.blurHandler), document.addEventListener("scroll", this.scrollHandler);
+  }
+  update(e, t) {
+    var h, f;
+    const { state: o, composing: r } = e, { doc: i, selection: s } = o, l = t && t.doc.eq(i) && t.selection.eq(s);
+    if ((this.prevWasEditable === null || this.prevWasEditable === this.editor.isEditable) && (r || l))
+      return;
+    this.prevWasEditable = this.editor.isEditable;
+    const { ranges: a } = s, d = Math.min(...a.map((m) => m.$from.pos)), c = Math.max(...a.map((m) => m.$to.pos)), p = (h = this.shouldShow) == null ? void 0 : h.call(this, {
+      view: e,
+      state: o,
+      from: d,
+      to: c
+    });
+    if (this.editor.isEditable && !this.preventShow && (p || this.preventHide)) {
+      this.formattingToolbarState = {
+        show: !0,
+        referencePos: this.getSelectionBoundingBox()
+      }, this.updateFormattingToolbar();
+      return;
+    }
+    if ((f = this.formattingToolbarState) != null && f.show && !this.preventHide && (!p || this.preventShow || !this.editor.isEditable)) {
+      this.formattingToolbarState.show = !1, this.updateFormattingToolbar();
+      return;
+    }
+  }
+  destroy() {
+    this.pmView.dom.removeEventListener("mousedown", this.viewMousedownHandler), this.pmView.dom.removeEventListener("mouseup", this.viewMouseupHandler), this.pmView.dom.removeEventListener("dragstart", this.dragstartHandler), this.pmView.dom.removeEventListener("focus", this.focusHandler), this.pmView.dom.removeEventListener("blur", this.blurHandler), document.removeEventListener("scroll", this.scrollHandler);
+  }
+  getSelectionBoundingBox() {
+    const { state: e } = this.pmView, { selection: t } = e, { ranges: o } = t, r = Math.min(...o.map((s) => s.$from.pos)), i = Math.max(...o.map((s) => s.$to.pos));
+    if (Vt(t)) {
+      const s = this.pmView.nodeDOM(r);
+      if (s)
+        return s.getBoundingClientRect();
+    }
+    return j(this.pmView, r, i);
+  }
+}
+const eo = new S(
+  "FormattingToolbarPlugin"
+);
+class oo extends F {
+  constructor(t) {
+    super();
+    u(this, "view");
+    u(this, "plugin");
+    this.plugin = new y({
+      key: eo,
+      view: (o) => (this.view = new to(t, o, (r) => {
+        this.emit("update", r);
+      }), this.view)
+    });
+  }
+  onUpdate(t) {
+    return this.on("update", t);
+  }
+}
+class no {
+  constructor(e, t, o) {
+    u(this, "hyperlinkToolbarState");
+    u(this, "updateHyperlinkToolbar");
+    u(this, "menuUpdateTimer");
+    u(this, "startMenuUpdateTimer");
+    u(this, "stopMenuUpdateTimer");
+    u(this, "mouseHoveredHyperlinkMark");
+    u(this, "mouseHoveredHyperlinkMarkRange");
+    u(this, "keyboardHoveredHyperlinkMark");
+    u(this, "keyboardHoveredHyperlinkMarkRange");
+    u(this, "hyperlinkMark");
+    u(this, "hyperlinkMarkRange");
+    u(this, "mouseOverHandler", (e) => {
+      if (this.mouseHoveredHyperlinkMark = void 0, this.mouseHoveredHyperlinkMarkRange = void 0, this.stopMenuUpdateTimer(), e.target instanceof HTMLAnchorElement && e.target.nodeName === "A") {
+        const t = e.target, o = this.pmView.posAtDOM(t, 0) + 1, r = this.pmView.state.doc.resolve(
+          o
+        ), i = r.marks();
+        for (const s of i)
+          if (s.type.name === this.pmView.state.schema.mark("link").type.name) {
+            this.mouseHoveredHyperlinkMark = s, this.mouseHoveredHyperlinkMarkRange = tt(
+              r,
+              s.type,
+              s.attrs
+            ) || void 0;
+            break;
+          }
+      }
+      return this.startMenuUpdateTimer(), !1;
+    });
+    u(this, "clickHandler", (e) => {
+      var o;
+      const t = this.pmView.dom.parentElement;
+      // Toolbar is open.
+      this.hyperlinkMark && // An element is clicked.
+      e && e.target && // The clicked element is not the editor.
+      !(t === e.target || t.contains(e.target)) && (o = this.hyperlinkToolbarState) != null && o.show && (this.hyperlinkToolbarState.show = !1, this.updateHyperlinkToolbar());
+    });
+    u(this, "scrollHandler", () => {
+      var e;
+      this.hyperlinkMark !== void 0 && (e = this.hyperlinkToolbarState) != null && e.show && (this.hyperlinkToolbarState.referencePos = j(
+        this.pmView,
+        this.hyperlinkMarkRange.from,
+        this.hyperlinkMarkRange.to
+      ), this.updateHyperlinkToolbar());
+    });
+    this.editor = e, this.pmView = t, this.updateHyperlinkToolbar = () => {
+      if (!this.hyperlinkToolbarState)
+        throw new Error("Attempting to update uninitialized hyperlink toolbar");
+      o(this.hyperlinkToolbarState);
+    }, this.startMenuUpdateTimer = () => {
+      this.menuUpdateTimer = setTimeout(() => {
+        this.update();
+      }, 250);
+    }, this.stopMenuUpdateTimer = () => (this.menuUpdateTimer && (clearTimeout(this.menuUpdateTimer), this.menuUpdateTimer = void 0), !1), this.pmView.dom.addEventListener("mouseover", this.mouseOverHandler), document.addEventListener("click", this.clickHandler, !0), document.addEventListener("scroll", this.scrollHandler);
+  }
+  editHyperlink(e, t) {
+    var r;
+    const o = this.pmView.state.tr.insertText(
+      t,
+      this.hyperlinkMarkRange.from,
+      this.hyperlinkMarkRange.to
+    );
+    o.addMark(
+      this.hyperlinkMarkRange.from,
+      this.hyperlinkMarkRange.from + t.length,
+      this.pmView.state.schema.mark("link", { href: e })
+    ), this.pmView.dispatch(o), this.pmView.focus(), (r = this.hyperlinkToolbarState) != null && r.show && (this.hyperlinkToolbarState.show = !1, this.updateHyperlinkToolbar());
+  }
+  deleteHyperlink() {
+    var e;
+    this.pmView.dispatch(
+      this.pmView.state.tr.removeMark(
+        this.hyperlinkMarkRange.from,
+        this.hyperlinkMarkRange.to,
+        this.hyperlinkMark.type
+      ).setMeta("preventAutolink", !0)
+    ), this.pmView.focus(), (e = this.hyperlinkToolbarState) != null && e.show && (this.hyperlinkToolbarState.show = !1, this.updateHyperlinkToolbar());
+  }
+  update() {
+    var t;
+    if (!this.pmView.hasFocus())
+      return;
+    const e = this.hyperlinkMark;
+    if (this.hyperlinkMark = void 0, this.hyperlinkMarkRange = void 0, this.keyboardHoveredHyperlinkMark = void 0, this.keyboardHoveredHyperlinkMarkRange = void 0, this.pmView.state.selection.empty) {
+      const o = this.pmView.state.selection.$from.marks();
+      for (const r of o)
+        if (r.type.name === this.pmView.state.schema.mark("link").type.name) {
+          this.keyboardHoveredHyperlinkMark = r, this.keyboardHoveredHyperlinkMarkRange = tt(
+            this.pmView.state.selection.$from,
+            r.type,
+            r.attrs
+          ) || void 0;
+          break;
+        }
+    }
+    if (this.mouseHoveredHyperlinkMark && (this.hyperlinkMark = this.mouseHoveredHyperlinkMark, this.hyperlinkMarkRange = this.mouseHoveredHyperlinkMarkRange), this.keyboardHoveredHyperlinkMark && (this.hyperlinkMark = this.keyboardHoveredHyperlinkMark, this.hyperlinkMarkRange = this.keyboardHoveredHyperlinkMarkRange), this.hyperlinkMark && this.editor.isEditable) {
+      this.hyperlinkToolbarState = {
+        show: !0,
+        referencePos: j(
+          this.pmView,
+          this.hyperlinkMarkRange.from,
+          this.hyperlinkMarkRange.to
+        ),
+        url: this.hyperlinkMark.attrs.href,
+        text: this.pmView.state.doc.textBetween(
+          this.hyperlinkMarkRange.from,
+          this.hyperlinkMarkRange.to
+        )
+      }, this.updateHyperlinkToolbar();
+      return;
+    }
+    if ((t = this.hyperlinkToolbarState) != null && t.show && e && (!this.hyperlinkMark || !this.editor.isEditable)) {
+      this.hyperlinkToolbarState.show = !1, this.updateHyperlinkToolbar();
+      return;
+    }
+  }
+  destroy() {
+    this.pmView.dom.removeEventListener("mouseover", this.mouseOverHandler), document.removeEventListener("scroll", this.scrollHandler), document.removeEventListener("click", this.clickHandler, !0);
+  }
+}
+const ro = new S(
+  "HyperlinkToolbarPlugin"
+);
+class io extends F {
+  constructor(t) {
+    super();
+    u(this, "view");
+    u(this, "plugin");
+    /**
+     * Edit the currently hovered hyperlink.
+     */
+    u(this, "editHyperlink", (t, o) => {
+      this.view.editHyperlink(t, o);
+    });
+    /**
+     * Delete the currently hovered hyperlink.
+     */
+    u(this, "deleteHyperlink", () => {
+      this.view.deleteHyperlink();
+    });
+    /**
+     * When hovering on/off hyperlinks using the mouse cursor, the hyperlink
+     * toolbar will open & close with a delay.
+     *
+     * This function starts the delay timer, and should be used for when the mouse cursor enters the hyperlink toolbar.
+     */
+    u(this, "startHideTimer", () => {
+      this.view.startMenuUpdateTimer();
+    });
+    /**
+     * When hovering on/off hyperlinks using the mouse cursor, the hyperlink
+     * toolbar will open & close with a delay.
+     *
+     * This function stops the delay timer, and should be used for when the mouse cursor exits the hyperlink toolbar.
+     */
+    u(this, "stopHideTimer", () => {
+      this.view.stopMenuUpdateTimer();
+    });
+    this.plugin = new y({
+      key: ro,
+      view: (o) => (this.view = new no(t, o, (r) => {
+        this.emit("update", r);
+      }), this.view)
+    });
+  }
+  onUpdate(t) {
+    return this.on("update", t);
+  }
+}
+class A extends G {
+  constructor(t, o) {
+    super(t, o);
+    u(this, "nodes");
     const r = t.node();
-    this.nodes = [], t.doc.nodesBetween(t.pos, n.pos, (i, s, a) => {
-      if (a !== null && a.eq(r))
+    this.nodes = [], t.doc.nodesBetween(t.pos, o.pos, (i, s, l) => {
+      if (l !== null && l.eq(r))
         return this.nodes.push(i), !1;
     });
   }
-  static create(t, n, r = n) {
-    return new L(t.resolve(n), t.resolve(r));
+  static create(t, o, r = o) {
+    return new A(t.resolve(o), t.resolve(r));
   }
   content() {
-    return new I(_.from(this.nodes), 0, 0);
+    return new B(I.from(this.nodes), 0, 0);
   }
   eq(t) {
-    if (!(t instanceof L) || this.nodes.length !== t.nodes.length || this.from !== t.from || this.to !== t.to)
+    if (!(t instanceof A) || this.nodes.length !== t.nodes.length || this.from !== t.from || this.to !== t.to)
       return !1;
-    for (let n = 0; n < this.nodes.length; n++)
-      if (!this.nodes[n].eq(t.nodes[n]))
+    for (let o = 0; o < this.nodes.length; o++)
+      if (!this.nodes[o].eq(t.nodes[o]))
         return !1;
     return !0;
   }
-  map(t, n) {
-    let r = n.mapResult(this.from), i = n.mapResult(this.to);
-    return i.deleted ? G.near(t.resolve(r.pos)) : r.deleted ? G.near(t.resolve(i.pos)) : new L(
+  map(t, o) {
+    let r = o.mapResult(this.from), i = o.mapResult(this.to);
+    return i.deleted ? G.near(t.resolve(r.pos)) : r.deleted ? G.near(t.resolve(i.pos)) : new A(
       t.resolve(r.pos),
       t.resolve(i.pos)
     );
@@ -1742,107 +2281,100 @@ class L extends G {
     return { type: "node", anchor: this.anchor, head: this.head };
   }
 }
-const Ye = ae.__serializeForClipboard;
-let T;
-function _t(o, e) {
+const so = re.__serializeForClipboard;
+let E;
+function It(n, e) {
   var r;
   if (!e.dom.isConnected)
     return;
-  let t = e.posAtCoords(o);
+  let t = e.posAtCoords(n);
   if (!t)
     return;
-  let n = e.domAtPos(t.pos).node;
-  if (n !== e.dom) {
-    for (; n && n.parentNode && n.parentNode !== e.dom && !((r = n.hasAttribute) != null && r.call(n, "data-id")); )
-      n = n.parentNode;
-    if (n)
-      return { node: n, id: n.getAttribute("data-id") };
+  let o = e.domAtPos(t.pos).node;
+  if (o !== e.dom) {
+    for (; o && o.parentNode && o.parentNode !== e.dom && !((r = o.hasAttribute) != null && r.call(o, "data-id")); )
+      o = o.parentNode;
+    if (o)
+      return { node: o, id: o.getAttribute("data-id") };
   }
 }
-function Ve(o, e) {
-  let t = _t(o, e);
+function ao(n, e) {
+  let t = It(n, e);
   if (t && t.node.nodeType === 1) {
-    const n = e.docView;
-    let r = n.nearestDesc(t.node, !0);
-    return !r || r === n ? null : r.posBefore;
+    const o = e.docView;
+    let r = o.nearestDesc(t.node, !0);
+    return !r || r === o ? null : r.posBefore;
   }
   return null;
 }
-function Ke(o, e) {
-  let t, n;
-  const r = e.resolve(o.from).node().type.spec.group === "blockContent", i = e.resolve(o.to).node().type.spec.group === "blockContent", s = Math.min(o.$anchor.depth, o.$head.depth);
+function lo(n, e) {
+  let t, o;
+  const r = e.resolve(n.from).node().type.spec.group === "blockContent", i = e.resolve(n.to).node().type.spec.group === "blockContent", s = Math.min(n.$anchor.depth, n.$head.depth);
   if (r && i) {
-    const a = o.$from.start(s - 1), l = o.$to.end(s - 1);
-    t = e.resolve(a - 1).pos, n = e.resolve(l + 1).pos;
+    const l = n.$from.start(s - 1), a = n.$to.end(s - 1);
+    t = e.resolve(l - 1).pos, o = e.resolve(a + 1).pos;
   } else
-    t = o.from, n = o.to;
-  return { from: t, to: n };
+    t = n.from, o = n.to;
+  return { from: t, to: o };
 }
-function it(o, e, t = e) {
-  e === t && (t += o.state.doc.resolve(e + 1).node().nodeSize);
-  const n = o.domAtPos(e).node.cloneNode(!0), r = o.domAtPos(e).node, i = (c, u) => Array.prototype.indexOf.call(c.children, u), s = i(
+function st(n, e, t = e) {
+  e === t && (t += n.state.doc.resolve(e + 1).node().nodeSize);
+  const o = n.domAtPos(e).node.cloneNode(!0), r = n.domAtPos(e).node, i = (c, p) => Array.prototype.indexOf.call(c.children, p), s = i(
     r,
     // Expects from position to be just before the first selected block.
-    o.domAtPos(e + 1).node.parentElement
-  ), a = i(
+    n.domAtPos(e + 1).node.parentElement
+  ), l = i(
     r,
     // Expects to position to be just after the last selected block.
-    o.domAtPos(t - 1).node.parentElement
+    n.domAtPos(t - 1).node.parentElement
   );
   for (let c = r.childElementCount - 1; c >= 0; c--)
-    (c > a || c < s) && n.removeChild(n.children[c]);
-  Pt(), T = n;
-  const d = o.dom.className.split(" ").filter(
+    (c > l || c < s) && o.removeChild(o.children[c]);
+  Ht(), E = o;
+  const d = n.dom.className.split(" ").filter(
     (c) => !c.includes("bn") && !c.includes("ProseMirror") && !c.includes("editor")
   ).join(" ");
-  T.className = T.className + " " + P.dragPreview + " " + d, document.body.appendChild(T);
+  E.className = E.className + " " + H.dragPreview + " " + d, document.body.appendChild(E);
 }
-function Pt() {
-  T !== void 0 && (document.body.removeChild(T), T = void 0);
+function Ht() {
+  E !== void 0 && (document.body.removeChild(E), E = void 0);
 }
-function Je(o, e) {
-  if (!o.dataTransfer)
+function co(n, e) {
+  if (!n.dataTransfer)
     return;
   const t = e.dom.getBoundingClientRect();
-  let n = {
+  let o = {
     left: t.left + t.width / 2,
     // take middle of editor
-    top: o.clientY
-  }, r = Ve(n, e);
+    top: n.clientY
+  }, r = ao(o, e);
   if (r != null) {
-    const i = e.state.selection, s = e.state.doc, { from: a, to: l } = Ke(i, s), d = a <= r && r < l, c = i.$anchor.node() !== i.$head.node() || i instanceof L;
+    const i = e.state.selection, s = e.state.doc, { from: l, to: a } = lo(i, s), d = l <= r && r < a, c = i.$anchor.node() !== i.$head.node() || i instanceof A;
     d && c ? (e.dispatch(
-      e.state.tr.setSelection(L.create(s, a, l))
-    ), it(e, a, l)) : (e.dispatch(
-      e.state.tr.setSelection($t.create(e.state.doc, r))
-    ), it(e, r));
-    let u = e.state.selection.content(), { dom: p, text: f } = Ye(e, u);
-    o.dataTransfer.clearData(), o.dataTransfer.setData("text/html", p.innerHTML), o.dataTransfer.setData("text/plain", f), o.dataTransfer.effectAllowed = "move", o.dataTransfer.setDragImage(T, 0, 0), e.dragging = { slice: u, move: !0 };
+      e.state.tr.setSelection(A.create(s, l, a))
+    ), st(e, l, a)) : (e.dispatch(
+      e.state.tr.setSelection(oe.create(e.state.doc, r))
+    ), st(e, r));
+    let p = e.state.selection.content(), { dom: h, text: f } = so(e, p);
+    n.dataTransfer.clearData(), n.dataTransfer.setData("text/html", h.innerHTML), n.dataTransfer.setData("text/plain", f), n.dataTransfer.effectAllowed = "move", n.dataTransfer.setDragImage(E, 0, 0), e.dragging = { slice: p, move: !0 };
   }
 }
-class Xe {
-  constructor({
-    tiptapEditor: e,
-    editor: t,
-    blockMenuFactory: n,
-    horizontalPosAnchoredAtRoot: r
-  }) {
-    h(this, "editor");
-    h(this, "ttEditor");
+class uo {
+  constructor(e, t, o) {
+    u(this, "sideMenuState");
     // When true, the drag handle with be anchored at the same level as root elements
     // When false, the drag handle with be just to the left of the element
-    h(this, "horizontalPosAnchoredAtRoot");
-    h(this, "horizontalPosAnchor");
-    h(this, "blockMenu");
-    h(this, "hoveredBlock");
+    // TODO: Is there any case where we want this to be false?
+    u(this, "horizontalPosAnchoredAtRoot");
+    u(this, "horizontalPosAnchor");
+    u(this, "hoveredBlock");
     // Used to check if currently dragged content comes from this editor instance.
-    h(this, "isDragging", !1);
-    h(this, "menuOpen", !1);
-    h(this, "menuFrozen", !1);
+    u(this, "isDragging", !1);
+    u(this, "menuFrozen", !1);
     /**
      * Sets isDragging when dragging text.
      */
-    h(this, "onDragStart", () => {
+    u(this, "onDragStart", () => {
       this.isDragging = !0;
     });
     /**
@@ -1850,16 +2382,16 @@ class Xe {
      * we dispatch a fake event, so that we can still drop the content
      * when dragging / dropping to the side of the editor
      */
-    h(this, "onDrop", (e) => {
-      if (e.synthetic || !this.isDragging)
+    u(this, "onDrop", (e) => {
+      if (this.editor._tiptapEditor.commands.blur(), e.synthetic || !this.isDragging)
         return;
-      let t = this.ttEditor.view.posAtCoords({
+      let t = this.pmView.posAtCoords({
         left: e.clientX,
         top: e.clientY
       });
       if (this.isDragging = !1, !t || t.inside === -1) {
-        const n = new Event("drop", e), r = this.ttEditor.view.dom.firstChild.getBoundingClientRect();
-        n.clientX = r.left + r.width / 2, n.clientY = e.clientY, n.dataTransfer = e.dataTransfer, n.preventDefault = () => e.preventDefault(), n.synthetic = !0, this.ttEditor.view.dom.dispatchEvent(n);
+        const o = new Event("drop", e), r = this.pmView.dom.firstChild.getBoundingClientRect();
+        o.clientX = r.left + r.width / 2, o.clientY = e.clientY, o.dataTransfer = e.dataTransfer, o.preventDefault = () => e.preventDefault(), o.synthetic = !0, this.pmView.dom.dispatchEvent(o);
       }
     });
     /**
@@ -1867,841 +2399,225 @@ class Xe {
      * we dispatch a fake event, so that we can still drop the content
      * when dragging / dropping to the side of the editor
      */
-    h(this, "onDragOver", (e) => {
+    u(this, "onDragOver", (e) => {
       if (e.synthetic || !this.isDragging)
         return;
-      let t = this.ttEditor.view.posAtCoords({
+      let t = this.pmView.posAtCoords({
         left: e.clientX,
         top: e.clientY
       });
       if (!t || t.inside === -1) {
-        const n = new Event("dragover", e), r = this.ttEditor.view.dom.firstChild.getBoundingClientRect();
-        n.clientX = r.left + r.width / 2, n.clientY = e.clientY, n.dataTransfer = e.dataTransfer, n.preventDefault = () => e.preventDefault(), n.synthetic = !0, this.ttEditor.view.dom.dispatchEvent(n);
+        const o = new Event("dragover", e), r = this.pmView.dom.firstChild.getBoundingClientRect();
+        o.clientX = r.left + r.width / 2, o.clientY = e.clientY, o.dataTransfer = e.dataTransfer, o.preventDefault = () => e.preventDefault(), o.synthetic = !0, this.pmView.dom.dispatchEvent(o);
       }
     });
-    h(this, "onKeyDown", (e) => {
-      this.menuOpen && (this.menuOpen = !1, this.blockMenu.hide()), this.menuFrozen = !1;
-    });
-    h(this, "onMouseDown", (e) => {
+    u(this, "onKeyDown", (e) => {
       var t;
-      (t = this.blockMenu.element) != null && t.contains(e.target) || (this.menuOpen && (this.menuOpen = !1, this.blockMenu.hide()), this.menuFrozen = !1);
-    });
-    h(this, "onMouseMove", (e) => {
-      var l, d, c;
-      if (this.menuFrozen)
-        return;
-      const t = this.ttEditor.view.dom.firstChild.getBoundingClientRect(), n = this.ttEditor.view.dom.getBoundingClientRect();
-      if (
-        // Cursor is within the editor area
-        e.clientX >= n.left && e.clientX <= n.right && e.clientY >= n.top && e.clientY <= n.bottom && // An element is hovered
-        e && e.target && // Element is outside the editor
-        this.ttEditor.view.dom !== e.target && !this.ttEditor.view.dom.contains(e.target) && // Element is outside the side menu
-        this.blockMenu.element !== e.target && !((l = this.blockMenu.element) != null && l.contains(e.target))
-      ) {
-        this.menuOpen && (this.menuOpen = !1, this.blockMenu.hide());
-        return;
-      }
-      this.horizontalPosAnchor = t.x;
-      const i = {
-        left: t.left + t.width / 2,
-        // take middle of editor
-        top: e.clientY
-      }, s = _t(i, this.ttEditor.view);
-      if (!s || !this.editor.isEditable) {
-        this.menuOpen && (this.menuOpen = !1, this.blockMenu.hide());
-        return;
-      }
-      this.menuOpen && ((d = this.hoveredBlock) != null && d.hasAttribute("data-id")) && ((c = this.hoveredBlock) == null ? void 0 : c.getAttribute("data-id")) === s.id || (this.hoveredBlock = s.node, !s.node.firstChild) || this.editor.isEditable && (this.menuOpen ? this.blockMenu.render(this.getDynamicParams(), !1) : (this.menuOpen = !0, this.blockMenu.render(this.getDynamicParams(), !0)));
-    });
-    h(this, "onScroll", () => {
-      const e = this.ttEditor.view.dom.firstChild.getBoundingClientRect();
-      this.horizontalPosAnchor = e.x, this.menuOpen && this.blockMenu.render(this.getDynamicParams(), !1);
-    });
-    this.editor = t, this.ttEditor = e, this.horizontalPosAnchoredAtRoot = r, this.horizontalPosAnchor = this.ttEditor.view.dom.firstChild.getBoundingClientRect().x, this.blockMenu = n(this.getStaticParams()), document.body.addEventListener("drop", this.onDrop, !0), document.body.addEventListener("dragover", this.onDragOver), this.ttEditor.view.dom.addEventListener("dragstart", this.onDragStart), document.body.addEventListener("mousemove", this.onMouseMove, !0), document.addEventListener("scroll", this.onScroll), document.body.addEventListener("mousedown", this.onMouseDown, !0), document.body.addEventListener("keydown", this.onKeyDown, !0);
-  }
-  destroy() {
-    this.menuOpen && (this.menuOpen = !1, this.blockMenu.hide()), document.body.removeEventListener("mousemove", this.onMouseMove), document.body.removeEventListener("dragover", this.onDragOver), this.ttEditor.view.dom.removeEventListener("dragstart", this.onDragStart), document.body.removeEventListener("drop", this.onDrop), document.body.removeEventListener("mousedown", this.onMouseDown), document.removeEventListener("scroll", this.onScroll), document.body.removeEventListener("keydown", this.onKeyDown);
-  }
-  addBlock() {
-    this.menuOpen = !1, this.menuFrozen = !0, this.blockMenu.hide();
-    const t = this.hoveredBlock.firstChild.getBoundingClientRect(), n = this.ttEditor.view.posAtCoords({
-      left: t.left + t.width / 2,
-      top: t.top + t.height / 2
-    });
-    if (!n)
-      return;
-    const r = g(this.ttEditor.state.doc, n.pos);
-    if (r === void 0)
-      return;
-    const { contentNode: i, endPos: s } = r;
-    if (i.textContent.length !== 0) {
-      const a = s + 1, l = a + 2;
-      this.ttEditor.chain().BNCreateBlock(a).BNUpdateBlock(l, { type: "paragraph", props: {} }).setTextSelection(l).run();
-    } else
-      this.ttEditor.commands.setTextSelection(s);
-    this.ttEditor.view.focus(), this.ttEditor.view.dispatch(
-      this.ttEditor.view.state.tr.scrollIntoView().setMeta(X, {
-        // TODO import suggestion plugin key
-        activate: !0,
-        type: "drag"
-      })
-    );
-  }
-  getStaticParams() {
-    return {
-      editor: this.editor,
-      addBlock: () => this.addBlock(),
-      blockDragStart: (e) => {
-        this.isDragging = !0, Je(e, this.ttEditor.view);
-      },
-      blockDragEnd: () => Pt(),
-      freezeMenu: () => {
-        this.menuFrozen = !0;
-      },
-      unfreezeMenu: () => {
-        this.menuFrozen = !1;
-      }
-    };
-  }
-  getDynamicParams() {
-    const t = this.hoveredBlock.firstChild.getBoundingClientRect();
-    return {
-      block: this.editor.getBlock(this.hoveredBlock.getAttribute("data-id")),
-      referenceRect: new DOMRect(
-        this.horizontalPosAnchoredAtRoot ? this.horizontalPosAnchor : t.x,
-        t.y,
-        t.width,
-        t.height
-      )
-    };
-  }
-}
-const Ze = (o) => new C({
-  key: new E("DraggableBlocksPlugin"),
-  view: () => new Xe({
-    tiptapEditor: o.tiptapEditor,
-    editor: o.editor,
-    blockMenuFactory: o.blockSideMenuFactory,
-    horizontalPosAnchoredAtRoot: !0
-  })
-}), Qe = () => v.create({
-  name: "DraggableBlocksExtension",
-  priority: 1e3,
-  // Need to be high, in order to hide menu when typing slash
-  addProseMirrorPlugins() {
-    if (!this.options.blockSideMenuFactory)
-      throw new Error(
-        "UI Element factory not defined for DraggableBlocksExtension"
-      );
-    return [
-      Ze({
-        tiptapEditor: this.editor,
-        editor: this.options.editor,
-        blockSideMenuFactory: this.options.blockSideMenuFactory
-      })
-    ];
-  }
-});
-class to {
-  constructor({
-    editor: e,
-    tiptapEditor: t,
-    formattingToolbarFactory: n,
-    view: r
-  }) {
-    h(this, "editor");
-    h(this, "ttEditor");
-    h(this, "view");
-    h(this, "formattingToolbar");
-    h(this, "preventHide", !1);
-    h(this, "preventShow", !1);
-    h(this, "toolbarIsOpen", !1);
-    h(this, "prevWasEditable", null);
-    h(this, "shouldShow", ({ view: e, state: t, from: n, to: r }) => {
-      const { doc: i, selection: s } = t, { empty: a } = s, l = !i.textBetween(n, r).length && Rt(t.selection);
-      return !(!e.hasFocus() || a || l);
-    });
-    h(this, "viewMousedownHandler", () => {
-      this.preventShow = !0;
-    });
-    h(this, "viewMouseupHandler", () => {
-      this.preventShow = !1, setTimeout(() => this.update(this.ttEditor.view));
-    });
-    h(this, "dragstartHandler", () => {
-      this.formattingToolbar.hide(), this.toolbarIsOpen = !1;
-    });
-    h(this, "focusHandler", () => {
-      setTimeout(() => this.update(this.ttEditor.view));
-    });
-    h(this, "blurHandler", ({ event: e }) => {
-      var t;
-      if (this.preventHide) {
-        this.preventHide = !1;
-        return;
-      }
-      // An element is clicked.
-      e && e.relatedTarget && // Element is outside the toolbar.
-      (this.formattingToolbar.element === e.relatedTarget || (t = this.formattingToolbar.element) != null && t.contains(e.relatedTarget)) || this.toolbarIsOpen && (this.formattingToolbar.hide(), this.toolbarIsOpen = !1);
-    });
-    h(this, "scrollHandler", () => {
-      this.toolbarIsOpen && this.formattingToolbar.render(this.getDynamicParams(), !1);
-    });
-    this.editor = e, this.ttEditor = t, this.view = r, this.formattingToolbar = n(this.getStaticParams()), this.view.dom.addEventListener("mousedown", this.viewMousedownHandler), this.view.dom.addEventListener("mouseup", this.viewMouseupHandler), this.view.dom.addEventListener("dragstart", this.dragstartHandler), this.ttEditor.on("focus", this.focusHandler), this.ttEditor.on("blur", this.blurHandler), document.addEventListener("scroll", this.scrollHandler);
-  }
-  update(e, t) {
-    var p;
-    const { state: n, composing: r } = e, { doc: i, selection: s } = n, a = t && t.doc.eq(i) && t.selection.eq(s);
-    if ((this.prevWasEditable === null || this.prevWasEditable === this.editor.isEditable) && (r || a))
-      return;
-    this.prevWasEditable = this.editor.isEditable;
-    const { ranges: l } = s, d = Math.min(...l.map((f) => f.$from.pos)), c = Math.max(...l.map((f) => f.$to.pos)), u = (p = this.shouldShow) == null ? void 0 : p.call(this, {
-      view: e,
-      state: n,
-      from: d,
-      to: c
-    });
-    if (this.editor.isEditable && !this.toolbarIsOpen && !this.preventShow && (u || this.preventHide)) {
-      this.formattingToolbar.render(this.getDynamicParams(), !0), this.toolbarIsOpen = !0;
-      return;
-    }
-    if (this.toolbarIsOpen && !this.preventShow && (u || this.preventHide)) {
-      this.formattingToolbar.render(this.getDynamicParams(), !1);
-      return;
-    }
-    if (this.toolbarIsOpen && !this.preventHide && (!u || this.preventShow || !this.editor.isEditable)) {
-      this.formattingToolbar.hide(), this.toolbarIsOpen = !1;
-      return;
-    }
-  }
-  destroy() {
-    this.view.dom.removeEventListener("mousedown", this.viewMousedownHandler), this.view.dom.removeEventListener("mouseup", this.viewMouseupHandler), this.view.dom.removeEventListener("dragstart", this.dragstartHandler), this.ttEditor.off("focus", this.focusHandler), this.ttEditor.off("blur", this.blurHandler), document.removeEventListener("scroll", this.scrollHandler);
-  }
-  getSelectionBoundingBox() {
-    const { state: e } = this.ttEditor.view, { selection: t } = e, { ranges: n } = t, r = Math.min(...n.map((s) => s.$from.pos)), i = Math.max(...n.map((s) => s.$to.pos));
-    if (zt(t)) {
-      const s = this.ttEditor.view.nodeDOM(r);
-      if (s)
-        return s.getBoundingClientRect();
-    }
-    return at(this.ttEditor.view, r, i);
-  }
-  getStaticParams() {
-    return {
-      editor: this.editor
-    };
-  }
-  getDynamicParams() {
-    return {
-      referenceRect: this.getSelectionBoundingBox()
-    };
-  }
-}
-const eo = (o) => new C({
-  key: new E("FormattingToolbarPlugin"),
-  view: (e) => new to({ view: e, ...o })
-}), oo = () => v.create({
-  name: "FormattingToolbarExtension",
-  addProseMirrorPlugins() {
-    if (!this.options.formattingToolbarFactory || !this.options.editor)
-      throw new Error(
-        "required args not defined for FormattingToolbarExtension"
-      );
-    return [
-      eo({
-        tiptapEditor: this.editor,
-        editor: this.options.editor,
-        formattingToolbarFactory: this.options.formattingToolbarFactory,
-        pluginKey: new E("FormattingToolbarPlugin")
-      })
-    ];
-  }
-}), no = new E("HyperlinkToolbarPlugin");
-class ro {
-  constructor({ editor: e, hyperlinkToolbarFactory: t }) {
-    h(this, "editor");
-    h(this, "hyperlinkToolbar");
-    h(this, "menuUpdateTimer");
-    h(this, "startMenuUpdateTimer");
-    h(this, "stopMenuUpdateTimer");
-    h(this, "mouseHoveredHyperlinkMark");
-    h(this, "mouseHoveredHyperlinkMarkRange");
-    h(this, "keyboardHoveredHyperlinkMark");
-    h(this, "keyboardHoveredHyperlinkMarkRange");
-    h(this, "hyperlinkMark");
-    h(this, "hyperlinkMarkRange");
-    h(this, "mouseOverHandler", (e) => {
-      if (this.mouseHoveredHyperlinkMark = void 0, this.mouseHoveredHyperlinkMarkRange = void 0, this.stopMenuUpdateTimer(), e.target instanceof HTMLAnchorElement && e.target.nodeName === "A") {
-        const t = e.target, n = this.editor.view.posAtDOM(t, 0) + 1, r = this.editor.state.doc.resolve(
-          n
-        ), i = r.marks();
-        for (const s of i)
-          if (s.type.name === this.editor.schema.mark("link").type.name) {
-            this.mouseHoveredHyperlinkMark = s, this.mouseHoveredHyperlinkMarkRange = Q(
-              r,
-              s.type,
-              s.attrs
-            ) || void 0;
-            break;
-          }
-      }
-      return this.startMenuUpdateTimer(), !1;
-    });
-    h(this, "clickHandler", (e) => {
-      var t;
-      // Toolbar is open.
-      this.hyperlinkMark && // An element is clicked.
-      e && e.target && // Element is outside the editor.
-      this.editor.view.dom !== e.target && !this.editor.view.dom.contains(e.target) && // Element is outside the toolbar.
-      this.hyperlinkToolbar.element !== e.target && !((t = this.hyperlinkToolbar.element) != null && t.contains(e.target)) && this.hyperlinkToolbar.hide();
-    });
-    h(this, "scrollHandler", () => {
-      this.hyperlinkMark !== void 0 && this.hyperlinkToolbar.render(this.getDynamicParams(), !1);
-    });
-    this.editor = e, this.hyperlinkToolbar = t(this.getStaticParams()), this.startMenuUpdateTimer = () => {
-      this.menuUpdateTimer = setTimeout(() => {
-        this.update();
-      }, 250);
-    }, this.stopMenuUpdateTimer = () => (this.menuUpdateTimer && (clearTimeout(this.menuUpdateTimer), this.menuUpdateTimer = void 0), !1), this.editor.view.dom.addEventListener("mouseover", this.mouseOverHandler), document.addEventListener("click", this.clickHandler, !0), document.addEventListener("scroll", this.scrollHandler);
-  }
-  update() {
-    var t, n, r, i;
-    if (!this.editor.view.hasFocus())
-      return;
-    const e = this.hyperlinkMark;
-    if (this.hyperlinkMark = void 0, this.hyperlinkMarkRange = void 0, this.keyboardHoveredHyperlinkMark = void 0, this.keyboardHoveredHyperlinkMarkRange = void 0, this.editor.state.selection.empty) {
-      const s = this.editor.state.selection.$from.marks();
-      for (const a of s)
-        if (a.type.name === this.editor.schema.mark("link").type.name) {
-          this.keyboardHoveredHyperlinkMark = a, this.keyboardHoveredHyperlinkMarkRange = Q(
-            this.editor.state.selection.$from,
-            a.type,
-            a.attrs
-          ) || void 0;
-          break;
-        }
-    }
-    if (this.mouseHoveredHyperlinkMark && (this.hyperlinkMark = this.mouseHoveredHyperlinkMark, this.hyperlinkMarkRange = this.mouseHoveredHyperlinkMarkRange), this.keyboardHoveredHyperlinkMark && (this.hyperlinkMark = this.keyboardHoveredHyperlinkMark, this.hyperlinkMarkRange = this.keyboardHoveredHyperlinkMarkRange), this.hyperlinkMark && this.editor.isEditable) {
-      if (this.getDynamicParams(), !e) {
-        this.hyperlinkToolbar.render(this.getDynamicParams(), !0), (t = this.hyperlinkToolbar.element) == null || t.addEventListener(
-          "mouseleave",
-          this.startMenuUpdateTimer
-        ), (n = this.hyperlinkToolbar.element) == null || n.addEventListener(
-          "mouseenter",
-          this.stopMenuUpdateTimer
-        );
+      (t = this.sideMenuState) != null && t.show && (this.sideMenuState.show = !1, this.updateSideMenu(this.sideMenuState)), this.menuFrozen = !1;
+    });
+    u(this, "onMouseMove", (e) => {
+      var d, c, p, h, f;
+      if (this.menuFrozen)
+        return;
+      const t = this.pmView.dom.firstChild.getBoundingClientRect(), o = this.pmView.dom.getBoundingClientRect(), r = e.clientX >= o.left && e.clientX <= o.right && e.clientY >= o.top && e.clientY <= o.bottom, i = this.pmView.dom.parentElement;
+      if (
+        // Cursor is within the editor area
+        r && // An element is hovered
+        e && e.target && // Element is outside the editor
+        !(i === e.target || i.contains(e.target))
+      ) {
+        (d = this.sideMenuState) != null && d.show && (this.sideMenuState.show = !1, this.updateSideMenu(this.sideMenuState));
         return;
       }
-      this.hyperlinkToolbar.render(this.getDynamicParams(), !1);
-      return;
-    }
-    if (e && (!this.hyperlinkMark || !this.editor.isEditable)) {
-      (r = this.hyperlinkToolbar.element) == null || r.removeEventListener(
-        "mouseleave",
-        this.startMenuUpdateTimer
-      ), (i = this.hyperlinkToolbar.element) == null || i.removeEventListener(
-        "mouseenter",
-        this.stopMenuUpdateTimer
-      ), this.hyperlinkToolbar.hide();
-      return;
-    }
-  }
-  destroy() {
-    this.editor.view.dom.removeEventListener(
-      "mouseover",
-      this.mouseOverHandler
-    ), document.removeEventListener("scroll", this.scrollHandler);
-  }
-  getStaticParams() {
-    return {
-      editHyperlink: (e, t) => {
-        const n = this.editor.view.state.tr.insertText(
-          t,
-          this.hyperlinkMarkRange.from,
-          this.hyperlinkMarkRange.to
-        );
-        n.addMark(
-          this.hyperlinkMarkRange.from,
-          this.hyperlinkMarkRange.from + t.length,
-          this.editor.schema.mark("link", { href: e })
-        ), this.editor.view.dispatch(n), this.editor.view.focus(), this.hyperlinkToolbar.hide();
-      },
-      deleteHyperlink: () => {
-        this.editor.view.dispatch(
-          this.editor.view.state.tr.removeMark(
-            this.hyperlinkMarkRange.from,
-            this.hyperlinkMarkRange.to,
-            this.hyperlinkMark.type
-          ).setMeta("preventAutolink", !0)
-        ), this.editor.view.focus(), this.hyperlinkToolbar.hide();
+      this.horizontalPosAnchor = t.x;
+      const s = {
+        left: t.left + t.width / 2,
+        // take middle of editor
+        top: e.clientY
+      }, l = It(s, this.pmView);
+      if (!l || !this.editor.isEditable) {
+        (c = this.sideMenuState) != null && c.show && (this.sideMenuState.show = !1, this.updateSideMenu(this.sideMenuState));
+        return;
       }
-    };
+      if ((p = this.sideMenuState) != null && p.show && ((h = this.hoveredBlock) != null && h.hasAttribute("data-id")) && ((f = this.hoveredBlock) == null ? void 0 : f.getAttribute("data-id")) === l.id)
+        return;
+      this.hoveredBlock = l.node;
+      const a = l.node.firstChild;
+      if (a && this.editor.isEditable) {
+        const m = a.getBoundingClientRect();
+        this.sideMenuState = {
+          show: !0,
+          referencePos: new DOMRect(
+            this.horizontalPosAnchoredAtRoot ? this.horizontalPosAnchor : m.x,
+            m.y,
+            m.width,
+            m.height
+          ),
+          block: this.editor.getBlock(
+            this.hoveredBlock.getAttribute("data-id")
+          )
+        }, this.updateSideMenu(this.sideMenuState);
+      }
+    });
+    u(this, "onScroll", () => {
+      var e;
+      if ((e = this.sideMenuState) != null && e.show) {
+        const o = this.hoveredBlock.firstChild.getBoundingClientRect();
+        this.sideMenuState.referencePos = new DOMRect(
+          this.horizontalPosAnchoredAtRoot ? this.horizontalPosAnchor : o.x,
+          o.y,
+          o.width,
+          o.height
+        ), this.updateSideMenu(this.sideMenuState);
+      }
+    });
+    this.editor = e, this.pmView = t, this.updateSideMenu = o, this.horizontalPosAnchoredAtRoot = !0, this.horizontalPosAnchor = this.pmView.dom.firstChild.getBoundingClientRect().x, document.body.addEventListener("drop", this.onDrop, !0), document.body.addEventListener("dragover", this.onDragOver), this.pmView.dom.addEventListener("dragstart", this.onDragStart), document.body.addEventListener("mousemove", this.onMouseMove, !0), document.addEventListener("scroll", this.onScroll), document.body.addEventListener("keydown", this.onKeyDown, !0);
   }
-  getDynamicParams() {
-    return {
-      url: this.hyperlinkMark.attrs.href,
-      text: this.editor.view.state.doc.textBetween(
-        this.hyperlinkMarkRange.from,
-        this.hyperlinkMarkRange.to
-      ),
-      referenceRect: at(
-        this.editor.view,
-        this.hyperlinkMarkRange.from,
-        this.hyperlinkMarkRange.to
-      )
-    };
+  destroy() {
+    var e;
+    (e = this.sideMenuState) != null && e.show && (this.sideMenuState.show = !1, this.updateSideMenu(this.sideMenuState)), document.body.removeEventListener("mousemove", this.onMouseMove), document.body.removeEventListener("dragover", this.onDragOver), this.pmView.dom.removeEventListener("dragstart", this.onDragStart), document.body.removeEventListener("drop", this.onDrop, !0), document.removeEventListener("scroll", this.onScroll), document.body.removeEventListener("keydown", this.onKeyDown, !0);
   }
-}
-const io = (o, e) => new C({
-  key: no,
-  view: () => new ro({
-    editor: o,
-    hyperlinkToolbarFactory: e.hyperlinkToolbarFactory
-  })
-}), so = ut.extend({
-  priority: 500,
-  addProseMirrorPlugins() {
-    var o;
-    if (!this.options.hyperlinkToolbarFactory)
-      throw new Error("UI Element factory not defined for HyperlinkMark");
-    return [
-      ...((o = this.parent) == null ? void 0 : o.call(this)) || [],
-      io(this.editor, {
-        hyperlinkToolbarFactory: this.options.hyperlinkToolbarFactory
+  addBlock() {
+    var l;
+    (l = this.sideMenuState) != null && l.show && (this.sideMenuState.show = !1, this.updateSideMenu(this.sideMenuState)), this.menuFrozen = !0;
+    const t = this.hoveredBlock.firstChild.getBoundingClientRect(), o = this.pmView.posAtCoords({
+      left: t.left + t.width / 2,
+      top: t.top + t.height / 2
+    });
+    if (!o)
+      return;
+    const r = g(
+      this.editor._tiptapEditor.state.doc,
+      o.pos
+    );
+    if (r === void 0)
+      return;
+    const { contentNode: i, endPos: s } = r;
+    if (i.textContent.length !== 0) {
+      const a = s + 1, d = a + 2;
+      this.editor._tiptapEditor.chain().BNCreateBlock(a).BNUpdateBlock(d, { type: "paragraph", props: {} }).setTextSelection(d).run();
+    } else
+      this.editor._tiptapEditor.commands.setTextSelection(s);
+    this.pmView.focus(), this.pmView.dispatch(
+      this.pmView.state.tr.scrollIntoView().setMeta(K, {
+        // TODO import suggestion plugin key
+        activate: !0,
+        type: "drag"
       })
-    ];
+    );
   }
-}), ao = new E("blocknote-placeholder"), lo = v.create({
-  name: "placeholder",
-  addOptions() {
-    return {
-      emptyEditorClass: "is-editor-empty",
-      emptyNodeClass: "is-empty",
-      isFilterClass: "is-filter",
-      hasAnchorClass: "has-anchor",
-      placeholder: "Write something …",
-      showOnlyWhenEditable: !0,
-      showOnlyCurrent: !0,
-      includeChildren: !1
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      new C({
-        key: ao,
-        props: {
-          decorations: (o) => {
-            const { doc: e, selection: t } = o, n = X.getState(o), r = this.editor.isEditable || !this.options.showOnlyWhenEditable, { anchor: i } = t, s = [];
-            if (r)
-              return e.descendants((a, l) => {
-                const d = i >= l && i <= l + a.nodeSize, c = !a.isLeaf && !a.childCount;
-                if ((d || !this.options.showOnlyCurrent) && c) {
-                  const u = [this.options.emptyNodeClass];
-                  this.editor.isEmpty && u.push(this.options.emptyEditorClass), d && u.push(this.options.hasAnchorClass), (n == null ? void 0 : n.triggerCharacter) === "" && (n != null && n.active) && u.push(this.options.isFilterClass);
-                  const p = D.node(l, l + a.nodeSize, {
-                    class: u.join(" ")
-                  });
-                  s.push(p);
-                }
-                return this.options.includeChildren;
-              }), F.create(e, s);
-          }
+}
+const po = new S("SideMenuPlugin");
+class ho extends F {
+  constructor(t) {
+    super();
+    u(this, "sideMenuView");
+    u(this, "plugin");
+    /**
+     * If the block is empty, opens the slash menu. If the block has content,
+     * creates a new block below and opens the slash menu in it.
+     */
+    u(this, "addBlock", () => this.sideMenuView.addBlock());
+    /**
+     * Handles drag & drop events for blocks.
+     */
+    u(this, "blockDragStart", (t) => {
+      this.sideMenuView.isDragging = !0, co(t, this.editor.prosemirrorView);
+    });
+    /**
+     * Handles drag & drop events for blocks.
+     */
+    u(this, "blockDragEnd", () => Ht());
+    /**
+     * Freezes the side menu. When frozen, the side menu will stay
+     * attached to the same block regardless of which block is hovered by the
+     * mouse cursor.
+     */
+    u(this, "freezeMenu", () => this.sideMenuView.menuFrozen = !0);
+    /**
+     * Unfreezes the side menu. When frozen, the side menu will stay
+     * attached to the same block regardless of which block is hovered by the
+     * mouse cursor.
+     */
+    u(this, "unfreezeMenu", () => this.sideMenuView.menuFrozen = !1);
+    this.editor = t, this.plugin = new y({
+      key: po,
+      view: (o) => (this.sideMenuView = new uo(
+        t,
+        o,
+        (r) => {
+          this.emit("update", r);
         }
-      })
-    ];
-  }
-});
-class co {
-  constructor(e, t) {
-    this.name = e, this.match = t;
+      ), this.sideMenuView)
+    });
   }
-}
-class S extends co {
-  /**
-   * Constructs a new slash-command.
-   *
-   * @param name The name of the command
-   * @param execute The callback for creating a new node
-   * @param aliases Aliases for this command
-   */
-  constructor(e, t, n = []) {
-    super(e, (r) => this.name.toLowerCase().startsWith(r.toLowerCase()) || this.aliases.filter(
-      (i) => i.toLowerCase().startsWith(r.toLowerCase())
-    ).length !== 0), this.name = e, this.execute = t, this.aliases = n;
+  onUpdate(t) {
+    return this.on("update", t);
   }
 }
-function x(o, e) {
-  const t = o.getTextCursorPosition().block;
-  t.content.length === 1 && t.content[0].type === "text" && t.content[0].text === "/" || t.content.length === 0 ? o.updateBlock(t, e) : (o.insertBlocks([e], t, "after"), o.setTextCursorPosition(o.getTextCursorPosition().nextBlock));
+function _(n, e) {
+  const t = n.getTextCursorPosition().block;
+  t.content.length === 1 && t.content[0].type === "text" && t.content[0].text === "/" || t.content.length === 0 ? n.updateBlock(t, e) : (n.insertBlocks([e], t, "after"), n.setTextCursorPosition(n.getTextCursorPosition().nextBlock));
 }
-const uo = [
-  // Command for creating a level 1 heading
-  new S(
-    "Heading",
-    (o) => x(o, {
+const fo = (n = wt) => {
+  var t, o, r;
+  const e = [];
+  return "heading" in n && "level" in n.heading.propSchema && ((t = n.heading.propSchema.level.values) != null && t.includes("1") && e.push({
+    name: "Heading",
+    aliases: ["h", "heading1", "h1"],
+    execute: (i) => _(i, {
       type: "heading",
       props: { level: "1" }
-    }),
-    ["h", "heading1", "h1"]
-  ),
-  // Command for creating a level 2 heading
-  new S(
-    "Heading 2",
-    (o) => x(o, {
+    })
+  }), (o = n.heading.propSchema.level.values) != null && o.includes("2") && e.push({
+    name: "Heading 2",
+    aliases: ["h2", "heading2", "subheading"],
+    execute: (i) => _(i, {
       type: "heading",
       props: { level: "2" }
-    }),
-    ["h2", "heading2", "subheading"]
-  ),
-  // Command for creating a level 3 heading
-  new S(
-    "Heading 3",
-    (o) => x(o, {
+    })
+  }), (r = n.heading.propSchema.level.values) != null && r.includes("3") && e.push({
+    name: "Heading 3",
+    aliases: ["h3", "heading3", "subheading"],
+    execute: (i) => _(i, {
       type: "heading",
       props: { level: "3" }
-    }),
-    ["h3", "heading3", "subheading"]
-  ),
-  // Command for creating an ordered list
-  new S(
-    "Numbered List",
-    (o) => x(o, {
-      type: "numberedListItem"
-    }),
-    ["li", "list", "numberedlist", "numbered list"]
-  ),
-  // Command for creating a bullet list
-  new S(
-    "Bullet List",
-    (o) => x(o, {
-      type: "bulletListItem"
-    }),
-    ["ul", "list", "bulletlist", "bullet list"]
-  ),
-  // Command for creating a paragraph (pretty useless)
-  new S(
-    "Paragraph",
-    (o) => x(o, {
-      type: "paragraph"
-    }),
-    ["p"]
-  )
-  //     replaceRangeWithNode(editor, range, node);
-  //     return true;
-  //   },
-  //   ["ol", "orderedlist"],
-  //   OrderedListIcon,
-  //   "Used to display an ordered (enumerated) list item"
-  // ),
-  // Command for creating a blockquote
-  // blockquote: new SlashCommand(
-  //   "Block Quote",
-  //   CommandGroup.BASIC_BLOCKS,
-  //   (editor, range) => {
-  //     const paragraph = editor.schema.node("paragraph");
-  //     const node = editor.schema.node(
-  //       "blockquote",
-  //       { "block-id": uniqueId.generate() },
-  //       paragraph
-  //     );
-  //     replaceRangeWithNode(editor, range, node);
-  //     return true;
-  //   },
-  //   ["quote", "blockquote"],
-  //   QuoteIcon,
-  //   "Used to make a quote stand out",
-  //   "Ctrl+Shift+B"
-  // ),
-  // Command for creating a horizontal rule
-  // horizontalRule: new SlashCommand(
-  //   "Horizontal Rule",
-  //   CommandGroup.BASIC_BLOCKS,
-  //   (editor, range) => {
-  //     const node = editor.schema.node("horizontalRule", {
-  //       "block-id": uniqueId.generate(),
-  //     });
-  //     // insert horizontal rule, create a new block after the horizontal rule if applicable
-  //     // and put the cursor in the block after the horizontal rule.
-  //     editor
-  //       .chain()
-  //       .focus()
-  //       .replaceRangeAndUpdateSelection(range, node)
-  //       .command(({ tr, dispatch }) => {
-  //         if (dispatch) {
-  //           // the node immediately after the cursor
-  //           const nodeAfter = tr.selection.$to.nodeAfter;
-  //           // the position of the cursor
-  //           const cursorPos = tr.selection.$to.pos;
-  //           // check if there is no node after the cursor (end of document)
-  //           if (!nodeAfter) {
-  //             // create a new block of the default type (probably paragraph) after the cursor
-  //             const { parent } = tr.selection.$to;
-  //             const node = parent.type.contentMatch.defaultType?.create();
-  //             if (node) {
-  //               tr.insert(cursorPos, node);
-  //             }
-  //           }
-  //           // try to put the cursor at the start of the node directly after the inserted horizontal rule
-  //           tr.doc.nodesBetween(cursorPos, cursorPos + 1, (node, pos) => {
-  //             if (node.type.name !== "horizontalRule") {
-  //               tr.setSelection(TextSelection.create(tr.doc, pos));
-  //             }
-  //           });
-  //         }
-  //         return true;
-  //       })
-  //       .scrollIntoView()
-  //       .run();
-  //     return true;
-  //   },
-  //   ["hr", "horizontalrule"],
-  //   SeparatorIcon,
-  //   "Used to separate sections with a horizontal line"
-  // ),
-  // Command for creating a table
-  // table: new SlashCommand(
-  //   "Table",
-  //   CommandGroup.BASIC_BLOCKS,
-  //   (editor, range) => {
-  //     editor.chain().focus().deleteRange(range).run();
-  //     // TODO: add blockid, pending https://github.com/ueberdosis/tiptap/pull/1469
-  //     editor
-  //       .chain()
-  //       .focus()
-  //       .insertTable({ rows: 1, cols: 2, withHeaderRow: false })
-  //       .scrollIntoView()
-  //       .run();
-  //     return true;
-  //   },
-  //   ["table", "database"],
-  //   TableIcon,
-  //   "Used to create a simple table"
-  // ),
-], ho = v.create({
-  name: "textAlignment",
-  addGlobalAttributes() {
-    return [
-      {
-        // Attribute is applied to block content instead of container so that child blocks don't inherit the text
-        // alignment styling.
-        types: ["paragraph", "heading", "bulletListItem", "numberedListItem"],
-        attributes: {
-          textAlignment: {
-            default: "left",
-            parseHTML: (o) => o.getAttribute("data-text-alignment"),
-            renderHTML: (o) => o.textAlignment !== "left" && {
-              "data-text-alignment": o.textAlignment
-            }
-          }
-        }
-      }
-    ];
-  },
-  addCommands() {
-    return {
-      setTextAlignment: (o) => ({ state: e }) => {
-        const t = [], n = g(
-          e.doc,
-          e.selection.from
-        );
-        if (n === void 0)
-          return !1;
-        let r = n.startPos;
-        for (; r < e.selection.to; )
-          e.doc.resolve(r).node().type.spec.group === "blockContent" ? (t.push(r - 1), r += e.doc.resolve(r).node().nodeSize - 1) : r += 1;
-        for (const i of t)
-          e.tr.setNodeAttribute(i, "textAlignment", o);
-        return !0;
-      }
-    };
-  }
-}), po = v.create({
-  name: "blockTextColor",
-  addGlobalAttributes() {
-    return [
-      {
-        types: ["blockContainer"],
-        attributes: {
-          textColor: {
-            default: "default",
-            parseHTML: (o) => o.hasAttribute("data-text-color") ? o.getAttribute("data-text-color") : "default",
-            renderHTML: (o) => o.textColor !== "default" && {
-              "data-text-color": o.textColor
-            }
-          }
-        }
-      }
-    ];
-  },
-  addCommands() {
-    return {
-      setBlockTextColor: (o, e) => ({ state: t, view: n }) => {
-        const r = g(t.doc, o);
-        return r === void 0 ? !1 : (t.tr.setNodeAttribute(r.startPos - 1, "textColor", e), n.focus(), !0);
-      }
-    };
-  }
-}), fo = st.create({
-  name: "textColor",
-  addAttributes() {
-    return {
-      color: {
-        default: void 0,
-        parseHTML: (o) => o.getAttribute("data-text-color"),
-        renderHTML: (o) => ({
-          "data-text-color": o.color
-        })
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "span",
-        getAttrs: (o) => typeof o == "string" ? !1 : o.hasAttribute("data-text-color") ? { color: o.getAttribute("data-text-color") } : !1
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes: o }) {
-    return ["span", o, 0];
-  },
-  addCommands() {
-    return {
-      setTextColor: (o) => ({ commands: e }) => o !== "default" ? e.setMark(this.name, { color: o }) : e.unsetMark(this.name)
-    };
-  }
-}), mo = v.create({
-  name: "trailingNode",
-  addProseMirrorPlugins() {
-    const o = new E(this.name);
-    return [
-      new C({
-        key: o,
-        appendTransaction: (e, t, n) => {
-          const { doc: r, tr: i, schema: s } = n, a = o.getState(n), l = r.content.size - 2, d = s.nodes.blockContainer, c = s.nodes.paragraph;
-          if (a)
-            return i.insert(
-              l,
-              d.create(void 0, c.create())
-            );
-        },
-        state: {
-          init: (e, t) => {
-          },
-          apply: (e, t) => {
-            if (!e.docChanged)
-              return t;
-            let n = e.doc.lastChild;
-            if (!n || n.type.name !== "blockGroup")
-              throw new Error("Expected blockGroup");
-            if (n = n.lastChild, !n || n.type.name !== "blockContainer")
-              throw new Error("Expected blockContainer");
-            return n.nodeSize > 4;
-          }
-        }
-      })
-    ];
-  }
-}), go = (o) => {
-  const e = [
-    N.ClipboardTextSerializer,
-    N.Commands,
-    N.Editable,
-    N.FocusEvents,
-    N.Tabindex,
-    // DevTools,
-    te,
-    // DropCursor,
-    lo.configure({
-      emptyNodeClass: k.isEmpty,
-      hasAnchorClass: k.hasAnchor,
-      isFilterClass: k.isFilter,
-      includeChildren: !0,
-      showOnlyCurrent: !1
-    }),
-    K.configure({
-      types: ["blockContainer"]
-    }),
-    ee,
-    // Comments,
-    // basics:
-    ie,
-    // marks:
-    Kt,
-    Jt,
-    ne,
-    re,
-    se,
-    fo,
-    po,
-    Ae,
-    Ne,
-    ho,
-    // custom blocks:
-    ...ze,
-    ...Object.values(o.blockSchema).map(
-      (t) => t.node.configure({ editor: o.editor })
-    ),
-    $e,
-    Qt.configure({ width: 5, color: "#ddeeff" }),
-    // This needs to be at the bottom of this list, because Key events (such as enter, when selecting a /command),
-    // should be handled before Enter handlers in other components like splitListItem
-    mo
-  ];
-  if (o.collaboration) {
-    e.push(
-      Xt.configure({
-        fragment: o.collaboration.fragment
-      })
-    );
-    const t = (n) => {
-      const r = document.createElement("span");
-      r.classList.add(P["collaboration-cursor__caret"]), r.setAttribute("style", `border-color: ${n.color}`);
-      const i = document.createElement("span");
-      i.classList.add(P["collaboration-cursor__label"]), i.setAttribute("style", `background-color: ${n.color}`), i.insertBefore(document.createTextNode(n.name), null);
-      const s = document.createTextNode("⁠"), a = document.createTextNode("⁠");
-      return r.insertBefore(s, null), r.insertBefore(i, null), r.insertBefore(a, null), r;
-    };
-    e.push(
-      Zt.configure({
-        user: o.collaboration.user,
-        render: o.collaboration.renderCursor || t,
-        provider: o.collaboration.provider
-      })
-    );
-  } else
-    e.push(oe);
-  return o.uiFactories.blockSideMenuFactory && e.push(
-    Qe().configure({
-      editor: o.editor,
-      blockSideMenuFactory: o.uiFactories.blockSideMenuFactory
     })
-  ), o.uiFactories.formattingToolbarFactory && e.push(
-    oo().configure({
-      editor: o.editor,
-      formattingToolbarFactory: o.uiFactories.formattingToolbarFactory
+  })), "bulletListItem" in n && e.push({
+    name: "Bullet List",
+    aliases: ["ul", "list", "bulletlist", "bullet list"],
+    execute: (i) => _(i, {
+      type: "bulletListItem"
     })
-  ), o.uiFactories.hyperlinkToolbarFactory ? e.push(
-    so.configure({
-      hyperlinkToolbarFactory: o.uiFactories.hyperlinkToolbarFactory
+  }), "numberedListItem" in n && e.push({
+    name: "Numbered List",
+    aliases: ["li", "list", "numberedlist", "numbered list"],
+    execute: (i) => _(i, {
+      type: "numberedListItem"
     })
-  ) : e.push(ut), o.uiFactories.slashMenuFactory && e.push(
-    We().configure({
-      editor: o.editor,
-      commands: o.slashCommands,
-      slashMenuFactory: o.uiFactories.slashMenuFactory
+  }), "paragraph" in n && e.push({
+    name: "Paragraph",
+    aliases: ["p"],
+    execute: (i) => _(i, {
+      type: "paragraph"
     })
-  ), e;
-}, ko = {
+  }), e;
+}, mo = {
   enableInputRules: !0,
   enablePasteRules: !0,
   enableCoreExtensions: !1
 };
-class Ko {
+class Wo {
   constructor(e = {}) {
-    h(this, "_tiptapEditor");
-    h(this, "blockCache", /* @__PURE__ */ new WeakMap());
-    h(this, "schema");
-    var i, s, a;
+    u(this, "_tiptapEditor");
+    u(this, "blockCache", /* @__PURE__ */ new WeakMap());
+    u(this, "schema");
+    u(this, "ready", !1);
+    u(this, "sideMenu");
+    u(this, "formattingToolbar");
+    u(this, "slashMenu");
+    u(this, "hyperlinkToolbar");
+    var l, a, d;
     this.options = e;
     const t = {
       defaultStyles: !0,
@@ -2710,54 +2626,74 @@ class Ko {
       //  If BSchema is not specified, then options.blockSchema should also not
       //  be defined. Unfortunately, trying to implement these constraints seems
       //  to be a huge pain, hence the `as any` casts.
-      blockSchema: e.blockSchema || ke,
+      blockSchema: e.blockSchema || wt,
       ...e
-    }, n = go({
+    };
+    this.sideMenu = new ho(this), this.formattingToolbar = new oo(this), this.slashMenu = new Ve(
+      this,
+      t.slashMenuItems || fo(t.blockSchema)
+    ), this.hyperlinkToolbar = new io(this);
+    const o = We({
       editor: this,
-      uiFactories: t.uiFactories || {},
-      slashCommands: t.slashCommands || uo,
       blockSchema: t.blockSchema,
       collaboration: t.collaboration
+    }), r = T.create({
+      name: "BlockNoteUIExtension",
+      addProseMirrorPlugins: () => [
+        this.sideMenu.plugin,
+        this.formattingToolbar.plugin,
+        this.slashMenu.plugin,
+        this.hyperlinkToolbar.plugin
+      ]
     });
-    this.schema = t.blockSchema;
-    const r = {
-      // TODO: This approach to setting initial content is "cleaner" but requires the PM editor schema, which is only
-      //  created after initializing the TipTap editor. Not sure it's feasible.
-      // content:
-      //   options.initialContent &&
-      //   options.initialContent.map((block) =>
-      //     blockToNode(block, this._tiptapEditor.schema).toJSON()
-      //   ),
-      ...ko,
+    o.push(r), this.schema = t.blockSchema;
+    const i = t.initialContent || [
+      {
+        type: "paragraph",
+        id: U.options.generateID()
+      }
+    ], s = {
+      ...mo,
       ...t._tiptapOptions,
       onCreate: () => {
-        var l;
-        (l = t.onEditorReady) == null || l.call(t, this), t.initialContent && this.replaceBlocks(this.topLevelBlocks, t.initialContent);
+        var c;
+        (c = t.onEditorReady) == null || c.call(t, this), this.ready = !0;
+      },
+      onBeforeCreate(c) {
+        const p = c.editor.schema, h = i.map((m) => O(m, p)), f = p.node(
+          "doc",
+          void 0,
+          p.node("blockGroup", void 0, h)
+        );
+        c.editor.options.content = f.toJSON();
       },
       onUpdate: () => {
-        var l;
-        (l = t.onEditorContentChange) == null || l.call(t, this);
+        var c;
+        this.ready && ((c = t.onEditorContentChange) == null || c.call(t, this));
       },
       onSelectionUpdate: () => {
-        var l;
-        (l = t.onTextCursorPositionChange) == null || l.call(t, this);
+        var c;
+        this.ready && ((c = t.onTextCursorPositionChange) == null || c.call(t, this));
       },
       editable: e.editable === void 0 ? !0 : e.editable,
-      extensions: t.enableBlockNoteExtensions === !1 ? (i = t._tiptapOptions) == null ? void 0 : i.extensions : [...((s = t._tiptapOptions) == null ? void 0 : s.extensions) || [], ...n],
+      extensions: t.enableBlockNoteExtensions === !1 ? (l = t._tiptapOptions) == null ? void 0 : l.extensions : [...((a = t._tiptapOptions) == null ? void 0 : a.extensions) || [], ...o],
       editorProps: {
         attributes: {
           "data-theme": e.theme || "light",
           ...t.editorDOMAttributes || {},
           class: [
-            P.bnEditor,
-            P.bnRoot,
-            t.defaultStyles ? P.defaultStyles : "",
-            ((a = t.editorDOMAttributes) == null ? void 0 : a.class) || ""
+            H.bnEditor,
+            H.bnRoot,
+            t.defaultStyles ? H.defaultStyles : "",
+            ((d = t.editorDOMAttributes) == null ? void 0 : d.class) || ""
           ].join(" ")
         }
       }
     };
-    t.parentElement && (r.element = t.parentElement), this._tiptapEditor = new Ut(r);
+    t.parentElement && (s.element = t.parentElement), this._tiptapEditor = new Ut(s);
+  }
+  get prosemirrorView() {
+    return this._tiptapEditor.view;
   }
   get domElement() {
     return this._tiptapEditor.view.dom;
@@ -2774,7 +2710,7 @@ class Ko {
    */
   get topLevelBlocks() {
     const e = [];
-    return this._tiptapEditor.state.doc.firstChild.descendants((t) => (e.push(B(t, this.schema, this.blockCache)), !1)), e;
+    return this._tiptapEditor.state.doc.firstChild.descendants((t) => (e.push(M(t, this.schema, this.blockCache)), !1)), e;
   }
   /**
    * Gets a snapshot of an existing block from the editor.
@@ -2783,8 +2719,8 @@ class Ko {
    */
   getBlock(e) {
     const t = typeof e == "string" ? e : e.id;
-    let n;
-    return this._tiptapEditor.state.doc.firstChild.descendants((r) => typeof n < "u" ? !1 : r.type.name !== "blockContainer" || r.attrs.id !== t ? !0 : (n = B(r, this.schema, this.blockCache), !1)), n;
+    let o;
+    return this._tiptapEditor.state.doc.firstChild.descendants((r) => typeof o < "u" ? !1 : r.type.name !== "blockContainer" || r.attrs.id !== t ? !0 : (o = M(r, this.schema, this.blockCache), !1)), o;
   }
   /**
    * Traverses all blocks in the editor depth-first, and executes a callback for each.
@@ -2792,19 +2728,19 @@ class Ko {
    * @param reverse Whether the blocks should be traversed in reverse order.
    */
   forEachBlock(e, t = !1) {
-    const n = this.topLevelBlocks.slice();
-    t && n.reverse();
+    const o = this.topLevelBlocks.slice();
+    t && o.reverse();
     function r(i) {
       for (const s of i) {
         if (!e(s))
           return !1;
-        const a = t ? s.children.slice().reverse() : s.children;
-        if (!r(a))
+        const l = t ? s.children.slice().reverse() : s.children;
+        if (!r(l))
           return !1;
       }
       return !0;
     }
-    r(n);
+    r(o);
   }
   /**
    * Executes a callback whenever the editor's contents change.
@@ -2813,22 +2749,29 @@ class Ko {
   onEditorContentChange(e) {
     this._tiptapEditor.on("update", e);
   }
+  /**
+   * Executes a callback whenever the editor's selection changes.
+   * @param callback The callback to execute.
+   */
+  onEditorSelectionChange(e) {
+    this._tiptapEditor.on("selectionUpdate", e);
+  }
   /**
    * Gets a snapshot of the current text cursor position.
    * @returns A snapshot of the current text cursor position.
    */
   getTextCursorPosition() {
-    const { node: e, depth: t, startPos: n, endPos: r } = g(
+    const { node: e, depth: t, startPos: o, endPos: r } = g(
       this._tiptapEditor.state.doc,
       this._tiptapEditor.state.selection.from
     ), i = this._tiptapEditor.state.doc.resolve(r).index(t - 1), s = this._tiptapEditor.state.doc.resolve(r + 1).node().childCount;
-    let a;
-    i > 0 && (a = this._tiptapEditor.state.doc.resolve(n - 2).node());
     let l;
-    return i < s - 1 && (l = this._tiptapEditor.state.doc.resolve(r + 2).node()), {
-      block: B(e, this.schema, this.blockCache),
-      prevBlock: a === void 0 ? void 0 : B(a, this.schema, this.blockCache),
-      nextBlock: l === void 0 ? void 0 : B(l, this.schema, this.blockCache)
+    i > 0 && (l = this._tiptapEditor.state.doc.resolve(o - 2).node());
+    let a;
+    return i < s - 1 && (a = this._tiptapEditor.state.doc.resolve(r + 2).node()), {
+      block: M(e, this.schema, this.blockCache),
+      prevBlock: l === void 0 ? void 0 : M(l, this.schema, this.blockCache),
+      nextBlock: a === void 0 ? void 0 : M(a, this.schema, this.blockCache)
     };
   }
   /**
@@ -2838,7 +2781,7 @@ class Ko {
    * @param placement Whether the text cursor should be placed at the start or end of the block.
    */
   setTextCursorPosition(e, t = "start") {
-    const n = typeof e == "string" ? e : e.id, { posBeforeNode: r } = J(n, this._tiptapEditor.state.doc), { startPos: i, contentNode: s } = g(
+    const o = typeof e == "string" ? e : e.id, { posBeforeNode: r } = X(o, this._tiptapEditor.state.doc), { startPos: i, contentNode: s } = g(
       this._tiptapEditor.state.doc,
       r + 2
     );
@@ -2853,9 +2796,9 @@ class Ko {
     if (this._tiptapEditor.state.selection.from === this._tiptapEditor.state.selection.to)
       return;
     const e = [];
-    return this._tiptapEditor.state.doc.descendants((t, n) => t.type.spec.group !== "blockContent" || n + t.nodeSize < this._tiptapEditor.state.selection.from || n > this._tiptapEditor.state.selection.to ? !0 : (e.push(
-      B(
-        this._tiptapEditor.state.doc.resolve(n).node(),
+    return this._tiptapEditor.state.doc.descendants((t, o) => t.type.spec.group !== "blockContent" || o + t.nodeSize < this._tiptapEditor.state.selection.from || o > this._tiptapEditor.state.selection.to ? !0 : (e.push(
+      M(
+        this._tiptapEditor.state.doc.resolve(o).node(),
         this.schema,
         this.blockCache
       )
@@ -2883,8 +2826,8 @@ class Ko {
    * @param placement Whether the blocks should be inserted just before, just after, or nested inside the
    * `referenceBlock`. Inserts the blocks at the start of the existing block's children if "nested" is used.
    */
-  insertBlocks(e, t, n = "before") {
-    wt(e, t, n, this._tiptapEditor);
+  insertBlocks(e, t, o = "before") {
+    Tt(e, t, o, this._tiptapEditor);
   }
   /**
    * Updates an existing block in the editor. Since updatedBlock is a PartialBlock object, some fields might not be
@@ -2894,14 +2837,14 @@ class Ko {
    * @param update A partial block which defines how the existing block should be changed.
    */
   updateBlock(e, t) {
-    Me(e, t, this._tiptapEditor);
+    Ye(e, t, this._tiptapEditor);
   }
   /**
    * Removes existing blocks from the editor. Throws an error if any of the blocks could not be found.
    * @param blocksToRemove An array of identifiers for existing blocks that should be removed.
    */
   removeBlocks(e) {
-    St(e, this._tiptapEditor);
+    Bt(e, this._tiptapEditor);
   }
   /**
    * Replaces existing blocks in the editor with new blocks. If the blocks that should be removed are not adjacent or
@@ -2911,13 +2854,13 @@ class Ko {
    * @param blocksToInsert An array of partial blocks to replace the old ones with.
    */
   replaceBlocks(e, t) {
-    Be(e, t, this._tiptapEditor);
+    Je(e, t, this._tiptapEditor);
   }
   /**
    * Gets the active text styles at the text cursor position or at the end of the current selection if it's active.
    */
   getActiveStyles() {
-    const e = {}, t = this._tiptapEditor.state.selection.$to.marks(), n = /* @__PURE__ */ new Set([
+    const e = {}, t = this._tiptapEditor.state.selection.$to.marks(), o = /* @__PURE__ */ new Set([
       "bold",
       "italic",
       "underline",
@@ -2925,7 +2868,7 @@ class Ko {
       "code"
     ]), r = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
     for (const i of t)
-      n.has(i.type.name) ? e[i.type.name] = !0 : r.has(i.type.name) && (e[i.type.name] = i.attrs.color);
+      o.has(i.type.name) ? e[i.type.name] = !0 : r.has(i.type.name) && (e[i.type.name] = i.attrs.color);
     return e;
   }
   /**
@@ -2939,10 +2882,10 @@ class Ko {
       "underline",
       "strike",
       "code"
-    ]), n = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
+    ]), o = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
     this._tiptapEditor.view.focus();
     for (const [r, i] of Object.entries(e))
-      t.has(r) ? this._tiptapEditor.commands.setMark(r) : n.has(r) && this._tiptapEditor.commands.setMark(r, { color: i });
+      t.has(r) ? this._tiptapEditor.commands.setMark(r) : o.has(r) && this._tiptapEditor.commands.setMark(r, { color: i });
   }
   /**
    * Removes styles from the currently selected content.
@@ -2964,10 +2907,10 @@ class Ko {
       "underline",
       "strike",
       "code"
-    ]), n = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
+    ]), o = /* @__PURE__ */ new Set(["textColor", "backgroundColor"]);
     this._tiptapEditor.view.focus();
     for (const [r, i] of Object.entries(e))
-      t.has(r) ? this._tiptapEditor.commands.toggleMark(r) : n.has(r) && this._tiptapEditor.commands.toggleMark(r, { color: i });
+      t.has(r) ? this._tiptapEditor.commands.toggleMark(r) : o.has(r) && this._tiptapEditor.commands.toggleMark(r, { color: i });
   }
   /**
    * Gets the currently selected text.
@@ -2992,11 +2935,11 @@ class Ko {
   createLink(e, t) {
     if (e === "")
       return;
-    let { from: n, to: r } = this._tiptapEditor.state.selection;
-    t || (t = this._tiptapEditor.state.doc.textBetween(n, r));
+    let { from: o, to: r } = this._tiptapEditor.state.selection;
+    t || (t = this._tiptapEditor.state.doc.textBetween(o, r));
     const i = this._tiptapEditor.schema.mark("link", { href: e });
     this._tiptapEditor.view.dispatch(
-      this._tiptapEditor.view.state.tr.insertText(t, n, r).addMark(n, n + t.length, i)
+      this._tiptapEditor.view.state.tr.insertText(t, o, r).addMark(o, o + t.length, i)
     );
   }
   /**
@@ -3048,7 +2991,7 @@ class Ko {
    * @returns The blocks parsed from the HTML string.
    */
   async HTMLToBlocks(e) {
-    return It(e, this.schema, this._tiptapEditor.schema);
+    return _t(e, this.schema, this._tiptapEditor.schema);
   }
   /**
    * Serializes blocks into a Markdown string. The output is simplified as Markdown does not support all features of
@@ -3057,7 +3000,7 @@ class Ko {
    * @returns The blocks, serialized as a Markdown string.
    */
   async blocksToMarkdown(e) {
-    return Se(e, this._tiptapEditor.schema);
+    return Ze(e, this._tiptapEditor.schema);
   }
   /**
    * Creates a list of blocks from a Markdown string. Tries to create `Block` and `InlineNode` objects based on
@@ -3067,7 +3010,7 @@ class Ko {
    * @returns The blocks parsed from the Markdown string.
    */
   async markdownToBlocks(e) {
-    return xe(e, this.schema, this._tiptapEditor.schema);
+    return Qe(e, this.schema, this._tiptapEditor.schema);
   }
   /**
    * Updates the user info for the current user that's shown to other collaborators.
@@ -3081,19 +3024,29 @@ class Ko {
   }
 }
 export {
-  S as BaseSlashMenuItem,
-  Ko as BlockNoteEditor,
-  $e as CustomBlockSerializerExtension,
-  Yo as blockStyles,
-  ot as camelToDataKebab,
-  Vo as createBlockSpec,
-  H as createTipTapBlock,
-  ke as defaultBlockSchema,
-  A as defaultProps,
-  uo as defaultSlashMenuItems,
-  go as getBlockNoteExtensions,
-  de as parse,
-  le as propsToAttributes,
-  ce as render
+  Wo as BlockNoteEditor,
+  Oe as CustomBlockSerializerExtension,
+  oo as FormattingToolbarProsemirrorPlugin,
+  to as FormattingToolbarView,
+  io as HyperlinkToolbarProsemirrorPlugin,
+  ho as SideMenuProsemirrorPlugin,
+  uo as SideMenuView,
+  Ve as SlashMenuProsemirrorPlugin,
+  jo as blockStyles,
+  nt as camelToDataKebab,
+  qo as createBlockSpec,
+  P as createTipTapBlock,
+  wt as defaultBlockSchema,
+  N as defaultProps,
+  eo as formattingToolbarPluginKey,
+  We as getBlockNoteExtensions,
+  fo as getDefaultSlashMenuItems,
+  ro as hyperlinkToolbarPluginKey,
+  ge as parse,
+  me as propsToAttributes,
+  ke as render,
+  ze as setupSuggestionsMenu,
+  po as sideMenuPluginKey,
+  K as slashMenuPluginKey
 };
 //# sourceMappingURL=blocknote.js.map