@jvs-milkdown/components 1.0.0

package/src/link-tooltip/preview/preview-view.ts

@@ -0,0 +1,101 @@
+import type { Ctx, Slice } from '@jvs-milkdown/ctx'
+import type { Mark } from '@jvs-milkdown/prose/model'
+import type { PluginView } from '@jvs-milkdown/prose/state'
+import type { EditorView } from '@jvs-milkdown/prose/view'
+
+import { TooltipProvider } from '@jvs-milkdown/plugin-tooltip'
+import { createApp, ref, type App, type Ref } from 'vue'
+
+import type { LinkTooltipConfig, LinkToolTipState } from '../slices'
+
+import { linkTooltipAPI, linkTooltipConfig, linkTooltipState } from '../slices'
+import { PreviewLink } from './component'
+
+export class LinkPreviewTooltip implements PluginView {
+  #content: HTMLElement
+  #provider: TooltipProvider
+  #slice: Slice<LinkToolTipState>
+  #config: Ref<LinkTooltipConfig>
+  #src = ref('')
+  #onEdit = ref(() => {})
+  #onRemove = ref(() => {})
+  #app: App
+  #editorView: EditorView
+
+  #hovering = false
+
+  constructor(
+    readonly ctx: Ctx,
+    view: EditorView
+  ) {
+    this.#editorView = view
+    this.#config = ref(this.ctx.get(linkTooltipConfig.key))
+    this.#app = createApp(PreviewLink, {
+      config: this.#config,
+      src: this.#src,
+      onEdit: this.#onEdit,
+      onRemove: this.#onRemove,
+    })
+    this.#content = document.createElement('div')
+    this.#content.className = 'milkdown-link-preview'
+    this.#app.mount(this.#content)
+
+    this.#provider = new TooltipProvider({
+      debounce: 0,
+      content: this.#content,
+      shouldShow: () => false,
+    })
+    this.#provider.update(view)
+    this.#slice = ctx.use(linkTooltipState.key)
+    this.#slice.on(this.#onStateChange)
+  }
+
+  #onStateChange = ({ mode }: LinkToolTipState) => {
+    if (mode === 'edit') this.#hide()
+  }
+
+  #onMouseEnter = () => {
+    this.#hovering = true
+  }
+
+  #onMouseLeave = () => {
+    this.#hovering = false
+  }
+
+  #hide = () => {
+    this.#provider.hide()
+    this.#provider.element.removeEventListener('mouseenter', this.#onMouseEnter)
+    this.#provider.element.removeEventListener('mouseleave', this.#onMouseLeave)
+  }
+
+  show = (mark: Mark, from: number, to: number, rect: DOMRect) => {
+    this.#config.value = this.ctx.get(linkTooltipConfig.key)
+    this.#src.value = mark.attrs.href
+    this.#onEdit.value = () => {
+      this.ctx.get(linkTooltipAPI.key).editLink(mark, from, to)
+    }
+    this.#onRemove.value = () => {
+      this.ctx.get(linkTooltipAPI.key).removeLink(from, to)
+      this.#hide()
+    }
+
+    this.#provider.show({ getBoundingClientRect: () => rect }, this.#editorView)
+    this.#provider.element.addEventListener('mouseenter', this.#onMouseEnter)
+    this.#provider.element.addEventListener('mouseleave', this.#onMouseLeave)
+  }
+
+  hide = () => {
+    if (this.#hovering) return
+
+    this.#hide()
+  }
+
+  update = () => {}
+
+  destroy = () => {
+    this.#app.unmount()
+    this.#slice.off(this.#onStateChange)
+    this.#provider.destroy()
+    this.#content.remove()
+  }
+}

package/src/link-tooltip/slices.ts

@@ -0,0 +1,69 @@
+import type { Mark } from '@jvs-milkdown/prose/model'
+
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export interface LinkToolTipState {
+  mode: 'preview' | 'edit'
+}
+
+const defaultState: LinkToolTipState = {
+  mode: 'preview',
+}
+
+export const linkTooltipState = $ctx({ ...defaultState }, 'linkTooltipStateCtx')
+
+withMeta(linkTooltipState, {
+  displayName: 'State<link-tooltip>',
+  group: 'LinkTooltip',
+})
+
+export interface LinkTooltipAPI {
+  addLink: (from: number, to: number) => void
+  editLink: (mark: Mark, from: number, to: number) => void
+  removeLink: (from: number, to: number) => void
+}
+
+const defaultAPI: LinkTooltipAPI = {
+  addLink: () => {},
+  editLink: () => {},
+  removeLink: () => {},
+}
+
+export const linkTooltipAPI = $ctx({ ...defaultAPI }, 'linkTooltipAPICtx')
+
+withMeta(linkTooltipState, {
+  displayName: 'API<link-tooltip>',
+  group: 'LinkTooltip',
+})
+
+export interface LinkTooltipConfig {
+  linkIcon: string
+  editButton: string
+  confirmButton: string
+  removeButton: string
+  onCopyLink: (link: string) => void
+  inputPlaceholder: string
+}
+
+const defaultConfig: LinkTooltipConfig = {
+  linkIcon: '🔗',
+  editButton: '✎',
+  removeButton: '⌫',
+  confirmButton: 'Confirm ⏎',
+  onCopyLink: () => {},
+  inputPlaceholder: 'Paste link...',
+}
+
+export const linkTooltipConfig = $ctx(
+  {
+    ...defaultConfig,
+  },
+  'linkTooltipConfigCtx'
+)
+
+withMeta(linkTooltipState, {
+  displayName: 'Config<link-tooltip>',
+  group: 'LinkTooltip',
+})

package/src/link-tooltip/tooltips.ts

@@ -0,0 +1,22 @@
+import { tooltipFactory } from '@jvs-milkdown/plugin-tooltip'
+
+import { withMeta } from '../__internal__/meta'
+
+export const linkPreviewTooltip = tooltipFactory('LINK_PREVIEW')
+withMeta(linkPreviewTooltip[0], {
+  displayName: 'PreviewTooltipSpec<link-tooltip>',
+  group: 'LinkTooltip',
+})
+withMeta(linkPreviewTooltip[1], {
+  displayName: 'PreviewTooltipPlugin<link-tooltip>',
+  group: 'LinkTooltip',
+})
+export const linkEditTooltip = tooltipFactory('LINK_EDIT')
+withMeta(linkEditTooltip[0], {
+  displayName: 'EditTooltipSpec<link-tooltip>',
+  group: 'LinkTooltip',
+})
+withMeta(linkEditTooltip[1], {
+  displayName: 'EditTooltipPlugin<link-tooltip>',
+  group: 'LinkTooltip',
+})

package/src/link-tooltip/utils.ts

@@ -0,0 +1,56 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+import type { Mark, Node } from '@jvs-milkdown/prose/model'
+import type { EditorView } from '@jvs-milkdown/prose/view'
+
+import { linkSchema } from '@jvs-milkdown/preset-commonmark'
+
+import { linkPreviewTooltip } from './tooltips'
+
+export function findMarkPosition(
+  mark: Mark,
+  node: Node,
+  doc: Node,
+  from: number,
+  to: number
+) {
+  let markPos = { start: -1, end: -1 }
+  doc.nodesBetween(from, to, (n, pos) => {
+    // stop recursive finding if result is found
+    if (markPos.start > -1) return false
+
+    if (markPos.start === -1 && mark.isInSet(n.marks) && node === n) {
+      markPos = {
+        start: pos,
+        end: pos + Math.max(n.textContent.length, 1),
+      }
+    }
+
+    return undefined
+  })
+
+  return markPos
+}
+
+export function shouldShowPreviewWhenHover(
+  ctx: Ctx,
+  view: EditorView,
+  event: MouseEvent
+) {
+  const $pos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+  if (!$pos) return
+
+  const { pos } = $pos
+  const node = view.state.doc.nodeAt(pos)
+
+  if (!node) return
+
+  const mark = node.marks.find(
+    (mark) => mark.type === linkSchema.mark.type(ctx)
+  )
+  if (!mark) return
+
+  const key = linkPreviewTooltip.pluginKey()
+  if (!key) return
+
+  return { show: true, pos, node, mark }
+}

package/src/list-item-block/component.tsx

@@ -0,0 +1,133 @@
+import clsx from 'clsx'
+import { computed, defineComponent, type Ref, h, type VNodeRef } from 'vue'
+
+import type { ListItemBlockConfig } from './config'
+
+import { Icon } from '../__internal__/components/icon'
+import { keepAlive } from '../__internal__/keep-alive'
+
+keepAlive(h)
+
+interface Attrs {
+  label: string
+  checked: boolean
+  listType: string
+}
+
+type ListItemProps = {
+  [P in keyof Attrs]: Ref<Attrs[P]>
+} & {
+  config: ListItemBlockConfig
+  readonly: Ref<boolean>
+  selected: Ref<boolean>
+  setAttr: <T extends keyof Attrs>(attr: T, value: Attrs[T]) => void
+  onMount: (div: Element) => void
+}
+
+export const ListItem = defineComponent<ListItemProps>({
+  props: {
+    label: {
+      type: Object,
+      required: true,
+    },
+    checked: {
+      type: Object,
+      required: true,
+    },
+    listType: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    readonly: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    setAttr: {
+      type: Function,
+      required: true,
+    },
+    onMount: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup({
+    label,
+    checked,
+    listType,
+    config,
+    readonly,
+    setAttr,
+    onMount,
+    selected,
+  }) {
+    const contentWrapperRef: VNodeRef = (div) => {
+      if (div == null) return
+      if (div instanceof Element) {
+        onMount(div)
+      }
+    }
+
+    const onClickLabel = (e: Event) => {
+      e.stopPropagation()
+      e.preventDefault()
+
+      if (checked.value == null) return
+      setAttr('checked', !checked.value)
+    }
+
+    const icon = computed(() => {
+      return config.renderLabel({
+        label: label.value,
+        listType: listType.value,
+        checked: checked.value,
+        readonly: readonly.value,
+      })
+    })
+
+    const labelClass = computed(() => {
+      if (checked.value == null) {
+        if (listType.value === 'bullet') return 'bullet'
+        return 'ordered'
+      }
+
+      if (checked.value) return 'checked'
+      return 'unchecked'
+    })
+
+    return () => {
+      return (
+        <li
+          class={clsx(
+            'list-item',
+            selected.value && 'ProseMirror-selectednode'
+          )}
+        >
+          <div
+            class="label-wrapper"
+            onPointerdown={onClickLabel}
+            contenteditable={false}
+          >
+            <Icon
+              class={clsx(
+                'label',
+                readonly.value && 'readonly',
+                labelClass.value
+              )}
+              icon={icon.value}
+            />
+          </div>
+          <div class="children" ref={contentWrapperRef} />
+        </li>
+      )
+    }
+  },
+})

package/src/list-item-block/config.ts

@@ -0,0 +1,39 @@
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+interface RenderLabelProps {
+  label: string
+  listType: string
+  readonly?: boolean
+  checked?: boolean
+}
+
+export interface ListItemBlockConfig {
+  renderLabel: (props: RenderLabelProps) => string
+}
+
+export const defaultListItemBlockConfig: ListItemBlockConfig = {
+  renderLabel: ({ label, listType, checked }: RenderLabelProps) => {
+    const content =
+      checked == null
+        ? listType === 'bullet'
+          ? '⦿'
+          : label
+        : checked
+          ? '☑'
+          : '□'
+
+    return content
+  },
+}
+
+export const listItemBlockConfig = $ctx(
+  defaultListItemBlockConfig,
+  'listItemBlockConfigCtx'
+)
+
+withMeta(listItemBlockConfig, {
+  displayName: 'Config<list-item-block>',
+  group: 'ListItemBlock',
+})

package/src/list-item-block/index.ts

@@ -0,0 +1,13 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { listItemBlockConfig } from './config'
+import { listItemBlockView } from './view'
+
+export * from './component'
+export * from './config'
+export * from './view'
+
+export const listItemBlockComponent: MilkdownPlugin[] = [
+  listItemBlockConfig,
+  listItemBlockView,
+]

package/src/list-item-block/view.ts

@@ -0,0 +1,130 @@
+import type { Node } from '@jvs-milkdown/prose/model'
+import type { NodeViewConstructor } from '@jvs-milkdown/prose/view'
+
+import { listItemSchema } from '@jvs-milkdown/preset-commonmark'
+import { TextSelection } from '@jvs-milkdown/prose/state'
+import { $view } from '@jvs-milkdown/utils'
+import { createApp, ref, watchEffect } from 'vue'
+
+import { withMeta } from '../__internal__/meta'
+import { ListItem } from './component'
+import { listItemBlockConfig } from './config'
+
+export const listItemBlockView = $view(
+  listItemSchema.node,
+  (ctx): NodeViewConstructor => {
+    return (initialNode, view, getPos) => {
+      const dom = document.createElement('div')
+      dom.className = 'milkdown-list-item-block'
+
+      const contentDOM = document.createElement('div')
+      contentDOM.setAttribute('data-content-dom', 'true')
+      contentDOM.classList.add('content-dom')
+
+      const label = ref(initialNode.attrs.label)
+      const checked = ref(initialNode.attrs.checked)
+      const listType = ref(initialNode.attrs.listType)
+      const readonly = ref(!view.editable)
+      const config = ctx.get(listItemBlockConfig.key)
+      const selected = ref(false)
+      const setAttr = (attr: string, value: unknown) => {
+        if (!view.editable) return
+        const pos = getPos()
+        if (pos == null) return
+
+        if (!view.hasFocus()) view.focus()
+
+        view.dispatch(view.state.tr.setNodeAttribute(pos, attr, value))
+      }
+      const disposeSelectedWatcher = watchEffect(() => {
+        const isSelected = selected.value
+        if (isSelected) {
+          dom.classList.add('selected')
+        } else {
+          dom.classList.remove('selected')
+        }
+      })
+      let raf = 0
+      const onMount = (div: HTMLElement) => {
+        const { anchor, head } = view.state.selection
+        div.appendChild(contentDOM)
+        // put the cursor to the new created list item
+        const anchorPos = view.state.doc.resolve(anchor)
+        const headPos = view.state.doc.resolve(head)
+        raf = requestAnimationFrame(() => {
+          cancelAnimationFrame(raf)
+          if (!anchorPos.doc.eq(view.state.doc)) return
+          const selection = new TextSelection(anchorPos, headPos)
+          view.dispatch(view.state.tr.setSelection(selection))
+        })
+      }
+
+      const app = createApp(ListItem, {
+        label,
+        checked,
+        listType,
+        readonly,
+        config,
+        selected,
+        setAttr,
+        onMount,
+      })
+      app.mount(dom)
+      const bindAttrs = (node: Node) => {
+        listType.value = node.attrs.listType
+        label.value = node.attrs.label
+        checked.value = node.attrs.checked
+        readonly.value = !view.editable
+      }
+
+      bindAttrs(initialNode)
+      let node = initialNode
+      return {
+        dom,
+        contentDOM,
+        update: (updatedNode) => {
+          if (updatedNode.type !== initialNode.type) return false
+
+          if (
+            updatedNode.sameMarkup(node) &&
+            updatedNode.content.eq(node.content)
+          )
+            return true
+
+          node = updatedNode
+          bindAttrs(updatedNode)
+          return true
+        },
+        ignoreMutation: (mutation) => {
+          if (!dom || !contentDOM) return true
+
+          if ((mutation.type as unknown) === 'selection') return false
+
+          if (contentDOM === mutation.target && mutation.type === 'attributes')
+            return true
+
+          if (contentDOM.contains(mutation.target)) return false
+
+          return true
+        },
+        selectNode: () => {
+          selected.value = true
+        },
+        deselectNode: () => {
+          selected.value = false
+        },
+        destroy: () => {
+          disposeSelectedWatcher()
+          app.unmount()
+          dom.remove()
+          contentDOM.remove()
+        },
+      }
+    }
+  }
+)
+
+withMeta(listItemBlockView, {
+  displayName: 'NodeView<list-item-block>',
+  group: 'ListItemBlock',
+})

package/src/table-block/config.ts

@@ -0,0 +1,53 @@
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export type RenderType =
+  | 'add_row'
+  | 'add_col'
+  | 'delete_row'
+  | 'delete_col'
+  | 'align_col_left'
+  | 'align_col_center'
+  | 'align_col_right'
+  | 'col_drag_handle'
+  | 'row_drag_handle'
+
+export interface TableBlockConfig {
+  renderButton: (renderType: RenderType) => string
+}
+
+const defaultTableBlockConfig: TableBlockConfig = {
+  renderButton: (renderType) => {
+    switch (renderType) {
+      case 'add_row':
+        return '+'
+      case 'add_col':
+        return '+'
+      case 'delete_row':
+        return '-'
+      case 'delete_col':
+        return '-'
+      case 'align_col_left':
+        return 'left'
+      case 'align_col_center':
+        return 'center'
+      case 'align_col_right':
+        return 'right'
+      case 'col_drag_handle':
+        return '='
+      case 'row_drag_handle':
+        return '='
+    }
+  },
+}
+
+export const tableBlockConfig = $ctx(
+  { ...defaultTableBlockConfig },
+  'tableBlockConfigCtx'
+)
+
+withMeta(tableBlockConfig, {
+  displayName: 'Config<table-block>',
+  group: 'TableBlock',
+})

package/src/table-block/dnd/calc-drag-over.ts

@@ -0,0 +1,46 @@
+function findDragOverElement(
+  elements: Element[],
+  pointer: number,
+  axis: 'x' | 'y'
+): [Element, number] | undefined {
+  const startProp = axis === 'x' ? 'left' : 'top'
+  const endProp = axis === 'x' ? 'right' : 'bottom'
+  const lastIndex = elements.length - 1
+
+  const index = elements.findIndex((el, index) => {
+    const rect = el.getBoundingClientRect()
+    const boundaryStart = rect[startProp]
+    const boundaryEnd = rect[endProp]
+
+    // The pointer is within the boundary of the current element.
+    if (boundaryStart <= pointer && pointer <= boundaryEnd) return true
+    // The pointer is beyond the last element.
+    if (index === lastIndex && pointer > boundaryEnd) return true
+    // The pointer is before the first element.
+    if (index === 0 && pointer < boundaryStart) return true
+
+    return false
+  })
+
+  const element = elements[index]
+
+  return element ? [element, index] : undefined
+}
+
+export function getDragOverColumn(
+  table: Element,
+  pointerX: number
+): [element: Element, index: number] | undefined {
+  const firstRow = table.querySelector('tr')
+  if (!firstRow) return
+  const cells = Array.from(firstRow.children)
+  return findDragOverElement(cells, pointerX, 'x')
+}
+
+export function getDragOverRow(
+  table: Element,
+  pointerY: number
+): [element: Element, index: number] | undefined {
+  const rows = Array.from(table.querySelectorAll('tr'))
+  return findDragOverElement(rows, pointerY, 'y')
+}