@milkdown/crepe 7.12.1 → 7.13.1

package/lib/cjs/index.js

@@ -15,7 +15,6 @@ var utils = require('@milkdown/kit/utils');
 var component = require('@milkdown/kit/component');
 var imageBlock$1 = require('@milkdown/kit/component/image-block');
 var gfm = require('@milkdown/kit/preset/gfm');
-var transform = require('@milkdown/kit/prose/transform');
 var commands = require('@codemirror/commands');
 var view = require('@codemirror/view');
 var codeBlock = require('@milkdown/kit/component/code-block');
@@ -790,7 +789,7 @@ class GroupBuilder {
       const groupInstance = {
         group,
         addItem: (key, item) => {
-          const data = { key, ...item };
+          const data = { ...item, key };
           group.items.push(data);
           return groupInstance;
         },
@@ -824,260 +823,280 @@ class GroupBuilder {
 _groups = new WeakMap();
 _getGroupInstance = new WeakMap();
 
-function clearRange(tr) {
-  const { $from, $to } = tr.selection;
-  const { pos: from } = $from;
-  const { pos: to } = $to;
-  tr = tr.deleteRange(from - $from.node().content.size, to);
-  return tr;
-}
-function setBlockType(tr, nodeType, attrs = null) {
-  const { from, to } = tr.selection;
-  return tr.setBlockType(from, to, nodeType, attrs);
-}
-function wrapInBlockType(tr, nodeType, attrs = null) {
-  const { $from, $to } = tr.selection;
-  const range = $from.blockRange($to);
-  const wrapping = range && transform.findWrapping(range, nodeType, attrs);
-  if (!wrapping) return null;
-  return tr.wrap(range, wrapping);
-}
-function addBlockType(tr, nodeType, attrs = null) {
-  const node = nodeType.createAndFill(attrs);
-  if (!node) return null;
-  return tr.replaceSelectionWith(node);
-}
-function clearContentAndSetBlockType(nodeType, attrs = null) {
-  return (state, dispatch) => {
-    if (dispatch) {
-      const tr = setBlockType(clearRange(state.tr), nodeType, attrs);
-      dispatch(tr.scrollIntoView());
-    }
-    return true;
-  };
-}
-function clearContentAndWrapInBlockType(nodeType, attrs = null) {
-  return (state, dispatch) => {
-    const tr = wrapInBlockType(clearRange(state.tr), nodeType, attrs);
-    if (!tr) return false;
-    if (dispatch) dispatch(tr.scrollIntoView());
-    return true;
-  };
-}
-function clearContentAndAddBlockType(nodeType, attrs = null) {
-  return (state, dispatch) => {
-    const tr = addBlockType(clearRange(state.tr), nodeType, attrs);
-    if (!tr) return false;
-    if (dispatch) dispatch(tr.scrollIntoView());
-    return true;
-  };
-}
-
-function getGroups(filter, config, ctx) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
+function getGroups$1(filter, config, ctx) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb;
   const flags = ctx && useCrepeFeatures(ctx).get();
   const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
   const isImageBlockEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.ImageBlock);
   const isTableEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Table);
   const groupBuilder = new GroupBuilder();
-  groupBuilder.addGroup("text", (_a = config == null ? void 0 : config.slashMenuTextGroupLabel) != null ? _a : "Text").addItem("text", {
-    label: (_b = config == null ? void 0 : config.slashMenuTextLabel) != null ? _b : "Text",
-    icon: (_c = config == null ? void 0 : config.slashMenuTextIcon) != null ? _c : textIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.paragraphSchema.type(ctx2));
-      command(state, dispatch);
+  if ((config == null ? void 0 : config.textGroup) !== null) {
+    const textGroup = groupBuilder.addGroup(
+      "text",
+      (_b = (_a = config == null ? void 0 : config.textGroup) == null ? void 0 : _a.label) != null ? _b : "Text"
+    );
+    if (((_c = config == null ? void 0 : config.textGroup) == null ? void 0 : _c.text) !== null) {
+      textGroup.addItem("text", {
+        label: (_f = (_e = (_d = config == null ? void 0 : config.textGroup) == null ? void 0 : _d.text) == null ? void 0 : _e.label) != null ? _f : "Text",
+        icon: (_i = (_h = (_g = config == null ? void 0 : config.textGroup) == null ? void 0 : _g.text) == null ? void 0 : _h.icon) != null ? _i : textIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const paragraph = commonmark.paragraphSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: paragraph
+          });
+        }
+      });
     }
-  }).addItem("h1", {
-    label: (_d = config == null ? void 0 : config.slashMenuH1Label) != null ? _d : "Heading 1",
-    icon: (_e = config == null ? void 0 : config.slashMenuH1Icon) != null ? _e : h1Icon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.headingSchema.type(ctx2), {
-        level: 1
+    if (((_j = config == null ? void 0 : config.textGroup) == null ? void 0 : _j.h1) !== null) {
+      textGroup.addItem("h1", {
+        label: (_m = (_l = (_k = config == null ? void 0 : config.textGroup) == null ? void 0 : _k.h1) == null ? void 0 : _l.label) != null ? _m : "Heading 1",
+        icon: (_p = (_o = (_n = config == null ? void 0 : config.textGroup) == null ? void 0 : _n.h1) == null ? void 0 : _o.icon) != null ? _p : h1Icon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const heading = commonmark.headingSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: heading,
+            attrs: {
+              level: 1
+            }
+          });
+        }
       });
-      command(state, dispatch);
     }
-  }).addItem("h2", {
-    label: (_f = config == null ? void 0 : config.slashMenuH2Label) != null ? _f : "Heading 2",
-    icon: (_g = config == null ? void 0 : config.slashMenuH2Icon) != null ? _g : h2Icon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.headingSchema.type(ctx2), {
-        level: 2
+    if (((_q = config == null ? void 0 : config.textGroup) == null ? void 0 : _q.h2) !== null) {
+      textGroup.addItem("h2", {
+        label: (_t = (_s = (_r = config == null ? void 0 : config.textGroup) == null ? void 0 : _r.h2) == null ? void 0 : _s.label) != null ? _t : "Heading 2",
+        icon: (_w = (_v = (_u = config == null ? void 0 : config.textGroup) == null ? void 0 : _u.h2) == null ? void 0 : _v.icon) != null ? _w : h2Icon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const heading = commonmark.headingSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: heading,
+            attrs: {
+              level: 2
+            }
+          });
+        }
       });
-      command(state, dispatch);
     }
-  }).addItem("h3", {
-    label: (_h = config == null ? void 0 : config.slashMenuH3Label) != null ? _h : "Heading 3",
-    icon: (_i = config == null ? void 0 : config.slashMenuH3Icon) != null ? _i : h3Icon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.headingSchema.type(ctx2), {
-        level: 3
+    if (((_x = config == null ? void 0 : config.textGroup) == null ? void 0 : _x.h3) !== null) {
+      textGroup.addItem("h3", {
+        label: (_A = (_z = (_y = config == null ? void 0 : config.textGroup) == null ? void 0 : _y.h3) == null ? void 0 : _z.label) != null ? _A : "Heading 3",
+        icon: (_D = (_C = (_B = config == null ? void 0 : config.textGroup) == null ? void 0 : _B.h3) == null ? void 0 : _C.icon) != null ? _D : h3Icon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const heading = commonmark.headingSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: heading,
+            attrs: {
+              level: 3
+            }
+          });
+        }
       });
-      command(state, dispatch);
     }
-  }).addItem("h4", {
-    label: (_j = config == null ? void 0 : config.slashMenuH4Label) != null ? _j : "Heading 4",
-    icon: (_k = config == null ? void 0 : config.slashMenuH4Icon) != null ? _k : h4Icon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.headingSchema.type(ctx2), {
-        level: 4
+    if (((_E = config == null ? void 0 : config.textGroup) == null ? void 0 : _E.h4) !== null) {
+      textGroup.addItem("h4", {
+        label: (_H = (_G = (_F = config == null ? void 0 : config.textGroup) == null ? void 0 : _F.h4) == null ? void 0 : _G.label) != null ? _H : "Heading 4",
+        icon: (_K = (_J = (_I = config == null ? void 0 : config.textGroup) == null ? void 0 : _I.h4) == null ? void 0 : _J.icon) != null ? _K : h4Icon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const heading = commonmark.headingSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: heading,
+            attrs: {
+              level: 4
+            }
+          });
+        }
       });
-      command(state, dispatch);
     }
-  }).addItem("h5", {
-    label: (_l = config == null ? void 0 : config.slashMenuH5Label) != null ? _l : "Heading 5",
-    icon: (_m = config == null ? void 0 : config.slashMenuH5Icon) != null ? _m : h5Icon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.headingSchema.type(ctx2), {
-        level: 5
+    if (((_L = config == null ? void 0 : config.textGroup) == null ? void 0 : _L.h5) !== null) {
+      textGroup.addItem("h5", {
+        label: (_O = (_N = (_M = config == null ? void 0 : config.textGroup) == null ? void 0 : _M.h5) == null ? void 0 : _N.label) != null ? _O : "Heading 5",
+        icon: (_R = (_Q = (_P = config == null ? void 0 : config.textGroup) == null ? void 0 : _P.h5) == null ? void 0 : _Q.icon) != null ? _R : h5Icon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const heading = commonmark.headingSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: heading,
+            attrs: {
+              level: 5
+            }
+          });
+        }
       });
-      command(state, dispatch);
     }
-  }).addItem("h6", {
-    label: (_n = config == null ? void 0 : config.slashMenuH6Label) != null ? _n : "Heading 6",
-    icon: (_o = config == null ? void 0 : config.slashMenuH6Icon) != null ? _o : h6Icon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndSetBlockType(commonmark.headingSchema.type(ctx2), {
-        level: 6
+    if (((_S = config == null ? void 0 : config.textGroup) == null ? void 0 : _S.h6) !== null) {
+      textGroup.addItem("h6", {
+        label: (_V = (_U = (_T = config == null ? void 0 : config.textGroup) == null ? void 0 : _T.h6) == null ? void 0 : _U.label) != null ? _V : "Heading 6",
+        icon: (_Y = (_X = (_W = config == null ? void 0 : config.textGroup) == null ? void 0 : _W.h6) == null ? void 0 : _X.icon) != null ? _Y : h6Icon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const heading = commonmark.headingSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: heading,
+            attrs: {
+              level: 6
+            }
+          });
+        }
       });
-      command(state, dispatch);
     }
-  }).addItem("quote", {
-    label: (_p = config == null ? void 0 : config.slashMenuQuoteLabel) != null ? _p : "Quote",
-    icon: (_q = config == null ? void 0 : config.slashMenuQuoteIcon) != null ? _q : quoteIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndWrapInBlockType(
-        commonmark.blockquoteSchema.type(ctx2)
-      );
-      command(state, dispatch);
+    if (((_Z = config == null ? void 0 : config.textGroup) == null ? void 0 : _Z.quote) !== null) {
+      textGroup.addItem("quote", {
+        label: (_aa = (_$ = (__ = config == null ? void 0 : config.textGroup) == null ? void 0 : __.quote) == null ? void 0 : _$.label) != null ? _aa : "Quote",
+        icon: (_da = (_ca = (_ba = config == null ? void 0 : config.textGroup) == null ? void 0 : _ba.quote) == null ? void 0 : _ca.icon) != null ? _da : quoteIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const blockquote = commonmark.blockquoteSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.wrapInBlockTypeCommand.key, {
+            nodeType: blockquote
+          });
+        }
+      });
     }
-  }).addItem("divider", {
-    label: (_r = config == null ? void 0 : config.slashMenuDividerLabel) != null ? _r : "Divider",
-    icon: (_s = config == null ? void 0 : config.slashMenuDividerIcon) != null ? _s : dividerIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndAddBlockType(commonmark.hrSchema.type(ctx2));
-      command(state, dispatch);
+    if (((_ea = config == null ? void 0 : config.textGroup) == null ? void 0 : _ea.divider) !== null) {
+      textGroup.addItem("divider", {
+        label: (_ha = (_ga = (_fa = config == null ? void 0 : config.textGroup) == null ? void 0 : _fa.divider) == null ? void 0 : _ga.label) != null ? _ha : "Divider",
+        icon: (_ka = (_ja = (_ia = config == null ? void 0 : config.textGroup) == null ? void 0 : _ia.divider) == null ? void 0 : _ja.icon) != null ? _ka : dividerIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const hr = commonmark.hrSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.addBlockTypeCommand.key, {
+            nodeType: hr
+          });
+        }
+      });
     }
-  });
-  groupBuilder.addGroup("list", (_t = config == null ? void 0 : config.slashMenuListGroupLabel) != null ? _t : "List").addItem("bullet-list", {
-    label: (_u = config == null ? void 0 : config.slashMenuBulletListLabel) != null ? _u : "Bullet List",
-    icon: (_v = config == null ? void 0 : config.slashMenuBulletListIcon) != null ? _v : bulletListIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndWrapInBlockType(
-        commonmark.bulletListSchema.type(ctx2)
-      );
-      command(state, dispatch);
+  }
+  if ((config == null ? void 0 : config.listGroup) !== null) {
+    const listGroup = groupBuilder.addGroup(
+      "list",
+      (_ma = (_la = config == null ? void 0 : config.listGroup) == null ? void 0 : _la.label) != null ? _ma : "List"
+    );
+    if (((_na = config == null ? void 0 : config.listGroup) == null ? void 0 : _na.bulletList) !== null) {
+      listGroup.addItem("bullet-list", {
+        label: (_qa = (_pa = (_oa = config == null ? void 0 : config.listGroup) == null ? void 0 : _oa.bulletList) == null ? void 0 : _pa.label) != null ? _qa : "Bullet List",
+        icon: (_ta = (_sa = (_ra = config == null ? void 0 : config.listGroup) == null ? void 0 : _ra.bulletList) == null ? void 0 : _sa.icon) != null ? _ta : bulletListIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const bulletList = commonmark.bulletListSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.wrapInBlockTypeCommand.key, {
+            nodeType: bulletList
+          });
+        }
+      });
     }
-  }).addItem("ordered-list", {
-    label: (_w = config == null ? void 0 : config.slashMenuOrderedListLabel) != null ? _w : "Ordered List",
-    icon: (_x = config == null ? void 0 : config.slashMenuOrderedListIcon) != null ? _x : orderedListIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndWrapInBlockType(
-        commonmark.orderedListSchema.type(ctx2)
-      );
-      command(state, dispatch);
+    if (((_ua = config == null ? void 0 : config.listGroup) == null ? void 0 : _ua.orderedList) !== null) {
+      listGroup.addItem("ordered-list", {
+        label: (_xa = (_wa = (_va = config == null ? void 0 : config.listGroup) == null ? void 0 : _va.orderedList) == null ? void 0 : _wa.label) != null ? _xa : "Ordered List",
+        icon: (_Aa = (_za = (_ya = config == null ? void 0 : config.listGroup) == null ? void 0 : _ya.orderedList) == null ? void 0 : _za.icon) != null ? _Aa : orderedListIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const orderedList = commonmark.orderedListSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.wrapInBlockTypeCommand.key, {
+            nodeType: orderedList
+          });
+        }
+      });
     }
-  }).addItem("todo-list", {
-    label: (_y = config == null ? void 0 : config.slashMenuTaskListLabel) != null ? _y : "Todo List",
-    icon: (_z = config == null ? void 0 : config.slashMenuTaskListIcon) != null ? _z : todoListIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndWrapInBlockType(
-        commonmark.listItemSchema.type(ctx2),
-        { checked: false }
-      );
-      command(state, dispatch);
+    if (((_Ba = config == null ? void 0 : config.listGroup) == null ? void 0 : _Ba.taskList) !== null) {
+      listGroup.addItem("task-list", {
+        label: (_Ea = (_Da = (_Ca = config == null ? void 0 : config.listGroup) == null ? void 0 : _Ca.taskList) == null ? void 0 : _Da.label) != null ? _Ea : "Task List",
+        icon: (_Ha = (_Ga = (_Fa = config == null ? void 0 : config.listGroup) == null ? void 0 : _Fa.taskList) == null ? void 0 : _Ga.icon) != null ? _Ha : todoListIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const listItem = commonmark.listItemSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.wrapInBlockTypeCommand.key, {
+            nodeType: listItem,
+            attrs: { checked: false }
+          });
+        }
+      });
     }
-  });
-  const advancedGroup = groupBuilder.addGroup(
-    "advanced",
-    (_A = config == null ? void 0 : config.slashMenuAdvancedGroupLabel) != null ? _A : "Advanced"
-  );
-  if (isImageBlockEnabled) {
-    advancedGroup.addItem("image", {
-      label: (_B = config == null ? void 0 : config.slashMenuImageLabel) != null ? _B : "Image",
-      icon: (_C = config == null ? void 0 : config.slashMenuImageIcon) != null ? _C : imageIcon,
-      onRun: (ctx2) => {
-        const view = ctx2.get(core.editorViewCtx);
-        const { dispatch, state } = view;
-        const command = clearContentAndAddBlockType(imageBlock$1.imageBlockSchema.type(ctx2));
-        command(state, dispatch);
-      }
-    });
   }
-  advancedGroup.addItem("code", {
-    label: (_D = config == null ? void 0 : config.slashMenuCodeBlockLabel) != null ? _D : "Code",
-    icon: (_E = config == null ? void 0 : config.slashMenuCodeBlockIcon) != null ? _E : codeIcon,
-    onRun: (ctx2) => {
-      const view = ctx2.get(core.editorViewCtx);
-      const { dispatch, state } = view;
-      const command = clearContentAndAddBlockType(commonmark.codeBlockSchema.type(ctx2));
-      command(state, dispatch);
+  if ((config == null ? void 0 : config.advancedGroup) !== null) {
+    const advancedGroup = groupBuilder.addGroup(
+      "advanced",
+      (_Ja = (_Ia = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Ia.label) != null ? _Ja : "Advanced"
+    );
+    if (((_Ka = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Ka.image) !== null && isImageBlockEnabled) {
+      advancedGroup.addItem("image", {
+        label: (_Na = (_Ma = (_La = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _La.image) == null ? void 0 : _Ma.label) != null ? _Na : "Image",
+        icon: (_Qa = (_Pa = (_Oa = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Oa.image) == null ? void 0 : _Pa.icon) != null ? _Qa : imageIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const imageBlock = imageBlock$1.imageBlockSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.addBlockTypeCommand.key, {
+            nodeType: imageBlock
+          });
+        }
+      });
+    }
+    if (((_Ra = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Ra.codeBlock) !== null) {
+      advancedGroup.addItem("code", {
+        label: (_Ua = (_Ta = (_Sa = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Sa.codeBlock) == null ? void 0 : _Ta.label) != null ? _Ua : "Code",
+        icon: (_Xa = (_Wa = (_Va = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Va.codeBlock) == null ? void 0 : _Wa.icon) != null ? _Xa : codeIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const codeBlock = commonmark.codeBlockSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.setBlockTypeCommand.key, {
+            nodeType: codeBlock
+          });
+        }
+      });
+    }
+    if (((_Ya = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Ya.table) !== null && isTableEnabled) {
+      advancedGroup.addItem("table", {
+        label: (_$a = (__a = (_Za = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _Za.table) == null ? void 0 : __a.label) != null ? _$a : "Table",
+        icon: (_cb = (_bb = (_ab = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _ab.table) == null ? void 0 : _bb.icon) != null ? _cb : tableIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const view = ctx2.get(core.editorViewCtx);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          const { from } = view.state.selection;
+          commands.call(commonmark.addBlockTypeCommand.key, {
+            nodeType: gfm.createTable(ctx2, 3, 3)
+          });
+          commands.call(commonmark.selectTextNearPosCommand.key, {
+            pos: from
+          });
+        }
+      });
+    }
+    if (((_db = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _db.math) !== null && isLatexEnabled) {
+      advancedGroup.addItem("math", {
+        label: (_gb = (_fb = (_eb = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _eb.math) == null ? void 0 : _fb.label) != null ? _gb : "Math",
+        icon: (_jb = (_ib = (_hb = config == null ? void 0 : config.advancedGroup) == null ? void 0 : _hb.math) == null ? void 0 : _ib.icon) != null ? _jb : functionsIcon,
+        onRun: (ctx2) => {
+          const commands = ctx2.get(core.commandsCtx);
+          const codeBlock = commonmark.codeBlockSchema.type(ctx2);
+          commands.call(commonmark.clearTextInCurrentBlockCommand.key);
+          commands.call(commonmark.addBlockTypeCommand.key, {
+            nodeType: codeBlock,
+            attrs: { language: "LaTex" }
+          });
+        }
+      });
     }
-  });
-  if (isTableEnabled) {
-    advancedGroup.addItem("table", {
-      label: (_F = config == null ? void 0 : config.slashMenuTableLabel) != null ? _F : "Table",
-      icon: (_G = config == null ? void 0 : config.slashMenuTableIcon) != null ? _G : tableIcon,
-      onRun: (ctx2) => {
-        const view = ctx2.get(core.editorViewCtx);
-        const { dispatch, state: state$1 } = view;
-        let { tr } = state$1;
-        tr = clearRange(tr);
-        const from = tr.selection.from;
-        const table = gfm.createTable(ctx2, 3, 3);
-        tr = tr.replaceSelectionWith(table);
-        dispatch(tr);
-        requestAnimationFrame(() => {
-          const docSize = view.state.doc.content.size;
-          const $pos = view.state.doc.resolve(
-            from > docSize ? docSize : from < 0 ? 0 : from
-          );
-          const selection = state.TextSelection.near($pos);
-          const tr2 = view.state.tr;
-          tr2.setSelection(selection);
-          dispatch(tr2.scrollIntoView());
-        });
-      }
-    });
-  }
-  if (isLatexEnabled) {
-    advancedGroup.addItem("math", {
-      label: (_H = config == null ? void 0 : config.slashMenuMathLabel) != null ? _H : "Math",
-      icon: (_I = config == null ? void 0 : config.slashMenuMathIcon) != null ? _I : functionsIcon,
-      onRun: (ctx2) => {
-        const view = ctx2.get(core.editorViewCtx);
-        const { dispatch, state } = view;
-        const command = clearContentAndAddBlockType(commonmark.codeBlockSchema.type(ctx2), {
-          language: "LaTex"
-        });
-        command(state, dispatch);
-      }
-    });
   }
-  (_J = config == null ? void 0 : config.buildMenu) == null ? void 0 : _J.call(config, groupBuilder);
+  (_kb = config == null ? void 0 : config.buildMenu) == null ? void 0 : _kb.call(config, groupBuilder);
   let groups = groupBuilder.build();
   if (filter) {
     groups = groups.map((group) => {
@@ -1132,7 +1151,7 @@ const Menu = vue.defineComponent({
   },
   setup({ ctx, show, filter, hide, config }) {
     const host = vue.ref();
-    const groupInfo = vue.computed(() => getGroups(filter.value, config, ctx));
+    const groupInfo = vue.computed(() => getGroups$1(filter.value, config, ctx));
     const hoverIndex = vue.ref(0);
     const prevMousePosition = vue.ref({ x: -999, y: -999 });
     const onPointerMove = (e) => {
@@ -1676,6 +1695,44 @@ const mathInlineSchema = utils.$nodeSchema(mathInlineId, () => ({
   }
 }));
 
+const toggleLatexCommand = utils.$command("ToggleLatex", (ctx) => {
+  return () => (state$1, dispatch) => {
+    const {
+      hasNode: hasLatex,
+      pos: latexPos,
+      target: latexNode
+    } = prose.findNodeInSelection(state$1, mathInlineSchema.type(ctx));
+    const { selection, doc, tr } = state$1;
+    if (!hasLatex) {
+      const text = doc.textBetween(selection.from, selection.to);
+      let _tr2 = tr.replaceSelectionWith(
+        mathInlineSchema.type(ctx).create({
+          value: text
+        })
+      );
+      if (dispatch) {
+        dispatch(
+          _tr2.setSelection(state.NodeSelection.create(_tr2.doc, selection.from))
+        );
+      }
+      return true;
+    }
+    const { from, to } = selection;
+    if (!latexNode || latexPos < 0) return false;
+    let _tr = tr.delete(latexPos, latexPos + 1);
+    const content = latexNode.attrs.value;
+    _tr = _tr.insertText(content, latexPos);
+    if (dispatch) {
+      dispatch(
+        _tr.setSelection(
+          state.TextSelection.create(_tr.doc, from, to + content.length - 1)
+        )
+      );
+    }
+    return true;
+  };
+});
+
 const inlineLatexTooltip = tooltip.tooltipFactory("INLINE_LATEX");
 
 const LatexTooltip = vue.defineComponent({
@@ -1903,7 +1960,7 @@ const latex = (editor, config) => {
         });
       }
     });
-  }).use(remarkMathPlugin).use(remarkMathBlockPlugin).use(mathInlineSchema).use(inlineLatexTooltip).use(mathInlineInputRule).use(mathBlockInputRule).use(blockLatexSchema);
+  }).use(remarkMathPlugin).use(remarkMathBlockPlugin).use(mathInlineSchema).use(inlineLatexTooltip).use(mathInlineInputRule).use(mathBlockInputRule).use(blockLatexSchema).use(toggleLatexCommand);
 };
 function renderLatex(content, options) {
   const html = katex.renderToString(content, {
@@ -2036,6 +2093,94 @@ const table = (editor, config) => {
   }).use(tableBlock.tableBlock);
 };
 
+function getGroups(config, ctx) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const groupBuilder = new GroupBuilder();
+  groupBuilder.addGroup("formatting", "Formatting").addItem("bold", {
+    icon: (_a = config == null ? void 0 : config.boldIcon) != null ? _a : boldIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(commonmark.isMarkSelectedCommand.key, commonmark.strongSchema.type(ctx2));
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleStrongCommand.key);
+    }
+  }).addItem("italic", {
+    icon: (_b = config == null ? void 0 : config.italicIcon) != null ? _b : italicIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(
+        commonmark.isMarkSelectedCommand.key,
+        commonmark.emphasisSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleEmphasisCommand.key);
+    }
+  }).addItem("strikethrough", {
+    icon: (_c = config == null ? void 0 : config.strikethroughIcon) != null ? _c : strikethroughIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(
+        commonmark.isMarkSelectedCommand.key,
+        gfm.strikethroughSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(gfm.toggleStrikethroughCommand.key);
+    }
+  });
+  const functionGroup = groupBuilder.addGroup("function", "Function");
+  functionGroup.addItem("code", {
+    icon: (_d = config == null ? void 0 : config.codeIcon) != null ? _d : codeIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(
+        commonmark.isMarkSelectedCommand.key,
+        commonmark.inlineCodeSchema.type(ctx2)
+      );
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(commonmark.toggleInlineCodeCommand.key);
+    }
+  });
+  const flags = ctx && useCrepeFeatures(ctx).get();
+  const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
+  if (isLatexEnabled) {
+    functionGroup.addItem("latex", {
+      icon: (_e = config == null ? void 0 : config.latexIcon) != null ? _e : functionsIcon,
+      active: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        return commands.call(
+          commonmark.isNodeSelectedCommand.key,
+          mathInlineSchema.type(ctx2)
+        );
+      },
+      onRun: (ctx2) => {
+        const commands = ctx2.get(core.commandsCtx);
+        commands.call(toggleLatexCommand.key);
+      }
+    });
+  }
+  functionGroup.addItem("link", {
+    icon: (_f = config == null ? void 0 : config.linkIcon) != null ? _f : linkIcon,
+    active: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      return commands.call(commonmark.isMarkSelectedCommand.key, commonmark.linkSchema.type(ctx2));
+    },
+    onRun: (ctx2) => {
+      const commands = ctx2.get(core.commandsCtx);
+      commands.call(linkTooltip$1.toggleLinkCommand.key);
+    }
+  });
+  (_g = config == null ? void 0 : config.buildToolbar) == null ? void 0 : _g.call(config, groupBuilder);
+  return groupBuilder.build();
+}
+
 const Toolbar = vue.defineComponent({
   props: {
     ctx: {
@@ -2060,169 +2205,42 @@ const Toolbar = vue.defineComponent({
     }
   },
   setup(props) {
-    const { ctx, hide, config } = props;
+    const { ctx, config } = props;
     const onClick = (fn) => (e) => {
       e.preventDefault();
       ctx && fn(ctx);
     };
-    const isActive = (mark) => {
-      const selection = props.selection.value;
-      if (!ctx || !selection) return false;
-      const { state } = ctx.get(core.editorViewCtx);
-      if (!state) return false;
-      const { doc } = state;
-      return doc.rangeHasMark(selection.from, selection.to, mark);
-    };
-    const containsNode = (node) => {
-      const selection = props.selection.value;
-      if (!ctx || !selection) return false;
-      const { state: state$1 } = ctx.get(core.editorViewCtx);
-      if (!state$1) return false;
-      const { doc } = state$1;
-      if (selection instanceof state.NodeSelection) {
-        return selection.node.type === node;
-      }
-      const { from, to } = selection;
-      let hasNode = false;
-      doc.nodesBetween(from, to, (n) => {
-        if (n.type === node) {
-          hasNode = true;
-          return false;
-        }
-        return true;
-      });
-      return hasNode;
-    };
-    const flags = useCrepeFeatures(ctx).get();
-    const isLatexEnabled = flags == null ? void 0 : flags.includes(CrepeFeature.Latex);
-    const toggleLatex = (ctx2) => {
-      const hasLatex = containsNode(mathInlineSchema.type(ctx2));
-      const view = ctx2.get(core.editorViewCtx);
-      const { selection, doc, tr } = view.state;
-      if (!hasLatex) {
-        const text = doc.textBetween(selection.from, selection.to);
-        let _tr2 = tr.replaceSelectionWith(
-          mathInlineSchema.type(ctx2).create({
-            value: text
-          })
-        );
-        view.dispatch(
-          _tr2.setSelection(state.NodeSelection.create(_tr2.doc, selection.from))
-        );
-        return;
-      }
-      const { from, to } = selection;
-      let pos = -1;
-      let node = null;
-      doc.nodesBetween(from, to, (n, p) => {
-        if (node) return false;
-        if (n.type === mathInlineSchema.type(ctx2)) {
-          pos = p;
-          node = n;
-          return false;
-        }
-        return true;
-      });
-      if (!node || pos < 0) return;
-      let _tr = tr.delete(pos, pos + 1);
-      const content = node.attrs.value;
-      _tr = _tr.insertText(content, pos);
-      view.dispatch(
-        _tr.setSelection(
-          state.TextSelection.create(_tr.doc, from, to + content.length - 1)
-        )
-      );
-    };
+    function checkActive(checker) {
+      props.selection.value;
+      const status = ctx.get(core.editorCtx).status;
+      if (status !== core.EditorStatus.Created) return false;
+      return checker(ctx);
+    }
+    const groupInfo = vue.computed(() => getGroups(config, ctx));
     return () => {
-      var _a, _b, _c, _d, _e, _f;
-      return /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: clsx(
-            "toolbar-item",
-            ctx && isActive(commonmark.strongSchema.type(ctx)) && "active"
-          ),
-          onPointerdown: onClick((ctx2) => {
-            const commands = ctx2.get(core.commandsCtx);
-            commands.call(commonmark.toggleStrongCommand.key);
-          })
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: (_a = config == null ? void 0 : config.boldIcon) != null ? _a : boldIcon })
-      ), /* @__PURE__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: clsx(
-            "toolbar-item",
-            ctx && isActive(commonmark.emphasisSchema.type(ctx)) && "active"
-          ),
-          onPointerdown: onClick((ctx2) => {
-            const commands = ctx2.get(core.commandsCtx);
-            commands.call(commonmark.toggleEmphasisCommand.key);
-          })
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: (_b = config == null ? void 0 : config.italicIcon) != null ? _b : italicIcon })
-      ), /* @__PURE__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: clsx(
-            "toolbar-item",
-            ctx && isActive(gfm.strikethroughSchema.type(ctx)) && "active"
-          ),
-          onPointerdown: onClick((ctx2) => {
-            const commands = ctx2.get(core.commandsCtx);
-            commands.call(gfm.toggleStrikethroughCommand.key);
-          })
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: (_c = config == null ? void 0 : config.strikethroughIcon) != null ? _c : strikethroughIcon })
-      ), /* @__PURE__ */ vue.h("div", { class: "divider" }), /* @__PURE__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: clsx(
-            "toolbar-item",
-            ctx && isActive(commonmark.inlineCodeSchema.type(ctx)) && "active"
-          ),
-          onPointerdown: onClick((ctx2) => {
-            const commands = ctx2.get(core.commandsCtx);
-            commands.call(commonmark.toggleInlineCodeCommand.key);
-          })
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: (_d = config == null ? void 0 : config.codeIcon) != null ? _d : codeIcon })
-      ), isLatexEnabled && /* @__PURE__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: clsx(
-            "toolbar-item",
-            ctx && containsNode(mathInlineSchema.type(ctx)) && "active"
-          ),
-          onPointerdown: onClick(toggleLatex)
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: (_e = config == null ? void 0 : config.latexIcon) != null ? _e : functionsIcon })
-      ), /* @__PURE__ */ vue.h(
-        "button",
-        {
-          type: "button",
-          class: clsx(
-            "toolbar-item",
-            ctx && isActive(commonmark.linkSchema.type(ctx)) && "active"
-          ),
-          onPointerdown: onClick((ctx2) => {
-            const view = ctx2.get(core.editorViewCtx);
-            const { selection } = view.state;
-            if (isActive(commonmark.linkSchema.type(ctx2))) {
-              ctx2.get(linkTooltip$1.linkTooltipAPI.key).removeLink(selection.from, selection.to);
-              return;
-            }
-            ctx2.get(linkTooltip$1.linkTooltipAPI.key).addLink(selection.from, selection.to);
-            hide == null ? void 0 : hide();
-          })
-        },
-        /* @__PURE__ */ vue.h(component.Icon, { icon: (_f = config == null ? void 0 : config.linkIcon) != null ? _f : linkIcon })
-      ));
+      return /* @__PURE__ */ vue.h(vue.Fragment, null, groupInfo.value.map((group) => {
+        return group.items.map((item) => {
+          return /* @__PURE__ */ vue.h(
+            "button",
+            {
+              type: "button",
+              class: clsx(
+                "toolbar-item",
+                ctx && checkActive(item.active) && "active"
+              ),
+              onPointerdown: onClick(item.onRun)
+            },
+            /* @__PURE__ */ vue.h(component.Icon, { icon: item.icon })
+          );
+        });
+      }).reduce((acc, curr, index) => {
+        if (index === 0) {
+          acc.push(...curr);
+        } else {
+          acc.push(/* @__PURE__ */ vue.h("div", { class: "divider" }), ...curr);
+        }
+        return acc;
+      }, []));
     };
   }
 });