@bytechain.cn/colamd 1.5.0

package/src/preload/index.ts

@@ -0,0 +1,110 @@
+import { contextBridge, ipcRenderer, webUtils } from 'electron'
+
+export interface ElectronAPI {
+  openFile: () => Promise<{ path: string; content: string } | null>
+  openFilePath: (path: string) => Promise<{ path: string; content: string } | null>
+  saveFile: (content: string) => Promise<boolean>
+  saveFileAs: (content: string) => Promise<boolean>
+  exportPDF: () => Promise<boolean>
+  exportHTML: (html: string) => Promise<boolean>
+  newSlides: () => Promise<string | null>
+  openAsSlides: (content: string) => Promise<boolean>
+  loadCustomTheme: () => Promise<{ name: string; css: string } | null>
+  loadThemeCSS: (fileName: string) => Promise<string | null>
+  getPathForFile: (file: File) => string
+  openExternal: (url: string) => void
+  onFileChanged: (callback: (content: string) => void) => void
+  onNewFile: (callback: () => void) => void
+  onFileOpened: (callback: (data: { path: string; content: string }) => void) => void
+  onMenuOpen: (callback: () => void) => void
+  onMenuSave: (callback: () => void) => void
+  onMenuSaveAs: (callback: () => void) => void
+  onMenuExportPDF: (callback: () => void) => void
+  onMenuExportHTML: (callback: () => void) => void
+  onMenuNewSlides: (callback: () => void) => void
+  onMenuOpenAsSlides: (callback: () => void) => void
+  onNewSlidesContent: (callback: (content: string) => void) => void
+  onSetTheme: (callback: (theme: string) => void) => void
+  onSetCustomCSS: (callback: (css: string) => void) => void
+  exportSlides: (content: string) => Promise<boolean>
+  onMenuExportSlides: (callback: () => void) => void
+  onAgentActivity: (callback: (state: string) => void) => void
+  registerPlugins: (plugins: Array<{ id: string; name: string; enabled: boolean }>) => Promise<boolean>
+  syncPluginState: (id: string, enabled: boolean) => Promise<void>
+  onMenuTogglePlugin: (callback: (id: string) => void) => void
+  onMenuImportTheme: (callback: () => void) => void
+  exportFile: (dataUrl: string, defaultName: string) => Promise<boolean>
+}
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFile: () => ipcRenderer.invoke('open-file'),
+  openFilePath: (path: string) => ipcRenderer.invoke('open-file-path', path),
+  saveFile: (content: string) => ipcRenderer.invoke('save-file', content),
+  saveFileAs: (content: string) => ipcRenderer.invoke('save-file-as', content),
+  exportPDF: () => ipcRenderer.invoke('export-pdf'),
+  exportHTML: (html: string) => ipcRenderer.invoke('export-html', html),
+  exportSlides: (content: string) => ipcRenderer.invoke('export-slides', content),
+  newSlides: () => ipcRenderer.invoke('new-slides'),
+  openAsSlides: (content: string) => ipcRenderer.invoke('open-as-slides', content),
+  loadCustomTheme: () => ipcRenderer.invoke('load-custom-theme'),
+  loadThemeCSS: (fileName: string) => ipcRenderer.invoke('load-theme-css', fileName),
+  getPathForFile: (file: File) => webUtils.getPathForFile(file),
+  openExternal: (url: string) => ipcRenderer.send('open-external', url),
+  onFileChanged: (callback: (content: string) => void) => {
+    ipcRenderer.on('file-changed', (_event, content) => callback(content))
+  },
+  onNewFile: (callback: () => void) => {
+    ipcRenderer.on('new-file', () => callback())
+  },
+  onFileOpened: (callback: (data: { path: string; content: string }) => void) => {
+    ipcRenderer.on('file-opened', (_event, data) => callback(data))
+  },
+  onMenuOpen: (callback: () => void) => {
+    ipcRenderer.on('menu-open', () => callback())
+  },
+  onMenuSave: (callback: () => void) => {
+    ipcRenderer.on('menu-save', () => callback())
+  },
+  onMenuSaveAs: (callback: () => void) => {
+    ipcRenderer.on('menu-save-as', () => callback())
+  },
+  onMenuExportPDF: (callback: () => void) => {
+    ipcRenderer.on('menu-export-pdf', () => callback())
+  },
+  onMenuExportHTML: (callback: () => void) => {
+    ipcRenderer.on('menu-export-html', () => callback())
+  },
+  onMenuNewSlides: (callback: () => void) => {
+    ipcRenderer.on('menu-new-slides', () => callback())
+  },
+  onMenuOpenAsSlides: (callback: () => void) => {
+    ipcRenderer.on('menu-open-as-slides', () => callback())
+  },
+  onNewSlidesContent: (callback: (content: string) => void) => {
+    ipcRenderer.on('new-slides-content', (_event, content) => callback(content))
+  },
+  onSetTheme: (callback: (theme: string) => void) => {
+    ipcRenderer.on('set-theme', (_event, theme) => callback(theme))
+  },
+  onSetCustomCSS: (callback: (css: string) => void) => {
+    ipcRenderer.on('set-custom-css', (_event, css) => callback(css))
+  },
+  onMenuImportTheme: (callback: () => void) => {
+    ipcRenderer.on('menu-import-theme', () => callback())
+  },
+  onMenuExportSlides: (callback: () => void) => {
+    ipcRenderer.on('menu-export-slides', () => callback())
+  },
+  onAgentActivity: (callback: (state: string) => void) => {
+    ipcRenderer.on('agent-activity', (_event, state) => callback(state))
+  },
+  registerPlugins: (plugins: Array<{ id: string; name: string; enabled: boolean }>) =>
+    ipcRenderer.invoke('register-plugins', plugins),
+  syncPluginState: (id: string, enabled: boolean) =>
+    ipcRenderer.invoke('sync-plugin-state', id, enabled),
+  onMenuTogglePlugin: (callback: (id: string) => void) => {
+    ipcRenderer.on('menu-toggle-plugin', (_event, id) => callback(id))
+  },
+  exportFile: (dataUrl: string, defaultName: string) =>
+    ipcRenderer.invoke('save-export-file', dataUrl, defaultName),
+} satisfies ElectronAPI)

package/src/renderer/editor/editor.ts

@@ -0,0 +1,204 @@
+import { Editor, rootCtx, defaultValueCtx, editorViewCtx, serializerCtx, remarkPluginsCtx, nodeViewCtx, schemaCtx } from '@milkdown/kit/core'
+import { DOMSerializer } from '@milkdown/kit/prose/model'
+import { EditorView } from '@milkdown/kit/prose/view'
+import remarkBreaks from 'remark-breaks'
+import { commonmark } from '@milkdown/kit/preset/commonmark'
+import { gfm } from '@milkdown/kit/preset/gfm'
+import { history } from '@milkdown/kit/plugin/history'
+import { listener, listenerCtx } from '@milkdown/kit/plugin/listener'
+import { clipboard } from '@milkdown/kit/plugin/clipboard'
+import { replaceAll } from '@milkdown/kit/utils'
+import { htmlView } from './html-view'
+import { getAllPluginModules } from './plugins'
+
+import '@milkdown/kit/prose/view/style/prosemirror.css'
+
+let editorInstance: Editor | null = null
+
+const inlineStyles: Record<string, string> = {
+  'h1': 'font-size:1.8em;font-weight:700;margin:1em 0 .5em;padding-bottom:.3em;border-bottom:1px solid #eee;',
+  'h2': 'font-size:1.4em;font-weight:600;margin:1em 0 .5em;padding-bottom:.25em;border-bottom:1px solid #eee;',
+  'h3': 'font-size:1.2em;font-weight:600;margin:.8em 0 .4em;',
+  'h4': 'font-weight:600;margin:.8em 0 .4em;',
+  'h5': 'font-weight:600;margin:.8em 0 .4em;',
+  'h6': 'font-weight:600;margin:.8em 0 .4em;',
+  'p': 'margin:.5em 0;line-height:1.75;',
+  'strong': 'font-weight:600;',
+  'a': 'color:#0969da;text-decoration:none;',
+  'code': 'background:rgba(175,184,193,0.2);padding:2px 6px;border-radius:3px;font-size:.875em;font-family:Menlo,Monaco,monospace;',
+  'pre': 'background:#f6f8fa;padding:16px;border-radius:6px;overflow-x:auto;margin:1em 0;',
+  'blockquote': 'border-left:4px solid #ddd;padding-left:16px;margin:1em 0;color:#666;',
+  'ul': 'padding-left:24px;margin:.5em 0;',
+  'ol': 'padding-left:24px;margin:.5em 0;',
+  'li': 'margin:.25em 0;',
+  'table': 'border-collapse:collapse;width:100%;margin:1em 0;',
+  'th': 'border:1px solid #ddd;padding:8px 12px;text-align:left;font-weight:600;background:#f6f8fa;',
+  'td': 'border:1px solid #ddd;padding:8px 12px;text-align:left;',
+  'hr': 'border:none;border-top:2px solid #ddd;margin:2em 0;',
+  'img': 'max-width:100%;',
+}
+
+function enhanceClipboard(e: ClipboardEvent): void {
+  const html = e.clipboardData?.getData('text/html')
+  if (!html) return
+
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+
+  for (const [tag, style] of Object.entries(inlineStyles)) {
+    doc.querySelectorAll(tag).forEach((el) => {
+      ;(el as HTMLElement).setAttribute('style', style)
+    })
+  }
+
+  doc.querySelectorAll('pre code').forEach((el) => {
+    ;(el as HTMLElement).setAttribute('style', 'background:none;padding:0;font-size:.875em;line-height:1.6;font-family:Menlo,Monaco,monospace;')
+  })
+
+  doc.querySelectorAll('.math-inline').forEach((el) => {
+    ;(el as HTMLElement).setAttribute('style', 'display:inline;padding:2px 4px;border-radius:3px;background:rgba(175,184,193,0.2);')
+  })
+  doc.querySelectorAll('.math-block').forEach((el) => {
+    ;(el as HTMLElement).setAttribute('style', 'display:block;padding:16px;margin:1em 0;border-radius:6px;background:#f6f8fa;text-align:center;overflow-x:auto;')
+  })
+
+  doc.querySelectorAll('.mermaid-block').forEach((el) => {
+    ;(el as HTMLElement).setAttribute('style', 'display:block;padding:16px;margin:1em 0;border-radius:6px;background:#f6f8fa;border:1px solid #d0d7de;')
+  })
+  doc.querySelectorAll('.mermaid-preview svg').forEach((el) => {
+    ;(el as HTMLElement).setAttribute('style', 'max-width:100%;height:auto;')
+  })
+
+  e.clipboardData?.setData('text/html', doc.body.innerHTML)
+}
+
+const defaultContent = `# Welcome to ColaMD\n\nStart typing here...\n`
+
+export async function createEditor(
+  rootId: string,
+  onChange?: (markdown: string) => void
+): Promise<Editor> {
+  const root = document.getElementById(rootId)
+  if (!root) throw new Error(`Element #${rootId} not found`)
+
+  const pluginModules = getAllPluginModules()
+
+  let builder = Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, root)
+      ctx.set(defaultValueCtx, defaultContent)
+      ctx.set(remarkPluginsCtx, [
+        ...pluginModules.map((m) => m.info.remarkPlugin),
+        { plugin: remarkBreaks, options: undefined },
+      ])
+      if (onChange) {
+        ctx.get(listenerCtx).markdownUpdated((_ctx, markdown) => {
+          onChange(markdown)
+        })
+      }
+    })
+    .use(commonmark)
+    .use(gfm)
+    .use(history)
+    .use(listener)
+    .use(clipboard)
+    .use(htmlView)
+
+  for (const mod of pluginModules) {
+    for (const p of mod.milkdownPlugins) {
+      builder = builder.use(p)
+    }
+  }
+
+  editorInstance = await builder.create()
+
+  editorInstance.action((ctx) => {
+    const nvs = ctx.get(nodeViewCtx)
+    const schema = ctx.get(schemaCtx)
+    const fixed = nvs.map((nv: any, i: number) => {
+      if (nv[0] != null) return nv
+      const viewFn = nv[1]
+      const fallbackNames = ['math_inline', 'math_block', 'mermaid_block']
+      const name = fallbackNames[i - 1]
+      if (name && schema.nodes[name]) {
+        return [name, viewFn]
+      }
+      return nv
+    })
+    ctx.set(nodeViewCtx, fixed)
+
+    const oldView = ctx.get(editorViewCtx)
+    const rootEl = ctx.get(rootCtx)
+    const nodeViews = Object.fromEntries(fixed)
+    const newView = new EditorView(rootEl, {
+      state: oldView.state,
+      nodeViews,
+      dispatchTransaction: oldView.props.dispatchTransaction!,
+    })
+    oldView.destroy()
+    rootEl.appendChild(newView.dom)
+    ctx.set(editorViewCtx, newView)
+  })
+
+  root.addEventListener('copy', enhanceClipboard)
+  root.addEventListener('cut', enhanceClipboard)
+
+  root.addEventListener('click', (e) => {
+    if (!(e.metaKey || e.ctrlKey)) return
+    const link = (e.target as HTMLElement).closest('a')
+    if (!link) return
+    const href = link.getAttribute('href')
+    if (href) {
+      e.preventDefault()
+      window.electronAPI.openExternal(href)
+    }
+  })
+
+  return editorInstance
+}
+
+export function getMarkdown(): string {
+  if (!editorInstance) return ''
+  let markdown = ''
+  editorInstance.action((ctx) => {
+    const serializer = ctx.get(serializerCtx)
+    const view = ctx.get(editorViewCtx)
+    markdown = serializer(view.state.doc)
+  })
+  return markdown
+}
+
+export function getHTML(): string {
+  if (!editorInstance) return ''
+  let html = ''
+  editorInstance.action((ctx) => {
+    const view = ctx.get(editorViewCtx)
+    const div = document.createElement('div')
+    const fragment = DOMSerializer.fromSchema(view.state.schema).serializeFragment(view.state.doc.content)
+    div.appendChild(fragment)
+    html = div.innerHTML
+  })
+  return html
+}
+
+export function setMarkdown(content: string): void {
+  if (!editorInstance) return
+  editorInstance.action(replaceAll(content))
+}
+
+export function togglePluginMode(nodeTypes: string[], mode: 'rendered' | 'raw'): void {
+  if (!editorInstance) return
+  editorInstance.action((ctx) => {
+    const view = ctx.get(editorViewCtx)
+    const { state, dispatch } = view
+    const tr = state.tr
+    const nodeTypeSet = new Set(nodeTypes)
+
+    state.doc.descendants((node, pos) => {
+      if (nodeTypeSet.has(node.type.name)) {
+        tr.setNodeMarkup(pos, undefined, { ...node.attrs, mode })
+      }
+    })
+
+    dispatch(tr)
+  })
+}

package/src/renderer/editor/html-view.ts

@@ -0,0 +1,15 @@
+import { $view } from '@milkdown/kit/utils'
+import { htmlSchema } from '@milkdown/kit/preset/commonmark'
+import type { NodeViewConstructor } from '@milkdown/kit/prose/view'
+
+export const htmlView = $view(htmlSchema.node, (): NodeViewConstructor => {
+  return (node) => {
+    const dom = document.createElement('span')
+    dom.classList.add('milkdown-html-inline')
+    dom.innerHTML = node.attrs.value as string
+    return {
+      dom,
+      stopEvent: () => true
+    }
+  }
+})

package/src/renderer/editor/plugins/index.ts

@@ -0,0 +1,76 @@
+import type { MilkdownPlugin } from '@milkdown/ctx'
+import type { Plugin } from 'unified'
+
+export interface ExportCapability {
+  label: string
+  defaultName: string
+  filter: { name: string; extensions: string[] }
+  execute: (element: HTMLElement) => Promise<string | null>
+}
+
+export interface RendererPlugin {
+  id: string
+  name: string
+  enabled: boolean
+  remarkPlugin: { plugin: Plugin; options?: any }
+  nodeTypes: string[]
+  onInit?: () => void
+  onThemeChange?: (theme: string) => void
+  exportCapabilities?: ExportCapability[]
+}
+
+export interface PluginModule {
+  info: RendererPlugin
+  milkdownPlugins: MilkdownPlugin[]
+}
+
+const modules: PluginModule[] = []
+
+export function registerPluginModule(m: PluginModule): void {
+  modules.push(m)
+}
+
+export function getAllPluginModules(): PluginModule[] {
+  return modules
+}
+
+export function getAllPlugins(): RendererPlugin[] {
+  return modules.map(m => m.info)
+}
+
+export function getEnabledPlugins(): RendererPlugin[] {
+  return modules.filter(m => m.info.enabled).map(m => m.info)
+}
+
+export function getPlugin(id: string): RendererPlugin | undefined {
+  return modules.find(m => m.info.id === id)?.info
+}
+
+export function togglePlugin(id: string): void {
+  const m = modules.find(m => m.info.id === id)
+  if (m) m.info.enabled = !m.info.enabled
+}
+
+export function findPluginBySelector(selector: string): { plugin: RendererPlugin; capability: ExportCapability } | undefined {
+  for (const m of modules) {
+    if (!m.info.enabled || !m.info.exportCapabilities?.length) continue
+    for (const nodeType of m.info.nodeTypes) {
+      if (selector.includes(nodeType.replace(/_/g, '-'))) {
+        return { plugin: m.info, capability: m.info.exportCapabilities[0] }
+      }
+    }
+  }
+  return undefined
+}
+
+export function findExportCapabilities(selector: string): ExportCapability[] {
+  for (const m of modules) {
+    if (!m.info.enabled || !m.info.exportCapabilities?.length) continue
+    for (const nodeType of m.info.nodeTypes) {
+      if (selector.includes(nodeType.replace(/_/g, '-'))) {
+        return m.info.exportCapabilities
+      }
+    }
+  }
+  return []
+}