@milkdown/crepe 7.3.6 → 7.5.0

package/lib/cjs/index-crv_k6dv.js

@@ -0,0 +1,1353 @@
+'use strict';
+
+var index$3 = require('./index-z6pe2alg.js');
+var atomico = require('atomico');
+var todoList = require('./todoList-Ze4FLMlx.js');
+var transform = require('@milkdown/prose/transform');
+var schema = require('./schema-RVrwDDcq.js');
+var index = require('./index-tBw4NmwY.js');
+var state = require('@milkdown/prose/state');
+var prose = require('@milkdown/prose');
+var index$2 = require('./index-cKQcw-eu.js');
+var floatingUi_dom = require('./floating-ui.dom-2cjBpir5.js');
+var index$1 = require('./index-28q261C7.js');
+var model = require('@milkdown/prose/model');
+require('@milkdown/prose/commands');
+require('@milkdown/prose/inputrules');
+require('@milkdown/prose/keymap');
+require('@milkdown/prose/view');
+require('@milkdown/prose/schema-list');
+require('@milkdown/prose/history');
+require('@milkdown/prose/tables');
+
+function withMeta(plugin, meta) {
+  Object.assign(plugin, {
+    meta: {
+      package: "@milkdown/plugin-block",
+      ...meta
+    }
+  });
+  return plugin;
+}
+
+const defaultNodeFilter = (pos) => {
+  const table = prose.findParent((node) => node.type.name === "table")(pos);
+  if (table)
+    return false;
+  return true;
+};
+const blockConfig = index.$ctx({ filterNodes: defaultNodeFilter }, "blockConfig");
+withMeta(blockConfig, {
+  displayName: "Ctx<blockConfig>"
+});
+
+function selectRootNodeByDom(view, coords, filterNodes) {
+  var _a;
+  const root = view.dom.parentElement;
+  if (!root)
+    return null;
+  const pos = (_a = view.posAtCoords({
+    left: coords.x,
+    top: coords.y
+  })) == null ? void 0 : _a.inside;
+  if (pos == null || pos < 0)
+    return null;
+  let $pos = view.state.doc.resolve(pos);
+  let node = view.state.doc.nodeAt(pos);
+  let element = view.nodeDOM(pos);
+  const filter = (needLookup) => {
+    const checkDepth = $pos.depth >= 1 && $pos.index($pos.depth) === 0;
+    const shouldLookUp = needLookup || checkDepth;
+    if (!shouldLookUp)
+      return;
+    const ancestorPos = $pos.before($pos.depth);
+    node = view.state.doc.nodeAt(ancestorPos);
+    element = view.nodeDOM(ancestorPos);
+    $pos = view.state.doc.resolve(ancestorPos);
+    if (!filterNodes($pos, node))
+      filter(true);
+  };
+  const filterResult = filterNodes($pos, node);
+  filter(!filterResult);
+  if (!element || !node)
+    return null;
+  return { node, $pos, el: element };
+}
+
+let _detachedDoc = null;
+function detachedDoc() {
+  return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"));
+}
+const wrapMap = {
+  thead: ["table"],
+  tbody: ["table"],
+  tfoot: ["table"],
+  caption: ["table"],
+  colgroup: ["table"],
+  col: ["table", "colgroup"],
+  tr: ["table", "tbody"],
+  td: ["table", "tbody", "tr"],
+  th: ["table", "tbody", "tr"]
+};
+function serializeForClipboard(view, slice) {
+  const context = [];
+  let { openStart, openEnd, content } = slice;
+  while (openStart > 1 && openEnd > 1 && content.childCount === 1 && content.firstChild.childCount === 1) {
+    openStart -= 1;
+    openEnd -= 1;
+    const node = content.firstChild;
+    context.push(
+      node.type.name,
+      node.attrs !== node.type.defaultAttrs ? node.attrs : null
+    );
+    content = node.content;
+  }
+  const serializer = view.someProp("clipboardSerializer") || model.DOMSerializer.fromSchema(view.state.schema);
+  const doc = detachedDoc();
+  const wrap = doc.createElement("div");
+  wrap.appendChild(serializer.serializeFragment(content, { document: doc }));
+  let firstChild = wrap.firstChild;
+  let needsWrap;
+  let wrappers = 0;
+  while (firstChild && firstChild.nodeType === 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
+    for (let i = needsWrap.length - 1; i >= 0; i--) {
+      const wrapper = doc.createElement(needsWrap[i]);
+      while (wrap.firstChild) wrapper.appendChild(wrap.firstChild);
+      wrap.appendChild(wrapper);
+      wrappers++;
+    }
+    firstChild = wrap.firstChild;
+  }
+  if (firstChild && firstChild.nodeType === 1) {
+    firstChild.setAttribute(
+      "data-pm-slice",
+      `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`
+    );
+  }
+  const text = view.someProp("clipboardTextSerializer", (f) => f(slice, view)) || slice.content.textBetween(0, slice.content.size, "\n\n");
+  return { dom: wrap, text };
+}
+
+var __typeError$5 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _ctx$2, _createSelection, _activeSelection, _active, _activeDOMRect, _dragging, _BlockService_instances, filterNodes_get, view_get, _notify, _hide, _show, _handleMouseDown, _handleMouseUp, _handleDragStart, _mousemoveCallback, _dragEnd;
+const brokenClipboardAPI = prose.browser.ie && prose.browser.ie_version < 15 || prose.browser.ios && prose.browser.webkit_version < 604;
+const buffer = 20;
+class BlockService {
+  constructor() {
+    __privateAdd$5(this, _BlockService_instances);
+    /// @internal
+    __privateAdd$5(this, _ctx$2);
+    /// @internal
+    __privateAdd$5(this, _createSelection, () => {
+      if (!__privateGet$5(this, _active))
+        return null;
+      const result = __privateGet$5(this, _active);
+      const view = __privateGet$5(this, _BlockService_instances, view_get);
+      if (view && state.NodeSelection.isSelectable(result.node)) {
+        const nodeSelection = state.NodeSelection.create(view.state.doc, result.$pos.pos);
+        view.dispatch(view.state.tr.setSelection(nodeSelection));
+        view.focus();
+        __privateSet$5(this, _activeSelection, nodeSelection);
+        return nodeSelection;
+      }
+      return null;
+    });
+    /// @internal
+    __privateAdd$5(this, _activeSelection, null);
+    /// @internal
+    __privateAdd$5(this, _active, null);
+    /// @internal
+    __privateAdd$5(this, _activeDOMRect);
+    /// @internal
+    __privateAdd$5(this, _dragging, false);
+    /// @internal
+    __privateAdd$5(this, _notify);
+    /// @internal
+    __privateAdd$5(this, _hide, () => {
+      var _a;
+      (_a = __privateGet$5(this, _notify)) == null ? void 0 : _a.call(this, { type: "hide" });
+      __privateSet$5(this, _active, null);
+    });
+    /// @internal
+    __privateAdd$5(this, _show, (active) => {
+      var _a;
+      __privateSet$5(this, _active, active);
+      (_a = __privateGet$5(this, _notify)) == null ? void 0 : _a.call(this, { type: "show", active });
+    });
+    /// Bind editor context and notify function to the service.
+    this.bind = (ctx, notify) => {
+      __privateSet$5(this, _ctx$2, ctx);
+      __privateSet$5(this, _notify, notify);
+    };
+    /// Add mouse event to the dom.
+    this.addEvent = (dom) => {
+      dom.addEventListener("mousedown", __privateGet$5(this, _handleMouseDown));
+      dom.addEventListener("mouseup", __privateGet$5(this, _handleMouseUp));
+      dom.addEventListener("dragstart", __privateGet$5(this, _handleDragStart));
+    };
+    /// Remove mouse event to the dom.
+    this.removeEvent = (dom) => {
+      dom.removeEventListener("mousedown", __privateGet$5(this, _handleMouseDown));
+      dom.removeEventListener("mouseup", __privateGet$5(this, _handleMouseUp));
+      dom.removeEventListener("dragstart", __privateGet$5(this, _handleDragStart));
+    };
+    /// Unbind the notify function.
+    this.unBind = () => {
+      __privateSet$5(this, _notify, void 0);
+    };
+    /// @internal
+    __privateAdd$5(this, _handleMouseDown, () => {
+      var _a;
+      __privateSet$5(this, _activeDOMRect, (_a = __privateGet$5(this, _active)) == null ? void 0 : _a.el.getBoundingClientRect());
+      __privateGet$5(this, _createSelection).call(this);
+    });
+    /// @internal
+    __privateAdd$5(this, _handleMouseUp, () => {
+      if (!__privateGet$5(this, _dragging)) {
+        requestAnimationFrame(() => {
+          var _a;
+          if (!__privateGet$5(this, _activeDOMRect))
+            return;
+          (_a = __privateGet$5(this, _BlockService_instances, view_get)) == null ? void 0 : _a.focus();
+        });
+        return;
+      }
+      __privateSet$5(this, _dragging, false);
+      __privateSet$5(this, _activeSelection, null);
+    });
+    /// @internal
+    __privateAdd$5(this, _handleDragStart, (event) => {
+      var _a;
+      __privateSet$5(this, _dragging, true);
+      const view = __privateGet$5(this, _BlockService_instances, view_get);
+      if (!view)
+        return;
+      view.dom.dataset.dragging = "true";
+      const selection = __privateGet$5(this, _activeSelection);
+      if (event.dataTransfer && selection) {
+        const slice = selection.content();
+        event.dataTransfer.effectAllowed = "copyMove";
+        const { dom, text } = serializeForClipboard(view, slice);
+        event.dataTransfer.clearData();
+        event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML);
+        if (!brokenClipboardAPI)
+          event.dataTransfer.setData("text/plain", text);
+        const activeEl = (_a = __privateGet$5(this, _active)) == null ? void 0 : _a.el;
+        if (activeEl)
+          event.dataTransfer.setDragImage(activeEl, 0, 0);
+        view.dragging = {
+          slice,
+          move: true
+        };
+      }
+    });
+    /// @internal
+    this.keydownCallback = (view) => {
+      __privateGet$5(this, _hide).call(this);
+      __privateSet$5(this, _dragging, false);
+      view.dom.dataset.dragging = "false";
+      return false;
+    };
+    /// @internal
+    __privateAdd$5(this, _mousemoveCallback, index$1.throttle((view, event) => {
+      if (!view.editable)
+        return;
+      const rect = view.dom.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const dom = view.root.elementFromPoint(x, event.clientY);
+      if (!(dom instanceof Element)) {
+        __privateGet$5(this, _hide).call(this);
+        return;
+      }
+      const filterNodes = __privateGet$5(this, _BlockService_instances, filterNodes_get);
+      if (!filterNodes)
+        return;
+      const result = selectRootNodeByDom(view, { x, y: event.clientY }, filterNodes);
+      if (!result) {
+        __privateGet$5(this, _hide).call(this);
+        return;
+      }
+      __privateGet$5(this, _show).call(this, result);
+    }, 200));
+    /// @internal
+    this.mousemoveCallback = (view, event) => {
+      if (view.composing || !view.editable)
+        return false;
+      __privateGet$5(this, _mousemoveCallback).call(this, view, event);
+      return false;
+    };
+    /// @internal
+    this.dragoverCallback = (view, event) => {
+      var _a;
+      if (__privateGet$5(this, _dragging)) {
+        const root = (_a = __privateGet$5(this, _BlockService_instances, view_get)) == null ? void 0 : _a.dom.parentElement;
+        if (!root)
+          return false;
+        const hasHorizontalScrollbar = root.scrollHeight > root.clientHeight;
+        const rootRect = root.getBoundingClientRect();
+        if (hasHorizontalScrollbar) {
+          if (root.scrollTop > 0 && Math.abs(event.y - rootRect.y) < buffer) {
+            const top = root.scrollTop > 10 ? root.scrollTop - 10 : 0;
+            root.scrollTop = top;
+            return false;
+          }
+          const totalHeight = Math.round(view.dom.getBoundingClientRect().height);
+          const scrollBottom = Math.round(root.scrollTop + rootRect.height);
+          if (scrollBottom < totalHeight && Math.abs(event.y - (rootRect.height + rootRect.y)) < buffer) {
+            const top = root.scrollTop + 10;
+            root.scrollTop = top;
+            return false;
+          }
+        }
+      }
+      return false;
+    };
+    /// @internal
+    this.dragenterCallback = (view) => {
+      if (!view.dragging)
+        return;
+      __privateSet$5(this, _dragging, true);
+      view.dom.dataset.dragging = "true";
+    };
+    /// @internal
+    this.dragleaveCallback = (view, event) => {
+      const x = event.clientX;
+      const y = event.clientY;
+      if (x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight) {
+        __privateSet$5(this, _active, null);
+        __privateGet$5(this, _dragEnd).call(this, view);
+      }
+    };
+    /// @internal
+    this.dropCallback = (view) => {
+      __privateGet$5(this, _dragEnd).call(this, view);
+      return false;
+    };
+    /// @internal
+    this.dragendCallback = (view) => {
+      __privateGet$5(this, _dragEnd).call(this, view);
+    };
+    /// @internal
+    __privateAdd$5(this, _dragEnd, (view) => {
+      __privateSet$5(this, _dragging, false);
+      view.dom.dataset.dragging = "false";
+    });
+  }
+}
+_ctx$2 = new WeakMap();
+_createSelection = new WeakMap();
+_activeSelection = new WeakMap();
+_active = new WeakMap();
+_activeDOMRect = new WeakMap();
+_dragging = new WeakMap();
+_BlockService_instances = new WeakSet();
+filterNodes_get = function() {
+  var _a;
+  return (_a = __privateGet$5(this, _ctx$2)) == null ? void 0 : _a.get(blockConfig.key).filterNodes;
+};
+view_get = function() {
+  var _a;
+  return (_a = __privateGet$5(this, _ctx$2)) == null ? void 0 : _a.get(index.editorViewCtx);
+};
+_notify = new WeakMap();
+_hide = new WeakMap();
+_show = new WeakMap();
+_handleMouseDown = new WeakMap();
+_handleMouseUp = new WeakMap();
+_handleDragStart = new WeakMap();
+_mousemoveCallback = new WeakMap();
+_dragEnd = new WeakMap();
+
+const blockService = index.$ctx(new BlockService(), "blockService");
+withMeta(blockConfig, {
+  displayName: "Ctx<blockService>"
+});
+const blockSpec = index.$ctx({}, "blockSpec");
+withMeta(blockConfig, {
+  displayName: "Ctx<blockSpec>"
+});
+const blockPlugin = index.$prose((ctx) => {
+  const milkdownPluginBlockKey = new state.PluginKey("MILKDOWN_BLOCK");
+  const service = ctx.get(blockService.key);
+  const spec = ctx.get(blockSpec.key);
+  return new state.Plugin({
+    key: milkdownPluginBlockKey,
+    ...spec,
+    props: {
+      ...spec.props,
+      handleDOMEvents: {
+        drop: (view) => {
+          return service.dropCallback(view);
+        },
+        pointermove: (view, event) => {
+          return service.mousemoveCallback(view, event);
+        },
+        keydown: (view) => {
+          return service.keydownCallback(view);
+        },
+        dragover: (view, event) => {
+          return service.dragoverCallback(view, event);
+        },
+        dragleave: (view, event) => {
+          return service.dragleaveCallback(view, event);
+        },
+        dragenter: (view) => {
+          return service.dragenterCallback(view);
+        },
+        dragend: (view) => {
+          return service.dragendCallback(view);
+        }
+      }
+    }
+  });
+});
+withMeta(blockPlugin, {
+  displayName: "Prose<block>"
+});
+
+var __typeError$4 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod$1 = (obj, member, method) => (__accessCheck$4(obj, member, "access private method"), method);
+var _element, _ctx$1, _service, _activeNode, _initialized$1, _getOffset, _getPosition, _getPlacement, _BlockProvider_instances, init_fn;
+class BlockProvider {
+  constructor(options) {
+    __privateAdd$4(this, _BlockProvider_instances);
+    /// @internal
+    __privateAdd$4(this, _element);
+    /// @internal
+    __privateAdd$4(this, _ctx$1);
+    /// @internal
+    __privateAdd$4(this, _service);
+    /// @internal
+    __privateAdd$4(this, _activeNode, null);
+    /// @internal
+    __privateAdd$4(this, _initialized$1, false);
+    /// @internal
+    __privateAdd$4(this, _getOffset);
+    /// @internal
+    __privateAdd$4(this, _getPosition);
+    /// @internal
+    __privateAdd$4(this, _getPlacement);
+    /// Update provider state by editor view.
+    this.update = () => {
+      requestAnimationFrame(() => {
+        if (!__privateGet$4(this, _initialized$1)) {
+          try {
+            __privateMethod$1(this, _BlockProvider_instances, init_fn).call(this);
+            __privateSet$4(this, _initialized$1, true);
+          } catch (e) {
+          }
+        }
+      });
+    };
+    /// Destroy the block.
+    this.destroy = () => {
+      var _a, _b;
+      (_a = __privateGet$4(this, _service)) == null ? void 0 : _a.unBind();
+      (_b = __privateGet$4(this, _service)) == null ? void 0 : _b.removeEvent(__privateGet$4(this, _element));
+      __privateGet$4(this, _element).remove();
+    };
+    /// Show the block.
+    this.show = (active) => {
+      const dom = active.el;
+      const editorDom = __privateGet$4(this, _ctx$1).get(index.editorViewCtx).dom;
+      const deriveContext = {
+        ctx: __privateGet$4(this, _ctx$1),
+        active,
+        editorDom,
+        blockDom: __privateGet$4(this, _element)
+      };
+      const virtualEl = {
+        contextElement: dom,
+        getBoundingClientRect: () => {
+          if (__privateGet$4(this, _getPosition))
+            return __privateGet$4(this, _getPosition).call(this, deriveContext);
+          return dom.getBoundingClientRect();
+        }
+      };
+      const middleware = [floatingUi_dom.flip()];
+      if (__privateGet$4(this, _getOffset)) {
+        const offsetOption = __privateGet$4(this, _getOffset).call(this, deriveContext);
+        const offsetExt = floatingUi_dom.offset(offsetOption);
+        middleware.push(offsetExt);
+      }
+      floatingUi_dom.computePosition(virtualEl, __privateGet$4(this, _element), {
+        placement: __privateGet$4(this, _getPlacement) ? __privateGet$4(this, _getPlacement).call(this, deriveContext) : "left",
+        middleware
+      }).then(({ x, y }) => {
+        Object.assign(__privateGet$4(this, _element).style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+        __privateGet$4(this, _element).dataset.show = "true";
+      });
+    };
+    /// Hide the block.
+    this.hide = () => {
+      __privateGet$4(this, _element).dataset.show = "false";
+      setTimeout(() => {
+        Object.assign(__privateGet$4(this, _element).style, {
+          left: `-999px`,
+          top: `-999px`
+        });
+      }, 200);
+    };
+    __privateSet$4(this, _ctx$1, options.ctx);
+    __privateSet$4(this, _element, options.content);
+    __privateSet$4(this, _getOffset, options.getOffset);
+    __privateSet$4(this, _getPosition, options.getPosition);
+    __privateSet$4(this, _getPlacement, options.getPlacement);
+    this.hide();
+  }
+  /// The context of current active node.
+  get active() {
+    return __privateGet$4(this, _activeNode);
+  }
+}
+_element = new WeakMap();
+_ctx$1 = new WeakMap();
+_service = new WeakMap();
+_activeNode = new WeakMap();
+_initialized$1 = new WeakMap();
+_getOffset = new WeakMap();
+_getPosition = new WeakMap();
+_getPlacement = new WeakMap();
+_BlockProvider_instances = new WeakSet();
+/// @internal
+init_fn = function() {
+  var _a;
+  const view = __privateGet$4(this, _ctx$1).get(index.editorViewCtx);
+  (_a = view.dom.parentElement) == null ? void 0 : _a.appendChild(__privateGet$4(this, _element));
+  const service = __privateGet$4(this, _ctx$1).get(blockService.key);
+  service.bind(__privateGet$4(this, _ctx$1), (message) => {
+    if (message.type === "hide") {
+      this.hide();
+      __privateSet$4(this, _activeNode, null);
+    } else if (message.type === "show") {
+      this.show(message.active);
+      __privateSet$4(this, _activeNode, message.active);
+    }
+  });
+  __privateSet$4(this, _service, service);
+  __privateGet$4(this, _service).addEvent(__privateGet$4(this, _element));
+  __privateGet$4(this, _element).draggable = true;
+};
+
+const block = [blockSpec, blockConfig, blockService, blockPlugin];
+block.key = blockSpec.key;
+block.pluginKey = blockPlugin.key;
+
+function slashFactory(id) {
+  const slashSpec = index.$ctx({}, `${id}_SLASH_SPEC`);
+  const slashPlugin = index.$prose((ctx) => {
+    const spec = ctx.get(slashSpec.key);
+    return new state.Plugin({
+      key: new state.PluginKey(`${id}_SLASH`),
+      ...spec
+    });
+  });
+  const result = [slashSpec, slashPlugin];
+  result.key = slashSpec.key;
+  result.pluginKey = slashPlugin.key;
+  slashSpec.meta = {
+    package: "@milkdown/plugin-slash",
+    displayName: `Ctx<slashSpec>|${id}`
+  };
+  slashPlugin.meta = {
+    package: "@milkdown/plugin-slash",
+    displayName: `Prose<slash>|${id}`
+  };
+  return result;
+}
+
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck$3(obj, member, "access private method"), method);
+var _initialized, _debounce, _trigger, _shouldShow, _offset, _onUpdate, _SlashProvider_instances, _shouldShow_fn;
+class SlashProvider {
+  constructor(options) {
+    __privateAdd$3(this, _SlashProvider_instances);
+    /// @internal
+    __privateAdd$3(this, _initialized, false);
+    /// @internal
+    __privateAdd$3(this, _debounce);
+    /// @internal
+    __privateAdd$3(this, _trigger);
+    /// @internal
+    __privateAdd$3(this, _shouldShow);
+    /// The offset to get the block. Default is 0.
+    __privateAdd$3(this, _offset);
+    /// On show callback.
+    this.onShow = () => {
+    };
+    /// On hide callback.
+    this.onHide = () => {
+    };
+    /// @internal
+    __privateAdd$3(this, _onUpdate, (view, prevState) => {
+      var _a;
+      const { state, composing } = view;
+      const { selection, doc } = state;
+      const { ranges } = selection;
+      const from = Math.min(...ranges.map((range) => range.$from.pos));
+      const to = Math.max(...ranges.map((range) => range.$to.pos));
+      const isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection);
+      if (!__privateGet$3(this, _initialized)) {
+        (_a = view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+        __privateSet$3(this, _initialized, true);
+      }
+      if (composing || isSame)
+        return;
+      if (!__privateGet$3(this, _shouldShow).call(this, view, prevState)) {
+        this.hide();
+        return;
+      }
+      const virtualEl = {
+        getBoundingClientRect: () => prose.posToDOMRect(view, from, to)
+      };
+      floatingUi_dom.computePosition(virtualEl, this.element, {
+        placement: "bottom-start",
+        middleware: [floatingUi_dom.flip(), floatingUi_dom.offset(__privateGet$3(this, _offset))]
+      }).then(({ x, y }) => {
+        Object.assign(this.element.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
+      this.show();
+    });
+    /// Update provider state by editor view.
+    this.update = (view, prevState) => {
+      const updater = index$2.debounce(__privateGet$3(this, _onUpdate), __privateGet$3(this, _debounce));
+      updater(view, prevState);
+    };
+    /// Get the content of the current text block.
+    /// Pass the `matchNode` function to determine whether the current node should be matched, by default, it will match the paragraph node.
+    this.getContent = (view, matchNode = (node) => node.type.name === "paragraph") => {
+      const { selection } = view.state;
+      const { empty, $from } = selection;
+      const isTextBlock = view.state.selection instanceof state.TextSelection;
+      const isSlashChildren = this.element.contains(document.activeElement);
+      const notHasFocus = !view.hasFocus() && !isSlashChildren;
+      const isReadonly = !view.editable;
+      const paragraph = prose.findParentNode(matchNode)(view.state.selection);
+      const isNotInParagraph = !paragraph;
+      if (notHasFocus || isReadonly || !empty || !isTextBlock || isNotInParagraph)
+        return;
+      return $from.parent.textBetween(Math.max(0, $from.parentOffset - 500), $from.parentOffset, void 0, "\uFFFC");
+    };
+    /// Destroy the slash.
+    this.destroy = () => {
+    };
+    /// Show the slash.
+    this.show = () => {
+      this.element.dataset.show = "true";
+      this.onShow();
+    };
+    /// Hide the slash.
+    this.hide = () => {
+      this.element.dataset.show = "false";
+      this.onHide();
+    };
+    var _a, _b, _c;
+    this.element = options.content;
+    __privateSet$3(this, _debounce, (_a = options.debounce) != null ? _a : 200);
+    __privateSet$3(this, _shouldShow, (_b = options.shouldShow) != null ? _b : __privateMethod(this, _SlashProvider_instances, _shouldShow_fn));
+    __privateSet$3(this, _trigger, (_c = options.trigger) != null ? _c : "/");
+    __privateSet$3(this, _offset, options.offset);
+  }
+}
+_initialized = new WeakMap();
+_debounce = new WeakMap();
+_trigger = new WeakMap();
+_shouldShow = new WeakMap();
+_offset = new WeakMap();
+_onUpdate = new WeakMap();
+_SlashProvider_instances = new WeakSet();
+/// @internal
+_shouldShow_fn = function(view) {
+  const currentTextBlockContent = this.getContent(view);
+  if (!currentTextBlockContent)
+    return false;
+  const target = currentTextBlockContent.at(-1);
+  if (!target)
+    return false;
+  return Array.isArray(__privateGet$3(this, _trigger)) ? __privateGet$3(this, _trigger).includes(target) : __privateGet$3(this, _trigger) === target;
+};
+
+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;
+  };
+}
+
+var __typeError$2 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _groups, _getGroupInstance;
+class GroupBuilder {
+  constructor() {
+    __privateAdd$2(this, _groups, []);
+    this.clear = () => {
+      __privateSet$2(this, _groups, []);
+      return this;
+    };
+    __privateAdd$2(this, _getGroupInstance, (group) => {
+      const groupInstance = {
+        group,
+        addItem: (key, item) => {
+          const data = { key, ...item };
+          group.items.push(data);
+          return groupInstance;
+        },
+        clear: () => {
+          group.items = [];
+          return groupInstance;
+        }
+      };
+      return groupInstance;
+    });
+    this.addGroup = (key, label) => {
+      const items = [];
+      const group = {
+        key,
+        label,
+        items
+      };
+      __privateGet$2(this, _groups).push(group);
+      return __privateGet$2(this, _getGroupInstance).call(this, group);
+    };
+    this.getGroup = (key) => {
+      const group = __privateGet$2(this, _groups).find((group2) => group2.key === key);
+      if (!group)
+        throw new Error(`Group with key ${key} not found`);
+      return __privateGet$2(this, _getGroupInstance).call(this, group);
+    };
+    this.build = () => {
+      return __privateGet$2(this, _groups);
+    };
+  }
+}
+_groups = new WeakMap();
+_getGroupInstance = new WeakMap();
+
+function getGroups(filter, config) {
+  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;
+  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.slashMenuTextGroupLabel) != null ? _b : "Text",
+    icon: (_d = (_c = config == null ? void 0 : config.slashMenuTextIcon) == null ? void 0 : _c.call(config)) != null ? _d : todoList.textIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.paragraphSchema.type(ctx));
+      command(state, dispatch);
+    }
+  }).addItem("h1", {
+    label: (_e = config == null ? void 0 : config.slashMenuH1Label) != null ? _e : "Heading 1",
+    icon: (_g = (_f = config == null ? void 0 : config.slashMenuH1Icon) == null ? void 0 : _f.call(config)) != null ? _g : todoList.h1Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.headingSchema.type(ctx), { level: 1 });
+      command(state, dispatch);
+    }
+  }).addItem("h2", {
+    label: (_h = config == null ? void 0 : config.slashMenuH2Label) != null ? _h : "Heading 2",
+    icon: (_j = (_i = config == null ? void 0 : config.slashMenuH2Icon) == null ? void 0 : _i.call(config)) != null ? _j : todoList.h2Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.headingSchema.type(ctx), { level: 2 });
+      command(state, dispatch);
+    }
+  }).addItem("h3", {
+    label: (_k = config == null ? void 0 : config.slashMenuH3Label) != null ? _k : "Heading 3",
+    icon: (_m = (_l = config == null ? void 0 : config.slashMenuH3Icon) == null ? void 0 : _l.call(config)) != null ? _m : todoList.h3Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.headingSchema.type(ctx), { level: 3 });
+      command(state, dispatch);
+    }
+  }).addItem("h4", {
+    label: (_n = config == null ? void 0 : config.slashMenuH4Label) != null ? _n : "Heading 4",
+    icon: (_p = (_o = config == null ? void 0 : config.slashMenuH4Icon) == null ? void 0 : _o.call(config)) != null ? _p : todoList.h4Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.headingSchema.type(ctx), { level: 4 });
+      command(state, dispatch);
+    }
+  }).addItem("h5", {
+    label: (_q = config == null ? void 0 : config.slashMenuH5Label) != null ? _q : "Heading 5",
+    icon: (_s = (_r = config == null ? void 0 : config.slashMenuH5Icon) == null ? void 0 : _r.call(config)) != null ? _s : todoList.h5Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.headingSchema.type(ctx), { level: 5 });
+      command(state, dispatch);
+    }
+  }).addItem("h6", {
+    label: (_t = config == null ? void 0 : config.slashMenuH6Label) != null ? _t : "Heading 6",
+    icon: (_v = (_u = config == null ? void 0 : config.slashMenuH6Icon) == null ? void 0 : _u.call(config)) != null ? _v : todoList.h6Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(index.headingSchema.type(ctx), { level: 6 });
+      command(state, dispatch);
+    }
+  }).addItem("quote", {
+    label: (_w = config == null ? void 0 : config.slashMenuQuoteLabel) != null ? _w : "Quote",
+    icon: (_y = (_x = config == null ? void 0 : config.slashMenuQuoteIcon) == null ? void 0 : _x.call(config)) != null ? _y : todoList.quoteIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(index.blockquoteSchema.type(ctx));
+      command(state, dispatch);
+    }
+  }).addItem("divider", {
+    label: (_z = config == null ? void 0 : config.slashMenuDividerLabel) != null ? _z : "Divider",
+    icon: (_B = (_A = config == null ? void 0 : config.slashMenuDividerIcon) == null ? void 0 : _A.call(config)) != null ? _B : todoList.dividerIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndAddBlockType(index.hrSchema.type(ctx));
+      command(state, dispatch);
+    }
+  });
+  groupBuilder.addGroup("list", (_C = config == null ? void 0 : config.slashMenuListGroupLabel) != null ? _C : "List").addItem("bullet-list", {
+    label: (_D = config == null ? void 0 : config.slashMenuBulletListLabel) != null ? _D : "Bullet List",
+    icon: (_F = (_E = config == null ? void 0 : config.slashMenuBulletListIcon) == null ? void 0 : _E.call(config)) != null ? _F : todoList.bulletListIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(index.bulletListSchema.type(ctx));
+      command(state, dispatch);
+    }
+  }).addItem("ordered-list", {
+    label: (_G = config == null ? void 0 : config.slashMenuOrderedListLabel) != null ? _G : "Ordered List",
+    icon: (_I = (_H = config == null ? void 0 : config.slashMenuOrderedListIcon) == null ? void 0 : _H.call(config)) != null ? _I : todoList.orderedListIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(index.orderedListSchema.type(ctx));
+      command(state, dispatch);
+    }
+  }).addItem("todo-list", {
+    label: (_J = config == null ? void 0 : config.slashMenuTaskListLabel) != null ? _J : "Todo List",
+    icon: (_L = (_K = config == null ? void 0 : config.slashMenuTaskListIcon) == null ? void 0 : _K.call(config)) != null ? _L : todoList.todoListIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(index.listItemSchema.type(ctx), { checked: false });
+      command(state, dispatch);
+    }
+  });
+  groupBuilder.addGroup("advanced", (_M = config == null ? void 0 : config.slashMenuAdvancedGroupLabel) != null ? _M : "Advanced").addItem("image", {
+    label: (_N = config == null ? void 0 : config.slashMenuImageLabel) != null ? _N : "Image",
+    icon: (_P = (_O = config == null ? void 0 : config.slashMenuImageIcon) == null ? void 0 : _O.call(config)) != null ? _P : todoList.imageIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndAddBlockType(schema.imageBlockSchema.type(ctx));
+      command(state, dispatch);
+    }
+  }).addItem("code", {
+    label: (_Q = config == null ? void 0 : config.slashMenuCodeBlockLabel) != null ? _Q : "Code",
+    icon: (_S = (_R = config == null ? void 0 : config.slashMenuCodeBlockIcon) == null ? void 0 : _R.call(config)) != null ? _S : todoList.codeIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndAddBlockType(index.codeBlockSchema.type(ctx));
+      command(state, dispatch);
+    }
+  }).addItem("table", {
+    label: (_T = config == null ? void 0 : config.slashMenuTableLabel) != null ? _T : "Table",
+    icon: (_V = (_U = config == null ? void 0 : config.slashMenuTableIcon) == null ? void 0 : _U.call(config)) != null ? _V : todoList.tableIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(index.editorViewCtx);
+      const { dispatch, state: state$1 } = view;
+      const tr = clearRange(state$1.tr);
+      const table = index.createTable(ctx, 3, 3);
+      tr.replaceSelectionWith(table);
+      const { from } = tr.selection;
+      const pos = from - table.nodeSize + 2;
+      dispatch(tr);
+      requestAnimationFrame(() => {
+        const selection = state.NodeSelection.create(view.state.tr.doc, pos);
+        dispatch(view.state.tr.setSelection(selection).scrollIntoView());
+      });
+    }
+  });
+  (_W = config == null ? void 0 : config.buildMenu) == null ? void 0 : _W.call(config, groupBuilder);
+  let groups = groupBuilder.build();
+  if (filter) {
+    groups = groups.map((group) => {
+      const items2 = group.items.filter((item) => item.label.toLowerCase().includes(filter.toLowerCase()));
+      return {
+        ...group,
+        items: items2
+      };
+    }).filter((group) => group.items.length > 0);
+  }
+  const items = groups.flatMap((groups2) => groups2.items);
+  items.forEach((item, index) => {
+    Object.assign(item, { index });
+  });
+  groups.reduce((acc, group) => {
+    const end = acc + group.items.length;
+    Object.assign(group, {
+      range: [acc, end]
+    });
+    return end;
+  }, 0);
+  return {
+    groups,
+    size: items.length
+  };
+}
+
+const menuComponent = ({
+  show,
+  hide,
+  ctx,
+  filter,
+  config
+}) => {
+  const { groups, size } = atomico.useMemo(() => getGroups(filter, config), [filter]);
+  const host = atomico.useHost();
+  const [hoverIndex, setHoverIndex] = atomico.useState(0);
+  const root = atomico.useMemo(() => host.current.getRootNode(), [host]);
+  const prevMousePosition = atomico.useRef({ x: -999, y: -999 });
+  const onMouseMove = atomico.useCallback((e) => {
+    const prevPos = prevMousePosition.current;
+    if (!prevPos)
+      return;
+    const { x, y } = e;
+    prevPos.x = x;
+    prevPos.y = y;
+  }, []);
+  atomico.useEffect(() => {
+    if (size === 0 && show)
+      hide == null ? void 0 : hide();
+  }, [size, show]);
+  const onHover = atomico.useCallback((index, after) => {
+    setHoverIndex((prev) => {
+      const next = typeof index === "function" ? index(prev) : index;
+      after == null ? void 0 : after(next);
+      return next;
+    });
+  }, []);
+  const scrollToIndex = atomico.useCallback((index) => {
+    const target = host.current.querySelector(`[data-index="${index}"]`);
+    const scrollRoot = host.current.querySelector(".menu-groups");
+    if (!target || !scrollRoot)
+      return;
+    scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop;
+  }, []);
+  const runByIndex = atomico.useCallback((index) => {
+    const item = groups.flatMap((group) => group.items).at(index);
+    if (item && ctx)
+      item.onRun(ctx);
+    hide == null ? void 0 : hide();
+  }, [groups]);
+  const onKeydown = atomico.useCallback((e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      hide == null ? void 0 : hide();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      return onHover((index) => index < size - 1 ? index + 1 : index, scrollToIndex);
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      return onHover((index) => index <= 0 ? index : index - 1, scrollToIndex);
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      return onHover((index) => {
+        const group = groups.find((group2) => group2.range[0] <= index && group2.range[1] > index);
+        if (!group)
+          return index;
+        const prevGroup = groups[groups.indexOf(group) - 1];
+        if (!prevGroup)
+          return index;
+        return prevGroup.range[1] - 1;
+      }, scrollToIndex);
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      return onHover((index) => {
+        const group = groups.find((group2) => group2.range[0] <= index && group2.range[1] > index);
+        if (!group)
+          return index;
+        const nextGroup = groups[groups.indexOf(group) + 1];
+        if (!nextGroup)
+          return index;
+        return nextGroup.range[0];
+      }, scrollToIndex);
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      runByIndex(hoverIndex);
+    }
+  }, [hide, groups, hoverIndex]);
+  const onMouseEnter = atomico.useCallback((index) => {
+    return (e) => {
+      const prevPos = prevMousePosition.current;
+      if (!prevPos)
+        return;
+      const { x, y } = e;
+      if (x === prevPos.x && y === prevPos.y)
+        return;
+      onHover(index);
+    };
+  }, []);
+  atomico.useEffect(() => {
+    if (show)
+      root.addEventListener("keydown", onKeydown, { capture: true });
+    else root.removeEventListener("keydown", onKeydown, { capture: true });
+    return () => {
+      root.removeEventListener("keydown", onKeydown, { capture: true });
+    };
+  }, [show, onKeydown]);
+  return atomico.html`
+    <host onmousedown=${(e) => e.preventDefault()}>
+      <nav class="tab-group">
+        <ul>
+          ${groups.map((group) => atomico.html`<li
+              key=${group.key}
+              onmousedown=${() => onHover(group.range[0], scrollToIndex)}
+              class=${hoverIndex >= group.range[0] && hoverIndex < group.range[1] ? "selected" : ""}
+            >
+              ${group.label}
+            </li>`)}
+        </ul>
+      </nav>
+      <div class="menu-groups" onmousemove=${onMouseMove}>
+        ${groups.map((group) => {
+    return atomico.html`
+            <div key=${group.key} class="menu-group">
+              <h6>${group.label}</h6>
+              <ul>
+                ${group.items.map(
+      (item) => atomico.html`<li
+                    key=${item.key}
+                    data-index=${item.index}
+                    class=${hoverIndex === item.index ? "hover" : ""}
+                    onmouseenter=${onMouseEnter(item.index)}
+                    onmousedown=${() => {
+        var _a;
+        (_a = host.current.querySelector(`[data-index="${item.index}"]`)) == null ? void 0 : _a.classList.add("active");
+      }}
+                    onmouseup=${() => {
+        var _a;
+        (_a = host.current.querySelector(`[data-index="${item.index}"]`)) == null ? void 0 : _a.classList.remove("active");
+        runByIndex(item.index);
+      }}
+                  >
+                    ${item.icon}
+                    <span>${item.label}</span>
+                  </li>`
+    )}
+              </ul>
+            </div>
+          `;
+  })}
+      </div>
+    </host>
+  `;
+};
+menuComponent.props = {
+  ctx: Object,
+  config: Object,
+  show: Boolean,
+  filter: String,
+  hide: Function
+};
+const MenuElement = atomico.c(menuComponent);
+
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _content$1, _slashProvider, _programmaticallyPos;
+const menu = slashFactory("CREPE_MENU");
+const menuAPI = index.$ctx({
+  show: () => {
+  },
+  hide: () => {
+  }
+}, "menuAPICtx");
+index$3.defIfNotExists("milkdown-slash-menu", MenuElement);
+function configureMenu(ctx, config) {
+  ctx.set(menu.key, {
+    view: (view) => new MenuView(ctx, view, config)
+  });
+}
+class MenuView {
+  constructor(ctx, view, config) {
+    __privateAdd$1(this, _content$1);
+    __privateAdd$1(this, _slashProvider);
+    __privateAdd$1(this, _programmaticallyPos, null);
+    this.update = (view) => {
+      __privateGet$1(this, _slashProvider).update(view);
+    };
+    this.show = (pos) => {
+      __privateSet$1(this, _programmaticallyPos, pos);
+      __privateGet$1(this, _content$1).filter = "";
+      __privateGet$1(this, _slashProvider).show();
+    };
+    this.hide = () => {
+      __privateSet$1(this, _programmaticallyPos, null);
+      __privateGet$1(this, _slashProvider).hide();
+    };
+    this.destroy = () => {
+      __privateGet$1(this, _slashProvider).destroy();
+      __privateGet$1(this, _content$1).remove();
+    };
+    __privateSet$1(this, _content$1, new MenuElement());
+    __privateGet$1(this, _content$1).hide = this.hide;
+    __privateGet$1(this, _content$1).ctx = ctx;
+    __privateGet$1(this, _content$1).config = config;
+    const self = this;
+    __privateSet$1(this, _slashProvider, new SlashProvider({
+      content: __privateGet$1(this, _content$1),
+      debounce: 20,
+      shouldShow(view2) {
+        if (index$3.isInCodeBlock(view2.state.selection) || index$3.isInList(view2.state.selection))
+          return false;
+        const currentText = this.getContent(view2, (node) => ["paragraph", "heading"].includes(node.type.name));
+        if (currentText == null)
+          return false;
+        const pos = __privateGet$1(self, _programmaticallyPos);
+        __privateGet$1(self, _content$1).filter = currentText.startsWith("/") ? currentText.slice(1) : currentText;
+        if (typeof pos === "number") {
+          if (view2.state.doc.resolve(pos).node() !== view2.state.doc.resolve(view2.state.selection.from).node()) {
+            __privateSet$1(self, _programmaticallyPos, null);
+            return false;
+          }
+          return true;
+        }
+        if (!currentText.startsWith("/"))
+          return false;
+        return true;
+      },
+      offset: 10
+    }));
+    __privateGet$1(this, _slashProvider).onShow = () => {
+      __privateGet$1(this, _content$1).show = true;
+    };
+    __privateGet$1(this, _slashProvider).onHide = () => {
+      __privateGet$1(this, _content$1).show = false;
+    };
+    this.update(view);
+    ctx.set(menuAPI.key, {
+      show: (pos) => this.show(pos),
+      hide: () => this.hide()
+    });
+  }
+}
+_content$1 = new WeakMap();
+_slashProvider = new WeakMap();
+_programmaticallyPos = new WeakMap();
+
+const blockHandleComponent = ({
+  onAdd,
+  addIcon,
+  handleIcon
+}) => {
+  const ref = atomico.useRef();
+  atomico.useEffect(() => {
+    var _a;
+    (_a = ref.current) == null ? void 0 : _a.classList.remove("active");
+  });
+  const onMouseDown = (e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = ref.current) == null ? void 0 : _a.classList.add("active");
+  };
+  const onMouseUp = (e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    onAdd == null ? void 0 : onAdd();
+    (_a = ref.current) == null ? void 0 : _a.classList.remove("active");
+  };
+  return atomico.html`
+    <host>
+      <div ref=${ref} onmousedown=${onMouseDown} onmouseup=${onMouseUp} class="operation-item">
+        ${(addIcon == null ? void 0 : addIcon()) || todoList.plusIcon}
+      </div>
+      <div class="operation-item">
+        ${(handleIcon == null ? void 0 : handleIcon()) || todoList.menuIcon}
+      </div>
+    </host>
+  `;
+};
+blockHandleComponent.props = {
+  show: Boolean,
+  onAdd: Function,
+  addIcon: Function,
+  handleIcon: Function
+};
+const BlockHandleElement = atomico.c(blockHandleComponent);
+
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _content, _provider, _ctx;
+class BlockHandleView {
+  constructor(ctx, config) {
+    __privateAdd(this, _content);
+    __privateAdd(this, _provider);
+    __privateAdd(this, _ctx);
+    this.update = () => {
+      __privateGet(this, _provider).update();
+    };
+    this.destroy = () => {
+      __privateGet(this, _provider).destroy();
+      __privateGet(this, _content).remove();
+    };
+    this.onAdd = () => {
+      const ctx = __privateGet(this, _ctx);
+      const view = ctx.get(index.editorViewCtx);
+      if (!view.hasFocus())
+        view.focus();
+      const { state: state$1, dispatch } = view;
+      const active = __privateGet(this, _provider).active;
+      if (!active)
+        return;
+      const $pos = active.$pos;
+      const pos = $pos.pos + active.node.nodeSize;
+      let tr = state$1.tr.insert(pos, index.paragraphSchema.type(ctx).create());
+      tr = tr.setSelection(state.TextSelection.near(tr.doc.resolve(pos)));
+      dispatch(tr.scrollIntoView());
+      __privateGet(this, _provider).hide();
+      ctx.get(menuAPI.key).show(tr.selection.from);
+    };
+    __privateSet(this, _ctx, ctx);
+    const content = new BlockHandleElement();
+    __privateSet(this, _content, content);
+    __privateGet(this, _content).onAdd = this.onAdd;
+    __privateGet(this, _content).addIcon = config == null ? void 0 : config.handleAddIcon;
+    __privateGet(this, _content).handleIcon = config == null ? void 0 : config.handleDragIcon;
+    __privateSet(this, _provider, new BlockProvider({
+      ctx,
+      content,
+      getOffset: () => 16,
+      getPlacement: ({ active, blockDom }) => {
+        let totalDescendant = 0;
+        active.node.descendants((node) => {
+          totalDescendant += node.childCount;
+        });
+        const dom = active.el;
+        const domRect = dom.getBoundingClientRect();
+        const handleRect = blockDom.getBoundingClientRect();
+        const style = window.getComputedStyle(dom);
+        const paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
+        const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
+        const height = domRect.height - paddingTop - paddingBottom;
+        const handleHeight = handleRect.height;
+        return totalDescendant > 2 || handleHeight * 2 < height ? "left-start" : "left";
+      }
+    }));
+    this.update();
+  }
+}
+_content = new WeakMap();
+_provider = new WeakMap();
+_ctx = new WeakMap();
+index$3.defIfNotExists("milkdown-block-handle", BlockHandleElement);
+function configureBlockHandle(ctx, config) {
+  ctx.set(block.key, {
+    view: () => new BlockHandleView(ctx, config)
+  });
+}
+
+const defineFeature = (editor, config) => {
+  editor.config((ctx) => configureBlockHandle(ctx, config)).config((ctx) => configureMenu(ctx, config)).use(menuAPI).use(block).use(menu);
+};
+
+exports.defineFeature = defineFeature;
+//# sourceMappingURL=index-crv_k6dv.js.map