@jvs-milkdown/components 1.0.0

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@jvs-milkdown/components",
+  "version": "1.0.0",
+  "keywords": [
+    "milkdown",
+    "milkdown plugin"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Milkdown/milkdown.git",
+    "directory": "packages/components"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./image-block": {
+      "types": "./lib/image-block/index.d.ts",
+      "import": "./lib/image-block/index.js"
+    },
+    "./code-block": {
+      "types": "./lib/code-block/index.d.ts",
+      "import": "./lib/code-block/index.js"
+    },
+    "./list-item-block": {
+      "types": "./lib/list-item-block/index.d.ts",
+      "import": "./lib/list-item-block/index.js"
+    },
+    "./link-tooltip": {
+      "types": "./lib/link-tooltip/index.d.ts",
+      "import": "./lib/link-tooltip/index.js"
+    },
+    "./image-inline": {
+      "types": "./lib/image-inline/index.d.ts",
+      "import": "./lib/image-inline/index.js"
+    },
+    "./table-block": {
+      "types": "./lib/table-block/index.d.ts",
+      "import": "./lib/table-block/index.js"
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.5.1",
+    "@types/lodash-es": "^4.17.12",
+    "clsx": "^2.0.0",
+    "dompurify": "^3.2.5",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "unist-util-visit": "^5.0.0",
+    "vue": "^3.5.20",
+    "@jvs-milkdown/core": "1.0.0",
+    "@jvs-milkdown/exception": "1.0.0",
+    "@jvs-milkdown/ctx": "1.0.0",
+    "@jvs-milkdown/preset-commonmark": "1.0.0",
+    "@jvs-milkdown/preset-gfm": "1.0.0",
+    "@jvs-milkdown/transformer": "1.0.0",
+    "@jvs-milkdown/plugin-tooltip": "1.0.0",
+    "@jvs-milkdown/utils": "1.0.0",
+    "@jvs-milkdown/prose": "1.0.0"
+  },
+  "devDependencies": {
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.0",
+    "@testing-library/vue": "^8.1.0",
+    "jsdom": "^29.0.0",
+    "vitest": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@codemirror/language": "^6",
+    "@codemirror/state": "^6",
+    "@codemirror/view": "^6"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest run"
+  },
+  "types": "./lib/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "image-block": [
+        "./lib/image-block/index.d.ts"
+      ],
+      "code-block": [
+        "./lib/code-block/index.d.ts"
+      ],
+      "list-item-block": [
+        "./lib/list-item-block/index.d.ts"
+      ],
+      "link-tooltip": [
+        "./lib/link-tooltip/index.d.ts"
+      ],
+      "image-inline": [
+        "./lib/image-inline/index.d.ts"
+      ],
+      "table-block": [
+        "./lib/table-block/index.d.ts"
+      ]
+    }
+  }
+}

package/src/__internal__/components/icon.tsx

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import DOMPurify from 'dompurify'
+import { h } from 'vue'
+
+import { keepAlive } from '../keep-alive'
+
+keepAlive(h)
+
+type IconProps = {
+  icon?: string | null
+  class?: string
+  onClick?: (event: PointerEvent) => void
+}
+
+export function Icon({ icon, class: className, onClick }: IconProps) {
+  return (
+    <span
+      class={clsx('milkdown-icon', className)}
+      onPointerdown={onClick}
+      innerHTML={icon ? DOMPurify.sanitize(icon.trim()) : undefined}
+    />
+  )
+}
+
+Icon.props = {
+  icon: {
+    type: String,
+    required: false,
+  },
+  class: {
+    type: String,
+    required: false,
+  },
+  onClick: {
+    type: Function,
+    required: false,
+  },
+}

package/src/__internal__/components/image-input.tsx

@@ -0,0 +1,182 @@
+import clsx from 'clsx'
+import { customAlphabet } from 'nanoid'
+import { defineComponent, ref, h, type Ref } from 'vue'
+
+import { keepAlive } from '../keep-alive'
+import { Icon } from './icon'
+
+keepAlive(h)
+
+const nanoid = customAlphabet('abcdefg', 8)
+
+type ImageInputProps = {
+  src: Ref<string | undefined>
+  selected: Ref<boolean>
+  readonly: Ref<boolean>
+  setLink: (link: string) => void
+
+  imageIcon?: string
+  uploadButton?: string
+  confirmButton?: string
+  uploadPlaceholderText?: string
+
+  className?: string
+
+  onUpload: (file: File) => Promise<string>
+  onImageLoadError?: (event: Event) => void | Promise<void>
+}
+
+export const ImageInput = defineComponent<ImageInputProps>({
+  props: {
+    src: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    readonly: {
+      type: Object,
+      required: true,
+    },
+    setLink: {
+      type: Function,
+      required: true,
+    },
+    imageIcon: {
+      type: String,
+      required: false,
+    },
+    uploadButton: {
+      type: String,
+      required: false,
+    },
+    confirmButton: {
+      type: String,
+      required: false,
+    },
+    uploadPlaceholderText: {
+      type: String,
+      required: false,
+    },
+    onUpload: {
+      type: Function,
+      required: true,
+    },
+    onImageLoadError: {
+      type: Function,
+      required: false,
+    },
+  },
+  setup({
+    readonly,
+    src,
+    setLink,
+    onUpload,
+    imageIcon,
+    uploadButton,
+    confirmButton,
+    uploadPlaceholderText,
+    className,
+    onImageLoadError,
+  }) {
+    const focusLinkInput = ref(false)
+    const linkInputRef = ref<HTMLInputElement>()
+    const currentLink = ref(src.value ?? '')
+    const uuid = ref(nanoid())
+    const hidePlaceholder = ref(src.value?.length !== 0)
+    const onEditLink = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const value = target.value
+      hidePlaceholder.value = value.length !== 0
+      currentLink.value = value
+    }
+
+    const onKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        setLink(linkInputRef.value?.value ?? '')
+      }
+    }
+
+    const onConfirmLinkInput = () => {
+      setLink(linkInputRef.value?.value ?? '')
+    }
+
+    const onUploadFile = (e: Event) => {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (!file) return
+
+      onUpload(file)
+        .then((url) => {
+          if (!url) return
+
+          setLink(url)
+          hidePlaceholder.value = true
+        })
+        .catch((err) => {
+          console.error('An error occurred while uploading image')
+          console.error(err)
+        })
+    }
+
+    return () => {
+      return (
+        <div class={clsx('image-edit', className)}>
+          <Icon icon={imageIcon} class="image-icon" />
+          <div class={clsx('link-importer', focusLinkInput.value && 'focus')}>
+            <input
+              ref={linkInputRef}
+              draggable="true"
+              onDragstart={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+              disabled={readonly.value}
+              class="link-input-area"
+              value={currentLink.value}
+              onInput={onEditLink}
+              onKeydown={onKeydown}
+              onFocus={() => (focusLinkInput.value = true)}
+              onBlur={() => (focusLinkInput.value = false)}
+            />
+            {!hidePlaceholder.value && (
+              <div class="placeholder">
+                <input
+                  disabled={readonly.value}
+                  class="hidden"
+                  id={uuid.value}
+                  type="file"
+                  accept="image/*"
+                  onChange={onUploadFile}
+                />
+                <label class="uploader" for={uuid.value}>
+                  <Icon icon={uploadButton} />
+                </label>
+                <span class="text" onClick={() => linkInputRef.value?.focus()}>
+                  {uploadPlaceholderText}
+                </span>
+              </div>
+            )}
+          </div>
+          {currentLink.value && (
+            <>
+              <div class="image-preview">
+                <img
+                  src={currentLink.value}
+                  alt=""
+                  onError={(e) =>
+                    Promise.resolve(onImageLoadError?.(e)).catch(() => {})
+                  }
+                />
+              </div>
+              <div class="confirm" onClick={() => onConfirmLinkInput()}>
+                <Icon icon={confirmButton} />
+              </div>
+            </>
+          )}
+        </div>
+      )
+    }
+  },
+})

package/src/__internal__/keep-alive.ts

@@ -0,0 +1,3 @@
+// Prevent tree-shaking from removing Vue's `h` and `Fragment`,
+// which are required at runtime for TSX to work.
+export function keepAlive(..._args: unknown[]) {}

package/src/__internal__/meta.ts

@@ -0,0 +1,15 @@
+import type { Meta, MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+export function withMeta<T extends MilkdownPlugin>(
+  plugin: T,
+  meta: Partial<Meta> & Pick<Meta, 'displayName'>
+): T {
+  Object.assign(plugin, {
+    meta: {
+      package: '@jvs-milkdown/components',
+      ...meta,
+    },
+  })
+
+  return plugin
+}

package/src/__tests__/setup.ts

@@ -0,0 +1,6 @@
+import { cleanup } from '@testing-library/vue'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})

package/src/code-block/config.ts

@@ -0,0 +1,54 @@
+import type { LanguageDescription } from '@codemirror/language'
+import type { Extension } from '@codemirror/state'
+
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export interface CodeBlockConfig {
+  extensions: Extension[]
+  languages: LanguageDescription[]
+  expandIcon: string
+  searchIcon: string
+  clearSearchIcon: string
+  searchPlaceholder: string
+  noResultText: string
+  copyText: string
+  copyIcon: string
+  onCopy?: (text: string) => void
+  renderLanguage: (language: string, selected: boolean) => string
+  renderPreview: (
+    language: string,
+    content: string,
+    applyPreview: (value: null | string | HTMLElement) => void
+  ) => void | null | string | HTMLElement
+  previewToggleButton: (previewOnlyMode: boolean) => string
+  previewLabel: string
+  previewOnlyByDefault?: boolean
+  previewLoading: string | HTMLElement
+}
+
+export const defaultConfig: CodeBlockConfig = {
+  extensions: [],
+  languages: [],
+  expandIcon: '⬇',
+  searchIcon: '🔍',
+  clearSearchIcon: '⌫',
+  searchPlaceholder: 'Search language',
+  noResultText: 'No result',
+  copyText: 'Copy',
+  copyIcon: '📋',
+  onCopy: () => {},
+  renderLanguage: (language) => language,
+  renderPreview: () => null,
+  previewToggleButton: (previewOnlyMode) => (previewOnlyMode ? 'Edit' : 'Hide'),
+  previewLabel: 'Preview',
+  previewLoading: 'Loading...',
+}
+
+export const codeBlockConfig = $ctx(defaultConfig, 'codeBlockConfigCtx')
+
+withMeta(codeBlockConfig, {
+  displayName: 'Config<code-block>',
+  group: 'CodeBlock',
+})

package/src/code-block/index.ts

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

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

@@ -0,0 +1,170 @@
+import type { EditorView as CodeMirror } from '@codemirror/view'
+
+import clsx from 'clsx'
+import DOMPurify from 'dompurify'
+import {
+  defineComponent,
+  ref,
+  type Ref,
+  h,
+  Fragment,
+  onMounted,
+  watch,
+} from 'vue'
+
+import type { CodeBlockConfig } from '../../config'
+import type { LanguageInfo } from '../loader'
+
+import { Icon } from '../../../__internal__/components/icon'
+import { keepAlive } from '../../../__internal__/keep-alive'
+import { CopyButton } from './copy-button'
+import { LanguagePicker } from './language-picker'
+import { PreviewPanel } from './preview-panel'
+
+keepAlive(h, Fragment)
+
+export type CodeBlockProps = {
+  text: Ref<string>
+  selected: Ref<boolean>
+  getReadOnly: () => boolean
+  codemirror: CodeMirror
+  language: Ref<string>
+  getAllLanguages: () => Array<LanguageInfo>
+  setLanguage: (language: string) => void
+  config: Omit<CodeBlockConfig, 'languages' | 'extensions'>
+}
+
+export const CodeBlock = defineComponent<CodeBlockProps>({
+  props: {
+    text: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Object,
+      required: true,
+    },
+    getReadOnly: {
+      type: Function,
+      required: true,
+    },
+    codemirror: {
+      type: Object,
+      required: true,
+    },
+    language: {
+      type: Object,
+      required: true,
+    },
+    getAllLanguages: {
+      type: Function,
+      required: true,
+    },
+    setLanguage: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const previewOnlyByDefault =
+      props.config.previewOnlyByDefault ?? props.getReadOnly()
+    const previewOnlyMode = ref(previewOnlyByDefault)
+    const codemirrorHostRef = ref<HTMLDivElement>()
+    const preview = ref<null | string | HTMLElement>(null)
+
+    onMounted(() => {
+      while (codemirrorHostRef.value?.firstChild) {
+        codemirrorHostRef.value.removeChild(codemirrorHostRef.value.firstChild)
+      }
+
+      if (codemirrorHostRef.value) {
+        codemirrorHostRef.value.appendChild(props.codemirror.dom)
+      }
+    })
+
+    watch(
+      () => [props.text.value, props.language.value],
+      () => {
+        const result = props.config.renderPreview(
+          props.language.value,
+          props.text.value,
+          (value) => (preview.value = value)
+        )
+        if (result) {
+          preview.value = result
+        }
+
+        // set default value for async renderPreview
+        const isAsyncPreview = result === undefined
+        if (isAsyncPreview && !preview.value) {
+          preview.value = DOMPurify.sanitize(props.config.previewLoading)
+        }
+
+        if (result === null) {
+          preview.value = null
+        }
+      },
+      { immediate: true }
+    )
+
+    const empty = () => {}
+
+    return () => {
+      return (
+        <>
+          <div class="tools">
+            <LanguagePicker
+              language={props.language}
+              config={props.config}
+              setLanguage={props.setLanguage}
+              getAllLanguages={props.getAllLanguages}
+              getReadOnly={props.getReadOnly}
+            />
+
+            <div class="tools-button-group">
+              <CopyButton
+                copyIcon={props.config.copyIcon}
+                copyText={props.config.copyText}
+                onCopy={props.config.onCopy ?? empty}
+                text={props.text.value}
+              />
+
+              {preview.value ? (
+                <button
+                  class="preview-toggle-button"
+                  onClick={() =>
+                    (previewOnlyMode.value = !previewOnlyMode.value)
+                  }
+                >
+                  <Icon
+                    icon={props.config.previewToggleButton(
+                      previewOnlyMode.value
+                    )}
+                  />
+                </button>
+              ) : null}
+            </div>
+          </div>
+          <div
+            ref={codemirrorHostRef}
+            class={clsx(
+              'codemirror-host',
+              preview.value && previewOnlyMode.value && 'hidden'
+            )}
+          />
+          <PreviewPanel
+            text={props.text}
+            language={props.language}
+            config={props.config}
+            previewOnlyMode={previewOnlyMode}
+            preview={preview}
+          />
+        </>
+      )
+    }
+  },
+})

package/src/code-block/view/components/copy-button.tsx

@@ -0,0 +1,96 @@
+import { defineComponent, h, Fragment } from 'vue'
+
+import { Icon } from '../../../__internal__/components/icon'
+import { keepAlive } from '../../../__internal__/keep-alive'
+
+keepAlive(h, Fragment)
+
+type CopyButtonProps = {
+  copyText: string
+  copyIcon: string
+  onCopy: (text: string) => void
+  text: string
+}
+
+async function copyToClipboard(text: string) {
+  try {
+    return navigator.clipboard.writeText(text)
+  } catch {
+    const element = document.createElement('textarea')
+    const previouslyFocusedElement = document.activeElement
+
+    element.value = text
+
+    // Prevent keyboard from showing on mobile
+    element.setAttribute('readonly', '')
+
+    element.style.contain = 'strict'
+    element.style.position = 'absolute'
+    element.style.left = '-9999px'
+    element.style.fontSize = '12pt' // Prevent zooming on iOS
+
+    const selection = document.getSelection()
+    const originalRange = selection
+      ? selection.rangeCount > 0 && selection.getRangeAt(0)
+      : null
+
+    document.body.appendChild(element)
+    element.select()
+
+    // Explicit selection workaround for iOS
+    element.selectionStart = 0
+    element.selectionEnd = text.length
+
+    document.execCommand('copy')
+    document.body.removeChild(element)
+
+    if (originalRange) {
+      selection!.removeAllRanges() // originalRange can't be truthy when selection is falsy
+      selection!.addRange(originalRange)
+    }
+
+    // Get the focus back on the previously focused element, if any
+    if (previouslyFocusedElement) {
+      ;(previouslyFocusedElement as HTMLElement).focus()
+    }
+  }
+}
+
+export const CopyButton = defineComponent<CopyButtonProps>({
+  props: {
+    copyText: {
+      type: String,
+      required: true,
+    },
+    copyIcon: {
+      type: String,
+      required: true,
+    },
+    onCopy: {
+      type: Function,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const onCopyCode = () => {
+      copyToClipboard(props.text)
+        .then(() => props.onCopy(props.text))
+        .catch(console.error)
+    }
+
+    return () => {
+      return (
+        <>
+          <button type="button" class="copy-button" onClick={onCopyCode}>
+            <Icon icon={props.copyIcon} />
+            {props.copyText}
+          </button>
+        </>
+      )
+    }
+  },
+})