@bendyline/squisq-editor-react 1.2.2 → 1.4.0

package/src/__tests__/tiptapBridge.test.ts

@@ -49,6 +49,31 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('Example');
   });
 
+  it('converts mentions to chip spans', () => {
+    const html = markdownToTiptap('Hey @[Leo](gezel:leo), take a look.');
+    expect(html).toContain('data-mention="true"');
+    expect(html).toContain('data-kind="gezel"');
+    expect(html).toContain('data-id="leo"');
+    expect(html).toContain('data-label="Leo"');
+    // "@Leo" appears inside the chip — NOT as a broken link
+    expect(html).not.toContain('href="gezel:leo"');
+  });
+
+  it('tolerates the backslash-escaped colon remark emits', () => {
+    // remark-stringify sometimes emits `gezel\:leo` to disambiguate
+    // from autolink syntax. The bridge should still recognize it.
+    const html = markdownToTiptap('Hey @[Leo](gezel\\:leo).');
+    expect(html).toContain('data-kind="gezel"');
+    expect(html).toContain('data-id="leo"');
+  });
+
+  it('round-trips mentions back to markdown', () => {
+    const md = 'Hey @[Leo](gezel:leo), ping @[Tess](gezel:tess) too.';
+    const html = markdownToTiptap(md);
+    const back = tiptapToMarkdown(html);
+    expect(back.trim()).toBe(md);
+  });
+
   it('converts images', () => {
     const html = markdownToTiptap('![Logo](logo.png)');
     expect(html).toContain('alt="Logo"');
@@ -165,6 +190,20 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('`foo`');
   });
 
+  it('converts images regardless of attribute order', () => {
+    // TipTap's default Image extension renders `src` before `alt`. The
+    // tiptapToMarkdown parser previously required `alt` first and
+    // silently dropped every src-first image, so a pasted/toolbar
+    // image attached in the WYSIWYG editor never made it back into
+    // the outgoing markdown.
+    const altFirst = tiptapToMarkdown('<p><img alt="Logo" src="logo.png"></p>');
+    expect(altFirst).toContain('![Logo](logo.png)');
+    const srcFirst = tiptapToMarkdown('<p><img src="attachments/xyz.png" alt="xyz"></p>');
+    expect(srcFirst).toContain('![xyz](attachments/xyz.png)');
+    const srcOnly = tiptapToMarkdown('<p><img src="attachments/nm.png"></p>');
+    expect(srcOnly).toContain('![](attachments/nm.png)');
+  });
+
   it('converts links', () => {
     const md = tiptapToMarkdown('<p><a href="https://example.com">Example</a></p>');
     expect(md).toContain('[Example](https://example.com)');
@@ -230,6 +269,25 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('&');
     expect(md).toContain('"test"');
   });
+
+  it('converts <br> to a hard line break (two trailing spaces)', () => {
+    const md = tiptapToMarkdown('<p>line one<br>line two</p>');
+    expect(md).toContain('line one  \nline two');
+  });
+
+  it('preserves paragraph break inside list items', () => {
+    const md = tiptapToMarkdown(
+      '<ul><li><p><strong>Title</strong></p><p>Description text</p></li></ul>',
+    );
+    expect(md).toContain('- **Title**');
+    expect(md).toContain('  Description text');
+  });
+
+  it('preserves <br> hard break inside list items', () => {
+    const md = tiptapToMarkdown('<ul><li><p>First line<br>Second line</p></li></ul>');
+    expect(md).toContain('- First line  ');
+    expect(md).toContain('  Second line');
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/__tests__/tiptapImageRoundTrip.test.ts

@@ -0,0 +1,73 @@
+import { Editor } from '@tiptap/core';
+import Image from '@tiptap/extension-image';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it } from 'vitest';
+import { tiptapToMarkdown } from '../tiptapBridge';
+
+/**
+ * The actual end-to-end question the chat composer hinges on:
+ *
+ *   when a pasted / uploaded image is inserted into the tiptap
+ *   editor via `setImage({src, alt})`, does the markdown we serialize
+ *   out (via `getHTML()` + `tiptapToMarkdown`) contain
+ *   `![alt](src)` — the shape the gezel service's image-attachment
+ *   extractor expects?
+ *
+ * Unit tests on the regex alone have been green the whole time, and
+ * yet the production app kept sending image-less messages. This test
+ * exercises the real tiptap editor in jsdom so the HTML tiptap
+ * actually emits is what we check, not a hand-synthesized string.
+ */
+
+function makeEditor() {
+  return new Editor({
+    // Bare-minimum schema: doc → paragraph (text) + block image. No
+    // React node-view — we only care about the serialized HTML.
+    extensions: [Document, Paragraph, Text, Image.configure({ inline: false })],
+    content: '<p></p>',
+  });
+}
+
+describe('tiptap Image node → markdown round-trip', () => {
+  it('produces `![alt](src)` for an image inserted via setImage', () => {
+    const editor = makeEditor();
+    editor.chain().focus().setImage({ src: 'attachments/xyz.png', alt: 'my screenshot' }).run();
+    const html = editor.getHTML();
+    const md = tiptapToMarkdown(html);
+    editor.destroy();
+    expect(html).toMatch(/<img\b/);
+    expect(html).toContain('src="attachments/xyz.png"');
+    expect(md).toContain('![my screenshot](attachments/xyz.png)');
+  });
+
+  it('produces `![](src)` when alt is empty (most common pasted-image shape)', () => {
+    const editor = makeEditor();
+    editor.chain().focus().setImage({ src: 'attachments/pasted.png', alt: '' }).run();
+    const md = tiptapToMarkdown(editor.getHTML());
+    editor.destroy();
+    expect(md).toContain('![](attachments/pasted.png)');
+  });
+
+  it('produces `![](src)` when alt is omitted entirely', () => {
+    const editor = makeEditor();
+    editor.chain().focus().setImage({ src: 'attachments/no-alt.png' }).run();
+    const md = tiptapToMarkdown(editor.getHTML());
+    editor.destroy();
+    expect(md).toContain('![](attachments/no-alt.png)');
+  });
+
+  it('coexists with paragraph text', () => {
+    // Seed the editor with a paragraph, then insert the image after
+    // it — mirrors the common case where the user types "here:" and
+    // then pastes an image.
+    const editor = makeEditor();
+    editor.chain().focus().insertContent('here you go').run();
+    editor.chain().focus().setImage({ src: 'attachments/foo.png', alt: 'foo' }).run();
+    const md = tiptapToMarkdown(editor.getHTML());
+    editor.destroy();
+    expect(md).toContain('![foo](attachments/foo.png)');
+    expect(md).toContain('here you go');
+  });
+});

package/src/detectMarkdown.ts

@@ -0,0 +1,62 @@
+/**
+ * Markdown detection — heuristic for spotting markdown source in pasted text.
+ *
+ * Used by the WYSIWYG editor's paste handler to decide whether plain-text
+ * paste content should be parsed as markdown rather than inserted literally.
+ *
+ * The heuristic prefers false negatives (treating markdown as plain text)
+ * over false positives (mangling plain text that happens to contain a few
+ * special characters).
+ */
+
+/** Block-level patterns that strongly indicate markdown. Any one is enough. */
+const STRONG_BLOCK_PATTERNS: RegExp[] = [
+  /^#{1,6}\s+\S/, // # Heading
+  /^[-*+]\s+\S/, // - bullet
+  /^\d+\.\s+\S/, // 1. ordered
+  /^>\s+\S/, // > blockquote
+  /^```/, // ``` code fence
+  /^\|.+\|\s*$/, // | table | row |
+  /^[-*+]\s+\[[ xX]\]\s+/, // - [ ] task
+];
+
+/** Inline patterns that are weaker indicators on their own. */
+const INLINE_PATTERNS: RegExp[] = [
+  /\*\*[^*\n]+\*\*/, // **bold**
+  /__[^_\n]+__/, // __bold__
+  /`[^`\n]+`/, // `code`
+  /\[[^\]\n]+\]\([^)\n]+\)/, // [link](url)
+  /!\[[^\]\n]*\]\([^)\n]+\)/, // ![image](url)
+  /~~[^~\n]+~~/, // ~~strike~~
+];
+
+/**
+ * Returns true if the text looks like markdown source.
+ *
+ * Detection rules:
+ *  - Any line matching a strong block pattern → yes
+ *  - Two or more inline pattern matches anywhere in the text → yes
+ *  - Otherwise → no
+ */
+export function looksLikeMarkdown(text: string): boolean {
+  if (!text || text.length < 2) return false;
+
+  const lines = text.split(/\r?\n/);
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    for (const re of STRONG_BLOCK_PATTERNS) {
+      if (re.test(trimmed)) return true;
+    }
+  }
+
+  let inlineHits = 0;
+  for (const re of INLINE_PATTERNS) {
+    if (re.test(text)) {
+      inlineHits++;
+      if (inlineHits >= 2) return true;
+    }
+  }
+
+  return false;
+}

package/src/fileKind.ts

@@ -0,0 +1,134 @@
+/**
+ * fileKind
+ *
+ * Maps a file name (or bare extension) to a Monaco language ID and decides
+ * whether the editor shell should operate in markdown mode (full WYSIWYG +
+ * Preview experience) or code mode (Monaco-only view with formatting
+ * buttons hidden).
+ *
+ * The mapping favors common web / systems languages that Monaco ships with
+ * out of the box. Unknown extensions fall back to markdown mode so the
+ * existing UX remains the default for anything we don't recognize.
+ */
+
+export interface FileKind {
+  /** 'markdown' keeps the full editor (WYSIWYG + Preview tabs); 'code' is Monaco-only. */
+  mode: 'markdown' | 'code';
+  /** Monaco language ID — passed to `<Editor defaultLanguage={...} />`. */
+  language: string;
+}
+
+/**
+ * Extension → Monaco language ID. Keys are lowercase, no leading dot.
+ * Extend as needed; unknown extensions fall back to markdown mode.
+ */
+const EXT_TO_LANGUAGE: Record<string, string> = {
+  md: 'markdown',
+  markdown: 'markdown',
+  mdown: 'markdown',
+  txt: 'plaintext',
+  ts: 'typescript',
+  tsx: 'typescript',
+  js: 'javascript',
+  jsx: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  json: 'json',
+  jsonc: 'json',
+  html: 'html',
+  htm: 'html',
+  css: 'css',
+  scss: 'scss',
+  less: 'less',
+  py: 'python',
+  go: 'go',
+  rs: 'rust',
+  rb: 'ruby',
+  java: 'java',
+  c: 'c',
+  h: 'c',
+  cpp: 'cpp',
+  hpp: 'cpp',
+  cc: 'cpp',
+  cs: 'csharp',
+  php: 'php',
+  sh: 'shell',
+  bash: 'shell',
+  zsh: 'shell',
+  yml: 'yaml',
+  yaml: 'yaml',
+  toml: 'ini',
+  ini: 'ini',
+  xml: 'xml',
+  svg: 'xml',
+  sql: 'sql',
+  lua: 'lua',
+  swift: 'swift',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  dockerfile: 'dockerfile',
+};
+
+/**
+ * Languages that keep the full markdown shell (WYSIWYG + Preview). Anything
+ * outside this set is treated as code.
+ */
+const MARKDOWN_MODE_LANGUAGES = new Set(['markdown', 'plaintext']);
+
+/**
+ * Pull the lowercase extension (no leading dot) from a file name or bare
+ * extension string. Returns null when none is discernible.
+ *
+ * Examples:
+ *   "foo.ts"       → "ts"
+ *   "foo.tar.gz"   → "gz"
+ *   ".ts"          → "ts"
+ *   "ts"           → "ts"
+ *   "Dockerfile"   → "dockerfile"   (full name match for extensionless files)
+ *   ""             → null
+ */
+function extractExtension(fileName: string): string | null {
+  const trimmed = fileName.trim();
+  if (!trimmed) return null;
+
+  // Strip any leading path — take only the basename.
+  const base = trimmed.replace(/^.*[/\\]/, '');
+  if (!base) return null;
+
+  const dotIdx = base.lastIndexOf('.');
+  if (dotIdx === -1) {
+    // No dot — could still be a recognized bare name (Dockerfile) or a bare
+    // extension passed by a caller like "ts". Lower-case and return.
+    return base.toLowerCase();
+  }
+  if (dotIdx === base.length - 1) return null; // Trailing dot, no extension.
+  return base.slice(dotIdx + 1).toLowerCase();
+}
+
+/**
+ * Detect a Monaco language ID from a file name. Returns null when the
+ * extension (or bare name) is not in the mapping.
+ */
+export function detectLanguageFromFileName(fileName: string): string | null {
+  const ext = extractExtension(fileName);
+  if (!ext) return null;
+  return EXT_TO_LANGUAGE[ext] ?? null;
+}
+
+/**
+ * Resolve the editor mode + Monaco language for a given file. The explicit
+ * `language` argument, if provided, wins over any detection from
+ * `fileName`. When nothing matches, falls back to markdown mode.
+ */
+export function resolveFileKind(fileName?: string, language?: string): FileKind {
+  const resolvedLanguage = language ?? (fileName ? detectLanguageFromFileName(fileName) : null);
+
+  if (!resolvedLanguage) {
+    return { mode: 'markdown', language: 'markdown' };
+  }
+
+  const mode: FileKind['mode'] = MARKDOWN_MODE_LANGUAGES.has(resolvedLanguage)
+    ? 'markdown'
+    : 'code';
+  return { mode, language: resolvedLanguage };
+}

package/src/hooks/useFileDrop.ts

@@ -137,17 +137,21 @@ export function useFileDrop({ onDrop, enabled = true }: UseFileDropOptions): Use
   const handleDragEnter = useCallback(
     (e: React.DragEvent) => {
       if (!enabled) return;
+
+      // Only react to OS file drags. In-app drags (e.g. dragging a thumbnail
+      // out of the MediaBin) don't carry file-kind items and must pass
+      // through to the editors without showing the drop overlay.
+      const classification = e.dataTransfer.items
+        ? classifyDataTransferItems(e.dataTransfer.items)
+        : 'mixed';
+      if (!classification) return;
+
       e.preventDefault();
       dragCounterRef.current++;
 
       if (dragCounterRef.current === 1) {
         setIsDragging(true);
-        if (e.dataTransfer.items) {
-          setDragContentType(classifyDataTransferItems(e.dataTransfer.items));
-        } else {
-          // Fallback: can't classify, show all zones
-          setDragContentType('mixed');
-        }
+        setDragContentType(classification);
       }
     },
     [enabled],

package/src/index.ts

@@ -25,12 +25,21 @@ export type { EditorShellProps, EditorTheme } from './EditorShell.js';
 export { EditorProvider, useEditorContext } from './EditorContext.js';
 export type {
   EditorView,
+  EditorMode,
   EditorState,
   EditorActions,
   EditorContextValue,
   EditorProviderProps,
+  ImageDisplayMode,
+  MentionCandidate,
+  MentionProvider,
 } from './EditorContext.js';
 
+// File-kind detection — useful for hosts that want to pre-decide chrome
+// around the editor based on whether a file is markdown or code.
+export { resolveFileKind, detectLanguageFromFileName } from './fileKind.js';
+export type { FileKind } from './fileKind.js';
+
 // Individual editors (for custom layouts)
 export { RawEditor } from './RawEditor.js';
 export type { RawEditorProps } from './RawEditor.js';
@@ -60,6 +69,8 @@ export type { MediaBinProps } from './MediaBin.js';
 export { StatusBar } from './StatusBar.js';
 export type { StatusBarProps } from './StatusBar.js';
 
+export { TooltipLayer } from './Tooltip.js';
+
 // Drag-and-drop
 export { DropZoneOverlay } from './DropZoneOverlay.js';
 export type { DropZoneOverlayProps } from './DropZoneOverlay.js';

package/src/mediaDragMime.ts

@@ -0,0 +1,32 @@
+/**
+ * Shared MIME type used to signal an in-app drag from the MediaBin to either
+ * the Raw or WYSIWYG editor. Carries a JSON payload of the form
+ * `{ name, mimeType, alt }` so the receiving editor can insert a reference
+ * to an existing media entry without re-uploading it.
+ */
+export const SQUISQ_MEDIA_MIME = 'application/x-squisq-media';
+
+export interface SquisqMediaDragPayload {
+  /** Relative path / filename as stored in the MediaProvider. */
+  name: string;
+  /** MIME type of the entry. */
+  mimeType: string;
+  /** Default alt text derived from the filename. */
+  alt: string;
+}
+
+export function parseSquisqMediaPayload(raw: string): SquisqMediaDragPayload | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<SquisqMediaDragPayload>;
+    if (
+      typeof parsed.name === 'string' &&
+      typeof parsed.mimeType === 'string' &&
+      typeof parsed.alt === 'string'
+    ) {
+      return parsed as SquisqMediaDragPayload;
+    }
+  } catch {
+    // fall through
+  }
+  return null;
+}