@milkdown/plugin-slash 5.5.0 → 6.0.0-next.0

package/lib/{src/config.d.ts → config.d.ts}

@@ -1,3 +1,4 @@
+/// <reference types="prosemirror-model" />
 import { Ctx } from '@milkdown/core';
 import { EditorState, Node } from '@milkdown/prose';
 import { WrappedAction } from './item';

package/lib/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":";AACA,OAAO,EAAe,GAAG,EAA8B,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGvC,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAExC,oBAAY,YAAY,GAAG;IACvB,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;CACvC,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,IAAI,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,CAAC,MAAM,EAAE,yBAAyB,KAAK,QAAQ,CAAC,YAAY,CAAC,CAAC;AAEhG,oBAAY,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,CAAC;AAEvD,eAAO,MAAM,cAAc,QAAS,GAAG,qBAAgB,aAAa,EAuFnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAqB3B,CAAC"}

package/lib/index.d.ts

@@ -1 +1,25 @@
-export * from './src/index'
+import { AtomList } from '@milkdown/utils';
+import type { Config } from './config';
+export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';
+export { defaultActions, defaultConfig } from './config';
+export { createDropdownItem } from './utility';
+export declare type Options = {
+    config: Config;
+};
+export declare const slashPlugin: import("@milkdown/utils/lib/types").WithExtend<string, Options, {
+    [x: string]: import("prosemirror-model").NodeType<any>;
+} & {
+    [x: string]: import("prosemirror-model").MarkType<any>;
+}, {
+    schema?: ((ctx: import("@milkdown/core").Ctx) => {
+        node?: Record<string, import("@milkdown/core").NodeSchema> | undefined;
+        mark?: Record<string, import("@milkdown/core").MarkSchema> | undefined;
+    }) | undefined;
+    view?: ((ctx: import("@milkdown/core").Ctx) => Partial<{
+        [x: string]: import("@milkdown/prose").NodeViewFactory;
+    } & {
+        [x: string]: import("@milkdown/prose").MarkViewFactory;
+    }>) | undefined;
+}>;
+export declare const slash: AtomList<import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, Options>> & import("@milkdown/core").MilkdownPlugin>;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAgB,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIvC,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,oBAAY,OAAO,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAYtB,CAAC;AAEH,eAAO,MAAM,KAAK,kKAAmC,CAAC"}

package/lib/index.es.js

@@ -14,22 +14,23 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { createPlugin, AtomList } from "@milkdown/utils";
-import { schemaCtx, themeToolCtx, commandsCtx } from "@milkdown/core";
+import { ThemeSize, ThemeColor, ThemeBorder, ThemeShadow, ThemeScrollbar, ThemeFont, ThemeIcon, schemaCtx, themeManagerCtx, commandsCtx } from "@milkdown/core";
 import { findParentNode, DecorationSet, Decoration, calculateNodePosition, Plugin, PluginKey } from "@milkdown/prose";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
-const itemStyle = ({ font, palette }, { css }) => {
+const itemStyle = (themeManager, { css }) => {
+  const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
   return css`
         .slash-dropdown-item {
             display: flex;
-            gap: 2rem;
-            height: 3rem;
-            padding: 0 1rem;
+            gap: 2em;
+            height: 3.4286em;
+            padding: 0 1em;
             align-items: center;
             justify-content: flex-start;
             cursor: pointer;
-            line-height: 2;
-            font-family: ${font.typography};
-            font-size: 0.875rem;
+            line-height: 3.4286em;
+            font-family: ${themeManager.get(ThemeFont, "typography")};
+            font-size: 0.875em;
 
             transition: all 0.2s ease-in-out;
 
@@ -52,52 +53,54 @@ const itemStyle = ({ font, palette }, { css }) => {
             }
             `;
 };
-const injectStyle = (themeTool, emotion) => {
-  var _a, _b, _c;
-  const { mixin, size, palette } = themeTool;
-  const style = emotion.css`
-        width: 20.5rem;
-        max-height: 20.5rem;
+const injectStyle = (themeManager, emotion) => {
+  const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+  return emotion.css`
+        width: 20.5em;
+        max-height: 20.5em;
         overflow-y: auto;
-        ${(_a = mixin.border) == null ? void 0 : _a.call(mixin)};
-        border-radius: ${size.radius};
+        border-radius: ${themeManager.get(ThemeSize, "radius")};
         position: absolute;
         background: ${palette("surface")};
 
-        ${(_b = mixin.shadow) == null ? void 0 : _b.call(mixin)};
+        ${themeManager.get(ThemeBorder, void 0)}
+        ${themeManager.get(ThemeShadow, void 0)}
+        ${themeManager.get(ThemeScrollbar, void 0)}
 
         &.hide {
             display: none;
         }
 
-        ${(_c = mixin.scrollbar) == null ? void 0 : _c.call(mixin)};
-
-        ${itemStyle(themeTool, emotion)}
+        ${itemStyle(themeManager, emotion)}
     `;
-  return style;
 };
 const createDropdown = (utils) => {
   const div = document.createElement("div");
   div.setAttribute("role", "listbox");
   div.setAttribute("tabindex", "-1");
-  const style = utils.getStyle(injectStyle);
-  if (style) {
-    div.classList.add(style);
-  }
+  utils.themeManager.onFlush(() => {
+    const style = utils.getStyle(injectStyle);
+    if (style) {
+      div.classList.add(style);
+    }
+  });
   div.classList.add("slash-dropdown", "hide");
   return div;
 };
-const createDropdownItem = (themeTool, text, icon, options) => {
+const createDropdownItem = (themeManager, text, icon, options) => {
   var _a;
   const textClassName = (_a = options == null ? void 0 : options.textClassName) != null ? _a : "text";
   const div = document.createElement("div");
   div.setAttribute("role", "option");
   div.classList.add("slash-dropdown-item");
-  const iconSpan = themeTool.slots.icon(icon);
+  const iconSpan = themeManager.get(ThemeIcon, icon);
+  if (!iconSpan) {
+    throw new Error("icon not found");
+  }
   const textSpan = document.createElement("span");
   textSpan.textContent = text;
   textSpan.className = textClassName;
-  div.appendChild(iconSpan);
+  div.appendChild(iconSpan.dom);
   div.appendChild(textSpan);
   return div;
 };
@@ -120,77 +123,77 @@ const defaultActions = (ctx, input = "/") => {
   const actions = [
     {
       id: "h1",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Large Heading", "h1"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Large Heading", "h1"),
       command: () => ctx.get(commandsCtx).callByName("TurnIntoHeading", 1),
       keyword: ["h1", "large heading"],
       typeName: "heading"
     },
     {
       id: "h2",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Medium Heading", "h2"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Medium Heading", "h2"),
       command: () => ctx.get(commandsCtx).callByName("TurnIntoHeading", 2),
       keyword: ["h2", "medium heading"],
       typeName: "heading"
     },
     {
       id: "h3",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Small Heading", "h3"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Small Heading", "h3"),
       command: () => ctx.get(commandsCtx).callByName("TurnIntoHeading", 3),
       keyword: ["h3", "small heading"],
       typeName: "heading"
     },
     {
       id: "bulletList",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Bullet List", "bulletList"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Bullet List", "bulletList"),
       command: () => ctx.get(commandsCtx).callByName("WrapInBulletList"),
       keyword: ["bullet list", "ul"],
       typeName: "bullet_list"
     },
     {
       id: "orderedList",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Ordered List", "orderedList"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Ordered List", "orderedList"),
       command: () => ctx.get(commandsCtx).callByName("WrapInOrderedList"),
       keyword: ["ordered list", "ol"],
       typeName: "ordered_list"
     },
     {
       id: "taskList",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Task List", "taskList"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Task List", "taskList"),
       command: () => ctx.get(commandsCtx).callByName("TurnIntoTaskList"),
       keyword: ["task list", "task"],
       typeName: "task_list_item"
     },
     {
       id: "image",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Image", "image"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Image", "image"),
       command: () => ctx.get(commandsCtx).callByName("InsertImage"),
       keyword: ["image"],
       typeName: "image"
     },
     {
       id: "blockquote",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Quote", "quote"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Quote", "quote"),
       command: () => ctx.get(commandsCtx).callByName("WrapInBlockquote"),
       keyword: ["quote", "blockquote"],
       typeName: "blockquote"
     },
     {
       id: "table",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Table", "table"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Table", "table"),
       command: () => ctx.get(commandsCtx).callByName("InsertTable"),
       keyword: ["table"],
       typeName: "table"
     },
     {
       id: "code",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Code Fence", "code"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Code Fence", "code"),
       command: () => ctx.get(commandsCtx).callByName("TurnIntoCodeFence"),
       keyword: ["code"],
       typeName: "fence"
     },
     {
       id: "divider",
-      dom: createDropdownItem(ctx.get(themeToolCtx), "Divide Line", "divider"),
+      dom: createDropdownItem(ctx.get(themeManagerCtx), "Divide Line", "divider"),
       command: () => ctx.get(commandsCtx).callByName("InsertHr"),
       keyword: ["divider", "hr"],
       typeName: "hr"
@@ -220,28 +223,30 @@ const defaultConfig = (ctx) => {
     return null;
   };
 };
-const createEmptyStyle = ({ font, palette }, { css }) => css`
-    position: relative;
-    &::before {
-        position: absolute;
-        cursor: text;
-        font-family: ${font.typography};
-        font-size: 0.875rem;
-        color: ${palette("neutral", 0.6)};
-        content: attr(data-text);
-        height: 100%;
-        display: flex;
-        align-items: center;
-    }
-`;
+const createEmptyStyle = (themeManager, { css }) => {
+  const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+  const typography = themeManager.get(ThemeFont, "typography");
+  return css`
+        position: relative;
+        &::before {
+            position: absolute;
+            cursor: text;
+            font-family: ${typography};
+            font-size: 0.875em;
+            color: ${palette("neutral", 0.6)};
+            content: attr(data-text);
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+    `;
+};
 const createSlashStyle = (_, { css }) => css`
     &::before {
-        left: 0.5rem;
+        left: 0.5em;
     }
 `;
 const createProps = (status, utils) => {
-  const emptyStyle = utils.getStyle(createEmptyStyle);
-  const slashStyle = utils.getStyle(createSlashStyle);
   return {
     handleKeyDown: (_, event) => {
       if (status.isEmpty()) {
@@ -285,6 +290,8 @@ const createProps = (status, utils) => {
           })
         ]);
       };
+      const emptyStyle = utils.getStyle(createEmptyStyle);
+      const slashStyle = utils.getStyle(createSlashStyle);
       if (actions.length) {
         return createDecoration(placeholder, [emptyStyle, slashStyle, "empty-node", "is-slash"]);
       }
@@ -331,7 +338,9 @@ const renderDropdown = (status, dropdownElement, listeners) => {
     child.removeEventListener("mouseenter", listeners.mouseEnter);
     child.removeEventListener("mouseleave", listeners.mouseLeave);
   });
-  dropdownElement.textContent = "";
+  while (dropdownElement.firstChild) {
+    dropdownElement.firstChild.remove();
+  }
   actions.forEach(({ $ }) => {
     $.classList.remove("active");
     $.addEventListener("mouseenter", listeners.mouseEnter);
@@ -471,7 +480,7 @@ const calculatePosition = (view, dropdownElement) => {
     if (left < 0) {
       left = 0;
     }
-    if (window.innerHeight - selected.bottom < target.height) {
+    if (parent.height + parent.top - selected.bottom < target.height) {
       top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
     }
     return [top, left];

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/style.ts","../src/utility.ts","../src/config.ts","../src/prose-plugin/props.ts","../src/item.ts","../src/prose-plugin/status.ts","../src/prose-plugin/dropdown.ts","../src/prose-plugin/input.ts","../src/prose-plugin/view.ts","../src/prose-plugin/index.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { Emotion, ThemeTool } from '@milkdown/core';\n\nconst itemStyle = ({ font, palette }: ThemeTool, { css }: Emotion) => {\n    return css`\n        .slash-dropdown-item {\n            display: flex;\n            gap: 2rem;\n            height: 3rem;\n            padding: 0 1rem;\n            align-items: center;\n            justify-content: flex-start;\n            cursor: pointer;\n            line-height: 2;\n            font-family: ${font.typography};\n            font-size: 0.875rem;\n\n            transition: all 0.2s ease-in-out;\n\n            &,\n            .icon {\n                color: ${palette('neutral', 0.87)};\n                transition: all 0.2s ease-in-out;\n            }\n\n            &.hide {\n                display: none;\n            }\n\n            &.active {\n                background: ${palette('secondary', 0.12)};\n                &,\n                .icon {\n                    color: ${palette('primary')};\n                }\n            }\n            `;\n};\n\nexport const injectStyle = (themeTool: ThemeTool, emotion: Emotion) => {\n    const { mixin, size, palette } = themeTool;\n    const style = emotion.css`\n        width: 20.5rem;\n        max-height: 20.5rem;\n        overflow-y: auto;\n        ${mixin.border?.()};\n        border-radius: ${size.radius};\n        position: absolute;\n        background: ${palette('surface')};\n\n        ${mixin.shadow?.()};\n\n        &.hide {\n            display: none;\n        }\n\n        ${mixin.scrollbar?.()};\n\n        ${itemStyle(themeTool, emotion)}\n    `;\n    return style;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { ThemeTool } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport type { Command, Node } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport { injectStyle } from './style';\n\nexport const createDropdown = (utils: Utils) => {\n    const div = document.createElement('div');\n    div.setAttribute('role', 'listbox');\n    div.setAttribute('tabindex', '-1');\n    const style = utils.getStyle(injectStyle);\n\n    if (style) {\n        div.classList.add(style);\n    }\n\n    div.classList.add('slash-dropdown', 'hide');\n\n    return div;\n};\n\ntype ItemOptions = {\n    textClassName: string;\n};\nexport const createDropdownItem = (themeTool: ThemeTool, text: string, icon: Icon, options?: Partial<ItemOptions>) => {\n    const textClassName = options?.textClassName ?? 'text';\n\n    const div = document.createElement('div');\n    div.setAttribute('role', 'option');\n    div.classList.add('slash-dropdown-item');\n\n    const iconSpan = themeTool.slots.icon(icon);\n\n    const textSpan = document.createElement('span');\n    textSpan.textContent = text;\n    textSpan.className = textClassName;\n\n    div.appendChild(iconSpan);\n    div.appendChild(textSpan);\n\n    return div;\n};\n\nexport const getDepth = (node: Node) => {\n    let cur = node;\n    let depth = 0;\n    while (cur.childCount) {\n        cur = cur.child(0);\n        depth += 1;\n    }\n\n    return depth;\n};\n\nconst cleanUp: Command = (state, dispatch) => {\n    const { selection } = state;\n    const { $from } = selection;\n    const tr = state.tr.deleteRange($from.start(), $from.pos);\n    dispatch?.(tr);\n    return false;\n};\n\nexport const cleanUpAndCreateNode =\n    (createCommand: () => void): Command =>\n    (state, dispatch, view) => {\n        if (view) {\n            cleanUp(state, dispatch, view);\n            createCommand();\n        }\n        return true;\n    };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, schemaCtx, themeToolCtx } from '@milkdown/core';\nimport { EditorState, Node } from '@milkdown/prose';\n\nimport { WrappedAction } from './item';\nimport { createDropdownItem } from './utility';\n\ntype Nullable<T> = T | null | undefined;\n\nexport type StatusConfig = {\n    placeholder?: Nullable<string>;\n    actions?: Nullable<WrappedAction[]>;\n};\n\nexport type StatusConfigBuilderParams = {\n    content: string;\n    isTopLevel: boolean;\n    parentNode: Node;\n    state: EditorState;\n};\n\nexport type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>;\n\nexport type Config = (ctx: Ctx) => StatusConfigBuilder;\n\nexport const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {\n    const { nodes } = ctx.get(schemaCtx);\n    const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [\n        {\n            id: 'h1',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Large Heading', 'h1'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 1),\n            keyword: ['h1', 'large heading'],\n            typeName: 'heading',\n        },\n        {\n            id: 'h2',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Medium Heading', 'h2'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 2),\n            keyword: ['h2', 'medium heading'],\n            typeName: 'heading',\n        },\n        {\n            id: 'h3',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Small Heading', 'h3'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 3),\n            keyword: ['h3', 'small heading'],\n            typeName: 'heading',\n        },\n        {\n            id: 'bulletList',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Bullet List', 'bulletList'),\n            command: () => ctx.get(commandsCtx).callByName('WrapInBulletList'),\n            keyword: ['bullet list', 'ul'],\n            typeName: 'bullet_list',\n        },\n        {\n            id: 'orderedList',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Ordered List', 'orderedList'),\n            command: () => ctx.get(commandsCtx).callByName('WrapInOrderedList'),\n            keyword: ['ordered list', 'ol'],\n            typeName: 'ordered_list',\n        },\n        {\n            id: 'taskList',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Task List', 'taskList'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoTaskList'),\n            keyword: ['task list', 'task'],\n            typeName: 'task_list_item',\n        },\n        {\n            id: 'image',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Image', 'image'),\n            command: () => ctx.get(commandsCtx).callByName('InsertImage'),\n            keyword: ['image'],\n            typeName: 'image',\n        },\n        {\n            id: 'blockquote',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Quote', 'quote'),\n            command: () => ctx.get(commandsCtx).callByName('WrapInBlockquote'),\n            keyword: ['quote', 'blockquote'],\n            typeName: 'blockquote',\n        },\n        {\n            id: 'table',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Table', 'table'),\n            command: () => ctx.get(commandsCtx).callByName('InsertTable'),\n            keyword: ['table'],\n            typeName: 'table',\n        },\n        {\n            id: 'code',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Code Fence', 'code'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoCodeFence'),\n            keyword: ['code'],\n            typeName: 'fence',\n        },\n        {\n            id: 'divider',\n            dom: createDropdownItem(ctx.get(themeToolCtx), 'Divide Line', 'divider'),\n            command: () => ctx.get(commandsCtx).callByName('InsertHr'),\n            keyword: ['divider', 'hr'],\n            typeName: 'hr',\n        },\n    ];\n\n    const userInput = input.slice(1).toLocaleLowerCase();\n\n    return actions\n        .filter((action) => !!nodes[action.typeName] && action.keyword.some((keyword) => keyword.includes(userInput)))\n        .map(({ keyword, typeName, ...action }) => action);\n};\n\nexport const defaultConfig: Config = (ctx) => {\n    return ({ content, isTopLevel }) => {\n        if (!isTopLevel) return null;\n\n        if (!content) {\n            return { placeholder: 'Type / to use the slash commands...' };\n        }\n\n        if (content.startsWith('/')) {\n            return content === '/'\n                ? {\n                      placeholder: 'Type to filter...',\n                      actions: defaultActions(ctx),\n                  }\n                : {\n                      actions: defaultActions(ctx, content),\n                  };\n        }\n\n        return null;\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Emotion, ThemeTool } from '@milkdown/core';\nimport { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { Status } from './status';\n\nexport type Props = ReturnType<typeof createProps>;\n\nconst createEmptyStyle = ({ font, palette }: ThemeTool, { css }: Emotion) => css`\n    position: relative;\n    &::before {\n        position: absolute;\n        cursor: text;\n        font-family: ${font.typography};\n        font-size: 0.875rem;\n        color: ${palette('neutral', 0.6)};\n        content: attr(data-text);\n        height: 100%;\n        display: flex;\n        align-items: center;\n    }\n`;\n\nconst createSlashStyle = (_: ThemeTool, { css }: Emotion) => css`\n    &::before {\n        left: 0.5rem;\n    }\n`;\n\nexport const createProps = (status: Status, utils: Utils) => {\n    const emptyStyle = utils.getStyle(createEmptyStyle);\n    const slashStyle = utils.getStyle(createSlashStyle);\n\n    return {\n        handleKeyDown: (_: EditorView, event: Event) => {\n            if (status.isEmpty()) {\n                return false;\n            }\n            if (!(event instanceof KeyboardEvent)) {\n                return false;\n            }\n\n            if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n                return false;\n            }\n\n            return true;\n        },\n        decorations: (state: EditorState) => {\n            const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);\n            const uploadPlugin = state.plugins.find(\n                (x) => (x as unknown as { key: string }).key === 'MILKDOWN_PLUGIN_UPLOAD$',\n            );\n            const decorations: DecorationSet = uploadPlugin?.getState(state);\n            if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {\n                status.clear();\n                return;\n            }\n\n            if (\n                !paragraph ||\n                paragraph.node.childCount > 1 ||\n                state.selection.$from.parentOffset !== paragraph.node.textContent.length ||\n                (paragraph.node.firstChild && paragraph.node.firstChild.type.name !== 'text')\n            ) {\n                status.clear();\n                return;\n            }\n\n            const { placeholder, actions } = status.update({\n                parentNode: state.selection.$from.node(state.selection.$from.depth - 1),\n                isTopLevel: state.selection.$from.depth === 1,\n                content: paragraph.node.textContent,\n                state,\n            });\n\n            if (!placeholder) {\n                return null;\n            }\n\n            const createDecoration = (text: string, className: (string | undefined)[]) => {\n                const pos = paragraph.pos;\n                return DecorationSet.create(state.doc, [\n                    Decoration.node(pos, pos + paragraph.node.nodeSize, {\n                        class: className.filter((x) => x).join(' '),\n                        'data-text': text,\n                    }),\n                ]);\n            };\n\n            if (actions.length) {\n                return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);\n            }\n\n            return createDecoration(placeholder, [emptyStyle, 'empty-node']);\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Command } from '@milkdown/prose';\n\nimport { cleanUpAndCreateNode } from './utility';\n\nexport type Action = {\n    id: string;\n    $: HTMLElement;\n    command: Command;\n};\n\nexport type WrappedAction = Pick<Action, 'id'> & {\n    command: () => void;\n    dom: HTMLElement;\n};\n\nexport const transformAction = (action: WrappedAction): Action => ({\n    id: action.id,\n    $: action.dom,\n    command: cleanUpAndCreateNode(action.command),\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { StatusConfigBuilder, StatusConfigBuilderParams } from '..';\nimport { Action, transformAction } from '../item';\n\nexport type StatusCtx = {\n    placeholder: string | null;\n    actions: Action[];\n};\n\nconst createStatusCtx = (): StatusCtx => {\n    return {\n        placeholder: null,\n        actions: [],\n    };\n};\n\nexport type Status = ReturnType<typeof createStatus>;\n\nexport const createStatus = (builder: StatusConfigBuilder) => {\n    const statusCtx = createStatusCtx();\n\n    return {\n        get: () => statusCtx,\n        clear: () => {\n            statusCtx.placeholder = null;\n            statusCtx.actions = [];\n        },\n        update: (builderParams: StatusConfigBuilderParams) => {\n            const config = builder(builderParams);\n            statusCtx.placeholder = config?.placeholder ?? null;\n            statusCtx.actions = (config?.actions ?? []).map(transformAction);\n            return statusCtx;\n        },\n        isEmpty: () => statusCtx.actions.length === 0,\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\ntype Listeners = {\n    mouseEnter: EventListener;\n    mouseLeave: EventListener;\n};\n\nexport const renderDropdown = (status: Status, dropdownElement: HTMLElement, listeners: Listeners): boolean => {\n    const { actions } = status.get();\n\n    if (!actions.length) {\n        dropdownElement.classList.add('hide');\n        return false;\n    }\n\n    dropdownElement.childNodes.forEach((child) => {\n        child.removeEventListener('mouseenter', listeners.mouseEnter);\n        child.removeEventListener('mouseleave', listeners.mouseLeave);\n    });\n\n    // Reset dropdownElement children\n    dropdownElement.textContent = '';\n\n    actions.forEach(({ $ }) => {\n        $.classList.remove('active');\n        $.addEventListener('mouseenter', listeners.mouseEnter);\n        $.addEventListener('mouseleave', listeners.mouseLeave);\n        dropdownElement.appendChild($);\n    });\n\n    dropdownElement.classList.remove('hide');\n\n    const first$ = actions[0];\n    if (first$) {\n        first$.$.classList.add('active');\n        requestAnimationFrame(() => {\n            scrollIntoView(first$.$, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n            });\n        });\n    }\n\n    return true;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { EditorView } from '@milkdown/prose';\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\nexport const createMouseManager = () => {\n    let mouseLock = false;\n\n    return {\n        isLock: () => mouseLock,\n        lock: () => {\n            mouseLock = true;\n        },\n        unlock: () => {\n            mouseLock = false;\n        },\n    };\n};\nexport type MouseManager = ReturnType<typeof createMouseManager>;\n\nexport const handleMouseMove = (mouseManager: MouseManager) => () => {\n    mouseManager.unlock();\n};\n\nexport const handleMouseEnter = (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => {\n    if (mouseManager.isLock()) return;\n    const { actions } = status.get();\n    const active = actions.findIndex((x) => x.$.classList.contains('active'));\n    const active$ = actions[active];\n    if (active$ && active >= 0) {\n        active$.$.classList.remove('active');\n    }\n    const { target } = e;\n    if (!(target instanceof HTMLElement)) return;\n    target.classList.add('active');\n};\n\nexport const handleMouseLeave = () => (e: MouseEvent) => {\n    const { target } = e;\n    if (!(target instanceof HTMLElement)) return;\n    target.classList.remove('active');\n};\n\nexport const handleClick =\n    (status: Status, view: EditorView, dropdownElement: HTMLElement) =>\n    (e: Event): void => {\n        const { target } = e;\n        if (!(target instanceof HTMLElement)) return;\n        if (!view) return;\n\n        const stop = () => {\n            e.stopPropagation();\n            e.preventDefault();\n        };\n\n        const { actions } = status.get();\n\n        const el = Object.values(actions).find(({ $ }) => $.contains(target));\n        if (!el) {\n            if (status.isEmpty()) return;\n\n            status.clear();\n            dropdownElement.classList.add('hide');\n            stop();\n\n            return;\n        }\n\n        stop();\n        el.command(view.state, view.dispatch, view);\n    };\n\nexport const handleKeydown =\n    (status: Status, view: EditorView, dropdownElement: HTMLElement, mouseManager: MouseManager) => (e: Event) => {\n        if (!(e instanceof KeyboardEvent)) return;\n        if (!mouseManager.isLock()) mouseManager.lock();\n\n        const { key } = e;\n        if (status.isEmpty()) return;\n        if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) return;\n\n        const { actions } = status.get();\n\n        let active = actions.findIndex(({ $ }) => $.classList.contains('active'));\n        if (active < 0) active = 0;\n\n        const moveActive = (next: number) => {\n            const active$ = actions[active];\n            const next$ = actions[next];\n            if (!active$ || !next$) return;\n            active$.$.classList.remove('active');\n            next$.$.classList.add('active');\n            scrollIntoView(next$.$, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n            });\n        };\n\n        if (key === 'ArrowDown') {\n            const next = active === actions.length - 1 ? 0 : active + 1;\n\n            moveActive(next);\n            return;\n        }\n\n        if (key === 'ArrowUp') {\n            const next = active === 0 ? actions.length - 1 : active - 1;\n\n            moveActive(next);\n            return;\n        }\n\n        if (key === 'Escape') {\n            if (status.isEmpty()) return;\n\n            status.clear();\n            dropdownElement.classList.add('hide');\n            return;\n        }\n\n        const active$ = actions[active];\n        if (!active$) return;\n        active$.command(view.state, view.dispatch, view);\n        active$.$.classList.remove('active');\n    };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { calculateNodePosition, EditorView } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { createDropdown } from '../utility';\nimport { renderDropdown } from './dropdown';\nimport {\n    createMouseManager,\n    handleClick,\n    handleKeydown,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleMouseMove,\n} from './input';\nimport { Status } from './status';\n\nconst calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {\n    calculateNodePosition(view, dropdownElement, (selected, target, parent) => {\n        const $editor = dropdownElement.parentElement;\n        if (!$editor) {\n            throw new Error();\n        }\n\n        let left = selected.left - parent.left;\n        let top = selected.bottom - parent.top + 14 + $editor.scrollTop;\n\n        if (left < 0) {\n            left = 0;\n        }\n\n        if (window.innerHeight - selected.bottom < target.height) {\n            top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;\n        }\n        return [top, left];\n    });\n};\n\nexport const createView = (status: Status, view: EditorView, utils: Utils) => {\n    const wrapper = view.dom.parentNode;\n    if (!wrapper) return {};\n\n    const dropdownElement = createDropdown(utils);\n    const mouseManager = createMouseManager();\n    wrapper.appendChild(dropdownElement);\n\n    const _mouseMove = handleMouseMove(mouseManager);\n    const _mouseDown = handleClick(status, view, dropdownElement);\n    const _keydown = handleKeydown(status, view, dropdownElement, mouseManager);\n    const _mouseEnter = handleMouseEnter(status, mouseManager);\n    const _mouseLeave = handleMouseLeave();\n\n    wrapper.addEventListener('mousemove', _mouseMove);\n    wrapper.addEventListener('mousedown', _mouseDown);\n    wrapper.addEventListener('keydown', _keydown);\n\n    return {\n        update: (view: EditorView) => {\n            const show = renderDropdown(status, dropdownElement, {\n                mouseEnter: _mouseEnter as EventListener,\n                mouseLeave: _mouseLeave as EventListener,\n            });\n\n            if (!show) return;\n\n            calculatePosition(view, dropdownElement);\n        },\n\n        destroy: () => {\n            wrapper.removeEventListener('mousemove', _mouseMove);\n            wrapper.removeEventListener('mousedown', _mouseDown);\n            wrapper.removeEventListener('keydown', _keydown);\n            dropdownElement.remove();\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { StatusConfigBuilder } from '..';\nimport { createProps } from './props';\nimport { createStatus } from './status';\nimport { createView } from './view';\n\nexport const key = 'MILKDOWN_PLUGIN_SLASH';\n\nexport const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder) => {\n    const status = createStatus(builder);\n\n    return new Plugin({\n        key: new PluginKey(key),\n        props: createProps(status, utils),\n        view: (view) => createView(status, view, utils),\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList, createPlugin } from '@milkdown/utils';\n\nimport type { Config } from './config';\nimport { defaultConfig } from './config';\nimport { createSlashPlugin } from './prose-plugin';\n\nexport type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';\nexport { defaultActions, defaultConfig } from './config';\nexport { createDropdownItem } from './utility';\n\nexport type Options = {\n    config: Config;\n};\n\nexport const slashPlugin = createPlugin<string, Options>((utils, options) => {\n    const slashConfig = options?.config ?? defaultConfig;\n\n    return {\n        prosePlugins: (_, ctx) => {\n            const config = slashConfig(ctx);\n\n            const plugin = createSlashPlugin(utils, config);\n\n            return [plugin];\n        },\n    };\n});\n\nexport const slash = AtomList.create([slashPlugin()]);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,MAAM,YAAY,CAAC,EAAE,MAAM,WAAsB,EAAE,UAAmB;SAC3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAUgB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOP,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BASd,QAAQ,aAAa;AAAA;AAAA;AAAA,6BAGtB,QAAQ;AAAA;AAAA;AAAA;AAAA;MAMxB,cAAc,CAAC,WAAsB,YAAqB;;QAC7D,EAAE,OAAO,MAAM,YAAY;QAC3B,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIhB,YAAM,WAAN;AAAA,yBACe,KAAK;AAAA;AAAA,sBAER,QAAQ;AAAA;AAAA,UAEpB,YAAM,WAAN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,YAAM,cAAN;AAAA;AAAA,UAEA,UAAU,WAAW;AAAA;SAEpB;AAAA;MCpDE,iBAAiB,CAAC,UAAiB;QACtC,MAAM,SAAS,cAAc;MAC/B,aAAa,QAAQ;MACrB,aAAa,YAAY;QACvB,QAAQ,MAAM,SAAS;MAEzB,OAAO;QACH,UAAU,IAAI;AAAA;MAGlB,UAAU,IAAI,kBAAkB;SAE7B;AAAA;MAME,qBAAqB,CAAC,WAAsB,MAAc,MAAY,YAAmC;;QAC5G,gBAAgB,yCAAS,kBAAT,YAA0B;QAE1C,MAAM,SAAS,cAAc;MAC/B,aAAa,QAAQ;MACrB,UAAU,IAAI;QAEZ,WAAW,UAAU,MAAM,KAAK;QAEhC,WAAW,SAAS,cAAc;WAC/B,cAAc;WACd,YAAY;MAEjB,YAAY;MACZ,YAAY;SAET;AAAA;AAcX,MAAM,UAAmB,CAAC,OAAO,aAAa;QACpC,EAAE,cAAc;QAChB,EAAE,UAAU;QACZ,KAAK,MAAM,GAAG,YAAY,MAAM,SAAS,MAAM;uCAC1C;SACJ;AAAA;MAGE,uBACT,CAAC,kBACD,CAAC,OAAO,UAAU,SAAS;MACnB,MAAM;YACE,OAAO;;;SAGZ;AAAA;MC9CF,iBAAiB,CAAC,KAAU,QAAQ,QAAyB;QAChE,EAAE,UAAU,IAAI,IAAI;QACpB,UAA0E;AAAA,IAC5E;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,iBAAiB;AAAA,MAChE,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW,mBAAmB;AAAA,MAClE,SAAS,CAAC,MAAM;AAAA,MAChB,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,kBAAkB;AAAA,MACjE,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW,mBAAmB;AAAA,MAClE,SAAS,CAAC,MAAM;AAAA,MAChB,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,iBAAiB;AAAA,MAChE,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW,mBAAmB;AAAA,MAClE,SAAS,CAAC,MAAM;AAAA,MAChB,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,eAAe;AAAA,MAC9D,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC,eAAe;AAAA,MACzB,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,gBAAgB;AAAA,MAC/D,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC,gBAAgB;AAAA,MAC1B,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,aAAa;AAAA,MAC5D,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC,aAAa;AAAA,MACvB,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,SAAS;AAAA,MACxD,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC;AAAA,MACV,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,SAAS;AAAA,MACxD,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC,SAAS;AAAA,MACnB,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,SAAS;AAAA,MACxD,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC;AAAA,MACV,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,cAAc;AAAA,MAC7D,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC;AAAA,MACV,UAAU;AAAA;AAAA,IAEd;AAAA,MACI,IAAI;AAAA,MACJ,KAAK,mBAAmB,IAAI,IAAI,eAAe,eAAe;AAAA,MAC9D,SAAS,MAAM,IAAI,IAAI,aAAa,WAAW;AAAA,MAC/C,SAAS,CAAC,WAAW;AAAA,MACrB,UAAU;AAAA;AAAA;QAIZ,YAAY,MAAM,MAAM,GAAG;SAE1B,QACF,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,OAAO,aAAa,OAAO,QAAQ,KAAK,CAAC,YAAY,QAAQ,SAAS,aACjG,IAAI,CAAC;AAAA,iBAAE,WAAS,aAAX,IAAwB,mBAAxB,IAAwB,CAAtB,WAAS;AAA0B;AAAA;AAAA;MAGtC,gBAAwB,CAAC,QAAQ;SACnC,CAAC,EAAE,SAAS,iBAAiB;QAC5B,CAAC;aAAmB;QAEpB,CAAC,SAAS;aACH,EAAE,aAAa;AAAA;QAGtB,QAAQ,WAAW,MAAM;aAClB,YAAY,MACb;AAAA,QACI,aAAa;AAAA,QACb,SAAS,eAAe;AAAA,UAE5B;AAAA,QACI,SAAS,eAAe,KAAK;AAAA;AAAA;WAIpC;AAAA;AAAA;AC5Hf,MAAM,mBAAmB,CAAC,EAAE,MAAM,WAAsB,EAAE,UAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,uBAKtD,KAAK;AAAA;AAAA,iBAEX,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQpC,MAAM,mBAAmB,CAAC,GAAc,EAAE,UAAmB;AAAA;AAAA;AAAA;AAAA;MAMhD,cAAc,CAAC,QAAgB,UAAiB;QACnD,aAAa,MAAM,SAAS;QAC5B,aAAa,MAAM,SAAS;SAE3B;AAAA,IACH,eAAe,CAAC,GAAe,UAAiB;UACxC,OAAO,WAAW;eACX;AAAA;UAEP,mBAAmB,gBAAgB;eAC5B;AAAA;UAGP,CAAC,CAAC,WAAW,aAAa,SAAS,SAAS,MAAM,MAAM;eACjD;AAAA;aAGJ;AAAA;AAAA,IAEX,aAAa,CAAC,UAAuB;YAC3B,YAAY,eAAe,CAAC,EAAE,WAAW,KAAK,SAAS,aAAa,MAAM;YAC1E,eAAe,MAAM,QAAQ,KAC/B,CAAC,MAAO,EAAiC,QAAQ;YAE/C,cAA6B,6CAAc,SAAS;UACtD,eAAe,QAAQ,YAAY,KAAK,MAAM,UAAU,MAAM,MAAM,UAAU,IAAI,SAAS,GAAG;eACvF;;;UAKP,CAAC,aACD,UAAU,KAAK,aAAa,KAC5B,MAAM,UAAU,MAAM,iBAAiB,UAAU,KAAK,YAAY,UACjE,UAAU,KAAK,cAAc,UAAU,KAAK,WAAW,KAAK,SAAS,QACxE;eACS;;;YAIL,EAAE,aAAa,YAAY,OAAO,OAAO;AAAA,QAC3C,YAAY,MAAM,UAAU,MAAM,KAAK,MAAM,UAAU,MAAM,QAAQ;AAAA,QACrE,YAAY,MAAM,UAAU,MAAM,UAAU;AAAA,QAC5C,SAAS,UAAU,KAAK;AAAA,QACxB;AAAA;UAGA,CAAC,aAAa;eACP;AAAA;YAGL,mBAAmB,CAAC,MAAc,cAAsC;cACpE,MAAM,UAAU;eACf,cAAc,OAAO,MAAM,KAAK;AAAA,UACnC,WAAW,KAAK,KAAK,MAAM,UAAU,KAAK,UAAU;AAAA,YAChD,OAAO,UAAU,OAAO,CAAC,MAAM,GAAG,KAAK;AAAA,YACvC,aAAa;AAAA;AAAA;AAAA;UAKrB,QAAQ,QAAQ;eACT,iBAAiB,aAAa,CAAC,YAAY,YAAY,cAAc;AAAA;aAGzE,iBAAiB,aAAa,CAAC,YAAY;AAAA;AAAA;AAAA;MC/EjD,kBAAkB,CAAC;EAC5B,IAAI,OAAO;AAAA,EACX,GAAG,OAAO;AAAA,EACV,SAAS,qBAAqB,OAAO;AAAA;ACVzC,MAAM,kBAAkB,MAAiB;SAC9B;AAAA,IACH,aAAa;AAAA,IACb,SAAS;AAAA;AAAA;MAMJ,eAAe,CAAC,YAAiC;QACpD,YAAY;SAEX;AAAA,IACH,KAAK,MAAM;AAAA,IACX,OAAO,MAAM;gBACC,cAAc;gBACd,UAAU;AAAA;AAAA,IAExB,QAAQ,CAAC,kBAA6C;;YAC5C,SAAS,QAAQ;gBACb,cAAc,uCAAQ,gBAAR,YAAuB;gBACrC,kDAAmB,wBAAW,IAAI,IAAI;aACzC;AAAA;AAAA,IAEX,SAAS,MAAM,UAAU,QAAQ,WAAW;AAAA;AAAA;MCvBvC,iBAAiB,CAAC,QAAgB,iBAA8B,cAAkC;QACrG,EAAE,YAAY,OAAO;MAEvB,CAAC,QAAQ,QAAQ;oBACD,UAAU,IAAI;WACvB;AAAA;kBAGK,WAAW,QAAQ,CAAC,UAAU;UACpC,oBAAoB,cAAc,UAAU;UAC5C,oBAAoB,cAAc,UAAU;AAAA;kBAItC,cAAc;UAEtB,QAAQ,CAAC,EAAE,QAAQ;MACrB,UAAU,OAAO;MACjB,iBAAiB,cAAc,UAAU;MACzC,iBAAiB,cAAc,UAAU;oBAC3B,YAAY;AAAA;kBAGhB,UAAU,OAAO;QAE3B,SAAS,QAAQ;MACnB,QAAQ;WACD,EAAE,UAAU,IAAI;0BACD,MAAM;qBACT,OAAO,GAAG;AAAA,QACrB,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA;AAAA;SAKb;AAAA;MCxCE,qBAAqB,MAAM;MAChC,YAAY;SAET;AAAA,IACH,QAAQ,MAAM;AAAA,IACd,MAAM,MAAM;kBACI;AAAA;AAAA,IAEhB,QAAQ,MAAM;kBACE;AAAA;AAAA;AAAA;MAMX,kBAAkB,CAAC,iBAA+B,MAAM;eACpD;AAAA;MAGJ,mBAAmB,CAAC,QAAgB,iBAA+B,CAAC,MAAkB;MAC3F,aAAa;;QACX,EAAE,YAAY,OAAO;QACrB,SAAS,QAAQ,UAAU,CAAC,MAAM,EAAE,EAAE,UAAU,SAAS;QACzD,UAAU,QAAQ;MACpB,WAAW,UAAU,GAAG;YAChB,EAAE,UAAU,OAAO;AAAA;QAEzB,EAAE,WAAW;MACf,oBAAoB;;SACjB,UAAU,IAAI;AAAA;MAGZ,mBAAmB,MAAM,CAAC,MAAkB;QAC/C,EAAE,WAAW;MACf,oBAAoB;;SACjB,UAAU,OAAO;AAAA;MAGf,cACT,CAAC,QAAgB,MAAkB,oBACnC,CAAC,MAAmB;QACV,EAAE,WAAW;MACf,oBAAoB;;MACpB,CAAC;;QAEC,OAAO,MAAM;MACb;MACA;AAAA;QAGA,EAAE,YAAY,OAAO;QAErB,KAAK,OAAO,OAAO,SAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS;MACzD,CAAC,IAAI;QACD,OAAO;;WAEJ;oBACS,UAAU,IAAI;;;;;KAO/B,QAAQ,KAAK,OAAO,KAAK,UAAU;AAAA;MAGjC,gBACT,CAAC,QAAgB,MAAkB,iBAA8B,iBAA+B,CAAC,MAAa;MACtG,eAAe;;MACf,CAAC,aAAa;iBAAuB;QAEnC,EAAE,cAAQ;MACZ,OAAO;;MACP,CAAC,CAAC,aAAa,WAAW,SAAS,UAAU,SAAS;;QAEpD,EAAE,YAAY,OAAO;MAEvB,SAAS,QAAQ,UAAU,CAAC,EAAE,QAAQ,EAAE,UAAU,SAAS;MAC3D,SAAS;aAAY;QAEnB,aAAa,CAAC,SAAiB;UAC3B,WAAU,QAAQ;UAClB,QAAQ,QAAQ;QAClB,CAAC,YAAW,CAAC;;aACT,EAAE,UAAU,OAAO;UACrB,EAAE,UAAU,IAAI;mBACP,MAAM,GAAG;AAAA,MACpB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA;AAAA;MAIZ,SAAQ,aAAa;UACf,OAAO,WAAW,QAAQ,SAAS,IAAI,IAAI,SAAS;eAE/C;;;MAIX,SAAQ,WAAW;UACb,OAAO,WAAW,IAAI,QAAQ,SAAS,IAAI,SAAS;eAE/C;;;MAIX,SAAQ,UAAU;QACd,OAAO;;WAEJ;oBACS,UAAU,IAAI;;;QAI5B,UAAU,QAAQ;MACpB,CAAC;;UACG,QAAQ,KAAK,OAAO,KAAK,UAAU;UACnC,EAAE,UAAU,OAAO;AAAA;AC9GnC,MAAM,oBAAoB,CAAC,MAAkB,oBAAiC;wBACpD,MAAM,iBAAiB,CAAC,UAAU,QAAQ,WAAW;UACjE,UAAU,gBAAgB;QAC5B,CAAC,SAAS;YACJ,IAAI;AAAA;QAGV,OAAO,SAAS,OAAO,OAAO;QAC9B,MAAM,SAAS,SAAS,OAAO,MAAM,KAAK,QAAQ;QAElD,OAAO,GAAG;aACH;AAAA;QAGP,OAAO,cAAc,SAAS,SAAS,OAAO,QAAQ;YAChD,SAAS,MAAM,OAAO,MAAM,OAAO,SAAS,KAAK,QAAQ;AAAA;WAE5D,CAAC,KAAK;AAAA;AAAA;MAIR,aAAa,CAAC,QAAgB,MAAkB,UAAiB;QACpE,UAAU,KAAK,IAAI;MACrB,CAAC;WAAgB;QAEf,kBAAkB,eAAe;QACjC,eAAe;UACb,YAAY;QAEd,aAAa,gBAAgB;QAC7B,aAAa,YAAY,QAAQ,MAAM;QACvC,WAAW,cAAc,QAAQ,MAAM,iBAAiB;QACxD,cAAc,iBAAiB,QAAQ;QACvC,cAAc;UAEZ,iBAAiB,aAAa;UAC9B,iBAAiB,aAAa;UAC9B,iBAAiB,WAAW;SAE7B;AAAA,IACH,QAAQ,CAAC,UAAqB;YACpB,OAAO,eAAe,QAAQ,iBAAiB;AAAA,QACjD,YAAY;AAAA,QACZ,YAAY;AAAA;UAGZ,CAAC;;wBAEa,OAAM;AAAA;AAAA,IAG5B,SAAS,MAAM;cACH,oBAAoB,aAAa;cACjC,oBAAoB,aAAa;cACjC,oBAAoB,WAAW;sBACvB;AAAA;AAAA;AAAA;MC9Df,MAAM;MAEN,oBAAoB,CAAC,OAAc,YAAiC;QACvE,SAAS,aAAa;SAErB,IAAI,OAAO;AAAA,IACd,KAAK,IAAI,UAAU;AAAA,IACnB,OAAO,YAAY,QAAQ;AAAA,IAC3B,MAAM,CAAC,SAAS,WAAW,QAAQ,MAAM;AAAA;AAAA;MCFpC,cAAc,aAA8B,CAAC,OAAO,YAAY;;QACnE,cAAc,yCAAS,WAAT,YAAmB;SAEhC;AAAA,IACH,cAAc,CAAC,GAAG,QAAQ;YAChB,SAAS,YAAY;YAErB,SAAS,kBAAkB,OAAO;aAEjC,CAAC;AAAA;AAAA;AAAA;MAKP,QAAQ,SAAS,OAAO,CAAC;;"}
+{"version":3,"file":"index.es.js","sources":["../src/style.ts","../src/utility.ts","../src/config.ts","../src/prose-plugin/props.ts","../src/item.ts","../src/prose-plugin/status.ts","../src/prose-plugin/dropdown.ts","../src/prose-plugin/input.ts","../src/prose-plugin/view.ts","../src/prose-plugin/index.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport {\n    Color,\n    Emotion,\n    ThemeBorder,\n    ThemeColor,\n    ThemeFont,\n    ThemeManager,\n    ThemeScrollbar,\n    ThemeShadow,\n    ThemeSize,\n} from '@milkdown/core';\n\nconst itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n    return css`\n        .slash-dropdown-item {\n            display: flex;\n            gap: 2em;\n            height: 3.4286em;\n            padding: 0 1em;\n            align-items: center;\n            justify-content: flex-start;\n            cursor: pointer;\n            line-height: 3.4286em;\n            font-family: ${themeManager.get(ThemeFont, 'typography')};\n            font-size: 0.875em;\n\n            transition: all 0.2s ease-in-out;\n\n            &,\n            .icon {\n                color: ${palette('neutral', 0.87)};\n                transition: all 0.2s ease-in-out;\n            }\n\n            &.hide {\n                display: none;\n            }\n\n            &.active {\n                background: ${palette('secondary', 0.12)};\n                &,\n                .icon {\n                    color: ${palette('primary')};\n                }\n            }\n            `;\n};\n\nexport const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {\n    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n\n    return emotion.css`\n        width: 20.5em;\n        max-height: 20.5em;\n        overflow-y: auto;\n        border-radius: ${themeManager.get(ThemeSize, 'radius')};\n        position: absolute;\n        background: ${palette('surface')};\n\n        ${themeManager.get(ThemeBorder, undefined)}\n        ${themeManager.get(ThemeShadow, undefined)}\n        ${themeManager.get(ThemeScrollbar, undefined)}\n\n        &.hide {\n            display: none;\n        }\n\n        ${itemStyle(themeManager, emotion)}\n    `;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { ThemeIcon, ThemeManager } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport type { Command, Node } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport { injectStyle } from './style';\n\nexport const createDropdown = (utils: Utils) => {\n    const div = document.createElement('div');\n    div.setAttribute('role', 'listbox');\n    div.setAttribute('tabindex', '-1');\n    utils.themeManager.onFlush(() => {\n        const style = utils.getStyle(injectStyle);\n\n        if (style) {\n            div.classList.add(style);\n        }\n    });\n\n    div.classList.add('slash-dropdown', 'hide');\n\n    return div;\n};\n\ntype ItemOptions = {\n    textClassName: string;\n};\nexport const createDropdownItem = (\n    themeManager: ThemeManager,\n    text: string,\n    icon: Icon,\n    options?: Partial<ItemOptions>,\n) => {\n    const textClassName = options?.textClassName ?? 'text';\n\n    const div = document.createElement('div');\n    div.setAttribute('role', 'option');\n    div.classList.add('slash-dropdown-item');\n\n    // const iconSpan = themeManager.slots.icon(icon);\n    const iconSpan = themeManager.get(ThemeIcon, icon);\n\n    if (!iconSpan) {\n        throw new Error('icon not found');\n    }\n\n    const textSpan = document.createElement('span');\n    textSpan.textContent = text;\n    textSpan.className = textClassName;\n\n    div.appendChild(iconSpan.dom);\n    div.appendChild(textSpan);\n\n    return div;\n};\n\nexport const getDepth = (node: Node) => {\n    let cur = node;\n    let depth = 0;\n    while (cur.childCount) {\n        cur = cur.child(0);\n        depth += 1;\n    }\n\n    return depth;\n};\n\nconst cleanUp: Command = (state, dispatch) => {\n    const { selection } = state;\n    const { $from } = selection;\n    const tr = state.tr.deleteRange($from.start(), $from.pos);\n    dispatch?.(tr);\n    return false;\n};\n\nexport const cleanUpAndCreateNode =\n    (createCommand: () => void): Command =>\n    (state, dispatch, view) => {\n        if (view) {\n            cleanUp(state, dispatch, view);\n            createCommand();\n        }\n        return true;\n    };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, schemaCtx, themeManagerCtx } from '@milkdown/core';\nimport { EditorState, Node } from '@milkdown/prose';\n\nimport { WrappedAction } from './item';\nimport { createDropdownItem } from './utility';\n\ntype Nullable<T> = T | null | undefined;\n\nexport type StatusConfig = {\n    placeholder?: Nullable<string>;\n    actions?: Nullable<WrappedAction[]>;\n};\n\nexport type StatusConfigBuilderParams = {\n    content: string;\n    isTopLevel: boolean;\n    parentNode: Node;\n    state: EditorState;\n};\n\nexport type StatusConfigBuilder = (params: StatusConfigBuilderParams) => Nullable<StatusConfig>;\n\nexport type Config = (ctx: Ctx) => StatusConfigBuilder;\n\nexport const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {\n    const { nodes } = ctx.get(schemaCtx);\n    const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [\n        {\n            id: 'h1',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 1),\n            keyword: ['h1', 'large heading'],\n            typeName: 'heading',\n        },\n        {\n            id: 'h2',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 2),\n            keyword: ['h2', 'medium heading'],\n            typeName: 'heading',\n        },\n        {\n            id: 'h3',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 3),\n            keyword: ['h3', 'small heading'],\n            typeName: 'heading',\n        },\n        {\n            id: 'bulletList',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),\n            command: () => ctx.get(commandsCtx).callByName('WrapInBulletList'),\n            keyword: ['bullet list', 'ul'],\n            typeName: 'bullet_list',\n        },\n        {\n            id: 'orderedList',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),\n            command: () => ctx.get(commandsCtx).callByName('WrapInOrderedList'),\n            keyword: ['ordered list', 'ol'],\n            typeName: 'ordered_list',\n        },\n        {\n            id: 'taskList',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoTaskList'),\n            keyword: ['task list', 'task'],\n            typeName: 'task_list_item',\n        },\n        {\n            id: 'image',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),\n            command: () => ctx.get(commandsCtx).callByName('InsertImage'),\n            keyword: ['image'],\n            typeName: 'image',\n        },\n        {\n            id: 'blockquote',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),\n            command: () => ctx.get(commandsCtx).callByName('WrapInBlockquote'),\n            keyword: ['quote', 'blockquote'],\n            typeName: 'blockquote',\n        },\n        {\n            id: 'table',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),\n            command: () => ctx.get(commandsCtx).callByName('InsertTable'),\n            keyword: ['table'],\n            typeName: 'table',\n        },\n        {\n            id: 'code',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),\n            command: () => ctx.get(commandsCtx).callByName('TurnIntoCodeFence'),\n            keyword: ['code'],\n            typeName: 'fence',\n        },\n        {\n            id: 'divider',\n            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),\n            command: () => ctx.get(commandsCtx).callByName('InsertHr'),\n            keyword: ['divider', 'hr'],\n            typeName: 'hr',\n        },\n    ];\n\n    const userInput = input.slice(1).toLocaleLowerCase();\n\n    return actions\n        .filter((action) => !!nodes[action.typeName] && action.keyword.some((keyword) => keyword.includes(userInput)))\n        .map(({ keyword, typeName, ...action }) => action);\n};\n\nexport const defaultConfig: Config = (ctx) => {\n    return ({ content, isTopLevel }) => {\n        if (!isTopLevel) return null;\n\n        if (!content) {\n            return { placeholder: 'Type / to use the slash commands...' };\n        }\n\n        if (content.startsWith('/')) {\n            return content === '/'\n                ? {\n                      placeholder: 'Type to filter...',\n                      actions: defaultActions(ctx),\n                  }\n                : {\n                      actions: defaultActions(ctx, content),\n                  };\n        }\n\n        return null;\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Color, Emotion, ThemeColor, ThemeFont, ThemeManager } from '@milkdown/core';\nimport { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { Status } from './status';\n\nexport type Props = ReturnType<typeof createProps>;\n\nconst createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n    const typography = themeManager.get(ThemeFont, 'typography');\n\n    return css`\n        position: relative;\n        &::before {\n            position: absolute;\n            cursor: text;\n            font-family: ${typography};\n            font-size: 0.875em;\n            color: ${palette('neutral', 0.6)};\n            content: attr(data-text);\n            height: 100%;\n            display: flex;\n            align-items: center;\n        }\n    `;\n};\n\nconst createSlashStyle = (_: ThemeManager, { css }: Emotion) => css`\n    &::before {\n        left: 0.5em;\n    }\n`;\n\nexport const createProps = (status: Status, utils: Utils) => {\n    return {\n        handleKeyDown: (_: EditorView, event: Event) => {\n            if (status.isEmpty()) {\n                return false;\n            }\n            if (!(event instanceof KeyboardEvent)) {\n                return false;\n            }\n\n            if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {\n                return false;\n            }\n\n            return true;\n        },\n        decorations: (state: EditorState) => {\n            const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);\n            const uploadPlugin = state.plugins.find(\n                (x) => (x as unknown as { key: string }).key === 'MILKDOWN_PLUGIN_UPLOAD$',\n            );\n            const decorations: DecorationSet = uploadPlugin?.getState(state);\n            if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {\n                status.clear();\n                return;\n            }\n\n            if (\n                !paragraph ||\n                paragraph.node.childCount > 1 ||\n                state.selection.$from.parentOffset !== paragraph.node.textContent.length ||\n                (paragraph.node.firstChild && paragraph.node.firstChild.type.name !== 'text')\n            ) {\n                status.clear();\n                return;\n            }\n\n            const { placeholder, actions } = status.update({\n                parentNode: state.selection.$from.node(state.selection.$from.depth - 1),\n                isTopLevel: state.selection.$from.depth === 1,\n                content: paragraph.node.textContent,\n                state,\n            });\n\n            if (!placeholder) {\n                return null;\n            }\n\n            const createDecoration = (text: string, className: (string | undefined)[]) => {\n                const pos = paragraph.pos;\n                return DecorationSet.create(state.doc, [\n                    Decoration.node(pos, pos + paragraph.node.nodeSize, {\n                        class: className.filter((x) => x).join(' '),\n                        'data-text': text,\n                    }),\n                ]);\n            };\n\n            const emptyStyle = utils.getStyle(createEmptyStyle);\n            const slashStyle = utils.getStyle(createSlashStyle);\n\n            if (actions.length) {\n                return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);\n            }\n\n            return createDecoration(placeholder, [emptyStyle, 'empty-node']);\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { Command } from '@milkdown/prose';\n\nimport { cleanUpAndCreateNode } from './utility';\n\nexport type Action = {\n    id: string;\n    $: HTMLElement;\n    command: Command;\n};\n\nexport type WrappedAction = Pick<Action, 'id'> & {\n    command: () => void;\n    dom: HTMLElement;\n};\n\nexport const transformAction = (action: WrappedAction): Action => ({\n    id: action.id,\n    $: action.dom,\n    command: cleanUpAndCreateNode(action.command),\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { StatusConfigBuilder, StatusConfigBuilderParams } from '..';\nimport { Action, transformAction } from '../item';\n\nexport type StatusCtx = {\n    placeholder: string | null;\n    actions: Action[];\n};\n\nconst createStatusCtx = (): StatusCtx => {\n    return {\n        placeholder: null,\n        actions: [],\n    };\n};\n\nexport type Status = ReturnType<typeof createStatus>;\n\nexport const createStatus = (builder: StatusConfigBuilder) => {\n    const statusCtx = createStatusCtx();\n\n    return {\n        get: () => statusCtx,\n        clear: () => {\n            statusCtx.placeholder = null;\n            statusCtx.actions = [];\n        },\n        update: (builderParams: StatusConfigBuilderParams) => {\n            const config = builder(builderParams);\n            statusCtx.placeholder = config?.placeholder ?? null;\n            statusCtx.actions = (config?.actions ?? []).map(transformAction);\n            return statusCtx;\n        },\n        isEmpty: () => statusCtx.actions.length === 0,\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\ntype Listeners = {\n    mouseEnter: EventListener;\n    mouseLeave: EventListener;\n};\n\nexport const renderDropdown = (status: Status, dropdownElement: HTMLElement, listeners: Listeners): boolean => {\n    const { actions } = status.get();\n\n    if (!actions.length) {\n        dropdownElement.classList.add('hide');\n        return false;\n    }\n\n    dropdownElement.childNodes.forEach((child) => {\n        child.removeEventListener('mouseenter', listeners.mouseEnter);\n        child.removeEventListener('mouseleave', listeners.mouseLeave);\n    });\n\n    while (dropdownElement.firstChild) {\n        dropdownElement.firstChild.remove();\n    }\n\n    actions.forEach(({ $ }) => {\n        $.classList.remove('active');\n        $.addEventListener('mouseenter', listeners.mouseEnter);\n        $.addEventListener('mouseleave', listeners.mouseLeave);\n        dropdownElement.appendChild($);\n    });\n\n    dropdownElement.classList.remove('hide');\n\n    const first$ = actions[0];\n    if (first$) {\n        first$.$.classList.add('active');\n        requestAnimationFrame(() => {\n            scrollIntoView(first$.$, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n            });\n        });\n    }\n\n    return true;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\n\nimport { EditorView } from '@milkdown/prose';\nimport scrollIntoView from 'smooth-scroll-into-view-if-needed';\n\nimport { Status } from './status';\n\nexport const createMouseManager = () => {\n    let mouseLock = false;\n\n    return {\n        isLock: () => mouseLock,\n        lock: () => {\n            mouseLock = true;\n        },\n        unlock: () => {\n            mouseLock = false;\n        },\n    };\n};\nexport type MouseManager = ReturnType<typeof createMouseManager>;\n\nexport const handleMouseMove = (mouseManager: MouseManager) => () => {\n    mouseManager.unlock();\n};\n\nexport const handleMouseEnter = (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => {\n    if (mouseManager.isLock()) return;\n    const { actions } = status.get();\n    const active = actions.findIndex((x) => x.$.classList.contains('active'));\n    const active$ = actions[active];\n    if (active$ && active >= 0) {\n        active$.$.classList.remove('active');\n    }\n    const { target } = e;\n    if (!(target instanceof HTMLElement)) return;\n    target.classList.add('active');\n};\n\nexport const handleMouseLeave = () => (e: MouseEvent) => {\n    const { target } = e;\n    if (!(target instanceof HTMLElement)) return;\n    target.classList.remove('active');\n};\n\nexport const handleClick =\n    (status: Status, view: EditorView, dropdownElement: HTMLElement) =>\n    (e: Event): void => {\n        const { target } = e;\n        if (!(target instanceof HTMLElement)) return;\n        if (!view) return;\n\n        const stop = () => {\n            e.stopPropagation();\n            e.preventDefault();\n        };\n\n        const { actions } = status.get();\n\n        const el = Object.values(actions).find(({ $ }) => $.contains(target));\n        if (!el) {\n            if (status.isEmpty()) return;\n\n            status.clear();\n            dropdownElement.classList.add('hide');\n            stop();\n\n            return;\n        }\n\n        stop();\n        el.command(view.state, view.dispatch, view);\n    };\n\nexport const handleKeydown =\n    (status: Status, view: EditorView, dropdownElement: HTMLElement, mouseManager: MouseManager) => (e: Event) => {\n        if (!(e instanceof KeyboardEvent)) return;\n        if (!mouseManager.isLock()) mouseManager.lock();\n\n        const { key } = e;\n        if (status.isEmpty()) return;\n        if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) return;\n\n        const { actions } = status.get();\n\n        let active = actions.findIndex(({ $ }) => $.classList.contains('active'));\n        if (active < 0) active = 0;\n\n        const moveActive = (next: number) => {\n            const active$ = actions[active];\n            const next$ = actions[next];\n            if (!active$ || !next$) return;\n            active$.$.classList.remove('active');\n            next$.$.classList.add('active');\n            scrollIntoView(next$.$, {\n                scrollMode: 'if-needed',\n                block: 'nearest',\n                inline: 'nearest',\n            });\n        };\n\n        if (key === 'ArrowDown') {\n            const next = active === actions.length - 1 ? 0 : active + 1;\n\n            moveActive(next);\n            return;\n        }\n\n        if (key === 'ArrowUp') {\n            const next = active === 0 ? actions.length - 1 : active - 1;\n\n            moveActive(next);\n            return;\n        }\n\n        if (key === 'Escape') {\n            if (status.isEmpty()) return;\n\n            status.clear();\n            dropdownElement.classList.add('hide');\n            return;\n        }\n\n        const active$ = actions[active];\n        if (!active$) return;\n        active$.command(view.state, view.dispatch, view);\n        active$.$.classList.remove('active');\n    };\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { calculateNodePosition, EditorView } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { createDropdown } from '../utility';\nimport { renderDropdown } from './dropdown';\nimport {\n    createMouseManager,\n    handleClick,\n    handleKeydown,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleMouseMove,\n} from './input';\nimport { Status } from './status';\n\nconst calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {\n    calculateNodePosition(view, dropdownElement, (selected, target, parent) => {\n        const $editor = dropdownElement.parentElement;\n        if (!$editor) {\n            throw new Error();\n        }\n\n        let left = selected.left - parent.left;\n        let top = selected.bottom - parent.top + 14 + $editor.scrollTop;\n\n        if (left < 0) {\n            left = 0;\n        }\n\n        if (parent.height + parent.top - selected.bottom < target.height) {\n            top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;\n        }\n        return [top, left];\n    });\n};\n\nexport const createView = (status: Status, view: EditorView, utils: Utils) => {\n    const wrapper = view.dom.parentNode;\n    if (!wrapper) return {};\n\n    const dropdownElement = createDropdown(utils);\n    const mouseManager = createMouseManager();\n    wrapper.appendChild(dropdownElement);\n\n    const _mouseMove = handleMouseMove(mouseManager);\n    const _mouseDown = handleClick(status, view, dropdownElement);\n    const _keydown = handleKeydown(status, view, dropdownElement, mouseManager);\n    const _mouseEnter = handleMouseEnter(status, mouseManager);\n    const _mouseLeave = handleMouseLeave();\n\n    wrapper.addEventListener('mousemove', _mouseMove);\n    wrapper.addEventListener('mousedown', _mouseDown);\n    wrapper.addEventListener('keydown', _keydown);\n\n    return {\n        update: (view: EditorView) => {\n            const show = renderDropdown(status, dropdownElement, {\n                mouseEnter: _mouseEnter as EventListener,\n                mouseLeave: _mouseLeave as EventListener,\n            });\n\n            if (!show) return;\n\n            calculatePosition(view, dropdownElement);\n        },\n\n        destroy: () => {\n            wrapper.removeEventListener('mousemove', _mouseMove);\n            wrapper.removeEventListener('mousedown', _mouseDown);\n            wrapper.removeEventListener('keydown', _keydown);\n            dropdownElement.remove();\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Plugin, PluginKey } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport type { StatusConfigBuilder } from '..';\nimport { createProps } from './props';\nimport { createStatus } from './status';\nimport { createView } from './view';\n\nexport const key = 'MILKDOWN_PLUGIN_SLASH';\n\nexport const createSlashPlugin = (utils: Utils, builder: StatusConfigBuilder) => {\n    const status = createStatus(builder);\n\n    return new Plugin({\n        key: new PluginKey(key),\n        props: createProps(status, utils),\n        view: (view) => createView(status, view, utils),\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { AtomList, createPlugin } from '@milkdown/utils';\n\nimport type { Config } from './config';\nimport { defaultConfig } from './config';\nimport { createSlashPlugin } from './prose-plugin';\n\nexport type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';\nexport { defaultActions, defaultConfig } from './config';\nexport { createDropdownItem } from './utility';\n\nexport type Options = {\n    config: Config;\n};\n\nexport const slashPlugin = createPlugin<string, Options>((utils, options) => {\n    const slashConfig = options?.config ?? defaultConfig;\n\n    return {\n        prosePlugins: (_, ctx) => {\n            const config = slashConfig(ctx);\n\n            const plugin = createSlashPlugin(utils, config);\n\n            return [plugin];\n        },\n    };\n});\n\nexport const slash = AtomList.create([slashPlugin()]);\n"],"names":[],"mappings":"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"}

package/lib/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../src/item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAI/C,oBAAY,MAAM,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,WAAW,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,GAAG,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,aAAa,KAAG,MAItD,CAAC"}

package/lib/prose-plugin/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,aAAK,SAAS,GAAG;IACb,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,WAAY,MAAM,mBAAmB,WAAW,aAAa,SAAS,KAAG,OAuCnG,CAAC"}

package/lib/prose-plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAa,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,IAAI,CAAC;AAK9C,eAAO,MAAM,GAAG,0BAA0B,CAAC;AAE3C,eAAO,MAAM,iBAAiB,UAAW,KAAK,WAAW,mBAAmB,qBAQ3E,CAAC"}

package/lib/prose-plugin/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,kBAAkB;;;;CAY9B,CAAC;AACF,oBAAY,YAAY,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEjE,eAAO,MAAM,eAAe,iBAAkB,YAAY,eAEzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,WAAY,MAAM,gBAAgB,YAAY,SAAS,UAAU,SAW7F,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,UAAU,SAInD,CAAC;AAEF,eAAO,MAAM,WAAW,WACX,MAAM,QAAQ,UAAU,mBAAmB,WAAW,SAC3D,KAAK,KAAG,IAyBX,CAAC;AAEN,eAAO,MAAM,aAAa,WACb,MAAM,QAAQ,UAAU,mBAAmB,WAAW,gBAAgB,YAAY,SAAS,KAAK,SAoDxG,CAAC"}

package/lib/prose-plugin/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/props.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,aAAa,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,KAAK,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AA4BnD,eAAO,MAAM,WAAW,WAAY,MAAM,SAAS,KAAK;uBAE7B,UAAU,SAAS,KAAK;yBActB,WAAW;CAoDvC,CAAC"}

package/lib/prose-plugin/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/status.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,IAAI,CAAC;AACpE,OAAO,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAElD,oBAAY,SAAS,GAAG;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AASF,oBAAY,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AAErD,eAAO,MAAM,YAAY,YAAa,mBAAmB;;;4BASzB,yBAAyB;;CAQxD,CAAC"}

package/lib/prose-plugin/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/prose-plugin/view.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAYxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAuBlC,eAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,UAAU,SAAS,KAAK;;;;mBAmBlD,UAAU;;CAkBhC,CAAC"}

package/lib/style.d.ts

@@ -0,0 +1,3 @@
+import { Emotion, ThemeManager } from '@milkdown/core';
+export declare const injectStyle: (themeManager: ThemeManager, emotion: Emotion) => string;
+//# sourceMappingURL=style.d.ts.map

package/lib/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AACA,OAAO,EAEH,OAAO,EAIP,YAAY,EAIf,MAAM,gBAAgB,CAAC;AAuCxB,eAAO,MAAM,WAAW,iBAAkB,YAAY,WAAW,OAAO,WAqBvE,CAAC"}

package/lib/{src/utility.d.ts → utility.d.ts}

@@ -1,4 +1,4 @@
-import type { ThemeTool } from '@milkdown/core';
+import { ThemeManager } from '@milkdown/core';
 import type { Icon } from '@milkdown/design-system';
 import type { Command, Node } from '@milkdown/prose';
 import type { Utils } from '@milkdown/utils';
@@ -6,7 +6,7 @@ export declare const createDropdown: (utils: Utils) => HTMLDivElement;
 declare type ItemOptions = {
     textClassName: string;
 };
-export declare const createDropdownItem: (themeTool: ThemeTool, text: string, icon: Icon, options?: Partial<ItemOptions> | undefined) => HTMLDivElement;
+export declare const createDropdownItem: (themeManager: ThemeManager, text: string, icon: Icon, options?: Partial<ItemOptions> | undefined) => HTMLDivElement;
 export declare const getDepth: (node: Node) => number;
 export declare const cleanUpAndCreateNode: (createCommand: () => void) => Command;
 export {};

package/lib/utility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../src/utility.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAI7C,eAAO,MAAM,cAAc,UAAW,KAAK,mBAe1C,CAAC;AAEF,aAAK,WAAW,GAAG;IACf,aAAa,EAAE,MAAM,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,kBAAkB,iBACb,YAAY,QACpB,MAAM,QACN,IAAI,+DAwBb,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,IAAI,WASlC,CAAC;AAUF,eAAO,MAAM,oBAAoB,kBACb,MAAM,IAAI,KAAG,OAO5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/plugin-slash",
-  "version": "5.5.0",
+  "version": "6.0.0-next.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -15,24 +15,48 @@
     "milkdown plugin"
   ],
   "devDependencies": {
-    "@milkdown/core": "5.5.0",
-    "@milkdown/prose": "5.5.0",
-    "@milkdown/design-system": "5.5.0"
+    "@milkdown/core": "6.0.0-next.0",
+    "@milkdown/prose": "6.0.0-next.0",
+    "@milkdown/design-system": "6.0.0-next.0"
   },
   "peerDependencies": {
-    "@milkdown/core": "^5.4.0",
-    "@milkdown/prose": "^5.4.0"
+    "@milkdown/core": "^6.0.0-next.0",
+    "@milkdown/prose": "^6.0.0-next.0"
   },
   "dependencies": {
-    "@milkdown/utils": "5.5.0",
+    "@milkdown/utils": "6.0.0-next.0",
     "smooth-scroll-into-view-if-needed": "^1.1.32",
     "tslib": "^2.3.1"
   },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "packages/plugin-slash/lib"
+        ],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      },
+      "tsc": {
+        "outputs": [],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      }
+    }
+  },
   "scripts": {
-    "start": "vite build --watch",
+    "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
     "test": "vitest",
     "tsc": "tsc --noEmit",
-    "build": "vite build"
+    "build": "vite build && tsc --emitDeclarationOnly"
   },
   "readme": "# @milkdown/plugin-slash\n\nSlash plugin for [milkdown](https://saul-mirone.github.io/milkdown/).\nAdd support for slash commands.\n\n# Example Usage\n\n```typescript\nimport { Editor } from '@milkdown/core';\nimport { commonmark } from '@milkdown/preset-commonmark';\nimport { nord } from '@milkdown/theme-nord';\n\nimport { slash } from '@milkdown/plugin-slash';\n\nEditor.make().use(nord).use(commonmark).use(slash).create();\n```\n\n# Options\n\n## config\n\nConfigure the slash plugin placeholders & items with custom status builder.\n\nExample:\n\n```typescript\nimport { slashPlugin, slash, createDropdownItem, defaultActions } from '@milkdown/plugin-slash';\nimport { themeToolCtx, commandsCtx } from '@milkdown/core';\n\nEditor.make().use(\n    slash.configure(slashPlugin, {\n        config: (ctx) => {\n            // Get default slash plugin items\n            const actions = defaultActions(ctx);\n\n            // Define a status builder\n            return ({ isTopLevel, content, parentNode }) => {\n                // You can only show something at root level\n                if (!isTopLevel) return null;\n\n                // Empty content ? Set your custom empty placeholder !\n                if (!content) {\n                    return { placeholder: 'Type / to use the slash commands...' };\n                }\n\n                // Define the placeholder & actions (dropdown items) you want to display depending on content\n                if (content.startsWith('/')) {\n                    // Add some actions depending on your content's parent node\n                    if (parentNode.type.name === 'customNode') {\n                        actions.push({\n                            id: 'custom',\n                            dom: createDropdownItem(ctx.get(themeToolCtx), 'Custom', 'h1'),\n                            command: () => ctx.get(commandsCtx).call(/* Add custom command here */),\n                            keyword: ['custom'],\n                            enable: () => true,\n                        });\n                    }\n\n                    return content === '/'\n                        ? {\n                              placeholder: 'Type to filter...',\n                              actions,\n                          }\n                        : {\n                              actions: actions.filter(({ keyword }) =>\n                                  keyword.some((key) => key.includes(content.slice(1).toLocaleLowerCase())),\n                              ),\n                          };\n                }\n            };\n        },\n    }),\n);\n```\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
 }

package/src/config.ts

@@ -1,5 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { commandsCtx, Ctx, schemaCtx, themeToolCtx } from '@milkdown/core';
+import { commandsCtx, Ctx, schemaCtx, themeManagerCtx } from '@milkdown/core';
 import { EditorState, Node } from '@milkdown/prose';
 
 import { WrappedAction } from './item';
@@ -28,77 +28,77 @@ export const defaultActions = (ctx: Ctx, input = '/'): WrappedAction[] => {
     const actions: Array<WrappedAction & { keyword: string[]; typeName: string }> = [
         {
             id: 'h1',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Large Heading', 'h1'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Large Heading', 'h1'),
             command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 1),
             keyword: ['h1', 'large heading'],
             typeName: 'heading',
         },
         {
             id: 'h2',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Medium Heading', 'h2'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Medium Heading', 'h2'),
             command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 2),
             keyword: ['h2', 'medium heading'],
             typeName: 'heading',
         },
         {
             id: 'h3',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Small Heading', 'h3'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Small Heading', 'h3'),
             command: () => ctx.get(commandsCtx).callByName('TurnIntoHeading', 3),
             keyword: ['h3', 'small heading'],
             typeName: 'heading',
         },
         {
             id: 'bulletList',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Bullet List', 'bulletList'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Bullet List', 'bulletList'),
             command: () => ctx.get(commandsCtx).callByName('WrapInBulletList'),
             keyword: ['bullet list', 'ul'],
             typeName: 'bullet_list',
         },
         {
             id: 'orderedList',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Ordered List', 'orderedList'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Ordered List', 'orderedList'),
             command: () => ctx.get(commandsCtx).callByName('WrapInOrderedList'),
             keyword: ['ordered list', 'ol'],
             typeName: 'ordered_list',
         },
         {
             id: 'taskList',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Task List', 'taskList'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Task List', 'taskList'),
             command: () => ctx.get(commandsCtx).callByName('TurnIntoTaskList'),
             keyword: ['task list', 'task'],
             typeName: 'task_list_item',
         },
         {
             id: 'image',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Image', 'image'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Image', 'image'),
             command: () => ctx.get(commandsCtx).callByName('InsertImage'),
             keyword: ['image'],
             typeName: 'image',
         },
         {
             id: 'blockquote',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Quote', 'quote'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Quote', 'quote'),
             command: () => ctx.get(commandsCtx).callByName('WrapInBlockquote'),
             keyword: ['quote', 'blockquote'],
             typeName: 'blockquote',
         },
         {
             id: 'table',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Table', 'table'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Table', 'table'),
             command: () => ctx.get(commandsCtx).callByName('InsertTable'),
             keyword: ['table'],
             typeName: 'table',
         },
         {
             id: 'code',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Code Fence', 'code'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Code Fence', 'code'),
             command: () => ctx.get(commandsCtx).callByName('TurnIntoCodeFence'),
             keyword: ['code'],
             typeName: 'fence',
         },
         {
             id: 'divider',
-            dom: createDropdownItem(ctx.get(themeToolCtx), 'Divide Line', 'divider'),
+            dom: createDropdownItem(ctx.get(themeManagerCtx), 'Divide Line', 'divider'),
             command: () => ctx.get(commandsCtx).callByName('InsertHr'),
             keyword: ['divider', 'hr'],
             typeName: 'hr',

package/src/prose-plugin/dropdown.ts

@@ -21,8 +21,9 @@ export const renderDropdown = (status: Status, dropdownElement: HTMLElement, lis
         child.removeEventListener('mouseleave', listeners.mouseLeave);
     });
 
-    // Reset dropdownElement children
-    dropdownElement.textContent = '';
+    while (dropdownElement.firstChild) {
+        dropdownElement.firstChild.remove();
+    }
 
     actions.forEach(({ $ }) => {
         $.classList.remove('active');

package/src/prose-plugin/props.ts

@@ -1,5 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Emotion, ThemeTool } from '@milkdown/core';
+import { Color, Emotion, ThemeColor, ThemeFont, ThemeManager } from '@milkdown/core';
 import { Decoration, DecorationSet, EditorState, EditorView, findParentNode } from '@milkdown/prose';
 import { Utils } from '@milkdown/utils';
 
@@ -7,31 +7,33 @@ import type { Status } from './status';
 
 export type Props = ReturnType<typeof createProps>;
 
-const createEmptyStyle = ({ font, palette }: ThemeTool, { css }: Emotion) => css`
-    position: relative;
-    &::before {
-        position: absolute;
-        cursor: text;
-        font-family: ${font.typography};
-        font-size: 0.875rem;
-        color: ${palette('neutral', 0.6)};
-        content: attr(data-text);
-        height: 100%;
-        display: flex;
-        align-items: center;
-    }
-`;
+const createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {
+    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+    const typography = themeManager.get(ThemeFont, 'typography');
 
-const createSlashStyle = (_: ThemeTool, { css }: Emotion) => css`
+    return css`
+        position: relative;
+        &::before {
+            position: absolute;
+            cursor: text;
+            font-family: ${typography};
+            font-size: 0.875em;
+            color: ${palette('neutral', 0.6)};
+            content: attr(data-text);
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+    `;
+};
+
+const createSlashStyle = (_: ThemeManager, { css }: Emotion) => css`
     &::before {
-        left: 0.5rem;
+        left: 0.5em;
     }
 `;
 
 export const createProps = (status: Status, utils: Utils) => {
-    const emptyStyle = utils.getStyle(createEmptyStyle);
-    const slashStyle = utils.getStyle(createSlashStyle);
-
     return {
         handleKeyDown: (_: EditorView, event: Event) => {
             if (status.isEmpty()) {
@@ -89,6 +91,9 @@ export const createProps = (status: Status, utils: Utils) => {
                 ]);
             };
 
+            const emptyStyle = utils.getStyle(createEmptyStyle);
+            const slashStyle = utils.getStyle(createSlashStyle);
+
             if (actions.length) {
                 return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);
             }

package/src/prose-plugin/view.ts

@@ -28,7 +28,7 @@ const calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {
             left = 0;
         }
 
-        if (window.innerHeight - selected.bottom < target.height) {
+        if (parent.height + parent.top - selected.bottom < target.height) {
             top = selected.top - parent.top - target.height - 14 + $editor.scrollTop;
         }
         return [top, left];

package/src/style.ts

@@ -1,19 +1,30 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Emotion, ThemeTool } from '@milkdown/core';
+import {
+    Color,
+    Emotion,
+    ThemeBorder,
+    ThemeColor,
+    ThemeFont,
+    ThemeManager,
+    ThemeScrollbar,
+    ThemeShadow,
+    ThemeSize,
+} from '@milkdown/core';
 
-const itemStyle = ({ font, palette }: ThemeTool, { css }: Emotion) => {
+const itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {
+    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
     return css`
         .slash-dropdown-item {
             display: flex;
-            gap: 2rem;
-            height: 3rem;
-            padding: 0 1rem;
+            gap: 2em;
+            height: 3.4286em;
+            padding: 0 1em;
             align-items: center;
             justify-content: flex-start;
             cursor: pointer;
-            line-height: 2;
-            font-family: ${font.typography};
-            font-size: 0.875rem;
+            line-height: 3.4286em;
+            font-family: ${themeManager.get(ThemeFont, 'typography')};
+            font-size: 0.875em;
 
             transition: all 0.2s ease-in-out;
 
@@ -37,26 +48,25 @@ const itemStyle = ({ font, palette }: ThemeTool, { css }: Emotion) => {
             `;
 };
 
-export const injectStyle = (themeTool: ThemeTool, emotion: Emotion) => {
-    const { mixin, size, palette } = themeTool;
-    const style = emotion.css`
-        width: 20.5rem;
-        max-height: 20.5rem;
+export const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {
+    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+
+    return emotion.css`
+        width: 20.5em;
+        max-height: 20.5em;
         overflow-y: auto;
-        ${mixin.border?.()};
-        border-radius: ${size.radius};
+        border-radius: ${themeManager.get(ThemeSize, 'radius')};
         position: absolute;
         background: ${palette('surface')};
 
-        ${mixin.shadow?.()};
+        ${themeManager.get(ThemeBorder, undefined)}
+        ${themeManager.get(ThemeShadow, undefined)}
+        ${themeManager.get(ThemeScrollbar, undefined)}
 
         &.hide {
             display: none;
         }
 
-        ${mixin.scrollbar?.()};
-
-        ${itemStyle(themeTool, emotion)}
+        ${itemStyle(themeManager, emotion)}
     `;
-    return style;
 };

package/src/utility.ts

@@ -1,5 +1,5 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import type { ThemeTool } from '@milkdown/core';
+import { ThemeIcon, ThemeManager } from '@milkdown/core';
 import type { Icon } from '@milkdown/design-system';
 import type { Command, Node } from '@milkdown/prose';
 import type { Utils } from '@milkdown/utils';
@@ -10,11 +10,13 @@ export const createDropdown = (utils: Utils) => {
     const div = document.createElement('div');
     div.setAttribute('role', 'listbox');
     div.setAttribute('tabindex', '-1');
-    const style = utils.getStyle(injectStyle);
+    utils.themeManager.onFlush(() => {
+        const style = utils.getStyle(injectStyle);
 
-    if (style) {
-        div.classList.add(style);
-    }
+        if (style) {
+            div.classList.add(style);
+        }
+    });
 
     div.classList.add('slash-dropdown', 'hide');
 
@@ -24,20 +26,30 @@ export const createDropdown = (utils: Utils) => {
 type ItemOptions = {
     textClassName: string;
 };
-export const createDropdownItem = (themeTool: ThemeTool, text: string, icon: Icon, options?: Partial<ItemOptions>) => {
+export const createDropdownItem = (
+    themeManager: ThemeManager,
+    text: string,
+    icon: Icon,
+    options?: Partial<ItemOptions>,
+) => {
     const textClassName = options?.textClassName ?? 'text';
 
     const div = document.createElement('div');
     div.setAttribute('role', 'option');
     div.classList.add('slash-dropdown-item');
 
-    const iconSpan = themeTool.slots.icon(icon);
+    // const iconSpan = themeManager.slots.icon(icon);
+    const iconSpan = themeManager.get(ThemeIcon, icon);
+
+    if (!iconSpan) {
+        throw new Error('icon not found');
+    }
 
     const textSpan = document.createElement('span');
     textSpan.textContent = text;
     textSpan.className = textClassName;
 
-    div.appendChild(iconSpan);
+    div.appendChild(iconSpan.dom);
     div.appendChild(textSpan);
 
     return div;

package/lib/src/config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["config.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,GAAG,EAA2B,MAAM,gBAAgB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGvC,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;AAExC,oBAAY,YAAY,GAAG;IACvB,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;CACvC,CAAC;AAEF,oBAAY,yBAAyB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,IAAI,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,oBAAY,mBAAmB,GAAG,CAAC,MAAM,EAAE,yBAAyB,KAAK,QAAQ,CAAC,YAAY,CAAC,CAAC;AAEhG,oBAAY,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,mBAAmB,CAAC;AAEvD,eAAO,MAAM,cAAc,QAAS,GAAG,qBAAgB,aAAa,EAuFnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAqB3B,CAAC"}

package/lib/src/index.d.ts

@@ -1,25 +0,0 @@
-import { AtomList } from '@milkdown/utils';
-import type { Config } from './config';
-export type { Config, StatusConfig, StatusConfigBuilder, StatusConfigBuilderParams } from './config';
-export { defaultActions, defaultConfig } from './config';
-export { createDropdownItem } from './utility';
-export declare type Options = {
-    config: Config;
-};
-export declare const slashPlugin: import("@milkdown/utils/lib/src/types").WithExtend<string, Options, {
-    [x: string]: import("prosemirror-model").NodeType<any>;
-} & {
-    [x: string]: import("prosemirror-model").MarkType<any>;
-}, {
-    schema?: ((ctx: import("@milkdown/core").Ctx) => {
-        node?: Record<string, import("@milkdown/core").NodeSchema> | undefined;
-        mark?: Record<string, import("@milkdown/core").MarkSchema> | undefined;
-    }) | undefined;
-    view?: ((ctx: import("@milkdown/core").Ctx) => Partial<{
-        [x: string]: import("@milkdown/prose").NodeViewFactory;
-    } & {
-        [x: string]: import("@milkdown/prose").MarkViewFactory;
-    }>) | undefined;
-}>;
-export declare const slash: AtomList<import("@milkdown/utils/lib/src/types").Metadata<import("@milkdown/utils/lib/src/types").GetPlugin<string, Options>> & import("@milkdown/core").MilkdownPlugin>;
-//# sourceMappingURL=index.d.ts.map

package/lib/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAgB,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIvC,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,oBAAY,OAAO,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAYtB,CAAC;AAEH,eAAO,MAAM,KAAK,0KAAmC,CAAC"}

package/lib/src/item.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAI/C,oBAAY,MAAM,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,WAAW,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,GAAG,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,aAAa,KAAG,MAItD,CAAC"}

package/lib/src/prose-plugin/dropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,aAAK,SAAS,GAAG;IACb,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,WAAY,MAAM,mBAAmB,WAAW,aAAa,SAAS,KAAG,OAsCnG,CAAC"}

package/lib/src/prose-plugin/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAa,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,IAAI,CAAC;AAK9C,eAAO,MAAM,GAAG,0BAA0B,CAAC;AAE3C,eAAO,MAAM,iBAAiB,UAAW,KAAK,WAAW,mBAAmB,qBAQ3E,CAAC"}

package/lib/src/prose-plugin/input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["input.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,kBAAkB;;;;CAY9B,CAAC;AACF,oBAAY,YAAY,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEjE,eAAO,MAAM,eAAe,iBAAkB,YAAY,eAEzD,CAAC;AAEF,eAAO,MAAM,gBAAgB,WAAY,MAAM,gBAAgB,YAAY,SAAS,UAAU,SAW7F,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,UAAU,SAInD,CAAC;AAEF,eAAO,MAAM,WAAW,WACX,MAAM,QAAQ,UAAU,mBAAmB,WAAW,SAC3D,KAAK,KAAG,IAyBX,CAAC;AAEN,eAAO,MAAM,aAAa,WACb,MAAM,QAAQ,UAAU,mBAAmB,WAAW,gBAAgB,YAAY,SAAS,KAAK,SAoDxG,CAAC"}

package/lib/src/prose-plugin/props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["props.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,aAAa,EAAE,WAAW,EAAE,UAAU,EAAkB,MAAM,iBAAiB,CAAC;AACrG,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,KAAK,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAuBnD,eAAO,MAAM,WAAW,WAAY,MAAM,SAAS,KAAK;uBAK7B,UAAU,SAAS,KAAK;yBActB,WAAW;CAiDvC,CAAC"}

package/lib/src/prose-plugin/status.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["status.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,IAAI,CAAC;AACpE,OAAO,EAAE,MAAM,EAAmB,MAAM,SAAS,CAAC;AAElD,oBAAY,SAAS,GAAG;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AASF,oBAAY,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AAErD,eAAO,MAAM,YAAY,YAAa,mBAAmB;;;4BASzB,yBAAyB;;CAQxD,CAAC"}

package/lib/src/prose-plugin/view.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["view.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAYxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAuBlC,eAAO,MAAM,UAAU,WAAY,MAAM,QAAQ,UAAU,SAAS,KAAK;;;;mBAmBlD,UAAU;;CAkBhC,CAAC"}

package/lib/src/style.d.ts

@@ -1,3 +0,0 @@
-import { Emotion, ThemeTool } from '@milkdown/core';
-export declare const injectStyle: (themeTool: ThemeTool, emotion: Emotion) => string;
-//# sourceMappingURL=style.d.ts.map

package/lib/src/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAsCpD,eAAO,MAAM,WAAW,cAAe,SAAS,WAAW,OAAO,WAsBjE,CAAC"}

package/lib/src/utility.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["utility.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAI7C,eAAO,MAAM,cAAc,UAAW,KAAK,mBAa1C,CAAC;AAEF,aAAK,WAAW,GAAG;IACf,aAAa,EAAE,MAAM,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,kBAAkB,cAAe,SAAS,QAAQ,MAAM,QAAQ,IAAI,+DAiBhF,CAAC;AAEF,eAAO,MAAM,QAAQ,SAAU,IAAI,WASlC,CAAC;AAUF,eAAO,MAAM,oBAAoB,kBACb,MAAM,IAAI,KAAG,OAO5B,CAAC"}