@milkdown/plugin-tooltip 5.5.0 → 6.0.0

package/lib/index.es.js

@@ -14,129 +14,9 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { commandsCtx, themeToolCtx, schemaCtx } from "@milkdown/core";
-import { findSelectedNodeOfType, findParentNode, TextSelection, calculateTextPosition, PluginKey, Plugin } from "@milkdown/prose";
+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, 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")) {
-    if (!("key" in e) || e.key !== "Enter") {
-      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")) {
-    if (!("key" in e) || e.key !== "Enter") {
-      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;
-  const { from, to } = selection;
-  view.state.doc.nodesBetween(from, from === to ? to + 1 : 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");
-  }
-};
 const hasMark = (editorState, type) => {
   if (!type) {
     return false;
@@ -156,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(nodes["math_inline"] && findSelectedNodeOfType(view.state.selection, nodes["math_inline"])),
-      command: modifyInlineMath(ctx),
-      update: updateInlineMathView,
-      bind: true
-    }, inputOptions.inlineMath),
-    [1]: __spreadValues({
-      display: (view) => Boolean(nodes["image"] && 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 {
+    $: 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 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) => {
+const calcButtonPos = (buttons, view, isBottom) => {
   buttons.classList.remove("hide");
   calculateTextPosition(view, buttons, (start, end, target, parent) => {
     const $editor = buttons.parentElement;
@@ -220,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")};
@@ -247,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 {
@@ -261,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")};
             }
@@ -273,27 +137,29 @@ 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((emotion) => injectStyle(utils.themeManager, emotion)) || "";
+    if (style) {
+      div.classList.add(style);
+    }
+  });
+  div.classList.add(utils.getClassName({}, className));
   return {
     dom: div,
     render: (editorView) => {
       var _a;
-      Object.values(buttonMap2).filter((item) => item.enable(editorView)).forEach(({ $ }) => div.appendChild($));
+      Object.values(buttonMap2).filter((item) => item.enable(editorView) && item.$ != null).forEach(({ $ }) => div.appendChild($));
       (_a = editorView.dom.parentNode) == null ? void 0 : _a.appendChild(div);
     }
   };
 };
 const noActive = (buttonMap2, view) => {
-  return Object.values(buttonMap2).filter((item) => item.enable(view)).every(({ $ }) => $.classList.contains("hide"));
+  return Object.values(buttonMap2).filter((item) => item.enable(view) && item.$ != null).every(({ $ }) => $.classList.contains("hide"));
 };
 const filterButton = (buttonMap2, view) => {
-  Object.values(buttonMap2).filter((item) => item.enable(view)).forEach((item) => {
+  Object.values(buttonMap2).filter((item) => item.enable(view) && item.$ != null).forEach((item) => {
     var _a;
     const disable = (_a = item.disable) == null ? void 0 : _a.call(item, view);
     if (disable) {
@@ -310,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)
@@ -336,195 +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);
-  };
-  const onKeydown = (e) => {
-    if (!inputCommand)
-      return;
-    if ("key" in e && e.key === "Enter") {
-      inputCommand(e);
-      div.classList.add("hide");
-    }
-  };
-  input.addEventListener("input", onInput);
-  input.addEventListener("keydown", onKeydown);
-  button.addEventListener("mousedown", onClick);
-  return {
-    destroy: () => {
-      input.removeEventListener("input", onInput);
-      input.removeEventListener("keydown", onKeydown);
-      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) => {
+  let buttonManager = createButtonManager(buttonMap2, utils, bottom, containerClassName);
   let shouldHide = false;
   const hide = () => {
     buttonManager.hide();
-    inputManager.hide();
   };
   const update = (view, prevState) => {
     const { state } = view;
@@ -536,17 +223,19 @@ const createPlugin = (buttonMap2, inputMap2, utils) => {
     if (isEqualSelection)
       return;
     buttonManager.update(view);
-    inputManager.update(view);
   };
   return {
+    recreate: (editorView) => {
+      buttonManager = createButtonManager(buttonMap2, utils, bottom, containerClassName);
+      buttonManager.render(editorView);
+      update(editorView);
+    },
     update,
     destroy: () => {
       buttonManager.destroy();
-      inputManager.destroy();
     },
     render: (editorView) => {
       buttonManager.render(editorView);
-      inputManager.render(editorView);
       update(editorView);
     },
     setHide: (isTyping) => {
@@ -559,21 +248,9 @@ const tooltipPlugin = createPlugin$1((utils, options) => {
   return {
     id: "tooltip",
     prosePlugins: (_, ctx) => {
-      var _a, _b, _c;
+      var _a;
       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, "tooltip");
       const plugin = new Plugin({
         key,
         props: {
@@ -594,7 +271,7 @@ const tooltipPlugin = createPlugin$1((utils, options) => {
           }
         },
         view: (editorView) => {
-          manager.render(editorView);
+          manager.recreate(editorView);
           return {
             update: manager.update,
             destroy: manager.destroy