@bendyline/squisq-editor-react 1.2.2 → 1.3.0

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;
+}

package/src/styles/editor.css

@@ -5,8 +5,20 @@
 /* ─── Shell ──────────────────────────────────────────── */
 
 .squisq-editor-shell {
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+  /* UX font applies to editor *chrome* — toolbar, tabs, buttons, status
+     bar. The actual editing surfaces (Tiptap, Monaco) keep their own
+     fonts. `--squisq-ux-font` is set when a consumer passes the `uxFont`
+     prop on EditorShell; unset, we fall back to the system stack. */
+  font-family: var(
+    --squisq-ux-font,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Noto Sans',
+    Helvetica,
+    Arial,
+    sans-serif
+  );
   color: #1f2937;
   background: #fff;
 }
@@ -27,6 +39,25 @@
 .squisq-view-switcher {
   display: flex;
   gap: 0;
+  container-type: inline-size;
+  container-name: squisq-view-switcher;
+}
+
+.squisq-view-tab-label {
+  display: inline-block;
+}
+
+.squisq-view-tab-label--short {
+  display: none;
+}
+
+@container squisq-view-switcher (max-width: 280px) {
+  .squisq-view-tab:has(.squisq-view-tab-label--short) .squisq-view-tab-label--long {
+    display: none;
+  }
+  .squisq-view-tab-label--short {
+    display: inline-block;
+  }
 }
 
 .squisq-view-tab {
@@ -63,6 +94,8 @@
   padding: 0 12px 0 0;
   gap: 2px;
   background: rgba(0, 0, 0, 0.07);
+  container-type: inline-size;
+  container-name: squisq-toolbar;
 }
 
 /* ─── View Tabs (inside toolbar) ─────────────────────── */
@@ -101,7 +134,15 @@
     border-color 0.15s;
 }
 
-.squisq-toolbar-view-tab::after {
+.squisq-toolbar-view-tab-label {
+  display: inline-block;
+}
+
+.squisq-toolbar-view-tab-label--short {
+  display: none;
+}
+
+.squisq-toolbar-view-tab-label::after {
   content: attr(data-label);
   display: block;
   font-weight: 600;
@@ -110,6 +151,16 @@
   visibility: hidden;
 }
 
+@container squisq-toolbar (max-width: 900px) {
+  .squisq-toolbar-view-tab:has(.squisq-toolbar-view-tab-label--short)
+    .squisq-toolbar-view-tab-label--long {
+    display: none;
+  }
+  .squisq-toolbar-view-tab-label--short {
+    display: inline-block;
+  }
+}
+
 .squisq-toolbar-view-tab:hover {
   color: #111827;
 }
@@ -146,6 +197,7 @@
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
+  white-space: nowrap;
   transition:
     background 0.12s,
     color 0.12s;
@@ -193,18 +245,32 @@
 
 .squisq-toolbar-overflow-menu {
   position: absolute;
-  top: 100%;
   right: 0;
   z-index: 100;
-  min-width: 180px;
+  min-width: 220px;
+  max-width: 280px;
   padding: 4px 0;
-  margin-top: 4px;
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
+/* Downward-opening (default): menu sits below the trigger. */
+.squisq-toolbar-overflow-menu--down {
+  top: 100%;
+  margin-top: 4px;
+}
+
+/* Upward-opening: when the host clips the bottom of the toolbar (e.g. a
+   chat composer near the bottom of the viewport), the menu flips above
+   the trigger so the items stay visible. */
+.squisq-toolbar-overflow-menu--up {
+  bottom: 100%;
+  margin-bottom: 4px;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
+}
+
 .squisq-toolbar-overflow-item {
   display: flex;
   align-items: center;
@@ -255,11 +321,14 @@
 .squisq-toolbar-overflow-template {
   gap: 6px;
   padding: 6px 12px;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 
 .squisq-toolbar-overflow-template select {
   flex: 1;
   min-width: 0;
+  max-width: 100%;
 }
 
 /* ─── Template Picker (toolbar) ──────────────────────── */
@@ -295,6 +364,32 @@
   outline-offset: -1px;
 }
 
+/* ─── Tooltip (portal) ────────────────────────────────── */
+
+.squisq-tooltip {
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #f9fafb;
+  background: #1f2937;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2000;
+  animation: squisq-tooltip-fade 0.1s ease-out;
+}
+
+@keyframes squisq-tooltip-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 /* ─── Template Badge (WYSIWYG heading) ───────────────── */
 
 .squisq-template-badge {
@@ -314,6 +409,10 @@
   line-height: 1.6;
 }
 
+.squisq-template-badge::after {
+  content: attr(data-template);
+}
+
 /* ─── Status Bar ─────────────────────────────────────── */
 
 .squisq-status-bar {
@@ -351,7 +450,7 @@
 /* ─── WYSIWYG Editor ─────────────────────────────────── */
 
 .squisq-wysiwyg-container {
-  background: #eeecea;
+  background: #dcd8d0;
 }
 
 .squisq-wysiwyg-editor {
@@ -361,7 +460,7 @@
   outline: none;
   min-height: 100%;
   background: #fff;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
 }
 
 .squisq-wysiwyg-editor h1 {
@@ -1229,3 +1328,110 @@
     min-height: 120px;
   }
 }
+
+/* ─── Full-width mode (opt-in via <EditorShell fullWidth />) ─────────
+ *
+ * Drops the centered 800px "page" column so the WYSIWYG surface fills
+ * the host container. Used by hosts where the page metaphor doesn't fit
+ * — chat composers, narrow side panels, dialog embeds. */
+.squisq-editor-shell[data-full-width='true'] .squisq-wysiwyg-editor {
+  max-width: none;
+  margin: 0;
+  box-shadow: none;
+}
+
+.squisq-editor-shell[data-full-width='true'] .squisq-wysiwyg-container {
+  background: transparent;
+}
+
+.squisq-editor-shell[data-theme='dark'][data-full-width='true'] .squisq-wysiwyg-container {
+  background: transparent;
+}
+
+/* Thin-margins mode — drops the 16×24px page padding on the editing
+   surface so the composer hugs its container (chat composers etc.). */
+.squisq-editor-shell[data-thin-margins='true'] .squisq-wysiwyg-editor {
+  padding: 6px 10px;
+}
+
+/* ── @-mention chip + suggestion popover ─────────────────────────── */
+
+/* Chip rendered in both WYSIWYG (Tiptap Node) and bridge-HTML surfaces. */
+.squisq-wysiwyg-editor .mention,
+.squisq-wysiwyg-editor span[data-mention] {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 10px;
+  font-weight: 500;
+  background: rgba(88, 101, 242, 0.18);
+  color: #1a2a8a;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor .mention,
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor span[data-mention] {
+  background: rgba(128, 140, 255, 0.22);
+  color: #c8d0ff;
+}
+
+/* Suggestion popover appended to <body> so it escapes overflow clipping. */
+.squisq-mention-popover {
+  min-width: 220px;
+  max-width: 320px;
+  max-height: 240px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 4px;
+  font-family: var(--squisq-ux-font, system-ui, sans-serif);
+  font-size: 13px;
+}
+
+.squisq-mention-popover .squisq-mention-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+}
+
+.squisq-mention-popover .squisq-mention-item.is-selected,
+.squisq-mention-popover .squisq-mention-item:hover {
+  background: rgba(88, 101, 242, 0.12);
+}
+
+.squisq-mention-popover .squisq-mention-label {
+  font-weight: 500;
+}
+
+.squisq-mention-popover .squisq-mention-desc {
+  font-size: 11px;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+@media (prefers-color-scheme: dark) {
+  .squisq-mention-popover {
+    background: #1f2230;
+    border-color: rgba(255, 255, 255, 0.14);
+    color: #e5e7eb;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  }
+  .squisq-mention-popover .squisq-mention-item.is-selected,
+  .squisq-mention-popover .squisq-mention-item:hover {
+    background: rgba(128, 140, 255, 0.18);
+  }
+  .squisq-mention-popover .squisq-mention-desc {
+    color: rgba(255, 255, 255, 0.6);
+  }
+}

package/src/tiptapBridge.ts

@@ -20,6 +20,11 @@ const RE_STRIKETHROUGH = /~~(.+?)~~/g;
 const RE_INLINE_CODE = /`(.+?)`/g;
 const RE_LINK = /\[(.+?)\]\((.+?)\)/g;
 const RE_IMAGE = /!\[(.+?)\]\((.+?)\)/g;
+// Mentions: `@[Display](scheme:id)` — scheme-part must start with a letter
+// so plain `$100` or price-style parentheticals don't accidentally match.
+// remark-stringify may round-trip the colon as `\:` — tolerate either.
+const RE_MENTION = /@\[([^\]]+?)\]\(([a-z][a-z0-9+.-]*)\\?:([^)\s]+)\)/gi;
+const RE_MENTION_TAG = /<span\b[^>]*?\bdata-mention\b[^>]*?>(?:<[^>]+>)*([^<]*)<\/span>/gi;
 const RE_STRONG_TAG = /<strong>(.*?)<\/strong>/g;
 const RE_B_TAG = /<b>(.*?)<\/b>/g;
 const RE_EM_TAG = /<em>(.*?)<\/em>/g;
@@ -426,7 +431,7 @@ export function tiptapToMarkdown(html: string): string {
     if (ulMatch) {
       const items = ulMatch[1].matchAll(/<li>(.*?)<\/li>/gs);
       for (const item of items) {
-        lines.push('- ' + htmlToInline(item[1].replace(/<\/?p>/g, '')));
+        lines.push(...renderListItem('- ', item[1]));
       }
       lines.push('');
       remaining = remaining.slice(ulMatch[0].length);
@@ -438,7 +443,7 @@ export function tiptapToMarkdown(html: string): string {
     if (olMatch) {
       const items = [...olMatch[1].matchAll(/<li>(.*?)<\/li>/gs)];
       items.forEach((item, idx) => {
-        lines.push(`${idx + 1}. ` + htmlToInline(item[1].replace(/<\/?p>/g, '')));
+        lines.push(...renderListItem(`${idx + 1}. `, item[1]));
       });
       lines.push('');
       remaining = remaining.slice(olMatch[0].length);
@@ -485,6 +490,41 @@ export function tiptapToMarkdown(html: string): string {
   );
 }
 
+/**
+ * Render a list item's HTML content as one or more markdown lines.
+ * Handles `<p>` paragraph breaks (blank line) and `<br>` hard breaks
+ * (two trailing spaces). Continuation lines are indented to keep them
+ * inside the list item.
+ */
+function renderListItem(prefix: string, html: string): string[] {
+  const indent = ' '.repeat(prefix.length);
+
+  // Split on </p><p> to detect paragraph breaks within the item
+  const paragraphs = html
+    .split(/<\/p>\s*<p[^>]*>/i)
+    .map((p) => p.replace(/^<p[^>]*>/i, '').replace(/<\/p>\s*$/i, ''));
+
+  const result: string[] = [];
+  paragraphs.forEach((paragraph, pIdx) => {
+    const inline = htmlToInline(paragraph).trim();
+    if (!inline) return;
+
+    // Each <br> already became "  \n" in htmlToInline; split on it now.
+    const subLines = inline.split('\n');
+    subLines.forEach((sub, sIdx) => {
+      if (pIdx === 0 && sIdx === 0) {
+        result.push(prefix + sub);
+      } else {
+        // Blank line separator between paragraphs (sIdx === 0 means new paragraph)
+        if (sIdx === 0) result.push('');
+        result.push(indent + sub);
+      }
+    });
+  });
+
+  return result.length > 0 ? result : [prefix];
+}
+
 // ─── Table helpers ───────────────────────────────────────
 
 /** Split a GFM table row into trimmed cell strings (strips outer pipes). */
@@ -545,6 +585,16 @@ function inlineToHtml(text: string): string {
   // Images first: ![alt](src) — must be before links so the `!` prefix is consumed
   result = result.replace(RE_IMAGE, '<img alt="$1" src="$2">');
 
+  // Mentions: @[Display](scheme:id) — must run before links so the
+  // bracket+paren isn't consumed as a regular link. The input here has
+  // already been run through escapeHtml at the top of this function, so
+  // the captured groups are safe to interpolate directly.
+  result = result.replace(
+    RE_MENTION,
+    (_match, label, kind, id) =>
+      `<span data-mention="true" data-kind="${kind}" data-id="${id}" data-label="${label}" class="mention">@${label}</span>`,
+  );
+
   // Links: [text](url)
   result = result.replace(RE_LINK, '<a href="$2">$1</a>');
 
@@ -555,6 +605,10 @@ function inlineToHtml(text: string): string {
 function htmlToInline(html: string): string {
   let result = html;
 
+  // Soft line breaks — convert <br> to GFM hard-break syntax (two trailing
+  // spaces + newline) before stripping tags so the newline survives.
+  result = result.replace(/<br\s*\/?>/gi, '  \n');
+
   // Strong
   result = result.replace(RE_STRONG_TAG, '**$1**');
   result = result.replace(RE_B_TAG, '**$1**');
@@ -570,6 +624,16 @@ function htmlToInline(html: string): string {
   // Code
   result = result.replace(RE_CODE_TAG, '`$1`');
 
+  // Mentions — match before the link handler so the span isn't stripped
+  // out as an unknown tag. Pull kind + id out of the data attributes.
+  result = result.replace(RE_MENTION_TAG, (match, _inner) => {
+    const kind = /data-kind="([^"]*)"/i.exec(match)?.[1] ?? '';
+    const id = /data-id="([^"]*)"/i.exec(match)?.[1] ?? '';
+    const label = /data-label="([^"]*)"/i.exec(match)?.[1] ?? '';
+    if (!kind || !id || !label) return match;
+    return `@[${label}](${kind}:${id})`;
+  });
+
   // Links
   result = result.replace(RE_A_TAG, '[$2]($1)');