@milkdown/plugin-slash 4.11.2 → 4.13.2

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@milkdown/plugin-slash",
-  "version": "4.11.2",
+  "version": "4.13.2",
   "main": "lib/index.js",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "milkdown",
@@ -19,7 +20,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
-    "@milkdown/utils": "4.11.2",
+    "@milkdown/utils": "4.13.2",
     "smooth-scroll-into-view-if-needed": "^1.1.32",
     "tslib": "^2.2.0"
   },

package/src/config.ts

@@ -0,0 +1,96 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { commandsCtx, themeToolCtx } from '@milkdown/core';
+import {
+    InsertHr,
+    InsertImage,
+    InsertTable,
+    TurnIntoCodeFence,
+    TurnIntoHeading,
+    TurnIntoTaskList,
+    WrapInBlockquote,
+    WrapInBulletList,
+    WrapInOrderedList,
+} from '@milkdown/preset-gfm';
+
+import type { SlashConfig } from '.';
+import { createDropdownItem, nodeExists } from './utility';
+
+export const config: SlashConfig = ({ ctx }) => [
+    {
+        id: 'h1',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Large Heading', 'h1'),
+        command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 1),
+        keyword: ['h1', 'large heading'],
+        enable: nodeExists('heading'),
+    },
+    {
+        id: 'h2',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Medium Heading', 'h2'),
+        command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 2),
+        keyword: ['h2', 'medium heading'],
+        enable: nodeExists('heading'),
+    },
+    {
+        id: 'h3',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Small Heading', 'h3'),
+        command: () => ctx.get(commandsCtx).call(TurnIntoHeading, 3),
+        keyword: ['h3', 'small heading'],
+        enable: nodeExists('heading'),
+    },
+    {
+        id: 'bulletList',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Bullet List', 'bulletList'),
+        command: () => ctx.get(commandsCtx).call(WrapInBulletList),
+        keyword: ['bullet list', 'ul'],
+        enable: nodeExists('bullet_list'),
+    },
+    {
+        id: 'orderedList',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Ordered List', 'orderedList'),
+        command: () => ctx.get(commandsCtx).call(WrapInOrderedList),
+        keyword: ['ordered list', 'ol'],
+        enable: nodeExists('ordered_list'),
+    },
+    {
+        id: 'taskList',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Task List', 'taskList'),
+        command: () => ctx.get(commandsCtx).call(TurnIntoTaskList),
+        keyword: ['task list', 'task'],
+        enable: nodeExists('task_list_item'),
+    },
+    {
+        id: 'image',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Image', 'image'),
+        command: () => ctx.get(commandsCtx).call(InsertImage),
+        keyword: ['image'],
+        enable: nodeExists('image'),
+    },
+    {
+        id: 'blockquote',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Quote', 'quote'),
+        command: () => ctx.get(commandsCtx).call(WrapInBlockquote),
+        keyword: ['quote', 'blockquote'],
+        enable: nodeExists('blockquote'),
+    },
+    {
+        id: 'table',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Table', 'table'),
+        command: () => ctx.get(commandsCtx).call(InsertTable),
+        keyword: ['table'],
+        enable: nodeExists('table'),
+    },
+    {
+        id: 'code',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Code Fence', 'code'),
+        command: () => ctx.get(commandsCtx).call(TurnIntoCodeFence),
+        keyword: ['code'],
+        enable: nodeExists('fence'),
+    },
+    {
+        id: 'divider',
+        dom: createDropdownItem(ctx.get(themeToolCtx), 'Divide Line', 'divider'),
+        command: () => ctx.get(commandsCtx).call(InsertHr),
+        keyword: ['divider', 'hr'],
+        enable: nodeExists('hr'),
+    },
+];

package/src/index.ts

@@ -0,0 +1,34 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { AtomList, createProsePlugin, Utils } from '@milkdown/utils';
+
+import { config } from './config';
+import { WrappedAction } from './item';
+import { createSlashPlugin } from './prose-plugin';
+import { CursorStatus } from './prose-plugin/status';
+
+export { config } from './config';
+export { CursorStatus } from './prose-plugin/status';
+export { createDropdownItem, nodeExists } from './utility';
+
+export type SlashConfig = (utils: Utils) => WrappedAction[];
+
+export type Options = {
+    config: SlashConfig;
+    placeholder: {
+        [CursorStatus.Empty]: string;
+        [CursorStatus.Slash]: string;
+    };
+};
+export const slashPlugin = createProsePlugin<Options>((options, utils) => {
+    const slashConfig = options?.config ?? config;
+    const placeholder = {
+        [CursorStatus.Empty]: 'Type / to use the slash commands...',
+        [CursorStatus.Slash]: 'Type to filter...',
+        ...(options?.placeholder ?? {}),
+    };
+    const cfg = slashConfig(utils);
+
+    return createSlashPlugin(utils, cfg, placeholder);
+});
+
+export const slash = AtomList.create([slashPlugin()]);

package/src/item.ts

@@ -0,0 +1,27 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { Command } from 'prosemirror-commands';
+import type { Schema } from 'prosemirror-model';
+
+import { cleanUpAndCreateNode } from './utility';
+
+export type Action = {
+    id: string;
+    $: HTMLElement;
+    keyword: string[];
+    command: Command;
+    enable: (schema: Schema) => boolean;
+};
+
+export type WrappedAction = Pick<Action, 'keyword' | 'id'> & {
+    enable: (schema: Schema) => boolean;
+    command: () => void;
+    dom: HTMLElement;
+};
+
+export const transformAction = (action: WrappedAction): Action => ({
+    id: action.id,
+    keyword: action.keyword,
+    $: action.dom,
+    command: cleanUpAndCreateNode(action.command),
+    enable: action.enable,
+});

package/src/prose-plugin/dropdown.ts

@@ -0,0 +1,49 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+
+import { Action } from '../item';
+import { Status } from './status';
+
+export const renderDropdown = (status: Status, dropdownElement: HTMLElement, items: Action[]): boolean => {
+    const { filter } = status.get();
+
+    if (!status.isSlash()) {
+        dropdownElement.classList.add('hide');
+        return false;
+    }
+
+    const activeList = items
+        .filter((item) => {
+            item.$.classList.remove('active');
+            const result = item.keyword.some((key) => key.includes(filter.toLocaleLowerCase()));
+            if (result) {
+                return true;
+            }
+            item.$.classList.add('hide');
+            return false;
+        })
+        .map((item) => {
+            item.$.classList.remove('hide');
+            return item;
+        });
+
+    status.setActions(activeList);
+
+    if (activeList.length === 0) {
+        dropdownElement.classList.add('hide');
+        return false;
+    }
+
+    dropdownElement.classList.remove('hide');
+
+    activeList[0].$.classList.add('active');
+    requestAnimationFrame(() => {
+        scrollIntoView(activeList[0].$, {
+            scrollMode: 'if-needed',
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    });
+
+    return true;
+};

package/src/prose-plugin/index.ts

@@ -0,0 +1,21 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Utils } from '@milkdown/utils';
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+import { transformAction, WrappedAction } from '../item';
+import { createProps } from './props';
+import { createStatus, CursorStatus } from './status';
+import { createView } from './view';
+
+export const key = 'MILKDOWN_PLUGIN_SLASH';
+
+export const createSlashPlugin = (utils: Utils, items: WrappedAction[], placeholder: Record<CursorStatus, string>) => {
+    const status = createStatus();
+    const actions = items.map(transformAction);
+
+    return new Plugin({
+        key: new PluginKey(key),
+        props: createProps(status, utils, placeholder),
+        view: (view) => createView(status, actions, view, utils),
+    });
+};

package/src/prose-plugin/input.ts

@@ -0,0 +1,120 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { EditorView } from 'prosemirror-view';
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+
+import { Action } from '../item';
+import { Status } from './status';
+
+export const createMouseManager = () => {
+    let mouseLock = false;
+
+    return {
+        isLock: () => mouseLock,
+        lock: () => {
+            mouseLock = true;
+        },
+        unlock: () => {
+            mouseLock = false;
+        },
+    };
+};
+export type MouseManager = ReturnType<typeof createMouseManager>;
+
+export const handleMouseMove = (mouseManager: MouseManager) => () => {
+    mouseManager.unlock();
+};
+
+export const handleMouseEnter = (status: Status, mouseManager: MouseManager) => (e: MouseEvent) => {
+    if (mouseManager.isLock()) return;
+    const active = status.get().activeActions.findIndex((x) => x.$.classList.contains('active'));
+    if (active >= 0) {
+        status.get().activeActions[active].$.classList.remove('active');
+    }
+    const { target } = e;
+    if (!(target instanceof HTMLElement)) return;
+    target.classList.add('active');
+};
+
+export const handleMouseLeave = () => (e: MouseEvent) => {
+    const { target } = e;
+    if (!(target instanceof HTMLElement)) return;
+    target.classList.remove('active');
+};
+
+export const handleClick =
+    (status: Status, items: Action[], view: EditorView, dropdownElement: HTMLElement) =>
+    (e: Event): void => {
+        const { target } = e;
+        if (!(target instanceof HTMLElement)) return;
+        if (!view) return;
+
+        const stop = () => {
+            e.stopPropagation();
+            e.preventDefault();
+        };
+
+        const el = Object.values(items).find(({ $ }) => $.contains(target));
+        if (!el) {
+            if (status.isEmpty()) return;
+
+            status.clearStatus();
+            dropdownElement.classList.add('hide');
+            stop();
+
+            return;
+        }
+
+        stop();
+        el.command(view.state, view.dispatch, view);
+    };
+
+export const handleKeydown =
+    (status: Status, view: EditorView, dropdownElement: HTMLElement, mouseManager: MouseManager) => (e: Event) => {
+        if (!(e instanceof KeyboardEvent)) return;
+        if (!mouseManager.isLock()) mouseManager.lock();
+
+        const { key } = e;
+        if (!status.isSlash()) return;
+        if (!['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(key)) return;
+
+        const { activeActions } = status.get();
+
+        let active = activeActions.findIndex(({ $ }) => $.classList.contains('active'));
+        if (active < 0) active = 0;
+
+        const moveActive = (next: number) => {
+            activeActions[active].$.classList.remove('active');
+            activeActions[next].$.classList.add('active');
+            scrollIntoView(activeActions[next].$, {
+                scrollMode: 'if-needed',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        };
+
+        if (key === 'ArrowDown') {
+            const next = active === activeActions.length - 1 ? 0 : active + 1;
+
+            moveActive(next);
+            return;
+        }
+
+        if (key === 'ArrowUp') {
+            const next = active === 0 ? activeActions.length - 1 : active - 1;
+
+            moveActive(next);
+            return;
+        }
+
+        if (key === 'Escape') {
+            if (status.isEmpty()) return;
+
+            status.clearStatus();
+            dropdownElement.classList.add('hide');
+            return;
+        }
+
+        activeActions[active].command(view.state, view.dispatch, view);
+        activeActions[active].$.classList.remove('active');
+    };

package/src/prose-plugin/props.ts

@@ -0,0 +1,97 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { ThemeTool } from '@milkdown/core';
+import { findParentNode, Utils } from '@milkdown/utils';
+import { EditorState } from 'prosemirror-state';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
+
+import { CursorStatus, Status } from './status';
+
+export type Props = ReturnType<typeof createProps>;
+
+const createEmptyStyle = ({ font, palette }: ThemeTool) => css`
+    position: relative;
+    &::before {
+        position: absolute;
+        cursor: text;
+        font-family: ${font.typography};
+        font-size: 0.875rem;
+        color: ${palette('neutral', 0.6)};
+        content: attr(data-text);
+        height: 100%;
+        display: flex;
+        align-items: center;
+    }
+`;
+
+const createSlashStyle = () => css`
+    &::before {
+        left: 0.5rem;
+    }
+`;
+
+export const createProps = (status: Status, utils: Utils, placeholder: Record<CursorStatus, string>) => {
+    const emptyStyle = utils.getStyle(createEmptyStyle);
+    const slashStyle = utils.getStyle(createSlashStyle);
+
+    return {
+        handleKeyDown: (_: EditorView, event: Event) => {
+            const { cursorStatus, activeActions } = status.get();
+            if (cursorStatus !== CursorStatus.Slash || activeActions.length === 0) {
+                return false;
+            }
+            if (!(event instanceof KeyboardEvent)) {
+                return false;
+            }
+
+            if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+                return false;
+            }
+
+            return true;
+        },
+        decorations: (state: EditorState) => {
+            const parent = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);
+            const isTopLevel = state.selection.$from.depth === 1;
+
+            if (!parent || parent.node.childCount > 1 || !isTopLevel) {
+                status.clearStatus();
+                return;
+            }
+
+            const isEmpty = parent.node.content.size === 0;
+            const isSlash = parent.node.textContent === '/' && state.selection.$from.parentOffset > 0;
+            const isSearch = parent.node.textContent.startsWith('/') && state.selection.$from.parentOffset > 1;
+
+            const createDecoration = (text: string, className: (string | undefined)[]) => {
+                const pos = parent.pos;
+                return DecorationSet.create(state.doc, [
+                    Decoration.node(pos, pos + parent.node.nodeSize, {
+                        class: className.filter((x) => x).join(' '),
+                        'data-text': text,
+                    }),
+                ]);
+            };
+
+            if (isEmpty) {
+                status.clearStatus();
+                const text = placeholder[CursorStatus.Empty];
+                return createDecoration(text, [emptyStyle, 'empty-node']);
+            }
+
+            if (isSlash) {
+                status.setSlash();
+                const text = placeholder[CursorStatus.Slash];
+                return createDecoration(text, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);
+            }
+
+            if (isSearch) {
+                status.setSlash(parent.node.textContent.slice(1));
+                return null;
+            }
+
+            status.clearStatus();
+            return null;
+        },
+    };
+};

package/src/prose-plugin/status.ts

@@ -0,0 +1,47 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Action } from '../item';
+
+export enum CursorStatus {
+    Empty = 'empty',
+    Slash = 'slash',
+}
+
+export type StatusCtx = {
+    cursorStatus: CursorStatus;
+    filter: string;
+    activeActions: Action[];
+};
+
+const createStatusCtx = (): StatusCtx => {
+    return {
+        cursorStatus: CursorStatus.Empty,
+        filter: '',
+        activeActions: [],
+    };
+};
+
+const clearStatus = (status: StatusCtx) => {
+    status.cursorStatus = CursorStatus.Empty;
+    status.filter = '';
+};
+
+const setSlash = (status: StatusCtx, filter = '') => {
+    status.cursorStatus = CursorStatus.Slash;
+    status.filter = filter;
+};
+
+export type Status = ReturnType<typeof createStatus>;
+
+export const createStatus = () => {
+    const statusCtx = createStatusCtx();
+    return {
+        clearStatus: () => clearStatus(statusCtx),
+        setSlash: (filter = '') => setSlash(statusCtx, filter),
+        setActions: (actions: Action[]) => {
+            statusCtx.activeActions = actions;
+        },
+        get: () => statusCtx,
+        isEmpty: () => statusCtx.cursorStatus === CursorStatus.Empty,
+        isSlash: () => statusCtx.cursorStatus === CursorStatus.Slash,
+    };
+};

package/src/prose-plugin/view.ts

@@ -0,0 +1,75 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { calculateNodePosition, Utils } from '@milkdown/utils';
+import { EditorView } from 'prosemirror-view';
+
+import { Action } from '../item';
+import { createDropdown } from '../utility';
+import { renderDropdown } from './dropdown';
+import {
+    createMouseManager,
+    handleClick,
+    handleKeydown,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleMouseMove,
+} from './input';
+import { Status } from './status';
+
+const calculatePosition = (view: EditorView, dropdownElement: HTMLElement) => {
+    calculateNodePosition(view, dropdownElement, (selected, target, parent) => {
+        let left = selected.left - parent.left;
+        let top = selected.bottom - parent.top + 14;
+
+        if (left < 0) {
+            left = 0;
+        }
+
+        if (window.innerHeight - selected.bottom < target.height) {
+            top = selected.top - parent.top - target.height - 14;
+        }
+        return [top, left];
+    });
+};
+
+export const createView = (status: Status, items: Action[], view: EditorView, utils: Utils) => {
+    const wrapper = view.dom.parentNode;
+    if (!wrapper) return {};
+
+    const dropdownElement = createDropdown(utils);
+    const mouseManager = createMouseManager();
+    wrapper.appendChild(dropdownElement);
+
+    const _mouseMove = handleMouseMove(mouseManager);
+    const _mouseDown = handleClick(status, items, view, dropdownElement);
+    const _keydown = handleKeydown(status, view, dropdownElement, mouseManager);
+    const _mouseEnter = handleMouseEnter(status, mouseManager);
+    const _mouseLeave = handleMouseLeave();
+
+    items
+        .filter((item) => item.enable(view.state.schema))
+        .forEach(({ $ }) => {
+            $.addEventListener('mouseenter', _mouseEnter);
+            $.addEventListener('mouseleave', _mouseLeave);
+            dropdownElement.appendChild($);
+        });
+    wrapper.addEventListener('mousemove', _mouseMove);
+    wrapper.addEventListener('mousedown', _mouseDown);
+    wrapper.addEventListener('keydown', _keydown);
+
+    return {
+        update: (view: EditorView) => {
+            const show = renderDropdown(status, dropdownElement, items);
+
+            if (!show) return;
+
+            calculatePosition(view, dropdownElement);
+        },
+
+        destroy: () => {
+            wrapper.removeEventListener('mousemove', _mouseMove);
+            wrapper.removeEventListener('mousedown', _mouseDown);
+            wrapper.removeEventListener('keydown', _keydown);
+            dropdownElement.remove();
+        },
+    };
+};

package/src/style.ts

@@ -0,0 +1,63 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { css } from '@emotion/css';
+import { ThemeTool } from '@milkdown/core';
+
+const itemStyle = ({ font, palette }: ThemeTool) => {
+    return css`
+        .slash-dropdown-item {
+            display: flex;
+            gap: 2rem;
+            height: 3rem;
+            padding: 0 1rem;
+            align-items: center;
+            justify-content: flex-start;
+            cursor: pointer;
+            line-height: 2;
+            font-family: ${font.typography};
+            font-size: 0.875rem;
+
+            transition: all 0.2s ease-in-out;
+
+            &,
+            .icon {
+                color: ${palette('neutral', 0.87)};
+                transition: all 0.2s ease-in-out;
+            }
+
+            &.hide {
+                display: none;
+            }
+
+            &.active {
+                background: ${palette('secondary', 0.12)};
+                &,
+                .icon {
+                    color: ${palette('primary')};
+                }
+            }
+            `;
+};
+
+export const injectStyle = (themeTool: ThemeTool) => {
+    const { mixin, size, palette } = themeTool;
+    const style = css`
+        width: 20.5rem;
+        max-height: 20.5rem;
+        overflow-y: auto;
+        ${mixin.border?.()};
+        border-radius: ${size.radius};
+        position: absolute;
+        background: ${palette('surface')};
+
+        ${mixin.shadow?.()};
+
+        &.hide {
+            display: none;
+        }
+
+        ${mixin.scrollbar?.()};
+
+        ${itemStyle(themeTool)}
+    `;
+    return style;
+};

package/src/utility.ts

@@ -0,0 +1,76 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import type { ThemeTool } from '@milkdown/core';
+import type { Icon } from '@milkdown/design-system';
+import type { Utils } from '@milkdown/utils';
+import type { Command } from 'prosemirror-commands';
+import type { Node, Schema } from 'prosemirror-model';
+
+import { injectStyle } from './style';
+
+export const createDropdown = (utils: Utils) => {
+    const div = document.createElement('div');
+    div.setAttribute('role', 'listbox');
+    div.setAttribute('tabindex', '-1');
+    const style = utils.getStyle(injectStyle);
+
+    if (style) {
+        div.classList.add(style);
+    }
+
+    div.classList.add('slash-dropdown', 'hide');
+
+    return div;
+};
+
+type ItemOptions = {
+    textClassName: string;
+};
+export const createDropdownItem = (themeTool: ThemeTool, text: string, icon: Icon, options?: Partial<ItemOptions>) => {
+    const textClassName = options?.textClassName ?? 'text';
+
+    const div = document.createElement('div');
+    div.setAttribute('role', 'option');
+    div.classList.add('slash-dropdown-item');
+
+    const iconSpan = themeTool.slots.icon(icon);
+
+    const textSpan = document.createElement('span');
+    textSpan.textContent = text;
+    textSpan.className = textClassName;
+
+    div.appendChild(iconSpan);
+    div.appendChild(textSpan);
+
+    return div;
+};
+
+export const getDepth = (node: Node) => {
+    let cur = node;
+    let depth = 0;
+    while (cur.childCount) {
+        cur = cur.child(0);
+        depth += 1;
+    }
+
+    return depth;
+};
+
+const cleanUp: Command = (state, dispatch) => {
+    const { selection } = state;
+    const { $from } = selection;
+    const tr = state.tr.deleteRange($from.start(), $from.pos);
+    dispatch?.(tr);
+    return false;
+};
+
+export const cleanUpAndCreateNode =
+    (createCommand: () => void): Command =>
+    (state, dispatch, view) => {
+        if (view) {
+            cleanUp(state, dispatch, view);
+            createCommand();
+        }
+        return true;
+    };
+
+export const nodeExists = (name: string) => (schema: Schema) => Boolean(schema.nodes[name]);