@bendyline/squisq-editor-react 1.4.0 → 1.5.0

package/src/LinkDialog.tsx

@@ -0,0 +1,276 @@
+/**
+ * LinkDialog — modal for inserting or editing a markdown link.
+ *
+ * Used by both the WYSIWYG and Raw markdown toolbars so the link-editing
+ * UX is identical regardless of view. Shows separate fields for the link
+ * text (caption) and the URL target so the user can see and edit both.
+ *
+ * When a `documentLinkProvider` is supplied, the dialog also exposes a
+ * second tab — "Browse documents" — that lists neighbor docs from the
+ * host's workspace. Selecting one fills the URL with the candidate
+ * path (and the caption, if it was still empty), so authors can link
+ * `home.md → resume.md` without typing the relative path by hand.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { DocumentLinkProvider, DocumentLinkCandidate } from './EditorContext';
+
+export interface LinkDialogProps {
+  /** Whether this is a brand-new link (Insert) or an existing one (Update). */
+  mode: 'insert' | 'update';
+  /** Initial value for the caption field. */
+  initialText: string;
+  /** Initial value for the URL field. */
+  initialUrl: string;
+  /**
+   * Confirm — `text` may be empty if the caller wants to fall back to URL
+   * as the visible text. Empty `url` means the user cleared it; callers
+   * should treat that as "remove link" when in update mode.
+   */
+  onConfirm: (text: string, url: string) => void;
+  /** Dismiss without applying changes. */
+  onClose: () => void;
+  /**
+   * Optional sibling-document picker. When provided, the dialog shows
+   * a "Browse documents" tab that queries the provider as the author
+   * types and offers click-to-pick suggestions.
+   */
+  documentLinkProvider?: DocumentLinkProvider | null;
+}
+
+/**
+ * Centered modal with Text and URL inputs. Submits on Enter, dismisses
+ * on Escape or backdrop click. Auto-focuses URL when the text field is
+ * already populated; otherwise focuses Text.
+ */
+export function LinkDialog({
+  mode,
+  initialText,
+  initialUrl,
+  onConfirm,
+  onClose,
+  documentLinkProvider,
+}: LinkDialogProps) {
+  const [text, setText] = useState(initialText);
+  const [url, setUrl] = useState(initialUrl);
+  const [tab, setTab] = useState<'url' | 'documents'>('url');
+  const [docQuery, setDocQuery] = useState('');
+  const [docResults, setDocResults] = useState<DocumentLinkCandidate[]>([]);
+  const [docLoading, setDocLoading] = useState(false);
+  const textRef = useRef<HTMLInputElement>(null);
+  const urlRef = useRef<HTMLInputElement>(null);
+  const docSearchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // If we have a caption already, the URL is what the user is most
+    // likely here to edit; otherwise focus the caption field first.
+    const target = initialText ? urlRef.current : textRef.current;
+    target?.focus();
+    target?.select();
+  }, [initialText]);
+
+  // Refresh the document candidate list whenever the user types into
+  // the picker or first opens it. Empty query = initial list.
+  useEffect(() => {
+    if (!documentLinkProvider || tab !== 'documents') return;
+    let cancelled = false;
+    setDocLoading(true);
+    documentLinkProvider(docQuery)
+      .then((results) => {
+        if (!cancelled) {
+          setDocResults(results);
+          setDocLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setDocResults([]);
+          setDocLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [docQuery, documentLinkProvider, tab]);
+
+  // Auto-focus the search field when the documents tab opens.
+  useEffect(() => {
+    if (tab === 'documents') {
+      const t = setTimeout(() => docSearchRef.current?.focus(), 0);
+      return () => clearTimeout(t);
+    }
+    return undefined;
+  }, [tab]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      onConfirm(text, url);
+    },
+    [text, url, onConfirm],
+  );
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) onClose();
+    },
+    [onClose],
+  );
+
+  const isUpdate = mode === 'update';
+  const submitLabel = isUpdate ? 'Update' : 'Insert';
+  const heading = isUpdate ? 'Edit link' : 'Insert link';
+
+  const handlePickCandidate = useCallback((candidate: DocumentLinkCandidate) => {
+    // Picking a document fills the URL and the caption (when the
+    // caption is still empty — preserve any caption the user already
+    // typed). Switch back to the URL tab so the result is immediately
+    // visible and editable, and so Enter submits the form.
+    setUrl(candidate.path);
+    setText((existing) => existing || candidate.label);
+    setTab('url');
+  }, []);
+
+  return (
+    <div className="squisq-link-dialog-overlay" onMouseDown={handleBackdropClick}>
+      <form className="squisq-link-dialog" onSubmit={handleSubmit}>
+        <div className="squisq-link-dialog-header">
+          <h2 className="squisq-link-dialog-title">{heading}</h2>
+          <button
+            type="button"
+            className="squisq-link-dialog-close"
+            onClick={onClose}
+            aria-label="Close"
+          >
+            &times;
+          </button>
+        </div>
+        <div className="squisq-link-dialog-body">
+          {documentLinkProvider && (
+            <div className="squisq-link-dialog-tabs" role="tablist">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={tab === 'url'}
+                className={`squisq-link-dialog-tab${tab === 'url' ? ' squisq-link-dialog-tab--active' : ''}`}
+                onClick={() => setTab('url')}
+              >
+                URL
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={tab === 'documents'}
+                className={`squisq-link-dialog-tab${tab === 'documents' ? ' squisq-link-dialog-tab--active' : ''}`}
+                onClick={() => setTab('documents')}
+              >
+                Browse documents
+              </button>
+            </div>
+          )}
+          <label className="squisq-link-dialog-field">
+            <span className="squisq-link-dialog-label">Text</span>
+            <input
+              ref={textRef}
+              type="text"
+              className="squisq-link-dialog-input"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Link caption"
+            />
+          </label>
+          {tab === 'url' ? (
+            <label className="squisq-link-dialog-field">
+              <span className="squisq-link-dialog-label">URL</span>
+              <input
+                ref={urlRef}
+                type="text"
+                className="squisq-link-dialog-input"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                placeholder="https://example.com"
+                spellCheck={false}
+                autoComplete="off"
+              />
+            </label>
+          ) : (
+            <div className="squisq-link-dialog-doc-picker">
+              <label className="squisq-link-dialog-field">
+                <span className="squisq-link-dialog-label">Search</span>
+                <input
+                  ref={docSearchRef}
+                  type="text"
+                  className="squisq-link-dialog-input"
+                  value={docQuery}
+                  onChange={(e) => setDocQuery(e.target.value)}
+                  placeholder="Type to filter…"
+                  spellCheck={false}
+                  autoComplete="off"
+                />
+              </label>
+              <div
+                className="squisq-link-dialog-doc-list"
+                role="listbox"
+                aria-label="Document candidates"
+                aria-busy={docLoading}
+              >
+                {docLoading && docResults.length === 0 ? (
+                  <div className="squisq-link-dialog-doc-empty">Loading…</div>
+                ) : docResults.length === 0 ? (
+                  <div className="squisq-link-dialog-doc-empty">
+                    {docQuery.trim() ? `No matches for "${docQuery.trim()}"` : 'No documents'}
+                  </div>
+                ) : (
+                  docResults.map((c) => (
+                    <button
+                      key={c.path}
+                      type="button"
+                      role="option"
+                      aria-selected={url === c.path}
+                      className={`squisq-link-dialog-doc-item${url === c.path ? ' squisq-link-dialog-doc-item--selected' : ''}`}
+                      onClick={() => handlePickCandidate(c)}
+                    >
+                      <span className="squisq-link-dialog-doc-item-label">{c.label}</span>
+                      <span className="squisq-link-dialog-doc-item-path">{c.path}</span>
+                      {c.description && (
+                        <span className="squisq-link-dialog-doc-item-desc">{c.description}</span>
+                      )}
+                    </button>
+                  ))
+                )}
+              </div>
+              {url && (
+                <div className="squisq-link-dialog-doc-current">
+                  Selected: <code>{url}</code>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="squisq-link-dialog-footer">
+          <button
+            type="button"
+            className="squisq-link-dialog-btn squisq-link-dialog-btn--secondary"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button type="submit" className="squisq-link-dialog-btn squisq-link-dialog-btn--primary">
+            {submitLabel}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/MentionExtension.tsx

@@ -244,15 +244,18 @@ function positionTo(
 ): void {
   const rect = clientRect?.();
   if (!rect) return;
-  // Anchor just below the caret; fall back to above when there's no room.
+  // Anchor above the caret first — chat composers live near the
+  // bottom of the viewport, where a "below" popover gets clipped or
+  // covers the just-typed text. Fall back to below only when there's
+  // no room above (top of a long document, etc.).
   const viewportH = window.innerHeight;
-  const below = rect.bottom + 4;
-  const estH = Math.min(240, el.offsetHeight || 200);
-  const fitsBelow = below + estH < viewportH;
+  const estH = Math.min(el.offsetHeight || 240, viewportH - 16);
+  const above = rect.top - estH - 4;
+  const fitsAbove = above >= 0;
   el.style.left = `${rect.left + window.scrollX}px`;
-  if (fitsBelow) {
-    el.style.top = `${below + window.scrollY}px`;
+  if (fitsAbove) {
+    el.style.top = `${above + window.scrollY}px`;
   } else {
-    el.style.top = `${rect.top + window.scrollY - estH - 4}px`;
+    el.style.top = `${rect.bottom + 4 + window.scrollY}px`;
   }
 }

package/src/OutlinePanel.tsx

@@ -0,0 +1,295 @@
+/**
+ * OutlinePanel
+ *
+ * Left-side companion to the InlinePreviewGutter. Renders a hierarchical
+ * tree of the document's headings (h1 → h2 → h3 …) so the structure is
+ * graspable at a glance and the user can jump to any section. Works in
+ * BOTH the WYSIWYG and Markdown editor views — view-specific positioning
+ * lives in `useHeadingLayout`.
+ */
+
+import { type CSSProperties, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Block } from '@bendyline/squisq/schemas';
+import { flattenBlocks, hasTemplate } from '@bendyline/squisq/doc';
+import { extractPlainText } from '@bendyline/squisq/markdown';
+import { useEditorContext } from './EditorContext';
+import { templateLabel } from './TemplatePicker';
+import { useHeadingLayout } from './useHeadingLayout';
+import { usePreviewSettingsOptional } from './PreviewControls';
+
+export interface OutlinePanelProps {
+  /** Width of the pane in pixels (default: 240). */
+  width?: number;
+  /** Optional CSS class for the outer container. */
+  className?: string;
+}
+
+export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
+  const { doc, markdownSource, setMarkdownSource } = useEditorContext();
+  const paneRef = useRef<HTMLElement | null>(null);
+  const { scrollToBlock } = useHeadingLayout(paneRef);
+  const activeBlockId = useActiveOutlineBlockId();
+
+  // Promote / demote the row's heading by rewriting just the `#` prefix
+  // on the heading line. Falls through when the new depth would leave the
+  // legal H1–H6 range, so the buttons disable themselves at the edges.
+  // Both editor surfaces resync from `markdownSource` automatically.
+  const changeHeadingLevel = useCallback(
+    (block: Block, delta: number) => {
+      const line = block.sourceHeading?.position?.start.line;
+      if (typeof line !== 'number') return;
+      const next = bumpHeadingLevelInSource(markdownSource, line, delta);
+      if (next != null) setMarkdownSource(next);
+    },
+    [markdownSource, setMarkdownSource],
+  );
+
+  // Inherit the active document theme's primary color so the current-row
+  // highlight and template-name chips match the rest of the editor's
+  // accent palette (e.g. warm-earth's terracotta) instead of the
+  // hard-coded purple fallback. Falls through to the CSS defaults when
+  // no PreviewSettingsProvider is mounted.
+  const previewSettings = usePreviewSettingsOptional();
+  const accentColor = previewSettings?.activeTheme?.colors?.primary;
+
+  const isEmpty = !doc || doc.blocks.length === 0 || !hasAnyHeading(doc.blocks);
+  const paneStyle: CSSProperties = {
+    width: `${width}px`,
+    flex: `0 0 ${width}px`,
+    overflow: 'auto',
+    ...(accentColor
+      ? ({ ['--squisq-outline-accent' as string]: accentColor } as CSSProperties)
+      : {}),
+  };
+
+  return (
+    <aside
+      ref={paneRef}
+      className={`squisq-outline${className ? ` ${className}` : ''}`}
+      style={paneStyle}
+      data-testid="outline-panel"
+      aria-label="Document outline"
+    >
+      {isEmpty ? (
+        <div className="squisq-outline-empty">
+          <p>Add a heading to populate the outline.</p>
+        </div>
+      ) : (
+        <ul className="squisq-outline-tree" role="tree">
+          {doc!.blocks.map((b) => (
+            <OutlineNode
+              key={b.id}
+              block={b}
+              activeBlockId={activeBlockId}
+              onSelect={scrollToBlock}
+              onChangeLevel={changeHeadingLevel}
+            />
+          ))}
+        </ul>
+      )}
+    </aside>
+  );
+}
+
+// ── Subcomponents ──────────────────────────────────────────────────
+
+function OutlineNode({
+  block,
+  activeBlockId,
+  onSelect,
+  onChangeLevel,
+}: {
+  block: Block;
+  activeBlockId: string | null;
+  onSelect: (b: Block) => void;
+  onChangeLevel: (block: Block, delta: number) => void;
+}) {
+  const heading = block.sourceHeading;
+  const depth = heading?.depth ?? 1;
+  const text = heading ? extractPlainText(heading).trim() : '';
+  const annotation = heading?.templateAnnotation;
+  const tplName = annotation?.template;
+  const showChip = tplName && hasTemplate(tplName);
+  const isActive = block.id === activeBlockId;
+  const canPromote = !!heading && depth > 1;
+  const canDemote = !!heading && depth < 6;
+
+  return (
+    <li className="squisq-outline-item" role="treeitem" aria-current={isActive || undefined}>
+      <div className="squisq-outline-row-wrap">
+        <button
+          type="button"
+          className={`squisq-outline-row squisq-outline-row--depth-${depth}${
+            isActive ? ' squisq-outline-row--current' : ''
+          }`}
+          onClick={() => onSelect(block)}
+          title={text || '(empty heading)'}
+        >
+          <span className="squisq-outline-row-text">{text || '(untitled)'}</span>
+          {showChip && (
+            <span className="squisq-outline-template-chip">{templateLabel(tplName!)}</span>
+          )}
+        </button>
+        {heading && (
+          <span className="squisq-outline-row-actions">
+            <button
+              type="button"
+              className="squisq-outline-row-arrow"
+              aria-label={`Promote heading (currently H${depth})`}
+              title="Promote heading"
+              disabled={!canPromote}
+              onClick={() => onChangeLevel(block, -1)}
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+                <path
+                  d="M6.5 2.5 L3 5 L6.5 7.5"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  fill="none"
+                />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="squisq-outline-row-arrow"
+              aria-label={`Demote heading (currently H${depth})`}
+              title="Demote heading"
+              disabled={!canDemote}
+              onClick={() => onChangeLevel(block, +1)}
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+                <path
+                  d="M3.5 2.5 L7 5 L3.5 7.5"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  fill="none"
+                />
+              </svg>
+            </button>
+          </span>
+        )}
+      </div>
+      {block.children && block.children.length > 0 && (
+        <ul className="squisq-outline-tree">
+          {block.children.map((child) => (
+            <OutlineNode
+              key={child.id}
+              block={child}
+              activeBlockId={activeBlockId}
+              onSelect={onSelect}
+              onChangeLevel={onChangeLevel}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+// ── Active-block tracking ──────────────────────────────────────────
+
+/**
+ * Tracks which heading the user's cursor is currently inside (or most
+ * recently passed). In WYSIWYG mode this watches Tiptap's selection;
+ * in Raw mode it watches Monaco's cursor line. The Preview surface has
+ * no cursor concept and reports `null`.
+ *
+ * The lookup mirrors the heading-pairing logic in `useHeadingLayout`:
+ * the Nth heading in document order maps to `flattenBlocks(doc.blocks)[N]`.
+ */
+function useActiveOutlineBlockId(): string | null {
+  const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
+  const flatBlocks = useMemo(() => (doc ? flattenBlocks(doc.blocks) : []), [doc]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  // Reset whenever the active surface changes — a stale highlight from
+  // the previous view would mislead the user before the new surface's
+  // cursor handler runs.
+  useEffect(() => {
+    setActiveId(null);
+  }, [activeView]);
+
+  useEffect(() => {
+    if (activeView !== 'wysiwyg' || !tiptapEditor) return;
+
+    const update = () => {
+      const { from } = tiptapEditor.state.selection;
+      let lastIndex = -1;
+      let seen = -1;
+      tiptapEditor.state.doc.forEach((node, offset) => {
+        if (node.type.name !== 'heading') return;
+        seen += 1;
+        if (offset <= from) lastIndex = seen;
+      });
+      const block = lastIndex >= 0 ? flatBlocks[lastIndex] : null;
+      setActiveId(block?.id ?? null);
+    };
+
+    update();
+    tiptapEditor.on('selectionUpdate', update);
+    tiptapEditor.on('update', update);
+    return () => {
+      tiptapEditor.off('selectionUpdate', update);
+      tiptapEditor.off('update', update);
+    };
+  }, [activeView, tiptapEditor, flatBlocks]);
+
+  useEffect(() => {
+    if (activeView !== 'raw' || !monacoEditor) return;
+
+    const update = () => {
+      const line = monacoEditor.getPosition()?.lineNumber;
+      if (typeof line !== 'number') {
+        setActiveId(null);
+        return;
+      }
+      let lastIndex = -1;
+      flatBlocks.forEach((b, i) => {
+        const headingLine = b.sourceHeading?.position?.start.line;
+        if (typeof headingLine === 'number' && headingLine <= line) lastIndex = i;
+      });
+      const block = lastIndex >= 0 ? flatBlocks[lastIndex] : null;
+      setActiveId(block?.id ?? null);
+    };
+
+    update();
+    const sub = monacoEditor.onDidChangeCursorPosition(update);
+    return () => sub.dispose();
+  }, [activeView, monacoEditor, flatBlocks]);
+
+  return activeId;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────
+
+function hasAnyHeading(blocks: Block[]): boolean {
+  for (const b of blocks) {
+    if (b.sourceHeading) return true;
+    if (b.children && hasAnyHeading(b.children)) return true;
+  }
+  return false;
+}
+
+/**
+ * Rewrites just the leading `#` run on the given 1-based line, shifting
+ * the heading depth by `delta`. Returns `null` when the line isn't an
+ * ATX heading or the resulting depth would fall outside 1–6. Leaves the
+ * rest of the line (including any `{[template]}` annotation) untouched.
+ */
+function bumpHeadingLevelInSource(source: string, line: number, delta: number): string | null {
+  const lines = source.split('\n');
+  const idx = line - 1;
+  if (idx < 0 || idx >= lines.length) return null;
+  const original = lines[idx];
+  const match = original.match(/^(#{1,6})(\s|$)/);
+  if (!match) return null;
+  const currentDepth = match[1].length;
+  const newDepth = currentDepth + delta;
+  if (newDepth < 1 || newDepth > 6) return null;
+  lines[idx] = '#'.repeat(newDepth) + original.slice(currentDepth);
+  return lines.join('\n');
+}