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

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 import { PluginKey } from '@milkdown/prose';
+import { AtomList } from '@milkdown/utils';
 import { TooltipOptions } from './item';
 export declare const key: PluginKey<any, any>;
-export declare const tooltip: import("@milkdown/utils/lib/types").WithExtend<string, TooltipOptions, {
+export declare const tooltipPlugin: import("@milkdown/utils/lib/types").WithExtend<string, TooltipOptions, {
     [x: string]: import("prosemirror-model").NodeType<any>;
 } & {
     [x: string]: import("prosemirror-model").MarkType<any>;
@@ -16,4 +17,5 @@ export declare const tooltip: import("@milkdown/utils/lib/types").WithExtend<str
         [x: string]: import("@milkdown/prose").MarkViewFactory;
     }>) | undefined;
 }>;
+export declare const tooltip: AtomList<import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, TooltipOptions>> & import("@milkdown/core").MilkdownPlugin>;
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAU,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAA0B,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAa,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGnD,eAAO,MAAM,GAAG,qBAA2C,CAAC;AAE5D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAyCxB,CAAC;AAEH,eAAO,MAAM,OAAO,yKAAqC,CAAC"}

package/lib/index.es.js

@@ -16,7 +16,7 @@ var __spreadValues = (a, b) => {
 };
 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";
+import { createPlugin as createPlugin$1, AtomList } from "@milkdown/utils";
 const hasMark = (editorState, type) => {
   if (!type) {
     return false;
@@ -140,26 +140,26 @@ const injectStyle = (themeManager, { css }) => {
 const createTooltip = (buttonMap2, utils, className) => {
   const div = document.createElement("div");
   utils.themeManager.onFlush(() => {
-    const style = utils.getStyle(injectStyle) || "";
+    const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion)) || "";
     if (style) {
       div.classList.add(style);
     }
   });
-  div.classList.add(className);
+  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) {
@@ -208,7 +208,7 @@ const createButtonManager = (buttonMap2, utils, bottom, containerClassName) => {
   };
 };
 const createPlugin = (buttonMap2, utils, bottom, containerClassName) => {
-  const buttonManager = createButtonManager(buttonMap2, utils, bottom, containerClassName);
+  let buttonManager = createButtonManager(buttonMap2, utils, bottom, containerClassName);
   let shouldHide = false;
   const hide = () => {
     buttonManager.hide();
@@ -225,6 +225,11 @@ const createPlugin = (buttonMap2, utils, bottom, containerClassName) => {
     buttonManager.update(view);
   };
   return {
+    recreate: (editorView) => {
+      buttonManager = createButtonManager(buttonMap2, utils, bottom, containerClassName);
+      buttonManager.render(editorView);
+      update(editorView);
+    },
     update,
     destroy: () => {
       buttonManager.destroy();
@@ -239,13 +244,13 @@ const createPlugin = (buttonMap2, utils, bottom, containerClassName) => {
   };
 };
 const key = new PluginKey("MILKDOWN_PLUGIN_TOOLTIP");
-const tooltip = createPlugin$1((utils, options) => {
+const tooltipPlugin = createPlugin$1((utils, options) => {
   return {
     id: "tooltip",
     prosePlugins: (_, ctx) => {
-      var _a, _b;
+      var _a;
       const schema = ctx.get(schemaCtx);
-      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 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: {
@@ -266,7 +271,7 @@ const tooltip = createPlugin$1((utils, options) => {
           }
         },
         view: (editorView) => {
-          manager.render(editorView);
+          manager.recreate(editorView);
           return {
             update: manager.update,
             destroy: manager.destroy
@@ -277,5 +282,6 @@ const tooltip = createPlugin$1((utils, options) => {
     }
   };
 });
-export { key, tooltip };
+const tooltip = AtomList.create([tooltipPlugin()]);
+export { key, tooltip, tooltipPlugin };
 //# sourceMappingURL=index.es.js.map

package/lib/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/utility/prosemirror.ts","../src/utility/toggle.ts","../src/item.ts","../src/button-manager/calc-button-pos.ts","../src/button-manager/style.ts","../src/button-manager/create-tooltip.ts","../src/button-manager/no-active.ts","../src/button-manager/filter-button.ts","../src/button-manager/index.ts","../src/selection-marks-tooltip.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { EditorState, findParentNode, MarkType, Node, NodeType, TextSelection } from '@milkdown/prose';\n\nexport type Position = {\n    start: number;\n    end: number;\n};\n\nexport const hasMark = (editorState: EditorState, type?: MarkType): boolean => {\n    if (!type) {\n        return false;\n    }\n    const { from, to } = editorState.selection;\n\n    return editorState.doc.rangeHasMark(from, from === to ? to + 1 : to, type);\n};\n\nexport const isTextSelection = (editorState: EditorState): boolean => {\n    const { selection } = editorState;\n    if (selection instanceof TextSelection) {\n        const text = editorState.doc.textBetween(selection.from, selection.to);\n\n        if (!text) return false;\n\n        return true;\n    }\n    return false;\n};\n\nexport const isInCodeFence = (editorState: EditorState): boolean =>\n    Boolean(findParentNode((node) => !!node.type.spec.code)(editorState.selection));\n\nexport const isTextAndNotHasMark = (editorState: EditorState, mark?: MarkType): boolean =>\n    !isTextSelection(editorState) || isInCodeFence(editorState) || hasMark(editorState, mark);\n\nexport const equalNodeType = (nodeType: NodeType, node: Node) => {\n    return (Array.isArray(nodeType) && nodeType.indexOf(node.type) > -1) || node.type === nodeType;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport type { MarkType } from '@milkdown/prose';\n\nimport type { ButtonItem } from '../item';\nimport { hasMark, isTextAndNotHasMark } from './prosemirror';\n\nexport const createToggleIcon = (\n    ctx: Ctx,\n    iconName: Icon,\n    key: string,\n    mark: MarkType | undefined,\n    disableForMark: MarkType | undefined,\n): ButtonItem => ({\n    $: ctx.get(themeManagerCtx).get(ThemeIcon, iconName)?.dom as HTMLElement,\n    command: () => ctx.get(commandsCtx).call(key),\n    active: (view) => hasMark(view.state, mark),\n    disable: (view) => isTextAndNotHasMark(view.state, disableForMark),\n    enable: (view) => !!mark && !!view.state.schema.marks[mark.name],\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport { EditorView, Schema } from '@milkdown/prose';\n\nimport { createToggleIcon } from './utility';\n\nexport type Pred = (view: EditorView) => boolean;\nexport type Updater = (view: EditorView, $: HTMLElement) => void;\nexport type Event2Command = (e: Event) => void;\n\nexport type OnClick = (ctx: Ctx) => void;\n\nexport type Item = {\n    icon: Icon | ((ctx: Ctx) => HTMLElement);\n\n    onClick: string | ((ctx: Ctx) => () => void);\n\n    isHidden: (ctx: Ctx) => Pred;\n\n    isActive: (ctx: Ctx) => Pred;\n};\n\nexport type ButtonItem = {\n    $: HTMLElement;\n    command: () => void;\n    active: Pred;\n    disable?: Pred;\n    enable: Pred;\n};\n\nconst Buttonize = ({ icon, onClick, isHidden, isActive }: Item, ctx: Ctx): ButtonItem => ({\n    $: typeof icon === 'function' ? icon(ctx) : (ctx.get(themeManagerCtx).get(ThemeIcon, icon)?.dom as HTMLElement),\n    command: typeof onClick === 'string' ? () => ctx.get(commandsCtx).call(onClick) : onClick(ctx),\n    disable: isHidden(ctx),\n    active: isActive(ctx),\n    enable: (view: EditorView) => !isHidden(ctx)(view),\n});\n\nexport enum ButtonAction {\n    ToggleBold,\n    ToggleItalic,\n    ToggleStrike,\n    ToggleCode,\n    ToggleLink,\n}\n\nexport type ButtonMap = Record<ButtonAction, ButtonItem>;\n\nexport type TooltipOptions = {\n    bottom: boolean;\n    className: string;\n    items: Array<Item> | undefined;\n};\n\nexport const buttonMap = (schema: Schema, ctx: Ctx, items: Array<Item> | undefined): ButtonMap => {\n    const { marks } = schema;\n    const ButtonItems = Array<ButtonItem>();\n    if (typeof items !== 'undefined') {\n        (items as Array<Item>).forEach((item) => {\n            ButtonItems.push(Buttonize(item, ctx));\n        });\n    }\n    return {\n        [ButtonAction.ToggleBold]: createToggleIcon(ctx, 'bold', 'ToggleBold', marks['strong'], marks['code_inline']),\n        [ButtonAction.ToggleItalic]: createToggleIcon(ctx, 'italic', 'ToggleItalic', marks['em'], marks['code_inline']),\n        [ButtonAction.ToggleStrike]: createToggleIcon(\n            ctx,\n            'strikeThrough',\n            'ToggleStrikeThrough',\n            marks['strike_through'],\n            marks['code_inline'],\n        ),\n        [ButtonAction.ToggleCode]: createToggleIcon(\n            ctx,\n            'code',\n            'ToggleInlineCode',\n            marks['code_inline'],\n            marks['link'],\n        ),\n        [ButtonAction.ToggleLink]: createToggleIcon(ctx, 'link', 'ToggleLink', marks['link'], marks['code_inline']),\n        ...ButtonItems,\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { calculateTextPosition, EditorView } from '@milkdown/prose';\n\nexport const calcButtonPos = (buttons: HTMLElement, view: EditorView, isBottom: boolean) => {\n    buttons.classList.remove('hide');\n    calculateTextPosition(view, buttons, (start, end, target, parent) => {\n        const $editor = buttons.parentElement;\n        if (!$editor) {\n            throw new Error();\n        }\n        const selectionWidth = end.left - start.left;\n        let left = start.left - parent.left - (target.width - selectionWidth) / 2;\n        let top = start.top - parent.top - target.height - 14 + $editor.scrollTop;\n\n        if (left < 0) left = 0;\n\n        if (start.top - parent.top < target.height || (isBottom && parent.bottom - start.bottom > target.height)) {\n            top = start.bottom - parent.top + 14 + $editor.scrollTop;\n        }\n        return [top, left];\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Color, Emotion, ThemeBorder, ThemeColor, ThemeManager, ThemeShadow, ThemeSize } from '@milkdown/core';\n\nexport const injectStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n    const lineWidth = themeManager.get(ThemeSize, 'lineWidth');\n    return css`\n        display: inline-flex;\n        cursor: pointer;\n        justify-content: space-evenly;\n        position: absolute;\n        border-radius: ${themeManager.get(ThemeSize, 'radius')};\n        z-index: 2;\n\n        ${themeManager.get(ThemeBorder, undefined)}\n        ${themeManager.get(ThemeShadow, undefined)}\n\n        overflow: hidden;\n        background: ${palette('surface')};\n\n        .icon {\n            position: relative;\n            color: ${palette('solid', 0.87)};\n\n            width: 2em;\n            line-height: 2em;\n            text-align: center;\n            transition: all 0.4s ease-in-out;\n            &:hover {\n                background-color: ${palette('secondary', 0.12)};\n            }\n            &.active {\n                color: ${palette('primary')};\n            }\n            &:not(:last-child)::after {\n                content: '';\n                position: absolute;\n                top: 0;\n                right: calc(-0.5 * ${lineWidth});\n                width: ${lineWidth};\n                bottom: 0;\n                background: ${palette('line')};\n            }\n        }\n        &.hide,\n        .hide {\n            display: none;\n        }\n    `;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport type { ButtonMap } from '../item';\nimport { injectStyle } from './style';\n\ntype Tooltip = {\n    dom: HTMLDivElement;\n    render: (editorView: EditorView) => void;\n};\n\nexport const createTooltip = (buttonMap: ButtonMap, utils: Utils, className: string): Tooltip => {\n    const div = document.createElement('div');\n    utils.themeManager.onFlush(() => {\n        const style = utils.getStyle(injectStyle) || '';\n        if (style) {\n            div.classList.add(style);\n        }\n    });\n\n    div.classList.add(className);\n\n    return {\n        dom: div,\n        render: (editorView: EditorView) => {\n            Object.values(buttonMap)\n                .filter((item) => item.enable(editorView))\n                .forEach(({ $ }) => div.appendChild($));\n\n            editorView.dom.parentNode?.appendChild(div);\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { EditorView } from '@milkdown/prose';\n\nimport { ButtonMap } from '../item';\n\nexport const noActive = (buttonMap: ButtonMap, view: EditorView) => {\n    return Object.values(buttonMap)\n        .filter((item) => item.enable(view))\n        .every(({ $ }) => $.classList.contains('hide'));\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { EditorView } from '@milkdown/prose';\n\nimport { ButtonMap } from '../item';\nimport { noActive } from './no-active';\n\nexport const filterButton = (buttonMap: ButtonMap, view: EditorView) => {\n    Object.values(buttonMap)\n        .filter((item) => item.enable(view))\n        .forEach((item) => {\n            const disable = item.disable?.(view);\n            if (disable) {\n                item.$.classList.add('hide');\n                return;\n            }\n\n            item.$.classList.remove('hide');\n\n            const active = item.active(view);\n            if (active) {\n                item.$.classList.add('active');\n                return;\n            }\n            item.$.classList.remove('active');\n        });\n\n    return noActive(buttonMap, view);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport type { ButtonMap } from '../item';\nimport { calcButtonPos } from './calc-button-pos';\nimport { createTooltip } from './create-tooltip';\nimport { filterButton } from './filter-button';\n\nexport const createButtonManager = (\n    buttonMap: ButtonMap,\n    utils: Utils,\n    bottom: boolean,\n    containerClassName: string,\n) => {\n    const { dom: buttons, render } = createTooltip(buttonMap, utils, containerClassName);\n\n    const onClick = (e: Event) => {\n        const target = Object.values(buttonMap).find(({ $ }) => e.target instanceof Element && $.contains(e.target));\n        if (!target) return;\n\n        e.stopPropagation();\n        e.preventDefault();\n        target.command();\n    };\n\n    const hide = () => {\n        buttons.classList.add('hide');\n    };\n\n    buttons.addEventListener('mousedown', onClick);\n\n    return {\n        destroy: () => {\n            buttons.removeEventListener('mousedown', onClick);\n            buttons.remove();\n        },\n        hide,\n        update: (editorView: EditorView) => {\n            const noActive = filterButton(buttonMap, editorView);\n            if (noActive) {\n                hide();\n                return;\n            }\n            calcButtonPos(buttons, editorView, bottom);\n        },\n        render,\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorState, EditorView } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { createButtonManager } from './button-manager';\nimport type { ButtonMap } from './item';\n\nexport const createPlugin = (buttonMap: ButtonMap, utils: Utils, bottom: boolean, containerClassName: string) => {\n    const buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName);\n    let shouldHide = false;\n\n    const hide = () => {\n        buttonManager.hide();\n    };\n\n    const update = (view: EditorView, prevState?: EditorState) => {\n        const { state } = view;\n\n        if (!view.editable || shouldHide) {\n            hide();\n            return;\n        }\n\n        const isEqualSelection = prevState?.doc.eq(state.doc) && prevState.selection.eq(state.selection);\n        if (isEqualSelection) return;\n\n        buttonManager.update(view);\n    };\n\n    return {\n        update,\n        destroy: () => {\n            buttonManager.destroy();\n        },\n        render: (editorView: EditorView) => {\n            buttonManager.render(editorView);\n            update(editorView);\n        },\n        setHide: (isTyping: boolean) => {\n            shouldHide = isTyping;\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { schemaCtx } from '@milkdown/core';\nimport { Plugin, PluginKey } from '@milkdown/prose';\nimport { createPlugin as create } from '@milkdown/utils';\n\nimport { buttonMap, TooltipOptions } from './item';\nimport { createPlugin } from './selection-marks-tooltip';\n\nexport const key = new PluginKey('MILKDOWN_PLUGIN_TOOLTIP');\n\nexport const tooltip = create<string, TooltipOptions>((utils, options) => {\n    return {\n        id: 'tooltip',\n        prosePlugins: (_, ctx) => {\n            const schema = ctx.get(schemaCtx);\n            const manager = createPlugin(\n                buttonMap(schema, ctx, options?.items),\n                utils,\n                options?.bottom ?? false,\n                options?.className ?? 'tooltip',\n            );\n            const plugin = new Plugin({\n                key,\n                props: {\n                    handleKeyDown: () => {\n                        manager.setHide(true);\n                        return false;\n                    },\n                    handleClick: (view) => {\n                        manager.setHide(false);\n                        manager.update(view);\n                        return false;\n                    },\n                    handleDOMEvents: {\n                        mousedown: () => {\n                            manager.setHide(false);\n                            return false;\n                        },\n                    },\n                },\n                view: (editorView) => {\n                    manager.render(editorView);\n                    return {\n                        update: manager.update,\n                        destroy: manager.destroy,\n                    };\n                },\n            });\n            return [plugin];\n        },\n    };\n});\n"],"names":["create"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/utility/prosemirror.ts","../src/utility/toggle.ts","../src/item.ts","../src/button-manager/calc-button-pos.ts","../src/button-manager/style.ts","../src/button-manager/create-tooltip.ts","../src/button-manager/no-active.ts","../src/button-manager/filter-button.ts","../src/button-manager/index.ts","../src/selection-marks-tooltip.ts","../src/index.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { EditorState, findParentNode, MarkType, Node, NodeType, TextSelection } from '@milkdown/prose';\n\nexport type Position = {\n    start: number;\n    end: number;\n};\n\nexport const hasMark = (editorState: EditorState, type?: MarkType): boolean => {\n    if (!type) {\n        return false;\n    }\n    const { from, to } = editorState.selection;\n\n    return editorState.doc.rangeHasMark(from, from === to ? to + 1 : to, type);\n};\n\nexport const isTextSelection = (editorState: EditorState): boolean => {\n    const { selection } = editorState;\n    if (selection instanceof TextSelection) {\n        const text = editorState.doc.textBetween(selection.from, selection.to);\n\n        if (!text) return false;\n\n        return true;\n    }\n    return false;\n};\n\nexport const isInCodeFence = (editorState: EditorState): boolean =>\n    Boolean(findParentNode((node) => !!node.type.spec.code)(editorState.selection));\n\nexport const isTextAndNotHasMark = (editorState: EditorState, mark?: MarkType): boolean =>\n    !isTextSelection(editorState) || isInCodeFence(editorState) || hasMark(editorState, mark);\n\nexport const equalNodeType = (nodeType: NodeType, node: Node) => {\n    return (Array.isArray(nodeType) && nodeType.indexOf(node.type) > -1) || node.type === nodeType;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport type { MarkType } from '@milkdown/prose';\n\nimport type { ButtonItem } from '../item';\nimport { hasMark, isTextAndNotHasMark } from './prosemirror';\n\nexport const createToggleIcon = (\n    ctx: Ctx,\n    iconName: Icon,\n    key: string,\n    mark: MarkType | undefined,\n    disableForMark: MarkType | undefined,\n): ButtonItem => ({\n    $: ctx.get(themeManagerCtx).get(ThemeIcon, iconName)?.dom as HTMLElement,\n    command: () => ctx.get(commandsCtx).call(key),\n    active: (view) => hasMark(view.state, mark),\n    disable: (view) => isTextAndNotHasMark(view.state, disableForMark),\n    enable: (view) => !!mark && !!view.state.schema.marks[mark.name],\n});\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { commandsCtx, Ctx, ThemeIcon, themeManagerCtx } from '@milkdown/core';\nimport type { Icon } from '@milkdown/design-system';\nimport { EditorView, Schema } from '@milkdown/prose';\n\nimport { createToggleIcon } from './utility';\n\nexport type Pred = (view: EditorView) => boolean;\nexport type Updater = (view: EditorView, $: HTMLElement) => void;\nexport type Event2Command = (e: Event) => void;\n\nexport type OnClick = (ctx: Ctx) => void;\n\nexport type Item = {\n    icon: Icon | ((ctx: Ctx) => HTMLElement);\n\n    onClick: string | ((ctx: Ctx) => () => void);\n\n    isHidden: (ctx: Ctx) => Pred;\n\n    isActive: (ctx: Ctx) => Pred;\n};\n\nexport type ButtonItem = {\n    $: HTMLElement;\n    command: () => void;\n    active: Pred;\n    disable?: Pred;\n    enable: Pred;\n};\n\nconst Buttonize = ({ icon, onClick, isHidden, isActive }: Item, ctx: Ctx): ButtonItem => ({\n    $: typeof icon === 'function' ? icon(ctx) : (ctx.get(themeManagerCtx).get(ThemeIcon, icon)?.dom as HTMLElement),\n    command: typeof onClick === 'string' ? () => ctx.get(commandsCtx).call(onClick) : onClick(ctx),\n    disable: isHidden(ctx),\n    active: isActive(ctx),\n    enable: (view: EditorView) => !isHidden(ctx)(view),\n});\n\nexport enum ButtonAction {\n    ToggleBold,\n    ToggleItalic,\n    ToggleStrike,\n    ToggleCode,\n    ToggleLink,\n}\n\nexport type ButtonMap = Record<ButtonAction, ButtonItem>;\n\nexport type TooltipOptions = {\n    bottom: boolean;\n    items: Array<Item> | undefined;\n};\n\nexport const buttonMap = (schema: Schema, ctx: Ctx, items: Array<Item> | undefined): ButtonMap => {\n    const { marks } = schema;\n    const ButtonItems = Array<ButtonItem>();\n    if (typeof items !== 'undefined') {\n        (items as Array<Item>).forEach((item) => {\n            ButtonItems.push(Buttonize(item, ctx));\n        });\n    }\n    return {\n        [ButtonAction.ToggleBold]: createToggleIcon(ctx, 'bold', 'ToggleBold', marks['strong'], marks['code_inline']),\n        [ButtonAction.ToggleItalic]: createToggleIcon(ctx, 'italic', 'ToggleItalic', marks['em'], marks['code_inline']),\n        [ButtonAction.ToggleStrike]: createToggleIcon(\n            ctx,\n            'strikeThrough',\n            'ToggleStrikeThrough',\n            marks['strike_through'],\n            marks['code_inline'],\n        ),\n        [ButtonAction.ToggleCode]: createToggleIcon(\n            ctx,\n            'code',\n            'ToggleInlineCode',\n            marks['code_inline'],\n            marks['link'],\n        ),\n        [ButtonAction.ToggleLink]: createToggleIcon(ctx, 'link', 'ToggleLink', marks['link'], marks['code_inline']),\n        ...ButtonItems,\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { calculateTextPosition, EditorView } from '@milkdown/prose';\n\nexport const calcButtonPos = (buttons: HTMLElement, view: EditorView, isBottom: boolean) => {\n    buttons.classList.remove('hide');\n    calculateTextPosition(view, buttons, (start, end, target, parent) => {\n        const $editor = buttons.parentElement;\n        if (!$editor) {\n            throw new Error();\n        }\n        const selectionWidth = end.left - start.left;\n        let left = start.left - parent.left - (target.width - selectionWidth) / 2;\n        let top = start.top - parent.top - target.height - 14 + $editor.scrollTop;\n\n        if (left < 0) left = 0;\n\n        if (start.top - parent.top < target.height || (isBottom && parent.bottom - start.bottom > target.height)) {\n            top = start.bottom - parent.top + 14 + $editor.scrollTop;\n        }\n        return [top, left];\n    });\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { Color, Emotion, ThemeBorder, ThemeColor, ThemeManager, ThemeShadow, ThemeSize } from '@milkdown/core';\n\nexport const injectStyle = (themeManager: ThemeManager, { css }: Emotion) => {\n    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);\n    const lineWidth = themeManager.get(ThemeSize, 'lineWidth');\n    return css`\n        display: inline-flex;\n        cursor: pointer;\n        justify-content: space-evenly;\n        position: absolute;\n        border-radius: ${themeManager.get(ThemeSize, 'radius')};\n        z-index: 2;\n\n        ${themeManager.get(ThemeBorder, undefined)}\n        ${themeManager.get(ThemeShadow, undefined)}\n\n        overflow: hidden;\n        background: ${palette('surface')};\n\n        .icon {\n            position: relative;\n            color: ${palette('solid', 0.87)};\n\n            width: 2em;\n            line-height: 2em;\n            text-align: center;\n            transition: all 0.4s ease-in-out;\n            &:hover {\n                background-color: ${palette('secondary', 0.12)};\n            }\n            &.active {\n                color: ${palette('primary')};\n            }\n            &:not(:last-child)::after {\n                content: '';\n                position: absolute;\n                top: 0;\n                right: calc(-0.5 * ${lineWidth});\n                width: ${lineWidth};\n                bottom: 0;\n                background: ${palette('line')};\n            }\n        }\n        &.hide,\n        .hide {\n            display: none;\n        }\n    `;\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport type { ButtonMap } from '../item';\nimport { injectStyle } from './style';\n\ntype Tooltip = {\n    dom: HTMLDivElement;\n    render: (editorView: EditorView) => void;\n};\n\nexport const createTooltip = (buttonMap: ButtonMap, utils: Utils, className: string): Tooltip => {\n    const div = document.createElement('div');\n    utils.themeManager.onFlush(() => {\n        const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion)) || '';\n        if (style) {\n            div.classList.add(style);\n        }\n    });\n\n    div.classList.add(utils.getClassName({}, className));\n\n    return {\n        dom: div,\n        render: (editorView: EditorView) => {\n            Object.values(buttonMap)\n                .filter((item) => item.enable(editorView) && item.$ != null)\n                .forEach(({ $ }) => div.appendChild($));\n\n            editorView.dom.parentNode?.appendChild(div);\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { EditorView } from '@milkdown/prose';\n\nimport { ButtonMap } from '../item';\n\nexport const noActive = (buttonMap: ButtonMap, view: EditorView) => {\n    return Object.values(buttonMap)\n        .filter((item) => item.enable(view) && item.$ != null)\n        .every(({ $ }) => $.classList.contains('hide'));\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { EditorView } from '@milkdown/prose';\n\nimport { ButtonMap } from '../item';\nimport { noActive } from './no-active';\n\nexport const filterButton = (buttonMap: ButtonMap, view: EditorView) => {\n    Object.values(buttonMap)\n        .filter((item) => item.enable(view) && item.$ != null)\n        .forEach((item) => {\n            const disable = item.disable?.(view);\n            if (disable) {\n                item.$.classList.add('hide');\n                return;\n            }\n\n            item.$.classList.remove('hide');\n\n            const active = item.active(view);\n            if (active) {\n                item.$.classList.add('active');\n                return;\n            }\n            item.$.classList.remove('active');\n        });\n\n    return noActive(buttonMap, view);\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorView } from '@milkdown/prose';\nimport type { Utils } from '@milkdown/utils';\n\nimport type { ButtonMap } from '../item';\nimport { calcButtonPos } from './calc-button-pos';\nimport { createTooltip } from './create-tooltip';\nimport { filterButton } from './filter-button';\n\nexport const createButtonManager = (\n    buttonMap: ButtonMap,\n    utils: Utils,\n    bottom: boolean,\n    containerClassName: string,\n) => {\n    const { dom: buttons, render } = createTooltip(buttonMap, utils, containerClassName);\n\n    const onClick = (e: Event) => {\n        const target = Object.values(buttonMap).find(({ $ }) => e.target instanceof Element && $.contains(e.target));\n        if (!target) return;\n\n        e.stopPropagation();\n        e.preventDefault();\n        target.command();\n    };\n\n    const hide = () => {\n        buttons.classList.add('hide');\n    };\n\n    buttons.addEventListener('mousedown', onClick);\n\n    return {\n        destroy: () => {\n            buttons.removeEventListener('mousedown', onClick);\n            buttons.remove();\n        },\n        hide,\n        update: (editorView: EditorView) => {\n            const noActive = filterButton(buttonMap, editorView);\n            if (noActive) {\n                hide();\n                return;\n            }\n            calcButtonPos(buttons, editorView, bottom);\n        },\n        render,\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { EditorState, EditorView } from '@milkdown/prose';\nimport { Utils } from '@milkdown/utils';\n\nimport { createButtonManager } from './button-manager';\nimport type { ButtonMap } from './item';\n\nexport const createPlugin = (buttonMap: ButtonMap, utils: Utils, bottom: boolean, containerClassName: string) => {\n    let buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName);\n    let shouldHide = false;\n\n    const hide = () => {\n        buttonManager.hide();\n    };\n\n    const update = (view: EditorView, prevState?: EditorState) => {\n        const { state } = view;\n\n        if (!view.editable || shouldHide) {\n            hide();\n            return;\n        }\n\n        const isEqualSelection = prevState?.doc.eq(state.doc) && prevState.selection.eq(state.selection);\n        if (isEqualSelection) return;\n\n        buttonManager.update(view);\n    };\n\n    return {\n        recreate: (editorView: EditorView) => {\n            buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName);\n            buttonManager.render(editorView);\n            update(editorView);\n        },\n        update,\n        destroy: () => {\n            buttonManager.destroy();\n        },\n        render: (editorView: EditorView) => {\n            buttonManager.render(editorView);\n            update(editorView);\n        },\n        setHide: (isTyping: boolean) => {\n            shouldHide = isTyping;\n        },\n    };\n};\n","/* Copyright 2021, Milkdown by Mirone. */\nimport { schemaCtx } from '@milkdown/core';\nimport { Plugin, PluginKey } from '@milkdown/prose';\nimport { AtomList, createPlugin as create } from '@milkdown/utils';\n\nimport { buttonMap, TooltipOptions } from './item';\nimport { createPlugin } from './selection-marks-tooltip';\n\nexport const key = new PluginKey('MILKDOWN_PLUGIN_TOOLTIP');\n\nexport const tooltipPlugin = create<string, TooltipOptions>((utils, options) => {\n    return {\n        id: 'tooltip',\n        prosePlugins: (_, ctx) => {\n            const schema = ctx.get(schemaCtx);\n            const manager = createPlugin(\n                buttonMap(schema, ctx, options?.items),\n                utils,\n                options?.bottom ?? false,\n                'tooltip',\n            );\n            const plugin = new Plugin({\n                key,\n                props: {\n                    handleKeyDown: () => {\n                        manager.setHide(true);\n                        return false;\n                    },\n                    handleClick: (view) => {\n                        manager.setHide(false);\n                        manager.update(view);\n                        return false;\n                    },\n                    handleDOMEvents: {\n                        mousedown: () => {\n                            manager.setHide(false);\n                            return false;\n                        },\n                    },\n                },\n                view: (editorView) => {\n                    manager.recreate(editorView);\n                    return {\n                        update: manager.update,\n                        destroy: manager.destroy,\n                    };\n                },\n            });\n            return [plugin];\n        },\n    };\n});\n\nexport const tooltip = AtomList.create([tooltipPlugin()]);\n"],"names":["create"],"mappings":"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"}

package/lib/item.d.ts

@@ -28,7 +28,6 @@ export declare enum ButtonAction {
 export declare type ButtonMap = Record<ButtonAction, ButtonItem>;
 export declare type TooltipOptions = {
     bottom: boolean;
-    className: string;
     items: Array<Item> | undefined;
 };
 export declare const buttonMap: (schema: Schema, ctx: Ctx, items: Array<Item> | undefined) => ButtonMap;

package/lib/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../src/item.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,GAAG,EAA8B,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIrD,oBAAY,IAAI,GAAG,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;AACjD,oBAAY,OAAO,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;AACjE,oBAAY,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;AAE/C,oBAAY,OAAO,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;AAEzC,oBAAY,IAAI,GAAG;IACf,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,WAAW,CAAC,CAAC;IAEzC,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC;IAE7C,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE7B,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,UAAU,GAAG;IACrB,CAAC,EAAE,WAAW,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;CAChB,CAAC;AAUF,oBAAY,YAAY;IACpB,UAAU,IAAA;IACV,YAAY,IAAA;IACZ,YAAY,IAAA;IACZ,UAAU,IAAA;IACV,UAAU,IAAA;CACb;AAED,oBAAY,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAEzD,oBAAY,cAAc,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,SAAS,WAAY,MAAM,OAAO,GAAG,SAAS,MAAM,IAAI,CAAC,GAAG,SAAS,KAAG,SA4BpF,CAAC"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../src/item.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,GAAG,EAA8B,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAIrD,oBAAY,IAAI,GAAG,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;AACjD,oBAAY,OAAO,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,WAAW,KAAK,IAAI,CAAC;AACjE,oBAAY,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;AAE/C,oBAAY,OAAO,GAAG,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;AAEzC,oBAAY,IAAI,GAAG;IACf,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,WAAW,CAAC,CAAC;IAEzC,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,IAAI,CAAC,CAAC;IAE7C,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAE7B,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,UAAU,GAAG;IACrB,CAAC,EAAE,WAAW,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;CAChB,CAAC;AAUF,oBAAY,YAAY;IACpB,UAAU,IAAA;IACV,YAAY,IAAA;IACZ,YAAY,IAAA;IACZ,UAAU,IAAA;IACV,UAAU,IAAA;CACb;AAED,oBAAY,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAEzD,oBAAY,cAAc,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,SAAS,WAAY,MAAM,OAAO,GAAG,SAAS,MAAM,IAAI,CAAC,GAAG,SAAS,KAAG,SA4BpF,CAAC"}

package/lib/selection-marks-tooltip.d.ts

@@ -2,6 +2,7 @@ import type { EditorState, EditorView } from '@milkdown/prose';
 import { Utils } from '@milkdown/utils';
 import type { ButtonMap } from './item';
 export declare const createPlugin: (buttonMap: ButtonMap, utils: Utils, bottom: boolean, containerClassName: string) => {
+    recreate: (editorView: EditorView) => void;
     update: (view: EditorView, prevState?: EditorState<any> | undefined) => void;
     destroy: () => void;
     render: (editorView: EditorView) => void;

package/lib/selection-marks-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection-marks-tooltip.d.ts","sourceRoot":"","sources":["../src/selection-marks-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAGxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,eAAO,MAAM,YAAY,cAAe,SAAS,SAAS,KAAK,UAAU,OAAO,sBAAsB,MAAM;mBAQlF,UAAU;;yBAmBP,UAAU;wBAIX,OAAO;CAIlC,CAAC"}
+{"version":3,"file":"selection-marks-tooltip.d.ts","sourceRoot":"","sources":["../src/selection-marks-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAGxC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,eAAO,MAAM,YAAY,cAAe,SAAS,SAAS,KAAK,UAAU,OAAO,sBAAsB,MAAM;2BAuB7E,UAAU;mBAff,UAAU;;yBAwBP,UAAU;wBAIX,OAAO;CAIlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/plugin-tooltip",
-  "version": "6.0.0-next.1",
+  "version": "6.0.2",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -15,16 +15,16 @@
     "milkdown plugin"
   ],
   "devDependencies": {
-    "@milkdown/core": "6.0.0-next.1",
-    "@milkdown/prose": "6.0.0-next.1",
-    "@milkdown/design-system": "6.0.0-next.1"
+    "@milkdown/core": "6.0.2",
+    "@milkdown/prose": "6.0.2",
+    "@milkdown/design-system": "6.0.2"
   },
   "peerDependencies": {
-    "@milkdown/core": "^6.0.0-next.0",
-    "@milkdown/prose": "^6.0.0-next.0"
+    "@milkdown/core": "^6.0.1",
+    "@milkdown/prose": "^6.0.1"
   },
   "dependencies": {
-    "@milkdown/utils": "6.0.0-next.1",
+    "@milkdown/utils": "6.0.2",
     "tslib": "^2.3.1"
   },
   "nx": {

package/src/button-manager/create-tooltip.ts

@@ -13,19 +13,19 @@ type Tooltip = {
 export const createTooltip = (buttonMap: ButtonMap, utils: Utils, className: string): Tooltip => {
     const div = document.createElement('div');
     utils.themeManager.onFlush(() => {
-        const style = utils.getStyle(injectStyle) || '';
+        const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion)) || '';
         if (style) {
             div.classList.add(style);
         }
     });
 
-    div.classList.add(className);
+    div.classList.add(utils.getClassName({}, className));
 
     return {
         dom: div,
         render: (editorView: EditorView) => {
             Object.values(buttonMap)
-                .filter((item) => item.enable(editorView))
+                .filter((item) => item.enable(editorView) && item.$ != null)
                 .forEach(({ $ }) => div.appendChild($));
 
             editorView.dom.parentNode?.appendChild(div);

package/src/button-manager/filter-button.ts

@@ -6,7 +6,7 @@ import { noActive } from './no-active';
 
 export const filterButton = (buttonMap: ButtonMap, view: EditorView) => {
     Object.values(buttonMap)
-        .filter((item) => item.enable(view))
+        .filter((item) => item.enable(view) && item.$ != null)
         .forEach((item) => {
             const disable = item.disable?.(view);
             if (disable) {

package/src/button-manager/no-active.ts

@@ -5,6 +5,6 @@ import { ButtonMap } from '../item';
 
 export const noActive = (buttonMap: ButtonMap, view: EditorView) => {
     return Object.values(buttonMap)
-        .filter((item) => item.enable(view))
+        .filter((item) => item.enable(view) && item.$ != null)
         .every(({ $ }) => $.classList.contains('hide'));
 };

package/src/index.ts

@@ -1,14 +1,14 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { schemaCtx } from '@milkdown/core';
 import { Plugin, PluginKey } from '@milkdown/prose';
-import { createPlugin as create } from '@milkdown/utils';
+import { AtomList, createPlugin as create } from '@milkdown/utils';
 
 import { buttonMap, TooltipOptions } from './item';
 import { createPlugin } from './selection-marks-tooltip';
 
 export const key = new PluginKey('MILKDOWN_PLUGIN_TOOLTIP');
 
-export const tooltip = create<string, TooltipOptions>((utils, options) => {
+export const tooltipPlugin = create<string, TooltipOptions>((utils, options) => {
     return {
         id: 'tooltip',
         prosePlugins: (_, ctx) => {
@@ -17,7 +17,7 @@ export const tooltip = create<string, TooltipOptions>((utils, options) => {
                 buttonMap(schema, ctx, options?.items),
                 utils,
                 options?.bottom ?? false,
-                options?.className ?? 'tooltip',
+                'tooltip',
             );
             const plugin = new Plugin({
                 key,
@@ -39,7 +39,7 @@ export const tooltip = create<string, TooltipOptions>((utils, options) => {
                     },
                 },
                 view: (editorView) => {
-                    manager.render(editorView);
+                    manager.recreate(editorView);
                     return {
                         update: manager.update,
                         destroy: manager.destroy,
@@ -50,3 +50,5 @@ export const tooltip = create<string, TooltipOptions>((utils, options) => {
         },
     };
 });
+
+export const tooltip = AtomList.create([tooltipPlugin()]);

package/src/item.ts

@@ -49,7 +49,6 @@ export type ButtonMap = Record<ButtonAction, ButtonItem>;
 
 export type TooltipOptions = {
     bottom: boolean;
-    className: string;
     items: Array<Item> | undefined;
 };
 

package/src/selection-marks-tooltip.ts

@@ -6,7 +6,7 @@ import { createButtonManager } from './button-manager';
 import type { ButtonMap } from './item';
 
 export const createPlugin = (buttonMap: ButtonMap, utils: Utils, bottom: boolean, containerClassName: string) => {
-    const buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName);
+    let buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName);
     let shouldHide = false;
 
     const hide = () => {
@@ -28,6 +28,11 @@ export const createPlugin = (buttonMap: ButtonMap, utils: Utils, bottom: boolean
     };
 
     return {
+        recreate: (editorView: EditorView) => {
+            buttonManager = createButtonManager(buttonMap, utils, bottom, containerClassName);
+            buttonManager.render(editorView);
+            update(editorView);
+        },
         update,
         destroy: () => {
             buttonManager.destroy();