@milkdown/plugin-slash 6.5.2 → 6.5.4

package/src/prose-plugin/view.ts

@@ -1,110 +1,112 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { missingRootElement } from '@milkdown/exception';
-import { calculateNodePosition } from '@milkdown/prose';
-import { EditorView } from '@milkdown/prose/view';
-import { ThemeUtils } from '@milkdown/utils';
+import { missingRootElement } from '@milkdown/exception'
+import { calculateNodePosition } from '@milkdown/prose'
+import type { EditorView } from '@milkdown/prose/view'
+import type { ThemeUtils } from '@milkdown/utils'
 
-import { createDropdown } from '../utility';
-import { renderDropdown } from './dropdown';
+import { createDropdown } from '../utility'
+import { renderDropdown } from './dropdown'
 import {
-    createMouseManager,
-    handleClick,
-    handleKeydown,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleMouseMove,
-} from './input';
-import { Status } from './status';
+  createMouseManager,
+  handleClick,
+  handleKeydown,
+  handleMouseEnter,
+  handleMouseLeave,
+  handleMouseMove,
+} from './input'
+import type { Status } from './status'
 
 export const defaultCalcPosition = (view: EditorView, dropdownElement: HTMLElement) => {
-    calculateNodePosition(view, dropdownElement, (selected, target, parent) => {
-        const $editor = dropdownElement.parentElement;
-        if (!$editor) {
-            throw missingRootElement();
-        }
-
-        let left = selected.left - parent.left;
-
-        if (left < 0) {
-            left = 0;
-        }
-
-        let direction: 'top' | 'bottom';
-        let maxHeight: number | undefined;
-        const selectedToTop = selected.top - parent.top;
-        const selectedToBottom = parent.height + parent.top - selected.bottom;
-        if (selectedToBottom >= target.height + 28) {
-            direction = 'bottom';
-        } else if (selectedToTop >= target.height + 28) {
-            direction = 'top';
-        } else if (selectedToBottom >= selectedToTop) {
-            direction = 'bottom';
-            maxHeight = selectedToBottom - 28;
-        } else {
-            direction = 'top';
-            maxHeight = selectedToTop - 28;
-        }
-        if (selectedToTop < 0 || selectedToBottom < 0) {
-            maxHeight = parent.height - selected.height - 28;
-            if (maxHeight > target.height) {
-                maxHeight = undefined;
-            }
-        }
-
-        const top =
-            direction === 'top'
-                ? selected.top - parent.top - (maxHeight ?? target.height) - 14 + $editor.scrollTop
-                : selected.bottom - parent.top + 14 + $editor.scrollTop;
-
-        dropdownElement.style.maxHeight = maxHeight !== undefined && maxHeight > 0 ? `${maxHeight}px` : '';
-
-        return [top, left];
-    });
-};
-
-export type CalcPosition = (view: EditorView, dropdownElement: HTMLElement) => void;
+  calculateNodePosition(view, dropdownElement, (selected, target, parent) => {
+    const $editor = dropdownElement.parentElement
+    if (!$editor)
+      throw missingRootElement()
+
+    let left = selected.left - parent.left
+
+    if (left < 0)
+      left = 0
+
+    let direction: 'top' | 'bottom'
+    let maxHeight: number | undefined
+    const selectedToTop = selected.top - parent.top
+    const selectedToBottom = parent.height + parent.top - selected.bottom
+    if (selectedToBottom >= target.height + 28) {
+      direction = 'bottom'
+    }
+    else if (selectedToTop >= target.height + 28) {
+      direction = 'top'
+    }
+    else if (selectedToBottom >= selectedToTop) {
+      direction = 'bottom'
+      maxHeight = selectedToBottom - 28
+    }
+    else {
+      direction = 'top'
+      maxHeight = selectedToTop - 28
+    }
+    if (selectedToTop < 0 || selectedToBottom < 0) {
+      maxHeight = parent.height - selected.height - 28
+      if (maxHeight > target.height)
+        maxHeight = undefined
+    }
+
+    const top
+            = direction === 'top'
+              ? selected.top - parent.top - (maxHeight ?? target.height) - 14 + $editor.scrollTop
+              : selected.bottom - parent.top + 14 + $editor.scrollTop
+
+    dropdownElement.style.maxHeight = maxHeight !== undefined && maxHeight > 0 ? `${maxHeight}px` : ''
+
+    return [top, left]
+  })
+}
+
+export type CalcPosition = (view: EditorView, dropdownElement: HTMLElement) => void
 
 export const createView = (
-    status: Status,
-    view: EditorView,
-    utils: ThemeUtils,
-    className: string,
-    calcPosition: CalcPosition,
+  status: Status,
+  view: EditorView,
+  utils: ThemeUtils,
+  className: string,
+  calcPosition: CalcPosition,
 ) => {
-    const wrapper = view.dom.parentNode;
-    if (!wrapper) return {};
-
-    const dropdownElement = createDropdown(utils, className);
-    const mouseManager = createMouseManager();
-    wrapper.appendChild(dropdownElement);
-
-    const _mouseMove = handleMouseMove(mouseManager);
-    const _mouseDown = handleClick(status, view, dropdownElement);
-    const _keydown = handleKeydown(status, view, dropdownElement, mouseManager);
-    const _mouseEnter = handleMouseEnter(status, mouseManager);
-    const _mouseLeave = handleMouseLeave();
-
-    wrapper.addEventListener('mousemove', _mouseMove);
-    wrapper.addEventListener('mousedown', _mouseDown);
-    wrapper.addEventListener('keydown', _keydown);
-
-    return {
-        update: (view: EditorView) => {
-            const show = renderDropdown(status, dropdownElement, {
-                mouseEnter: _mouseEnter as EventListener,
-                mouseLeave: _mouseLeave as EventListener,
-            });
-
-            if (!show) return;
-
-            calcPosition(view, dropdownElement);
-        },
-
-        destroy: () => {
-            wrapper.removeEventListener('mousemove', _mouseMove);
-            wrapper.removeEventListener('mousedown', _mouseDown);
-            wrapper.removeEventListener('keydown', _keydown);
-            dropdownElement.remove();
-        },
-    };
-};
+  const wrapper = view.dom.parentNode
+  if (!wrapper)
+    return {}
+
+  const dropdownElement = createDropdown(utils, className)
+  const mouseManager = createMouseManager()
+  wrapper.appendChild(dropdownElement)
+
+  const _mouseMove = handleMouseMove(mouseManager)
+  const _mouseDown = handleClick(status, view, dropdownElement)
+  const _keydown = handleKeydown(status, view, dropdownElement, mouseManager)
+  const _mouseEnter = handleMouseEnter(status, mouseManager)
+  const _mouseLeave = handleMouseLeave()
+
+  wrapper.addEventListener('mousemove', _mouseMove)
+  wrapper.addEventListener('mousedown', _mouseDown)
+  wrapper.addEventListener('keydown', _keydown)
+
+  return {
+    update: (view: EditorView) => {
+      const show = renderDropdown(status, dropdownElement, {
+        mouseEnter: _mouseEnter as EventListener,
+        mouseLeave: _mouseLeave as EventListener,
+      })
+
+      if (!show)
+        return
+
+      calcPosition(view, dropdownElement)
+    },
+
+    destroy: () => {
+      wrapper.removeEventListener('mousemove', _mouseMove)
+      wrapper.removeEventListener('mousedown', _mouseDown)
+      wrapper.removeEventListener('keydown', _keydown)
+      dropdownElement.remove()
+    },
+  }
+}

package/src/style.ts

@@ -1,19 +1,21 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import type {
+  Color,
+  Emotion,
+  ThemeManager,
+} from '@milkdown/core'
 import {
-    Color,
-    Emotion,
-    ThemeBorder,
-    ThemeColor,
-    ThemeFont,
-    ThemeManager,
-    ThemeScrollbar,
-    ThemeShadow,
-    ThemeSize,
-} from '@milkdown/core';
+  ThemeBorder,
+  ThemeColor,
+  ThemeFont,
+  ThemeScrollbar,
+  ThemeShadow,
+  ThemeSize,
+} from '@milkdown/core'
 
 const itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {
-    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
-    return css`
+  const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity])
+  return css`
         .slash-dropdown-item {
             display: flex;
             gap: 32px;
@@ -46,13 +48,13 @@ const itemStyle = (themeManager: ThemeManager, { css }: Emotion) => {
                 }
             }
         }
-    `;
-};
+    `
+}
 
 export const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {
-    const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity]);
+  const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity])
 
-    return emotion.css`
+  return emotion.css`
         width: 320px;
         min-height: 48px;
         max-height: 320px;
@@ -70,5 +72,5 @@ export const injectStyle = (themeManager: ThemeManager, emotion: Emotion) => {
         }
 
         ${itemStyle(themeManager, emotion)}
-    `;
-};
+    `
+}

package/src/utility.ts

@@ -1,86 +1,85 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { ThemeIcon, ThemeManager } from '@milkdown/core';
-import type { Icon } from '@milkdown/design-system';
-import { missingIcon } from '@milkdown/exception';
-import type { Node } from '@milkdown/prose/model';
-import type { Command } from '@milkdown/prose/state';
-import type { ThemeUtils } from '@milkdown/utils';
+import type { ThemeManager } from '@milkdown/core'
+import { ThemeIcon } from '@milkdown/core'
+import type { Icon } from '@milkdown/design-system'
+import { missingIcon } from '@milkdown/exception'
+import type { Node } from '@milkdown/prose/model'
+import type { Command } from '@milkdown/prose/state'
+import type { ThemeUtils } from '@milkdown/utils'
 
-import { injectStyle } from './style';
+import { injectStyle } from './style'
 
 export const createDropdown = (utils: ThemeUtils, className: string) => {
-    const div = document.createElement('div');
-    div.setAttribute('role', 'listbox');
-    div.setAttribute('tabindex', '-1');
-    utils.themeManager.onFlush(() => {
-        const style = utils.getStyle((emotion) => injectStyle(utils.themeManager, emotion));
-
-        if (style) {
-            div.classList.add(style);
-        }
-    });
+  const div = document.createElement('div')
+  div.setAttribute('role', 'listbox')
+  div.setAttribute('tabindex', '-1')
+  utils.themeManager.onFlush(() => {
+    const style = utils.getStyle(emotion => injectStyle(utils.themeManager, emotion))
+
+    if (style)
+      div.classList.add(style)
+  })
 
-    div.classList.add(utils.getClassName({}, className), 'hide');
+  div.classList.add(utils.getClassName({}, className), 'hide')
 
-    return div;
-};
+  return div
+}
 
-type ItemOptions = {
-    textClassName: string;
-};
+interface ItemOptions {
+  textClassName: string
+}
 export const createDropdownItem = (
-    themeManager: ThemeManager,
-    text: string,
-    icon: Icon,
-    options?: Partial<ItemOptions>,
+  themeManager: ThemeManager,
+  text: string,
+  icon: Icon,
+  options?: Partial<ItemOptions>,
 ) => {
-    const textClassName = options?.textClassName ?? 'text';
+  const textClassName = options?.textClassName ?? 'text'
 
-    const div = document.createElement('div');
-    div.setAttribute('role', 'option');
-    div.classList.add('slash-dropdown-item');
+  const div = document.createElement('div')
+  div.setAttribute('role', 'option')
+  div.classList.add('slash-dropdown-item')
 
-    const iconSpan = themeManager.get(ThemeIcon, icon);
+  const iconSpan = themeManager.get(ThemeIcon, icon)
 
-    if (!iconSpan) {
-        throw missingIcon(icon);
-    }
+  if (!iconSpan)
+    throw missingIcon(icon)
 
-    const textSpan = document.createElement('span');
-    textSpan.textContent = text;
-    textSpan.className = textClassName;
+  const textSpan = document.createElement('span')
+  textSpan.textContent = text
+  textSpan.className = textClassName
 
-    div.appendChild(iconSpan.dom);
-    div.appendChild(textSpan);
+  div.appendChild(iconSpan.dom)
+  div.appendChild(textSpan)
 
-    return div;
-};
+  return div
+}
 
 export const getDepth = (node: Node) => {
-    let cur = node;
-    let depth = 0;
-    while (cur.childCount) {
-        cur = cur.child(0);
-        depth += 1;
-    }
+  let cur = node
+  let depth = 0
+  while (cur.childCount) {
+    cur = cur.child(0)
+    depth += 1
+  }
 
-    return depth;
-};
+  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) => {
+  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();
+          cleanUp(state, dispatch, view)
+          createCommand()
         }
-        return true;
-    };
+        return true
+      }