@bendyline/squisq-editor-react 0.1.0

package/src/Toolbar.tsx

@@ -0,0 +1,465 @@
+/**
+ * Toolbar
+ *
+ * Formatting toolbar that provides common markdown editing actions.
+ * In WYSIWYG mode, uses Tiptap's chain commands to toggle marks / set nodes.
+ * In Raw mode, appends markdown syntax at the cursor (or end of source).
+ * Hidden in Preview mode.
+ */
+
+import { useCallback, useEffect, useReducer } from 'react';
+import type { Editor as TiptapEditor } from '@tiptap/core';
+import { useEditorContext, type EditorView } from './EditorContext';
+import { getAvailableTemplates } from '@bendyline/squisq/doc';
+
+const VIEWS: { id: EditorView; label: string; shortcut: string }[] = [
+  { id: 'wysiwyg', label: 'Editor', shortcut: '⌘1' },
+  { id: 'raw', label: 'Raw', shortcut: '⌘2' },
+  { id: 'preview', label: 'Preview', shortcut: '⌘3' },
+];
+
+export interface ToolbarProps {
+  /** Additional class name */
+  className?: string;
+}
+
+interface ToolbarButton {
+  id: string;
+  label: string;
+  icon: string;
+  title: string;
+  group: 'format' | 'structure' | 'insert';
+  /** CSS font style for the icon (e.g. italic for the I button) */
+  iconStyle?: React.CSSProperties;
+}
+
+const BUTTONS: ToolbarButton[] = [
+  // Format group
+  {
+    id: 'bold',
+    label: 'B',
+    icon: 'B',
+    title: 'Bold (Ctrl+B)',
+    group: 'format',
+    iconStyle: { fontWeight: 700 },
+  },
+  {
+    id: 'italic',
+    label: 'I',
+    icon: 'I',
+    title: 'Italic (Ctrl+I)',
+    group: 'format',
+    iconStyle: { fontStyle: 'italic' },
+  },
+  {
+    id: 'strikethrough',
+    label: 'S',
+    icon: 'S',
+    title: 'Strikethrough',
+    group: 'format',
+    iconStyle: { textDecoration: 'line-through' },
+  },
+  { id: 'code', label: '<>', icon: '`', title: 'Inline code', group: 'format' },
+
+  // Structure group
+  { id: 'h1', label: 'H1', icon: 'H1', title: 'Heading 1', group: 'structure' },
+  { id: 'h2', label: 'H2', icon: 'H2', title: 'Heading 2', group: 'structure' },
+  { id: 'h3', label: 'H3', icon: 'H3', title: 'Heading 3', group: 'structure' },
+  { id: 'quote', label: '❝', icon: '❝', title: 'Blockquote', group: 'structure' },
+
+  // Insert group
+  { id: 'ul', label: '•', icon: '•', title: 'Bullet list', group: 'insert' },
+  { id: 'ol', label: '1.', icon: '1.', title: 'Numbered list', group: 'insert' },
+  { id: 'codeblock', label: '{ }', icon: '{ }', title: 'Code block', group: 'insert' },
+  { id: 'hr', label: '—', icon: '—', title: 'Horizontal rule', group: 'insert' },
+  { id: 'link', label: '🔗', icon: '🔗', title: 'Insert link', group: 'insert' },
+];
+
+// ─── Tiptap active-state map ────────────────────────────
+
+/** Returns true if the given button id is currently active in Tiptap */
+function isTiptapActive(editor: TiptapEditor, id: string): boolean {
+  if (!editor) return false;
+  switch (id) {
+    case 'bold':
+      return editor.isActive('bold');
+    case 'italic':
+      return editor.isActive('italic');
+    case 'strikethrough':
+      return editor.isActive('strike');
+    case 'code':
+      return editor.isActive('code');
+    case 'h1':
+      return editor.isActive('heading', { level: 1 });
+    case 'h2':
+      return editor.isActive('heading', { level: 2 });
+    case 'h3':
+      return editor.isActive('heading', { level: 3 });
+    case 'quote':
+      return editor.isActive('blockquote');
+    case 'ul':
+      return editor.isActive('bulletList');
+    case 'ol':
+      return editor.isActive('orderedList');
+    case 'codeblock':
+      return editor.isActive('codeBlock');
+    default:
+      return false;
+  }
+}
+
+/**
+ * Formatting toolbar.
+ * - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
+ * - Raw: appends markdown syntax to the source
+ */
+export function Toolbar({ className }: ToolbarProps) {
+  const {
+    activeView,
+    setActiveView,
+    markdownSource,
+    setMarkdownSource,
+    tiptapEditor,
+    monacoEditor,
+  } = useEditorContext();
+
+  // Force re-render when Tiptap selection or formatting state changes
+  const [, forceUpdate] = useReducer((c: number) => c + 1, 0);
+  useEffect(() => {
+    if (!tiptapEditor) return;
+    tiptapEditor.on('transaction', forceUpdate);
+    return () => {
+      tiptapEditor.off('transaction', forceUpdate);
+    };
+  }, [tiptapEditor]);
+
+  // ── Tiptap handler ─────────────────────────────────────
+  const handleTiptap = useCallback(
+    (id: string) => {
+      if (!tiptapEditor) return;
+      const chain = tiptapEditor.chain().focus();
+      switch (id) {
+        case 'bold':
+          chain.toggleBold().run();
+          break;
+        case 'italic':
+          chain.toggleItalic().run();
+          break;
+        case 'strikethrough':
+          chain.toggleStrike().run();
+          break;
+        case 'code':
+          chain.toggleCode().run();
+          break;
+        case 'h1':
+          chain.toggleHeading({ level: 1 }).run();
+          break;
+        case 'h2':
+          chain.toggleHeading({ level: 2 }).run();
+          break;
+        case 'h3':
+          chain.toggleHeading({ level: 3 }).run();
+          break;
+        case 'quote':
+          chain.toggleBlockquote().run();
+          break;
+        case 'ul':
+          chain.toggleBulletList().run();
+          break;
+        case 'ol':
+          chain.toggleOrderedList().run();
+          break;
+        case 'codeblock':
+          chain.toggleCodeBlock().run();
+          break;
+        case 'hr':
+          chain.setHorizontalRule().run();
+          break;
+        case 'link': {
+          const url = window.prompt('URL:');
+          if (url) {
+            (chain as unknown as Record<string, (opts: { href: string }) => typeof chain>)
+              .setLink?.({ href: url })
+              .run();
+          }
+          break;
+        }
+      }
+    },
+    [tiptapEditor],
+  );
+
+  // ── Raw markdown handler ───────────────────────────────
+  const handleRaw = useCallback(
+    (id: string) => {
+      if (monacoEditor) {
+        // Use Monaco's selection API for proper wrap/insert behavior
+        const selection = monacoEditor.getSelection();
+        const model = monacoEditor.getModel();
+        if (!selection || !model) return;
+
+        const selectedText = model.getValueInRange(selection);
+        const hasSelection = selectedText.length > 0;
+
+        let replacement = '';
+        let newCursorOffset = 0; // offset from start of replacement to place cursor
+
+        // Inline wrapping: wrap selection or insert placeholder
+        const wrapInline = (before: string, after: string, placeholder: string) => {
+          if (hasSelection) {
+            replacement = before + selectedText + after;
+          } else {
+            replacement = before + placeholder + after;
+            // Select the placeholder text after insertion
+            newCursorOffset = before.length;
+          }
+        };
+
+        // Block-level: prefix each selected line, or insert a new block
+        const prefixLines = (prefix: string, placeholder: string) => {
+          if (hasSelection) {
+            replacement = selectedText
+              .split('\n')
+              .map((line: string) => prefix + line)
+              .join('\n');
+          } else {
+            replacement = prefix + placeholder;
+            newCursorOffset = prefix.length;
+          }
+        };
+
+        switch (id) {
+          case 'bold':
+            wrapInline('**', '**', 'bold text');
+            break;
+          case 'italic':
+            wrapInline('*', '*', 'italic text');
+            break;
+          case 'strikethrough':
+            wrapInline('~~', '~~', 'strikethrough');
+            break;
+          case 'code':
+            wrapInline('`', '`', 'code');
+            break;
+          case 'h1':
+            prefixLines('# ', 'Heading 1');
+            break;
+          case 'h2':
+            prefixLines('## ', 'Heading 2');
+            break;
+          case 'h3':
+            prefixLines('### ', 'Heading 3');
+            break;
+          case 'quote':
+            prefixLines('> ', 'Quote');
+            break;
+          case 'ul':
+            prefixLines('- ', 'Item');
+            break;
+          case 'ol':
+            prefixLines('1. ', 'Item');
+            break;
+          case 'codeblock': {
+            const inner = hasSelection ? selectedText : 'code';
+            replacement = '```\n' + inner + '\n```';
+            if (!hasSelection) newCursorOffset = 4; // after ```\n
+            break;
+          }
+          case 'hr': {
+            replacement = '\n---\n';
+            break;
+          }
+          case 'link': {
+            if (hasSelection) {
+              replacement = '[' + selectedText + '](url)';
+            } else {
+              replacement = '[link text](url)';
+              newCursorOffset = 1; // inside the []
+            }
+            break;
+          }
+        }
+
+        // Apply the edit via Monaco's executeEdits for proper undo support
+        const range = selection;
+        monacoEditor.executeEdits('toolbar', [{ range, text: replacement }]);
+
+        // If no selection, select the placeholder text so user can type over it
+        if (!hasSelection && newCursorOffset > 0) {
+          const startPos = model.getPositionAt(
+            model.getOffsetAt(range.getStartPosition()) + newCursorOffset,
+          );
+          const _placeholderLen =
+            replacement.length -
+            newCursorOffset -
+            (replacement.length -
+              replacement.lastIndexOf(replacement.charAt(replacement.length - 1)));
+          // Just place cursor after the prefix
+          monacoEditor.setPosition(startPos);
+        }
+
+        monacoEditor.focus();
+      } else {
+        // Fallback: no Monaco instance, just append
+        let insertion = '';
+        switch (id) {
+          case 'bold':
+            insertion = '**bold text**';
+            break;
+          case 'italic':
+            insertion = '*italic text*';
+            break;
+          case 'strikethrough':
+            insertion = '~~strikethrough~~';
+            break;
+          case 'code':
+            insertion = '`code`';
+            break;
+          case 'h1':
+            insertion = '\n# Heading 1\n';
+            break;
+          case 'h2':
+            insertion = '\n## Heading 2\n';
+            break;
+          case 'h3':
+            insertion = '\n### Heading 3\n';
+            break;
+          case 'quote':
+            insertion = '\n> Quote\n';
+            break;
+          case 'ul':
+            insertion = '\n- Item\n';
+            break;
+          case 'ol':
+            insertion = '\n1. Item\n';
+            break;
+          case 'codeblock':
+            insertion = '\n```\ncode\n```\n';
+            break;
+          case 'hr':
+            insertion = '\n---\n';
+            break;
+          case 'link':
+            insertion = '[link text](url)';
+            break;
+        }
+        if (insertion) {
+          setMarkdownSource(markdownSource + insertion);
+        }
+      }
+    },
+    [monacoEditor, markdownSource, setMarkdownSource],
+  );
+
+  const handleAction = useCallback(
+    (id: string) => {
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        handleTiptap(id);
+      } else {
+        handleRaw(id);
+      }
+    },
+    [activeView, tiptapEditor, handleTiptap, handleRaw],
+  );
+
+  const groups = ['format', 'structure', 'insert'] as const;
+  const isWysiwyg = activeView === 'wysiwyg' && tiptapEditor;
+  const isPreview = activeView === 'preview';
+
+  // Detect current heading template (WYSIWYG mode only)
+  const currentTemplate = isWysiwyg
+    ? tiptapEditor.isActive('heading')
+      ? (tiptapEditor.getAttributes('heading')?.dataTemplate ?? '')
+      : null
+    : null;
+
+  const handleTemplatePick = (value: string) => {
+    if (!tiptapEditor) return;
+    if (value === '') {
+      // Clear template
+      tiptapEditor
+        .chain()
+        .focus()
+        .updateAttributes('heading', { dataTemplate: null, dataTemplateParams: null })
+        .run();
+    } else {
+      tiptapEditor.chain().focus().updateAttributes('heading', { dataTemplate: value }).run();
+    }
+  };
+
+  const templateNames = getAvailableTemplates();
+
+  return (
+    <div
+      className={`squisq-toolbar ${className || ''}`}
+      role="toolbar"
+      aria-label="Formatting toolbar"
+    >
+      {/* View tabs */}
+      <div className="squisq-toolbar-view-tabs" role="tablist" aria-label="Editor view">
+        {VIEWS.map((view) => (
+          <button
+            key={view.id}
+            role="tab"
+            data-view={view.id}
+            aria-selected={activeView === view.id}
+            className={`squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`}
+            onClick={() => setActiveView(view.id)}
+            title={`${view.label} (${view.shortcut})`}
+          >
+            {view.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Formatting buttons — hidden in preview mode */}
+      {!isPreview && <div className="squisq-toolbar-separator" />}
+      {!isPreview &&
+        groups.map((group, gi) => (
+          <div key={group} className="squisq-toolbar-group">
+            {gi > 0 && <div className="squisq-toolbar-separator" />}
+            {BUTTONS.filter((b) => b.group === group).map((btn) => {
+              const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
+              return (
+                <button
+                  key={btn.id}
+                  className={`squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`}
+                  title={btn.title}
+                  onClick={() => handleAction(btn.id)}
+                  aria-label={btn.title}
+                  aria-pressed={active}
+                  style={btn.iconStyle}
+                >
+                  {btn.icon}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+
+      {/* Template picker — visible when cursor is in a heading (WYSIWYG) */}
+      {!isPreview && currentTemplate !== null && (
+        <>
+          <div className="squisq-toolbar-separator" />
+          <div className="squisq-toolbar-group squisq-template-picker">
+            <label className="squisq-template-picker-label" title="Block template for this heading">
+              Template:
+              <select
+                className="squisq-template-picker-select"
+                value={currentTemplate}
+                onChange={(e) => handleTemplatePick(e.target.value)}
+              >
+                <option value="">— none —</option>
+                {templateNames.map((name) => (
+                  <option key={name} value={name}>
+                    {name}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/ViewSwitcher.tsx

@@ -0,0 +1,46 @@
+/**
+ * ViewSwitcher
+ *
+ * Tab bar for switching between Raw, WYSIWYG, and Preview editor views.
+ */
+
+import { useEditorContext, type EditorView } from './EditorContext';
+
+const VIEWS: { id: EditorView; label: string; shortcut: string }[] = [
+  { id: 'raw', label: 'Raw', shortcut: '⌘1' },
+  { id: 'wysiwyg', label: 'Editor', shortcut: '⌘2' },
+  { id: 'preview', label: 'Preview', shortcut: '⌘3' },
+];
+
+export interface ViewSwitcherProps {
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * Tab-style view switcher for the three editor modes.
+ */
+export function ViewSwitcher({ className }: ViewSwitcherProps) {
+  const { activeView, setActiveView } = useEditorContext();
+
+  return (
+    <div
+      className={`squisq-view-switcher ${className || ''}`}
+      role="tablist"
+      aria-label="Editor view"
+    >
+      {VIEWS.map((view) => (
+        <button
+          key={view.id}
+          role="tab"
+          aria-selected={activeView === view.id}
+          className={`squisq-view-tab ${activeView === view.id ? 'squisq-view-tab--active' : ''}`}
+          onClick={() => setActiveView(view.id)}
+          title={`${view.label} (${view.shortcut})`}
+        >
+          {view.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/WysiwygEditor.tsx

@@ -0,0 +1,134 @@
+/**
+ * WysiwygEditor
+ *
+ * Tiptap-based rich text editor that provides a WYSIWYG editing experience
+ * for markdown content. Uses squisq's parseMarkdown/stringifyMarkdown for
+ * conversion rather than Tiptap's built-in HTML serialization, ensuring
+ * perfect fidelity with the markdown format.
+ *
+ * Includes extensions for GFM features: tables, task lists, strikethrough,
+ * and code blocks.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Placeholder from '@tiptap/extension-placeholder';
+import { HeadingWithTemplate } from './TemplateAnnotation';
+import { useEditorContext } from './EditorContext';
+import { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge';
+
+// ── Frontmatter helpers ────────────────────────────────────────────
+
+/** Regex matching a YAML frontmatter block at the start of the document. */
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
+
+/** Strip YAML frontmatter from markdown, returning both parts. */
+function stripFrontmatter(md: string): { body: string; frontmatter: string } {
+  const m = md.match(FRONTMATTER_RE);
+  if (!m) return { body: md, frontmatter: '' };
+  return { body: md.slice(m[0].length), frontmatter: m[0] };
+}
+
+export interface WysiwygEditorProps {
+  /** Placeholder text when editor is empty */
+  placeholder?: string;
+  /** Additional class name for the container */
+  className?: string;
+}
+
+/**
+ * Rich WYSIWYG markdown editor built on Tiptap (ProseMirror).
+ * Binds to the shared EditorContext for source synchronization.
+ */
+export function WysiwygEditor({
+  placeholder = 'Start typing your markdown…',
+  className,
+}: WysiwygEditorProps) {
+  const { markdownSource, setMarkdownSource, setTiptapEditor } = useEditorContext();
+  const isExternalUpdate = useRef(false);
+  const lastSourceRef = useRef(markdownSource);
+  // Preserve frontmatter across edits — hidden from WYSIWYG but prepended on save
+  const frontmatterRef = useRef(stripFrontmatter(markdownSource).frontmatter);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        // Disable built-in heading; we use HeadingWithTemplate instead
+        heading: false,
+        codeBlock: {
+          HTMLAttributes: { class: 'squisq-code-block' },
+        },
+      }),
+      HeadingWithTemplate.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Placeholder.configure({ placeholder }),
+    ],
+    content: markdownToTiptap(stripFrontmatter(markdownSource).body),
+    onUpdate: ({ editor: ed }) => {
+      if (isExternalUpdate.current) return;
+      const html = ed.getHTML();
+      const bodyMd = tiptapToMarkdown(html);
+      const newSource = frontmatterRef.current + bodyMd;
+      lastSourceRef.current = newSource;
+      setMarkdownSource(newSource);
+    },
+    editorProps: {
+      attributes: {
+        class: 'squisq-wysiwyg-editor',
+        'data-testid': 'wysiwyg-editor',
+      },
+    },
+  });
+
+  // Register / unregister the Tiptap editor instance with the shared context
+  useEffect(() => {
+    if (editor) {
+      setTiptapEditor(editor);
+    }
+    return () => setTiptapEditor(null);
+  }, [editor, setTiptapEditor]);
+
+  // Sync external changes into Tiptap
+  useEffect(() => {
+    if (!editor) return;
+    // Only update if the source changed externally (not from our own onUpdate)
+    if (markdownSource !== lastSourceRef.current) {
+      isExternalUpdate.current = true;
+      const { body, frontmatter } = stripFrontmatter(markdownSource);
+      frontmatterRef.current = frontmatter;
+      const content = markdownToTiptap(body);
+      editor.commands.setContent(content);
+      lastSourceRef.current = markdownSource;
+      isExternalUpdate.current = false;
+    }
+  }, [markdownSource, editor]);
+
+  return (
+    <div
+      className={className}
+      style={{ width: '100%', height: '100%', overflow: 'auto' }}
+      data-testid="wysiwyg-container"
+    >
+      <EditorContent editor={editor} style={{ height: '100%' }} />
+    </div>
+  );
+}
+
+/**
+ * Hook to access the Tiptap editor instance for toolbar commands.
+ * The WysiwygEditor must be mounted as a sibling or descendant.
+ */
+// eslint-disable-next-line react-refresh/only-export-components
+export { useEditor as useTiptapEditor } from '@tiptap/react';

package/src/index.ts

@@ -0,0 +1,58 @@
+/**
+ * @bendyline/squisq-editor-react
+ *
+ * React component library for editing markdown content with three views:
+ * - Raw (Monaco) — Full markdown source editing
+ * - WYSIWYG (Tiptap) — Rich text editing
+ * - Preview — Rendered block preview
+ *
+ * @example
+ * ```tsx
+ * import { EditorShell } from '@bendyline/squisq-editor-react';
+ * import '@bendyline/squisq-editor-react/styles';
+ *
+ * function App() {
+ *   return <EditorShell initialMarkdown="# Hello World" />;
+ * }
+ * ```
+ */
+
+// Shell (top-level component)
+export { EditorShell } from './EditorShell.js';
+export type { EditorShellProps, EditorTheme } from './EditorShell.js';
+
+// Context
+export { EditorProvider, useEditorContext } from './EditorContext.js';
+export type {
+  EditorView,
+  EditorState,
+  EditorActions,
+  EditorContextValue,
+  EditorProviderProps,
+} from './EditorContext.js';
+
+// Individual editors (for custom layouts)
+export { RawEditor } from './RawEditor.js';
+export type { RawEditorProps } from './RawEditor.js';
+
+export { WysiwygEditor } from './WysiwygEditor.js';
+export type { WysiwygEditorProps } from './WysiwygEditor.js';
+
+export { PreviewPanel } from './PreviewPanel.js';
+export type { PreviewPanelProps } from './PreviewPanel.js';
+
+// Chrome (for custom layouts)
+export { ViewSwitcher } from './ViewSwitcher.js';
+export type { ViewSwitcherProps } from './ViewSwitcher.js';
+
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarProps } from './Toolbar.js';
+
+export { StatusBar } from './StatusBar.js';
+export type { StatusBarProps } from './StatusBar.js';
+
+// Bridge utilities
+export { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge.js';
+
+// Tiptap extension: Heading with template annotation support
+export { HeadingWithTemplate } from './TemplateAnnotation.js';