@milkdown/crepe 7.8.0 → 7.9.0

package/lib/esm/{index-CEOsxgzJ.js → index-CM4urRY9.js}

@@ -1,23 +1,301 @@
 import { blockConfig, block, BlockProvider } from '@milkdown/kit/plugin/block';
-import { 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 { findParent } from '@milkdown/kit/prose';
+import { TextSelection } from '@milkdown/kit/prose/state';
+import { defineComponent, ref, computed, watch, watchEffect, onUnmounted, h, createApp, Fragment } from 'vue';
+import { p as plusIcon } from './plus-lrX0Q75O.js';
 import { slashFactory, SlashProvider } from '@milkdown/kit/plugin/slash';
 import { $ctx } from '@milkdown/kit/utils';
-import { i as isInCodeBlock, a as isInList, d as defIfNotExists } from './index-D6fLMv29.js';
-import { c, useMemo, useHost, useState, useRef, useCallback, useEffect, html } from 'atomico';
+import { i as isInCodeBlock, a as isInList } from './index-BPG8iO8t.js';
+import { Icon } from '@milkdown/kit/component';
 import { imageBlockSchema } from '@milkdown/kit/component/image-block';
 import { createTable } from '@milkdown/kit/preset/gfm';
-import { F as FeaturesCtx, C as CrepeFeature } from './index-BwTxn2hs.js';
-import { t as textIcon, k as h1Icon, l 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 functionsIcon, B as plusIcon, C as menuIcon } from './functions-Bsik6ikd.js';
+import { F as FeaturesCtx, C as CrepeFeature } from './index-Dc_wWopW.js';
+import { c as codeIcon, f as functionsIcon } from './functions-DlJPkGmE.js';
+import { i as imageIcon } from './image-DoB1o1sl.js';
 import { findWrapping } from '@milkdown/kit/prose/transform';
+import '@milkdown/kit/plugin/clipboard';
 import '@milkdown/kit/plugin/history';
 import '@milkdown/kit/plugin/indent';
-import '@milkdown/kit/plugin/clipboard';
+import '@milkdown/kit/plugin/listener';
 import '@milkdown/kit/plugin/trailing';
 import '@milkdown/kit/ctx';
-import '@milkdown/kit/plugin/listener';
+
+const bulletListIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_8070)">
+      <path
+        d="M4 10.5C3.17 10.5 2.5 11.17 2.5 12C2.5 12.83 3.17 13.5 4 13.5C4.83 13.5 5.5 12.83 5.5 12C5.5 11.17 4.83 10.5 4 10.5ZM4 4.5C3.17 4.5 2.5 5.17 2.5 6C2.5 6.83 3.17 7.5 4 7.5C4.83 7.5 5.5 6.83 5.5 6C5.5 5.17 4.83 4.5 4 4.5ZM4 16.5C3.17 16.5 2.5 17.18 2.5 18C2.5 18.82 3.18 19.5 4 19.5C4.82 19.5 5.5 18.82 5.5 18C5.5 17.18 4.83 16.5 4 16.5ZM8 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H8C7.45 17 7 17.45 7 18C7 18.55 7.45 19 8 19ZM8 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM7 6C7 6.55 7.45 7 8 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H8C7.45 5 7 5.45 7 6Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8070">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const dividerIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_7900)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19 13H5C4.45 13 4 12.55 4 12C4 11.45 4.45 11 5 11H19C19.55 11 20 11.45 20 12C20 12.55 19.55 13 19 13Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7900">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const h1Icon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_992_5553)">
+      <path
+        d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM12 17H14V7H10V9H12V17Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5553">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const h2Icon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_992_5559)">
+      <path
+        d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15H11V13H13C14.1 13 15 12.11 15 11V9C15 7.89 14.1 7 13 7H9V9H13V11H11C9.9 11 9 11.89 9 13V17H15V15Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5559">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const h3Icon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_992_5565)">
+      <path
+        d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15V13.5C15 12.67 14.33 12 13.5 12C14.33 12 15 11.33 15 10.5V9C15 7.89 14.1 7 13 7H9V9H13V11H11V13H13V15H9V17H13C14.1 17 15 16.11 15 15Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5565">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const h4Icon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_7757)">
+      <path
+        d="M19.04 3H5.04004C3.94004 3 3.04004 3.9 3.04004 5V19C3.04004 20.1 3.94004 21 5.04004 21H19.04C20.14 21 21.04 20.1 21.04 19V5C21.04 3.9 20.14 3 19.04 3ZM19.04 19H5.04004V5H19.04V19ZM13.04 17H15.04V7H13.04V11H11.04V7H9.04004V13H13.04V17Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7757">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const h5Icon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_7760)">
+      <path
+        d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM15 15V13C15 11.89 14.1 11 13 11H11V9H15V7H9V13H13V15H9V17H13C14.1 17 15 16.11 15 15Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7760">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const h6Icon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_7763)">
+      <path
+        d="M11 17H13C14.1 17 15 16.11 15 15V13C15 11.89 14.1 11 13 11H11V9H15V7H11C9.9 7 9 7.89 9 9V15C9 16.11 9.9 17 11 17ZM11 13H13V15H11V13ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7763">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const menuIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_971_7680)">
+      <path
+        d="M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_971_7680">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const orderedListIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_8067)">
+      <path
+        d="M8 7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H8C7.45 5 7 5.45 7 6C7 6.55 7.45 7 8 7ZM20 17H8C7.45 17 7 17.45 7 18C7 18.55 7.45 19 8 19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17ZM20 11H8C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11ZM4.5 16H2.5C2.22 16 2 16.22 2 16.5C2 16.78 2.22 17 2.5 17H4V17.5H3.5C3.22 17.5 3 17.72 3 18C3 18.28 3.22 18.5 3.5 18.5H4V19H2.5C2.22 19 2 19.22 2 19.5C2 19.78 2.22 20 2.5 20H4.5C4.78 20 5 19.78 5 19.5V16.5C5 16.22 4.78 16 4.5 16ZM2.5 5H3V7.5C3 7.78 3.22 8 3.5 8C3.78 8 4 7.78 4 7.5V4.5C4 4.22 3.78 4 3.5 4H2.5C2.22 4 2 4.22 2 4.5C2 4.78 2.22 5 2.5 5ZM4.5 10H2.5C2.22 10 2 10.22 2 10.5C2 10.78 2.22 11 2.5 11H3.8L2.12 12.96C2.04 13.05 2 13.17 2 13.28V13.5C2 13.78 2.22 14 2.5 14H4.5C4.78 14 5 13.78 5 13.5C5 13.22 4.78 13 4.5 13H3.2L4.88 11.04C4.96 10.95 5 10.83 5 10.72V10.5C5 10.22 4.78 10 4.5 10Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8067">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const quoteIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_7897)">
+      <path
+        d="M7.17 17C7.68 17 8.15 16.71 8.37 16.26L9.79 13.42C9.93 13.14 10 12.84 10 12.53V8C10 7.45 9.55 7 9 7H5C4.45 7 4 7.45 4 8V12C4 12.55 4.45 13 5 13H7L5.97 15.06C5.52 15.95 6.17 17 7.17 17ZM17.17 17C17.68 17 18.15 16.71 18.37 16.26L19.79 13.42C19.93 13.14 20 12.84 20 12.53V8C20 7.45 19.55 7 19 7H15C14.45 7 14 7.45 14 8V12C14 12.55 14.45 13 15 13H17L15.97 15.06C15.52 15.95 16.17 17 17.17 17Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_7897">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const tableIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_977_8078)">
+      <path
+        d="M20 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H20C21.1 21 22 20.1 22 19V5C22 3.9 21.1 3 20 3ZM20 5V8H5V5H20ZM15 19H10V10H15V19ZM5 10H8V19H5V10ZM17 19V10H20V19H17Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_977_8078">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const textIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_992_5547)">
+      <path
+        d="M5 5.5C5 6.33 5.67 7 6.5 7H10.5V17.5C10.5 18.33 11.17 19 12 19C12.83 19 13.5 18.33 13.5 17.5V7H17.5C18.33 7 19 6.33 19 5.5C19 4.67 18.33 4 17.5 4H6.5C5.67 4 5 4.67 5 5.5Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_992_5547">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const todoListIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M5.66936 16.3389L9.39244 12.6158C9.54115 12.4671 9.71679 12.3937 9.91936 12.3957C10.1219 12.3976 10.2975 12.4761 10.4463 12.6312C10.5847 12.7823 10.654 12.9585 10.654 13.1599C10.654 13.3613 10.5847 13.5363 10.4463 13.6851L6.32704 17.8197C6.14627 18.0004 5.93538 18.0908 5.69436 18.0908C5.45333 18.0908 5.24243 18.0004 5.06166 17.8197L3.01744 15.7754C2.87899 15.637 2.81136 15.4629 2.81456 15.2533C2.81776 15.0437 2.88859 14.8697 3.02706 14.7312C3.16551 14.5928 3.34008 14.5235 3.55076 14.5235C3.76144 14.5235 3.93494 14.5928 4.07126 14.7312L5.66936 16.3389ZM5.66936 8.72359L9.39244 5.00049C9.54115 4.85177 9.71679 4.77838 9.91936 4.78031C10.1219 4.78223 10.2975 4.86075 10.4463 5.01586C10.5847 5.16691 10.654 5.34314 10.654 5.54454C10.654 5.74592 10.5847 5.92097 10.4463 6.06969L6.32704 10.2043C6.14627 10.3851 5.93538 10.4755 5.69436 10.4755C5.45333 10.4755 5.24243 10.3851 5.06166 10.2043L3.01744 8.16009C2.87899 8.02162 2.81136 7.84759 2.81456 7.63799C2.81776 7.42837 2.88859 7.25433 3.02706 7.11586C3.16551 6.97741 3.34008 6.90819 3.55076 6.90819C3.76144 6.90819 3.93494 6.97741 4.07126 7.11586L5.66936 8.72359ZM13.7597 16.5581C13.5472 16.5581 13.3691 16.4862 13.2253 16.3424C13.0816 16.1986 13.0097 16.0204 13.0097 15.8078C13.0097 15.5952 13.0816 15.4171 13.2253 15.2735C13.3691 15.13 13.5472 15.0582 13.7597 15.0582H20.7597C20.9722 15.0582 21.1503 15.1301 21.2941 15.2739C21.4378 15.4177 21.5097 15.5959 21.5097 15.8085C21.5097 16.0211 21.4378 16.1992 21.2941 16.3427C21.1503 16.4863 20.9722 16.5581 20.7597 16.5581H13.7597ZM13.7597 8.94276C13.5472 8.94276 13.3691 8.87085 13.2253 8.72704C13.0816 8.58324 13.0097 8.40504 13.0097 8.19244C13.0097 7.97985 13.0816 7.80177 13.2253 7.65819C13.3691 7.5146 13.5472 7.44281 13.7597 7.44281H20.7597C20.9722 7.44281 21.1503 7.51471 21.2941 7.65851C21.4378 7.80233 21.5097 7.98053 21.5097 8.19311C21.5097 8.40571 21.4378 8.5838 21.2941 8.72739C21.1503 8.87097 20.9722 8.94276 20.7597 8.94276H13.7597Z"
+    />
+  </svg>
+`;
 
 var __typeError$2 = (msg) => {
   throw TypeError(msg);
@@ -355,60 +633,65 @@ function getGroups(filter, config, ctx) {
   };
 }
 
-const menuComponent = ({
-  show,
-  hide,
-  ctx,
-  filter,
-  config
-}) => {
-  const { groups, size } = useMemo(
-    () => getGroups(filter, config, ctx),
-    [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();
-    else if (hoverIndex >= size) setHoverIndex(0);
-  }, [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 Menu = defineComponent({
+  props: {
+    ctx: {
+      type: Object,
+      required: true
     },
-    []
-  );
-  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();
+    show: {
+      type: Object,
+      required: true
     },
-    [groups]
-  );
-  const onKeydown = useCallback(
-    (e) => {
+    filter: {
+      type: Object,
+      required: true
+    },
+    hide: {
+      type: Function,
+      required: true
+    },
+    config: {
+      type: Object,
+      required: false
+    }
+  },
+  setup({ ctx, show, filter, hide, config }) {
+    const host = ref();
+    const groupInfo = computed(() => getGroups(filter.value, config, ctx));
+    const hoverIndex = ref(0);
+    const prevMousePosition = ref({ x: -999, y: -999 });
+    const onPointerMove = (e) => {
+      const { x, y } = e;
+      prevMousePosition.value = { x, y };
+    };
+    watch([groupInfo, show], () => {
+      const { size } = groupInfo.value;
+      if (size === 0 && show.value) hide();
+      else if (hoverIndex.value >= size) hoverIndex.value = 0;
+    });
+    const onHover = (index, after) => {
+      const prevHoverIndex = hoverIndex.value;
+      const next = typeof index === "function" ? index(prevHoverIndex) : index;
+      after == null ? void 0 : after(next);
+      hoverIndex.value = next;
+    };
+    const scrollToIndex = (index) => {
+      var _a, _b;
+      const target = (_a = host.value) == null ? void 0 : _a.querySelector(
+        `[data-index="${index}"]`
+      );
+      const scrollRoot = (_b = host.value) == null ? void 0 : _b.querySelector(".menu-groups");
+      if (!target || !scrollRoot) return;
+      scrollRoot.scrollTop = target.offsetTop - scrollRoot.offsetTop;
+    };
+    const runByIndex = (index) => {
+      const item = groupInfo.value.groups.flatMap((group) => group.items).at(index);
+      if (item && ctx) item.onRun(ctx);
+      hide();
+    };
+    const onKeydown = (e) => {
+      const { size, groups } = groupInfo.value;
       if (e.key === "Escape") {
         e.preventDefault();
         hide == null ? void 0 : hide();
@@ -454,84 +737,59 @@ const menuComponent = ({
       }
       if (e.key === "Enter") {
         e.preventDefault();
-        runByIndex(hoverIndex);
+        runByIndex(hoverIndex.value);
       }
-    },
-    [hide, groups, hoverIndex]
-  );
-  const onMouseEnter = useCallback((index) => {
-    return (e) => {
-      const prevPos = prevMousePosition.current;
+    };
+    const getOnPointerEnter = (index) => (e) => {
+      const prevPos = prevMousePosition.value;
       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 });
+    watchEffect(() => {
+      const isShown = show.value;
+      if (isShown) {
+        window.addEventListener("keydown", onKeydown, { capture: true });
+      } else {
+        window.removeEventListener("keydown", onKeydown, { capture: true });
+      }
+    });
+    onUnmounted(() => {
+      window.removeEventListener("keydown", onKeydown, { capture: true });
+    });
     return () => {
-      root.removeEventListener("keydown", onKeydown, { capture: true });
+      return /* @__PURE__ */ h("div", { ref: host, onPointerdown: (e) => e.preventDefault() }, /* @__PURE__ */ h("nav", { class: "tab-group" }, /* @__PURE__ */ h("ul", null, groupInfo.value.groups.map((group) => /* @__PURE__ */ h(
+        "li",
+        {
+          key: group.key,
+          onPointerdown: () => onHover(group.range[0], scrollToIndex),
+          class: hoverIndex.value >= group.range[0] && hoverIndex.value < group.range[1] ? "selected" : ""
+        },
+        group.label
+      )))), /* @__PURE__ */ h("div", { class: "menu-groups", onPointermove: onPointerMove }, groupInfo.value.groups.map((group) => /* @__PURE__ */ h("div", { key: group.key, class: "menu-group" }, /* @__PURE__ */ h("h6", null, group.label), /* @__PURE__ */ h("ul", null, group.items.map((item) => /* @__PURE__ */ h(
+        "li",
+        {
+          key: item.key,
+          "data-index": item.index,
+          class: hoverIndex.value === item.index ? "hover" : "",
+          onPointerenter: getOnPointerEnter(item.index),
+          onPointerdown: () => {
+            var _a, _b;
+            (_b = (_a = host.value) == null ? void 0 : _a.querySelector(`[data-index="${item.index}"]`)) == null ? void 0 : _b.classList.add("active");
+          },
+          onPointerup: () => {
+            var _a, _b;
+            (_b = (_a = host.value) == null ? void 0 : _a.querySelector(`[data-index="${item.index}"]`)) == null ? void 0 : _b.classList.remove("active");
+            runByIndex(item.index);
+          }
+        },
+        /* @__PURE__ */ h(Icon, { icon: item.icon }),
+        /* @__PURE__ */ h("span", null, item.label)
+      )))))));
     };
-  }, [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);
@@ -540,7 +798,7 @@ var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Ca
 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"), member.set(obj, value), value);
-var _content$1, _slashProvider, _programmaticallyPos;
+var _content$1, _app$1, _filter, _slashProvider, _programmaticallyPos;
 const menu = slashFactory("CREPE_MENU");
 const menuAPI = $ctx(
   {
@@ -551,7 +809,6 @@ const menuAPI = $ctx(
   },
   "menuAPICtx"
 );
-defIfNotExists("milkdown-slash-menu", MenuElement);
 function configureMenu(ctx, config) {
   ctx.set(menu.key, {
     view: (view) => new MenuView(ctx, view, config)
@@ -560,6 +817,8 @@ function configureMenu(ctx, config) {
 class MenuView {
   constructor(ctx, view, config) {
     __privateAdd$1(this, _content$1);
+    __privateAdd$1(this, _app$1);
+    __privateAdd$1(this, _filter);
     __privateAdd$1(this, _slashProvider);
     __privateAdd$1(this, _programmaticallyPos, null);
     this.update = (view) => {
@@ -567,7 +826,7 @@ class MenuView {
     };
     this.show = (pos) => {
       __privateSet$1(this, _programmaticallyPos, pos);
-      __privateGet$1(this, _content$1).filter = "";
+      __privateGet$1(this, _filter).value = "";
       __privateGet$1(this, _slashProvider).show();
     };
     this.hide = () => {
@@ -576,12 +835,25 @@ class MenuView {
     };
     this.destroy = () => {
       __privateGet$1(this, _slashProvider).destroy();
+      __privateGet$1(this, _app$1).unmount();
       __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 content = document.createElement("div");
+    content.classList.add("milkdown-slash-menu");
+    const show = ref(false);
+    const filter = ref("");
+    __privateSet$1(this, _filter, filter);
+    const hide = this.hide;
+    const app = createApp(Menu, {
+      ctx,
+      config,
+      show,
+      filter,
+      hide
+    });
+    __privateSet$1(this, _app$1, app);
+    app.mount(content);
+    __privateSet$1(this, _content$1, content);
     const self = this;
     __privateSet$1(this, _slashProvider, new SlashProvider({
       content: __privateGet$1(this, _content$1),
@@ -598,7 +870,7 @@ class MenuView {
           return false;
         }
         const pos = __privateGet$1(self, _programmaticallyPos);
-        __privateGet$1(self, _content$1).filter = currentText.startsWith("/") ? currentText.slice(1) : currentText;
+        filter.value = 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);
@@ -612,10 +884,10 @@ class MenuView {
       offset: 10
     }));
     __privateGet$1(this, _slashProvider).onShow = () => {
-      __privateGet$1(this, _content$1).show = true;
+      show.value = true;
     };
     __privateGet$1(this, _slashProvider).onHide = () => {
-      __privateGet$1(this, _content$1).show = false;
+      show.value = false;
     };
     this.update(view);
     ctx.set(menuAPI.key, {
@@ -625,6 +897,8 @@ class MenuView {
   }
 }
 _content$1 = new WeakMap();
+_app$1 = new WeakMap();
+_filter = new WeakMap();
 _slashProvider = new WeakMap();
 _programmaticallyPos = new WeakMap();
 function isSelectionAtEndOfNode(selection) {
@@ -635,50 +909,48 @@ function isSelectionAtEndOfNode(selection) {
   return offset === parent.content.size;
 }
 
-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);
+const BlockHandle = defineComponent({
+  props: {
+    onAdd: {
+      type: Function,
+      required: true
+    },
+    addIcon: {
+      type: Function,
+      required: true
+    },
+    handleIcon: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const addButton = ref();
+    return () => {
+      return /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(
+        "div",
+        {
+          ref: addButton,
+          class: "operation-item",
+          onPointerdown: (e) => {
+            var _a;
+            e.preventDefault();
+            e.stopPropagation();
+            (_a = addButton.value) == null ? void 0 : _a.classList.add("active");
+          },
+          onPointerup: (e) => {
+            var _a;
+            e.preventDefault();
+            e.stopPropagation();
+            (_a = addButton.value) == null ? void 0 : _a.classList.remove("active");
+            props.onAdd();
+          }
+        },
+        /* @__PURE__ */ h(Icon, { icon: props.addIcon() })
+      ), /* @__PURE__ */ h("div", { class: "operation-item" }, /* @__PURE__ */ h(Icon, { icon: props.handleIcon() })));
+    };
+  }
+});
 
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -687,11 +959,12 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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"), member.set(obj, value), value);
-var _content, _provider, _ctx;
+var _content, _provider, _app, _ctx;
 class BlockHandleView {
   constructor(ctx, config) {
     __privateAdd(this, _content);
     __privateAdd(this, _provider);
+    __privateAdd(this, _app);
     __privateAdd(this, _ctx);
     this.update = () => {
       __privateGet(this, _provider).update();
@@ -699,6 +972,7 @@ class BlockHandleView {
     this.destroy = () => {
       __privateGet(this, _provider).destroy();
       __privateGet(this, _content).remove();
+      __privateGet(this, _app).unmount();
     };
     this.onAdd = () => {
       const ctx = __privateGet(this, _ctx);
@@ -715,12 +989,18 @@ class BlockHandleView {
       __privateGet(this, _provider).hide();
       ctx.get(menuAPI.key).show(tr.selection.from);
     };
+    var _a, _b;
     __privateSet(this, _ctx, ctx);
-    const content = new BlockHandleElement();
+    const content = document.createElement("div");
+    content.classList.add("milkdown-block-handle");
+    const app = createApp(BlockHandle, {
+      onAdd: this.onAdd,
+      addIcon: (_a = config == null ? void 0 : config.handleAddIcon) != null ? _a : () => plusIcon,
+      handleIcon: (_b = config == null ? void 0 : config.handleDragIcon) != null ? _b : () => menuIcon
+    });
+    app.mount(content);
+    __privateSet(this, _app, app);
     __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,
@@ -747,8 +1027,8 @@ class BlockHandleView {
 }
 _content = new WeakMap();
 _provider = new WeakMap();
+_app = new WeakMap();
 _ctx = new WeakMap();
-defIfNotExists("milkdown-block-handle", BlockHandleElement);
 function configureBlockHandle(ctx, config) {
   ctx.set(blockConfig.key, {
     filterNodes: (pos) => {
@@ -769,4 +1049,4 @@ const defineFeature = (editor, config) => {
 };
 
 export { defineFeature };
-//# sourceMappingURL=index-CEOsxgzJ.js.map
+//# sourceMappingURL=index-CM4urRY9.js.map