@jvs-milkdown/components 1.0.0

package/src/image-inline/config.ts

@@ -0,0 +1,30 @@
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export interface InlineImageConfig {
+  imageIcon: string | undefined
+  uploadButton: string | undefined
+  confirmButton: string | undefined
+  uploadPlaceholderText: string
+  onUpload: (file: File) => Promise<string>
+  proxyDomURL?: (url: string) => Promise<string> | string
+}
+
+export const defaultInlineImageConfig: InlineImageConfig = {
+  imageIcon: '🌌',
+  uploadButton: 'Upload',
+  confirmButton: '⏎',
+  uploadPlaceholderText: '/Paste',
+  onUpload: (file) => Promise.resolve(URL.createObjectURL(file)),
+}
+
+export const inlineImageConfig = $ctx(
+  defaultInlineImageConfig,
+  'inlineImageConfigCtx'
+)
+
+withMeta(inlineImageConfig, {
+  displayName: 'Config<image-inline>',
+  group: 'ImageInline',
+})

package/src/image-inline/index.ts

@@ -0,0 +1,12 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { inlineImageConfig } from './config'
+import { inlineImageView } from './view'
+
+export * from './config'
+export * from './view'
+
+export const imageInlineComponent: MilkdownPlugin[] = [
+  inlineImageConfig,
+  inlineImageView,
+]

package/src/image-inline/view.ts

@@ -0,0 +1,109 @@
+import type { Node } from '@jvs-milkdown/prose/model'
+import type { NodeViewConstructor } from '@jvs-milkdown/prose/view'
+
+import { imageSchema } from '@jvs-milkdown/preset-commonmark'
+import { $view } from '@jvs-milkdown/utils'
+import DOMPurify from 'dompurify'
+import { createApp, ref, watchEffect } from 'vue'
+
+import { withMeta } from '../__internal__/meta'
+import { MilkdownImageInline } from './components/image-inline'
+import { inlineImageConfig } from './config'
+
+export const inlineImageView = $view(
+  imageSchema.node,
+  (ctx): NodeViewConstructor => {
+    return (initialNode, view, getPos) => {
+      const src = ref(initialNode.attrs.src)
+      const alt = ref(initialNode.attrs.alt)
+      const title = ref(initialNode.attrs.title)
+      const selected = ref(false)
+      const readonly = ref(!view.editable)
+      const setAttr = (attr: string, value: unknown) => {
+        if (!view.editable) return
+        const pos = getPos()
+        if (pos == null) return
+        view.dispatch(
+          view.state.tr.setNodeAttribute(
+            pos,
+            attr,
+            attr === 'src' ? DOMPurify.sanitize(value as string) : value
+          )
+        )
+      }
+
+      const config = ctx.get(inlineImageConfig.key)
+      const app = createApp(MilkdownImageInline, {
+        src,
+        alt,
+        title,
+        selected,
+        readonly,
+        setAttr,
+        config,
+      })
+      const dom = document.createElement('span')
+      dom.className = 'milkdown-image-inline'
+      const disposeSelectedWatcher = watchEffect(() => {
+        const isSelected = selected.value
+        if (isSelected) {
+          dom.classList.add('selected')
+        } else {
+          dom.classList.remove('selected')
+        }
+      })
+      const proxyDomURL = config.proxyDomURL
+      const bindAttrs = (node: Node) => {
+        if (!proxyDomURL) {
+          src.value = node.attrs.src
+        } else {
+          const proxiedURL = proxyDomURL(node.attrs.src)
+          if (typeof proxiedURL === 'string') {
+            src.value = proxiedURL
+          } else {
+            proxiedURL
+              .then((url) => {
+                src.value = url
+              })
+              .catch(console.error)
+          }
+        }
+        alt.value = node.attrs.alt
+        title.value = node.attrs.title
+      }
+      bindAttrs(initialNode)
+      app.mount(dom)
+
+      return {
+        dom,
+        update: (updatedNode) => {
+          if (updatedNode.type !== initialNode.type) return false
+
+          bindAttrs(updatedNode)
+          return true
+        },
+        stopEvent: (e) => {
+          if (e.target instanceof HTMLInputElement) return true
+
+          return false
+        },
+        selectNode: () => {
+          selected.value = true
+        },
+        deselectNode: () => {
+          selected.value = false
+        },
+        destroy: () => {
+          disposeSelectedWatcher()
+          app.unmount()
+          dom.remove()
+        },
+      }
+    }
+  }
+)
+
+withMeta(inlineImageView, {
+  displayName: 'NodeView<image-inline>',
+  group: 'ImageInline',
+})

package/src/index.ts

@@ -0,0 +1 @@
+export { Icon } from './__internal__/components/icon'

package/src/link-tooltip/command.ts

@@ -0,0 +1,19 @@
+import { linkSchema } from '@jvs-milkdown/preset-commonmark'
+import { $command } from '@jvs-milkdown/utils'
+
+import { linkTooltipAPI } from './slices'
+
+export const toggleLinkCommand = $command('ToggleLink', (ctx) => {
+  return () => (state) => {
+    const { doc, selection } = state
+    const mark = linkSchema.type(ctx)
+    const hasLink = doc.rangeHasMark(selection.from, selection.to, mark)
+    if (hasLink) {
+      ctx.get(linkTooltipAPI.key).removeLink(selection.from, selection.to)
+      return true
+    }
+
+    ctx.get(linkTooltipAPI.key).addLink(selection.from, selection.to)
+    return true
+  }
+})

package/src/link-tooltip/configure.ts

@@ -0,0 +1,9 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { configureLinkEditTooltip } from './edit/edit-configure'
+import { configureLinkPreviewTooltip } from './preview/preview-configure'
+
+export function configureLinkTooltip(ctx: Ctx) {
+  configureLinkPreviewTooltip(ctx)
+  configureLinkEditTooltip(ctx)
+}

package/src/link-tooltip/edit/component.tsx

@@ -0,0 +1,82 @@
+import { defineComponent, ref, watch, type Ref, h } from 'vue'
+
+import type { LinkTooltipConfig } from '../slices'
+
+import { Icon } from '../../__internal__/components/icon'
+import { keepAlive } from '../../__internal__/keep-alive'
+
+keepAlive(h)
+
+type EditLinkProps = {
+  config: Ref<LinkTooltipConfig>
+  src: Ref<string>
+  onConfirm: (href: string) => void
+  onCancel: () => void
+}
+
+export const EditLink = defineComponent<EditLinkProps>({
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    src: {
+      type: Object,
+      required: true,
+    },
+    onConfirm: {
+      type: Function,
+      required: true,
+    },
+    onCancel: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup({ config, src, onConfirm, onCancel }) {
+    const link = ref(src)
+
+    watch(src, (value) => {
+      link.value = value
+    })
+
+    const onConfirmEdit = () => {
+      onConfirm(link.value)
+    }
+
+    const onKeydown = (e: KeyboardEvent) => {
+      e.stopPropagation()
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        onConfirmEdit()
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onCancel()
+      }
+    }
+
+    return () => {
+      return (
+        <div class="link-edit">
+          <input
+            class="input-area"
+            placeholder={config.value.inputPlaceholder}
+            onKeydown={onKeydown}
+            onInput={(e: Event) => {
+              link.value = (e.target as HTMLInputElement).value
+            }}
+            value={link.value}
+          />
+          {link.value ? (
+            <Icon
+              class="button confirm"
+              icon={config.value.confirmButton}
+              onClick={onConfirmEdit}
+            />
+          ) : null}
+        </div>
+      )
+    }
+  },
+})

package/src/link-tooltip/edit/edit-configure.ts

@@ -0,0 +1,29 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+
+import { linkTooltipAPI } from '../slices'
+import { linkEditTooltip } from '../tooltips'
+import { LinkEditTooltip } from './edit-view'
+
+export function configureLinkEditTooltip(ctx: Ctx) {
+  let linkEditTooltipView: LinkEditTooltip | null
+
+  ctx.update(linkTooltipAPI.key, (api) => ({
+    ...api,
+    addLink: (from, to) => {
+      linkEditTooltipView?.addLink(from, to)
+    },
+    editLink: (mark, from, to) => {
+      linkEditTooltipView?.editLink(mark, from, to)
+    },
+    removeLink: (from, to) => {
+      linkEditTooltipView?.removeLink(from, to)
+    },
+  }))
+
+  ctx.set(linkEditTooltip.key, {
+    view: (view) => {
+      linkEditTooltipView = new LinkEditTooltip(ctx, view)
+      return linkEditTooltipView
+    },
+  })
+}

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

@@ -0,0 +1,165 @@
+import type { Ctx } 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 { editorViewCtx } from '@jvs-milkdown/core'
+import { TooltipProvider } from '@jvs-milkdown/plugin-tooltip'
+import { linkSchema } from '@jvs-milkdown/preset-commonmark'
+import { posToDOMRect } from '@jvs-milkdown/prose'
+import { TextSelection } from '@jvs-milkdown/prose/state'
+import DOMPurify from 'dompurify'
+import { createApp, ref, type App, type Ref } from 'vue'
+
+import {
+  linkTooltipConfig,
+  linkTooltipState,
+  type LinkTooltipConfig,
+} from '../slices'
+import { EditLink } from './component'
+
+interface Data {
+  from: number
+  to: number
+  mark: Mark | null
+}
+
+const defaultData: Data = {
+  from: -1,
+  to: -1,
+  mark: null,
+}
+
+export class LinkEditTooltip implements PluginView {
+  #content: HTMLElement
+  #provider: TooltipProvider
+  #data: Data = { ...defaultData }
+  #app: App
+  #config: Ref<LinkTooltipConfig>
+  #src = ref('')
+
+  constructor(
+    readonly ctx: Ctx,
+    view: EditorView
+  ) {
+    this.#config = ref(this.ctx.get(linkTooltipConfig.key))
+
+    const content = document.createElement('div')
+    content.className = 'milkdown-link-edit'
+
+    const app = createApp(EditLink, {
+      config: this.#config,
+      src: this.#src,
+      onConfirm: this.#confirmEdit,
+      onCancel: this.#reset,
+    })
+    app.mount(content)
+    this.#app = app
+
+    this.#content = content
+    this.#provider = new TooltipProvider({
+      content,
+      debounce: 0,
+      shouldShow: () => false,
+    })
+    this.#provider.onHide = () => {
+      requestAnimationFrame(() => {
+        view.dom.focus({ preventScroll: true })
+      })
+    }
+    this.#provider.update(view)
+  }
+
+  #reset = () => {
+    this.#provider.hide()
+    this.ctx.update(linkTooltipState.key, (state) => ({
+      ...state,
+      mode: 'preview' as const,
+    }))
+    this.#data = { ...defaultData }
+  }
+
+  #confirmEdit = (href: string) => {
+    const view = this.ctx.get(editorViewCtx)
+    const { from, to, mark } = this.#data
+    const type = linkSchema.type(this.ctx)
+    const link = DOMPurify.sanitize(href)
+    if (mark && mark.attrs.href === link) {
+      this.#reset()
+      return
+    }
+
+    const tr = view.state.tr
+    if (mark) tr.removeMark(from, to, mark)
+
+    tr.addMark(from, to, type.create({ href: link }))
+    view.dispatch(tr)
+
+    this.#reset()
+  }
+
+  #enterEditMode = (value: string, from: number, to: number) => {
+    const config = this.ctx.get(linkTooltipConfig.key)
+    this.#config.value = config
+    this.#src.value = value
+    this.ctx.update(linkTooltipState.key, (state) => ({
+      ...state,
+      mode: 'edit' as const,
+    }))
+    const view = this.ctx.get(editorViewCtx)
+    view.dispatch(
+      view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to))
+    )
+    this.#provider.show(
+      { getBoundingClientRect: () => posToDOMRect(view, from, to) },
+      view
+    )
+    requestAnimationFrame(() => {
+      this.#content.querySelector('input')?.focus()
+    })
+  }
+
+  update = (view: EditorView) => {
+    const { state } = view
+    const { selection } = state
+    if (!(selection instanceof TextSelection)) return
+    const { from, to } = selection
+    if (from === this.#data.from && to === this.#data.to) return
+
+    this.#reset()
+  }
+
+  destroy = () => {
+    this.#app.unmount()
+    this.#provider.destroy()
+    this.#content.remove()
+  }
+
+  addLink = (from: number, to: number) => {
+    this.#data = {
+      from,
+      to,
+      mark: null,
+    }
+    this.#enterEditMode('', from, to)
+  }
+
+  editLink = (mark: Mark, from: number, to: number) => {
+    this.#data = {
+      from,
+      to,
+      mark,
+    }
+    this.#enterEditMode(mark.attrs.href, from, to)
+  }
+
+  removeLink = (from: number, to: number) => {
+    const view = this.ctx.get(editorViewCtx)
+
+    const tr = view.state.tr
+    tr.removeMark(from, to, linkSchema.type(this.ctx))
+    view.dispatch(tr)
+
+    this.#reset()
+  }
+}

package/src/link-tooltip/index.ts

@@ -0,0 +1,19 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { toggleLinkCommand } from './command'
+import { linkTooltipAPI, linkTooltipConfig, linkTooltipState } from './slices'
+import { linkEditTooltip, linkPreviewTooltip } from './tooltips'
+
+export * from './slices'
+export * from './configure'
+export * from './tooltips'
+export * from './command'
+
+export const linkTooltipPlugin: MilkdownPlugin[] = [
+  linkTooltipState,
+  linkTooltipAPI,
+  linkTooltipConfig,
+  linkPreviewTooltip,
+  linkEditTooltip,
+  toggleLinkCommand,
+].flat()

package/src/link-tooltip/preview/component.tsx

@@ -0,0 +1,87 @@
+import { defineComponent, type Ref, h } from 'vue'
+
+import type { LinkTooltipConfig } from '../slices'
+
+import { Icon } from '../../__internal__/components/icon'
+import { keepAlive } from '../../__internal__/keep-alive'
+
+keepAlive(h)
+
+type PreviewLinkProps = {
+  config: Ref<LinkTooltipConfig>
+  src: Ref<string>
+  onEdit: Ref<() => void>
+  onRemove: Ref<() => void>
+}
+
+export const PreviewLink = defineComponent<PreviewLinkProps>({
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    src: {
+      type: Object,
+      required: true,
+    },
+    onEdit: {
+      type: Object,
+      required: true,
+    },
+    onRemove: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup({ config, src, onEdit, onRemove }) {
+    const onClickEditButton = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onEdit.value()
+    }
+
+    const onClickRemoveButton = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onRemove.value()
+    }
+
+    const onClickPreview = (e: Event) => {
+      e.preventDefault()
+      const link = src.value
+      if (navigator.clipboard && link) {
+        navigator.clipboard
+          .writeText(link)
+          .then(() => {
+            config.value.onCopyLink(link)
+          })
+          .catch((e) => console.error(e))
+      }
+    }
+
+    return () => {
+      return (
+        <div class="link-preview">
+          <Icon
+            class="button link-icon"
+            icon={config.value.linkIcon}
+            onClick={onClickPreview}
+          />
+          <a href={src.value} target="_blank" class="link-display">
+            {src.value}
+          </a>
+          <Icon
+            class="button link-edit-button"
+            icon={config.value.editButton}
+            onClick={onClickEditButton}
+          />
+          <Icon
+            class="button link-remove-button"
+            icon={config.value.removeButton}
+            onClick={onClickRemoveButton}
+          />
+        </div>
+      )
+    }
+  },
+})

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

@@ -0,0 +1,65 @@
+import type { Ctx } from '@jvs-milkdown/ctx'
+import type { EditorView } from '@jvs-milkdown/prose/view'
+
+import { posToDOMRect } from '@jvs-milkdown/prose'
+import { debounce } from 'lodash-es'
+
+import { linkTooltipState } from '../slices'
+import { linkPreviewTooltip } from '../tooltips'
+import { findMarkPosition, shouldShowPreviewWhenHover } from '../utils'
+import { LinkPreviewTooltip } from './preview-view'
+
+export function configureLinkPreviewTooltip(ctx: Ctx) {
+  let linkPreviewTooltipView: LinkPreviewTooltip | null
+
+  const DELAY = 50
+  const onMouseMove = debounce((view: EditorView, event: MouseEvent) => {
+    if (!linkPreviewTooltipView) return
+    if (!view.hasFocus()) return
+
+    const state = ctx.get(linkTooltipState.key)
+    if (state.mode === 'edit') return
+
+    const result = shouldShowPreviewWhenHover(ctx, view, event)
+    if (result) {
+      const position = view.state.doc.resolve(result.pos)
+      const markPosition = findMarkPosition(
+        result.mark,
+        result.node,
+        view.state.doc,
+        position.before(),
+        position.after()
+      )
+      const from = markPosition.start
+      const to = markPosition.end
+      linkPreviewTooltipView.show(
+        result.mark,
+        from,
+        to,
+        posToDOMRect(view, from, to)
+      )
+      return
+    }
+
+    linkPreviewTooltipView.hide()
+  }, DELAY)
+
+  const onMouseLeave = () => {
+    setTimeout(() => {
+      linkPreviewTooltipView?.hide()
+    }, DELAY)
+  }
+
+  ctx.set(linkPreviewTooltip.key, {
+    props: {
+      handleDOMEvents: {
+        mousemove: onMouseMove,
+        mouseleave: onMouseLeave,
+      },
+    },
+    view: (view) => {
+      linkPreviewTooltipView = new LinkPreviewTooltip(ctx, view)
+      return linkPreviewTooltipView
+    },
+  })
+}