@milkdown/crepe 7.19.2 → 7.20.0

package/lib/esm/builder.js

@@ -1,16 +1,36 @@
+import { imageBlockConfig } from '@milkdown/kit/component/image-block';
 import { EditorStatus, editorViewCtx, Editor, rootCtx, defaultValueCtx, editorViewOptionsCtx } from '@milkdown/kit/core';
 import { clipboard } from '@milkdown/kit/plugin/clipboard';
 import { history } from '@milkdown/kit/plugin/history';
 import { indentConfig, indent } from '@milkdown/kit/plugin/indent';
 import { listenerCtx, listener } from '@milkdown/kit/plugin/listener';
 import { trailing } from '@milkdown/kit/plugin/trailing';
+import { uploadConfig, upload } from '@milkdown/kit/plugin/upload';
 import { commonmark } from '@milkdown/kit/preset/commonmark';
 import { gfm } from '@milkdown/kit/preset/gfm';
 import { getMarkdown } from '@milkdown/kit/utils';
 import { createSlice } from '@milkdown/kit/ctx';
 
+var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
+  CrepeFeature2["CodeMirror"] = "code-mirror";
+  CrepeFeature2["ListItem"] = "list-item";
+  CrepeFeature2["LinkTooltip"] = "link-tooltip";
+  CrepeFeature2["Cursor"] = "cursor";
+  CrepeFeature2["ImageBlock"] = "image-block";
+  CrepeFeature2["BlockEdit"] = "block-edit";
+  CrepeFeature2["Toolbar"] = "toolbar";
+  CrepeFeature2["Placeholder"] = "placeholder";
+  CrepeFeature2["Table"] = "table";
+  CrepeFeature2["Latex"] = "latex";
+  CrepeFeature2["TopBar"] = "top-bar";
+  return CrepeFeature2;
+})(CrepeFeature || {});
+
 const FeaturesCtx = createSlice([], "FeaturesCtx");
 const CrepeCtx = createSlice({}, "CrepeCtx");
+function useCrepeFeatures(ctx) {
+  return ctx.use("FeaturesCtx");
+}
 
 var __typeError = (msg) => {
   throw TypeError(msg);
@@ -90,7 +110,29 @@ class CrepeBuilder {
         ...value,
         size: 4
       }));
-    }).use(commonmark).use(listener).use(history).use(indent).use(trailing).use(clipboard).use(gfm));
+      ctx.update(uploadConfig.key, (prev) => ({
+        ...prev,
+        uploader: async (files, schema, ctx2) => {
+          const features = useCrepeFeatures(ctx2).get();
+          const hasImageBlock = features.includes(CrepeFeature.ImageBlock);
+          const nodeType = hasImageBlock ? schema.nodes["image-block"] : schema.nodes["image"];
+          if (!nodeType) return [];
+          const onUpload = hasImageBlock ? ctx2.get(imageBlockConfig.key).onUpload : void 0;
+          const images = [];
+          for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            if (file && file.type.includes("image")) images.push(file);
+          }
+          const nodes = await Promise.all(
+            images.map(async (file) => {
+              const src = onUpload ? await onUpload(file) : URL.createObjectURL(file);
+              return nodeType.createAndFill({ src });
+            })
+          );
+          return nodes;
+        }
+      }));
+    }).use(commonmark).use(listener).use(history).use(indent).use(trailing).use(clipboard).use(upload).use(gfm));
   }
   /// Get the milkdown editor instance.
   get editor() {

package/lib/esm/builder.js.map

@@ -1 +1 @@
-{"version":3,"file":"builder.js","sources":["../../src/core/slice.ts","../../src/core/builder.ts"],"sourcesContent":["import { createSlice, type Ctx } from '@milkdown/kit/ctx'\n\nimport type { CrepeFeature } from '../feature'\nimport type { CrepeBuilder } from './builder'\n\n/// @internal\n/// The feature flags context.\n/// ⚠️ Most of the time, you should use `useCrepeFeatures` to get the features.\nexport const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')\n\n/// @internal\n/// The crepe editor context.\n/// ⚠️ Most of the time, you should use `useCrepe` to get the crepe editor instance.\nexport const CrepeCtx = createSlice({} as CrepeBuilder, 'CrepeCtx')\n\n/// The crepe editor context.\n/// You can use this context to access the crepe editor instance within Milkdown plugins.\n/// ```ts\n/// import { crepeCtx } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n///   return () => {\n///     const crepe = useCrepe(ctx)\n///     crepe.setReadonly(true)\n///   }\n/// }\n/// ```\nexport function useCrepe(ctx: Ctx) {\n  // We should use string slice here to avoid the slice to be bundled in multiple entries\n  return ctx.get<CrepeBuilder, 'CrepeCtx'>('CrepeCtx')\n}\n\n/// Check the enabled FeatureFlags\n/// ```ts\n/// import { useCrepeFeatures } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n///   const features = useCrepeFeatures(ctx)\n///   if (features.get().includes(CrepeFeature.CodeMirror)) {\n///     // Do something with CodeMirror\n///   }\n/// }\nexport function useCrepeFeatures(ctx: Ctx) {\n  // We should use string slice here to avoid the slice to be bundled in multiple entries\n  return ctx.use<CrepeFeature[], 'FeaturesCtx'>('FeaturesCtx')\n}\n\n/// @internal\nexport function crepeFeatureConfig(feature: CrepeFeature) {\n  return (ctx: Ctx) => {\n    useCrepeFeatures(ctx).update((features) => {\n      if (features.includes(feature)) {\n        return features\n      }\n      return [...features, feature]\n    })\n  }\n}\n","import {\n  type DefaultValue,\n  defaultValueCtx,\n  Editor,\n  EditorStatus,\n  editorViewCtx,\n  editorViewOptionsCtx,\n  rootCtx,\n} from '@milkdown/kit/core'\nimport { clipboard } from '@milkdown/kit/plugin/clipboard'\nimport { history } from '@milkdown/kit/plugin/history'\nimport { indent, indentConfig } from '@milkdown/kit/plugin/indent'\nimport {\n  listener,\n  listenerCtx,\n  type ListenerManager,\n} from '@milkdown/kit/plugin/listener'\nimport { trailing } from '@milkdown/kit/plugin/trailing'\nimport { commonmark } from '@milkdown/kit/preset/commonmark'\nimport { gfm } from '@milkdown/kit/preset/gfm'\nimport { getMarkdown } from '@milkdown/kit/utils'\n\nimport type { CrepeFeature, CrepeFeatureConfig } from '../feature'\nimport type { DefineFeature } from '../feature/shared'\n\nimport { CrepeCtx, FeaturesCtx } from './slice'\n\n/// The crepe builder configuration.\nexport interface CrepeBuilderConfig {\n  /// The root element for the editor.\n  /// Supports both DOM nodes and CSS selectors,\n  /// If not provided, the editor will be appended to the body.\n  root?: Node | string | null\n\n  /// The default value for the editor.\n  defaultValue?: DefaultValue\n}\n\n/// The crepe builder class.\n/// This class allows users to manually add features to the editor.\nexport class CrepeBuilder {\n  /// @internal\n  readonly #editor: Editor\n\n  /// @internal\n  readonly #rootElement: Node\n\n  /// @internal\n  #editable = true\n\n  /// The constructor of the crepe builder.\n  /// You can pass configs to the builder to configure the editor.\n  constructor({ root, defaultValue = '' }: CrepeBuilderConfig = {}) {\n    this.#rootElement =\n      (typeof root === 'string' ? document.querySelector(root) : root) ??\n      document.body\n    this.#editor = Editor.make()\n      .config((ctx) => {\n        ctx.inject(CrepeCtx, this)\n        ctx.inject(FeaturesCtx, [])\n      })\n      .config((ctx) => {\n        ctx.set(rootCtx, this.#rootElement)\n        ctx.set(defaultValueCtx, defaultValue)\n        ctx.set(editorViewOptionsCtx, {\n          editable: () => this.#editable,\n        })\n        ctx.update(indentConfig.key, (value) => ({\n          ...value,\n          size: 4,\n        }))\n      })\n      .use(commonmark)\n      .use(listener)\n      .use(history)\n      .use(indent)\n      .use(trailing)\n      .use(clipboard)\n      .use(gfm)\n  }\n\n  /// Add a feature to the editor.\n  addFeature: {\n    <T extends CrepeFeature>(\n      feature: DefineFeature<CrepeFeatureConfig[T]>,\n      config?: CrepeFeatureConfig[T]\n    ): CrepeBuilder\n    <C>(feature: DefineFeature<C>, config?: C): CrepeBuilder\n  } = (feature: DefineFeature, config?: never) => {\n    feature(this.#editor, config)\n    return this\n  }\n\n  /// Create the editor.\n  create = () => {\n    return this.#editor.create()\n  }\n\n  /// Destroy the editor.\n  destroy = () => {\n    return this.#editor.destroy()\n  }\n\n  /// Get the milkdown editor instance.\n  get editor(): Editor {\n    return this.#editor\n  }\n\n  /// Get the readonly state of the editor.\n  get readonly() {\n    return !this.#editable\n  }\n\n  /// Set the readonly mode of the editor.\n  setReadonly = (value: boolean) => {\n    this.#editable = !value\n    this.#editor.action((ctx) => {\n      if (this.#editor.status === EditorStatus.Created) {\n        const view = ctx.get(editorViewCtx)\n        view.setProps({\n          editable: () => !value,\n        })\n      }\n    })\n    return this\n  }\n\n  /// Get the markdown content of the editor.\n  getMarkdown = () => {\n    return this.#editor.action(getMarkdown())\n  }\n\n  /// Register event listeners.\n  on = (fn: (api: ListenerManager) => void) => {\n    if (this.#editor.status !== EditorStatus.Created) {\n      this.#editor.config((ctx) => {\n        const listener = ctx.get(listenerCtx)\n        fn(listener)\n      })\n      return this\n    }\n    this.#editor.action((ctx) => {\n      const listener = ctx.get(listenerCtx)\n      fn(listener)\n    })\n    return this\n  }\n}\n"],"names":["listener"],"mappings":"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"}
+{"version":3,"file":"builder.js","sources":["../../src/feature/index.ts","../../src/core/slice.ts","../../src/core/builder.ts"],"sourcesContent":["import type { BlockEditFeatureConfig } from './block-edit'\nimport type { CodeMirrorFeatureConfig } from './code-mirror'\nimport type { CursorFeatureConfig } from './cursor'\nimport type { ImageBlockFeatureConfig } from './image-block'\nimport type { LatexFeatureConfig } from './latex'\nimport type { LinkTooltipFeatureConfig } from './link-tooltip'\nimport type { ListItemFeatureConfig } from './list-item'\nimport type { PlaceholderFeatureConfig } from './placeholder'\nimport type { TableFeatureConfig } from './table'\nimport type { ToolbarFeatureConfig } from './toolbar'\nimport type { TopBarFeatureConfig } from './top-bar'\n\n/// The crepe editor feature flags.\n/// Every feature is enabled by default.\n/// Every feature is a string literal type.\nexport enum CrepeFeature {\n  /// Syntax highlighting and editing for code blocks with language support, theme customization, and preview capabilities.\n  CodeMirror = 'code-mirror',\n\n  /// Support for bullet lists, ordered lists, and todo lists with customizable icons and formatting.\n  ListItem = 'list-item',\n\n  /// Enhanced link editing and preview with customizable tooltips, edit/remove actions, and copy functionality.\n  LinkTooltip = 'link-tooltip',\n\n  /// Enhanced cursor experience with drop cursor and gap cursor for better content placement.\n  Cursor = 'cursor',\n\n  /// Image upload and management with resizing, captions, and support for both inline and block images.\n  ImageBlock = 'image-block',\n\n  /// Drag-and-drop block management and slash commands for quick content insertion and organization.\n  BlockEdit = 'block-edit',\n\n  /// Formatting toolbar for selected text with customizable icons and actions.\n  Toolbar = 'toolbar',\n\n  /// Document or block level placeholders to guide users when content is empty.\n  Placeholder = 'placeholder',\n\n  /// Full-featured table editing with row/column management, alignment options, and drag-and-drop functionality.\n  Table = 'table',\n\n  /// Mathematical formula support with both inline and block math rendering using KaTeX.\n  Latex = 'latex',\n\n  /// Fixed top toolbar with heading selector, formatting buttons, insert actions, and block commands.\n  TopBar = 'top-bar',\n}\n\nexport interface CrepeFeatureConfig {\n  [CrepeFeature.Cursor]?: CursorFeatureConfig\n  [CrepeFeature.ListItem]?: ListItemFeatureConfig\n  [CrepeFeature.LinkTooltip]?: LinkTooltipFeatureConfig\n  [CrepeFeature.ImageBlock]?: ImageBlockFeatureConfig\n  [CrepeFeature.BlockEdit]?: BlockEditFeatureConfig\n  [CrepeFeature.Placeholder]?: PlaceholderFeatureConfig\n  [CrepeFeature.Toolbar]?: ToolbarFeatureConfig\n  [CrepeFeature.CodeMirror]?: CodeMirrorFeatureConfig\n  [CrepeFeature.Table]?: TableFeatureConfig\n  [CrepeFeature.Latex]?: LatexFeatureConfig\n  [CrepeFeature.TopBar]?: TopBarFeatureConfig\n}\n\nexport const defaultFeatures: Record<CrepeFeature, boolean> = {\n  [CrepeFeature.Cursor]: true,\n  [CrepeFeature.ListItem]: true,\n  [CrepeFeature.LinkTooltip]: true,\n  [CrepeFeature.ImageBlock]: true,\n  [CrepeFeature.BlockEdit]: true,\n  [CrepeFeature.Placeholder]: true,\n  [CrepeFeature.Toolbar]: true,\n  [CrepeFeature.CodeMirror]: true,\n  [CrepeFeature.Table]: true,\n  [CrepeFeature.Latex]: true,\n  [CrepeFeature.TopBar]: false,\n}\n","import { createSlice, type Ctx } from '@milkdown/kit/ctx'\n\nimport type { CrepeFeature } from '../feature'\nimport type { CrepeBuilder } from './builder'\n\n/// @internal\n/// The feature flags context.\n/// ⚠️ Most of the time, you should use `useCrepeFeatures` to get the features.\nexport const FeaturesCtx = createSlice([] as CrepeFeature[], 'FeaturesCtx')\n\n/// @internal\n/// The crepe editor context.\n/// ⚠️ Most of the time, you should use `useCrepe` to get the crepe editor instance.\nexport const CrepeCtx = createSlice({} as CrepeBuilder, 'CrepeCtx')\n\n/// The crepe editor context.\n/// You can use this context to access the crepe editor instance within Milkdown plugins.\n/// ```ts\n/// import { crepeCtx } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n///   return () => {\n///     const crepe = useCrepe(ctx)\n///     crepe.setReadonly(true)\n///   }\n/// }\n/// ```\nexport function useCrepe(ctx: Ctx) {\n  // We should use string slice here to avoid the slice to be bundled in multiple entries\n  return ctx.get<CrepeBuilder, 'CrepeCtx'>('CrepeCtx')\n}\n\n/// Check the enabled FeatureFlags\n/// ```ts\n/// import { useCrepeFeatures } from '@milkdown/crepe'\n/// const plugin = (ctx: Ctx) => {\n///   const features = useCrepeFeatures(ctx)\n///   if (features.get().includes(CrepeFeature.CodeMirror)) {\n///     // Do something with CodeMirror\n///   }\n/// }\nexport function useCrepeFeatures(ctx: Ctx) {\n  // We should use string slice here to avoid the slice to be bundled in multiple entries\n  return ctx.use<CrepeFeature[], 'FeaturesCtx'>('FeaturesCtx')\n}\n\n/// @internal\nexport function crepeFeatureConfig(feature: CrepeFeature) {\n  return (ctx: Ctx) => {\n    useCrepeFeatures(ctx).update((features) => {\n      if (features.includes(feature)) {\n        return features\n      }\n      return [...features, feature]\n    })\n  }\n}\n","import { imageBlockConfig } from '@milkdown/kit/component/image-block'\nimport {\n  type DefaultValue,\n  defaultValueCtx,\n  Editor,\n  EditorStatus,\n  editorViewCtx,\n  editorViewOptionsCtx,\n  rootCtx,\n} from '@milkdown/kit/core'\nimport { clipboard } from '@milkdown/kit/plugin/clipboard'\nimport { history } from '@milkdown/kit/plugin/history'\nimport { indent, indentConfig } from '@milkdown/kit/plugin/indent'\nimport {\n  listener,\n  listenerCtx,\n  type ListenerManager,\n} from '@milkdown/kit/plugin/listener'\nimport { trailing } from '@milkdown/kit/plugin/trailing'\nimport { upload, uploadConfig } from '@milkdown/kit/plugin/upload'\nimport { commonmark } from '@milkdown/kit/preset/commonmark'\nimport { gfm } from '@milkdown/kit/preset/gfm'\nimport { getMarkdown } from '@milkdown/kit/utils'\n\nimport type { CrepeFeatureConfig } from '../feature'\nimport type { DefineFeature } from '../feature/shared'\n\nimport { CrepeFeature } from '../feature'\nimport { CrepeCtx, FeaturesCtx, useCrepeFeatures } from './slice'\n\n/// The crepe builder configuration.\nexport interface CrepeBuilderConfig {\n  /// The root element for the editor.\n  /// Supports both DOM nodes and CSS selectors,\n  /// If not provided, the editor will be appended to the body.\n  root?: Node | string | null\n\n  /// The default value for the editor.\n  defaultValue?: DefaultValue\n}\n\n/// The crepe builder class.\n/// This class allows users to manually add features to the editor.\nexport class CrepeBuilder {\n  /// @internal\n  readonly #editor: Editor\n\n  /// @internal\n  readonly #rootElement: Node\n\n  /// @internal\n  #editable = true\n\n  /// The constructor of the crepe builder.\n  /// You can pass configs to the builder to configure the editor.\n  constructor({ root, defaultValue = '' }: CrepeBuilderConfig = {}) {\n    this.#rootElement =\n      (typeof root === 'string' ? document.querySelector(root) : root) ??\n      document.body\n    this.#editor = Editor.make()\n      .config((ctx) => {\n        ctx.inject(CrepeCtx, this)\n        ctx.inject(FeaturesCtx, [])\n      })\n      .config((ctx) => {\n        ctx.set(rootCtx, this.#rootElement)\n        ctx.set(defaultValueCtx, defaultValue)\n        ctx.set(editorViewOptionsCtx, {\n          editable: () => this.#editable,\n        })\n        ctx.update(indentConfig.key, (value) => ({\n          ...value,\n          size: 4,\n        }))\n        ctx.update(uploadConfig.key, (prev) => ({\n          ...prev,\n          uploader: async (files, schema, ctx) => {\n            const features = useCrepeFeatures(ctx).get()\n            const hasImageBlock = features.includes(CrepeFeature.ImageBlock)\n            const nodeType = hasImageBlock\n              ? schema.nodes['image-block']\n              : schema.nodes['image']\n\n            if (!nodeType) return []\n\n            const onUpload = hasImageBlock\n              ? ctx.get(imageBlockConfig.key).onUpload\n              : undefined\n\n            const images: File[] = []\n            for (let i = 0; i < files.length; i++) {\n              const file = files.item(i)\n              if (file && file.type.includes('image')) images.push(file)\n            }\n\n            const nodes = await Promise.all(\n              images.map(async (file) => {\n                const src = onUpload\n                  ? await onUpload(file)\n                  : URL.createObjectURL(file)\n                return nodeType.createAndFill({ src })!\n              })\n            )\n\n            return nodes\n          },\n        }))\n      })\n      .use(commonmark)\n      .use(listener)\n      .use(history)\n      .use(indent)\n      .use(trailing)\n      .use(clipboard)\n      .use(upload)\n      .use(gfm)\n  }\n\n  /// Add a feature to the editor.\n  addFeature: {\n    <T extends CrepeFeature>(\n      feature: DefineFeature<CrepeFeatureConfig[T]>,\n      config?: CrepeFeatureConfig[T]\n    ): CrepeBuilder\n    <C>(feature: DefineFeature<C>, config?: C): CrepeBuilder\n  } = (feature: DefineFeature, config?: never) => {\n    feature(this.#editor, config)\n    return this\n  }\n\n  /// Create the editor.\n  create = () => {\n    return this.#editor.create()\n  }\n\n  /// Destroy the editor.\n  destroy = () => {\n    return this.#editor.destroy()\n  }\n\n  /// Get the milkdown editor instance.\n  get editor(): Editor {\n    return this.#editor\n  }\n\n  /// Get the readonly state of the editor.\n  get readonly() {\n    return !this.#editable\n  }\n\n  /// Set the readonly mode of the editor.\n  setReadonly = (value: boolean) => {\n    this.#editable = !value\n    this.#editor.action((ctx) => {\n      if (this.#editor.status === EditorStatus.Created) {\n        const view = ctx.get(editorViewCtx)\n        view.setProps({\n          editable: () => !value,\n        })\n      }\n    })\n    return this\n  }\n\n  /// Get the markdown content of the editor.\n  getMarkdown = () => {\n    return this.#editor.action(getMarkdown())\n  }\n\n  /// Register event listeners.\n  on = (fn: (api: ListenerManager) => void) => {\n    if (this.#editor.status !== EditorStatus.Created) {\n      this.#editor.config((ctx) => {\n        const listener = ctx.get(listenerCtx)\n        fn(listener)\n      })\n      return this\n    }\n    this.#editor.action((ctx) => {\n      const listener = ctx.get(listenerCtx)\n      fn(listener)\n    })\n    return this\n  }\n}\n"],"names":["CrepeFeature","listener","ctx"],"mappings":"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"}

package/lib/esm/feature/block-edit/index.js

@@ -38,6 +38,7 @@ var CrepeFeature = /* @__PURE__ */ ((CrepeFeature2) => {
   CrepeFeature2["Placeholder"] = "placeholder";
   CrepeFeature2["Table"] = "table";
   CrepeFeature2["Latex"] = "latex";
+  CrepeFeature2["TopBar"] = "top-bar";
   return CrepeFeature2;
 })(CrepeFeature || {});
 
@@ -453,6 +454,9 @@ class GroupBuilder {
 _groups = new WeakMap();
 _getGroupInstance = new WeakMap();
 
+function keepAlive(..._args) {
+}
+
 function getGroups(filter, config, ctx) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb;
   const flags = ctx && useCrepeFeatures(ctx).get();
@@ -720,7 +724,7 @@ function getGroups(filter, config, ctx) {
           commands.call(clearTextInCurrentBlockCommand.key);
           commands.call(addBlockTypeCommand.key, {
             nodeType: codeBlock,
-            attrs: { language: "LaTex" }
+            attrs: { language: "LaTeX" }
           });
         }
       });
@@ -756,6 +760,7 @@ function getGroups(filter, config, ctx) {
   };
 }
 
+keepAlive(h);
 const Menu = defineComponent({
   props: {
     ctx: {
@@ -810,7 +815,7 @@ const Menu = defineComponent({
     };
     const runByIndex = (index) => {
       const item = groupInfo.value.groups.flatMap((group) => group.items).at(index);
-      if (item && ctx) item.onRun(ctx);
+      if ((item == null ? void 0 : item.onRun) && ctx) item.onRun(ctx);
       hide();
     };
     const onKeydown = (e) => {
@@ -1034,6 +1039,7 @@ function isSelectionAtEndOfNode(selection) {
   return offset === parent.content.size;
 }
 
+keepAlive(h, Fragment);
 const BlockHandle = defineComponent({
   props: {
     onAdd: {