@milkdown/plugin-slash 6.5.4 → 7.0.0-next.0

package/src/prose-plugin/index.ts

@@ -1,26 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import { Plugin, PluginKey } from '@milkdown/prose/state'
-import type { ThemeUtils } from '@milkdown/utils'
-
-import type { StatusConfigBuilder } from '..'
-import { createProps } from './props'
-import { createStatus } from './status'
-import type { CalcPosition } from './view'
-import { createView } from './view'
-
-export const key = 'MILKDOWN_SLASH'
-
-export const createSlashPlugin = (
-  utils: ThemeUtils,
-  builder: StatusConfigBuilder,
-  className: string,
-  calcPosition: CalcPosition,
-) => {
-  const status = createStatus(builder)
-
-  return new Plugin({
-    key: new PluginKey(key),
-    props: createProps(status, utils),
-    view: view => createView(status, view, utils, className, calcPosition),
-  })
-}

package/src/prose-plugin/input.ts

@@ -1,142 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-
-import type { EditorView } from '@milkdown/prose/view'
-import scrollIntoView from 'smooth-scroll-into-view-if-needed'
-
-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>
-
-export const handleMouseMove = (mouseManager: MouseManager) => () => {
-  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')
-}
-
-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 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
-        }
-
-        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,104 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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'
-
-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')
-
-  return css`
-        position: relative;
-        &::before {
-            position: absolute;
-            cursor: text;
-            font-family: ${typography};
-            font-size: 14px;
-            color: ${palette('neutral', 0.6)};
-            content: attr(data-text);
-            height: 100%;
-            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'])
-    },
-  }
-}

package/src/prose-plugin/status.ts

@@ -1,37 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type { StatusConfigBuilder, StatusConfigBuilderParams } from '..'
-import type { Action } from '../item'
-import { transformAction } from '../item'
-
-export interface StatusCtx {
-  placeholder: string | null
-  actions: Action[]
-}
-
-const createStatusCtx = (): StatusCtx => {
-  return {
-    placeholder: null,
-    actions: [],
-  }
-}
-
-export type Status = ReturnType<typeof createStatus>
-
-export const createStatus = (builder: StatusConfigBuilder) => {
-  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,
-  }
-}

package/src/prose-plugin/view.ts

@@ -1,112 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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 {
-  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
-
-export const createView = (
-  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()
-    },
-  }
-}

package/src/style.ts

@@ -1,76 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-import type {
-  Color,
-  Emotion,
-  ThemeManager,
-} from '@milkdown/core'
-import {
-  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`
-        .slash-dropdown-item {
-            display: flex;
-            gap: 32px;
-            height: 48px;
-            padding: 0 16px;
-            align-items: center;
-            justify-content: flex-start;
-            cursor: pointer;
-            line-height: 48px;
-            font-family: ${themeManager.get(ThemeFont, 'typography')};
-            font-size: 14px;
-
-            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 = (themeManager: ThemeManager, emotion: Emotion) => {
-  const palette = (color: Color, opacity = 1) => themeManager.get(ThemeColor, [color, opacity])
-
-  return emotion.css`
-        width: 320px;
-        min-height: 48px;
-        max-height: 320px;
-        overflow-y: auto;
-        border-radius: ${themeManager.get(ThemeSize, 'radius')};
-        position: absolute;
-        background: ${palette('surface')};
-
-        ${themeManager.get(ThemeBorder, undefined)}
-        ${themeManager.get(ThemeShadow, undefined)}
-        ${themeManager.get(ThemeScrollbar, undefined)}
-
-        &.hide {
-            display: none;
-        }
-
-        ${itemStyle(themeManager, emotion)}
-    `
-}

package/src/utility.ts

@@ -1,85 +0,0 @@
-/* Copyright 2021, Milkdown by Mirone. */
-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'
-
-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)
-  })
-
-  div.classList.add(utils.getClassName({}, className), 'hide')
-
-  return div
-}
-
-interface ItemOptions {
-  textClassName: string
-}
-export const createDropdownItem = (
-  themeManager: ThemeManager,
-  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 = themeManager.get(ThemeIcon, icon)
-
-  if (!iconSpan)
-    throw missingIcon(icon)
-
-  const textSpan = document.createElement('span')
-  textSpan.textContent = text
-  textSpan.className = textClassName
-
-  div.appendChild(iconSpan.dom)
-  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
-      }