@milkdown/plugin-slash 6.5.0 → 6.5.3

package/src/prose-plugin/input.ts

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

package/src/prose-plugin/props.ts

@@ -1,19 +1,21 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { Color, Emotion, ThemeColor, ThemeFont, ThemeManager } from '@milkdown/core';
-import { findParentNode } from '@milkdown/prose';
-import { EditorState } from '@milkdown/prose/state';
-import { Decoration, DecorationSet, EditorView } from '@milkdown/prose/view';
-import { ThemeUtils } from '@milkdown/utils';
+import type { Color, Emotion, ThemeManager } from '@milkdown/core'
+import { ThemeColor, ThemeFont } from '@milkdown/core'
+import { findParentNode } from '@milkdown/prose'
+import type { EditorState } from '@milkdown/prose/state'
+import type { EditorView } from '@milkdown/prose/view'
+import { Decoration, DecorationSet } from '@milkdown/prose/view'
+import type { ThemeUtils } from '@milkdown/utils'
 
-import type { Status } from './status';
+import type { Status } from './status'
 
-export type Props = ReturnType<typeof createProps>;
+export type Props = ReturnType<typeof createProps>
 
 const createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {
-    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
-    const typography = themeManager.get(ThemeFont, 'typography');
+  const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity])
+  const typography = themeManager.get(ThemeFont, 'typography')
 
-    return css`
+  return css`
         position: relative;
         &::before {
             position: absolute;
@@ -26,81 +28,77 @@ const createEmptyStyle = (themeManager: ThemeManager, { css }: Emotion) => {
             display: flex;
             align-items: center;
         }
-    `;
-};
+    `
+}
 
 const createSlashStyle = (_: ThemeManager, { css }: Emotion) => css`
     &::before {
         left: 8px;
     }
-`;
+`
 
 export const createProps = (status: Status, utils: ThemeUtils) => {
-    return {
-        handleKeyDown: (_: EditorView, event: Event) => {
-            if (status.isEmpty()) {
-                return false;
-            }
-            if (!(event instanceof KeyboardEvent)) {
-                return false;
-            }
-
-            if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
-                return false;
-            }
-
-            return true;
-        },
-        decorations: (state: EditorState) => {
-            const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection);
-            const uploadPlugin = state.plugins.find(
-                (x) => (x as unknown as { key: string }).key === 'MILKDOWN_UPLOAD$',
-            );
-            const decorations: DecorationSet = uploadPlugin?.getState(state);
-            if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {
-                status.clear();
-                return null;
-            }
-
-            if (
-                !paragraph ||
-                paragraph.node.childCount > 1 ||
-                state.selection.$from.parentOffset !== paragraph.node.textContent.length ||
-                (paragraph.node.firstChild && paragraph.node.firstChild.type.name !== 'text')
-            ) {
-                status.clear();
-                return null;
-            }
-
-            const { placeholder, actions } = status.update({
-                parentNode: state.selection.$from.node(state.selection.$from.depth - 1),
-                isTopLevel: state.selection.$from.depth === 1,
-                content: paragraph.node.textContent,
-                state,
-            });
-
-            if (!placeholder) {
-                return null;
-            }
-
-            const createDecoration = (text: string, className: (string | undefined)[]) => {
-                const pos = paragraph.pos;
-                return DecorationSet.create(state.doc, [
-                    Decoration.node(pos, pos + paragraph.node.nodeSize, {
-                        class: className.filter((x) => x).join(' '),
-                        'data-text': text,
-                    }),
-                ]);
-            };
-
-            const emptyStyle = utils.getStyle((emotion) => createEmptyStyle(utils.themeManager, emotion));
-            const slashStyle = utils.getStyle((emotion) => createSlashStyle(utils.themeManager, emotion));
-
-            if (actions.length) {
-                return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash']);
-            }
-
-            return createDecoration(placeholder, [emptyStyle, 'empty-node']);
-        },
-    };
-};
+  return {
+    handleKeyDown: (_: EditorView, event: Event) => {
+      if (status.isEmpty())
+        return false
+
+      if (!(event instanceof KeyboardEvent))
+        return false
+
+      if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key))
+        return false
+
+      return true
+    },
+    decorations: (state: EditorState) => {
+      const paragraph = findParentNode(({ type }) => type.name === 'paragraph')(state.selection)
+      const uploadPlugin = state.plugins.find(
+        x => (x as unknown as { key: string }).key === 'MILKDOWN_UPLOAD$',
+      )
+      const decorations: DecorationSet = uploadPlugin?.getState(state)
+      if (decorations != null && decorations.find(state.selection.from, state.selection.to).length > 0) {
+        status.clear()
+        return null
+      }
+
+      if (
+        !paragraph
+                || paragraph.node.childCount > 1
+                || state.selection.$from.parentOffset !== paragraph.node.textContent.length
+                || (paragraph.node.firstChild && paragraph.node.firstChild.type.name !== 'text')
+      ) {
+        status.clear()
+        return null
+      }
+
+      const { placeholder, actions } = status.update({
+        parentNode: state.selection.$from.node(state.selection.$from.depth - 1),
+        isTopLevel: state.selection.$from.depth === 1,
+        content: paragraph.node.textContent,
+        state,
+      })
+
+      if (!placeholder)
+        return null
+
+      const createDecoration = (text: string, className: (string | undefined)[]) => {
+        const pos = paragraph.pos
+        return DecorationSet.create(state.doc, [
+          Decoration.node(pos, pos + paragraph.node.nodeSize, {
+            'class': className.filter(x => x).join(' '),
+            'data-text': text,
+          }),
+        ])
+      }
+
+      const emptyStyle = utils.getStyle(emotion => createEmptyStyle(utils.themeManager, emotion))
+      const slashStyle = utils.getStyle(emotion => createSlashStyle(utils.themeManager, emotion))
+
+      if (actions.length)
+        return createDecoration(placeholder, [emptyStyle, slashStyle, 'empty-node', 'is-slash'])
+
+      return createDecoration(placeholder, [emptyStyle, 'empty-node'])
+    },
+  }
+}

package/src/prose-plugin/status.ts

@@ -1,36 +1,37 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { StatusConfigBuilder, StatusConfigBuilderParams } from '..';
-import { Action, transformAction } from '../item';
+import type { StatusConfigBuilder, StatusConfigBuilderParams } from '..'
+import type { Action } from '../item'
+import { transformAction } from '../item'
 
-export type StatusCtx = {
-    placeholder: string | null;
-    actions: Action[];
-};
+export interface StatusCtx {
+  placeholder: string | null
+  actions: Action[]
+}
 
 const createStatusCtx = (): StatusCtx => {
-    return {
-        placeholder: null,
-        actions: [],
-    };
-};
+  return {
+    placeholder: null,
+    actions: [],
+  }
+}
 
-export type Status = ReturnType<typeof createStatus>;
+export type Status = ReturnType<typeof createStatus>
 
 export const createStatus = (builder: StatusConfigBuilder) => {
-    const statusCtx = createStatusCtx();
+  const statusCtx = createStatusCtx()
 
-    return {
-        get: () => statusCtx,
-        clear: () => {
-            statusCtx.placeholder = null;
-            statusCtx.actions = [];
-        },
-        update: (builderParams: StatusConfigBuilderParams) => {
-            const config = builder(builderParams);
-            statusCtx.placeholder = config?.placeholder ?? null;
-            statusCtx.actions = (config?.actions ?? []).map(transformAction);
-            return statusCtx;
-        },
-        isEmpty: () => statusCtx.actions.length === 0,
-    };
-};
+  return {
+    get: () => statusCtx,
+    clear: () => {
+      statusCtx.placeholder = null
+      statusCtx.actions = []
+    },
+    update: (builderParams: StatusConfigBuilderParams) => {
+      const config = builder(builderParams)
+      statusCtx.placeholder = config?.placeholder ?? null
+      statusCtx.actions = (config?.actions ?? []).map(transformAction)
+      return statusCtx
+    },
+    isEmpty: () => statusCtx.actions.length === 0,
+  }
+}