@milkdown/crepe 7.5.0 → 7.5.1

package/lib/esm/index-_A9vu1ED.js

@@ -0,0 +1,673 @@
+import { block, BlockProvider } from '@milkdown/kit/plugin/block';
+import { NodeSelection, TextSelection } from '@milkdown/kit/prose/state';
+import { editorViewCtx } from '@milkdown/kit/core';
+import { paragraphSchema, headingSchema, blockquoteSchema, hrSchema, bulletListSchema, orderedListSchema, listItemSchema, codeBlockSchema } from '@milkdown/kit/preset/commonmark';
+import { slashFactory, SlashProvider } from '@milkdown/kit/plugin/slash';
+import { $ctx } from '@milkdown/kit/utils';
+import { d as defIfNotExists, i as isInCodeBlock, a as isInList } from './index-Jvxff1vU.js';
+import { c, useMemo, useHost, useState, useRef, useCallback, useEffect, html } from 'atomico';
+import { imageBlockSchema } from '@milkdown/kit/component/image-block';
+import { createTable } from '@milkdown/kit/preset/gfm';
+import { t as textIcon, j as h1Icon, k as h2Icon, m as h3Icon, n as h4Icon, o as h5Icon, p as h6Icon, q as quoteIcon, u as dividerIcon, v as bulletListIcon, w as orderedListIcon, x as todoListIcon, i as imageIcon, y as codeIcon, z as tableIcon, A as plusIcon, B as menuIcon } from './todoList-9QsDDcmB.js';
+import { findWrapping } from '@milkdown/kit/prose/transform';
+
+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 && 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 : textIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : h1Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : h2Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : h3Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : h4Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : h5Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : h6Icon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndSetBlockType(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 : quoteIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(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 : dividerIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndAddBlockType(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 : bulletListIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(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 : orderedListIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(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 : todoListIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndWrapInBlockType(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 : imageIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndAddBlockType(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 : codeIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const command = clearContentAndAddBlockType(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 : tableIcon,
+    onRun: (ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const { dispatch, state } = view;
+      const tr = clearRange(state.tr);
+      const table = createTable(ctx, 3, 3);
+      tr.replaceSelectionWith(table);
+      const { from } = tr.selection;
+      const pos = from - table.nodeSize + 2;
+      dispatch(tr);
+      requestAnimationFrame(() => {
+        const selection = 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 } = useMemo(() => getGroups(filter, config), [filter]);
+  const host = useHost();
+  const [hoverIndex, setHoverIndex] = useState(0);
+  const root = useMemo(() => host.current.getRootNode(), [host]);
+  const prevMousePosition = useRef({ x: -999, y: -999 });
+  const onMouseMove = useCallback((e) => {
+    const prevPos = prevMousePosition.current;
+    if (!prevPos)
+      return;
+    const { x, y } = e;
+    prevPos.x = x;
+    prevPos.y = y;
+  }, []);
+  useEffect(() => {
+    if (size === 0 && show)
+      hide == null ? void 0 : hide();
+  }, [size, show]);
+  const onHover = useCallback((index, after) => {
+    setHoverIndex((prev) => {
+      const next = typeof index === "function" ? index(prev) : index;
+      after == null ? void 0 : after(next);
+      return next;
+    });
+  }, []);
+  const scrollToIndex = 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 = 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 = 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 = 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);
+    };
+  }, []);
+  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 html`
+    <host onmousedown=${(e) => e.preventDefault()}>
+      <nav class="tab-group">
+        <ul>
+          ${groups.map((group) => 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 html`
+            <div key=${group.key} class="menu-group">
+              <h6>${group.label}</h6>
+              <ul>
+                ${group.items.map(
+      (item) => 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 = 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 = $ctx({
+  show: () => {
+  },
+  hide: () => {
+  }
+}, "menuAPICtx");
+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 (isInCodeBlock(view2.state.selection) || 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 = useRef();
+  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 html`
+    <host>
+      <div ref=${ref} onmousedown=${onMouseDown} onmouseup=${onMouseUp} class="operation-item">
+        ${(addIcon == null ? void 0 : addIcon()) || plusIcon}
+      </div>
+      <div class="operation-item">
+        ${(handleIcon == null ? void 0 : handleIcon()) || menuIcon}
+      </div>
+    </host>
+  `;
+};
+blockHandleComponent.props = {
+  show: Boolean,
+  onAdd: Function,
+  addIcon: Function,
+  handleIcon: Function
+};
+const BlockHandleElement = 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(editorViewCtx);
+      if (!view.hasFocus())
+        view.focus();
+      const { state, 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.tr.insert(pos, paragraphSchema.type(ctx).create());
+      tr = tr.setSelection(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();
+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);
+};
+
+export { defineFeature };
+//# sourceMappingURL=index-_A9vu1ED.js.map