@bendyline/squisq-editor-react 1.2.2 → 1.4.0

package/src/MentionExtension.tsx

@@ -0,0 +1,258 @@
+/**
+ * MentionExtension
+ *
+ * Tiptap mention configuration paired with a small absolutely-positioned
+ * suggestion popover. Shares a caller-supplied async provider (see
+ * `MentionProvider` in EditorContext) with the Monaco `@` completion
+ * provider in `RawEditor`, so both editing modes surface the same roster.
+ *
+ * The mention chip renders as `<span data-mention data-kind data-id
+ * data-label class="mention">@Label</span>`, matching the wire format that
+ * `tiptapBridge` emits when converting markdown → Tiptap HTML. On serialize
+ * back to markdown, the bridge emits `@[Label](kind:id)`.
+ */
+
+import Mention from '@tiptap/extension-mention';
+import { PluginKey } from '@tiptap/pm/state';
+import type { Editor, Range } from '@tiptap/core';
+import type { MentionCandidate, MentionProvider } from './EditorContext';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SuggestionProps = any;
+
+/**
+ * Fallback namespace for defensive code paths — used when a mention node
+ * somehow lacks a `kind` attribute (e.g. legacy HTML parsed without one).
+ * Inserts from the suggestion popover always carry the candidate's own
+ * `scheme`, so this only surfaces for malformed/legacy content.
+ */
+const FALLBACK_KIND = 'mention';
+
+type SuggestionState = {
+  items: MentionCandidate[];
+  selected: number;
+};
+
+/**
+ * Build the Tiptap mention extension for an editor. The returned extension
+ * captures a reference to `getProvider` at configure-time and calls it on
+ * every keystroke — keep the reference stable so we don't recreate the
+ * editor just to change who answers the `@` query.
+ */
+export function buildMentionExtension(getProvider: () => MentionProvider | null) {
+  return Mention.configure({
+    HTMLAttributes: {
+      class: 'mention',
+      'data-mention': 'true',
+    },
+    renderHTML({ options, node }) {
+      const label =
+        (node.attrs.label as string | undefined) ?? (node.attrs.id as string | undefined) ?? '';
+      const id = (node.attrs.id as string | undefined) ?? '';
+      const kind = (node.attrs.kind as string | undefined) ?? FALLBACK_KIND;
+      return [
+        'span',
+        {
+          ...options.HTMLAttributes,
+          'data-kind': kind,
+          'data-id': id,
+          'data-label': label,
+        },
+        `@${label}`,
+      ];
+    },
+    renderText({ node }) {
+      const label =
+        (node.attrs.label as string | undefined) ?? (node.attrs.id as string | undefined) ?? '';
+      const id = (node.attrs.id as string | undefined) ?? '';
+      const kind = (node.attrs.kind as string | undefined) ?? FALLBACK_KIND;
+      return `@[${label}](${kind}:${id})`;
+    },
+  }).extend({
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (el) => el.getAttribute('data-id'),
+          renderHTML: (attrs) => (attrs.id ? { 'data-id': attrs.id } : {}),
+        },
+        label: {
+          default: null,
+          parseHTML: (el) => el.getAttribute('data-label'),
+          renderHTML: (attrs) => (attrs.label ? { 'data-label': attrs.label } : {}),
+        },
+        kind: {
+          default: FALLBACK_KIND,
+          parseHTML: (el) => el.getAttribute('data-kind') ?? FALLBACK_KIND,
+          renderHTML: (attrs) => ({ 'data-kind': attrs.kind ?? FALLBACK_KIND }),
+        },
+      };
+    },
+    addOptions() {
+      return {
+        ...(this.parent?.() ?? {}),
+        suggestion: {
+          char: '@',
+          // Custom plugin key so the mention suggestion doesn't collide
+          // with any future `:` or `/` popovers.
+          pluginKey: new PluginKey('mentionSuggestion'),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+            const id = (props?.id as string | null) ?? '';
+            const label = (props?.label as string | null) ?? id;
+            const kind = (props?.kind as string | undefined) ?? FALLBACK_KIND;
+            editor
+              .chain()
+              .focus()
+              .insertContentAt(range, [
+                {
+                  type: 'mention',
+                  attrs: { id, label, kind },
+                },
+                { type: 'text', text: ' ' },
+              ])
+              .run();
+          },
+          items: async ({ query }: { query: string }) => {
+            const provider = getProvider();
+            if (!provider) return [];
+            try {
+              return await provider(query);
+            } catch {
+              return [];
+            }
+          },
+          render: renderSuggestionFactory(),
+        },
+      };
+    },
+  });
+}
+
+/**
+ * Lightweight suggestion popover. Uses a plain absolutely-positioned div
+ * anchored to the caret rect — no tippy.js needed. Keyboard nav handled via
+ * the `onKeyDown` hook Tiptap wires up.
+ */
+function renderSuggestionFactory() {
+  return () => {
+    let container: HTMLDivElement | null = null;
+    let state: SuggestionState = { items: [], selected: 0 };
+    let currentProps: SuggestionProps | null = null;
+
+    const update = () => {
+      if (!container || !currentProps) return;
+      container.innerHTML = '';
+      if (state.items.length === 0) {
+        container.style.display = 'none';
+        return;
+      }
+      container.style.display = 'block';
+
+      for (let i = 0; i < state.items.length; i++) {
+        const item = state.items[i];
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'squisq-mention-item' + (i === state.selected ? ' is-selected' : '');
+        btn.dataset.index = String(i);
+        btn.innerHTML = '';
+        const label = document.createElement('span');
+        label.className = 'squisq-mention-label';
+        label.textContent = item.label;
+        btn.appendChild(label);
+        if (item.description) {
+          const desc = document.createElement('span');
+          desc.className = 'squisq-mention-desc';
+          desc.textContent = item.description;
+          btn.appendChild(desc);
+        }
+        btn.addEventListener('mousedown', (ev) => {
+          ev.preventDefault();
+          selectAt(i);
+        });
+        container.appendChild(btn);
+      }
+
+      positionTo(container, currentProps.clientRect);
+    };
+
+    const selectAt = (index: number) => {
+      const item = state.items[index];
+      if (!item || !currentProps) return;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const command = (currentProps as any).command;
+      if (typeof command === 'function') {
+        command({ id: item.id, label: item.label, kind: item.scheme });
+      }
+    };
+
+    return {
+      onStart: (props: SuggestionProps) => {
+        currentProps = props;
+        state = { items: props.items ?? [], selected: 0 };
+        if (!container) {
+          container = document.createElement('div');
+          container.className = 'squisq-mention-popover';
+          container.style.position = 'absolute';
+          container.style.zIndex = '10000';
+          document.body.appendChild(container);
+        }
+        update();
+      },
+      onUpdate: (props: SuggestionProps) => {
+        currentProps = props;
+        if (Array.isArray(props.items)) {
+          state = { items: props.items, selected: 0 };
+        }
+        update();
+      },
+      onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+        if (!state.items.length) return false;
+        if (event.key === 'ArrowDown') {
+          state.selected = (state.selected + 1) % state.items.length;
+          update();
+          return true;
+        }
+        if (event.key === 'ArrowUp') {
+          state.selected = (state.selected - 1 + state.items.length) % state.items.length;
+          update();
+          return true;
+        }
+        if (event.key === 'Enter' || event.key === 'Tab') {
+          selectAt(state.selected);
+          return true;
+        }
+        if (event.key === 'Escape') {
+          state = { items: [], selected: 0 };
+          update();
+          return true;
+        }
+        return false;
+      },
+      onExit: () => {
+        if (container?.parentNode) container.parentNode.removeChild(container);
+        container = null;
+        currentProps = null;
+      },
+    };
+  };
+}
+
+function positionTo(
+  el: HTMLDivElement,
+  clientRect: (() => DOMRect | null) | null | undefined,
+): void {
+  const rect = clientRect?.();
+  if (!rect) return;
+  // Anchor just below the caret; fall back to above when there's no room.
+  const viewportH = window.innerHeight;
+  const below = rect.bottom + 4;
+  const estH = Math.min(240, el.offsetHeight || 200);
+  const fitsBelow = below + estH < viewportH;
+  el.style.left = `${rect.left + window.scrollX}px`;
+  if (fitsBelow) {
+    el.style.top = `${below + window.scrollY}px`;
+  } else {
+    el.style.top = `${rect.top + window.scrollY - estH - 4}px`;
+  }
+}

package/src/RawEditor.tsx

@@ -11,6 +11,7 @@ import Editor, { loader, type OnMount, type OnChange } from '@monaco-editor/reac
 import * as monaco from 'monaco-editor';
 import { useEditorContext } from './EditorContext';
 import { getAvailableTemplates } from '@bendyline/squisq/doc';
+import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 
 // Use locally installed monaco-editor instead of CDN.
 //
@@ -35,6 +36,13 @@ export interface RawEditorProps {
   wordWrap?: 'on' | 'off' | 'wordWrapColumn' | 'bounded';
   /** Additional class name for the container */
   className?: string;
+  /**
+   * Chat-composer mode: Enter fires this callback (submit) and Cmd/Ctrl+Enter
+   * inserts a newline. When undefined, behaves normally.
+   */
+  submitOnEnter?: () => void;
+  /** Make Monaco read-only (no edits, no cursor blink). */
+  readOnly?: boolean;
 }
 
 /**
@@ -47,11 +55,28 @@ export function RawEditor({
   fontSize = 14,
   wordWrap = 'on',
   className,
+  submitOnEnter,
+  readOnly = false,
 }: RawEditorProps) {
-  const { markdownSource, setMarkdownSource, setMonacoEditor } = useEditorContext();
+  const { markdownSource, setMarkdownSource, setMonacoEditor, language, mentionProvider } =
+    useEditorContext();
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const isExternalUpdate = useRef(false);
   const completionDisposable = useRef<monaco.IDisposable | null>(null);
+  const mentionCompletionDisposable = useRef<monaco.IDisposable | 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.
+  const submitOnEnterRef = useRef(submitOnEnter);
+  useEffect(() => {
+    submitOnEnterRef.current = submitOnEnter;
+  }, [submitOnEnter]);
+  // Ref so the completion provider — registered once at mount — always
+  // sees the latest mentionProvider without needing to unregister.
+  const mentionProviderRef = useRef(mentionProvider);
+  useEffect(() => {
+    mentionProviderRef.current = mentionProvider;
+  }, [mentionProvider]);
 
   const handleMount: OnMount = useCallback(
     (editor, monaco) => {
@@ -61,44 +86,167 @@ export function RawEditor({
 
       // Dispose any previous completion provider (from a prior mount)
       completionDisposable.current?.dispose();
+      completionDisposable.current = null;
+      mentionCompletionDisposable.current?.dispose();
+      mentionCompletionDisposable.current = null;
+
+      // Register the `{[template]}` completion provider only for markdown
+      // files — it's meaningless for TypeScript, JSON, Python, etc.
+      if (language === 'markdown') {
+        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 };
+          },
+        });
+
+        // `@mention` completion — queries the shared MentionProvider. Keep
+        // this in its own registration so we can dispose it independently
+        // of the template provider, and so the trigger character is just
+        // `@` (not `[`).
+        mentionCompletionDisposable.current = monaco.languages.registerCompletionItemProvider(
+          'markdown',
+          {
+            triggerCharacters: ['@'],
+            async provideCompletionItems(model, position) {
+              const provider = mentionProviderRef.current;
+              if (!provider) return { suggestions: [] };
+              const lineContent = model.getLineContent(position.lineNumber);
+              const textBeforeCursor = lineContent.substring(0, position.column - 1);
+              const atIdx = textBeforeCursor.lastIndexOf('@');
+              if (atIdx === -1) return { suggestions: [] };
+              // `@` must be at line start or preceded by whitespace/punct —
+              // skip e.g. email addresses like `foo@bar`.
+              if (atIdx > 0) {
+                const prevChar = textBeforeCursor[atIdx - 1];
+                if (!/[\s\p{P}]/u.test(prevChar)) return { suggestions: [] };
+              }
+              const query = textBeforeCursor.slice(atIdx + 1);
+              // Only fire for short queries — once the user has typed
+              // a full word, the popover gets noisy.
+              if (query.length > 40) return { suggestions: [] };
+              if (/\s/.test(query)) return { suggestions: [] };
 
-      // 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 };
-        },
+              let candidates;
+              try {
+                candidates = await provider(query);
+              } catch {
+                return { suggestions: [] };
+              }
+
+              const range = new monaco.Range(
+                position.lineNumber,
+                atIdx + 1,
+                position.lineNumber,
+                position.column,
+              );
+
+              return {
+                suggestions: candidates.map((c) => ({
+                  label: `@${c.label}`,
+                  kind: monaco.languages.CompletionItemKind.User,
+                  insertText: `@[${c.label}](${c.scheme}:${c.id}) `,
+                  range,
+                  ...(c.description ? { detail: c.description } : {}),
+                  sortText: c.label,
+                })),
+              };
+            },
+          },
+        );
+      }
+
+      // Chat-composer mode: intercept Enter before Monaco inserts a newline.
+      // Cmd/Ctrl+Enter falls through so the native newline still works.
+      keyDisposable.current?.dispose();
+      keyDisposable.current = editor.onKeyDown((e) => {
+        if (e.keyCode !== monaco.KeyCode.Enter) return;
+        if (!submitOnEnterRef.current) return;
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        e.preventDefault();
+        e.stopPropagation();
+        submitOnEnterRef.current();
       });
+
+      // Attach native drop listeners for in-app MediaBin drags. Monaco's own
+      // drop handling doesn't know about our custom MIME type, so we insert
+      // markdown image syntax explicitly in the capture phase.
+      dropCleanupRef.current?.();
+      const domNode = editor.getDomNode();
+      if (domNode) {
+        const onDragOver = (e: DragEvent) => {
+          if (e.dataTransfer?.types.includes(SQUISQ_MEDIA_MIME)) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }
+        };
+        const onDrop = (e: DragEvent) => {
+          const dt = e.dataTransfer;
+          if (!dt) return;
+          const raw = dt.getData(SQUISQ_MEDIA_MIME);
+          if (!raw) return;
+          const payload = parseSquisqMediaPayload(raw);
+          if (!payload || !payload.mimeType.startsWith('image/')) return;
+
+          e.preventDefault();
+          e.stopPropagation();
+
+          const target = editor.getTargetAtClientPoint(e.clientX, e.clientY);
+          const position = target?.position ?? editor.getPosition();
+          if (!position) return;
+
+          const markdown = `![${payload.alt}](${payload.name})`;
+          editor.executeEdits('squisq-media-drop', [
+            {
+              range: new monaco.Range(
+                position.lineNumber,
+                position.column,
+                position.lineNumber,
+                position.column,
+              ),
+              text: markdown,
+              forceMoveMarkers: true,
+            },
+          ]);
+          editor.focus();
+        };
+        domNode.addEventListener('dragover', onDragOver, true);
+        domNode.addEventListener('drop', onDrop, true);
+        dropCleanupRef.current = () => {
+          domNode.removeEventListener('dragover', onDragOver, true);
+          domNode.removeEventListener('drop', onDrop, true);
+        };
+      }
     },
-    [setMonacoEditor],
+    [setMonacoEditor, language],
   );
 
   // Unregister on unmount
@@ -107,6 +255,12 @@ export function RawEditor({
       setMonacoEditor(null);
       completionDisposable.current?.dispose();
       completionDisposable.current = null;
+      mentionCompletionDisposable.current?.dispose();
+      mentionCompletionDisposable.current = null;
+      dropCleanupRef.current?.();
+      dropCleanupRef.current = null;
+      keyDisposable.current?.dispose();
+      keyDisposable.current = null;
     };
   }, [setMonacoEditor]);
 
@@ -136,7 +290,7 @@ export function RawEditor({
   return (
     <div className={className} style={{ width: '100%', height: '100%' }} data-testid="raw-editor">
       <Editor
-        defaultLanguage="markdown"
+        defaultLanguage={language}
         value={markdownSource}
         theme={theme}
         onMount={handleMount}
@@ -153,6 +307,8 @@ export function RawEditor({
           bracketPairColorization: { enabled: true },
           guides: { indentation: true },
           padding: { top: 12, bottom: 12 },
+          readOnly,
+          domReadOnly: readOnly,
         }}
       />
     </div>

package/src/TemplateAnnotation.ts

@@ -48,7 +48,10 @@ export const HeadingWithTemplate = Heading.extend({
     const templateName = HTMLAttributes['data-template'];
 
     if (templateName) {
-      // Render heading with a trailing badge span
+      // 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,
@@ -60,7 +63,6 @@ export const HeadingWithTemplate = Heading.extend({
             contenteditable: 'false',
             'data-template': templateName,
           },
-          templateName,
         ],
       ];
     }