@bendyline/squisq-editor-react 1.0.0 → 1.1.0

package/dist/RawEditor.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 } 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 });
+/**
+ * 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, }) {
+    const { markdownSource, setMarkdownSource, setMonacoEditor } = useEditorContext();
+    const editorRef = useRef(null);
+    const isExternalUpdate = useRef(false);
+    const completionDisposable = useRef(null);
+    const handleMount = 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, 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 = 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 (_jsx("div", { className: className, style: { width: '100%', height: '100%' }, "data-testid": "raw-editor", children: _jsx(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 },
+            } }) }));
+}
+//# sourceMappingURL=RawEditor.js.map

package/dist/RawEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RawEditor.js","sourceRoot":"","sources":["../src/RawEditor.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,MAAM,EAAE,EAAE,MAAM,EAA+B,MAAM,sBAAsB,CAAC;AACnF,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,qDAAqD;AACrD,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;AAe1B;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,GAAG,IAAI,EACZ,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,EACf,SAAS,GACM;IACf,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,eAAe,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAClF,MAAM,SAAS,GAAG,MAAM,CAA6C,IAAI,CAAC,CAAC;IAC3E,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,oBAAoB,GAAG,MAAM,CAA4B,IAAI,CAAC,CAAC;IAErE,MAAM,WAAW,GAAY,WAAW,CACtC,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACjB,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3B,eAAe,CAAC,MAAM,CAAC,CAAC;QACxB,MAAM,CAAC,KAAK,EAAE,CAAC;QAEf,gEAAgE;QAChE,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QAExC,kEAAkE;QAClE,MAAM,SAAS,GAAG,qBAAqB,EAAE,CAAC;QAC1C,oBAAoB,CAAC,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,8BAA8B,CAAC,UAAU,EAAE;YACzF,iBAAiB,EAAE,CAAC,GAAG,CAAC;YACxB,sBAAsB,CAAC,KAA+B,EAAE,QAAyB;gBAC/E,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;gBAE9D,mEAAmE;gBACnE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;oBAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;gBAE/D,MAAM,gBAAgB,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBACvE,MAAM,UAAU,GAAG,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBACtD,IAAI,UAAU,KAAK,CAAC,CAAC;oBAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC;gBAElD,oDAAoD;gBACpD,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,WAAW;gBAC5C,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,KAAK,CAC5B,QAAQ,CAAC,UAAU,EACnB,QAAQ,EACR,QAAQ,CAAC,UAAU,EACnB,QAAQ,CAAC,MAAM,CAChB,CAAC;gBAEF,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBAC3C,KAAK,EAAE,IAAI;oBACX,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,KAAK;oBAC/C,UAAU,EAAE,IAAI,GAAG,IAAI;oBACvB,KAAK;oBACL,MAAM,EAAE,gBAAgB;oBACxB,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC,CAAC;gBAEJ,OAAO,EAAE,WAAW,EAAE,CAAC;YACzB,CAAC;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,wBAAwB;IACxB,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;YACxC,oBAAoB,CAAC,OAAO,GAAG,IAAI,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,YAAY,GAAa,WAAW,CACxC,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,gBAAgB,CAAC,OAAO;YAAE,OAAO;QACrC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EACD,CAAC,iBAAiB,CAAC,CACpB,CAAC;IAEF,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;YACvC,IAAI,YAAY,KAAK,cAAc,EAAE,CAAC;gBACpC,gBAAgB,CAAC,OAAO,GAAG,IAAI,CAAC;gBAChC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;gBAChC,gBAAgB,CAAC,OAAO,GAAG,KAAK,CAAC;YACnC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAc,YAAY,YAC3F,KAAC,MAAM,IACL,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE;gBACP,QAAQ;gBACR,QAAQ;gBACR,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;gBAC7B,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,KAAK;gBAC3B,eAAe,EAAE,IAAI;gBACrB,OAAO,EAAE,CAAC;gBACV,gBAAgB,EAAE,WAAW;gBAC7B,uBAAuB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;gBAC1C,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE;gBAC7B,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;aACjC,GACD,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/StatusBar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * StatusBar
+ *
+ * Bottom status bar showing document statistics and parse status.
+ */
+export interface StatusBarProps {
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * Status bar displaying document statistics: character count, word count,
+ * block count, and parse/error status.
+ */
+export declare function StatusBar({ className }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../src/StatusBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,cAAc,2CA6BtD"}

package/dist/StatusBar.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * StatusBar
+ *
+ * Bottom status bar showing document statistics and parse status.
+ */
+import { useMemo } from 'react';
+import { useEditorContext } from './EditorContext';
+/**
+ * Status bar displaying document statistics: character count, word count,
+ * block count, and parse/error status.
+ */
+export function StatusBar({ className }) {
+    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 (_jsxs("div", { className: `squisq-status-bar ${className || ''}`, children: [_jsxs("span", { className: "squisq-status-item", children: [stats.words, " words"] }), _jsxs("span", { className: "squisq-status-item", children: [stats.chars, " chars"] }), _jsxs("span", { className: "squisq-status-item", children: [stats.lines, " lines"] }), _jsxs("span", { className: "squisq-status-item", children: [stats.blocks, " blocks"] }), _jsx("span", { className: "squisq-status-spacer" }), isParsing && _jsx("span", { className: "squisq-status-item squisq-status-parsing", children: "Parsing\u2026" }), parseError && (_jsx("span", { className: "squisq-status-item squisq-status-error", title: parseError, children: "\u26A0 Error" })), !isParsing && !parseError && (_jsx("span", { className: "squisq-status-item squisq-status-ok", children: "\u2713 OK" }))] }));
+}
+//# sourceMappingURL=StatusBar.js.map

package/dist/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../src/StatusBar.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAOnD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAkB;IACrD,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE1E,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC;QACpC,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACpF,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;QAChD,MAAM,MAAM,GAAG,GAAG,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;QACvC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IACzC,CAAC,EAAE,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,eAAK,SAAS,EAAE,qBAAqB,SAAS,IAAI,EAAE,EAAE,aACpD,gBAAM,SAAS,EAAC,oBAAoB,aAAE,KAAK,CAAC,KAAK,cAAc,EAC/D,gBAAM,SAAS,EAAC,oBAAoB,aAAE,KAAK,CAAC,KAAK,cAAc,EAC/D,gBAAM,SAAS,EAAC,oBAAoB,aAAE,KAAK,CAAC,KAAK,cAAc,EAC/D,gBAAM,SAAS,EAAC,oBAAoB,aAAE,KAAK,CAAC,MAAM,eAAe,EACjE,eAAM,SAAS,EAAC,sBAAsB,GAAG,EACxC,SAAS,IAAI,eAAM,SAAS,EAAC,0CAA0C,8BAAgB,EACvF,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,wCAAwC,EAAC,KAAK,EAAE,UAAU,6BAEnE,CACR,EACA,CAAC,SAAS,IAAI,CAAC,UAAU,IAAI,CAC5B,eAAM,SAAS,EAAC,qCAAqC,0BAAY,CAClE,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/TemplateAnnotation.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+export declare const HeadingWithTemplate: import("@tiptap/core").Node<import("@tiptap/extension-heading").HeadingOptions, any>;
+//# sourceMappingURL=TemplateAnnotation.d.ts.map

package/dist/TemplateAnnotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateAnnotation.d.ts","sourceRoot":"","sources":["../src/TemplateAnnotation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,sFAiD9B,CAAC"}

package/dist/TemplateAnnotation.js

@@ -0,0 +1,69 @@
+/**
+ * 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) => element.getAttribute('data-template') || null,
+                renderHTML: (attributes) => {
+                    if (!attributes.dataTemplate)
+                        return {};
+                    return { 'data-template': attributes.dataTemplate };
+                },
+            },
+            dataTemplateParams: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-template-params') || null,
+                renderHTML: (attributes) => {
+                    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];
+    },
+});
+//# sourceMappingURL=TemplateAnnotation.js.map

package/dist/TemplateAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateAnnotation.js","sourceRoot":"","sources":["../src/TemplateAnnotation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAEhD;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC;IAChD,aAAa;QACX,OAAO;YACL,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE;YAClB,YAAY,EAAE;gBACZ,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,IAAI;gBAClF,UAAU,EAAE,CAAC,UAAmC,EAAE,EAAE;oBAClD,IAAI,CAAC,UAAU,CAAC,YAAY;wBAAE,OAAO,EAAE,CAAC;oBACxC,OAAO,EAAE,eAAe,EAAE,UAAU,CAAC,YAAY,EAAE,CAAC;gBACtD,CAAC;aACF;YACD,kBAAkB,EAAE;gBAClB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB,CAAC,IAAI,IAAI;gBACzF,UAAU,EAAE,CAAC,UAAmC,EAAE,EAAE;oBAClD,IAAI,CAAC,UAAU,CAAC,kBAAkB;wBAAE,OAAO,EAAE,CAAC;oBAC9C,OAAO,EAAE,sBAAsB,EAAE,UAAU,CAAC,kBAAkB,EAAE,CAAC;gBACnE,CAAC;aACF;SACF,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,MAAM,YAAY,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;QAErD,IAAI,YAAY,EAAE,CAAC;YACjB,4CAA4C;YAC5C,OAAO;gBACL,GAAG;gBACH,cAAc;gBACd,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE,CAAC,CAAC;gBAChD;oBACE,MAAM;oBACN;wBACE,KAAK,EAAE,uBAAuB;wBAC9B,eAAe,EAAE,OAAO;wBACxB,eAAe,EAAE,YAAY;qBAC9B;oBACD,YAAY;iBACb;aACF,CAAC;QACJ,CAAC;QAED,yCAAyC;QACzC,OAAO,CAAC,GAAG,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC;IAClC,CAAC;CACF,CAAC,CAAC"}

package/dist/Toolbar.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+export interface ToolbarProps {
+    /** Additional class name */
+    className?: string;
+    /** Whether the Files panel is currently shown */
+    showFiles?: boolean;
+    /** Toggle the Files panel. When provided, a "Files" button appears in the toolbar. */
+    onToggleFiles?: () => void;
+}
+/**
+ * Formatting toolbar.
+ * - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
+ * - Raw: appends markdown syntax to the source
+ */
+export declare function Toolbar({ className, showFiles, onToggleFiles }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAaH,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAuFD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,YAAY,2CAkX5E"}

package/dist/Toolbar.js

@@ -0,0 +1,350 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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 { useEditorContext } from './EditorContext';
+import { getAvailableTemplates } from '@bendyline/squisq/doc';
+const VIEWS = [
+    { id: 'wysiwyg', label: 'Editor', shortcut: '⌘1' },
+    { id: 'raw', label: 'Raw', shortcut: '⌘2' },
+    { id: 'preview', label: 'Preview', shortcut: '⌘3' },
+];
+const BUTTONS = [
+    // 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, id) {
+    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, showFiles, onToggleFiles }) {
+    const { activeView, setActiveView, markdownSource, setMarkdownSource, tiptapEditor, monacoEditor, } = useEditorContext();
+    // Force re-render when Tiptap selection or formatting state changes
+    const [, forceUpdate] = useReducer((c) => c + 1, 0);
+    useEffect(() => {
+        if (!tiptapEditor)
+            return;
+        tiptapEditor.on('transaction', forceUpdate);
+        return () => {
+            tiptapEditor.off('transaction', forceUpdate);
+        };
+    }, [tiptapEditor]);
+    // ── Tiptap handler ─────────────────────────────────────
+    const handleTiptap = useCallback((id) => {
+        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
+                        .setLink?.({ href: url })
+                        .run();
+                }
+                break;
+            }
+        }
+    }, [tiptapEditor]);
+    // ── Raw markdown handler ───────────────────────────────
+    const handleRaw = useCallback((id) => {
+        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, after, placeholder) => {
+                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, placeholder) => {
+                if (hasSelection) {
+                    replacement = selectedText
+                        .split('\n')
+                        .map((line) => 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) => {
+        if (activeView === 'wysiwyg' && tiptapEditor) {
+            handleTiptap(id);
+        }
+        else {
+            handleRaw(id);
+        }
+    }, [activeView, tiptapEditor, handleTiptap, handleRaw]);
+    const groups = ['format', 'structure', 'insert'];
+    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) => {
+        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 (_jsxs("div", { className: `squisq-toolbar ${className || ''}`, role: "toolbar", "aria-label": "Formatting toolbar", children: [_jsx("div", { className: "squisq-toolbar-view-tabs", role: "tablist", "aria-label": "Editor view", children: VIEWS.map((view) => (_jsx("button", { 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})`, children: view.label }, view.id))) }), !isPreview && (_jsxs("div", { className: "squisq-toolbar-actions", children: [groups.map((group, gi) => (_jsxs("div", { className: "squisq-toolbar-group", children: [gi > 0 && _jsx("div", { className: "squisq-toolbar-separator" }), BUTTONS.filter((b) => b.group === group).map((btn) => {
+                                const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
+                                return (_jsx("button", { 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, children: btn.icon }, btn.id));
+                            })] }, group))), currentTemplate !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: "squisq-toolbar-separator" }), _jsx("div", { className: "squisq-toolbar-group squisq-template-picker", children: _jsxs("label", { className: "squisq-template-picker-label", title: "Block template for this heading", children: ["Template:", _jsxs("select", { className: "squisq-template-picker-select", value: currentTemplate, onChange: (e) => handleTemplatePick(e.target.value), children: [_jsx("option", { value: "", children: "\u2014 none \u2014" }), templateNames.map((name) => (_jsx("option", { value: name, children: name }, name)))] })] }) })] }))] })), onToggleFiles && _jsx("div", { style: { flex: 1 } }), onToggleFiles && (_jsx("button", { className: `squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? ' squisq-toolbar-button--active' : ''}`, onClick: onToggleFiles, title: showFiles ? 'Hide Files panel' : 'Show Files panel', "aria-pressed": showFiles, "aria-label": "Toggle Files panel", children: '\u{1F4CE}' }))] }));
+}
+//# sourceMappingURL=Toolbar.js.map