@jvs-milkdown/components 1.0.0

package/src/image-block/config.ts

@@ -0,0 +1,37 @@
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export interface ImageBlockConfig {
+  imageIcon: string | undefined
+  captionIcon: string | undefined
+  uploadButton: string | undefined
+  confirmButton: string | undefined
+  uploadPlaceholderText: string
+  captionPlaceholderText: string
+  onUpload: (file: File) => Promise<string>
+  proxyDomURL?: (url: string) => Promise<string> | string
+  onImageLoadError?: (event: Event) => void | Promise<void>
+  maxWidth?: number
+  maxHeight?: number
+}
+
+export const defaultImageBlockConfig: ImageBlockConfig = {
+  imageIcon: '🌌',
+  captionIcon: '💬',
+  uploadButton: 'Upload file',
+  confirmButton: 'Confirm ⏎',
+  uploadPlaceholderText: 'or paste the image link ...',
+  captionPlaceholderText: 'Image caption',
+  onUpload: (file) => Promise.resolve(URL.createObjectURL(file)),
+}
+
+export const imageBlockConfig = $ctx(
+  defaultImageBlockConfig,
+  'imageBlockConfigCtx'
+)
+
+withMeta(imageBlockConfig, {
+  displayName: 'Config<image-block>',
+  group: 'ImageBlock',
+})

package/src/image-block/index.ts

@@ -0,0 +1,18 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { imageBlockConfig } from './config'
+import { remarkImageBlockPlugin } from './remark-plugin'
+import { imageBlockSchema } from './schema'
+import { imageBlockView } from './view'
+
+export * from './schema'
+export * from './remark-plugin'
+export * from './config'
+export * from './view'
+
+export const imageBlockComponent: MilkdownPlugin[] = [
+  remarkImageBlockPlugin,
+  imageBlockSchema,
+  imageBlockView,
+  imageBlockConfig,
+].flat()

package/src/image-block/remark-plugin.ts

@@ -0,0 +1,51 @@
+import type { Node } from '@jvs-milkdown/transformer'
+
+import { $remark } from '@jvs-milkdown/utils'
+import { visit } from 'unist-util-visit'
+
+import { withMeta } from '../__internal__/meta'
+
+function visitImage(ast: Node) {
+  return visit(
+    ast,
+    'paragraph',
+    (
+      node: Node & { children?: Node[] },
+      index: number,
+      parent: Node & { children: Node[] }
+    ) => {
+      if (node.children?.length !== 1) return
+      const firstChild = node.children?.[0]
+      if (!firstChild || firstChild.type !== 'image') return
+
+      const { url, alt, title } = firstChild as Node & {
+        url: string
+        alt: string
+        title: string
+      }
+      const newNode = {
+        type: 'image-block',
+        url,
+        alt,
+        title,
+      }
+
+      parent.children.splice(index, 1, newNode)
+    }
+  )
+}
+
+export const remarkImageBlockPlugin = $remark(
+  'remark-image-block',
+  () => () => visitImage
+)
+
+withMeta(remarkImageBlockPlugin.plugin, {
+  displayName: 'Remark<remarkImageBlock>',
+  group: 'ImageBlock',
+})
+
+withMeta(remarkImageBlockPlugin.options, {
+  displayName: 'RemarkConfig<remarkImageBlock>',
+  group: 'ImageBlock',
+})

package/src/image-block/schema.ts

@@ -0,0 +1,71 @@
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { $nodeSchema } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export const IMAGE_DATA_TYPE = 'image-block'
+
+export const imageBlockSchema = $nodeSchema('image-block', () => {
+  return {
+    inline: false,
+    group: 'block',
+    selectable: true,
+    draggable: true,
+    isolating: true,
+    marks: '',
+    atom: true,
+    priority: 100,
+    attrs: {
+      src: { default: '', validate: 'string' },
+      caption: { default: '', validate: 'string' },
+      ratio: { default: 1, validate: 'number' },
+    },
+    parseDOM: [
+      {
+        tag: `img[data-type="${IMAGE_DATA_TYPE}"]`,
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+
+          return {
+            src: dom.getAttribute('src') || '',
+            caption: dom.getAttribute('caption') || '',
+            ratio: Number(dom.getAttribute('ratio') ?? 1),
+          }
+        },
+      },
+    ],
+    toDOM: (node) => ['img', { 'data-type': IMAGE_DATA_TYPE, ...node.attrs }],
+    parseMarkdown: {
+      match: ({ type }) => type === 'image-block',
+      runner: (state, node, type) => {
+        const src = node.url as string
+        const caption = node.title as string
+        let ratio = Number((node.alt as string) || 1)
+        if (Number.isNaN(ratio) || ratio === 0) ratio = 1
+
+        state.addNode(type, {
+          src,
+          caption,
+          ratio,
+        })
+      },
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === 'image-block',
+      runner: (state, node) => {
+        state.openNode('paragraph')
+        state.addNode('image', undefined, undefined, {
+          title: node.attrs.caption,
+          url: node.attrs.src,
+          alt: `${Number.parseFloat(node.attrs.ratio).toFixed(2)}`,
+        })
+        state.closeNode()
+      },
+    },
+  }
+})
+
+withMeta(imageBlockSchema.node, {
+  displayName: 'NodeSchema<image-block>',
+  group: 'ImageBlock',
+})

package/src/image-block/view/components/__tests__/image-viewer.onImageLoadError.spec.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/vue'
+import { expect, test, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { ImageViewer } from '../image-viewer'
+
+test('calls onImageLoadError when img fires error', async () => {
+  const onImageLoadError = vi.fn()
+  const config = {
+    onImageLoadError,
+    captionIcon: '💬',
+    captionPlaceholderText: 'Image caption',
+    imageIcon: '🖼️',
+    uploadButton: 'Upload',
+    confirmButton: 'Confirm',
+    uploadPlaceholderText: 'or paste an image URL',
+    onUpload: async () => 'https://example.com/photo.png',
+  }
+
+  // render the ImageViewer component
+  const { container } = render(ImageViewer, {
+    props: {
+      src: ref('https://example.com/photo.png'),
+      caption: ref(''),
+      ratio: ref(1),
+      selected: ref(false),
+      readonly: ref(false),
+      setAttr: () => {},
+      config,
+    },
+  })
+
+  const img = container.querySelector('img[data-type="image-block"]')
+  expect(img).toBeTruthy()
+
+  // simulate the image load error
+  img!.dispatchEvent(new Event('error'))
+
+  // expect the onImageLoadError function to have been called
+  expect(onImageLoadError).toHaveBeenCalledTimes(1)
+  expect(onImageLoadError).toHaveBeenCalledWith(expect.any(Event))
+})

package/src/image-block/view/components/image-block.tsx

@@ -0,0 +1,80 @@
+import { h, Fragment, type Ref, defineComponent } from 'vue'
+
+import type { ImageBlockConfig } from '../../config'
+
+import { ImageInput } from '../../../__internal__/components/image-input'
+import { keepAlive } from '../../../__internal__/keep-alive'
+import { ImageViewer } from './image-viewer'
+
+keepAlive(h, Fragment)
+
+type Attrs = {
+  src: string
+  caption: string
+  ratio: number
+}
+
+export type MilkdownImageBlockProps = {
+  selected: Ref<boolean>
+  readonly: Ref<boolean>
+  setAttr: <T extends keyof Attrs>(attr: T, value: Attrs[T]) => void
+  config: ImageBlockConfig
+} & {
+  [P in keyof Attrs]: Ref<Attrs[P] | undefined>
+}
+
+export const MilkdownImageBlock = defineComponent<MilkdownImageBlockProps>({
+  props: {
+    src: {
+      type: Object,
+      required: true,
+    },
+    caption: {
+      type: Object,
+      required: true,
+    },
+    ratio: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    readonly: {
+      type: Object,
+      required: true,
+    },
+    setAttr: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { src } = props
+
+    return () => {
+      if (!src.value?.length) {
+        return (
+          <ImageInput
+            src={props.src}
+            selected={props.selected}
+            readonly={props.readonly}
+            setLink={(link) => props.setAttr('src', link)}
+            imageIcon={props.config.imageIcon}
+            uploadButton={props.config.uploadButton}
+            confirmButton={props.config.confirmButton}
+            uploadPlaceholderText={props.config.uploadPlaceholderText}
+            onUpload={props.config.onUpload}
+            onImageLoadError={props.config.onImageLoadError}
+          />
+        )
+      }
+      return <ImageViewer {...props} />
+    }
+  },
+})

package/src/image-block/view/components/image-viewer.tsx

@@ -0,0 +1,186 @@
+import { defineComponent, ref, h, Fragment } from 'vue'
+
+import type { MilkdownImageBlockProps } from './image-block'
+
+import { Icon } from '../../../__internal__/components/icon'
+import { keepAlive } from '../../../__internal__/keep-alive'
+import { IMAGE_DATA_TYPE } from '../../schema'
+
+keepAlive(h, Fragment)
+
+export const ImageViewer = defineComponent<MilkdownImageBlockProps>({
+  props: {
+    src: {
+      type: Object,
+      required: true,
+    },
+    caption: {
+      type: Object,
+      required: true,
+    },
+    ratio: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    readonly: {
+      type: Object,
+      required: true,
+    },
+    setAttr: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup({ src, caption, ratio, readonly, setAttr, config }) {
+    const imageRef = ref<HTMLImageElement>()
+    const resizeHandle = ref<HTMLDivElement>()
+    const showCaption = ref(Boolean(caption.value?.length))
+    const timer = ref(0)
+
+    const onImageLoad = () => {
+      const image = imageRef.value
+      if (!image) return
+      const host = image.closest('.milkdown-image-block')
+      if (!host) return
+
+      let maxWidth = host.getBoundingClientRect().width
+      if (!maxWidth) return
+
+      if (config.maxWidth && config.maxWidth < maxWidth)
+        maxWidth = config.maxWidth
+
+      const height = image.naturalHeight
+      const width = image.naturalWidth
+      let transformedHeight =
+        width < maxWidth ? height : maxWidth * (height / width)
+
+      if (config.maxHeight && transformedHeight > config.maxHeight)
+        transformedHeight = config.maxHeight
+
+      const h = (transformedHeight * (ratio.value ?? 1)).toFixed(2)
+      image.dataset.origin = transformedHeight.toFixed(2)
+      image.dataset.height = h
+      image.style.height = `${h}px`
+
+      if (config.maxWidth) image.style.maxWidth = `${config.maxWidth}px`
+    }
+
+    const onToggleCaption = (e: PointerEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (readonly.value) return
+      showCaption.value = !showCaption.value
+    }
+
+    const onInputCaption = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const value = target.value
+      if (timer.value) window.clearTimeout(timer.value)
+
+      timer.value = window.setTimeout(() => {
+        setAttr('caption', value)
+      }, 1000)
+    }
+
+    const onBlurCaption = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const value = target.value
+      if (timer.value) {
+        window.clearTimeout(timer.value)
+        timer.value = 0
+      }
+
+      setAttr('caption', value)
+    }
+
+    const onResizeHandlePointerMove = (e: PointerEvent) => {
+      e.preventDefault()
+      const image = imageRef.value
+      if (!image) return
+      const top = image.getBoundingClientRect().top
+      let height = e.clientY - top
+      if (height < 100) height = 100
+      if (config.maxHeight && height > config.maxHeight)
+        height = config.maxHeight
+      const h = Number(height).toFixed(2)
+      image.dataset.height = h
+      image.style.height = `${h}px`
+    }
+
+    const onResizeHandlePointerUp = () => {
+      window.removeEventListener('pointermove', onResizeHandlePointerMove)
+      window.removeEventListener('pointerup', onResizeHandlePointerUp)
+
+      const image = imageRef.value
+      if (!image) return
+
+      const originHeight = Number(image.dataset.origin)
+      const currentHeight = Number(image.dataset.height)
+      const ratio = Number.parseFloat(
+        Number(currentHeight / originHeight).toFixed(2)
+      )
+      if (Number.isNaN(ratio)) return
+
+      setAttr('ratio', ratio)
+    }
+
+    const onResizeHandlePointerDown = (e: PointerEvent) => {
+      if (readonly.value) return
+      e.preventDefault()
+      e.stopPropagation()
+      window.addEventListener('pointermove', onResizeHandlePointerMove)
+      window.addEventListener('pointerup', onResizeHandlePointerUp)
+    }
+
+    return () => {
+      return (
+        <>
+          <div class="image-wrapper">
+            <div class="operation">
+              <div class="operation-item" onPointerdown={onToggleCaption}>
+                <Icon icon={config.captionIcon} />
+              </div>
+            </div>
+            <img
+              ref={imageRef}
+              data-type={IMAGE_DATA_TYPE}
+              onLoad={onImageLoad}
+              src={src.value}
+              alt={caption.value}
+              onError={(e) =>
+                Promise.resolve(config.onImageLoadError?.(e)).catch(() => {})
+              }
+            />
+            <div
+              ref={resizeHandle}
+              class="image-resize-handle"
+              onPointerdown={onResizeHandlePointerDown}
+            />
+          </div>
+          {showCaption.value && (
+            <input
+              draggable="true"
+              onDragstart={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+              class="caption-input"
+              placeholder={config?.captionPlaceholderText}
+              onInput={onInputCaption}
+              onBlur={onBlurCaption}
+              value={caption.value}
+            />
+          )}
+        </>
+      )
+    }
+  },
+})

package/src/image-block/view/index.ts

@@ -0,0 +1,111 @@
+import type { Node } from '@jvs-milkdown/prose/model'
+import type { NodeViewConstructor } from '@jvs-milkdown/prose/view'
+
+import { $view } from '@jvs-milkdown/utils'
+import DOMPurify from 'dompurify'
+import { createApp, ref, watchEffect } from 'vue'
+
+import { withMeta } from '../../__internal__/meta'
+import { imageBlockConfig } from '../config'
+import { imageBlockSchema } from '../schema'
+import { MilkdownImageBlock } from './components/image-block'
+
+export const imageBlockView = $view(
+  imageBlockSchema.node,
+  (ctx): NodeViewConstructor => {
+    return (initialNode, view, getPos) => {
+      const src = ref(initialNode.attrs.src)
+      const caption = ref(initialNode.attrs.caption)
+      const ratio = ref(initialNode.attrs.ratio)
+      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(imageBlockConfig.key)
+      const app = createApp(MilkdownImageBlock, {
+        src,
+        caption,
+        ratio,
+        selected,
+        readonly,
+        setAttr,
+        config,
+      })
+      const dom = document.createElement('div')
+      dom.className = 'milkdown-image-block'
+      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)
+          }
+        }
+        ratio.value = node.attrs.ratio
+        caption.value = node.attrs.caption
+
+        readonly.value = !view.editable
+      }
+
+      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(imageBlockView, {
+  displayName: 'NodeView<image-block>',
+  group: 'ImageBlock',
+})

package/src/image-inline/components/image-inline.tsx

@@ -0,0 +1,85 @@
+import { h, Fragment, type Ref, defineComponent } from 'vue'
+
+import type { InlineImageConfig } from '../config'
+
+import { ImageInput } from '../../__internal__/components/image-input'
+import { keepAlive } from '../../__internal__/keep-alive'
+
+keepAlive(h, Fragment)
+
+type Attrs = {
+  src: string
+  alt: string
+  title: string
+}
+
+type MilkdownImageInlineProps = {
+  selected: Ref<boolean>
+  readonly: Ref<boolean>
+  setAttr: <T extends keyof Attrs>(attr: T, value: Attrs[T]) => void
+  config: InlineImageConfig
+} & {
+  [P in keyof Attrs]: Ref<Attrs[P] | undefined>
+}
+
+export const MilkdownImageInline = defineComponent<MilkdownImageInlineProps>({
+  props: {
+    src: {
+      type: Object,
+      required: true,
+    },
+    alt: {
+      type: Object,
+      required: true,
+    },
+    title: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    readonly: {
+      type: Object,
+      required: true,
+    },
+    setAttr: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { src, alt, title } = props
+    return () => {
+      if (!src.value?.length) {
+        return (
+          <ImageInput
+            src={props.src}
+            selected={props.selected}
+            readonly={props.readonly}
+            setLink={(link) => props.setAttr('src', link)}
+            imageIcon={props.config.imageIcon}
+            uploadButton={props.config.uploadButton}
+            confirmButton={props.config.confirmButton}
+            uploadPlaceholderText={props.config.uploadPlaceholderText}
+            onUpload={props.config.onUpload}
+            className="empty-image-inline"
+          />
+        )
+      }
+      return (
+        <img
+          class="image-inline"
+          src={src.value}
+          alt={alt.value}
+          title={title.value}
+        />
+      )
+    }
+  },
+})