@collaflow/markdown 0.1.0

package/dist/index.js

@@ -0,0 +1,675 @@
+// src/editor/factory.ts
+import * as Y4 from "yjs";
+import { Editor, defaultValueCtx, editorViewCtx, rootCtx } from "@milkdown/core";
+import { commonmark } from "@milkdown/preset-commonmark";
+import { listener, listenerCtx as listenerCtx2 } from "@milkdown/plugin-listener";
+import { getMarkdown, replaceAll as replaceAll2 } from "@milkdown/utils";
+import { block } from "@milkdown/plugin-block";
+
+// src/editor/options.ts
+var DEFAULT_EDITOR_OPTIONS = {
+  defaultValue: "",
+  highlight: true,
+  theme: "light"
+};
+function resolveEditorOptions(options) {
+  return {
+    root: options.root,
+    defaultValue: options.defaultValue ?? DEFAULT_EDITOR_OPTIONS.defaultValue,
+    highlight: options.highlight ?? DEFAULT_EDITOR_OPTIONS.highlight,
+    theme: options.theme ?? DEFAULT_EDITOR_OPTIONS.theme,
+    collab: options.collab,
+    plugins: options.plugins,
+    onChange: options.onChange,
+    onAwarenessChange: options.onAwarenessChange
+  };
+}
+
+// src/collab/provider.ts
+import * as Y2 from "yjs";
+import * as awarenessProtocol from "y-protocols/awareness";
+import { HocuspocusProvider } from "@hocuspocus/provider";
+
+// src/collab/cursor.ts
+import * as Y from "yjs";
+function toBase64(bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+function fromBase64(text) {
+  const binary = atob(text);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+function encodeRelativePosition2(yText, index) {
+  const rel = Y.createRelativePositionFromTypeIndex(yText, index);
+  return toBase64(Y.encodeRelativePosition(rel));
+}
+function decodeOffset(yText, encoded) {
+  try {
+    const rel = Y.decodeRelativePosition(fromBase64(encoded));
+    const doc = yText.doc;
+    if (!doc) return null;
+    const abs = Y.createAbsolutePositionFromRelativePosition(rel, doc);
+    if (!abs || abs.type !== yText) return null;
+    return abs.index;
+  } catch {
+    return null;
+  }
+}
+function decodeSelection(yText, selection) {
+  const anchor = decodeOffset(yText, selection.anchor);
+  const head = decodeOffset(yText, selection.head);
+  if (anchor === null || head === null) return null;
+  return { anchor, head };
+}
+
+// src/collab/provider.ts
+var CollaFlowProvider = class {
+  doc;
+  awareness;
+  provider;
+  connected = false;
+  constructor(options) {
+    this.doc = new Y2.Doc();
+    this.awareness = new awarenessProtocol.Awareness(this.doc);
+    if (options.user) {
+      this.awareness.setLocalState({ user: options.user });
+    }
+    this.provider = new HocuspocusProvider({
+      url: options.serverUrl,
+      name: options.roomId,
+      document: this.doc,
+      awareness: this.awareness,
+      onStatus: ({ status }) => {
+        this.connected = status === "connected";
+      }
+    });
+  }
+  /**
+   * 当前是否已与协同服务建立连接。
+   */
+  get isConnected() {
+    return this.connected;
+  }
+  /**
+   * 协同内容源：以 Markdown 文本为唯一真相的 Y.Text。
+   *
+   * 源码区与预览区都读写这一份文本；协同（Hocuspocus）只负责同步它，
+   * 因此多人编辑按字符级 CRDT 合并，不会再出现「整体替换」式的覆盖。
+   */
+  get content() {
+    return this.doc.getText("content");
+  }
+  /**
+   * 获取当前在线用户列表。
+   */
+  getAwarenessUsers() {
+    const users = [];
+    this.awareness.getStates().forEach((state, clientId) => {
+      const user = state?.user;
+      if (user?.name && user?.color) {
+        users.push({ clientId, user });
+      }
+    });
+    return users;
+  }
+  /**
+   * 建立连接。
+   */
+  connect() {
+    this.provider.connect();
+  }
+  /**
+   * 上报本地选区（以 Y.Text 字符偏移表示）。
+   *
+   * 会被编码为相对位置存入 awareness，随并发编辑自愈，避免光标错位。
+   */
+  setLocalSelection(anchor, head) {
+    const selection = {
+      anchor: encodeRelativePosition2(this.content, anchor),
+      head: encodeRelativePosition2(this.content, head)
+    };
+    this.awareness.setLocalStateField("selection", selection);
+  }
+  /**
+   * 读取远端用户的光标列表（已解码为 Y.Text 绝对偏移）。
+   */
+  getRemoteCursors() {
+    const cursors = [];
+    this.awareness.getStates().forEach((state, clientId) => {
+      if (clientId === this.doc.clientID) return;
+      const user = state?.user;
+      const selection = state?.selection;
+      if (!user?.name || !user?.color || !selection) return;
+      const offsets = decodeSelection(this.content, selection);
+      if (!offsets) return;
+      cursors.push({ clientId, user, anchor: offsets.anchor, head: offsets.head });
+    });
+    return cursors;
+  }
+  /**
+   * 断开连接（保留本地 doc 内容，可再次 connect）。
+   */
+  disconnect() {
+    this.provider.disconnect();
+  }
+  /**
+   * 销毁 Provider，清理连接与 Yjs 资源。
+   */
+  destroy() {
+    this.provider.destroy();
+    this.awareness.destroy();
+    this.doc.destroy();
+  }
+};
+
+// src/collab/yjs-binding.ts
+import "yjs";
+import { InitReady, editorCtx } from "@milkdown/core";
+import { listenerCtx } from "@milkdown/plugin-listener";
+import { replaceAll } from "@milkdown/utils";
+var YJS_ORIGIN_MILKDOWN = "colla-md:milkdown";
+var YJS_ORIGIN_TEXTAREA = "colla-md:textarea";
+function diffApply(yText, newText, origin) {
+  const oldText = yText.toString();
+  if (oldText === newText) return;
+  let start = 0;
+  const minLen = Math.min(oldText.length, newText.length);
+  while (start < minLen && oldText[start] === newText[start]) start++;
+  let endOld = oldText.length;
+  let endNew = newText.length;
+  while (endOld > start && endNew > start && oldText[endOld - 1] === newText[endNew - 1]) {
+    endOld--;
+    endNew--;
+  }
+  const deleteLength = endOld - start;
+  const insertText = newText.slice(start, endNew);
+  const ydoc = yText.doc;
+  if (!ydoc) return;
+  ydoc.transact(() => {
+    if (deleteLength > 0) yText.delete(start, deleteLength);
+    if (insertText) yText.insert(start, insertText);
+  }, origin);
+}
+function unescapeLeadingHash(markdown2) {
+  return markdown2.replace(/^\\#/gm, "#");
+}
+function createCollabPlugins(content) {
+  return (ctx) => async () => {
+    await ctx.wait(InitReady);
+    const editor = ctx.get(editorCtx);
+    content.observe((_, transaction) => {
+      if (transaction.origin === YJS_ORIGIN_MILKDOWN) return;
+      void editor.action(replaceAll(content.toString()));
+    });
+    ctx.get(listenerCtx).markdownUpdated((_, markdown2) => {
+      diffApply(content, unescapeLeadingHash(markdown2), YJS_ORIGIN_MILKDOWN);
+    });
+  };
+}
+
+// src/editor/plugins/awareness.ts
+import { yCursorPlugin } from "y-prosemirror";
+
+// src/editor/plugins/highlight.ts
+import { refractor } from "refractor";
+import { prism, prismConfig } from "@milkdown/plugin-prism";
+import bash from "refractor/bash";
+import css from "refractor/css";
+import javascript from "refractor/javascript";
+import json from "refractor/json";
+import jsx from "refractor/jsx";
+import markdown from "refractor/markdown";
+import markup from "refractor/markup";
+import python from "refractor/python";
+import tsx from "refractor/tsx";
+import typescript from "refractor/typescript";
+var DEFAULT_SYNTAXES = [
+  javascript,
+  typescript,
+  tsx,
+  jsx,
+  markup,
+  css,
+  markdown,
+  json,
+  bash,
+  python
+];
+function configureHighlightLanguages(syntaxes) {
+  for (const syntax of syntaxes) {
+    refractor.register(syntax);
+  }
+}
+function createHighlightPlugin(options) {
+  const isShiki = options?.type === "shiki";
+  if (isShiki) {
+    return { plugins: prism };
+  }
+  configureHighlightLanguages(DEFAULT_SYNTAXES);
+  return {
+    plugins: prism,
+    configure: (ctx) => {
+      ctx.set(prismConfig.key, { configureRefractor: (r) => r });
+    }
+  };
+}
+
+// src/editor/plugins/layout.ts
+import { $node } from "@milkdown/utils";
+var emptyMarkdownSpec = {
+  parseMarkdown: {
+    match: () => false,
+    runner: () => {
+    }
+  },
+  toMarkdown: {
+    match: () => false,
+    runner: () => {
+    }
+  }
+};
+var calloutNode = $node("callout", () => ({
+  group: "block",
+  content: "block+",
+  attrs: {
+    type: { default: "info" }
+  },
+  parseDOM: [
+    {
+      tag: "div.callout",
+      getAttrs: (dom) => {
+        const element = dom;
+        return { type: element.dataset.type ?? "info" };
+      }
+    }
+  ],
+  toDOM: (node) => [
+    "div",
+    { class: `callout callout--${node.attrs.type}`, "data-type": node.attrs.type },
+    0
+  ],
+  ...emptyMarkdownSpec
+}));
+var columnsNode = $node("columns", () => ({
+  group: "block",
+  content: "column+",
+  attrs: {
+    columns: { default: 2 }
+  },
+  parseDOM: [
+    {
+      tag: "div.columns",
+      getAttrs: (dom) => {
+        const element = dom;
+        return { columns: Number(element.dataset.columns) || 2 };
+      }
+    }
+  ],
+  toDOM: (node) => ["div", { class: "columns", "data-columns": node.attrs.columns }, 0],
+  ...emptyMarkdownSpec
+}));
+var columnNode = $node("column", () => ({
+  group: "block",
+  content: "block+",
+  parseDOM: [{ tag: "div.column" }],
+  toDOM: () => ["div", { class: "column" }, 0],
+  ...emptyMarkdownSpec
+}));
+var cardNode = $node("card", () => ({
+  group: "block",
+  content: "block+",
+  attrs: {
+    title: { default: "" }
+  },
+  parseDOM: [
+    {
+      tag: "div.card",
+      getAttrs: (dom) => {
+        const element = dom;
+        return { title: element.dataset.title ?? "" };
+      }
+    }
+  ],
+  toDOM: (node) => ["div", { class: "card", "data-title": node.attrs.title }, 0],
+  ...emptyMarkdownSpec
+}));
+var layoutNodes = [
+  calloutNode,
+  columnsNode,
+  columnNode,
+  cardNode
+];
+
+// src/editor/plugins/theme.ts
+import { EditorViewReady, rootDOMCtx } from "@milkdown/core";
+import { lightTheme, darkTheme } from "@collaflow/design";
+
+// src/styles/notion-style.ts
+var NOTION_FONT_FAMILY = 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif';
+var NOTION_MONO_FAMILY = 'SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace';
+var NOTION_EDITOR_CSS = `
+.colla-md {
+  font-family: ${NOTION_FONT_FAMILY};
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--cf-text-primary);
+  font-weight: 400;
+  word-break: break-word;
+  -webkit-font-smoothing: antialiased;
+}
+.colla-md h1 { font-size: 1.875em; font-weight: 700; line-height: 1.3; margin: 1.4em 0 0.2em; }
+.colla-md h2 { font-size: 1.5em; font-weight: 600; line-height: 1.3; margin: 1.2em 0 0.2em; }
+.colla-md h3 { font-size: 1.25em; font-weight: 600; line-height: 1.3; margin: 1em 0 0.2em; }
+.colla-md h4 { font-size: 1em; font-weight: 600; line-height: 1.3; margin: 0.8em 0 0.2em; }
+.colla-md h5, .colla-md h6 { font-size: 0.875em; font-weight: 600; line-height: 1.3; margin: 0.8em 0 0.2em; }
+.colla-md p { margin: 0; padding: 3px 2px; line-height: 1.5; }
+.colla-md ul, .colla-md ol { margin: 0; padding-left: 1.6em; padding-top: 2px; padding-bottom: 2px; }
+.colla-md li { margin: 2px 0; }
+.colla-md li > p { padding: 0; }
+.colla-md :not(pre) > code {
+  font-family: ${NOTION_MONO_FAMILY};
+  background: rgba(135, 131, 120, 0.15);
+  color: var(--cf-text-primary);
+  border-radius: 4px;
+  padding: 0.2em 0.4em;
+  font-size: 0.85em;
+}
+.colla-md pre {
+  font-family: ${NOTION_MONO_FAMILY};
+  background: var(--cf-bg-tertiary);
+  color: var(--cf-text-primary);
+  border-radius: 4px;
+  padding: 1em 1.2em;
+  margin: 4px 0;
+  overflow: auto;
+  font-size: 0.85em;
+  line-height: 1.45;
+}
+.colla-md pre code { font-family: inherit; background: none; padding: 0; }
+.colla-md blockquote {
+  border-left: 3px solid var(--cf-border-strong);
+  padding-left: 12px;
+  margin: 4px 0;
+  color: var(--cf-text-secondary);
+}
+.colla-md a { color: var(--cf-accent-blue); text-decoration: none; }
+.colla-md a:hover { text-decoration: underline; }
+.colla-md strong { font-weight: 600; }
+.colla-md hr { border: none; border-top: 1px solid var(--cf-border-default); margin: 6px 0; }
+.colla-md img { max-width: 100%; border-radius: 4px; }
+`;
+var COLLAB_CURSOR_CSS = `
+.colla-rc-cursor {
+  position: absolute;
+  width: 2px;
+  pointer-events: none;
+  z-index: 20;
+}
+.colla-rc-label {
+  position: absolute;
+  top: -1.25em;
+  left: -1px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 3px 3px 3px 0;
+  color: #fff;
+  white-space: nowrap;
+  font-family: ${NOTION_FONT_FAMILY};
+  pointer-events: none;
+  user-select: none;
+  z-index: 21;
+}
+`;
+var NOTION_STYLE_ID = "colla-md-notion-style";
+var COLLAB_CURSOR_STYLE_ID = "colla-md-collab-cursor";
+function injectNotionStyle() {
+  if (document.getElementById(NOTION_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = NOTION_STYLE_ID;
+  style.textContent = NOTION_EDITOR_CSS;
+  document.head.appendChild(style);
+}
+function injectCollabCursorStyle() {
+  if (document.getElementById(COLLAB_CURSOR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = COLLAB_CURSOR_STYLE_ID;
+  style.textContent = COLLAB_CURSOR_CSS;
+  document.head.appendChild(style);
+}
+
+// src/editor/plugins/theme.ts
+function buildThemeVariables(colors) {
+  return [
+    `--cf-bg-primary: ${colors.background.primary};`,
+    `--cf-bg-secondary: ${colors.background.secondary};`,
+    `--cf-bg-tertiary: ${colors.background.tertiary};`,
+    `--cf-text-primary: ${colors.text.primary};`,
+    `--cf-text-secondary: ${colors.text.secondary};`,
+    `--cf-text-disabled: ${colors.text.disabled};`,
+    `--cf-border-default: ${colors.border.default};`,
+    `--cf-border-strong: ${colors.border.strong};`,
+    `--cf-accent-blue: ${colors.accent.blue};`,
+    `--cf-accent-green: ${colors.accent.green};`,
+    `--cf-accent-orange: ${colors.accent.orange};`,
+    `--cf-accent-red: ${colors.accent.red};`,
+    `--colla-md-selection: color-mix(in srgb, ${colors.accent.blue} 15%, transparent);`
+  ].join("\n");
+}
+function createThemePlugin(theme = "light") {
+  return (ctx) => async () => {
+    await ctx.wait(EditorViewReady);
+    const root = ctx.get(rootDOMCtx);
+    const colors = theme === "dark" ? darkTheme.colors : lightTheme.colors;
+    root.classList.add("colla-md", `colla-md--${theme}`);
+    root.dataset.theme = theme;
+    root.style.cssText += buildThemeVariables(colors);
+    injectNotionStyle();
+    injectCollabCursorStyle();
+  };
+}
+
+// src/editor/factory.ts
+function buildPlugins(resolved, content) {
+  const highlight = resolved.highlight ? createHighlightPlugin(resolved.highlight === true ? void 0 : resolved.highlight) : null;
+  const plugins = [
+    createThemePlugin(resolved.theme),
+    ...highlight?.plugins ?? [],
+    ...layoutNodes,
+    ...resolved.plugins ?? [],
+    createCollabPlugins(content)
+  ];
+  return { plugins, configureHighlight: highlight?.configure };
+}
+function setupAwarenessChangeListener(provider, onChange) {
+  if (!provider || !onChange) return null;
+  const handler = () => onChange(provider.getAwarenessUsers());
+  provider.awareness.on("change", handler);
+  handler();
+  return () => provider.awareness.off("change", handler);
+}
+async function createEditor(options) {
+  const resolved = resolveEditorOptions(options);
+  const provider = resolved.collab ? new CollaFlowProvider(resolved.collab) : null;
+  const content = provider ? provider.content : new Y4.Doc().getText("content");
+  if (content.length === 0 && resolved.defaultValue) {
+    content.insert(0, resolved.defaultValue);
+  }
+  const { plugins: dynamicPlugins, configureHighlight } = buildPlugins(resolved, content);
+  const editor = await Editor.make().config((ctx) => {
+    ctx.set(rootCtx, resolved.root);
+    ctx.set(defaultValueCtx, resolved.defaultValue);
+    configureHighlight?.(ctx);
+    if (resolved.onChange) {
+      ctx.get(listenerCtx2).markdownUpdated((_, markdown2) => {
+        resolved.onChange(unescapeLeadingHash(markdown2));
+      });
+    }
+  }).use(commonmark).use(listener).use(block).use(dynamicPlugins).create();
+  if (provider) {
+    provider.connect();
+  }
+  const removeAwarenessChangeListener = setupAwarenessChangeListener(
+    provider,
+    resolved.onAwarenessChange
+  );
+  return {
+    get editor() {
+      return editor;
+    },
+    get content() {
+      return content;
+    },
+    getView() {
+      return editor.action((ctx) => ctx.get(editorViewCtx));
+    },
+    getMarkdown() {
+      return unescapeLeadingHash(editor.action(getMarkdown()));
+    },
+    async setMarkdown(value) {
+      await editor.action(replaceAll2(value));
+    },
+    getAwarenessUsers() {
+      return provider?.getAwarenessUsers() ?? [];
+    },
+    setLocalSelection(anchor, head) {
+      provider?.setLocalSelection(anchor, head);
+    },
+    getRemoteCursors() {
+      return provider?.getRemoteCursors() ?? [];
+    },
+    async destroy() {
+      removeAwarenessChangeListener?.();
+      if (provider) {
+        provider.destroy();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+      await editor.destroy();
+    }
+  };
+}
+
+// src/editor/plugins/cursor-map.ts
+function buildDomTextCounts(doc, markdown2) {
+  const counts = new Array(markdown2.length + 1).fill(0);
+  let md = 0;
+  let count = 0;
+  const text = (n) => {
+    for (let i = 0; i < n && md < markdown2.length; i++) {
+      counts[md] = count;
+      md++;
+      count++;
+    }
+    if (md <= markdown2.length) counts[md] = count;
+  };
+  const syntax = (n) => {
+    for (let i = 0; i < n && md < markdown2.length; i++) {
+      counts[md] = count;
+      md++;
+    }
+    if (md <= markdown2.length) counts[md] = count;
+  };
+  const inline = (node) => {
+    node.forEach((child) => {
+      if (child.isText) {
+        const marks = child.marks.map((m) => m.type.name);
+        const str = child.text;
+        if (marks.includes("inlineCode") || marks.includes("code")) {
+          syntax(1);
+          text(str.length);
+          syntax(1);
+        } else {
+          if (marks.includes("strong")) syntax(2);
+          if (marks.includes("emphasis") || marks.includes("em")) syntax(1);
+          text(str.length);
+          if (marks.includes("emphasis") || marks.includes("em")) syntax(1);
+          if (marks.includes("strong")) syntax(2);
+        }
+      } else if (child.type.name === "hardbreak" || child.type.name === "hard_break") {
+        syntax(1);
+      } else {
+        text(child.textContent.length);
+      }
+    });
+  };
+  const fence = (node) => {
+    const lang = node.attrs.language ?? "";
+    syntax(3);
+    syntax(lang.length);
+    syntax(1);
+    text(node.textContent.length);
+    syntax(1);
+    syntax(3);
+  };
+  const walk = (node) => {
+    switch (node.type.name) {
+      case "doc":
+        node.forEach(walk);
+        return;
+      case "paragraph":
+        inline(node);
+        syntax(2);
+        return;
+      case "heading":
+        syntax(node.attrs.level + 1);
+        inline(node);
+        syntax(2);
+        return;
+      case "blockquote":
+        syntax(2);
+        inline(node);
+        syntax(2);
+        return;
+      case "code_block":
+        fence(node);
+        syntax(2);
+        return;
+      case "bullet_list":
+        node.forEach((li) => {
+          syntax(2);
+          walk(li);
+        });
+        syntax(2);
+        return;
+      case "ordered_list":
+        node.forEach((li, i) => {
+          syntax(String(i + 1).length + 2);
+          walk(li);
+        });
+        syntax(2);
+        return;
+      case "list_item":
+        node.forEach(walk);
+        return;
+      default:
+        text(node.textContent.length);
+        syntax(2);
+        return;
+    }
+  };
+  walk(doc);
+  syntax(markdown2.length - md);
+  return counts;
+}
+function markdownOffsetToDomTextOffset(counts, offset) {
+  const clamped = Math.max(0, Math.min(offset, counts.length - 1));
+  return counts[clamped];
+}
+export {
+  CollaFlowProvider,
+  YJS_ORIGIN_MILKDOWN,
+  YJS_ORIGIN_TEXTAREA,
+  buildDomTextCounts,
+  createCollabPlugins,
+  createEditor,
+  decodeOffset,
+  decodeSelection,
+  diffApply,
+  encodeRelativePosition2 as encodeRelativePosition,
+  markdownOffsetToDomTextOffset
+};
+//# sourceMappingURL=index.js.map