@bendyline/squisq-editor-react 0.1.0

package/src/RawEditor.tsx

@@ -0,0 +1,151 @@
+/**
+ * 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).
+ */
+
+import { useRef, useCallback, useEffect } from 'react';
+import Editor, { loader, type OnMount, type OnChange } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import { useEditorContext } from './EditorContext';
+import { getAvailableTemplates } from '@bendyline/squisq/doc';
+
+// Use locally installed monaco-editor instead of CDN
+loader.config({ monaco });
+
+export 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.
+ */
+export function RawEditor({
+  theme = 'vs',
+  minimap = false,
+  fontSize = 14,
+  wordWrap = 'on',
+  className,
+}: RawEditorProps) {
+  const { markdownSource, setMarkdownSource, setMonacoEditor } = useEditorContext();
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const isExternalUpdate = useRef(false);
+  const completionDisposable = useRef<monaco.IDisposable | null>(null);
+
+  const handleMount: OnMount = useCallback(
+    (editor, monaco) => {
+      editorRef.current = editor;
+      setMonacoEditor(editor);
+      editor.focus();
+
+      // Dispose any previous completion provider (from a prior mount)
+      completionDisposable.current?.dispose();
+
+      // Register template annotation completion provider for {[ trigger
+      const templates = getAvailableTemplates();
+      completionDisposable.current = monaco.languages.registerCompletionItemProvider('markdown', {
+        triggerCharacters: ['['],
+        provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
+          const lineContent = model.getLineContent(position.lineNumber);
+
+          // Only trigger inside a heading line that has {[ before the cursor
+          if (!/^#{1,6}\s/.test(lineContent)) return { suggestions: [] };
+
+          const textBeforeCursor = lineContent.substring(0, position.column - 1);
+          const bracketIdx = textBeforeCursor.lastIndexOf('{[');
+          if (bracketIdx === -1) return { suggestions: [] };
+
+          // The range to replace: from after {[ to the cursor
+          const startCol = bracketIdx + 3; // after {[
+          const range = new monaco.Range(
+            position.lineNumber,
+            startCol,
+            position.lineNumber,
+            position.column,
+          );
+
+          const suggestions = templates.map((name) => ({
+            label: name,
+            kind: monaco.languages.CompletionItemKind.Value,
+            insertText: name + ']}',
+            range,
+            detail: 'Block template',
+            sortText: name,
+          }));
+
+          return { suggestions };
+        },
+      });
+    },
+    [setMonacoEditor],
+  );
+
+  // Unregister on unmount
+  useEffect(() => {
+    return () => {
+      setMonacoEditor(null);
+      completionDisposable.current?.dispose();
+      completionDisposable.current = null;
+    };
+  }, [setMonacoEditor]);
+
+  const handleChange: OnChange = useCallback(
+    (value) => {
+      if (isExternalUpdate.current) return;
+      if (value !== undefined) {
+        setMarkdownSource(value);
+      }
+    },
+    [setMarkdownSource],
+  );
+
+  // When external changes happen (e.g. from WYSIWYG), update Monaco
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (editor) {
+      const currentValue = editor.getValue();
+      if (currentValue !== markdownSource) {
+        isExternalUpdate.current = true;
+        editor.setValue(markdownSource);
+        isExternalUpdate.current = false;
+      }
+    }
+  }, [markdownSource]);
+
+  return (
+    <div className={className} style={{ width: '100%', height: '100%' }} data-testid="raw-editor">
+      <Editor
+        defaultLanguage="markdown"
+        value={markdownSource}
+        theme={theme}
+        onMount={handleMount}
+        onChange={handleChange}
+        options={{
+          fontSize,
+          wordWrap,
+          minimap: { enabled: minimap },
+          lineNumbers: 'on',
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          tabSize: 2,
+          renderWhitespace: 'selection',
+          bracketPairColorization: { enabled: true },
+          guides: { indentation: true },
+          padding: { top: 12, bottom: 12 },
+        }}
+      />
+    </div>
+  );
+}

package/src/StatusBar.tsx

@@ -0,0 +1,48 @@
+/**
+ * StatusBar
+ *
+ * Bottom status bar showing document statistics and parse status.
+ */
+
+import { useMemo } from 'react';
+import { useEditorContext } from './EditorContext';
+
+export interface StatusBarProps {
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * Status bar displaying document statistics: character count, word count,
+ * block count, and parse/error status.
+ */
+export function StatusBar({ className }: StatusBarProps) {
+  const { markdownSource, doc, parseError, isParsing } = useEditorContext();
+
+  const stats = useMemo(() => {
+    const chars = markdownSource.length;
+    const words = markdownSource.trim() ? markdownSource.trim().split(/\s+/).length : 0;
+    const lines = markdownSource.split('\n').length;
+    const blocks = doc?.blocks.length ?? 0;
+    return { chars, words, lines, blocks };
+  }, [markdownSource, doc]);
+
+  return (
+    <div className={`squisq-status-bar ${className || ''}`}>
+      <span className="squisq-status-item">{stats.words} words</span>
+      <span className="squisq-status-item">{stats.chars} chars</span>
+      <span className="squisq-status-item">{stats.lines} lines</span>
+      <span className="squisq-status-item">{stats.blocks} blocks</span>
+      <span className="squisq-status-spacer" />
+      {isParsing && <span className="squisq-status-item squisq-status-parsing">Parsing…</span>}
+      {parseError && (
+        <span className="squisq-status-item squisq-status-error" title={parseError}>
+          ⚠ Error
+        </span>
+      )}
+      {!isParsing && !parseError && (
+        <span className="squisq-status-item squisq-status-ok">✓ OK</span>
+      )}
+    </div>
+  );
+}

package/src/TemplateAnnotation.ts

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+import Heading from '@tiptap/extension-heading';
+
+/**
+ * HeadingWithTemplate — drop-in replacement for Tiptap's Heading that
+ * persists template annotation attributes.
+ */
+export const HeadingWithTemplate = Heading.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      dataTemplate: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-template') || null,
+        renderHTML: (attributes: Record<string, unknown>) => {
+          if (!attributes.dataTemplate) return {};
+          return { 'data-template': attributes.dataTemplate };
+        },
+      },
+      dataTemplateParams: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute('data-template-params') || null,
+        renderHTML: (attributes: Record<string, unknown>) => {
+          if (!attributes.dataTemplateParams) return {};
+          return { 'data-template-params': attributes.dataTemplateParams };
+        },
+      },
+    };
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const level = node.attrs.level;
+    const tag = `h${level}`;
+    const templateName = HTMLAttributes['data-template'];
+
+    if (templateName) {
+      // Render heading with a trailing badge span
+      return [
+        tag,
+        HTMLAttributes,
+        ['span', { class: 'squisq-heading-content' }, 0],
+        [
+          'span',
+          {
+            class: 'squisq-template-badge',
+            contenteditable: 'false',
+            'data-template': templateName,
+          },
+          templateName,
+        ],
+      ];
+    }
+
+    // No template — render as normal heading
+    return [tag, HTMLAttributes, 0];
+  },
+});