@bendyline/squisq-editor-react 0.1.0

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@bendyline/squisq-editor-react",
+  "version": "0.1.0",
+  "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
+  "license": "MIT",
+  "author": "Bendyline",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicknisi/squisq.git",
+    "directory": "packages/editor-react"
+  },
+  "homepage": "https://github.com/nicknisi/squisq",
+  "keywords": [
+    "editor",
+    "react",
+    "markdown",
+    "wysiwyg",
+    "monaco",
+    "tiptap"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/styles/editor.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@bendyline/squisq": "^0.1.0",
+    "@bendyline/squisq-react": "^0.1.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@tiptap/extension-placeholder": "^2.11.0",
+    "@tiptap/extension-table": "^2.11.0",
+    "@tiptap/extension-table-cell": "^2.11.0",
+    "@tiptap/extension-table-header": "^2.11.0",
+    "@tiptap/extension-table-row": "^2.11.0",
+    "@tiptap/extension-task-item": "^2.11.0",
+    "@tiptap/extension-task-list": "^2.11.0",
+    "@tiptap/pm": "^2.11.0",
+    "@tiptap/react": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "monaco-editor": "^0.55.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/EditorContext.tsx

@@ -0,0 +1,251 @@
+/**
+ * EditorContext
+ *
+ * Shared React context that synchronizes state across all three editor views
+ * (Raw/Monaco, WYSIWYG/Tiptap, Preview/DocPlayer). When any view modifies the
+ * markdown source, the context re-parses and regenerates the MarkdownDocument
+ * and Doc so all views stay in sync.
+ */
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+  useEffect,
+  type ReactNode,
+} from 'react';
+import type { Doc } from '@bendyline/squisq/schemas';
+import type { MarkdownDocument } from '@bendyline/squisq/markdown';
+import { parseMarkdown, stringifyMarkdown } from '@bendyline/squisq/markdown';
+import { markdownToDoc } from '@bendyline/squisq/doc';
+import type { Editor as TiptapEditor } from '@tiptap/core';
+import type { editor as MonacoEditorNs } from 'monaco-editor';
+
+/** Monaco standalone code editor instance type */
+type MonacoEditor = MonacoEditorNs.IStandaloneCodeEditor;
+
+// ─── Types ───────────────────────────────────────────────
+
+export type EditorView = 'raw' | 'wysiwyg' | 'preview';
+export type EditorTheme = 'light' | 'dark';
+
+export interface EditorState {
+  /** Raw markdown source string */
+  markdownSource: string;
+  /** Parsed markdown document (JSON DOM) */
+  markdownDoc: MarkdownDocument | null;
+  /** Generated Doc (block hierarchy) */
+  doc: Doc | null;
+  /** Currently active editor view */
+  activeView: EditorView;
+  /** Parse error, if any */
+  parseError: string | null;
+  /** Whether a parse is pending */
+  isParsing: boolean;
+  /** Current color theme */
+  theme: EditorTheme;
+}
+
+export interface EditorActions {
+  /** Set markdown source and trigger re-parse */
+  setMarkdownSource: (source: string) => void;
+  /** Set markdown from a MarkdownDocument (e.g. from WYSIWYG) */
+  setMarkdownDoc: (doc: MarkdownDocument) => void;
+  /** Switch the active view */
+  setActiveView: (view: EditorView) => void;
+  /** Register / unregister the Tiptap editor instance (called by WysiwygEditor) */
+  setTiptapEditor: (editor: TiptapEditor | null) => void;
+  /** Register / unregister the Monaco editor instance (called by RawEditor) */
+  setMonacoEditor: (editor: MonacoEditor | null) => void;
+  /** Set the color theme */
+  setTheme: (theme: EditorTheme) => void;
+}
+
+export interface EditorContextValue extends EditorState, EditorActions {
+  /** The live Tiptap editor instance (null when WYSIWYG is not mounted) */
+  tiptapEditor: TiptapEditor | null;
+  /** The live Monaco editor instance (null when Raw is not mounted) */
+  monacoEditor: MonacoEditor | null;
+}
+
+// ─── Context ─────────────────────────────────────────────
+
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+/**
+ * Hook to access the editor context. Must be used within an EditorProvider.
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useEditorContext(): EditorContextValue {
+  const ctx = useContext(EditorContext);
+  if (!ctx) {
+    throw new Error('useEditorContext must be used within an <EditorProvider>');
+  }
+  return ctx;
+}
+
+// ─── Provider ────────────────────────────────────────────
+
+export interface EditorProviderProps {
+  /** Initial markdown content */
+  initialMarkdown?: string;
+  /** Initial active view */
+  initialView?: EditorView;
+  /** Article ID used when generating the Doc */
+  articleId?: string;
+  /** Color theme */
+  theme?: EditorTheme;
+  children: ReactNode;
+}
+
+/**
+ * Provides shared editor state to all child components.
+ * Automatically parses markdown and generates a Doc whenever the source changes.
+ */
+export function EditorProvider({
+  initialMarkdown = '',
+  initialView = 'raw',
+  articleId = 'untitled',
+  theme: initialTheme = 'light',
+  children,
+}: EditorProviderProps) {
+  const [markdownSource, setMarkdownSourceRaw] = useState(initialMarkdown);
+  const [markdownDoc, setMarkdownDocState] = useState<MarkdownDocument | null>(null);
+  const [doc, setDoc] = useState<Doc | null>(null);
+  const [activeView, setActiveView] = useState<EditorView>(initialView);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [isParsing, setIsParsing] = useState(false);
+  const [theme, setTheme] = useState<EditorTheme>(initialTheme);
+  const [tiptapEditor, setTiptapEditor] = useState<TiptapEditor | null>(null);
+  const [monacoEditor, setMonacoEditor] = useState<MonacoEditor | null>(null);
+
+  const articleIdRef = useRef(articleId);
+  articleIdRef.current = articleId;
+
+  // Sync theme when prop changes
+  useEffect(() => {
+    setTheme(initialTheme);
+  }, [initialTheme]);
+
+  // Debounced parse on markdown source change
+  const parseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const doParse = useCallback((source: string) => {
+    setIsParsing(true);
+    try {
+      const parsed = parseMarkdown(source);
+      setMarkdownDocState(parsed);
+      setParseError(null);
+
+      // Generate Doc from parsed markdown
+      try {
+        const generatedDoc = markdownToDoc(parsed, {
+          articleId: articleIdRef.current,
+        });
+        setDoc(generatedDoc);
+      } catch (docErr: unknown) {
+        // Doc generation can fail but markdown parse succeeded
+        setDoc(null);
+        console.warn('Doc generation failed:', docErr instanceof Error ? docErr.message : docErr);
+      }
+    } catch (err: unknown) {
+      setParseError(err instanceof Error ? err.message : 'Parse error');
+      setMarkdownDocState(null);
+      setDoc(null);
+    } finally {
+      setIsParsing(false);
+    }
+  }, []);
+
+  // Parse on source changes with debounce
+  useEffect(() => {
+    if (parseTimeoutRef.current) {
+      clearTimeout(parseTimeoutRef.current);
+    }
+    parseTimeoutRef.current = setTimeout(() => {
+      doParse(markdownSource);
+    }, 150);
+    return () => {
+      if (parseTimeoutRef.current) {
+        clearTimeout(parseTimeoutRef.current);
+      }
+    };
+  }, [markdownSource, doParse]);
+
+  // Initial parse
+  useEffect(() => {
+    if (initialMarkdown) {
+      doParse(initialMarkdown);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setMarkdownSource = useCallback((source: string) => {
+    setMarkdownSourceRaw(source);
+  }, []);
+
+  const setMarkdownDoc = useCallback((newDoc: MarkdownDocument) => {
+    setMarkdownDocState(newDoc);
+    // Stringify to update the raw source
+    try {
+      const newSource = stringifyMarkdown(newDoc);
+      setMarkdownSourceRaw(newSource);
+      setParseError(null);
+
+      // Generate Doc
+      try {
+        const generatedDoc = markdownToDoc(newDoc, {
+          articleId: articleIdRef.current,
+        });
+        setDoc(generatedDoc);
+      } catch (docErr: unknown) {
+        setDoc(null);
+        console.warn('Doc generation failed:', docErr instanceof Error ? docErr.message : docErr);
+      }
+    } catch (err: unknown) {
+      setParseError(err instanceof Error ? err.message : 'Stringify error');
+    }
+  }, []);
+
+  const value = useMemo<EditorContextValue>(
+    () => ({
+      markdownSource,
+      markdownDoc,
+      doc,
+      activeView,
+      parseError,
+      isParsing,
+      theme,
+      tiptapEditor,
+      monacoEditor,
+      setMarkdownSource,
+      setMarkdownDoc,
+      setActiveView,
+      setTiptapEditor,
+      setMonacoEditor,
+      setTheme,
+    }),
+    [
+      markdownSource,
+      markdownDoc,
+      doc,
+      activeView,
+      parseError,
+      isParsing,
+      theme,
+      tiptapEditor,
+      monacoEditor,
+      setMarkdownSource,
+      setMarkdownDoc,
+      setActiveView,
+      setTiptapEditor,
+      setMonacoEditor,
+      setTheme,
+    ],
+  );
+
+  return <EditorContext.Provider value={value}>{children}</EditorContext.Provider>;
+}

package/src/EditorShell.tsx

@@ -0,0 +1,139 @@
+/**
+ * EditorShell
+ *
+ * Top-level shell component that composes the Toolbar, ViewSwitcher, editor
+ * views, and StatusBar into a complete editing experience. Wraps everything
+ * in an EditorProvider for shared state.
+ */
+
+import { useEffect } from 'react';
+import { EditorProvider, useEditorContext, type EditorView } from './EditorContext';
+import { Toolbar } from './Toolbar';
+import { StatusBar } from './StatusBar';
+import { RawEditor } from './RawEditor';
+import { WysiwygEditor } from './WysiwygEditor';
+import { PreviewPanel } from './PreviewPanel';
+
+export type { EditorTheme } from './EditorContext';
+
+export interface EditorShellProps {
+  /** Initial markdown content */
+  initialMarkdown?: string;
+  /** Initial active view */
+  /** Initial active view (default: 'wysiwyg') */
+  initialView?: EditorView;
+  /** Article ID for Doc generation */
+  articleId?: string;
+  /** Base path for media URLs in preview */
+  basePath?: string;
+  /** Called when markdown source changes */
+  onChange?: (source: string) => void;
+  /** Color theme: 'light' or 'dark' (default: 'light') */
+  theme?: 'light' | 'dark';
+  /** Additional class name */
+  className?: string;
+  /** CSS height for the shell container (default: '100vh') */
+  height?: string;
+}
+
+/**
+ * Complete markdown editor shell with toolbar, view switcher, and three
+ * editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
+ */
+export function EditorShell({
+  initialMarkdown = '',
+  initialView = 'wysiwyg',
+  articleId = 'untitled',
+  basePath = '/',
+  onChange,
+  theme = 'light',
+  className,
+  height = '100vh',
+}: EditorShellProps) {
+  return (
+    <EditorProvider
+      initialMarkdown={initialMarkdown}
+      initialView={initialView}
+      articleId={articleId}
+      theme={theme}
+    >
+      <EditorShellInner
+        basePath={basePath}
+        onChange={onChange}
+        className={className}
+        height={height}
+      />
+    </EditorProvider>
+  );
+}
+
+interface EditorShellInnerProps {
+  basePath: string;
+  onChange?: (source: string) => void;
+  className?: string;
+  height: string;
+}
+
+function EditorShellInner({ basePath, onChange, className, height }: EditorShellInnerProps) {
+  const { activeView, markdownSource, theme } = useEditorContext();
+
+  // Notify parent of changes
+  useEffect(() => {
+    onChange?.(markdownSource);
+  }, [markdownSource, onChange]);
+
+  // Keyboard shortcuts for view switching
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        switch (e.key) {
+          case '1':
+            e.preventDefault();
+            document.querySelector<HTMLButtonElement>('[data-view="wysiwyg"]')?.click();
+            break;
+          case '2':
+            e.preventDefault();
+            document.querySelector<HTMLButtonElement>('[data-view="raw"]')?.click();
+            break;
+          case '3':
+            e.preventDefault();
+            document.querySelector<HTMLButtonElement>('[data-view="preview"]')?.click();
+            break;
+        }
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  return (
+    <div
+      className={`squisq-editor-shell ${className || ''}`}
+      data-theme={theme}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height,
+        overflow: 'hidden',
+      }}
+    >
+      {/* Header: Toolbar (includes view tabs) */}
+      <div className="squisq-editor-header">
+        <Toolbar />
+      </div>
+
+      {/* Main content area */}
+      <div
+        className="squisq-editor-content"
+        style={{ flex: 1, overflow: 'hidden', position: 'relative' }}
+      >
+        {activeView === 'raw' && <RawEditor theme={theme === 'dark' ? 'vs-dark' : 'vs'} />}
+        {activeView === 'wysiwyg' && <WysiwygEditor />}
+        {activeView === 'preview' && <PreviewPanel basePath={basePath} />}
+      </div>
+
+      {/* Status bar */}
+      <StatusBar />
+    </div>
+  );
+}