@milkdown/plugin-tooltip 5.4.1 → 6.0.0-next.1

package/README.md

@@ -15,9 +15,9 @@ import { tooltip } from '@milkdown/plugin-tooltip';
 Editor.make().use(nord).use(commonmark).use(tooltip).create();
 ```
 
-# Placeholder
+# Position
 
-Modify the input widgets of link and image.
+Modify the tooltip widget's position, to show on the top or the bottom
 
 Example:
 
@@ -26,17 +26,7 @@ import { tooltipPlugin, tooltip } from '@milkdown/plugin-tooltip';
 
 Editor.make().use(
     tooltip.configure(tooltipPlugin, {
-        link: {
-            placeholder: 'Please input link...',
-            buttonText: 'Confirm',
-        },
-        image: {
-            placeholder: 'Please input image link...',
-            buttonText: 'OK',
-        },
-        inlineMath: {
-            placeholder: 'Please input inline math...',
-        },
+        bottom: true,
     }),
 );
 ```

package/lib/{src/button-manager → button-manager}/calc-button-pos.d.ts

@@ -1,3 +1,3 @@
 import { EditorView } from '@milkdown/prose';
-export declare const calcButtonPos: (buttons: HTMLElement, view: EditorView) => void;
+export declare const calcButtonPos: (buttons: HTMLElement, view: EditorView, isBottom: boolean) => void;
 //# sourceMappingURL=calc-button-pos.d.ts.map

package/lib/button-manager/calc-button-pos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc-button-pos.d.ts","sourceRoot":"","sources":["../../src/button-manager/calc-button-pos.ts"],"names":[],"mappings":"AACA,OAAO,EAAyB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEpE,eAAO,MAAM,aAAa,YAAa,WAAW,QAAQ,UAAU,YAAY,OAAO,SAkBtF,CAAC"}

package/lib/{src/button-manager → button-manager}/create-tooltip.d.ts

@@ -5,6 +5,6 @@ declare type Tooltip = {
     dom: HTMLDivElement;
     render: (editorView: EditorView) => void;
 };
-export declare const createTooltip: (buttonMap: ButtonMap, utils: Utils) => Tooltip;
+export declare const createTooltip: (buttonMap: ButtonMap, utils: Utils, className: string) => Tooltip;
 export {};
 //# sourceMappingURL=create-tooltip.d.ts.map

package/lib/button-manager/create-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-tooltip.d.ts","sourceRoot":"","sources":["../../src/button-manager/create-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,aAAK,OAAO,GAAG;IACX,GAAG,EAAE,cAAc,CAAC;IACpB,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,aAAa,cAAe,SAAS,SAAS,KAAK,aAAa,MAAM,KAAG,OAqBrF,CAAC"}

package/lib/button-manager/filter-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-button.d.ts","sourceRoot":"","sources":["../../src/button-manager/filter-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,eAAO,MAAM,YAAY,cAAe,SAAS,QAAQ,UAAU,YAqBlE,CAAC"}

package/lib/{src/button-manager → button-manager}/index.d.ts

@@ -1,7 +1,7 @@
 import type { EditorView } from '@milkdown/prose';
 import type { Utils } from '@milkdown/utils';
 import type { ButtonMap } from '../item';
-export declare const createButtonManager: (buttonMap: ButtonMap, utils: Utils) => {
+export declare const createButtonManager: (buttonMap: ButtonMap, utils: Utils, bottom: boolean, containerClassName: string) => {
     destroy: () => void;
     hide: () => void;
     update: (editorView: EditorView) => void;

package/lib/button-manager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button-manager/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,mBAAmB,cACjB,SAAS,SACb,KAAK,UACJ,OAAO,sBACK,MAAM;;;yBAyBD,UAAU;;CAUtC,CAAC"}

package/lib/button-manager/no-active.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-active.d.ts","sourceRoot":"","sources":["../../src/button-manager/no-active.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,eAAO,MAAM,QAAQ,cAAe,SAAS,QAAQ,UAAU,YAI9D,CAAC"}

package/lib/button-manager/style.d.ts

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

package/lib/button-manager/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/button-manager/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,OAAO,EAA2B,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAE/G,eAAO,MAAM,WAAW,iBAAkB,YAAY,WAAW,OAAO,WA8CvE,CAAC"}

package/lib/index.d.ts

@@ -1 +1,19 @@
-export * from './src/index'
+import { PluginKey } from '@milkdown/prose';
+import { TooltipOptions } from './item';
+export declare const key: PluginKey<any, any>;
+export declare const tooltip: import("@milkdown/utils/lib/types").WithExtend<string, TooltipOptions, {
+    [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;
+}>;
+//# 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":"AAEA,OAAO,EAAU,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAAa,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGnD,eAAO,MAAM,GAAG,qBAA2C,CAAC;AAE5D,eAAO,MAAM,OAAO;;;;;;;;;;;;;;EAyClB,CAAC"}

package/lib/index.es.js

@@ -14,125 +14,13 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { commandsCtx, themeToolCtx, schemaCtx } from "@milkdown/core";
-import { findSelectedNodeOfType, findParentNode, TextSelection, calculateTextPosition, PluginKey, Plugin } from "@milkdown/prose";
-import { createPlugin as createPlugin$1, AtomList } from "@milkdown/utils";
-const elementIsTag = (element, tagName) => element.tagName === tagName.toUpperCase();
-const modifyLink = (ctx) => (e) => {
-  const { target } = e;
-  if (!(target instanceof HTMLElement)) {
-    return () => true;
-  }
-  if (elementIsTag(target, "input")) {
-    target.focus();
-    return () => false;
-  }
-  const parent = target.parentNode;
-  if (!parent)
-    return () => false;
-  const inputEl = Array.from(parent.children).find((el) => el.tagName === "INPUT");
-  if (!(inputEl instanceof HTMLInputElement))
-    return () => false;
-  return ctx.get(commandsCtx).callByName("ModifyLink", inputEl.value);
-};
-const modifyInlineMath = (ctx) => (e) => {
-  const { target } = e;
-  if (!(target instanceof HTMLElement)) {
-    return () => true;
-  }
-  const parent = target.parentNode;
-  if (!parent)
-    return () => false;
-  const inputEl = Array.from(parent.children).find((el) => el.tagName === "INPUT");
-  if (!(inputEl instanceof HTMLInputElement))
-    return () => false;
-  return ctx.get(commandsCtx).callByName("ModifyInlineMath", inputEl.value);
-};
-const modifyImage = (ctx) => (e) => {
-  const { target } = e;
-  if (!(target instanceof HTMLElement)) {
-    return () => true;
-  }
-  if (elementIsTag(target, "input")) {
-    target.focus();
-    return () => false;
-  }
-  const parent = target.parentNode;
-  if (!parent)
-    return () => false;
-  const inputEl = Array.from(parent.children).find((el) => el.tagName === "INPUT");
-  if (!(inputEl instanceof HTMLInputElement))
-    return () => false;
-  return ctx.get(commandsCtx).callByName("ModifyImage", inputEl.value);
-};
-const updateLinkView = (view, $) => {
-  const { marks } = view.state.schema;
-  const { firstChild, lastElementChild } = $;
-  if (!(firstChild instanceof HTMLInputElement) || !(lastElementChild instanceof HTMLButtonElement))
-    return;
-  const { selection } = view.state;
-  let node;
-  view.state.doc.nodesBetween(selection.from, selection.to, (n) => {
-    if (marks.link.isInSet(n.marks)) {
-      node = n;
-      return false;
-    }
-    return;
-  });
-  if (!node)
-    return;
-  const mark = node.marks.find((m) => m.type === marks.link);
-  if (!mark)
-    return;
-  const value = mark.attrs.href;
-  firstChild.value = value;
-  if (!value) {
-    lastElementChild.classList.add("disable");
-    return;
-  }
-  if (lastElementChild.classList.contains("disable")) {
-    lastElementChild.classList.remove("disable");
-  }
-};
-const updateInlineMathView = (view, $) => {
-  const { nodes } = view.state.schema;
-  const { firstChild, lastElementChild } = $;
-  if (!(firstChild instanceof HTMLInputElement) || !(lastElementChild instanceof HTMLButtonElement))
-    return;
-  const result = findSelectedNodeOfType(view.state.selection, nodes.math_inline);
-  if (!result)
-    return;
-  const { node } = result;
-  const value = node.attrs.value;
-  firstChild.value = value;
-  if (!value) {
-    lastElementChild.classList.add("disable");
-    return;
-  }
-  if (lastElementChild.classList.contains("disable")) {
-    lastElementChild.classList.remove("disable");
-  }
-};
-const updateImageView = (view, $) => {
-  const { nodes } = view.state.schema;
-  const { firstChild, lastElementChild } = $;
-  if (!(firstChild instanceof HTMLInputElement) || !(lastElementChild instanceof HTMLButtonElement))
-    return;
-  const result = findSelectedNodeOfType(view.state.selection, nodes.image);
-  if (!result)
-    return;
-  const { node } = result;
-  const value = node.attrs.src;
-  firstChild.value = value.length > 50 ? "Url is too long to display." : value;
-  if (!value) {
-    lastElementChild.classList.add("disable");
-    return;
-  }
-  if (lastElementChild.classList.contains("disable")) {
-    lastElementChild.classList.remove("disable");
-  }
-};
+import { themeManagerCtx, ThemeIcon, commandsCtx, ThemeSize, ThemeBorder, ThemeShadow, ThemeColor, schemaCtx } from "@milkdown/core";
+import { findParentNode, TextSelection, calculateTextPosition, PluginKey, Plugin } from "@milkdown/prose";
+import { createPlugin as createPlugin$1 } from "@milkdown/utils";
 const hasMark = (editorState, type) => {
+  if (!type) {
+    return false;
+  }
   const { from, to } = editorState.selection;
   return editorState.doc.rangeHasMark(from, from === to ? to + 1 : to, type);
 };
@@ -148,59 +36,43 @@ const isTextSelection = (editorState) => {
 };
 const isInCodeFence = (editorState) => Boolean(findParentNode((node) => !!node.type.spec.code)(editorState.selection));
 const isTextAndNotHasMark = (editorState, mark) => !isTextSelection(editorState) || isInCodeFence(editorState) || hasMark(editorState, mark);
-const createToggleIcon = (ctx, iconName, key2, mark, disableForMark) => ({
-  $: ctx.get(themeToolCtx).slots.icon(iconName),
-  command: () => ctx.get(commandsCtx).callByName(key2),
-  active: (view) => hasMark(view.state, mark),
-  disable: (view) => isTextAndNotHasMark(view.state, disableForMark),
-  enable: (view) => !!mark && !!view.state.schema.marks[mark.name]
-});
-var ButtonAction;
-(function(ButtonAction2) {
-  ButtonAction2[ButtonAction2["ToggleBold"] = 0] = "ToggleBold";
-  ButtonAction2[ButtonAction2["ToggleItalic"] = 1] = "ToggleItalic";
-  ButtonAction2[ButtonAction2["ToggleStrike"] = 2] = "ToggleStrike";
-  ButtonAction2[ButtonAction2["ToggleCode"] = 3] = "ToggleCode";
-  ButtonAction2[ButtonAction2["ToggleLink"] = 4] = "ToggleLink";
-})(ButtonAction || (ButtonAction = {}));
-var InputAction;
-(function(InputAction2) {
-  InputAction2[InputAction2["ModifyLink"] = 0] = "ModifyLink";
-  InputAction2[InputAction2["ModifyImage"] = 1] = "ModifyImage";
-  InputAction2[InputAction2["ModifyInlineMath"] = 2] = "ModifyInlineMath";
-})(InputAction || (InputAction = {}));
-const inputMap = (schema, ctx, inputOptions) => {
-  const { marks, nodes } = schema;
+const createToggleIcon = (ctx, iconName, key2, mark, disableForMark) => {
+  var _a;
   return {
-    [0]: __spreadValues({
-      display: (view) => view.state.selection.empty && view.state.selection instanceof TextSelection && hasMark(view.state, marks.link),
-      command: modifyLink(ctx),
-      update: updateLinkView
-    }, inputOptions.link),
-    [2]: __spreadValues({
-      display: (view) => Boolean(findSelectedNodeOfType(view.state.selection, nodes.math_inline)),
-      command: modifyInlineMath(ctx),
-      update: updateInlineMathView,
-      bind: true
-    }, inputOptions.inlineMath),
-    [1]: __spreadValues({
-      display: (view) => Boolean(findSelectedNodeOfType(view.state.selection, nodes.image)),
-      command: modifyImage(ctx),
-      update: updateImageView
-    }, inputOptions.image)
+    $: (_a = ctx.get(themeManagerCtx).get(ThemeIcon, iconName)) == null ? void 0 : _a.dom,
+    command: () => ctx.get(commandsCtx).call(key2),
+    active: (view) => hasMark(view.state, mark),
+    disable: (view) => isTextAndNotHasMark(view.state, disableForMark),
+    enable: (view) => !!mark && !!view.state.schema.marks[mark.name]
   };
 };
-const buttonMap = (schema, ctx) => {
-  const { marks } = schema;
+const Buttonize = ({ icon, onClick, isHidden, isActive }, ctx) => {
+  var _a;
   return {
-    [0]: createToggleIcon(ctx, "bold", "ToggleBold", marks.strong, marks.code_inline),
-    [1]: createToggleIcon(ctx, "italic", "ToggleItalic", marks.em, marks.code_inline),
-    [2]: createToggleIcon(ctx, "strikeThrough", "ToggleStrikeThrough", marks.strike_through, marks.code_inline),
-    [3]: createToggleIcon(ctx, "code", "ToggleInlineCode", marks.code_inline, marks.link),
-    [4]: createToggleIcon(ctx, "link", "ToggleLink", marks.link, marks.code_inline)
+    $: typeof icon === "function" ? icon(ctx) : (_a = ctx.get(themeManagerCtx).get(ThemeIcon, icon)) == null ? void 0 : _a.dom,
+    command: typeof onClick === "string" ? () => ctx.get(commandsCtx).call(onClick) : onClick(ctx),
+    disable: isHidden(ctx),
+    active: isActive(ctx),
+    enable: (view) => !isHidden(ctx)(view)
   };
 };
-const calcButtonPos = (buttons, view) => {
+const buttonMap = (schema, ctx, items) => {
+  const { marks } = schema;
+  const ButtonItems = Array();
+  if (typeof items !== "undefined") {
+    items.forEach((item) => {
+      ButtonItems.push(Buttonize(item, ctx));
+    });
+  }
+  return __spreadValues({
+    [0]: createToggleIcon(ctx, "bold", "ToggleBold", marks["strong"], marks["code_inline"]),
+    [1]: createToggleIcon(ctx, "italic", "ToggleItalic", marks["em"], marks["code_inline"]),
+    [2]: createToggleIcon(ctx, "strikeThrough", "ToggleStrikeThrough", marks["strike_through"], marks["code_inline"]),
+    [3]: createToggleIcon(ctx, "code", "ToggleInlineCode", marks["code_inline"], marks["link"]),
+    [4]: createToggleIcon(ctx, "link", "ToggleLink", marks["link"], marks["code_inline"])
+  }, ButtonItems);
+};
+const calcButtonPos = (buttons, view, isBottom) => {
   buttons.classList.remove("hide");
   calculateTextPosition(view, buttons, (start, end, target, parent) => {
     const $editor = buttons.parentElement;
@@ -212,25 +84,25 @@ const calcButtonPos = (buttons, view) => {
     let top = start.top - parent.top - target.height - 14 + $editor.scrollTop;
     if (left < 0)
       left = 0;
-    if (start.top < target.height) {
+    if (start.top - parent.top < target.height || isBottom && parent.bottom - start.bottom > target.height) {
       top = start.bottom - parent.top + 14 + $editor.scrollTop;
     }
     return [top, left];
   });
 };
-const injectStyle$1 = (themeTool, { css }) => {
-  var _a, _b;
-  const { palette, mixin, size } = themeTool;
+const injectStyle = (themeManager, { css }) => {
+  const palette = (color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+  const lineWidth = themeManager.get(ThemeSize, "lineWidth");
   return css`
         display: inline-flex;
         cursor: pointer;
         justify-content: space-evenly;
         position: absolute;
-        border-radius: ${size.radius};
+        border-radius: ${themeManager.get(ThemeSize, "radius")};
         z-index: 2;
 
-        ${(_a = mixin.border) == null ? void 0 : _a.call(mixin)};
-        ${(_b = mixin.shadow) == null ? void 0 : _b.call(mixin)};
+        ${themeManager.get(ThemeBorder, void 0)}
+        ${themeManager.get(ThemeShadow, void 0)}
 
         overflow: hidden;
         background: ${palette("surface")};
@@ -239,8 +111,8 @@ const injectStyle$1 = (themeTool, { css }) => {
             position: relative;
             color: ${palette("solid", 0.87)};
 
-            width: 3rem;
-            line-height: 3rem;
+            width: 2em;
+            line-height: 2em;
             text-align: center;
             transition: all 0.4s ease-in-out;
             &:hover {
@@ -253,8 +125,8 @@ const injectStyle$1 = (themeTool, { css }) => {
                 content: '';
                 position: absolute;
                 top: 0;
-                right: calc(-0.5 * ${size.lineWidth});
-                width: ${size.lineWidth};
+                right: calc(-0.5 * ${lineWidth});
+                width: ${lineWidth};
                 bottom: 0;
                 background: ${palette("line")};
             }
@@ -265,13 +137,15 @@ const injectStyle$1 = (themeTool, { css }) => {
         }
     `;
 };
-const createTooltip = (buttonMap2, utils) => {
+const createTooltip = (buttonMap2, utils, className) => {
   const div = document.createElement("div");
-  const style = utils.getStyle(injectStyle$1) || "";
-  if (style) {
-    div.classList.add(style);
-  }
-  div.classList.add("tooltip");
+  utils.themeManager.onFlush(() => {
+    const style = utils.getStyle(injectStyle) || "";
+    if (style) {
+      div.classList.add(style);
+    }
+  });
+  div.classList.add(className);
   return {
     dom: div,
     render: (editorView) => {
@@ -302,8 +176,8 @@ const filterButton = (buttonMap2, view) => {
   });
   return noActive(buttonMap2, view);
 };
-const createButtonManager = (buttonMap2, utils) => {
-  const { dom: buttons, render } = createTooltip(buttonMap2, utils);
+const createButtonManager = (buttonMap2, utils, bottom, containerClassName) => {
+  const { dom: buttons, render } = createTooltip(buttonMap2, utils, containerClassName);
   const onClick = (e) => {
     const target = Object.values(buttonMap2).find(({ $ }) => e.target instanceof Element && $.contains(e.target));
     if (!target)
@@ -328,185 +202,16 @@ const createButtonManager = (buttonMap2, utils) => {
         hide();
         return;
       }
-      calcButtonPos(buttons, editorView);
+      calcButtonPos(buttons, editorView, bottom);
     },
     render
   };
 };
-const calcInputPos = (view, input) => {
-  calculateTextPosition(view, input, (start, end, target, parent) => {
-    const $editor = input.parentElement;
-    if (!$editor) {
-      throw new Error();
-    }
-    const selectionWidth = end.left - start.left;
-    let left = start.left - parent.left - (target.width - selectionWidth) / 2;
-    const top = start.bottom - parent.top + 14 + $editor.scrollTop;
-    if (left < 0)
-      left = 0;
-    return [top, left];
-  });
-};
-const injectStyle = (themeTool, { css }) => {
-  var _a, _b;
-  const { palette, mixin, size } = themeTool;
-  return css`
-        ${(_a = mixin.border) == null ? void 0 : _a.call(mixin)};
-        ${(_b = mixin.shadow) == null ? void 0 : _b.call(mixin)};
-
-        display: inline-flex;
-        justify-content: space-between;
-        align-items: center;
-        position: absolute;
-        background: ${palette("surface")};
-        border-radius: ${size.radius};
-        font-size: 1rem;
-
-        height: 3.5rem;
-        box-sizing: border-box;
-        width: 25.5rem;
-        padding: 0 1rem;
-        gap: 1rem;
-        z-index: 2;
-
-        input,
-        button {
-            all: unset;
-        }
-
-        input {
-            flex-grow: 1;
-            caret-color: ${palette("primary")};
-            &::placeholder {
-                color: ${palette("neutral", 0.6)};
-            }
-        }
-
-        button {
-            cursor: pointer;
-            height: 2.25rem;
-            color: ${palette("primary")};
-            font-size: 0.875rem;
-            padding: 0 0.5rem;
-            font-weight: 500;
-            letter-spacing: 1.25px;
-            &:hover {
-                background-color: ${palette("secondary", 0.12)};
-            }
-            &.disable {
-                color: ${palette("neutral", 0.38)};
-                cursor: not-allowed;
-                &:hover {
-                    background: transparent;
-                }
-            }
-            &.hide {
-                display: none;
-            }
-        }
-
-        &.hide {
-            display: none;
-        }
-    `;
-};
-const createInput = (utils) => {
-  const div = document.createElement("div");
-  const style = utils.getStyle(injectStyle);
-  if (style) {
-    div.classList.add(style);
-  }
-  div.classList.add("tooltip-input");
-  const input = document.createElement("input");
-  div.appendChild(input);
-  const button = document.createElement("button");
-  div.appendChild(button);
-  input.addEventListener("input", (e) => {
-    const { target } = e;
-    if (!(target instanceof HTMLInputElement)) {
-      return;
-    }
-    if (!target.value) {
-      button.classList.add("disable");
-      return;
-    }
-    button.classList.remove("disable");
-  });
-  return {
-    div,
-    input,
-    button
-  };
-};
-const filterInput = (currentView, inputMap2, div, input, button) => {
-  const target = Object.values(inputMap2).find((input2) => input2.display(currentView));
-  if (!target) {
-    div.classList.add("hide");
-    return;
-  }
-  div.classList.remove("hide");
-  if (target.bind) {
-    button.classList.add("hide");
-  } else {
-    button.classList.remove("hide");
-    button.textContent = target.buttonText;
-  }
-  input.placeholder = target.placeholder;
-  target.update(currentView, div);
-  return target;
-};
-const createInputManager = (inputMap2, utils) => {
-  let inputCommand;
-  let binding = false;
-  const setCommand = (x) => inputCommand = x;
-  const { div, button, input } = createInput(utils);
-  const onClick = (e) => {
-    if (!inputCommand || button.classList.contains("disable"))
-      return;
-    e.stopPropagation();
-    inputCommand(e);
-    div.classList.add("hide");
-  };
-  const onInput = (e) => {
-    if (!binding || !inputCommand)
-      return;
-    inputCommand(e);
-  };
-  input.addEventListener("input", onInput);
-  button.addEventListener("mousedown", onClick);
-  return {
-    destroy: () => {
-      input.removeEventListener("input", onInput);
-      div.removeEventListener("mousedown", onClick);
-      div.remove();
-    },
-    hide: () => {
-      div.classList.add("hide");
-      setCommand();
-    },
-    update: (editorView) => {
-      const result = filterInput(editorView, inputMap2, div, input, button);
-      if (!result)
-        return;
-      binding = !!result.bind;
-      setCommand(result.command);
-      calcInputPos(editorView, div);
-    },
-    render: (editorView) => {
-      const wrapper = editorView.dom.parentNode;
-      if (!wrapper)
-        throw new Error();
-      wrapper.appendChild(div);
-    }
-  };
-};
-const createPlugin = (buttonMap2, inputMap2, utils) => {
-  const buttonManager = createButtonManager(buttonMap2, utils);
-  const inputManager = createInputManager(inputMap2, utils);
+const createPlugin = (buttonMap2, utils, bottom, containerClassName) => {
+  const buttonManager = createButtonManager(buttonMap2, utils, bottom, containerClassName);
   let shouldHide = false;
   const hide = () => {
     buttonManager.hide();
-    inputManager.hide();
   };
   const update = (view, prevState) => {
     const { state } = view;
@@ -518,17 +223,14 @@ const createPlugin = (buttonMap2, inputMap2, utils) => {
     if (isEqualSelection)
       return;
     buttonManager.update(view);
-    inputManager.update(view);
   };
   return {
     update,
     destroy: () => {
       buttonManager.destroy();
-      inputManager.destroy();
     },
     render: (editorView) => {
       buttonManager.render(editorView);
-      inputManager.render(editorView);
       update(editorView);
     },
     setHide: (isTyping) => {
@@ -537,25 +239,13 @@ const createPlugin = (buttonMap2, inputMap2, utils) => {
   };
 };
 const key = new PluginKey("MILKDOWN_PLUGIN_TOOLTIP");
-const tooltipPlugin = createPlugin$1((utils, options) => {
+const tooltip = createPlugin$1((utils, options) => {
   return {
     id: "tooltip",
     prosePlugins: (_, ctx) => {
-      var _a, _b, _c;
+      var _a, _b;
       const schema = ctx.get(schemaCtx);
-      const manager = createPlugin(buttonMap(schema, ctx), inputMap(schema, ctx, {
-        link: __spreadValues({
-          placeholder: "Input Web Link",
-          buttonText: "APPLY"
-        }, (_a = options == null ? void 0 : options.link) != null ? _a : {}),
-        image: __spreadValues({
-          placeholder: "Input Image Link",
-          buttonText: "APPLY"
-        }, (_b = options == null ? void 0 : options.image) != null ? _b : {}),
-        inlineMath: __spreadValues({
-          placeholder: "Input Math"
-        }, (_c = options == null ? void 0 : options.inlineMath) != null ? _c : {})
-      }), utils);
+      const manager = createPlugin(buttonMap(schema, ctx, options == null ? void 0 : options.items), utils, (_a = options == null ? void 0 : options.bottom) != null ? _a : false, (_b = options == null ? void 0 : options.className) != null ? _b : "tooltip");
       const plugin = new Plugin({
         key,
         props: {
@@ -587,6 +277,5 @@ const tooltipPlugin = createPlugin$1((utils, options) => {
     }
   };
 });
-const tooltip = AtomList.create([tooltipPlugin()]);
-export { key, tooltip, tooltipPlugin };
+export { key, tooltip };
 //# sourceMappingURL=index.es.js.map