npm - @collaflow/app - Versions diffs - 0.1.0 - Mend

@collaflow/app 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/.next/BUILD_ID +1 -0
package/.next/app-build-manifest.json +29 -0
package/.next/app-path-routes-manifest.json +4 -0
package/.next/build-manifest.json +33 -0
package/.next/cache/.previewinfo +1 -0
package/.next/cache/.rscinfo +1 -0
package/.next/cache/.tsbuildinfo +1 -0
package/.next/cache/config.json +7 -0
package/.next/cache/webpack/client-production/0.pack +0 -0
package/.next/cache/webpack/client-production/1.pack +0 -0
package/.next/cache/webpack/client-production/2.pack +0 -0
package/.next/cache/webpack/client-production/index.pack +0 -0
package/.next/cache/webpack/client-production/index.pack.old +0 -0
package/.next/cache/webpack/edge-server-production/0.pack +0 -0
package/.next/cache/webpack/edge-server-production/index.pack +0 -0
package/.next/cache/webpack/server-production/0.pack +0 -0
package/.next/cache/webpack/server-production/index.pack +0 -0
package/.next/diagnostics/build-diagnostics.json +6 -0
package/.next/diagnostics/framework.json +1 -0
package/.next/export-marker.json +6 -0
package/.next/images-manifest.json +58 -0
package/.next/next-minimal-server.js.nft.json +1 -0
package/.next/next-server.js.nft.json +1 -0
package/.next/package.json +1 -0
package/.next/prerender-manifest.json +61 -0
package/.next/react-loadable-manifest.json +6 -0
package/.next/required-server-files.json +321 -0
package/.next/routes-manifest.json +53 -0
package/.next/server/app/_not-found/page.js +2 -0
package/.next/server/app/_not-found/page.js.nft.json +1 -0
package/.next/server/app/_not-found/page_client-reference-manifest.js +1 -0
package/.next/server/app/_not-found.html +1 -0
package/.next/server/app/_not-found.meta +8 -0
package/.next/server/app/_not-found.rsc +15 -0
package/.next/server/app/index.html +1 -0
package/.next/server/app/index.meta +7 -0
package/.next/server/app/index.rsc +19 -0
package/.next/server/app/page.js +86 -0
package/.next/server/app/page.js.nft.json +1 -0
package/.next/server/app/page_client-reference-manifest.js +1 -0
package/.next/server/app-paths-manifest.json +4 -0
package/.next/server/chunks/15.js +6 -0
package/.next/server/chunks/575.js +32 -0
package/.next/server/functions-config-manifest.json +4 -0
package/.next/server/interception-route-rewrite-manifest.js +1 -0
package/.next/server/middleware-build-manifest.js +1 -0
package/.next/server/middleware-manifest.json +6 -0
package/.next/server/middleware-react-loadable-manifest.js +1 -0
package/.next/server/next-font-manifest.js +1 -0
package/.next/server/next-font-manifest.json +1 -0
package/.next/server/pages/404.html +1 -0
package/.next/server/pages/500.html +1 -0
package/.next/server/pages/_app.js +1 -0
package/.next/server/pages/_app.js.nft.json +1 -0
package/.next/server/pages/_document.js +1 -0
package/.next/server/pages/_document.js.nft.json +1 -0
package/.next/server/pages/_error.js +19 -0
package/.next/server/pages/_error.js.nft.json +1 -0
package/.next/server/pages-manifest.json +6 -0
package/.next/server/server-reference-manifest.js +1 -0
package/.next/server/server-reference-manifest.json +1 -0
package/.next/server/webpack-runtime.js +1 -0
package/.next/static/cawI4PxFre1uXaV3w_OOh/_buildManifest.js +1 -0
package/.next/static/cawI4PxFre1uXaV3w_OOh/_ssgManifest.js +1 -0
package/.next/static/chunks/5f994265-851b4fe5bb9f6bdf.js +1 -0
package/.next/static/chunks/730-47357526b52cb7a3.js +1 -0
package/.next/static/chunks/761-d78a04fe4a7f0c61.js +2 -0
package/.next/static/chunks/7fa71398-d732f2f130f8dbf8.js +1 -0
package/.next/static/chunks/9f40746c-e311a6f65dce894f.js +1 -0
package/.next/static/chunks/app/_not-found/page-d0d3baa38855a614.js +1 -0
package/.next/static/chunks/app/layout-6114418103b4dbcc.js +1 -0
package/.next/static/chunks/app/page-a5e0c15f5813dcaf.js +1 -0
package/.next/static/chunks/framework-b71824acec8cd700.js +1 -0
package/.next/static/chunks/main-5d112cac3f90f4f6.js +1 -0
package/.next/static/chunks/main-app-3133c331999859a2.js +1 -0
package/.next/static/chunks/pages/_app-c068c4a8491e6db8.js +1 -0
package/.next/static/chunks/pages/_error-464ab45f79bb2315.js +1 -0
package/.next/static/chunks/polyfills-42372ed130431b0a.js +1 -0
package/.next/static/chunks/webpack-e72e354969197063.js +1 -0
package/.next/static/css/043b8a737f2ce68d.css +5 -0
package/.next/trace +2 -0
package/.next/types/app/layout.ts +84 -0
package/.next/types/app/page.ts +84 -0
package/.next/types/cache-life.d.ts +141 -0
package/.next/types/package.json +1 -0
package/.next/types/routes.d.ts +57 -0
package/.next/types/validator.ts +61 -0
package/LICENSE +201 -0
package/components.json +20 -0
package/next-env.d.ts +6 -0
package/next.config.mjs +19 -0
package/package.json +46 -0
package/postcss.config.mjs +9 -0
package/src/app/globals.css +16 -0
package/src/app/layout.tsx +19 -0
package/src/app/page.test.tsx +11 -0
package/src/app/page.tsx +86 -0
package/src/components/MarkdownEditor.tsx +432 -0
package/src/lib/utils.ts +6 -0
package/tailwind.config.ts +59 -0
package/tsconfig.json +27 -0
package/vitest.config.ts +8 -0

package/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+export const metadata: Metadata = {
+  title: 'CollaFlow',
+  description: 'High-performance collaborative mind map & document workspace',
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

package/src/app/page.test.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+import Home from './page';
+describe('app page', () => {
+  it('renders without crashing', () => {
+    // Simple smoke test that the default export is a valid component.
+    expect(Home).toBeDefined();
+    expect(typeof Home).toBe('function');
+  });
+});

package/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,86 @@
+'use client';
+import { useState } from 'react';
+import { MarkdownEditor } from '@/components/MarkdownEditor';
+const DEFAULT_SERVER = 'ws://localhost:1234';
+export default function Home() {
+  const [serverUrl, setServerUrl] = useState(DEFAULT_SERVER);
+  const [roomInput, setRoomInput] = useState('');
+  const [joined, setJoined] = useState(false);
+  const [activeRoom, setActiveRoom] = useState('');
+  const handleEnter = () => {
+    setActiveRoom(roomInput.trim());
+    setJoined(true);
+  };
+  const handleLeave = () => {
+    setJoined(false);
+  };
+  return (
+    <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-6 p-8">
+      <header>
+        <h1 className="text-3xl font-bold tracking-tight">CollaFlow</h1>
+        <p className="mt-2 text-muted-foreground">
+          高性能协同脑图 / 文档工作台 · 基于 CollaMarkdown 编辑器
+        </p>
+      </header>
+      <section className="flex flex-wrap items-end gap-4 rounded-lg border border-border bg-card p-4">
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">协同服务地址</span>
+          <input
+            className="rounded-md border border-border bg-background px-3 py-1.5 text-sm"
+            value={serverUrl}
+            onChange={(e) => setServerUrl(e.target.value)}
+            placeholder="ws://localhost:1234"
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">房间 / 文档 ID</span>
+          <input
+            className="rounded-md border border-border bg-background px-3 py-1.5 text-sm"
+            value={roomInput}
+            onChange={(e) => setRoomInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleEnter();
+            }}
+            placeholder="留空则单机编辑"
+          />
+        </label>
+        <button
+          type="button"
+          onClick={handleEnter}
+          className="rounded-md bg-foreground px-4 py-1.5 text-sm font-medium text-background transition-opacity hover:opacity-90"
+        >
+          {joined ? '重新进入' : '进入房间'}
+        </button>
+        {joined && (
+          <button
+            type="button"
+            onClick={handleLeave}
+            className="rounded-md border border-border px-4 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted"
+          >
+            退出
+          </button>
+        )}
+        {joined && (
+          <p className="text-xs text-muted-foreground">
+            {activeRoom ? `已接入协同房间「${activeRoom}」` : '本地编辑模式（未启用协同）'}
+          </p>
+        )}
+      </section>
+      {joined ? (
+        <MarkdownEditor roomId={activeRoom || undefined} serverUrl={serverUrl} />
+      ) : (
+        <div className="rounded-lg border border-dashed border-border p-10 text-center text-muted-foreground">
+          输入房间 ID（可选）后点击「进入房间」开始编辑
+        </div>
+      )}
+    </main>
+  );
+}

package/src/components/MarkdownEditor.tsx ADDED Viewed

@@ -0,0 +1,432 @@
+'use client';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { InputEvent, MouseEvent } from 'react';
+import type { CollaMarkdownEditor, RemoteCursor } from '@collaflow/markdown';
+import {
+  buildDomTextCounts,
+  diffApply,
+  markdownOffsetToDomTextOffset,
+  YJS_ORIGIN_TEXTAREA,
+} from '@collaflow/markdown';
+interface MarkdownEditorProps {
+  /** 协同房间 ID；为空时不启用协同（纯本地编辑） */
+  roomId?: string;
+  /** CollaFlow Core（Hocuspocus）WebSocket 地址 */
+  serverUrl?: string;
+  /** 初始 Markdown 内容 */
+  defaultValue?: string;
+}
+const DEFAULT_CONTENT = '# Hello CollaFlow\n\n开始编辑，支持 **Markdown** 与协同光标。';
+interface RenderedCursor {
+  id: number;
+  top: number;
+  left: number;
+  height: number;
+  color: string;
+  name: string;
+}
+/* ----------------------------- 坐标辅助函数 ----------------------------- */
+/** 计算 textarea 中指定字符位置的屏幕坐标（mirror-div 技术）。 */
+function getCaretCoordinates(
+  el: HTMLTextAreaElement,
+  position: number
+): { top: number; left: number; height: number } {
+  const div = document.createElement('div');
+  const style = window.getComputedStyle(el);
+  const props = [
+    'boxSizing', 'width', 'height', 'overflowX', 'overflowY',
+    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth',
+    'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize',
+    'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent',
+    'letterSpacing', 'wordSpacing', 'tabSize', 'whiteSpace', 'wordWrap',
+  ] as const;
+  props.forEach((p) => {
+    const value = (style as unknown as Record<string, string>)[p] ?? '';
+    (div.style as unknown as Record<string, string>)[p] = value;
+  });
+  div.style.position = 'absolute';
+  div.style.visibility = 'hidden';
+  div.style.whiteSpace = 'pre-wrap';
+  div.style.wordWrap = 'break-word';
+  div.textContent = el.value.substring(0, position);
+  const span = document.createElement('span');
+  span.textContent = el.value.substring(position) || '.';
+  div.appendChild(span);
+  document.body.appendChild(div);
+  const coords = {
+    top: span.offsetTop + parseInt(style.borderTopWidth || '0', 10),
+    left: span.offsetLeft + parseInt(style.borderLeftWidth || '0', 10),
+    height: parseInt(style.lineHeight || '0', 10) || span.offsetHeight,
+  };
+  document.body.removeChild(div);
+  return coords;
+}
+/** 统计 container 内、指定 DOM 位置之前的「真实文本字符数」。 */
+function getDomTextOffset(container: HTMLElement, node: Node, offset: number): number {
+  // 空行 / <br> 等场景下 domAtPos 返回的是「元素节点」而非文本节点，
+  // 仅遍历文本节点会匹配不到、把偏移错算到文末。这里改用 Range 量化从容器起点到目标位置，
+  // 元素节点也能正确得到其之前的真实文本长度。
+  const range = document.createRange();
+  range.setStart(container, 0);
+  try {
+    range.setEnd(node, offset);
+  } catch {
+    return 0;
+  }
+  const frag = range.cloneContents();
+  let count = 0;
+  const walker = document.createTreeWalker(frag, NodeFilter.SHOW_TEXT);
+  let n = walker.nextNode();
+  while (n) {
+    count += (n.textContent ?? '').length;
+    n = walker.nextNode();
+  }
+  return count;
+}
+/** 在 container 中找到第 target 个「真实文本字符」处的屏幕坐标。 */
+function domPosAtTextOffset(
+  container: HTMLElement,
+  target: number
+): { top: number; left: number; height: number } | null {
+  let count = 0;
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let last: Text | null = null;
+  let lastLen = 0;
+  let n = walker.nextNode() as Text | null;
+  while (n) {
+    const len = (n.textContent ?? '').length;
+    if (count + len >= target) {
+      const pos = Math.max(0, Math.min(target - count, len));
+      const range = document.createRange();
+      range.setStart(n, pos);
+      range.collapse(true);
+      const rect = range.getBoundingClientRect();
+      return { top: rect.top, left: rect.left, height: rect.height };
+    }
+    count += len;
+    last = n;
+    lastLen = len;
+    n = walker.nextNode() as Text | null;
+  }
+  if (last) {
+    const range = document.createRange();
+    range.setStart(last, lastLen);
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    return { top: rect.top, left: rect.left, height: rect.height };
+  }
+  return null;
+}
+/** 由「真实文本字符偏移」反查 Markdown 字符偏移（closest match）。 */
+function domTextOffsetToMdOffset(counts: number[], domOffset: number): number {
+  let best = 0;
+  let bestDiff = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < counts.length; i++) {
+    const diff = Math.abs((counts[i] ?? 0) - domOffset);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      best = i;
+    }
+  }
+  return best;
+}
+/* ------------------------------- 组件 ------------------------------- */
+function RemoteCaret({ top, left, height, color, name }: RenderedCursor) {
+  return (
+    <>
+      <div className="colla-rc-cursor" style={{ top, left, height, background: color }} />
+      <div className="colla-rc-label" style={{ top, left, background: color }}>
+        {name}
+      </div>
+    </>
+  );
+}
+export function MarkdownEditor({
+  roomId,
+  serverUrl,
+  defaultValue = DEFAULT_CONTENT,
+}: MarkdownEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previewWrapRef = useRef<HTMLDivElement>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const sourceWrapRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const contentRef = useRef<CollaMarkdownEditor['content'] | null>(null);
+  const editorRef = useRef<CollaMarkdownEditor | null>(null);
+  const countsRef = useRef<number[]>([]);
+  const [leftWidth, setLeftWidth] = useState(50);
+  const [isResizing, setIsResizing] = useState(false);
+  const [remoteCursors, setRemoteCursors] = useState<RemoteCursor[]>([]);
+  const [version, setVersion] = useState(0);
+  const [textCursors, setTextCursors] = useState<RenderedCursor[]>([]);
+  const [previewCursors, setPreviewCursors] = useState<RenderedCursor[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    let editor: CollaMarkdownEditor | null = null;
+    let cleanupPreview: (() => void) | null = null;
+    let editorCleanup: (() => void) | null = null;
+    void (async () => {
+      const { createEditor } = await import('@collaflow/markdown');
+      if (cancelled || !previewRef.current) return;
+      editor = await createEditor({
+        root: previewRef.current,
+        defaultValue,
+        highlight: true,
+        theme: 'light',
+        collab:
+          roomId && serverUrl
+            ? { roomId, serverUrl, user: { name: 'You', color: '#3b82f6' } }
+            : undefined,
+        onAwarenessChange: () => {
+          setRemoteCursors(editorRef.current?.getRemoteCursors() ?? []);
+        },
+      });
+      editorRef.current = editor;
+      const content = editor.content;
+      contentRef.current = content;
+      if (textareaRef.current) {
+        textareaRef.current.value = content.toString();
+      }
+      // content 变化（远端协同 / 预览区编辑）→ 同步回 textarea + 触发光标重算
+      const observer = (_: unknown, transaction: { origin: unknown }) => {
+        if (transaction.origin === YJS_ORIGIN_TEXTAREA) {
+          setVersion((v) => v + 1);
+          return;
+        }
+        syncTextareaFromContent();
+        recomputePreviewCounts();
+        setVersion((v) => v + 1);
+      };
+      content.observe(observer);
+      // 预览区本地选区 → 广播
+      const view = editor.getView();
+      const onPreviewSelection = () => {
+        const { from, to } = view.state.selection;
+        const a = getDomTextOffset(view.dom, view.domAtPos(from).node, view.domAtPos(from).offset);
+        const b = getDomTextOffset(view.dom, view.domAtPos(to).node, view.domAtPos(to).offset);
+        editor?.setLocalSelection(
+          domTextOffsetToMdOffset(countsRef.current, a),
+          domTextOffsetToMdOffset(countsRef.current, b)
+        );
+      };
+      view.dom.addEventListener('keyup', onPreviewSelection);
+      view.dom.addEventListener('mouseup', onPreviewSelection);
+      view.dom.addEventListener('focus', onPreviewSelection);
+      cleanupPreview = () => {
+        view.dom.removeEventListener('keyup', onPreviewSelection);
+        view.dom.removeEventListener('mouseup', onPreviewSelection);
+        view.dom.removeEventListener('focus', onPreviewSelection);
+      };
+      recomputePreviewCounts();
+      setRemoteCursors(editor.getRemoteCursors());
+      editorCleanup = () => content.unobserve(observer);
+    })();
+    return () => {
+      cancelled = true;
+      cleanupPreview?.();
+      editorCleanup?.();
+      contentRef.current = null;
+      void editorRef.current?.destroy();
+      editorRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [roomId, serverUrl, defaultValue]);
+  /** 命令式把 content 同步到 textarea（保留光标）。 */
+  const syncTextareaFromContent = useCallback(() => {
+    const ta = textareaRef.current;
+    const content = contentRef.current;
+    if (!ta || !content) return;
+    const next = content.toString();
+    if (ta.value === next) return;
+    const prev = ta.value;
+    const selStart = ta.selectionStart;
+    let i = 0;
+    const min = Math.min(prev.length, next.length);
+    while (i < min && prev[i] === next[i]) i++;
+    const delta = next.length - prev.length;
+    ta.value = next;
+    if (document.activeElement === ta) {
+      const newPos = Math.max(i, Math.min(next.length, selStart + (selStart <= i ? 0 : delta)));
+      ta.setSelectionRange(newPos, newPos);
+    }
+  }, []);
+  /** 重新计算预览区「Markdown 偏移 → 真实文本偏移」映射。 */
+  const recomputePreviewCounts = useCallback(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const view = editor.getView();
+    countsRef.current = buildDomTextCounts(view.state.doc, editor.getMarkdown());
+  }, []);
+  // 编辑源码 → 最小字符差异写入 content（本地输入，光标稳定）
+  const handleSourceInput = useCallback((e: InputEvent<HTMLTextAreaElement>) => {
+    const content = contentRef.current;
+    if (!content) return;
+    diffApply(content, e.currentTarget.value, YJS_ORIGIN_TEXTAREA);
+  }, []);
+  // 源码区本地选区 → 广播
+  const handleSourceSelection = useCallback(() => {
+    const ta = textareaRef.current;
+    const editor = editorRef.current;
+    if (!ta || !editor) return;
+    editor.setLocalSelection(ta.selectionStart, ta.selectionEnd);
+  }, []);
+  // 拖拽分隔条调整左右宽度
+  const startResize = useCallback((e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const container = containerRef.current;
+    if (!container) return;
+    setIsResizing(true);
+    const onMove = (ev: globalThis.MouseEvent) => {
+      const rect = container.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const pct = ((ev.clientX - rect.left) / rect.width) * 100;
+      setLeftWidth(Math.min(80, Math.max(20, pct)));
+    };
+    const onUp = () => {
+      setIsResizing(false);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, []);
+  // 远端光标坐标：随 content / remoteCursors 变化重算
+  useLayoutEffect(() => {
+    const ta = textareaRef.current;
+    if (ta) {
+      setTextCursors(
+        remoteCursors.map((c) => {
+          const coords = getCaretCoordinates(ta, c.anchor);
+          return {
+            id: c.clientId,
+            top: coords.top - ta.scrollTop,
+            left: coords.left - ta.scrollLeft,
+            height: coords.height,
+            color: c.user.color,
+            name: c.user.name,
+          };
+        })
+      );
+    }
+    const pWrap = previewWrapRef.current;
+    const editor = editorRef.current;
+    if (pWrap && editor) {
+      const view = editor.getView();
+      const wrapRect = pWrap.getBoundingClientRect();
+      setPreviewCursors(
+        remoteCursors.map((c) => {
+          const domOffset = markdownOffsetToDomTextOffset(countsRef.current, c.anchor);
+          const rect = domPosAtTextOffset(view.dom, domOffset);
+          if (!rect) return null;
+          return {
+            id: c.clientId,
+            top: rect.top - wrapRect.top,
+            left: rect.left - wrapRect.left,
+            height: rect.height,
+            color: c.user.color,
+            name: c.user.name,
+          };
+        }).filter((c): c is RenderedCursor => c !== null)
+      );
+    }
+  }, [remoteCursors, version]);
+  return (
+    <div
+      ref={containerRef}
+      className={`flex w-full overflow-hidden rounded-lg border border-border bg-card ${
+        isResizing ? 'select-none' : ''
+      }`}
+      style={{ height: '70vh', minHeight: '420px' }}
+    >
+      {/* 预览（WYSIWYG） */}
+      <section
+        className="flex h-full flex-col overflow-hidden"
+        style={{ width: `${leftWidth}%` }}
+      >
+        <div className="border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
+          预览
+        </div>
+        <div ref={previewWrapRef} className="relative h-full flex-1 overflow-hidden">
+          <div ref={previewRef} className="colla-editor h-full w-full overflow-auto p-4" />
+          <div className="pointer-events-none absolute inset-0 overflow-hidden">
+            {previewCursors.map((c) => (
+              <RemoteCaret key={c.id} {...c} />
+            ))}
+          </div>
+        </div>
+      </section>
+      {/* 拖拽分隔条 */}
+      <div
+        onMouseDown={startResize}
+        role="separator"
+        aria-orientation="vertical"
+        className="w-1.5 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-accent"
+      />
+      {/* 源码（可编辑 Markdown，非受控） */}
+      <section
+        className="flex h-full flex-col overflow-hidden"
+        style={{ width: `${100 - leftWidth}%` }}
+      >
+        <div className="border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
+          源码（Markdown）
+        </div>
+        <div ref={sourceWrapRef} className="relative h-full flex-1 overflow-hidden">
+          <textarea
+            ref={textareaRef}
+            defaultValue={defaultValue}
+            onInput={handleSourceInput}
+            onKeyUp={handleSourceSelection}
+            onMouseUp={handleSourceSelection}
+            onSelect={handleSourceSelection}
+            spellCheck={false}
+            placeholder="在此编辑 Markdown 源码…"
+            className="h-full w-full flex-1 resize-none bg-transparent p-4 font-mono text-sm leading-relaxed text-foreground outline-none"
+          />
+          <div className="pointer-events-none absolute inset-0 overflow-hidden">
+            {textCursors.map((c) => (
+              <RemoteCaret key={c.id} {...c} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/lib/utils.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/tailwind.config.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import type { Config } from 'tailwindcss';
+import { collaflowPreset, radius } from '@collaflow/design';
+const config: Config = {
+  presets: [collaflowPreset],
+  darkMode: ['class'],
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'var(--cf-border-default)',
+        input: 'var(--cf-border-default)',
+        ring: 'var(--cf-accent-blue)',
+        background: 'var(--cf-bg-primary)',
+        foreground: 'var(--cf-text-primary)',
+        primary: {
+          DEFAULT: 'var(--cf-text-primary)',
+          foreground: 'var(--cf-bg-secondary)',
+        },
+        secondary: {
+          DEFAULT: 'var(--cf-bg-tertiary)',
+          foreground: 'var(--cf-text-primary)',
+        },
+        destructive: {
+          DEFAULT: 'var(--cf-accent-red)',
+          foreground: 'var(--cf-bg-secondary)',
+        },
+        muted: {
+          DEFAULT: 'var(--cf-bg-tertiary)',
+          foreground: 'var(--cf-text-secondary)',
+        },
+        accent: {
+          DEFAULT: 'var(--cf-bg-tertiary)',
+          foreground: 'var(--cf-text-primary)',
+        },
+        popover: {
+          DEFAULT: 'var(--cf-bg-secondary)',
+          foreground: 'var(--cf-text-primary)',
+        },
+        card: {
+          DEFAULT: 'var(--cf-bg-secondary)',
+          foreground: 'var(--cf-text-primary)',
+        },
+      },
+      borderRadius: {
+        lg: radius.lg,
+        md: radius.md,
+        sm: radius.sm,
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "dist", ".next"]
+}

package/vitest.config.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+});