@bendyline/squisq-editor-react 1.3.0 → 1.5.0

package/src/RawEditor.tsx

@@ -7,10 +7,16 @@
  */
 
 import { useRef, useCallback, useEffect } from 'react';
-import Editor, { loader, type OnMount, type OnChange } from '@monaco-editor/react';
+import Editor, {
+  loader,
+  type OnMount,
+  type OnChange,
+  type BeforeMount,
+} from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import { useEditorContext } from './EditorContext';
 import { getAvailableTemplates } from '@bendyline/squisq/doc';
+import { suggestIcons, resolveIcon, iconGlyph } from '@bendyline/squisq/icons';
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 
 // Use locally installed monaco-editor instead of CDN.
@@ -25,6 +31,23 @@ import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 // only the language contributions needed (e.g. markdown, javascript, etc.).
 loader.config({ monaco });
 
+// Squisq Monaco themes: same syntax highlighting as vs / vs-dark, but with
+// Monaco's internal gutter (line numbers + folding margin) and overview
+// ruler tinted to match the side-pane "desk" colors so the canvas's
+// internal furniture blends with its surroundings. The seam color is the
+// 1px line Monaco draws between the white canvas and the overview ruler;
+// matches the `::after` border on `.margin` so both sides of the canvas
+// frame look the same.
+const SQUISQ_LIGHT_GUTTER = '#dcd8d0';
+const SQUISQ_DARK_GUTTER = '#0f1219';
+const SQUISQ_LIGHT_SEAM = '#b0a99a';
+const SQUISQ_DARK_SEAM = '#2a3144';
+
+const SQUISQ_THEMES: Record<string, string> = {
+  vs: 'squisq-light',
+  'vs-dark': 'squisq-dark',
+};
+
 export interface RawEditorProps {
   /** Monaco editor theme (default: 'vs-dark') */
   theme?: string;
@@ -64,6 +87,8 @@ export function RawEditor({
   const isExternalUpdate = useRef(false);
   const completionDisposable = useRef<monaco.IDisposable | null>(null);
   const mentionCompletionDisposable = useRef<monaco.IDisposable | null>(null);
+  const iconCompletionDisposable = useRef<monaco.IDisposable | null>(null);
+  const iconGlyphDecorations = useRef<monaco.editor.IEditorDecorationsCollection | null>(null);
   const dropCleanupRef = useRef<(() => void) | null>(null);
   const keyDisposable = useRef<monaco.IDisposable | null>(null);
   // Ref so the keydown handler always sees the latest callback.
@@ -78,6 +103,31 @@ export function RawEditor({
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
 
+  const handleBeforeMount: BeforeMount = useCallback((monaco) => {
+    monaco.editor.defineTheme('squisq-light', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editorGutter.background': SQUISQ_LIGHT_GUTTER,
+        'editorOverviewRuler.background': SQUISQ_LIGHT_GUTTER,
+        'editorOverviewRuler.border': SQUISQ_LIGHT_SEAM,
+        'minimap.background': SQUISQ_LIGHT_GUTTER,
+      },
+    });
+    monaco.editor.defineTheme('squisq-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editorGutter.background': SQUISQ_DARK_GUTTER,
+        'editorOverviewRuler.background': SQUISQ_DARK_GUTTER,
+        'editorOverviewRuler.border': SQUISQ_DARK_SEAM,
+        'minimap.background': SQUISQ_DARK_GUTTER,
+      },
+    });
+  }, []);
+
   const handleMount: OnMount = useCallback(
     (editor, monaco) => {
       editorRef.current = editor;
@@ -89,6 +139,8 @@ export function RawEditor({
       completionDisposable.current = null;
       mentionCompletionDisposable.current?.dispose();
       mentionCompletionDisposable.current = null;
+      iconCompletionDisposable.current?.dispose();
+      iconCompletionDisposable.current = null;
 
       // Register the `{[template]}` completion provider only for markdown
       // files — it's meaningless for TypeScript, JSON, Python, etc.
@@ -103,10 +155,17 @@ export function RawEditor({
             if (!/^#{1,6}\s/.test(lineContent)) return { suggestions: [] };
 
             const textBeforeCursor = lineContent.substring(0, position.column - 1);
+            const textAfterCursor = lineContent.substring(position.column - 1);
             const bracketIdx = textBeforeCursor.lastIndexOf('{[');
             if (bracketIdx === -1) return { suggestions: [] };
 
-            // The range to replace: from after {[ to the cursor
+            // When Monaco's bracket auto-pair has already produced the
+            // closing `]}` we just leave it in place and skip the
+            // suffix — otherwise accepting `sectionHeader` on
+            // `{[gi]}` would yield `{[sectionHeader]}]}`.
+            const closingMatch = textAfterCursor.match(/^\]\}/);
+            const suffix = closingMatch ? '' : ']}';
+
             const startCol = bracketIdx + 3; // after {[
             const range = new monaco.Range(
               position.lineNumber,
@@ -117,8 +176,9 @@ export function RawEditor({
 
             const suggestions = templates.map((name) => ({
               label: name,
+              filterText: name,
               kind: monaco.languages.CompletionItemKind.Value,
-              insertText: name + ']}',
+              insertText: name + suffix,
               range,
               detail: 'Block template',
               sortText: name,
@@ -182,6 +242,86 @@ export function RawEditor({
             },
           },
         );
+
+        // FontAwesome icon completion. Fires inside any `{[…]}` opener
+        // anywhere in the doc (not just headings — icons are inline).
+        // Suggestions cover the whole FA Free catalog filtered by the
+        // partial token; we cap at 50 to keep the popup readable. The
+        // template provider above still handles heading lines, so on
+        // a `## Title {[…]}` the user sees both template names AND
+        // icons interleaved by the regular Monaco filter.
+        iconCompletionDisposable.current = monaco.languages.registerCompletionItemProvider(
+          'markdown',
+          {
+            triggerCharacters: ['['],
+            provideCompletionItems(model, position) {
+              const lineContent = model.getLineContent(position.lineNumber);
+              const textBeforeCursor = lineContent.substring(0, position.column - 1);
+              const textAfterCursor = lineContent.substring(position.column - 1);
+              const bracketIdx = textBeforeCursor.lastIndexOf('{[');
+              if (bracketIdx === -1) return { suggestions: [] };
+              // Bail if any `]` already closes this annotation between
+              // `{[` and the cursor — we'd be past the token, not in it.
+              const between = textBeforeCursor.slice(bracketIdx + 2);
+              if (between.includes(']')) return { suggestions: [] };
+              // Tokens are alphanumeric + `-_:`; anything else means
+              // we're not inside an icon (probably a code/link bracket).
+              if (between && !/^[a-zA-Z0-9_:-]*$/.test(between)) {
+                return { suggestions: [] };
+              }
+              const query = between.toLowerCase();
+
+              // When Monaco's bracket auto-pair has already produced a
+              // closing `]}` we don't want to insert another — but we
+              // also don't want to consume the existing one, since
+              // then we'd have to re-emit it and the round-trip is
+              // brittle. Leave the closing in place and just insert
+              // the bare token; if no closing exists yet, append it.
+              const closingMatch = textAfterCursor.match(/^\]\}/);
+              const suffix = closingMatch ? '' : ']}';
+
+              const range = new monaco.Range(
+                position.lineNumber,
+                bracketIdx + 3, // after `{[`
+                position.lineNumber,
+                position.column,
+              );
+
+              const top = suggestIcons(query, 50);
+              return {
+                suggestions: top.map((m, i) => ({
+                  // Embed the FA codepoint as the first character of
+                  // the label. CSS targets the suggest widget with
+                  // FontAwesome as a font fallback, so the codepoint
+                  // renders as the glyph and the name renders in the
+                  // editor's normal font.
+                  label: {
+                    label: `${iconGlyph(m.entry)}  ${m.token}`,
+                    description: `fa-${m.entry.family}`,
+                  },
+                  // `filterText` excludes the glyph + spacing so Monaco
+                  // filters against the actual icon name only.
+                  filterText: m.token,
+                  kind: monaco.languages.CompletionItemKind.Constant,
+                  insertText: `${m.token}${suffix}`,
+                  range,
+                  detail: m.entry.label,
+                  // Documentation pane (rendered when Monaco's
+                  // suggestion preview is expanded) shows a large
+                  // version of the glyph alongside the canonical token.
+                  documentation: {
+                    value: `<i class="fa-${m.entry.family} fa-${m.entry.name}" style="font-size: 2em; display: inline-block; margin-right: 8px; vertical-align: middle"></i> **${m.token}** *(${m.entry.label})*`,
+                    isTrusted: true,
+                    supportHtml: true,
+                  },
+                  // Sort key: 1-digit score prefix keeps "starts with"
+                  // matches above "contains" / keyword matches.
+                  sortText: `${m.score}${String(i).padStart(4, '0')}`,
+                })),
+              };
+            },
+          },
+        );
       }
 
       // Chat-composer mode: intercept Enter before Monaco inserts a newline.
@@ -257,6 +397,10 @@ export function RawEditor({
       completionDisposable.current = null;
       mentionCompletionDisposable.current?.dispose();
       mentionCompletionDisposable.current = null;
+      iconCompletionDisposable.current?.dispose();
+      iconCompletionDisposable.current = null;
+      iconGlyphDecorations.current?.clear();
+      iconGlyphDecorations.current = null;
       dropCleanupRef.current?.();
       dropCleanupRef.current = null;
       keyDisposable.current?.dispose();
@@ -287,12 +431,63 @@ export function RawEditor({
     }
   }, [markdownSource]);
 
+  // ── Inline FontAwesome glyph decorations ────────────
+  // Walk the markdown source on every change, find each resolvable
+  // `{[icon-name]}` span, and overlay the actual glyph (via Monaco's
+  // `before:` content decoration) just before the brackets. The CSS
+  // classes `.fa-glyph-decoration-<family>` set the per-family font
+  // and weight; the codepoint character is the decoration's content.
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (language !== 'markdown') return;
+    const model = editor.getModel();
+    if (!model) return;
+
+    const decorations: monaco.editor.IModelDeltaDecoration[] = [];
+    const lines = model.getLineCount();
+    const re = /\{\[([a-zA-Z0-9_:-]+)\]\}/g;
+    for (let line = 1; line <= lines; line++) {
+      const text = model.getLineContent(line);
+      re.lastIndex = 0;
+      let match: RegExpExecArray | null;
+      while ((match = re.exec(text)) !== null) {
+        const icon = resolveIcon(match[1]);
+        if (!icon) continue;
+        const glyph = iconGlyph(icon);
+        if (!glyph) continue;
+        // Position the decoration as a zero-width range at the `{`
+        // of the matched token. `before.contentText` renders the
+        // glyph as content prepended visually to that position.
+        const col = match.index + 1; // Monaco columns are 1-based
+        decorations.push({
+          range: new monaco.Range(line, col, line, col),
+          options: {
+            before: {
+              content: glyph,
+              inlineClassName: `fa-glyph-decoration-${icon.family}`,
+            },
+          },
+        });
+      }
+    }
+
+    if (!iconGlyphDecorations.current) {
+      iconGlyphDecorations.current = editor.createDecorationsCollection(decorations);
+    } else {
+      iconGlyphDecorations.current.set(decorations);
+    }
+  }, [markdownSource, language]);
+
+  const effectiveTheme = SQUISQ_THEMES[theme] ?? theme;
+
   return (
     <div className={className} style={{ width: '100%', height: '100%' }} data-testid="raw-editor">
       <Editor
         defaultLanguage={language}
         value={markdownSource}
-        theme={theme}
+        theme={effectiveTheme}
+        beforeMount={handleBeforeMount}
         onMount={handleMount}
         onChange={handleChange}
         options={{
@@ -307,6 +502,22 @@ export function RawEditor({
           bracketPairColorization: { enabled: true },
           guides: { indentation: true },
           padding: { top: 12, bottom: 12 },
+          // Markdown's tokenizer classifies most body text as "string"
+          // or "comment" context, which suppresses `quickSuggestions`
+          // by default. Enable in all three so our `{[icon]}` and
+          // `@mention` typeaheads keep firing as the user types past
+          // the trigger character.
+          quickSuggestions: { other: true, comments: true, strings: true },
+          suggestOnTriggerCharacters: true,
+          // Breathing room between the gutter and the first character.
+          // Done via Monaco's own option so cursor + hit-testing stay in
+          // sync — CSS-padding `.view-lines` shifts the text but not the
+          // cursors layer, which causes the cursor to drift left of the
+          // model column. Monaco's default is 10. We set 22 (12 extra),
+          // and CSS paints the rightmost 12px of the gutter as canvas
+          // color so the breathing room looks like it sits *inside* the
+          // canvas rather than widening the gutter.
+          lineDecorationsWidth: 22,
           readOnly,
           domReadOnly: readOnly,
         }}

package/src/RecorderEntry.tsx

@@ -0,0 +1,164 @@
+/**
+ * RecorderEntry — toolbar slot that wires `RecorderPanel` from
+ * `@bendyline/squisq-recorder-react` into the editor.
+ *
+ * Reads `mediaProvider`, `workspaceContainer`, `activeView`,
+ * `tiptapEditor`, and the markdown editing helpers from
+ * `useEditorContext()`. On a successful save it:
+ *   - inserts an HTML5 media element at the cursor — `<video>` for
+ *     camera / screen recordings, `<audio>` for narration / mic
+ *     recordings — which the markdown renderer turns into an inline
+ *     `<InlineVideoPlayer>` / `<InlineAudioPlayer>` with native
+ *     controls;
+ *   - for narration, also annotates the nearest heading with
+ *     `{[audio=filename]}` so `resolveAudioMapping()` continues to tie
+ *     the recording to that block during slideshow playback;
+ *   - bumps `mediaRevision` so any blob URLs the media bin cached for
+ *     the previous file list are invalidated.
+ *
+ * The component returns `null` when no `mediaProvider` is wired —
+ * recording without a place to write the captured bytes is a
+ * misconfiguration, not a feature.
+ */
+
+import { useCallback } from 'react';
+import { RecorderPanel } from './recorder/RecorderPanel.js';
+import type { RecorderSaveResult } from './recorder/RecorderModal.js';
+import { useEditorContext } from './EditorContext';
+
+/**
+ * Insert a narration annotation `{[audio=filename]}` onto the heading
+ * line currently above the cursor in the Monaco editor. Pure-text
+ * insertion at the line's end keeps the markdown valid and matches the
+ * shape `resolveAudioMapping()` reads. Returns true if a heading line
+ * was found and updated.
+ */
+function annotateMonacoHeading(
+  editor: NonNullable<ReturnType<typeof useEditorContext>['monacoEditor']>,
+  filename: string,
+): boolean {
+  const model = editor.getModel();
+  if (!model) return false;
+  const position = editor.getPosition();
+  if (!position) return false;
+  // Walk upward from the cursor to find the nearest heading line.
+  for (let line = position.lineNumber; line >= 1; line--) {
+    const text = model.getLineContent(line);
+    if (!/^#{1,6}\s/.test(text)) continue;
+    // Skip if the heading already has an audio annotation — don't
+    // stomp the user's existing wiring. Add a separate annotation in
+    // that case wouldn't help either (resolveAudioMapping reads only
+    // the first audio= entry).
+    if (/\{\[audio=/.test(text)) return true;
+    const trimmed = text.replace(/\s+$/, '');
+    const insertText = ` {[audio=${filename}]}`;
+    const column = trimmed.length + 1;
+    editor.executeEdits('recorder-annotation', [
+      {
+        range: {
+          startLineNumber: line,
+          startColumn: column,
+          endLineNumber: line,
+          endColumn: column,
+        },
+        text: insertText,
+      },
+    ]);
+    return true;
+  }
+  return false;
+}
+
+export function RecorderEntry() {
+  const {
+    mediaProvider,
+    workspaceContainer,
+    activeView,
+    monacoEditor,
+    tiptapEditor,
+    insertAtCursor,
+    bumpMediaRevision,
+    markdownSource,
+    setMarkdownSource,
+  } = useEditorContext();
+
+  const handleSave = useCallback(
+    (result: RecorderSaveResult) => {
+      bumpMediaRevision();
+
+      if (result.source === 'mic') {
+        // Narration — annotate the nearest heading (drives the
+        // slideshow narration pipeline at `core/src/doc/audioMapping.ts`)
+        // *and* insert an inline `<audio controls>` so the user can
+        // audition the recording inside the editor. The two roles are
+        // orthogonal: the annotation is metadata for playback timing,
+        // the HTML tag is an in-editor preview control.
+        if (activeView === 'raw' && monacoEditor) {
+          annotateMonacoHeading(monacoEditor, result.filename);
+        }
+        const audioTag = `<audio src="${result.relativePath}" controls></audio>`;
+        if (activeView === 'wysiwyg' && tiptapEditor) {
+          tiptapEditor
+            .chain()
+            .focus()
+            .insertContent({
+              type: 'audio',
+              attrs: { src: result.relativePath, controls: true },
+            })
+            .run();
+          return;
+        }
+        if (activeView === 'raw' && monacoEditor) {
+          // The annotation went onto the heading line; drop the player
+          // on a fresh line at the cursor.
+          insertAtCursor(`\n\n${audioTag}\n`);
+          return;
+        }
+        setMarkdownSource(markdownSource ? `${markdownSource}\n\n${audioTag}` : audioTag);
+        return;
+      }
+
+      // Camera / screen / screen+mic — inline video player. We pin
+      // width=480 so the editor preview doesn't blow up to natural
+      // resolution on big monitors; the height is intrinsic, so the
+      // aspect ratio is preserved regardless of source dimensions.
+      const videoTag = `<video src="${result.relativePath}" controls width="480"></video>`;
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        tiptapEditor
+          .chain()
+          .focus()
+          .insertContent({
+            type: 'video',
+            attrs: { src: result.relativePath, controls: true, width: 480 },
+          })
+          .run();
+        return;
+      }
+      if (activeView === 'raw' && monacoEditor) {
+        insertAtCursor(videoTag);
+        return;
+      }
+      setMarkdownSource(markdownSource ? `${markdownSource}\n\n${videoTag}` : videoTag);
+    },
+    [
+      activeView,
+      monacoEditor,
+      tiptapEditor,
+      insertAtCursor,
+      bumpMediaRevision,
+      markdownSource,
+      setMarkdownSource,
+    ],
+  );
+
+  if (!mediaProvider) return null;
+
+  return (
+    <RecorderPanel
+      mediaProvider={mediaProvider}
+      container={workspaceContainer}
+      onSave={handleSave}
+      className="squisq-toolbar-button"
+    />
+  );
+}

package/src/TemplateAnnotation.ts

@@ -14,6 +14,7 @@
  */
 
 import Heading from '@tiptap/extension-heading';
+import { templateLabel } from './TemplatePicker';
 
 /**
  * HeadingWithTemplate — drop-in replacement for Tiptap's Heading that
@@ -47,11 +48,17 @@ export const HeadingWithTemplate = Heading.extend({
     const tag = `h${level}`;
     const templateName = HTMLAttributes['data-template'];
 
+    // Render heading with a trailing badge span. The badge has no text
+    // content — its label is painted via CSS `content: attr(data-template-label)`
+    // so the template name never becomes part of the serialized heading
+    // text (which would leak into markdown on round-trip).
+    //
+    // When no template is set we still render a subtle "empty" badge so
+    // authors have a visible affordance for opening the template picker
+    // straight from the heading (matches the clicky chip shown for
+    // templated headings). The empty variant has no `data-template`
+    // attribute, so the bridge treats the heading as plain on save.
     if (templateName) {
-      // Render heading with a trailing badge span. The badge has no text
-      // content — its label is painted via CSS `content: attr(data-template)`
-      // so the template name never becomes part of the serialized heading
-      // text (which would leak into markdown on round-trip).
       return [
         tag,
         HTMLAttributes,
@@ -61,13 +68,32 @@ export const HeadingWithTemplate = Heading.extend({
           {
             class: 'squisq-template-badge',
             contenteditable: 'false',
+            role: 'button',
+            tabindex: '0',
+            'aria-haspopup': 'listbox',
+            title: 'Change block template',
             'data-template': templateName,
+            'data-template-label': templateLabel(templateName),
           },
         ],
       ];
     }
 
-    // No template — render as normal heading
-    return [tag, HTMLAttributes, 0];
+    return [
+      tag,
+      HTMLAttributes,
+      ['span', { class: 'squisq-heading-content' }, 0],
+      [
+        'span',
+        {
+          class: 'squisq-template-badge squisq-template-badge--empty',
+          contenteditable: 'false',
+          role: 'button',
+          tabindex: '0',
+          'aria-haspopup': 'listbox',
+          title: 'Choose block template',
+        },
+      ],
+    ];
   },
 });