@jvs-milkdown/components 1.0.0

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

@@ -0,0 +1,239 @@
+import { computePosition } from '@floating-ui/dom'
+import clsx from 'clsx'
+import {
+  computed,
+  defineComponent,
+  ref,
+  h,
+  Fragment,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue'
+
+import type { CodeBlockProps } from './code-block'
+
+import { Icon } from '../../../__internal__/components/icon'
+import { keepAlive } from '../../../__internal__/keep-alive'
+
+keepAlive(h, Fragment)
+
+type LanguagePickerProps = Pick<
+  CodeBlockProps,
+  'language' | 'config' | 'setLanguage' | 'getAllLanguages' | 'getReadOnly'
+>
+
+export const LanguagePicker = defineComponent<LanguagePickerProps>({
+  props: {
+    language: {
+      type: Object,
+      required: true,
+    },
+    getReadOnly: {
+      type: Function,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    getAllLanguages: {
+      type: Function,
+      required: true,
+    },
+    setLanguage: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup({ language, config, setLanguage, getAllLanguages, getReadOnly }) {
+    const triggerRef = ref<HTMLButtonElement>()
+    const showPicker = ref(false)
+    const searchRef = ref<HTMLInputElement>()
+    const pickerRef = ref<HTMLDivElement>()
+    const filter = ref('')
+
+    watch([showPicker, triggerRef, pickerRef], () => {
+      filter.value = ''
+      const picker = triggerRef.value
+      const languageList = pickerRef.value
+      if (!picker || !languageList) return
+
+      computePosition(picker, languageList, {
+        placement: 'bottom-start',
+      })
+        .then(({ x, y }) => {
+          Object.assign(languageList.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          })
+        })
+        .catch(console.error)
+    })
+
+    const onTogglePicker = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (getReadOnly()) return
+
+      const next = !showPicker.value
+      showPicker.value = next
+      if (next) {
+        setTimeout(() => searchRef.value?.focus(), 0)
+      }
+    }
+
+    const changeFilter = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      filter.value = target.value
+    }
+
+    const onSearchKeydown = (e: Event) => {
+      if ((e as KeyboardEvent).key === 'Escape') filter.value = ''
+    }
+
+    const languages = computed(() => {
+      if (!showPicker.value) return []
+
+      const all = getAllLanguages() ?? []
+
+      const selected = all.find(
+        (languageInfo) =>
+          languageInfo.name.toLowerCase() === language.value.toLowerCase()
+      )
+
+      const filtered = all.filter((languageInfo) => {
+        const currentValue = filter.value.toLowerCase()
+
+        return (
+          (languageInfo.name.toLowerCase().includes(currentValue) ||
+            languageInfo.alias.some((alias) =>
+              alias.toLowerCase().includes(currentValue)
+            )) &&
+          languageInfo !== selected
+        )
+      })
+
+      if (filtered.length === 0) return []
+
+      if (!selected) return filtered
+
+      return [selected, ...filtered]
+    })
+
+    const clickHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
+
+      if (triggerRef.value && triggerRef.value.contains(target)) return
+
+      const picker = pickerRef.value
+      const trigger = triggerRef.value
+      if (!trigger || !picker) return
+
+      if (trigger.dataset.expanded !== 'true') return
+
+      if (!picker.contains(target)) showPicker.value = false
+    }
+
+    onMounted(() => {
+      window.addEventListener('click', clickHandler)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('click', clickHandler)
+    })
+
+    return () => {
+      return (
+        <>
+          <button
+            type="button"
+            ref={triggerRef}
+            class="language-button"
+            onClick={onTogglePicker}
+            data-expanded={String(showPicker.value)}
+          >
+            {language.value || 'Text'}
+            <div class="expand-icon">
+              <Icon icon={config.expandIcon} />
+            </div>
+          </button>
+          <div ref={pickerRef} class="language-picker">
+            {showPicker.value ? (
+              <div class="list-wrapper">
+                <div class="search-box">
+                  <div class="search-icon">
+                    <Icon icon={config.searchIcon} />
+                  </div>
+                  <input
+                    ref={searchRef}
+                    class="search-input"
+                    placeholder={config.searchPlaceholder}
+                    value={filter.value}
+                    onInput={changeFilter}
+                    onKeydown={onSearchKeydown}
+                  />
+                  <div
+                    class={clsx(
+                      'clear-icon',
+                      filter.value.length === 0 && 'hidden'
+                    )}
+                    onMousedown={(e) => {
+                      e.preventDefault()
+                      filter.value = ''
+                    }}
+                  >
+                    <Icon icon={config.clearSearchIcon} />
+                  </div>
+                </div>
+                <ul
+                  class="language-list"
+                  role="listbox"
+                  onKeydown={(e) => {
+                    if (e.key === 'Enter') {
+                      const active = document.activeElement
+                      if (
+                        active instanceof HTMLElement &&
+                        active.dataset.language
+                      )
+                        setLanguage(active.dataset.language)
+                    }
+                  }}
+                >
+                  {!languages.value.length ? (
+                    <li class="language-list-item no-result">
+                      {config.noResultText}
+                    </li>
+                  ) : (
+                    languages.value.map((languageInfo) => (
+                      <li
+                        role="listitem"
+                        tabindex="0"
+                        class="language-list-item"
+                        aria-selected={
+                          languageInfo.name.toLowerCase() ===
+                          language.value.toLowerCase()
+                        }
+                        data-language={languageInfo.name}
+                        onClick={() => {
+                          setLanguage(languageInfo.name)
+                          showPicker.value = false
+                        }}
+                      >
+                        {config.renderLanguage(
+                          languageInfo.name,
+                          languageInfo.name.toLowerCase() ===
+                            language.value.toLowerCase()
+                        )}
+                      </li>
+                    ))
+                  )}
+                </ul>
+              </div>
+            ) : null}
+          </div>
+        </>
+      )
+    }
+  },
+})

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

@@ -0,0 +1,79 @@
+import DOMPurify from 'dompurify'
+import { defineComponent, ref, watchEffect, type Ref, h, Fragment } from 'vue'
+
+import type { CodeBlockProps } from './code-block'
+
+import { keepAlive } from '../../../__internal__/keep-alive'
+
+keepAlive(h, Fragment)
+
+type PreviewPanelProps = Pick<
+  CodeBlockProps,
+  'text' | 'language' | 'config'
+> & {
+  previewOnlyMode: Ref<boolean>
+  preview: Ref<string | HTMLElement | null>
+}
+
+export const PreviewPanel = defineComponent<PreviewPanelProps>({
+  props: {
+    text: {
+      type: Object,
+      required: true,
+    },
+    language: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    previewOnlyMode: {
+      type: Object,
+      required: true,
+    },
+    preview: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { previewOnlyMode, config, preview } = props
+    const previewRef = ref<HTMLDivElement>()
+
+    watchEffect(() => {
+      const previewContainer = previewRef.value
+      if (!previewContainer) return
+
+      while (previewContainer.firstChild) {
+        previewContainer.removeChild(previewContainer.firstChild)
+      }
+
+      const previewContent = preview.value
+
+      if (
+        typeof previewContent === 'string' ||
+        previewContent instanceof Element
+      ) {
+        previewContainer.innerHTML = DOMPurify.sanitize(previewContent)
+      }
+    })
+
+    return () => {
+      if (!preview.value) return null
+
+      return (
+        <div class="preview-panel">
+          {!previewOnlyMode.value && (
+            <>
+              <div class="preview-divider" />
+              <div class="preview-label">{config.previewLabel}</div>
+            </>
+          )}
+          <div ref={previewRef} class="preview" />
+        </div>
+      )
+    }
+  },
+})

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

@@ -0,0 +1,24 @@
+import type { NodeViewConstructor } from '@jvs-milkdown/prose/view'
+
+import { codeBlockSchema } from '@jvs-milkdown/preset-commonmark'
+import { $view } from '@jvs-milkdown/utils'
+
+import { withMeta } from '../../__internal__/meta'
+import { codeBlockConfig } from '../config'
+import { LanguageLoader } from './loader'
+import { CodeMirrorBlock } from './node-view'
+
+export const codeBlockView = $view(
+  codeBlockSchema.node,
+  (ctx): NodeViewConstructor => {
+    const config = ctx.get(codeBlockConfig.key)
+    const languageLoader = new LanguageLoader(config.languages)
+    return (node, view, getPos) =>
+      new CodeMirrorBlock(node, view, getPos, languageLoader, config)
+  }
+)
+
+withMeta(codeBlockView, {
+  displayName: 'NodeView<code-block>',
+  group: 'CodeBlock',
+})

package/src/code-block/view/loader.ts

@@ -0,0 +1,40 @@
+import type { LanguageDescription, LanguageSupport } from '@codemirror/language'
+
+export interface LanguageInfo {
+  name: string
+  alias: readonly string[]
+}
+
+export class LanguageLoader {
+  private readonly map: Record<string, LanguageDescription>
+
+  constructor(private languages: LanguageDescription[]) {
+    this.map = {}
+
+    languages.forEach((language) => {
+      language.alias.forEach((alias) => {
+        this.map[alias] = language
+      })
+    })
+  }
+
+  getAll(): LanguageInfo[] {
+    return this.languages.map((language): LanguageInfo => {
+      return {
+        name: language.name,
+        alias: language.alias,
+      }
+    })
+  }
+
+  load(languageName: string): Promise<LanguageSupport | undefined> {
+    const languageMap = this.map
+    const language = languageMap[languageName.toLowerCase()]
+
+    if (!language) return Promise.resolve(undefined)
+
+    if (language.support) return Promise.resolve(language.support)
+
+    return language.load()
+  }
+}

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

@@ -0,0 +1,310 @@
+import type { Line, SelectionRange } from '@codemirror/state'
+import type { Node } from '@jvs-milkdown/prose/model'
+import type { EditorView, NodeView } from '@jvs-milkdown/prose/view'
+
+import { Compartment, EditorState } from '@codemirror/state'
+import {
+  EditorView as CodeMirror,
+  type KeyBinding,
+  type ViewUpdate,
+  keymap as cmKeymap,
+  drawSelection,
+} from '@codemirror/view'
+import { exitCode } from '@jvs-milkdown/prose/commands'
+import { redo, undo } from '@jvs-milkdown/prose/history'
+import { TextSelection } from '@jvs-milkdown/prose/state'
+import { createApp, ref, watchEffect, type App, type WatchHandle } from 'vue'
+
+import type { CodeBlockConfig } from '../config'
+import type { LanguageLoader } from './loader'
+
+import { CodeBlock } from './components/code-block'
+
+export class CodeMirrorBlock implements NodeView {
+  dom: HTMLElement
+  cm: CodeMirror
+  app: App
+
+  selected = ref(false)
+  language = ref('')
+  text = ref('')
+
+  private updating = false
+  private languageName: string = ''
+  private disposeSelectedWatcher: WatchHandle
+
+  private readonly languageConf: Compartment
+  private readonly readOnlyConf: Compartment
+
+  constructor(
+    public node: Node,
+    public view: EditorView,
+    public getPos: () => number | undefined,
+    public loader: LanguageLoader,
+    public config: CodeBlockConfig
+  ) {
+    this.languageConf = new Compartment()
+    this.readOnlyConf = new Compartment()
+
+    this.cm = new CodeMirror({
+      doc: this.node.textContent,
+      root: this.view.root,
+      extensions: [
+        this.readOnlyConf.of(EditorState.readOnly.of(!this.view.editable)),
+        drawSelection(),
+        cmKeymap.of(this.codeMirrorKeymap()),
+        this.languageConf.of([]),
+        EditorState.changeFilter.of(() => this.view.editable),
+        ...config.extensions,
+        CodeMirror.updateListener.of(this.forwardUpdate),
+      ],
+    })
+
+    this.app = this.createApp()
+
+    this.dom = this.createDom(this.app)
+
+    this.disposeSelectedWatcher = watchEffect(() => {
+      const isSelected = this.selected.value
+      if (isSelected) {
+        this.dom.classList.add('selected')
+      } else {
+        this.dom.classList.remove('selected')
+      }
+    })
+
+    this.updateLanguage()
+  }
+
+  private forwardUpdate = (update: ViewUpdate) => {
+    if (this.updating || !this.cm.hasFocus) return
+    let offset = (this.getPos() ?? 0) + 1
+    const { main } = update.state.selection
+    const selFrom = offset + main.from
+    const selTo = offset + main.to
+    const pmSel = this.view.state.selection
+    if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
+      const tr = this.view.state.tr
+      update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+        if (text.length)
+          tr.replaceWith(
+            offset + fromA,
+            offset + toA,
+            this.view.state.schema.text(text.toString())
+          )
+        else tr.delete(offset + fromA, offset + toA)
+        offset += toB - fromB - (toA - fromA)
+      })
+      tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo))
+      this.view.dispatch(tr)
+    }
+  }
+
+  private createApp = () => {
+    return createApp(CodeBlock, {
+      text: this.text,
+      selected: this.selected,
+      codemirror: this.cm,
+      language: this.language,
+      getAllLanguages: this.getAllLanguages,
+      getReadOnly: () => !this.view.editable,
+      setLanguage: this.setLanguage,
+      config: this.config,
+    })
+  }
+
+  private createDom(app: App) {
+    const dom = document.createElement('div')
+    dom.className = 'milkdown-code-block'
+    this.text.value = this.node.textContent
+    app.mount(dom)
+    return dom
+  }
+
+  private updateLanguage() {
+    const languageName = this.node.attrs.language
+
+    if (languageName === this.languageName) return
+
+    this.language.value = languageName
+    const language = this.loader.load(languageName ?? '')
+
+    language
+      .then((lang) => {
+        if (lang) {
+          this.cm.dispatch({
+            effects: this.languageConf.reconfigure(lang),
+          })
+          this.languageName = languageName
+        }
+      })
+      .catch(console.error)
+  }
+
+  private codeMirrorKeymap = (): KeyBinding[] => {
+    const view = this.view
+    return [
+      { key: 'ArrowUp', run: () => this.maybeEscape('line', -1) },
+      { key: 'ArrowLeft', run: () => this.maybeEscape('char', -1) },
+      { key: 'ArrowDown', run: () => this.maybeEscape('line', 1) },
+      { key: 'ArrowRight', run: () => this.maybeEscape('char', 1) },
+      {
+        key: 'Mod-Enter',
+        run: () => {
+          if (!exitCode(view.state, view.dispatch)) return false
+
+          view.focus()
+          return true
+        },
+      },
+      { key: 'Mod-z', run: () => undo(view.state, view.dispatch) },
+      { key: 'Shift-Mod-z', run: () => redo(view.state, view.dispatch) },
+      { key: 'Mod-y', run: () => redo(view.state, view.dispatch) },
+      {
+        key: 'Backspace',
+        run: () => {
+          const ranges = this.cm.state.selection.ranges
+
+          if (ranges.length > 1) return false
+
+          const selection = ranges[0]
+
+          if (selection && (!selection.empty || selection.anchor > 0))
+            return false
+
+          if (this.cm.state.doc.lines >= 2) return false
+
+          const state = this.view.state
+          const pos = this.getPos() ?? 0
+          const tr = state.tr.replaceWith(
+            pos,
+            pos + this.node.nodeSize,
+            state.schema.nodes.paragraph!.createChecked({}, this.node.content)
+          )
+
+          tr.setSelection(TextSelection.near(tr.doc.resolve(pos)))
+
+          this.view.dispatch(tr)
+          this.view.focus()
+          return true
+        },
+      },
+    ]
+  }
+
+  private maybeEscape = (unit: 'line' | 'char', dir: -1 | 1): boolean => {
+    const { state } = this.cm
+    let main: SelectionRange | Line = state.selection.main
+    if (!main.empty) return false
+    if (unit === 'line') main = state.doc.lineAt(main.head)
+    if (dir < 0 ? main.from > 0 : main.to < state.doc.length) return false
+
+    const targetPos = (this.getPos() ?? 0) + (dir < 0 ? 0 : this.node.nodeSize)
+    const selection = TextSelection.near(
+      this.view.state.doc.resolve(targetPos),
+      dir
+    )
+    const tr = this.view.state.tr.setSelection(selection).scrollIntoView()
+    this.view.dispatch(tr)
+    this.view.focus()
+    return true
+  }
+
+  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
+    this.text.value = node.textContent
+    this.updateLanguage()
+    if (this.view.editable === this.cm.state.readOnly) {
+      this.cm.dispatch({
+        effects: this.readOnlyConf.reconfigure(
+          EditorState.readOnly.of(!this.view.editable)
+        ),
+      })
+    }
+
+    const change = computeChange(this.cm.state.doc.toString(), node.textContent)
+    if (change) {
+      this.updating = true
+      this.cm.dispatch({
+        changes: { from: change.from, to: change.to, insert: change.text },
+        scrollIntoView: true,
+      })
+      this.updating = false
+    }
+    return true
+  }
+
+  selectNode() {
+    this.selected.value = true
+    this.cm.focus()
+  }
+
+  deselectNode() {
+    this.selected.value = false
+  }
+
+  stopEvent() {
+    return true
+  }
+
+  destroy() {
+    this.app.unmount()
+    this.cm.destroy()
+    this.disposeSelectedWatcher()
+  }
+
+  setLanguage = (language: string) => {
+    this.view.dispatch(
+      this.view.state.tr.setNodeAttribute(
+        this.getPos() ?? 0,
+        'language',
+        language
+      )
+    )
+  }
+
+  getAllLanguages = () => {
+    return this.loader.getAll()
+  }
+}
+
+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) }
+}