@bendyline/squisq-editor-react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,269 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { Doc } from '@bendyline/squisq/schemas';
+import { MarkdownDocument } from '@bendyline/squisq/markdown';
+import * as _tiptap_core from '@tiptap/core';
+import { Editor } from '@tiptap/core';
+import { editor } from 'monaco-editor';
+import * as _tiptap_extension_heading from '@tiptap/extension-heading';
+
+/** Monaco standalone code editor instance type */
+type MonacoEditor = editor.IStandaloneCodeEditor;
+type EditorView = 'raw' | 'wysiwyg' | 'preview';
+type EditorTheme = 'light' | 'dark';
+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;
+}
+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: Editor | null) => void;
+    /** Register / unregister the Monaco editor instance (called by RawEditor) */
+    setMonacoEditor: (editor: MonacoEditor | null) => void;
+    /** Set the color theme */
+    setTheme: (theme: EditorTheme) => void;
+}
+interface EditorContextValue extends EditorState, EditorActions {
+    /** The live Tiptap editor instance (null when WYSIWYG is not mounted) */
+    tiptapEditor: Editor | null;
+    /** The live Monaco editor instance (null when Raw is not mounted) */
+    monacoEditor: MonacoEditor | null;
+}
+/**
+ * Hook to access the editor context. Must be used within an EditorProvider.
+ */
+declare function useEditorContext(): EditorContextValue;
+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.
+ */
+declare function EditorProvider({ initialMarkdown, initialView, articleId, theme: initialTheme, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+
+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.
+ */
+declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, theme, className, height, }: EditorShellProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * RawEditor
+ *
+ * Monaco-based raw markdown editor. Provides full VS Code-like editing
+ * experience with syntax highlighting, minimap, and bracket matching.
+ * Syncs changes back to EditorContext on every keystroke (debounced).
+ */
+interface RawEditorProps {
+    /** Monaco editor theme (default: 'vs-dark') */
+    theme?: string;
+    /** Show minimap (default: false) */
+    minimap?: boolean;
+    /** Font size in pixels (default: 14) */
+    fontSize?: number;
+    /** Word wrap setting (default: 'on') */
+    wordWrap?: 'on' | 'off' | 'wordWrapColumn' | 'bounded';
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * Raw markdown editor using Monaco Editor.
+ * Binds to the shared EditorContext for source synchronization.
+ */
+declare function RawEditor({ theme, minimap, fontSize, wordWrap, className, }: RawEditorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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.
+ */
+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.
+ */
+declare function WysiwygEditor({ placeholder, className, }: WysiwygEditorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PreviewPanel
+ *
+ * Renders a live preview of the current markdown document as a slideshow
+ * using the DocPlayer component from @bendyline/squisq-react.
+ *
+ * The markdown-derived Doc (from markdownToDoc) contains hierarchical blocks
+ * with template names, heading text, and body content — but no audio or
+ * visual layers. This component bridges the gap by:
+ *
+ * 1. Flattening the block tree into a linear slide sequence
+ * 2. Converting each block into a TemplateBlock-compatible object
+ *    (mapping heading text → title, templateOverrides → template fields)
+ * 3. Synthesizing a dummy audio segment so DocPlayer's timing works
+ *    (the player enters fallback-timer mode when audio can't load)
+ * 4. Passing the prepared Doc to DocPlayer for SVG-based rendering
+ */
+interface PreviewPanelProps {
+    /** Base path for resolving media URLs in DocPlayer */
+    basePath?: string;
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * Live preview panel that renders the current document as a slideshow.
+ * Uses DocPlayer from @bendyline/squisq-react for SVG block rendering
+ * with template expansion, transitions, and playback controls.
+ *
+ * Includes a viewport format dropdown above the player. The default
+ * format can be hinted via YAML frontmatter `document-render-as:`.
+ */
+declare function PreviewPanel({ basePath, className }: PreviewPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ViewSwitcher
+ *
+ * Tab bar for switching between Raw, WYSIWYG, and Preview editor views.
+ */
+interface ViewSwitcherProps {
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Tab-style view switcher for the three editor modes.
+ */
+declare function ViewSwitcher({ className }: ViewSwitcherProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * 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.
+ */
+interface ToolbarProps {
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Formatting toolbar.
+ * - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
+ * - Raw: appends markdown syntax to the source
+ */
+declare function Toolbar({ className }: ToolbarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StatusBar
+ *
+ * Bottom status bar showing document statistics and parse status.
+ */
+interface StatusBarProps {
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Status bar displaying document statistics: character count, word count,
+ * block count, and parse/error status.
+ */
+declare function StatusBar({ className }: StatusBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tiptap Bridge
+ *
+ * Conversion utilities between raw markdown source and Tiptap's JSON/HTML
+ * content format. Uses a lightweight HTML-based approach: we convert markdown
+ * to a simple HTML representation that Tiptap can consume, and parse
+ * Tiptap's HTML output back to markdown.
+ *
+ * This bridge preserves markdown semantics much better than going through
+ * Tiptap's native markdown extension, since we control the conversion
+ * using squisq's own parser.
+ */
+/**
+ * Convert raw markdown source to Tiptap-consumable HTML content.
+ * Uses a simple markdown-to-HTML conversion that maps cleanly to
+ * Tiptap's ProseMirror schema.
+ */
+declare function markdownToTiptap(markdown: string): string;
+/**
+ * Convert Tiptap HTML output back to markdown source.
+ * Extracts semantic structure from HTML and produces clean markdown.
+ */
+declare function tiptapToMarkdown(html: string): string;
+
+/**
+ * TemplateAnnotation — Tiptap Heading Extension
+ *
+ * Extends Tiptap's built-in Heading node to support `data-template` and
+ * `data-template-params` HTML attributes. These attributes store which block
+ * template should be used for a heading section.
+ *
+ * When present, the heading renders a visible badge (styled CSS chip)
+ * showing the template name, e.g. `[chart]`.
+ *
+ * The tiptapBridge converts `### Title {[chart]}` markdown into
+ * `<h3 data-template="chart">Title</h3>` and back, so this extension
+ * ensures Tiptap's schema preserves those attributes through edits.
+ */
+/**
+ * HeadingWithTemplate — drop-in replacement for Tiptap's Heading that
+ * persists template annotation attributes.
+ */
+declare const HeadingWithTemplate: _tiptap_core.Node<_tiptap_extension_heading.HeadingOptions, any>;
+
+export { type EditorActions, type EditorContextValue, EditorProvider, type EditorProviderProps, EditorShell, type EditorShellProps, type EditorState, type EditorTheme, type EditorView, HeadingWithTemplate, PreviewPanel, type PreviewPanelProps, RawEditor, type RawEditorProps, StatusBar, type StatusBarProps, Toolbar, type ToolbarProps, ViewSwitcher, type ViewSwitcherProps, WysiwygEditor, type WysiwygEditorProps, markdownToTiptap, tiptapToMarkdown, useEditorContext };