@bendyline/squisq-editor-react 1.2.2 → 1.3.0

package/src/Toolbar.tsx

@@ -16,9 +16,9 @@ import { getAvailableTemplates } from '@bendyline/squisq/doc';
 /** Template names are static — computed once at module load. */
 const TEMPLATE_NAMES = getAvailableTemplates();
 
-const VIEWS: { id: EditorView; label: string; shortcut: string }[] = [
+const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
   { id: 'wysiwyg', label: 'Editor', shortcut: '⌘1' },
-  { id: 'raw', label: 'Raw', shortcut: '⌘2' },
+  { id: 'raw', label: 'Markdown', shortLabel: 'MD', shortcut: '⌘2' },
   { id: 'preview', label: 'Play', shortcut: '⌘3' },
 ];
 
@@ -35,6 +35,12 @@ export interface ToolbarProps {
   slotAfterActions?: ReactNode;
   /** Content rendered at the rightmost end of the toolbar, after all other elements. */
   slotRight?: ReactNode;
+  /**
+   * Whether to include the "Play" (preview) tab in the view switcher.
+   * Defaults to true. Hosts that don't want the slideshow preview — e.g.
+   * editing free-form prompts — can pass false to suppress it.
+   */
+  showPlayTab?: boolean;
 }
 
 interface ToolbarButton {
@@ -42,13 +48,13 @@ interface ToolbarButton {
   label: string;
   icon: string;
   title: string;
-  group: 'format' | 'structure' | 'insert';
+  group: 'format' | 'lists' | 'structure' | 'insert' | 'media';
   /** CSS font style for the icon (e.g. italic for the I button) */
   iconStyle?: React.CSSProperties;
 }
 
 const BUTTONS: ToolbarButton[] = [
-  // Format group
+  // Format group — B/I/S trio.
   {
     id: 'bold',
     label: 'B',
@@ -73,22 +79,27 @@ const BUTTONS: ToolbarButton[] = [
     group: 'format',
     iconStyle: { textDecoration: 'line-through' },
   },
-  { id: 'code', label: '<>', icon: '`', title: 'Inline code', group: 'format' },
+
+  // Lists group — sits between format and structure so bullets/numbers
+  // are adjacent to the inline formatters people reach for together.
+  { id: 'ul', label: '•', icon: '•', title: 'Bullet list', group: 'lists' },
+  { id: 'ol', label: '1.', icon: '1.', title: 'Numbered list', group: 'lists' },
 
   // Structure group
   { id: 'h1', label: 'H1', icon: 'H1', title: 'Heading 1', group: 'structure' },
   { id: 'h2', label: 'H2', icon: 'H2', title: 'Heading 2', group: 'structure' },
   { id: 'h3', label: 'H3', icon: 'H3', title: 'Heading 3', group: 'structure' },
-  { id: 'quote', label: '❝', icon: '❝', title: 'Blockquote', group: 'structure' },
 
-  // Insert group
-  { id: 'ul', label: '•', icon: '•', title: 'Bullet list', group: 'insert' },
-  { id: 'ol', label: '1.', icon: '1.', title: 'Numbered list', group: 'insert' },
+  // Insert group — block-level inserts (quote, code blocks, rules)
+  { id: 'quote', label: '❝', icon: '❝', title: 'Blockquote', group: 'insert' },
   { id: 'codeblock', label: '{ }', icon: '{ }', title: 'Code block', group: 'insert' },
+  { id: 'code', label: '</>', icon: '</>', title: 'Inline code', group: 'insert' },
   { id: 'hr', label: '—', icon: '—', title: 'Horizontal rule', group: 'insert' },
-  { id: 'link', label: '🔗', icon: '🔗', title: 'Insert link', group: 'insert' },
-  { id: 'table', label: 'table', icon: '', title: 'Insert table', group: 'insert' },
-  { id: 'image', label: '🖼', icon: '🖼', title: 'Insert image', group: 'insert' },
+
+  // Media group — links, tables, images
+  { id: 'link', label: '🔗', icon: '🔗', title: 'Insert link', group: 'media' },
+  { id: 'table', label: 'table', icon: '', title: 'Insert table', group: 'media' },
+  { id: 'image', label: '🖼', icon: '🖼', title: 'Insert image', group: 'media' },
 ];
 
 // ─── Tiptap active-state map ────────────────────────────
@@ -136,6 +147,7 @@ export function Toolbar({
   slotLeft,
   slotAfterActions,
   slotRight,
+  showPlayTab = true,
 }: ToolbarProps) {
   const {
     activeView,
@@ -145,7 +157,17 @@ export function Toolbar({
     tiptapEditor,
     monacoEditor,
     mediaProvider,
+    editorMode,
   } = useEditorContext();
+  const isCodeMode = editorMode === 'code';
+  // In code mode only the raw view is meaningful; the WYSIWYG and Preview
+  // surfaces aren't mounted, so hide their tabs.
+  const visibleViews = VIEWS.filter((v) => {
+    if (isCodeMode) return v.id === 'raw';
+    if (v.id === 'preview' && !showPlayTab) return false;
+    return true;
+  });
+  const showViewTabs = visibleViews.length > 1;
 
   // Hidden file input for image picker
   const imageInputRef = useRef<HTMLInputElement>(null);
@@ -210,6 +232,31 @@ export function Toolbar({
     return () => document.removeEventListener('mousedown', handleClick);
   }, [showOverflow]);
 
+  // Open-up vs open-down: the overflow menu is anchored to its trigger with
+  // `top: 100%` by default. When the toolbar lives near the bottom of a
+  // small container (e.g. a chat composer), a downward menu gets clipped.
+  // Measure on open and flip the anchor to `bottom: 100%` if the space
+  // above the trigger is larger than the space below.
+  const [overflowPlacement, setOverflowPlacement] = useState<'down' | 'up'>('down');
+  useEffect(() => {
+    if (!showOverflow || !overflowRef.current) return;
+    const trigger = overflowRef.current.querySelector<HTMLElement>(
+      '.squisq-toolbar-overflow-trigger',
+    );
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    // Assume a typical menu height; exact measurement is unreliable on first
+    // open because the menu hasn't rendered yet when this runs.
+    const ESTIMATED_MENU_HEIGHT = 260;
+    if (spaceBelow < ESTIMATED_MENU_HEIGHT && spaceAbove > spaceBelow) {
+      setOverflowPlacement('up');
+    } else {
+      setOverflowPlacement('down');
+    }
+  }, [showOverflow]);
+
   // Force re-render when Tiptap selection or formatting state changes
   const [, forceUpdate] = useReducer((c: number) => c + 1, 0);
   useEffect(() => {
@@ -487,7 +534,7 @@ export function Toolbar({
     [activeView, tiptapEditor, handleTiptap, handleRaw],
   );
 
-  const groups = ['format', 'structure', 'insert'] as const;
+  const groups = ['format', 'lists', 'structure', 'insert', 'media'] as const;
   const isWysiwyg = activeView === 'wysiwyg' && tiptapEditor;
   const isPreview = activeView === 'preview';
 
@@ -536,25 +583,39 @@ export function Toolbar({
       />
       {/* Left slot — before view tabs */}
       {slotLeft}
-      {/* View tabs */}
-      <div className="squisq-toolbar-view-tabs" role="tablist" aria-label="Editor view">
-        {VIEWS.map((view) => (
-          <button
-            key={view.id}
-            role="tab"
-            data-view={view.id}
-            data-label={view.label}
-            aria-selected={activeView === view.id}
-            className={`squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`}
-            onClick={() => setActiveView(view.id)}
-            title={`${view.label} (${view.shortcut})`}
-          >
-            {view.label}
-          </button>
-        ))}
-      </div>
-      {/* Formatting buttons — hidden in preview mode and on narrow screens */}
-      {!isPreview && !isNarrow && (
+      {/* View tabs — hidden when only one view is available (e.g. code mode). */}
+      {showViewTabs && (
+        <div className="squisq-toolbar-view-tabs" role="tablist" aria-label="Editor view">
+          {visibleViews.map((view) => (
+            <button
+              key={view.id}
+              role="tab"
+              data-view={view.id}
+              aria-selected={activeView === view.id}
+              className={`squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`}
+              onClick={() => setActiveView(view.id)}
+              data-tooltip={`${view.label} (${view.shortcut})`}
+            >
+              <span
+                className="squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long"
+                data-label={view.label}
+              >
+                {view.label}
+              </span>
+              {view.shortLabel && view.shortLabel !== view.label && (
+                <span
+                  className="squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short"
+                  data-label={view.shortLabel}
+                >
+                  {view.shortLabel}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+      {/* Formatting buttons — hidden in preview mode, narrow screens, and code mode */}
+      {!isPreview && !isNarrow && !isCodeMode && (
         <div className="squisq-toolbar-actions" ref={actionsRef}>
           {groups.map((group, gi) => (
             <div key={group} className="squisq-toolbar-group">
@@ -566,7 +627,7 @@ export function Toolbar({
                   <button
                     key={btn.id}
                     className={`squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`}
-                    title={disabled ? 'Insert image (requires media provider)' : btn.title}
+                    data-tooltip={disabled ? 'Insert image (requires media provider)' : btn.title}
                     onClick={() => handleAction(btn.id)}
                     aria-label={btn.title}
                     aria-pressed={active}
@@ -605,7 +666,7 @@ export function Toolbar({
               <div className="squisq-toolbar-group squisq-template-picker">
                 <label
                   className="squisq-template-picker-label"
-                  title="Block template for this heading"
+                  data-tooltip="Block template for this heading"
                 >
                   Template:
                   <select
@@ -633,7 +694,7 @@ export function Toolbar({
                 <span className="squisq-table-controls-label">Table:</span>
                 <button
                   className="squisq-toolbar-button"
-                  title="Add column before"
+                  data-tooltip="Add column before"
                   onClick={() => tiptapEditor!.chain().focus().addColumnBefore().run()}
                   aria-label="Add column before"
                 >
@@ -654,7 +715,7 @@ export function Toolbar({
                 </button>
                 <button
                   className="squisq-toolbar-button"
-                  title="Add column after"
+                  data-tooltip="Add column after"
                   onClick={() => tiptapEditor!.chain().focus().addColumnAfter().run()}
                   aria-label="Add column after"
                 >
@@ -675,7 +736,7 @@ export function Toolbar({
                 </button>
                 <button
                   className="squisq-toolbar-button"
-                  title="Delete column"
+                  data-tooltip="Delete column"
                   onClick={() => tiptapEditor!.chain().focus().deleteColumn().run()}
                   aria-label="Delete column"
                 >
@@ -695,7 +756,7 @@ export function Toolbar({
                 </button>
                 <button
                   className="squisq-toolbar-button"
-                  title="Add row above"
+                  data-tooltip="Add row above"
                   onClick={() => tiptapEditor!.chain().focus().addRowBefore().run()}
                   aria-label="Add row above"
                 >
@@ -716,7 +777,7 @@ export function Toolbar({
                 </button>
                 <button
                   className="squisq-toolbar-button"
-                  title="Add row below"
+                  data-tooltip="Add row below"
                   onClick={() => tiptapEditor!.chain().focus().addRowAfter().run()}
                   aria-label="Add row below"
                 >
@@ -737,7 +798,7 @@ export function Toolbar({
                 </button>
                 <button
                   className="squisq-toolbar-button"
-                  title="Delete row"
+                  data-tooltip="Delete row"
                   onClick={() => tiptapEditor!.chain().focus().deleteRow().run()}
                   aria-label="Delete row"
                 >
@@ -757,7 +818,7 @@ export function Toolbar({
                 </button>
                 <button
                   className="squisq-toolbar-button squisq-toolbar-button--danger"
-                  title="Delete table"
+                  data-tooltip="Delete table"
                   onClick={() => tiptapEditor!.chain().focus().deleteTable().run()}
                   aria-label="Delete table"
                 >
@@ -784,11 +845,11 @@ export function Toolbar({
       )}
 
       {/* Overflow menu — outside the overflow:hidden actions container */}
-      {!isPreview && overflowIndex !== null && (
+      {!isPreview && !isCodeMode && overflowIndex !== null && (
         <div className="squisq-toolbar-overflow" ref={overflowRef}>
           <button
             className={`squisq-toolbar-button squisq-toolbar-overflow-trigger${showOverflow ? ' squisq-toolbar-button--active' : ''}`}
-            title="More actions"
+            data-tooltip="More actions"
             onClick={() => setShowOverflow((v) => !v)}
             aria-label="More actions"
             aria-expanded={showOverflow}
@@ -796,7 +857,9 @@ export function Toolbar({
             ···
           </button>
           {showOverflow && (
-            <div className="squisq-toolbar-overflow-menu">
+            <div
+              className={`squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`}
+            >
               {BUTTONS.slice(overflowIndex).map((btn) => {
                 const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
                 const disabled = btn.id === 'image' && !mediaProvider;
@@ -804,7 +867,6 @@ export function Toolbar({
                   <button
                     key={btn.id}
                     className={`squisq-toolbar-overflow-item${active ? ' squisq-toolbar-overflow-item--active' : ''}`}
-                    title={btn.title}
                     onClick={() => {
                       handleAction(btn.id);
                       setShowOverflow(false);
@@ -916,14 +978,15 @@ export function Toolbar({
 
       {/* After-actions slot — after formatting controls */}
       {slotAfterActions}
-      {/* Spacer pushes right-side buttons to the end */}
-      <div style={{ flex: 1 }} />
+      {/* Spacer — only needed when the actions container (which has flex:1
+          and already pushes right-side items to the end) isn't rendered. */}
+      {(isPreview || isNarrow || isCodeMode) && <div style={{ flex: 1 }} />}
       {/* Files toggle — visible when callback is provided */}
       {onToggleFiles && (
         <button
           className={`squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? ' squisq-toolbar-button--active' : ''}`}
           onClick={onToggleFiles}
-          title={showFiles ? 'Hide Files panel' : 'Show Files panel'}
+          data-tooltip={showFiles ? 'Hide Files panel' : 'Show Files panel'}
           aria-pressed={showFiles}
           aria-label="Toggle Files panel"
         >

package/src/Tooltip.tsx

@@ -0,0 +1,124 @@
+/**
+ * TooltipLayer
+ *
+ * A single portal-mounted tooltip that activates on hover over any element
+ * with a `data-tooltip` attribute. Shorter delay than native browser
+ * tooltips and fires regardless of window focus, making toolbar hints feel
+ * immediate. Mount once near the root of the editor shell.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+const SHOW_DELAY_MS = 180;
+
+interface TooltipState {
+  label: string;
+  top: number;
+  left: number;
+}
+
+export function TooltipLayer() {
+  const [state, setState] = useState<TooltipState | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const currentTargetRef = useRef<HTMLElement | null>(null);
+  // Visibility tracked in a ref so `handleOver` can decide whether to swap
+  // the label immediately vs. re-delay — reading it from state would force
+  // the effect to re-run (and re-register all listeners) on every change.
+  const visibleRef = useRef(false);
+
+  useEffect(() => {
+    const clearTimer = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+
+    const hide = () => {
+      clearTimer();
+      currentTargetRef.current = null;
+      visibleRef.current = false;
+      setState(null);
+    };
+
+    const show = (el: HTMLElement, label: string) => {
+      const rect = el.getBoundingClientRect();
+      visibleRef.current = true;
+      setState({
+        label,
+        top: rect.bottom + 6,
+        left: rect.left + rect.width / 2,
+      });
+    };
+
+    const handleOver = (e: MouseEvent) => {
+      const el = (e.target as Element | null)?.closest?.<HTMLElement>('[data-tooltip]');
+      if (!el) return;
+      if (el === currentTargetRef.current) return;
+      const label = el.getAttribute('data-tooltip');
+      if (!label) return;
+
+      // Switching from one tooltip target to another: if a tooltip is
+      // already visible, swap the label immediately (no re-delay).
+      const wasVisible = visibleRef.current;
+      currentTargetRef.current = el;
+      clearTimer();
+
+      if (wasVisible) {
+        show(el, label);
+      } else {
+        timerRef.current = setTimeout(() => {
+          if (currentTargetRef.current === el && document.body.contains(el)) {
+            show(el, label);
+          }
+        }, SHOW_DELAY_MS);
+      }
+    };
+
+    const handleOut = (e: MouseEvent) => {
+      const target = currentTargetRef.current;
+      if (!target) return;
+      const related = e.relatedTarget as Node | null;
+      // Still hovering inside the same target (e.g. moved over a child)
+      if (related && target.contains(related)) return;
+      // Moving to another element with a tooltip — handleOver will swap in.
+      const relatedTooltip = (related as Element | null)?.closest?.('[data-tooltip]');
+      if (relatedTooltip) return;
+      hide();
+    };
+
+    const handleScroll = () => hide();
+    const handleBlur = () => hide();
+
+    document.addEventListener('mouseover', handleOver);
+    document.addEventListener('mouseout', handleOut);
+    document.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('blur', handleBlur);
+
+    return () => {
+      clearTimer();
+      document.removeEventListener('mouseover', handleOver);
+      document.removeEventListener('mouseout', handleOut);
+      document.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, []);
+
+  if (!state) return null;
+
+  return createPortal(
+    <div
+      role="tooltip"
+      className="squisq-tooltip"
+      style={{
+        position: 'fixed',
+        top: state.top,
+        left: state.left,
+      }}
+    >
+      {state.label}
+    </div>,
+    document.body,
+  );
+}

package/src/ViewSwitcher.tsx

@@ -6,8 +6,8 @@
 
 import { useEditorContext, type EditorView } from './EditorContext';
 
-const VIEWS: { id: EditorView; label: string; shortcut: string }[] = [
-  { id: 'raw', label: 'Raw', shortcut: '⌘1' },
+const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
+  { id: 'raw', label: 'Markdown', shortLabel: 'MD', shortcut: '⌘1' },
   { id: 'wysiwyg', label: 'Editor', shortcut: '⌘2' },
   { id: 'preview', label: 'Preview', shortcut: '⌘3' },
 ];
@@ -21,7 +21,12 @@ export interface ViewSwitcherProps {
  * Tab-style view switcher for the three editor modes.
  */
 export function ViewSwitcher({ className }: ViewSwitcherProps) {
-  const { activeView, setActiveView } = useEditorContext();
+  const { activeView, setActiveView, editorMode } = useEditorContext();
+  // In code mode, only the raw view is meaningful. With just one entry in
+  // the tab list there's nothing to switch between, so suppress the whole
+  // switcher rather than render a single lonely tab.
+  const visibleViews = editorMode === 'code' ? VIEWS.filter((v) => v.id === 'raw') : VIEWS;
+  if (visibleViews.length <= 1) return null;
 
   return (
     <div
@@ -29,7 +34,7 @@ export function ViewSwitcher({ className }: ViewSwitcherProps) {
       role="tablist"
       aria-label="Editor view"
     >
-      {VIEWS.map((view) => (
+      {visibleViews.map((view) => (
         <button
           key={view.id}
           role="tab"
@@ -38,7 +43,12 @@ export function ViewSwitcher({ className }: ViewSwitcherProps) {
           onClick={() => setActiveView(view.id)}
           title={`${view.label} (${view.shortcut})`}
         >
-          {view.label}
+          <span className="squisq-view-tab-label squisq-view-tab-label--long">{view.label}</span>
+          {view.shortLabel && view.shortLabel !== view.label && (
+            <span className="squisq-view-tab-label squisq-view-tab-label--short">
+              {view.shortLabel}
+            </span>
+          )}
         </button>
       ))}
     </div>