@jvs-milkdown/components 1.2.13 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/components",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "keywords": [
     "milkdown",
     "milkdown plugin"
@@ -46,19 +46,24 @@
     "./table-block": {
       "types": "./lib/table-block/index.d.ts",
       "import": "./lib/table-block/index.js"
+    },
+    "./diff-block": {
+      "types": "./lib/diff-block/index.d.ts",
+      "import": "./lib/diff-block/index.js"
     }
   },
   "dependencies": {
+    "@codemirror/merge": "^6.12.1",
     "@floating-ui/dom": "^1.5.1",
-    "@jvs-milkdown/core": "^1.2.13",
-    "@jvs-milkdown/ctx": "^1.2.13",
-    "@jvs-milkdown/exception": "^1.2.13",
-    "@jvs-milkdown/plugin-tooltip": "^1.2.13",
-    "@jvs-milkdown/preset-commonmark": "^1.2.13",
-    "@jvs-milkdown/preset-gfm": "^1.2.13",
-    "@jvs-milkdown/prose": "^1.2.13",
-    "@jvs-milkdown/transformer": "^1.2.13",
-    "@jvs-milkdown/utils": "^1.2.13",
+    "@jvs-milkdown/core": "^1.2.14",
+    "@jvs-milkdown/ctx": "^1.2.14",
+    "@jvs-milkdown/exception": "^1.2.14",
+    "@jvs-milkdown/plugin-tooltip": "^1.2.14",
+    "@jvs-milkdown/preset-commonmark": "^1.2.14",
+    "@jvs-milkdown/preset-gfm": "^1.2.14",
+    "@jvs-milkdown/prose": "^1.2.14",
+    "@jvs-milkdown/transformer": "^1.2.14",
+    "@jvs-milkdown/utils": "^1.2.14",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "dompurify": "^3.2.5",
@@ -104,6 +109,9 @@
       ],
       "table-block": [
         "./lib/table-block/index.d.ts"
+      ],
+      "diff-block": [
+        "./lib/diff-block/index.d.ts"
       ]
     }
   }

package/src/diff-block/config.ts

@@ -0,0 +1,42 @@
+import type { Extension } from '@codemirror/state'
+
+import { $ctx } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export interface DiffBlockConfig {
+  extensions: Extension[]
+  languages: Array<string>
+  renderLanguage: (language: string, selected: boolean) => HTMLElement
+  theme: string
+}
+
+export const defaultConfig: DiffBlockConfig = {
+  extensions: [],
+  languages: [
+    'text',
+    'typescript',
+    'javascript',
+    'html',
+    'css',
+    'json',
+    'markdown',
+  ],
+  renderLanguage: (language, selected) => {
+    const span = document.createElement('span')
+    span.className = 'milkdown-diff-block-language'
+    span.textContent = language
+    if (selected) {
+      span.classList.add('selected')
+    }
+    return span
+  },
+  theme: 'dark',
+}
+
+export const diffBlockConfig = $ctx(defaultConfig, 'diffBlockConfig')
+
+withMeta(diffBlockConfig, {
+  displayName: 'Ctx<diffBlockConfig>',
+  group: 'DiffBlock',
+})

package/src/diff-block/index.ts

@@ -0,0 +1,19 @@
+import type { MilkdownPlugin } from '@jvs-milkdown/ctx'
+
+import { diffBlockConfig } from './config'
+import { diffBlockSchema } from './schema'
+import { diffBlockView } from './view'
+
+export * from './config'
+export * from './schema'
+export * from './view'
+export * from './remark-plugin'
+
+import { remarkDiffBlockPlugin } from './remark-plugin'
+
+export const diffBlock: MilkdownPlugin[] = [
+  diffBlockConfig,
+  remarkDiffBlockPlugin,
+  diffBlockSchema,
+  diffBlockView,
+].flat()

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

@@ -0,0 +1,59 @@
+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 visitDiffBlock(ast: Node) {
+  return visit(
+    ast,
+    'code',
+    (
+      node: Node & { lang?: string; value?: string },
+      index: number,
+      parent: Node & { children: Node[] }
+    ) => {
+      if (node.lang !== 'diff_block') return
+
+      let originalText = ''
+      let modifiedText = node.value || ''
+      let language = 'text'
+
+      try {
+        if (modifiedText.startsWith('{')) {
+          const parsed = JSON.parse(modifiedText)
+          originalText = parsed.originalText || ''
+          modifiedText = parsed.modifiedText || ''
+          language = parsed.language || 'text'
+        }
+      } catch {
+        // fallback
+      }
+
+      const newNode = {
+        type: 'diff_block',
+        originalText,
+        modifiedText,
+        language,
+      }
+
+      parent.children.splice(index, 1, newNode as any)
+    }
+  )
+}
+
+export const remarkDiffBlockPlugin = $remark(
+  'remark-diff-block',
+  () => () => visitDiffBlock
+)
+
+withMeta(remarkDiffBlockPlugin.plugin, {
+  displayName: 'Remark<remarkDiffBlock>',
+  group: 'DiffBlock',
+})
+
+withMeta(remarkDiffBlockPlugin.options, {
+  displayName: 'RemarkConfig<remarkDiffBlock>',
+  group: 'DiffBlock',
+})

package/src/diff-block/schema.ts

@@ -0,0 +1,86 @@
+import { expectDomTypeError } from '@jvs-milkdown/exception'
+import { $nodeSchema } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../__internal__/meta'
+
+export const DIFF_BLOCK_DATA_TYPE = 'diff-block'
+
+export const diffBlockSchema = $nodeSchema('diff_block', () => {
+  return {
+    content: 'text*',
+    marks: '',
+    group: 'block',
+    selectable: true,
+    isolating: true,
+    code: true,
+    attrs: {
+      originalText: { default: '' },
+      modifiedText: { default: '' },
+      language: { default: 'text' },
+    },
+    parseDOM: [
+      {
+        tag: `div[data-type="${DIFF_BLOCK_DATA_TYPE}"]`,
+        preserveWhitespace: 'full',
+        getAttrs: (dom) => {
+          if (!(dom instanceof HTMLElement)) throw expectDomTypeError(dom)
+
+          return {
+            originalText: dom.getAttribute('data-original-text') || '',
+            modifiedText: dom.getAttribute('data-modified-text') || '',
+            language: dom.getAttribute('data-language') || 'text',
+          }
+        },
+      },
+    ],
+    toDOM: (node) => {
+      return [
+        'div',
+        {
+          'data-type': DIFF_BLOCK_DATA_TYPE,
+          'data-original-text': node.attrs.originalText,
+          'data-modified-text': node.attrs.modifiedText,
+          'data-language': node.attrs.language,
+          class: 'milkdown-diff-block',
+        },
+        ['code', { spellcheck: 'false' }, 0],
+      ]
+    },
+    parseMarkdown: {
+      match: ({ type }) => type === 'diff_block',
+      runner: (state, node, type) => {
+        const originalText = (node as any).originalText as string
+        const modifiedText = (node as any).modifiedText as string
+        const language = (node as any).language as string
+
+        state.addNode(type, {
+          originalText: originalText || '',
+          modifiedText: modifiedText || '',
+          language: language || 'text',
+        })
+      },
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === 'diff_block',
+      runner: (state, node) => {
+        state.addNode('code', undefined, undefined, {
+          lang: 'diff_block',
+          value: JSON.stringify(
+            {
+              originalText: node.attrs.originalText,
+              modifiedText: node.attrs.modifiedText,
+              language: node.attrs.language,
+            },
+            null,
+            2
+          ),
+        })
+      },
+    },
+  }
+})
+
+withMeta(diffBlockSchema.node, {
+  displayName: 'NodeSchema<diff_block>',
+  group: 'DiffBlock',
+})

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

@@ -0,0 +1,22 @@
+import type { NodeViewConstructor } from '@jvs-milkdown/prose/view'
+
+import { $view } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../../__internal__/meta'
+import { diffBlockConfig } from '../config'
+import { diffBlockSchema } from '../schema'
+import { DiffBlockNodeView } from './node-view'
+
+export const diffBlockView = $view(
+  diffBlockSchema.node,
+  (ctx): NodeViewConstructor => {
+    const config = ctx.get(diffBlockConfig.key)
+    return (node, view, getPos) =>
+      new DiffBlockNodeView(node, view, getPos, config)
+  }
+)
+
+withMeta(diffBlockView, {
+  displayName: 'NodeView<diff_block>',
+  group: 'DiffBlock',
+})

package/src/diff-block/view/node-view.ts

@@ -0,0 +1,154 @@
+import type { Node } from '@jvs-milkdown/prose/model'
+import type { EditorView, NodeView } from '@jvs-milkdown/prose/view'
+
+import { unifiedMergeView } from '@codemirror/merge'
+import { Compartment, EditorState } from '@codemirror/state'
+import {
+  EditorView as CodeMirror,
+  type ViewUpdate,
+  drawSelection,
+} from '@codemirror/view'
+import { ref, watchEffect, type WatchHandle } from 'vue'
+
+import type { DiffBlockConfig } from '../config'
+
+export class DiffBlockNodeView implements NodeView {
+  dom: HTMLElement
+  cm: CodeMirror
+
+  selected = ref(false)
+
+  private updating = false
+  private disposeSelectedWatcher: WatchHandle
+
+  private readonly readOnlyConf: Compartment
+
+  constructor(
+    public node: Node,
+    public view: EditorView,
+    public getPos: () => number | undefined,
+    public config: DiffBlockConfig
+  ) {
+    this.readOnlyConf = new Compartment()
+
+    this.cm = new CodeMirror({
+      doc: this.node.attrs.modifiedText || '',
+      root: this.view.root,
+      extensions: [
+        this.readOnlyConf.of(EditorState.readOnly.of(true)),
+        drawSelection(),
+        unifiedMergeView({
+          original: this.node.attrs.originalText || '',
+          mergeControls: true,
+        }),
+        CodeMirror.updateListener.of(this.forwardUpdate),
+        ...config.extensions,
+      ],
+    })
+
+    this.dom = document.createElement('div')
+    this.dom.className = 'milkdown-diff-block'
+    this.dom.appendChild(this.cm.dom)
+
+    this.disposeSelectedWatcher = watchEffect(() => {
+      const isSelected = this.selected.value
+      if (isSelected) {
+        this.dom.classList.add('selected')
+      } else {
+        this.dom.classList.remove('selected')
+      }
+    })
+  }
+
+  private forwardUpdate = (update: ViewUpdate) => {
+    if (this.updating) return
+    if (!update.docChanged) return
+
+    // If the doc changed via CodeMirror merge controls (accept/reject),
+    // sync it back to ProseMirror's modifiedText attribute.
+    const pos = this.getPos()
+    if (pos == null) return
+
+    const newText = update.state.doc.toString()
+    const tr = this.view.state.tr.setNodeAttribute(pos, 'modifiedText', newText)
+    this.view.dispatch(tr)
+  }
+
+  setSelection(anchor: number, head: number) {
+    if (!this.cm.dom.isConnected) return
+
+    this.cm.focus()
+    this.updating = true
+    this.cm.dispatch({ selection: { anchor, head } })
+    this.updating = false
+  }
+
+  update(node: Node) {
+    if (node.type !== this.node.type) return false
+
+    if (this.updating) return true
+
+    this.node = node
+
+    const modifiedText = node.attrs.modifiedText || ''
+
+    // Reconfigure unifiedMergeView with the current original text if needed
+    // (We might need to recreate it if originalText changes, but typically it doesn't change from outside)
+
+    const change = computeChange(this.cm.state.doc.toString(), modifiedText)
+    if (change) {
+      this.updating = true
+      this.cm.dispatch({
+        changes: { from: change.from, to: change.to, insert: change.text },
+      })
+      this.updating = false
+    }
+    return true
+  }
+
+  selectNode() {
+    this.selected.value = true
+    this.cm.focus()
+  }
+
+  deselectNode() {
+    this.selected.value = false
+  }
+
+  stopEvent() {
+    return true
+  }
+
+  destroy() {
+    this.cm.destroy()
+    this.disposeSelectedWatcher()
+  }
+}
+
+function computeChange(
+  oldVal: string,
+  newVal: string
+): { from: number; to: number; text: string } | null {
+  if (oldVal === newVal) return null
+
+  let start = 0
+  let oldEnd = oldVal.length
+  let newEnd = newVal.length
+
+  while (
+    start < oldEnd &&
+    oldVal.charCodeAt(start) === newVal.charCodeAt(start)
+  )
+    ++start
+
+  while (
+    oldEnd > start &&
+    newEnd > start &&
+    oldVal.charCodeAt(oldEnd - 1) === newVal.charCodeAt(newEnd - 1)
+  ) {
+    oldEnd--
+    newEnd--
+  }
+
+  return { from: start, to: oldEnd, text: newVal.slice(start, newEnd) }
+}

package/src/index.ts

@@ -1 +1,2 @@
 export { Icon } from './__internal__/components/icon'
+export * from './diff-block'

package/src/table-block/view/component.tsx

@@ -467,14 +467,14 @@ export const TableBlock = defineComponent<TableBlockProps>({
         let shouldUpdate = false
         for (const mut of mutations) {
           if (mut.type === 'childList') {
-            for (const node of mut.addedNodes) {
+            for (const node of Array.from(mut.addedNodes)) {
               if (
                 node instanceof HTMLElement &&
                 ['TR', 'TD', 'TH', 'TBODY'].includes(node.nodeName)
               )
                 shouldUpdate = true
             }
-            for (const node of mut.removedNodes) {
+            for (const node of Array.from(mut.removedNodes)) {
               if (
                 node instanceof HTMLElement &&
                 ['TR', 'TD', 'TH', 'TBODY'].includes(node.nodeName)