@milkdown/plugin-tooltip 4.11.2 → 4.13.2

package/src/selection-marks-tooltip.ts

@@ -0,0 +1,50 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Utils } from '@milkdown/utils';
+import type { EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+
+import { createButtonManager } from './button-manager';
+import { createInputManager } from './input-manager';
+import type { ButtonMap, InputMap } from './item';
+
+export const createPlugin = (buttonMap: ButtonMap, inputMap: InputMap, utils: Utils) => {
+    const buttonManager = createButtonManager(buttonMap, utils);
+    const inputManager = createInputManager(inputMap, utils);
+    let shouldHide = false;
+
+    const hide = () => {
+        buttonManager.hide();
+        inputManager.hide();
+    };
+
+    const update = (view: EditorView, prevState?: EditorState) => {
+        const { state } = view;
+
+        if (!view.editable || shouldHide) {
+            hide();
+            return;
+        }
+
+        const isEqualSelection = prevState?.doc.eq(state.doc) && prevState.selection.eq(state.selection);
+        if (isEqualSelection) return;
+
+        buttonManager.update(view);
+        inputManager.update(view);
+    };
+
+    return {
+        update,
+        destroy: () => {
+            buttonManager.destroy();
+            inputManager.destroy();
+        },
+        render: (editorView: EditorView) => {
+            buttonManager.render(editorView);
+            inputManager.render(editorView);
+            update(editorView);
+        },
+        setHide: (isTyping: boolean) => {
+            shouldHide = isTyping;
+        },
+    };
+};

package/src/utility/element.ts

@@ -0,0 +1,3 @@
+/* Copyright 2021, Milkdown by Mirone. */
+export const elementIsTag = (element: HTMLElement, tagName: string): boolean =>
+    element.tagName === tagName.toUpperCase();

package/src/utility/index.ts

@@ -0,0 +1,5 @@
+/* Copyright 2021, Milkdown by Mirone. */
+export * from './element';
+export * from './input';
+export * from './prosemirror';
+export * from './toggle';

package/src/utility/input.ts

@@ -0,0 +1,133 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { commandsCtx, Ctx } from '@milkdown/core';
+import { ModifyInlineMath } from '@milkdown/plugin-math';
+import { ModifyImage, ModifyLink } from '@milkdown/preset-commonmark';
+import { findChildren } from '@milkdown/utils';
+import { Node as ProseNode } from 'prosemirror-model';
+
+import { Event2Command, Updater } from '../item';
+import { elementIsTag } from './element';
+
+export const modifyLink =
+    (ctx: Ctx): Event2Command =>
+    (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).call(ModifyLink, inputEl.value);
+    };
+
+export const modifyInlineMath =
+    (ctx: Ctx): Event2Command =>
+    (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).call(ModifyInlineMath, inputEl.value);
+    };
+
+export const modifyImage =
+    (ctx: Ctx): Event2Command =>
+    (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).call(ModifyImage, inputEl.value);
+    };
+
+export const updateLinkView: Updater = (view, $) => {
+    const { marks } = view.state.schema;
+    const { firstChild, lastElementChild } = $;
+    if (!(firstChild instanceof HTMLInputElement) || !(lastElementChild instanceof HTMLButtonElement)) return;
+
+    const { selection } = view.state;
+    let node: ProseNode | undefined;
+    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');
+    }
+};
+
+export const updateInlineMathView: Updater = (view, $) => {
+    const { nodes } = view.state.schema;
+    const { firstChild, lastElementChild } = $;
+    if (!(firstChild instanceof HTMLInputElement) || !(lastElementChild instanceof HTMLButtonElement)) return;
+
+    const node = findChildren((node) => node.type === nodes.math_inline)(view.state.selection.$from.node())[0]?.node;
+    if (!node) return;
+
+    const value = node.attrs.value;
+    firstChild.value = value;
+    if (!value) {
+        lastElementChild.classList.add('disable');
+        return;
+    }
+    if (lastElementChild.classList.contains('disable')) {
+        lastElementChild.classList.remove('disable');
+    }
+};
+
+export const updateImageView: Updater = (view, $) => {
+    const { nodes } = view.state.schema;
+    const { firstChild, lastElementChild } = $;
+    if (!(firstChild instanceof HTMLInputElement) || !(lastElementChild instanceof HTMLButtonElement)) return;
+
+    const node = findChildren((node) => node.type === nodes.image)(view.state.selection.$from.node())[0]?.node;
+    if (!node) return;
+
+    const value = node.attrs.src;
+    firstChild.value = value;
+    if (!value) {
+        lastElementChild.classList.add('disable');
+        return;
+    }
+    if (lastElementChild.classList.contains('disable')) {
+        lastElementChild.classList.remove('disable');
+    }
+};

package/src/utility/prosemirror.ts

@@ -0,0 +1,37 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { findParentNode } from '@milkdown/utils';
+import type { MarkType, Node, NodeType } from 'prosemirror-model';
+import { EditorState, TextSelection } from 'prosemirror-state';
+
+export type Position = {
+    start: number;
+    end: number;
+};
+
+export const hasMark = (editorState: EditorState, type: MarkType): boolean => {
+    const { from, to } = editorState.selection;
+
+    return editorState.doc.rangeHasMark(from, from === to ? to + 1 : to, type);
+};
+
+export const isTextSelection = (editorState: EditorState): boolean => {
+    const { selection } = editorState;
+    if (selection instanceof TextSelection) {
+        const text = editorState.doc.textBetween(selection.from, selection.to);
+
+        if (!text) return false;
+
+        return true;
+    }
+    return false;
+};
+
+export const isInCodeFence = (editorState: EditorState): boolean =>
+    Boolean(findParentNode((node) => !!node.type.spec.code)(editorState.selection));
+
+export const isTextAndNotHasMark = (editorState: EditorState, mark: MarkType): boolean =>
+    !isTextSelection(editorState) || isInCodeFence(editorState) || hasMark(editorState, mark);
+
+export const equalNodeType = (nodeType: NodeType, node: Node) => {
+    return (Array.isArray(nodeType) && nodeType.indexOf(node.type) > -1) || node.type === nodeType;
+};

package/src/utility/toggle.ts

@@ -0,0 +1,21 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { CmdKey, commandsCtx, Ctx, themeToolCtx } from '@milkdown/core';
+import type { Icon } from '@milkdown/design-system';
+import type { MarkType } from 'prosemirror-model';
+
+import type { ButtonItem } from '../item';
+import { hasMark, isTextAndNotHasMark } from './prosemirror';
+
+export const createToggleIcon = <T>(
+    ctx: Ctx,
+    iconName: Icon,
+    commandKey: CmdKey<T>,
+    mark: MarkType,
+    disableForMark: MarkType,
+): ButtonItem => ({
+    $: ctx.get(themeToolCtx).slots.icon(iconName),
+    command: () => ctx.get(commandsCtx).call(commandKey),
+    active: (view) => hasMark(view.state, mark),
+    disable: (view) => isTextAndNotHasMark(view.state, disableForMark),
+    enable: (view) => !!mark && !!view.state.schema.marks[mark.name],
+});