@blocknote/core 0.2.3 → 0.3.0

package/dist/blocknote.js

@@ -1,25 +1,24 @@
-var re = Object.defineProperty;
-var ie = (t, e, o) => e in t ? re(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
-var h = (t, e, o) => (ie(t, typeof e != "symbol" ? e + "" : e, o), o);
-import { combineTransactionSteps as J, getChangedRanges as Q, findChildren as D, Node as T, mergeAttributes as S, InputRule as $, isTextSelection as se, isNodeSelection as ae, posToDOMRect as X, Extension as P, findParentNode as le, getMarkRange as W, findChildrenInRange as de, extensions as N, Editor as ce } from "@tiptap/core";
-import ue from "@tiptap/extension-bold";
-import he from "@tiptap/extension-code";
-import pe from "@tiptap/extension-dropcursor";
-import me from "@tiptap/extension-gapcursor";
-import fe from "@tiptap/extension-hard-break";
-import { History as ke } from "@tiptap/extension-history";
-import ge from "@tiptap/extension-italic";
-import ye from "@tiptap/extension-strike";
-import be from "@tiptap/extension-text";
-import ve from "@tiptap/extension-underline";
-import { Slice as z, Fragment as Z } from "prosemirror-model";
-import { PluginKey as B, Plugin as M, TextSelection as K, Selection as F, NodeSelection as Be } from "prosemirror-state";
-import * as Me from "prosemirror-view";
-import { Decoration as L, DecorationSet as O } from "prosemirror-view";
-import { escapeRegExp as V } from "lodash";
-import { Link as ee } from "@tiptap/extension-link";
+var ee = Object.defineProperty;
+var te = (t, e, o) => e in t ? ee(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
+var h = (t, e, o) => (te(t, typeof e != "symbol" ? e + "" : e, o), o);
+import { findChildren as D, Node as x, mergeAttributes as w, InputRule as q, isTextSelection as oe, isNodeSelection as ne, posToDOMRect as j, Extension as C, findParentNode as re, getMarkRange as V, combineTransactionSteps as ie, getChangedRanges as se, findChildrenInRange as ae, Mark as K, extensions as A, Editor as de } from "@tiptap/core";
+import le from "@tiptap/extension-bold";
+import ce from "@tiptap/extension-code";
+import ue from "@tiptap/extension-dropcursor";
+import he from "@tiptap/extension-gapcursor";
+import pe from "@tiptap/extension-hard-break";
+import { History as me } from "@tiptap/extension-history";
+import fe from "@tiptap/extension-italic";
+import ke from "@tiptap/extension-strike";
+import ge from "@tiptap/extension-text";
+import be from "@tiptap/extension-underline";
+import { Slice as E, Fragment as H } from "prosemirror-model";
+import { PluginKey as v, Plugin as B, TextSelection as F, Selection as _, NodeSelection as ye } from "prosemirror-state";
+import * as ve from "prosemirror-view";
+import { Decoration as N, DecorationSet as L } from "prosemirror-view";
+import { Link as J } from "@tiptap/extension-link";
 import { v4 as Ce } from "uuid";
-function g(t, e) {
+function f(t, e) {
   if (e <= 0 || e > t.nodeSize)
     return;
   const o = t.resolve(e), n = o.depth;
@@ -31,33 +30,33 @@ function g(t, e) {
       break;
     a -= 1, r = o.node(a);
   }
-  const l = r.attrs.id, i = r.firstChild, s = i.type, c = r.childCount === 2 ? r.lastChild.childCount : 0, p = o.start(a), u = o.end(a);
+  const d = r.attrs.id, s = r.firstChild, i = s.type, l = r.childCount === 2 ? r.lastChild.childCount : 0, u = o.start(a), c = o.end(a);
   return {
-    id: l,
+    id: d,
     node: r,
-    contentNode: i,
-    contentType: s,
-    numChildBlocks: c,
-    startPos: p,
-    endPos: u,
+    contentNode: s,
+    contentType: i,
+    numChildBlocks: l,
+    startPos: u,
+    endPos: c,
     depth: a
   };
 }
-const Y = new B("previous-blocks"), we = {
+const W = new v("previous-blocks"), Be = {
   index: "index",
   level: "level",
   type: "type",
   depth: "depth",
   "depth-change": "depth-change"
-}, Ie = () => new M({
-  key: Y,
+}, Me = () => new B({
+  key: W,
   view(t) {
     return {
       update: async (e, o) => {
         var n;
-        (n = this.key) != null && n.getState(e.state).needsUpdate && setTimeout(() => {
+        ((n = this.key) == null ? void 0 : n.getState(e.state).updatedBlocks.size) > 0 && setTimeout(() => {
           e.dispatch(
-            e.state.tr.setMeta(Y, { clearUpdate: !0 })
+            e.state.tr.setMeta(W, { clearUpdate: !0 })
           );
         }, 0);
       }
@@ -66,86 +65,72 @@ const Y = new B("previous-blocks"), we = {
   state: {
     init() {
       return {
-        prevBlockAttrs: {},
-        needsUpdate: !1
+        prevTransactionOldBlockAttrs: {},
+        currentTransactionOldBlockAttrs: {},
+        updatedBlocks: /* @__PURE__ */ new Set()
       };
     },
     apply(t, e, o, n) {
-      if (e.needsUpdate = !1, e.prevBlockAttrs = {}, !t.docChanged || o.doc.eq(n.doc))
+      if (e.currentTransactionOldBlockAttrs = {}, e.updatedBlocks.clear(), !t.docChanged || o.doc.eq(n.doc))
         return e;
-      const r = J(o.doc, [t]);
-      return Q(r).forEach(() => {
-        const l = D(o.doc, (c) => c.attrs.id), i = new Map(
-          l.map((c) => [c.node.attrs.id, c])
-        ), s = D(n.doc, (c) => c.attrs.id);
-        for (let c of s) {
-          const p = i.get(c.node.attrs.id), u = p == null ? void 0 : p.node.firstChild, d = c.node.firstChild;
-          if (p && u && d) {
-            const m = {
-              index: d.attrs.index,
-              level: d.attrs.level,
-              type: d.type.name,
-              depth: n.doc.resolve(c.pos).depth
-            }, f = {
-              index: u.attrs.index,
-              level: u.attrs.level,
-              type: u.type.name,
-              depth: o.doc.resolve(p.pos).depth
-            }, y = f.index === null && m.index !== null, b = f.index !== null && m.index !== null && f.index === m.index, k = f.type === "numberedListItem" && m.type === "numberedListItem" ? y || b : !0;
-            JSON.stringify(f) !== JSON.stringify(m) && k && (f["depth-change"] = f.depth - m.depth, e.prevBlockAttrs[c.node.attrs.id] = f, console.log(
-              "id:",
-              c.node.attrs.id,
-              "previousBlockTypePlugin changes detected, oldAttrs",
-              f,
-              "new",
-              m
-            ), e.needsUpdate = !0);
-          }
+      const r = {}, a = D(o.doc, (i) => i.attrs.id), d = new Map(
+        a.map((i) => [i.node.attrs.id, i])
+      ), s = D(n.doc, (i) => i.attrs.id);
+      for (let i of s) {
+        const l = d.get(i.node.attrs.id), u = l == null ? void 0 : l.node.firstChild, c = i.node.firstChild;
+        if (l && u && c) {
+          const p = {
+            index: c.attrs.index,
+            level: c.attrs.level,
+            type: c.type.name,
+            depth: n.doc.resolve(i.pos).depth
+          };
+          let m = {
+            index: u.attrs.index,
+            level: u.attrs.level,
+            type: u.type.name,
+            depth: o.doc.resolve(l.pos).depth
+          };
+          r[i.node.attrs.id] = m, t.getMeta("numberedListIndexing") && (i.node.attrs.id in e.prevTransactionOldBlockAttrs && (m = e.prevTransactionOldBlockAttrs[i.node.attrs.id]), p.type === "numberedListItem" && (m.index = p.index)), e.currentTransactionOldBlockAttrs[i.node.attrs.id] = m, JSON.stringify(m) !== JSON.stringify(p) && (m["depth-change"] = m.depth - p.depth, e.updatedBlocks.add(i.node.attrs.id));
         }
-      }), e;
+      }
+      return e.prevTransactionOldBlockAttrs = r, e;
     }
   },
   props: {
     decorations(t) {
       const e = this.getState(t);
-      if (!e.needsUpdate)
+      if (e.updatedBlocks.size === 0)
         return;
       const o = [];
       return t.doc.descendants((n, r) => {
-        if (!n.attrs.id)
-          return;
-        const a = e.prevBlockAttrs[n.attrs.id];
-        if (!a)
+        if (!n.attrs.id || !e.updatedBlocks.has(n.attrs.id))
           return;
-        const l = {};
-        for (let [s, c] of Object.entries(a))
-          l["data-prev-" + we[s]] = c || "none";
-        console.log(
-          "previousBlockTypePlugin committing decorations",
-          l
-        );
-        const i = L.node(r, r + n.nodeSize, {
-          ...l
+        const a = e.currentTransactionOldBlockAttrs[n.attrs.id], d = {};
+        for (let [i, l] of Object.entries(a))
+          d["data-prev-" + Be[i]] = l || "none";
+        const s = N.node(r, r + n.nodeSize, {
+          ...d
         });
-        o.push(i);
-      }), O.create(t.doc, o);
+        o.push(s);
+      }), L.create(t.doc, o);
     }
   }
-}), Te = "_blockOuter_6qmsf_5", Ee = "_block_6qmsf_5", xe = "_blockContent_6qmsf_25", Se = "_blockGroup_6qmsf_53", Pe = "_isEmpty_6qmsf_238", Ne = "_isFilter_6qmsf_239", Ae = "_hasAnchor_6qmsf_252", v = {
+}), Te = "_blockOuter_1ltqa_5", we = "_block_1ltqa_5", xe = "_blockContent_1ltqa_19", Ie = "_blockGroup_1ltqa_47", Ae = "_isEmpty_1ltqa_232", Pe = "_isFilter_1ltqa_233", Se = "_hasAnchor_1ltqa_246", y = {
   blockOuter: Te,
-  block: Ee,
+  block: we,
   blockContent: xe,
-  blockGroup: Se,
-  isEmpty: Pe,
-  isFilter: Ne,
-  hasAnchor: Ae
-}, He = {
+  blockGroup: Ie,
+  isEmpty: Ae,
+  isFilter: Pe,
+  hasAnchor: Se
+}, Ee = {
   blockColor: "data-block-color",
   blockStyle: "data-block-style",
   id: "data-id",
   depth: "data-depth",
   depthChange: "data-depth-change"
-}, Le = T.create({
+}, He = x.create({
   name: "blockContainer",
   group: "blockContainer",
   content: "blockContent blockGroup?",
@@ -156,16 +141,6 @@ const Y = new B("previous-blocks"), we = {
       HTMLAttributes: {}
     };
   },
-  addAttributes() {
-    return {
-      blockColor: {
-        default: void 0
-      },
-      blockStyle: {
-        default: void 0
-      }
-    };
-  },
   parseHTML() {
     return [
       {
@@ -174,7 +149,7 @@ const Y = new B("previous-blocks"), we = {
           if (typeof t == "string")
             return !1;
           const e = {};
-          for (let [o, n] of Object.entries(He))
+          for (let [o, n] of Object.entries(Ee))
             t.getAttribute(n) && (e[o] = t.getAttribute(n));
           return t.getAttribute("data-node-type") === "blockContainer" ? e : !1;
         }
@@ -184,14 +159,14 @@ const Y = new B("previous-blocks"), we = {
   renderHTML({ HTMLAttributes: t }) {
     return [
       "div",
-      S(t, {
-        class: v.blockOuter,
+      w(t, {
+        class: y.blockOuter,
         "data-node-type": "block-outer"
       }),
       [
         "div",
-        S(t, {
-          class: v.block,
+        w(t, {
+          class: y.block,
           "data-node-type": this.name
         }),
         0
@@ -205,62 +180,74 @@ const Y = new B("previous-blocks"), we = {
         return o && e.tr.insert(t, n), !0;
       },
       BNDeleteBlock: (t) => ({ state: e, view: o, dispatch: n }) => {
-        const r = g(e.doc, t);
+        const r = f(e.doc, t);
         if (r === void 0)
           return !1;
-        const { startPos: a, endPos: l } = r;
-        return n && (e.tr.deleteRange(a, l), e.tr.setSelection(
-          new K(e.doc.resolve(a + 1))
+        const { startPos: a, endPos: d } = r;
+        return n && (e.tr.deleteRange(a, d), e.tr.setSelection(
+          new F(e.doc.resolve(a + 1))
         ), o.focus()), !0;
       },
       BNMergeBlocks: (t) => ({ state: e, dispatch: o }) => {
         const n = e.doc.resolve(t + 1).node().type.name === "blockContainer", r = e.doc.resolve(t - 1).node().type.name === "blockContainer";
         if (!n || !r)
           return !1;
-        const a = g(
+        const a = f(
           e.doc,
           t + 1
-        ), { node: l, contentNode: i, startPos: s, endPos: c, depth: p } = a;
-        if (l.childCount === 2) {
+        ), { node: d, contentNode: s, startPos: i, endPos: l, depth: u } = a;
+        if (d.childCount === 2) {
           const m = e.doc.resolve(
-            s + i.nodeSize + 1
-          ), f = e.doc.resolve(c - 1), y = m.blockRange(f);
-          o && e.tr.lift(y, p - 1);
+            i + s.nodeSize + 1
+          ), k = e.doc.resolve(l - 1), b = m.blockRange(k);
+          o && e.tr.lift(b, u - 1);
         }
-        let u = t - 1, d = g(e.doc, u);
-        for (; d.numChildBlocks > 0; )
-          if (u--, d = g(e.doc, u), d === void 0)
+        let c = t - 1, p = f(e.doc, c);
+        for (; p.numChildBlocks > 0; )
+          if (c--, p = f(e.doc, c), p === void 0)
             return !1;
-        return o && (e.tr.deleteRange(s, s + i.nodeSize), e.tr.insertText(i.textContent, u - 1), e.tr.setSelection(
-          new K(e.doc.resolve(u - 1))
+        return o && (e.tr.deleteRange(i, i + s.nodeSize), e.tr.insertText(s.textContent, c - 1), e.tr.setSelection(
+          new F(e.doc.resolve(c - 1))
         )), !0;
       },
       BNSplitBlock: (t, e) => ({ state: o, dispatch: n }) => {
-        const r = g(o.doc, t);
+        const r = f(o.doc, t);
         if (r === void 0)
           return !1;
-        const { contentNode: a, contentType: l, startPos: i, endPos: s, depth: c } = r, p = s + 1, u = o.doc.textBetween(t, s), d = o.schema.nodes.blockContainer.createAndFill(), m = p + 2;
-        n && (o.tr.insert(p, d), o.tr.insertText(u, m), e && o.tr.setBlockType(
-          m,
-          m,
-          o.schema.node(l).type,
+        const { contentNode: a, contentType: d, startPos: s, endPos: i, depth: l } = r, u = o.doc.cut(s + 1, t), c = o.doc.cut(t, i - 1), p = o.schema.nodes.blockContainer.createAndFill(), m = i + 1, k = m + 2;
+        return n && (o.tr.insert(m, p), o.tr.replace(
+          k,
+          k + 1,
+          c.content.size > 0 ? new E(
+            H.from(c),
+            l + 2,
+            l + 2
+          ) : void 0
+        ), e && o.tr.setBlockType(
+          k,
+          k,
+          o.schema.node(d).type,
           a.attrs
-        ));
-        const f = o.doc.content.cut(i, t);
-        return n && o.tr.replace(
-          i,
-          s,
-          new z(f, c, c)
-        ), !0;
+        ), o.tr.setSelection(
+          new F(o.doc.resolve(k))
+        ), o.tr.replace(
+          s + 1,
+          i - 1,
+          u.content.size > 0 ? new E(
+            H.from(u),
+            l + 2,
+            l + 2
+          ) : void 0
+        )), !0;
       },
       BNUpdateBlock: (t, e) => ({ state: o, dispatch: n }) => {
-        const r = g(o.doc, t);
+        const r = f(o.doc, t);
         if (r === void 0)
           return !1;
-        const { node: a, startPos: l, contentNode: i } = r;
+        const { node: a, startPos: d, contentNode: s } = r;
         return n && o.tr.setBlockType(
-          l + 1,
-          l + i.nodeSize + 1,
+          d + 1,
+          d + s.nodeSize + 1,
           o.schema.node(e.type).type,
           {
             ...a.attrs,
@@ -269,22 +256,22 @@ const Y = new B("previous-blocks"), we = {
         ), !0;
       },
       BNCreateOrUpdateBlock: (t, e) => ({ state: o, chain: n }) => {
-        const r = g(o.doc, t);
+        const r = f(o.doc, t);
         if (r === void 0)
           return !1;
-        const { node: a, startPos: l, endPos: i } = r;
+        const { node: a, startPos: d, endPos: s } = r;
         if (a.textContent.length === 0) {
-          const s = l + 1;
-          return n().BNUpdateBlock(t, e).setTextSelection(s).run();
+          const i = d + 1;
+          return n().BNUpdateBlock(t, e).setTextSelection(i).run();
         } else {
-          const s = i + 1, c = s + 1;
-          return n().BNCreateBlock(s).BNUpdateBlock(c, e).setTextSelection(c).run();
+          const i = s + 1, l = i + 1;
+          return n().BNCreateBlock(i).BNUpdateBlock(l, e).setTextSelection(l).run();
         }
       }
     };
   },
   addProseMirrorPlugins() {
-    return [Ie()];
+    return [Me()];
   },
   addKeyboardShortcuts() {
     return {
@@ -292,45 +279,45 @@ const Y = new B("previous-blocks"), we = {
         () => o.deleteSelection(),
         () => o.undoInputRule(),
         () => o.command(({ state: n }) => {
-          const { contentType: r } = g(
+          const { contentType: r } = f(
             n.doc,
             n.selection.from
-          ), a = n.selection.$anchor.parentOffset === 0, l = r.name === "paragraph";
-          return a && !l ? o.BNUpdateBlock(n.selection.from, {
+          ), a = n.selection.$anchor.parentOffset === 0, d = r.name === "paragraph";
+          return a && !d ? o.BNUpdateBlock(n.selection.from, {
             type: "paragraph",
             props: {}
           }) : !1;
         }),
         () => o.command(({ state: n }) => n.selection.$anchor.parentOffset === 0 ? o.liftListItem("blockContainer") : !1),
         () => o.command(({ state: n }) => {
-          const { depth: r, startPos: a } = g(
+          const { depth: r, startPos: a } = f(
             n.doc,
             n.selection.from
-          ), l = n.selection.$anchor.parentOffset === 0, i = n.selection.anchor === n.selection.head, s = a === 2, c = a - 1;
-          return !s && l && i && r === 2 ? o.BNMergeBlocks(c) : !1;
+          ), d = n.selection.$anchor.parentOffset === 0, s = n.selection.anchor === n.selection.head, i = a === 2, l = a - 1;
+          return !i && d && s && r === 2 ? o.BNMergeBlocks(l) : !1;
         })
       ]),
       Enter: () => this.editor.commands.first(({ commands: o }) => [
         () => o.command(({ state: n }) => {
-          const { node: r, depth: a } = g(
+          const { node: r, depth: a } = f(
             n.doc,
             n.selection.from
-          ), l = n.selection.$anchor.parentOffset === 0, i = n.selection.anchor === n.selection.head, s = r.textContent.length === 0, c = a > 2;
-          return l && i && s && c ? o.liftListItem("blockContainer") : !1;
+          ), d = n.selection.$anchor.parentOffset === 0, s = n.selection.anchor === n.selection.head, i = r.textContent.length === 0, l = a > 2;
+          return d && s && i && l ? o.liftListItem("blockContainer") : !1;
         }),
         () => o.command(({ state: n, chain: r }) => {
-          const { node: a, endPos: l } = g(
+          const { node: a, endPos: d } = f(
             n.doc,
             n.selection.from
-          ), i = n.selection.$anchor.parentOffset === 0, s = n.selection.anchor === n.selection.head, c = a.textContent.length === 0;
-          if (i && s && c) {
-            const p = l + 1, u = p + 2;
-            return r().BNCreateBlock(p).setTextSelection(u).run(), !0;
+          ), s = n.selection.$anchor.parentOffset === 0, i = n.selection.anchor === n.selection.head, l = a.textContent.length === 0;
+          if (s && i && l) {
+            const u = d + 1, c = u + 2;
+            return r().BNCreateBlock(u).setTextSelection(c).run(), !0;
           }
           return !1;
         }),
         () => o.command(({ state: n, chain: r }) => {
-          const { node: a } = g(
+          const { node: a } = f(
             n.doc,
             n.selection.from
           );
@@ -370,7 +357,7 @@ const Y = new B("previous-blocks"), we = {
       })
     };
   }
-}), Oe = T.create({
+}), Ne = x.create({
   name: "blockGroup",
   group: "blockGroup",
   content: "blockContainer+",
@@ -390,14 +377,14 @@ const Y = new B("previous-blocks"), we = {
   renderHTML({ HTMLAttributes: t }) {
     return [
       "div",
-      S(this.options.HTMLAttributes, t, {
-        class: v.blockGroup,
+      w(this.options.HTMLAttributes, t, {
+        class: y.blockGroup,
         "data-node-type": "blockGroup"
       }),
       0
     ];
   }
-}), Re = T.create({
+}), Le = x.create({
   name: "paragraph",
   group: "blockContent",
   content: "inline*",
@@ -410,17 +397,17 @@ const Y = new B("previous-blocks"), we = {
       }
     ];
   },
-  renderHTML() {
+  renderHTML({ HTMLAttributes: t }) {
     return [
       "div",
-      {
-        class: v.blockContent,
+      w(t, {
+        class: y.blockContent,
         "data-content-type": this.name
-      },
+      }),
       ["p", 0]
     ];
   }
-}), Fe = T.create({
+}), Oe = x.create({
   name: "heading",
   group: "blockContent",
   content: "inline*",
@@ -437,7 +424,7 @@ const Y = new B("previous-blocks"), we = {
   },
   addInputRules() {
     return [
-      ...["1", "2", "3"].map((t) => new $({
+      ...["1", "2", "3"].map((t) => new q({
         find: new RegExp(`^(#{${parseInt(t)}})\\s$`),
         handler: ({ state: e, chain: o, range: n }) => {
           o().BNUpdateBlock(e.selection.from, {
@@ -472,32 +459,32 @@ const Y = new B("previous-blocks"), we = {
   renderHTML({ node: t, HTMLAttributes: e }) {
     return [
       "div",
-      S(e, {
-        class: v.blockContent,
+      w(e, {
+        class: y.blockContent,
         "data-content-type": this.name
       }),
       ["h" + t.attrs.level, 0]
     ];
   }
-}), te = (t) => {
-  const { node: e, contentType: o } = g(
+}), Q = (t) => {
+  const { node: e, contentType: o } = f(
     t.state.doc,
     t.state.selection.from
   ), n = t.state.selection.anchor === t.state.selection.head;
-  return !o.name.endsWith("ListItem") || !n ? !1 : t.commands.first(({ state: r, chain: a, commands: l }) => [
-    () => l.command(() => e.textContent.length === 0 ? l.BNUpdateBlock(r.selection.from, {
+  return !o.name.endsWith("ListItem") || !n ? !1 : t.commands.first(({ state: r, chain: a, commands: d }) => [
+    () => d.command(() => e.textContent.length === 0 ? d.BNUpdateBlock(r.selection.from, {
       type: "paragraph",
       props: {}
     }) : !1),
-    () => l.command(() => e.textContent.length > 0 ? (a().deleteSelection().BNSplitBlock(r.selection.from, !0).run(), !0) : !1)
+    () => d.command(() => e.textContent.length > 0 ? (a().deleteSelection().BNSplitBlock(r.selection.from, !0).run(), !0) : !1)
   ]);
-}, _e = T.create({
+}, Re = x.create({
   name: "bulletListItem",
   group: "blockContent",
   content: "inline*",
   addInputRules() {
     return [
-      new $({
+      new q({
         find: new RegExp("^[-+*]\\s$"),
         handler: ({ state: t, chain: e, range: o }) => {
           e().BNUpdateBlock(t.selection.from, {
@@ -510,7 +497,7 @@ const Y = new B("previous-blocks"), we = {
   },
   addKeyboardShortcuts() {
     return {
-      Enter: () => te(this.editor)
+      Enter: () => Q(this.editor)
     };
   },
   parseHTML() {
@@ -530,44 +517,44 @@ const Y = new B("previous-blocks"), we = {
   renderHTML({ HTMLAttributes: t }) {
     return [
       "div",
-      S(t, {
-        class: v.blockContent,
+      w(t, {
+        class: y.blockContent,
         "data-content-type": this.name
       }),
       ["li", 0]
     ];
   }
-}), De = new B("numbered-list-indexing"), Ue = () => new M({
-  key: De,
+}), Fe = new v("numbered-list-indexing"), _e = () => new B({
+  key: Fe,
   appendTransaction: (t, e, o) => {
     const n = o.tr;
     n.setMeta("numberedListIndexing", !0);
     let r = !1;
-    return o.doc.descendants((a, l) => {
+    return o.doc.descendants((a, d) => {
       if (a.type.name === "blockContainer" && a.firstChild.type.name === "numberedListItem") {
-        let i = "1";
-        const s = l === 1, c = g(n.doc, l + 1);
-        if (c === void 0)
+        let s = "1";
+        const i = d === 1, l = f(n.doc, d + 1);
+        if (l === void 0)
           return;
-        if (!s) {
-          const d = g(n.doc, l - 2);
-          if (d === void 0)
+        if (!i) {
+          const p = f(n.doc, d - 2);
+          if (p === void 0)
             return;
-          if (!(c.depth !== d.depth)) {
-            const f = d.contentNode;
-            if (d.contentType.name === "numberedListItem") {
-              const k = f.attrs.index;
-              i = (parseInt(k) + 1).toString();
+          if (!(l.depth !== p.depth)) {
+            const k = p.contentNode;
+            if (p.contentType.name === "numberedListItem") {
+              const O = k.attrs.index;
+              s = (parseInt(O) + 1).toString();
             }
           }
         }
-        c.contentNode.attrs.index !== i && (r = !0, n.setNodeMarkup(l + 1, void 0, {
-          index: i
+        l.contentNode.attrs.index !== s && (r = !0, n.setNodeMarkup(d + 1, void 0, {
+          index: s
         }));
       }
     }), r ? n : null;
   }
-}), $e = T.create({
+}), De = x.create({
   name: "numberedListItem",
   group: "blockContent",
   content: "inline*",
@@ -584,7 +571,7 @@ const Y = new B("previous-blocks"), we = {
   },
   addInputRules() {
     return [
-      new $({
+      new q({
         find: new RegExp("^1\\.\\s$"),
         handler: ({ state: t, chain: e, range: o }) => {
           e().BNUpdateBlock(t.selection.from, {
@@ -597,11 +584,11 @@ const Y = new B("previous-blocks"), we = {
   },
   addKeyboardShortcuts() {
     return {
-      Enter: () => te(this.editor)
+      Enter: () => Q(this.editor)
     };
   },
   addProseMirrorPlugins() {
-    return [Ue()];
+    return [_e()];
   },
   parseHTML() {
     return [
@@ -620,27 +607,27 @@ const Y = new B("previous-blocks"), we = {
   renderHTML({ HTMLAttributes: t }) {
     return [
       "div",
-      S(t, {
-        class: v.blockContent,
+      w(t, {
+        class: y.blockContent,
         "data-content-type": this.name
       }),
       ["li", 0]
     ];
   }
-}), ze = [
-  Re,
-  Fe,
-  _e,
-  $e,
+}), Ue = [
   Le,
   Oe,
-  T.create({
+  Re,
+  De,
+  He,
+  Ne,
+  x.create({
     name: "doc",
     topNode: !0,
     content: "blockGroup"
   })
 ];
-class qe {
+class ze {
   constructor({
     editor: e,
     formattingToolbarFactory: o,
@@ -654,8 +641,8 @@ class qe {
     h(this, "preventShow", !1);
     h(this, "toolbarIsOpen", !1);
     h(this, "shouldShow", ({ view: e, state: o, from: n, to: r }) => {
-      const { doc: a, selection: l } = o, { empty: i } = l, s = !a.textBetween(n, r).length && se(o.selection);
-      return !(!e.hasFocus() || i || s);
+      const { doc: a, selection: d } = o, { empty: s } = d, i = !a.textBetween(n, r).length && oe(o.selection);
+      return !(!e.hasFocus() || s || i);
     });
     h(this, "viewMousedownHandler", () => {
       this.preventShow = !0;
@@ -682,30 +669,30 @@ class qe {
     this.editor = e, this.view = n, this.formattingToolbar = o(this.getStaticParams()), r && (this.shouldShow = r), this.view.dom.addEventListener("mousedown", this.viewMousedownHandler), this.view.dom.addEventListener("mouseup", this.viewMouseupHandler), this.view.dom.addEventListener("dragstart", this.dragstartHandler), this.editor.on("focus", this.focusHandler), this.editor.on("blur", this.blurHandler);
   }
   update(e, o) {
-    var d;
-    const { state: n, composing: r } = e, { doc: a, selection: l } = n, i = o && o.doc.eq(a) && o.selection.eq(l);
-    if (r || i)
+    var p;
+    const { state: n, composing: r } = e, { doc: a, selection: d } = n, s = o && o.doc.eq(a) && o.selection.eq(d);
+    if (r || s)
       return;
-    const { ranges: s } = l, c = Math.min(...s.map((m) => m.$from.pos)), p = Math.max(...s.map((m) => m.$to.pos)), u = (d = this.shouldShow) == null ? void 0 : d.call(this, {
+    const { ranges: i } = d, l = Math.min(...i.map((m) => m.$from.pos)), u = Math.max(...i.map((m) => m.$to.pos)), c = (p = this.shouldShow) == null ? void 0 : p.call(this, {
       editor: this.editor,
       view: e,
       state: n,
       oldState: o,
-      from: c,
-      to: p
+      from: l,
+      to: u
     });
-    if (!this.toolbarIsOpen && !this.preventShow && (u || this.preventHide)) {
+    if (!this.toolbarIsOpen && !this.preventShow && (c || this.preventHide)) {
       this.formattingToolbar.render(this.getDynamicParams(), !0), this.toolbarIsOpen = !0, this.formattingToolbar.element.addEventListener(
         "mousedown",
         (m) => m.preventDefault()
       );
       return;
     }
-    if (this.toolbarIsOpen && !this.preventShow && (u || this.preventHide)) {
+    if (this.toolbarIsOpen && !this.preventShow && (c || this.preventHide)) {
       this.formattingToolbar.render(this.getDynamicParams(), !1);
       return;
     }
-    if (this.toolbarIsOpen && !this.preventHide && (!u || this.preventShow)) {
+    if (this.toolbarIsOpen && !this.preventHide && (!c || this.preventShow)) {
       this.formattingToolbar.hide(), this.toolbarIsOpen = !1, this.formattingToolbar.element.removeEventListener(
         "mousedown",
         (m) => m.preventDefault()
@@ -717,13 +704,13 @@ class qe {
     this.view.dom.removeEventListener("mousedown", this.viewMousedownHandler), this.view.dom.removeEventListener("mouseup", this.viewMouseupHandler), this.view.dom.removeEventListener("dragstart", this.dragstartHandler), this.editor.off("focus", this.focusHandler), this.editor.off("blur", this.blurHandler);
   }
   getSelectionBoundingBox() {
-    const { state: e } = this.editor.view, { selection: o } = e, { ranges: n } = o, r = Math.min(...n.map((l) => l.$from.pos)), a = Math.max(...n.map((l) => l.$to.pos));
-    if (ae(o)) {
-      const l = this.editor.view.nodeDOM(r);
-      if (l)
-        return l.getBoundingClientRect();
+    const { state: e } = this.editor.view, { selection: o } = e, { ranges: n } = o, r = Math.min(...n.map((d) => d.$from.pos)), a = Math.max(...n.map((d) => d.$to.pos));
+    if (ne(o)) {
+      const d = this.editor.view.nodeDOM(r);
+      if (d)
+        return d.getBoundingClientRect();
     }
-    return X(this.editor.view, r, a);
+    return j(this.editor.view, r, a);
   }
   getStaticParams() {
     return {
@@ -749,6 +736,21 @@ class qe {
           this.editor.view.state.tr.insertText(o, n, r).addMark(n, n + o.length, a)
         ), this.editor.view.focus();
       },
+      setTextColor: (e) => {
+        this.editor.view.focus(), this.editor.commands.setTextColor(e);
+      },
+      setBackgroundColor: (e) => {
+        this.editor.view.focus(), this.editor.commands.setBackgroundColor(e);
+      },
+      setTextAlignment: (e) => {
+        this.editor.view.focus(), this.editor.commands.setTextAlignment(e);
+      },
+      increaseBlockIndent: () => {
+        this.editor.view.focus(), this.editor.commands.sinkListItem("blockContainer");
+      },
+      decreaseBlockIndent: () => {
+        this.editor.view.focus(), this.editor.commands.liftListItem("blockContainer");
+      },
       updateBlock: (e) => {
         this.editor.view.focus(), this.editor.commands.BNUpdateBlock(
           this.editor.state.selection.from,
@@ -758,7 +760,7 @@ class qe {
     };
   }
   getDynamicParams() {
-    const e = g(
+    const e = f(
       this.editor.state.doc,
       this.editor.state.selection.from
     );
@@ -768,11 +770,16 @@ class qe {
       underlineIsActive: this.editor.isActive("underline"),
       strikeIsActive: this.editor.isActive("strike"),
       hyperlinkIsActive: this.editor.isActive("link"),
-      activeHyperlinkUrl: this.editor.getAttributes("link").href ? this.editor.getAttributes("link").href : "",
+      activeHyperlinkUrl: this.editor.getAttributes("link").href || "",
       activeHyperlinkText: this.editor.state.doc.textBetween(
         this.editor.state.selection.from,
         this.editor.state.selection.to
       ),
+      textColor: this.editor.getAttributes("textColor").color || "default",
+      backgroundColor: this.editor.getAttributes("backgroundColor").color || "default",
+      textAlignment: this.editor.getAttributes(e.contentType).textAlignment || "left",
+      canIncreaseBlockIndent: this.editor.state.doc.resolve(e.startPos).index(e.depth - 1) > 0,
+      canDecreaseBlockIndent: e.depth > 2,
       block: {
         type: e.contentType.name,
         props: e.contentNode.attrs
@@ -781,10 +788,10 @@ class qe {
     };
   }
 }
-const Ge = (t) => new M({
-  key: new B("FormattingToolbarPlugin"),
-  view: (e) => new qe({ view: e, ...t })
-}), We = P.create({
+const qe = (t) => new B({
+  key: new v("FormattingToolbarPlugin"),
+  view: (e) => new ze({ view: e, ...t })
+}), $e = C.create({
   name: "FormattingToolbarExtension",
   addProseMirrorPlugins() {
     if (!this.options.formattingToolbarFactory)
@@ -792,37 +799,32 @@ const Ge = (t) => new M({
         "UI Element factory not defined for FormattingToolbarExtension"
       );
     return [
-      Ge({
+      qe({
         editor: this.editor,
         formattingToolbarFactory: this.options.formattingToolbarFactory,
-        pluginKey: new B("FormattingToolbarPlugin")
+        pluginKey: new v("FormattingToolbarPlugin")
       })
     ];
   }
-}), Ke = "_bnEditor_xixap_3", Ve = "_bnRoot_xixap_13", Ye = "_dragPreview_xixap_27", U = {
-  bnEditor: Ke,
+}), Ge = "_bnEditor_xixap_3", Ve = "_bnRoot_xixap_13", We = "_dragPreview_xixap_27", U = {
+  bnEditor: Ge,
   bnRoot: Ve,
-  dragPreview: Ye
-}, je = le(
+  dragPreview: We
+}, Ye = re(
   (t) => t.type.name === "blockContainer"
 );
-function Je(t, e) {
-  if (!e.empty)
-    return;
-  const o = e.$anchor.nodeBefore;
-  if (!o || !o.text)
-    return;
-  const n = new RegExp(`${V(t)}([^${V(t)}]*)$`), r = o.text.match(n);
-  if (!!r)
-    return {
-      query: r[1],
-      range: {
-        from: e.$anchor.pos - r[1].length - t.length,
-        to: e.$anchor.pos
-      }
-    };
+function z() {
+  return {
+    active: !1,
+    triggerCharacter: void 0,
+    queryStartPos: void 0,
+    items: [],
+    keyboardHoveredItemIndex: void 0,
+    notFoundCount: 0,
+    decorationId: void 0
+  };
 }
-class Qe {
+class je {
   constructor({
     editor: e,
     pluginKey: o,
@@ -835,29 +837,23 @@ class Qe {
     h(this, "suggestionsMenu");
     h(this, "pluginState");
     h(this, "itemCallback");
-    this.editor = e, this.pluginKey = o, this.pluginState = {
-      active: !1,
-      range: null,
-      query: null,
-      notFoundCount: 0,
-      items: [],
-      selectedItemIndex: 0,
-      type: "slash",
-      decorationId: null
-    }, this.itemCallback = (a) => n({
+    this.editor = e, this.pluginKey = o, this.pluginState = z(), this.itemCallback = (a) => n({
       item: a,
       editor: e,
-      range: this.pluginState.range
+      range: {
+        from: this.pluginState.queryStartPos - this.pluginState.triggerCharacter.length,
+        to: e.state.selection.from
+      }
     }), this.suggestionsMenu = r(this.getStaticParams());
   }
   update(e, o) {
-    const n = this.pluginKey.getState(o), r = this.pluginKey.getState(e.state), a = !n.active && r.active, l = n.active && !r.active, i = n.active && r.active;
-    !a && !i && !l || (this.pluginState = l ? n : r, l && (this.suggestionsMenu.hide(), this.suggestionsMenu.element.removeEventListener(
+    const n = this.pluginKey.getState(o), r = this.pluginKey.getState(e.state), a = !n.active && r.active, d = n.active && !r.active, s = n.active && r.active;
+    !a && !s && !d || (this.pluginState = d ? n : r, d && (this.suggestionsMenu.hide(), this.suggestionsMenu.element.removeEventListener(
       "mousedown",
-      (s) => s.preventDefault()
-    )), i && this.suggestionsMenu.render(this.getDynamicParams(), !1), a && (this.suggestionsMenu.render(this.getDynamicParams(), !0), this.suggestionsMenu.element.addEventListener(
+      (i) => i.preventDefault()
+    )), s && this.suggestionsMenu.render(this.getDynamicParams(), !1), a && (this.suggestionsMenu.render(this.getDynamicParams(), !0), this.suggestionsMenu.element.addEventListener(
       "mousedown",
-      (s) => s.preventDefault()
+      (i) => i.preventDefault()
     )));
   }
   getStaticParams() {
@@ -871,15 +867,15 @@ class Qe {
     );
     return {
       items: this.pluginState.items,
-      selectedItemIndex: this.pluginState.selectedItemIndex,
+      keyboardHoveredItemIndex: this.pluginState.keyboardHoveredItemIndex,
       referenceRect: e.getBoundingClientRect()
     };
   }
 }
-function Xe({
+function Ke({
   pluginKey: t,
   editor: e,
-  char: o,
+  defaultTriggerCharacter: o,
   suggestionsMenuFactory: n,
   onSelectItem: r = () => {
   },
@@ -887,143 +883,129 @@ function Xe({
 }) {
   if (o.length !== 1)
     throw new Error("'char' should be a single character");
-  const l = (i) => {
-    i.dispatch(i.state.tr.setMeta(t, { deactivate: !0 }));
+  const d = (s) => {
+    s.dispatch(s.state.tr.setMeta(t, { deactivate: !0 }));
   };
-  return new M({
+  return new B({
     key: t,
-    view: (i) => new Qe({
+    view: (s) => new je({
       editor: e,
       pluginKey: t,
-      onSelectItem: (s) => {
-        l(i), r(s);
+      onSelectItem: (i) => {
+        d(s), r(i);
       },
       suggestionsMenuFactory: n
     }),
     state: {
       init() {
-        return {
-          active: !1,
-          range: null,
-          query: null,
-          notFoundCount: 0,
-          items: [],
-          selectedItemIndex: 0,
-          type: "slash",
-          decorationId: null
-        };
+        return z();
       },
-      apply(i, s, c, p) {
-        var m, f, y, b;
-        const { selection: u } = i, d = { ...s };
-        if (i.getMeta("numberedListIndexing") !== void 0)
-          return d;
-        if (((m = i.getMeta(t)) == null ? void 0 : m.selectedItemIndexChanged) !== void 0) {
-          let k = i.getMeta(t).selectedItemIndexChanged;
-          return k < 0 && (k = s.items.length - 1), k >= s.items.length && (k = 0), d.selectedItemIndex = k, d;
+      apply(s, i, l, u) {
+        var p, m, k, b;
+        if (s.getMeta("orderedListIndexing") !== void 0)
+          return i;
+        if ((p = s.getMeta(t)) != null && p.activate)
+          return {
+            active: !0,
+            triggerCharacter: ((m = s.getMeta(t)) == null ? void 0 : m.triggerCharacter) || "",
+            queryStartPos: u.selection.from,
+            items: a(""),
+            keyboardHoveredItemIndex: 0,
+            notFoundCount: 0,
+            decorationId: `id_${Math.floor(Math.random() * 4294967295)}`
+          };
+        if (!i.active)
+          return i;
+        const c = { ...i };
+        if (c.items = a(
+          u.doc.textBetween(i.queryStartPos, u.selection.from)
+        ), c.notFoundCount = 0, c.items.length === 0 && (c.notFoundCount = Math.max(
+          0,
+          i.notFoundCount + (u.selection.from - l.selection.from)
+        )), u.selection.from !== u.selection.to || ((k = s.getMeta(t)) == null ? void 0 : k.deactivate) || s.getMeta("focus") || s.getMeta("blur") || s.getMeta("pointer") || i.active && u.selection.from < i.queryStartPos || c.notFoundCount > 3)
+          return z();
+        if (((b = s.getMeta(t)) == null ? void 0 : b.selectedItemIndexChanged) !== void 0) {
+          let g = s.getMeta(t).selectedItemIndexChanged;
+          g < 0 ? g = i.items.length - 1 : g >= i.items.length && (g = 0), c.keyboardHoveredItemIndex = g;
         }
-        if (u.from === u.to && !((f = i.getMeta(t)) != null && f.deactivate) && !i.getMeta("focus") && !i.getMeta("blur") && !i.getMeta("pointer")) {
-          if (s.active && u.from <= s.range.from)
-            d.active = !1;
-          else if ((y = i.getMeta(t)) != null && y.activate) {
-            const k = `id_${Math.floor(
-              Math.random() * 4294967295
-            )}`;
-            d.decorationId = k, d.range = {
-              from: u.from - 1,
-              to: u.to
-            }, d.query = "", d.active = !0, d.type = (b = i.getMeta(t)) == null ? void 0 : b.type, d.selectedItemIndex = 0;
-          } else if (s.active) {
-            const k = Je(
-              s.type === "slash" ? o : "",
-              p.selection
-            );
-            if (!k)
-              throw new Error("active but no match (suggestions)");
-            d.range = k.range, d.active = !0, d.decorationId = s.decorationId, d.query = k.query, d.selectedItemIndex = 0;
-          }
-        } else
-          d.active = !1;
-        return d.active && (d.items = a(d.query), d.items.length ? d.notFoundCount = 0 : d.range.to > s.range.to ? d.notFoundCount = s.notFoundCount + 1 : d.notFoundCount = s.notFoundCount, d.notFoundCount > 3 && (d.active = !1)), d.active || (d.decorationId = null, d.range = null, d.query = null, d.notFoundCount = 0, d.items = []), d;
+        return c;
       }
     },
     props: {
-      handleKeyDown(i, s) {
-        const { active: c } = this.getState(i.state);
-        if (c) {
-          const { items: p, range: u, selectedItemIndex: d } = t.getState(
-            i.state
-          );
-          if (s.key === "ArrowUp")
-            return i.dispatch(
-              i.state.tr.setMeta(t, {
-                selectedItemIndexChanged: d - 1
-              })
-            ), !0;
-          if (s.key === "ArrowDown")
-            return i.dispatch(
-              i.state.tr.setMeta(t, {
-                selectedItemIndexChanged: d + 1
-              })
-            ), !0;
-          if (s.key === "Enter")
-            return l(i), r({
-              item: p[d],
-              editor: e,
-              range: u
-            }), !0;
-          if (s.key === "Escape")
-            return l(i), !0;
-        } else if (s.key === o)
-          return i.dispatch(
-            i.state.tr.insertText(o).scrollIntoView().setMeta(t, { activate: !0, type: "slash" })
+      handleKeyDown(s, i) {
+        const l = this.getState(s.state).active;
+        if (i.key === o && !l)
+          return s.dispatch(
+            s.state.tr.insertText(o).scrollIntoView().setMeta(t, {
+              activate: !0,
+              triggerCharacter: o
+            })
           ), !0;
-        return !1;
+        if (!l)
+          return !1;
+        const {
+          triggerCharacter: u,
+          queryStartPos: c,
+          items: p,
+          keyboardHoveredItemIndex: m
+        } = t.getState(s.state);
+        return i.key === "ArrowUp" ? (s.dispatch(
+          s.state.tr.setMeta(t, {
+            selectedItemIndexChanged: m - 1
+          })
+        ), !0) : i.key === "ArrowDown" ? (s.dispatch(
+          s.state.tr.setMeta(t, {
+            selectedItemIndexChanged: m + 1
+          })
+        ), !0) : i.key === "Enter" ? (d(s), r({
+          item: p[m],
+          editor: e,
+          range: {
+            from: c - u.length,
+            to: s.state.selection.from
+          }
+        }), !0) : i.key === "Escape" ? (d(s), !0) : !1;
       },
-      handleClick(i) {
-        l(i);
+      handleClick(s) {
+        d(s);
       },
-      decorations(i) {
-        const { active: s, range: c, decorationId: p, type: u } = this.getState(
-          i
-        );
-        if (!s)
+      decorations(s) {
+        const { active: i, decorationId: l, queryStartPos: u, triggerCharacter: c } = this.getState(s);
+        if (!i)
           return null;
-        if (u === "drag") {
-          const d = je(i.selection);
-          if (d)
-            return O.create(i.doc, [
-              L.node(
-                d.pos,
-                d.pos + d.node.nodeSize,
+        if (c === "") {
+          const p = Ye(s.selection);
+          if (p)
+            return L.create(s.doc, [
+              N.node(
+                p.pos,
+                p.pos + p.node.nodeSize,
                 {
                   nodeName: "span",
                   class: "suggestion-decorator",
-                  "data-decoration-id": p
+                  "data-decoration-id": l
                 }
               )
             ]);
         }
-        return O.create(i.doc, [
-          L.inline(c.from, c.to, {
-            nodeName: "span",
-            class: "suggestion-decorator",
-            "data-decoration-id": p
-          })
+        return L.create(s.doc, [
+          N.inline(
+            u - c.length,
+            u,
+            {
+              nodeName: "span",
+              class: "suggestion-decorator",
+              "data-decoration-id": l
+            }
+          )
         ]);
       }
     }
   });
 }
-const Ze = () => /Mac/.test(navigator.platform) || /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
-function E(t) {
-  return Ze() ? t.replace("Mod", "\u2318") : t.replace("Mod", "Ctrl");
-}
-var w = /* @__PURE__ */ ((t) => (t.HEADINGS = "Headings", t.BASIC_BLOCKS = "Basic Blocks", t.CODE = "Code Blocks", t.INLINE = "Inline", t.EMBED = "Embed", t.PLUGIN = "Plugin", t))(w || {});
-class x {
-  constructor(e, o, n, r = [], a, l) {
-    h(this, "groupName");
-    this.name = e, this.group = o, this.execute = n, this.aliases = r, this.hint = a, this.shortcut = l, this.groupName = o;
+class I {
+  constructor(e, o, n = []) {
+    this.name = e, this.execute = o, this.aliases = n;
   }
   match(e) {
     return this.name.toLowerCase().startsWith(e.toLowerCase()) || this.aliases.filter(
@@ -1031,84 +1013,66 @@ class x {
     ).length !== 0;
   }
 }
-const et = {
-  heading: new x(
+const Je = {
+  heading: new I(
     "Heading",
-    w.HEADINGS,
     (t, e) => t.chain().focus().deleteRange(e).BNCreateOrUpdateBlock(e.from, {
       type: "heading",
       props: {
         level: "1"
       }
     }).run(),
-    ["h", "heading1", "h1"],
-    "Used for a top-level heading",
-    E("Mod-Alt-1")
+    ["h", "heading1", "h1"]
   ),
-  heading2: new x(
+  heading2: new I(
     "Heading 2",
-    w.HEADINGS,
     (t, e) => t.chain().focus().deleteRange(e).BNCreateOrUpdateBlock(e.from, {
       type: "heading",
       props: {
         level: "2"
       }
     }).run(),
-    ["h2", "heading2", "subheading"],
-    "Used for key sections",
-    E("Mod-Alt-2")
+    ["h2", "heading2", "subheading"]
   ),
-  heading3: new x(
+  heading3: new I(
     "Heading 3",
-    w.HEADINGS,
     (t, e) => t.chain().focus().deleteRange(e).BNCreateOrUpdateBlock(e.from, {
       type: "heading",
       props: {
         level: "3"
       }
     }).run(),
-    ["h3", "heading3", "subheading"],
-    "Used for subsections and group headings",
-    E("Mod-Alt-3")
+    ["h3", "heading3", "subheading"]
   ),
-  numberedList: new x(
+  numberedList: new I(
     "Numbered List",
-    w.BASIC_BLOCKS,
     (t, e) => t.chain().focus().deleteRange(e).BNCreateOrUpdateBlock(e.from, {
       type: "numberedListItem",
       props: {}
     }).run(),
-    ["li", "list", "numberedlist", "numbered list"],
-    "Used to display a numbered list",
-    E("Mod-Shift-7")
+    ["li", "list", "numberedlist", "numbered list"]
   ),
-  bulletList: new x(
+  bulletList: new I(
     "Bullet List",
-    w.BASIC_BLOCKS,
     (t, e) => t.chain().focus().deleteRange(e).BNCreateOrUpdateBlock(e.from, {
       type: "bulletListItem",
       props: {}
     }).run(),
-    ["ul", "list", "bulletlist", "bullet list"],
-    "Used to display an unordered list",
-    E("Mod-Shift-8")
+    ["ul", "list", "bulletlist", "bullet list"]
   ),
-  paragraph: new x(
+  paragraph: new I(
     "Paragraph",
-    w.BASIC_BLOCKS,
     (t, e) => t.chain().focus().deleteRange(e).BNCreateOrUpdateBlock(e.from, {
       type: "paragraph",
       props: {}
     }).run(),
-    ["p"],
-    "Used for the body of your document",
-    E("Mod-Alt-0")
+    ["p"]
   )
-}, q = new B("suggestions-slash-commands"), tt = P.create({
+}, $ = new v("suggestions-slash-commands"), Qe = C.create({
   name: "slash-command",
   addOptions() {
     return {
-      commands: et,
+      commands: Je,
       slashMenuFactory: void 0
     };
   },
@@ -1116,10 +1080,10 @@ const et = {
     if (!this.options.slashMenuFactory)
       throw new Error("UI Element factory not defined for SlashMenuExtension");
     return [
-      Xe({
-        pluginKey: q,
+      Ke({
+        pluginKey: $,
         editor: this.editor,
-        char: "/",
+        defaultTriggerCharacter: "/",
         suggestionsMenuFactory: this.options.slashMenuFactory,
         items: (t) => {
           const e = [];
@@ -1134,24 +1098,24 @@ const et = {
     ];
   }
 });
-class A extends F {
+class P extends _ {
   constructor(o, n) {
     super(o, n);
     h(this, "nodes");
     const r = o.node();
-    this.nodes = [], o.doc.nodesBetween(o.pos, n.pos, (a, l, i) => {
-      if (i !== null && i.eq(r))
+    this.nodes = [], o.doc.nodesBetween(o.pos, n.pos, (a, d, s) => {
+      if (s !== null && s.eq(r))
         return this.nodes.push(a), !1;
     });
   }
   static create(o, n, r = n) {
-    return new A(o.resolve(n), o.resolve(r));
+    return new P(o.resolve(n), o.resolve(r));
   }
   content() {
-    return new z(Z.from(this.nodes), 0, 0);
+    return new E(H.from(this.nodes), 0, 0);
   }
   eq(o) {
-    if (!(o instanceof A) || this.nodes.length !== o.nodes.length || this.from !== o.from || this.to !== o.to)
+    if (!(o instanceof P) || this.nodes.length !== o.nodes.length || this.from !== o.from || this.to !== o.to)
       return !1;
     for (let n = 0; n < this.nodes.length; n++)
       if (!this.nodes[n].eq(o.nodes[n]))
@@ -1160,7 +1124,7 @@ class A extends F {
   }
   map(o, n) {
     let r = n.mapResult(this.from), a = n.mapResult(this.to);
-    return a.deleted ? F.near(o.resolve(r.pos)) : r.deleted ? F.near(o.resolve(a.pos)) : new A(
+    return a.deleted ? _.near(o.resolve(r.pos)) : r.deleted ? _.near(o.resolve(a.pos)) : new P(
       o.resolve(r.pos),
       o.resolve(a.pos)
     );
@@ -1169,32 +1133,9 @@ class A extends F {
     return { type: "node", anchor: this.anchor, head: this.head };
   }
 }
-const ot = Me.__serializeForClipboard;
-let _, I;
-function nt() {
-  if (!_) {
-    const t = document.querySelector(
-      ".ProseMirror > [class*='blockGroup']"
-    );
-    t && (_ = it(t).left);
-  }
-  return _;
-}
-function rt(t) {
-  let e = {
-    left: t.left + document.body.scrollLeft,
-    top: t.top + document.body.scrollTop,
-    width: t.width,
-    height: t.height,
-    bottom: 0,
-    right: 0
-  };
-  return e.bottom = e.top + e.height, e.right = e.left + e.width, e;
-}
-function it(t) {
-  return rt(t.getBoundingClientRect());
-}
-function oe(t, e) {
+const Xe = ve.__serializeForClipboard;
+let T;
+function X(t, e) {
   var r;
   let o = e.posAtCoords(t);
   if (!o)
@@ -1207,8 +1148,8 @@ function oe(t, e) {
       return { node: n, id: n.getAttribute("data-id") };
   }
 }
-function st(t, e) {
-  let o = oe(t, e);
+function Ze(t, e) {
+  let o = X(t, e);
   if (o && o.node.nodeType === 1) {
     const n = e.docView;
     let r = n.nearestDesc(o.node, !0);
@@ -1216,51 +1157,52 @@ function st(t, e) {
   }
   return null;
 }
-function at(t, e) {
+function et(t, e) {
   let o, n;
-  const r = e.resolve(t.from).node().type.spec.group === "blockContent", a = e.resolve(t.to).node().type.spec.group === "blockContent", l = Math.min(t.$anchor.depth, t.$head.depth);
+  const r = e.resolve(t.from).node().type.spec.group === "blockContent", a = e.resolve(t.to).node().type.spec.group === "blockContent", d = Math.min(t.$anchor.depth, t.$head.depth);
   if (r && a) {
-    const i = t.$from.start(l - 1), s = t.$to.end(l - 1);
-    o = e.resolve(i - 1).pos, n = e.resolve(s + 1).pos;
+    const s = t.$from.start(d - 1), i = t.$to.end(d - 1);
+    o = e.resolve(s - 1).pos, n = e.resolve(i + 1).pos;
   } else
     o = t.from, n = t.to;
   return { from: o, to: n };
 }
-function j(t, e, o = e) {
+function Y(t, e, o = e) {
   e === o && (o += t.state.doc.resolve(e + 1).node().nodeSize);
-  const n = t.domAtPos(e).node.cloneNode(!0), r = t.domAtPos(e).node, a = (s, c) => Array.prototype.indexOf.call(s.children, c), l = a(
+  const n = t.domAtPos(e).node.cloneNode(!0), r = t.domAtPos(e).node, a = (i, l) => Array.prototype.indexOf.call(i.children, l), d = a(
     r,
     t.domAtPos(e + 1).node.parentElement
-  ), i = a(
+  ), s = a(
     r,
     t.domAtPos(o - 1).node.parentElement
   );
-  for (let s = r.childElementCount - 1; s >= 0; s--)
-    (s > i || s < l) && n.removeChild(n.children[s]);
-  I = n, I.className = U.dragPreview, document.body.appendChild(I);
+  for (let i = r.childElementCount - 1; i >= 0; i--)
+    (i > s || i < d) && n.removeChild(n.children[i]);
+  T = n, T.className = U.dragPreview, document.body.appendChild(T);
 }
-function lt() {
-  I !== void 0 && (document.body.removeChild(I), I = void 0);
+function tt() {
+  T !== void 0 && (document.body.removeChild(T), T = void 0);
 }
-function dt(t, e) {
+function ot(t, e) {
   if (!t.dataTransfer)
     return;
-  let o = {
-    left: e.dom.clientWidth / 2,
+  const o = e.dom.getBoundingClientRect();
+  let n = {
+    left: o.left + o.width / 2,
     top: t.clientY
-  }, n = st(o, e);
-  if (n != null) {
-    const r = e.state.selection, a = e.state.doc, { from: l, to: i } = at(r, a), s = l <= n && n < i, c = !r.$anchor.node().eq(r.$head.node());
-    s && c ? (e.dispatch(
-      e.state.tr.setSelection(A.create(a, l, i))
-    ), j(e, l, i)) : (e.dispatch(
-      e.state.tr.setSelection(Be.create(e.state.doc, n))
-    ), j(e, n));
-    let p = e.state.selection.content(), { dom: u, text: d } = ot(e, p);
-    t.dataTransfer.clearData(), t.dataTransfer.setData("text/html", u.innerHTML), t.dataTransfer.setData("text/plain", d), t.dataTransfer.effectAllowed = "move", t.dataTransfer.setDragImage(I, 0, 0), e.dragging = { slice: p, move: !0 };
+  }, r = Ze(n, e);
+  if (r != null) {
+    const a = e.state.selection, d = e.state.doc, { from: s, to: i } = et(a, d), l = s <= r && r < i, u = !a.$anchor.node().eq(a.$head.node());
+    l && u ? (e.dispatch(
+      e.state.tr.setSelection(P.create(d, s, i))
+    ), Y(e, s, i)) : (e.dispatch(
+      e.state.tr.setSelection(ye.create(e.state.doc, r))
+    ), Y(e, r));
+    let c = e.state.selection.content(), { dom: p, text: m } = Xe(e, c);
+    t.dataTransfer.clearData(), t.dataTransfer.setData("text/html", p.innerHTML), t.dataTransfer.setData("text/plain", m), t.dataTransfer.effectAllowed = "move", t.dataTransfer.setDragImage(T, 0, 0), e.dragging = { slice: c, move: !0 };
   }
 }
-class ct {
+class nt {
   constructor({
     editor: e,
     blockMenuFactory: o,
@@ -1268,28 +1210,31 @@ class ct {
   }) {
     h(this, "editor");
     h(this, "horizontalPosAnchoredAtRoot");
+    h(this, "horizontalPosAnchor");
     h(this, "blockMenu");
-    h(this, "hoveredBlock");
+    h(this, "hoveredBlockContent");
     h(this, "menuOpen", !1);
     h(this, "menuFrozen", !1);
-    this.editor = e, this.horizontalPosAnchoredAtRoot = n, this.blockMenu = o(this.getStaticParams()), document.body.addEventListener(
+    this.editor = e, this.horizontalPosAnchoredAtRoot = n, this.horizontalPosAnchor = e.view.dom.firstChild.getBoundingClientRect().x, this.blockMenu = o(this.getStaticParams()), document.body.addEventListener(
       "mousemove",
       (r) => {
-        var s, c;
+        var l, u;
         if (this.menuFrozen)
           return;
-        const a = {
-          left: this.editor.view.dom.clientWidth / 2,
+        const a = this.editor.view.dom.firstChild.getBoundingClientRect();
+        this.horizontalPosAnchor = a.x;
+        const d = {
+          left: a.left + a.width / 2,
           top: r.clientY
-        }, l = oe(a, this.editor.view);
-        if (!l) {
+        }, s = X(d, this.editor.view);
+        if (!s) {
           this.menuOpen && (this.menuOpen = !1, this.blockMenu.hide());
           return;
         }
-        if (this.menuOpen && ((s = this.hoveredBlock) == null ? void 0 : s.hasAttribute("data-id")) && ((c = this.hoveredBlock) == null ? void 0 : c.getAttribute("data-id")) === l.id)
+        if (this.menuOpen && ((l = this.hoveredBlockContent) == null ? void 0 : l.hasAttribute("data-id")) && ((u = this.hoveredBlockContent) == null ? void 0 : u.getAttribute("data-id")) === s.id)
           return;
-        const i = l.node.firstChild;
-        this.hoveredBlock = i, i && (this.menuOpen ? this.blockMenu.render(this.getDynamicParams(), !1) : (this.menuOpen = !0, this.blockMenu.render(this.getDynamicParams(), !0)));
+        const i = s.node.firstChild;
+        this.hoveredBlockContent = i, i && (this.menuOpen ? this.blockMenu.render(this.getDynamicParams(), !1) : (this.menuOpen = !0, this.blockMenu.render(this.getDynamicParams(), !0)));
       },
       !0
     ), document.body.addEventListener(
@@ -1312,22 +1257,23 @@ class ct {
   }
   addBlock() {
     this.menuOpen = !1, this.menuFrozen = !0, this.blockMenu.hide();
-    const e = this.hoveredBlock.getBoundingClientRect(), o = this.editor.view.posAtCoords({
-      left: e.left,
-      top: e.top
+    const e = this.hoveredBlockContent.getBoundingClientRect(), o = this.editor.view.posAtCoords({
+      left: e.left + e.width / 2,
+      top: e.top + e.height / 2
     });
     if (!o)
       return;
-    const n = g(this.editor.state.doc, o.pos);
+    const n = f(this.editor.state.doc, o.pos);
     if (n === void 0)
       return;
     const { contentNode: r, endPos: a } = n;
     if (r.textContent.length !== 0) {
-      const l = a + 1, i = l + 2;
-      this.editor.chain().BNCreateBlock(l).BNUpdateBlock(i, { type: "paragraph", props: {} }).setTextSelection(i).run();
-    }
+      const d = a + 1, s = d + 2;
+      this.editor.chain().BNCreateBlock(d).BNUpdateBlock(s, { type: "paragraph", props: {} }).setTextSelection(s).run();
+    } else
+      this.editor.commands.setTextSelection(a);
     this.editor.view.focus(), this.editor.view.dispatch(
-      this.editor.view.state.tr.scrollIntoView().setMeta(q, {
+      this.editor.view.state.tr.scrollIntoView().setMeta($, {
         activate: !0,
         type: "drag"
       })
@@ -1335,31 +1281,51 @@ class ct {
   }
   deleteBlock() {
     this.menuOpen = !1, this.blockMenu.hide();
-    const e = this.hoveredBlock.getBoundingClientRect(), o = this.editor.view.posAtCoords({
-      left: e.left,
-      top: e.top
+    const e = this.hoveredBlockContent.getBoundingClientRect(), o = this.editor.view.posAtCoords({
+      left: e.left + e.width / 2,
+      top: e.top + e.height / 2
     });
     !o || this.editor.commands.BNDeleteBlock(o.pos);
   }
+  setBlockBackgroundColor(e) {
+    this.menuOpen = !1, this.blockMenu.hide();
+    const o = this.hoveredBlockContent.getBoundingClientRect(), n = this.editor.view.posAtCoords({
+      left: o.left + o.width / 2,
+      top: o.top + o.height / 2
+    });
+    !n || this.editor.commands.setBlockBackgroundColor(n.pos, e);
+  }
+  setBlockTextColor(e) {
+    this.menuOpen = !1, this.blockMenu.hide();
+    const o = this.hoveredBlockContent.getBoundingClientRect(), n = this.editor.view.posAtCoords({
+      left: o.left + o.width / 2,
+      top: o.top + o.height / 2
+    });
+    !n || this.editor.commands.setBlockTextColor(n.pos, e);
+  }
   getStaticParams() {
     return {
       addBlock: () => this.addBlock(),
       deleteBlock: () => this.deleteBlock(),
-      blockDragStart: (e) => dt(e, this.editor.view),
-      blockDragEnd: () => lt(),
+      blockDragStart: (e) => ot(e, this.editor.view),
+      blockDragEnd: () => tt(),
       freezeMenu: () => {
         this.menuFrozen = !0;
       },
       unfreezeMenu: () => {
         this.menuFrozen = !1;
-      }
+      },
+      setBlockBackgroundColor: (e) => this.setBlockBackgroundColor(e),
+      setBlockTextColor: (e) => this.setBlockTextColor(e)
     };
   }
   getDynamicParams() {
-    const e = this.hoveredBlock.getBoundingClientRect();
+    const e = this.hoveredBlockContent.getBoundingClientRect();
     return {
+      blockBackgroundColor: this.editor.getAttributes("blockContainer").backgroundColor,
+      blockTextColor: this.editor.getAttributes("blockContainer").textColor,
       referenceRect: new DOMRect(
-        this.horizontalPosAnchoredAtRoot ? nt() : e.x,
+        this.horizontalPosAnchoredAtRoot ? this.horizontalPosAnchor : e.x,
         e.y,
         e.width,
         e.height
@@ -1367,14 +1333,14 @@ class ct {
     };
   }
 }
-const ut = (t) => new M({
-  key: new B("DraggableBlocksPlugin"),
-  view: () => new ct({
+const rt = (t) => new B({
+  key: new v("DraggableBlocksPlugin"),
+  view: () => new nt({
     editor: t.editor,
     blockMenuFactory: t.blockSideMenuFactory,
     horizontalPosAnchoredAtRoot: !0
   })
-}), ht = P.create({
+}), it = C.create({
   name: "DraggableBlocksExtension",
   priority: 1e3,
   addProseMirrorPlugins() {
@@ -1383,14 +1349,14 @@ const ut = (t) => new M({
         "UI Element factory not defined for DraggableBlocksExtension"
       );
     return [
-      ut({
+      rt({
         editor: this.editor,
         blockSideMenuFactory: this.options.blockSideMenuFactory
       })
     ];
   }
-}), pt = new B("HyperlinkToolbarPlugin");
-class mt {
+}), st = new v("HyperlinkToolbarPlugin");
+class at {
   constructor({ editor: e, hyperlinkToolbarFactory: o }) {
     h(this, "editor");
     h(this, "hyperlinkToolbar");
@@ -1409,15 +1375,15 @@ class mt {
       }, 250);
     }, this.stopMenuUpdateTimer = () => (this.menuUpdateTimer && (clearTimeout(this.menuUpdateTimer), this.menuUpdateTimer = void 0), !1), e.view.dom.addEventListener("mouseover", (n) => {
       if (this.mouseHoveredHyperlinkMark = void 0, this.mouseHoveredHyperlinkMarkRange = void 0, this.stopMenuUpdateTimer(), n.target instanceof HTMLAnchorElement && n.target.nodeName === "A") {
-        const r = n.target, a = e.view.posAtDOM(r, 0) + 1, l = e.state.doc.resolve(
+        const r = n.target, a = e.view.posAtDOM(r, 0) + 1, d = e.state.doc.resolve(
           a
-        ), i = l.marks();
-        for (const s of i)
-          if (s.type.name === e.schema.mark("link").type.name) {
-            this.mouseHoveredHyperlinkMark = s, this.mouseHoveredHyperlinkMarkRange = W(
-              l,
-              s.type,
-              s.attrs
+        ), s = d.marks();
+        for (const i of s)
+          if (i.type.name === e.schema.mark("link").type.name) {
+            this.mouseHoveredHyperlinkMark = i, this.mouseHoveredHyperlinkMarkRange = V(
+              d,
+              i.type,
+              i.attrs
             ) || void 0;
             break;
           }
@@ -1431,13 +1397,13 @@ class mt {
       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 l = this.editor.state.selection.$from.marks();
-      for (const i of l)
-        if (i.type.name === this.editor.schema.mark("link").type.name) {
-          this.keyboardHoveredHyperlinkMark = i, this.keyboardHoveredHyperlinkMarkRange = W(
+      const d = this.editor.state.selection.$from.marks();
+      for (const s of d)
+        if (s.type.name === this.editor.schema.mark("link").type.name) {
+          this.keyboardHoveredHyperlinkMark = s, this.keyboardHoveredHyperlinkMarkRange = V(
             this.editor.state.selection.$from,
-            i.type,
-            i.attrs
+            s.type,
+            s.attrs
           ) || void 0;
           break;
         }
@@ -1499,7 +1465,7 @@ class mt {
         this.hyperlinkMarkRange.from,
         this.hyperlinkMarkRange.to
       ),
-      referenceRect: X(
+      referenceRect: j(
         this.editor.view,
         this.hyperlinkMarkRange.from,
         this.hyperlinkMarkRange.to
@@ -1507,13 +1473,13 @@ class mt {
     };
   }
 }
-const ft = (t, e) => new M({
-  key: pt,
-  view: () => new mt({
+const dt = (t, e) => new B({
+  key: st,
+  view: () => new at({
     editor: t,
     hyperlinkToolbarFactory: e.hyperlinkToolbarFactory
   })
-}), kt = ee.extend({
+}), lt = J.extend({
   priority: 500,
   addProseMirrorPlugins() {
     var t;
@@ -1521,12 +1487,12 @@ const ft = (t, e) => new M({
       throw new Error("UI Element factory not defined for HyperlinkMark");
     return [
       ...((t = this.parent) == null ? void 0 : t.call(this)) || [],
-      ft(this.editor, {
+      dt(this.editor, {
         hyperlinkToolbarFactory: this.options.hyperlinkToolbarFactory
       })
     ];
   }
-}), gt = new B("blocknote-placeholder"), yt = P.create({
+}), ct = new v("blocknote-placeholder"), ut = C.create({
   name: "placeholder",
   addOptions() {
     return {
@@ -1542,42 +1508,42 @@ const ft = (t, e) => new M({
   },
   addProseMirrorPlugins() {
     return [
-      new M({
-        key: gt,
+      new B({
+        key: ct,
         props: {
           decorations: (t) => {
-            const { doc: e, selection: o } = t, n = q.getState(t), r = this.editor.isEditable || !this.options.showOnlyWhenEditable, { anchor: a } = o, l = [];
+            const { doc: e, selection: o } = t, n = $.getState(t), r = this.editor.isEditable || !this.options.showOnlyWhenEditable, { anchor: a } = o, d = [];
             if (!!r)
-              return e.descendants((i, s) => {
-                const c = a >= s && a <= s + i.nodeSize, p = !i.isLeaf && !i.childCount;
-                if ((c || !this.options.showOnlyCurrent) && p) {
-                  const u = [this.options.emptyNodeClass];
-                  this.editor.isEmpty && u.push(this.options.emptyEditorClass), c && u.push(this.options.hasAnchorClass), (n == null ? void 0 : n.type) === "drag" && (n == null ? void 0 : n.active) && u.push(this.options.isFilterClass);
-                  const d = L.node(s, s + i.nodeSize, {
-                    class: u.join(" ")
+              return e.descendants((s, i) => {
+                const l = a >= i && a <= i + s.nodeSize, u = !s.isLeaf && !s.childCount;
+                if ((l || !this.options.showOnlyCurrent) && u) {
+                  const c = [this.options.emptyNodeClass];
+                  this.editor.isEmpty && c.push(this.options.emptyEditorClass), l && c.push(this.options.hasAnchorClass), (n == null ? void 0 : n.triggerCharacter) === "" && (n == null ? void 0 : n.active) && c.push(this.options.isFilterClass);
+                  const p = N.node(i, i + s.nodeSize, {
+                    class: c.join(" ")
                   });
-                  l.push(d);
+                  d.push(p);
                 }
                 return this.options.includeChildren;
-              }), O.create(e, l);
+              }), L.create(e, d);
           }
         }
       })
     ];
   }
-}), bt = P.create({
+}), ht = C.create({
   name: "trailingNode",
   addProseMirrorPlugins() {
-    const t = new B(this.name);
+    const t = new v(this.name);
     return [
-      new M({
+      new B({
         key: t,
         appendTransaction: (e, o, n) => {
-          const { doc: r, tr: a, schema: l } = n, i = t.getState(n), s = r.content.size - 2, c = l.nodes.blockContainer, p = l.nodes.paragraph;
-          if (!!i)
+          const { doc: r, tr: a, schema: d } = n, s = t.getState(n), i = r.content.size - 2, l = d.nodes.blockContainer, u = d.nodes.paragraph;
+          if (!!s)
             return a.insert(
-              s,
-              c.create(void 0, p.create())
+              i,
+              l.create(void 0, u.create())
             );
         },
         state: {
@@ -1598,20 +1564,20 @@ const ft = (t, e) => new M({
     ];
   }
 });
-function vt(t, e = JSON.stringify) {
+function pt(t, e = JSON.stringify) {
   const o = {};
   return t.filter((n) => {
     const r = e(n);
     return Object.prototype.hasOwnProperty.call(o, r) ? !1 : o[r] = !0;
   });
 }
-function Bt(t) {
+function mt(t) {
   const e = t.filter(
     (n, r) => t.indexOf(n) !== r
   );
-  return vt(e);
+  return pt(e);
 }
-const Mt = P.create({
+const ft = C.create({
   name: "uniqueID",
   priority: 1e4,
   addOptions() {
@@ -1640,58 +1606,58 @@ const Mt = P.create({
   },
   onCreate() {
     if (this.editor.extensionManager.extensions.find(
-      (s) => s.name === "collaboration"
+      (i) => i.name === "collaboration"
     ))
       return;
-    const { view: t, state: e } = this.editor, { tr: o, doc: n } = e, { types: r, attributeName: a, generateID: l } = this.options;
-    D(n, (s) => r.includes(s.type.name) && s.attrs[a] === null).forEach(({ node: s, pos: c }) => {
-      o.setNodeMarkup(c, void 0, {
-        ...s.attrs,
-        [a]: l()
+    const { view: t, state: e } = this.editor, { tr: o, doc: n } = e, { types: r, attributeName: a, generateID: d } = this.options;
+    D(n, (i) => r.includes(i.type.name) && i.attrs[a] === null).forEach(({ node: i, pos: l }) => {
+      o.setNodeMarkup(l, void 0, {
+        ...i.attrs,
+        [a]: d()
       });
     }), o.setMeta("addToHistory", !1), t.dispatch(o);
   },
   addProseMirrorPlugins() {
     let t = null, e = !1;
     return [
-      new M({
-        key: new B("uniqueID"),
+      new B({
+        key: new v("uniqueID"),
         appendTransaction: (o, n, r) => {
           console.log("appendTransaction");
-          const a = o.some((f) => f.docChanged) && !n.doc.eq(r.doc), l = this.options.filterTransaction && o.some((f) => {
-            var y, b;
-            return !(!((b = (y = this.options).filterTransaction) === null || b === void 0) && b.call(y, f));
+          const a = o.some((k) => k.docChanged) && !n.doc.eq(r.doc), d = this.options.filterTransaction && o.some((k) => {
+            var b, g;
+            return !(!((g = (b = this.options).filterTransaction) === null || g === void 0) && g.call(b, k));
           });
-          if (!a || l)
+          if (!a || d)
             return;
-          const { tr: i } = r, { types: s, attributeName: c, generateID: p } = this.options, u = J(
+          const { tr: s } = r, { types: i, attributeName: l, generateID: u } = this.options, c = ie(
             n.doc,
             o
-          ), { mapping: d } = u;
-          if (Q(u).forEach(({ newRange: f }) => {
-            const y = de(
+          ), { mapping: p } = c;
+          if (se(c).forEach(({ newRange: k }) => {
+            const b = ae(
               r.doc,
-              f,
-              (C) => s.includes(C.type.name)
-            ), b = y.map(({ node: C }) => C.attrs[c]).filter((C) => C !== null), k = Bt(b);
-            y.forEach(({ node: C, pos: H }) => {
+              k,
+              (M) => i.includes(M.type.name)
+            ), g = b.map(({ node: M }) => M.attrs[l]).filter((M) => M !== null), O = mt(g);
+            b.forEach(({ node: M, pos: S }) => {
               var R;
-              const G = (R = i.doc.nodeAt(H)) === null || R === void 0 ? void 0 : R.attrs[c];
+              const G = (R = s.doc.nodeAt(S)) === null || R === void 0 ? void 0 : R.attrs[l];
               if (G === null) {
-                i.setNodeMarkup(H, void 0, {
-                  ...C.attrs,
-                  [c]: p()
+                s.setNodeMarkup(S, void 0, {
+                  ...M.attrs,
+                  [l]: u()
                 });
                 return;
               }
-              const { deleted: ne } = d.invert().mapResult(H);
-              ne && k.includes(G) && i.setNodeMarkup(H, void 0, {
-                ...C.attrs,
-                [c]: p()
+              const { deleted: Z } = p.invert().mapResult(S);
+              Z && O.includes(G) && s.setNodeMarkup(S, void 0, {
+                ...M.attrs,
+                [l]: u()
               });
             });
-          }), !!i.steps.length)
-            return i;
+          }), !!s.steps.length)
+            return s;
         },
         view(o) {
           const n = (r) => {
@@ -1715,29 +1681,29 @@ const Mt = P.create({
           transformPasted: (o) => {
             if (!e)
               return o;
-            const { types: n, attributeName: r } = this.options, a = (l) => {
-              const i = [];
-              return l.forEach((s) => {
-                if (s.isText) {
-                  i.push(s);
+            const { types: n, attributeName: r } = this.options, a = (d) => {
+              const s = [];
+              return d.forEach((i) => {
+                if (i.isText) {
+                  s.push(i);
                   return;
                 }
-                if (!n.includes(s.type.name)) {
-                  i.push(s.copy(a(s.content)));
+                if (!n.includes(i.type.name)) {
+                  s.push(i.copy(a(i.content)));
                   return;
                 }
-                const c = s.type.create(
+                const l = i.type.create(
                   {
-                    ...s.attrs,
+                    ...i.attrs,
                     [r]: null
                   },
-                  a(s.content),
-                  s.marks
+                  a(i.content),
+                  i.marks
                 );
-                i.push(c);
-              }), Z.from(i);
+                s.push(l);
+              }), H.from(s);
             };
-            return e = !1, new z(
+            return e = !1, new E(
               a(o.content),
               o.openStart,
               o.openEnd
@@ -1747,68 +1713,223 @@ const Mt = P.create({
       })
     ];
   }
+}), kt = K.create({
+  name: "backgroundColor",
+  addAttributes() {
+    return {
+      color: {
+        default: void 0,
+        parseHTML: (t) => t.getAttribute("data-background-color"),
+        renderHTML: (t) => ({
+          "data-background-color": t.color
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (t) => typeof t == "string" ? !1 : t.hasAttribute("data-background-color") ? { color: t.getAttribute("data-background-color") } : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["span", t, 0];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (t) => ({ commands: e }) => t !== "default" ? e.setMark(this.name, { color: t }) : e.unsetMark(this.name)
+    };
+  }
+}), gt = K.create({
+  name: "textColor",
+  addAttributes() {
+    return {
+      color: {
+        default: void 0,
+        parseHTML: (t) => t.getAttribute("data-text-color"),
+        renderHTML: (t) => ({
+          "data-text-color": t.color
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (t) => typeof t == "string" ? !1 : t.hasAttribute("data-text-color") ? { color: t.getAttribute("data-text-color") } : !1
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes: t }) {
+    return ["span", t, 0];
+  },
+  addCommands() {
+    return {
+      setTextColor: (t) => ({ commands: e }) => t !== "default" ? e.setMark(this.name, { color: t }) : e.unsetMark(this.name)
+    };
+  }
+}), bt = C.create({
+  name: "blockBackgroundColor",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["blockContainer"],
+        attributes: {
+          backgroundColor: {
+            default: "default",
+            parseHTML: (t) => t.hasAttribute("data-background-color") ? t.getAttribute("data-background-color") : "default",
+            renderHTML: (t) => t.backgroundColor !== "default" && {
+              "data-background-color": t.backgroundColor
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBlockBackgroundColor: (t, e) => ({ state: o, view: n }) => {
+        const r = f(o.doc, t);
+        return r === void 0 ? !1 : (o.tr.setNodeAttribute(
+          r.startPos - 1,
+          "backgroundColor",
+          e
+        ), n.focus(), !0);
+      }
+    };
+  }
+}), yt = C.create({
+  name: "blockTextColor",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["blockContainer"],
+        attributes: {
+          textColor: {
+            default: "default",
+            parseHTML: (t) => t.hasAttribute("data-text-color") ? t.getAttribute("data-text-color") : "default",
+            renderHTML: (t) => t.textColor !== "default" && {
+              "data-text-color": t.textColor
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBlockTextColor: (t, e) => ({ state: o, view: n }) => {
+        const r = f(o.doc, t);
+        return r === void 0 ? !1 : (o.tr.setNodeAttribute(r.startPos - 1, "textColor", e), n.focus(), !0);
+      }
+    };
+  }
+}), vt = C.create({
+  name: "textAlignment",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["paragraph", "heading", "bulletListItem", "numberedListItem"],
+        attributes: {
+          textAlignment: {
+            default: "left",
+            parseHTML: (t) => t.getAttribute("data-text-alignment"),
+            renderHTML: (t) => t.textAlignment !== "left" && {
+              "data-text-alignment": t.textAlignment
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setTextAlignment: (t) => ({ state: e }) => {
+        const o = [], n = f(
+          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" ? (o.push(r - 1), r += e.doc.resolve(r).node().nodeSize - 1) : r += 1;
+        for (const a of o)
+          e.tr.setNodeAttribute(a, "textAlignment", t);
+        return !0;
+      }
+    };
+  }
 }), Ct = (t) => {
   const e = [
-    N.ClipboardTextSerializer,
-    N.Commands,
-    N.Editable,
-    N.FocusEvents,
-    N.Tabindex,
-    me,
-    yt.configure({
-      emptyNodeClass: v.isEmpty,
-      hasAnchorClass: v.hasAnchor,
-      isFilterClass: v.isFilter,
+    A.ClipboardTextSerializer,
+    A.Commands,
+    A.Editable,
+    A.FocusEvents,
+    A.Tabindex,
+    he,
+    ut.configure({
+      emptyNodeClass: y.isEmpty,
+      hasAnchorClass: y.hasAnchor,
+      isFilterClass: y.isFilter,
       includeChildren: !0,
       showOnlyCurrent: !1
     }),
-    Mt.configure({
+    ft.configure({
       types: ["blockContainer"]
     }),
-    fe,
-    be,
-    ue,
-    he,
+    pe,
     ge,
-    ye,
-    ve,
-    ...ze,
-    pe.configure({ width: 5, color: "#ddeeff" }),
+    le,
+    ce,
+    fe,
     ke,
-    bt
+    be,
+    gt,
+    yt,
+    kt,
+    bt,
+    vt,
+    ...Ue,
+    ue.configure({ width: 5, color: "#ddeeff" }),
+    me,
+    ht
   ];
   return t.blockSideMenuFactory && e.push(
-    ht.configure({
+    it.configure({
       blockSideMenuFactory: t.blockSideMenuFactory
     })
   ), t.formattingToolbarFactory && e.push(
-    We.configure({
+    $e.configure({
       formattingToolbarFactory: t.formattingToolbarFactory
     })
   ), t.hyperlinkToolbarFactory ? e.push(
-    kt.configure({
+    lt.configure({
       hyperlinkToolbarFactory: t.hyperlinkToolbarFactory
     })
-  ) : e.push(ee), t.slashMenuFactory && e.push(
-    tt.configure({
+  ) : e.push(J), t.slashMenuFactory && e.push(
+    Qe.configure({
       slashMenuFactory: t.slashMenuFactory
     })
   ), e;
-}, wt = {
+}, Bt = {
   enableInputRules: !0,
   enablePasteRules: !0,
   enableCoreExtensions: !1
 };
-class Gt {
+class zt {
   constructor(e = {}) {
     h(this, "tiptapEditor");
-    var a, l, i;
+    var a, d, s;
     const o = Ct(
       e.uiFactories || {}
     );
-    let n = e.disableHistoryExtension ? o.filter((s) => s.name !== "history") : o;
+    let n = e.disableHistoryExtension ? o.filter((i) => i.name !== "history") : o;
     const r = {
-      ...wt,
+      ...Bt,
       ...e,
       extensions: e.enableBlockNoteExtensions === !1 ? e.extensions : [...e.extensions || [], ...n],
       editorProps: {
@@ -1817,18 +1938,17 @@ class Gt {
           class: [
             U.bnEditor,
             U.bnRoot,
-            ((i = (l = e.editorProps) == null ? void 0 : l.attributes) == null ? void 0 : i.class) || ""
+            ((s = (d = e.editorProps) == null ? void 0 : d.attributes) == null ? void 0 : s.class) || ""
           ].join(" ")
         }
       }
     };
-    this.tiptapEditor = new ce(r);
+    this.tiptapEditor = new de(r);
   }
 }
 export {
-  Gt as BlockNoteEditor,
-  w as SlashMenuGroups,
-  x as SlashMenuItem,
+  zt as BlockNoteEditor,
+  I as SlashMenuItem,
   Ct as getBlockNoteExtensions
 };
 //# sourceMappingURL=blocknote.js.map