@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/src/styles/ascii-timeline.css

@@ -13,7 +13,7 @@
 
 .squisq-ascii-timeline-editor {
   --squisq-ascii-timeline-accent: var(--squisq-theme-primary, #6366f1);
-  --squisq-ascii-timeline-label-width: 120px;
+  --squisq-ascii-timeline-label-width: 160px;
   border: 1px solid var(--squisq-border, #e2e8f0);
   border-radius: 10px;
   background: var(--squisq-input-bg, #fff);
@@ -44,6 +44,33 @@
   color: var(--squisq-text-muted, #64748b);
 }
 
+.squisq-ascii-timeline-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.squisq-ascii-timeline-header-actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid var(--squisq-border, #cbd5e1);
+  border-radius: 5px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-ascii-timeline-accent);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.squisq-ascii-timeline-header-actions button:hover,
+.squisq-ascii-timeline-header-actions button:focus-visible {
+  border-color: var(--squisq-ascii-timeline-accent);
+  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
+}
+
 .squisq-ascii-timeline-canvas {
   position: relative;
   min-width: 600px;
@@ -72,9 +99,70 @@
   white-space: nowrap;
 }
 
-.squisq-ascii-timeline-track-label > span {
+.squisq-ascii-timeline-track-name {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 3px 4px;
   overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: right;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.squisq-ascii-timeline-track-name {
+  cursor: text;
+}
+
+button.squisq-ascii-timeline-track-name:hover,
+button.squisq-ascii-timeline-track-name:focus-visible {
+  border-color: var(--squisq-border, #cbd5e1);
+  background: var(--squisq-input-bg, #fff);
+  outline: none;
+}
+
+.squisq-ascii-timeline-track-name-input {
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 3px 4px;
+  border: 1px solid var(--squisq-ascii-timeline-accent);
+  border-radius: 4px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-text, #1e293b);
+  font: inherit;
+  text-align: right;
+  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
+}
+
+.squisq-ascii-timeline-track-delete {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--squisq-text-muted, #64748b);
+  cursor: pointer;
+}
+
+.squisq-ascii-timeline-track-delete:hover,
+.squisq-ascii-timeline-track-delete:focus-visible {
+  background: color-mix(in srgb, #ef4444 12%, transparent);
+  color: #dc2626;
+  outline: 2px solid color-mix(in srgb, #ef4444 25%, transparent);
+}
+
+.squisq-ascii-timeline-track-delete:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
 }
 
 .squisq-ascii-timeline-track-add {
@@ -95,7 +183,8 @@
 }
 
 .squisq-ascii-timeline-track-add:hover,
-.squisq-ascii-timeline-track-add:focus-visible {
+.squisq-ascii-timeline-track-add:focus-visible,
+.squisq-ascii-timeline-track-add[aria-pressed='true'] {
   border-color: var(--squisq-ascii-timeline-accent);
   outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
 }
@@ -105,6 +194,10 @@
   height: 96px;
   min-width: 420px;
   outline: none;
+  cursor: default;
+}
+
+.squisq-ascii-timeline-rail--adding {
   cursor: crosshair;
 }
 
@@ -460,7 +553,7 @@
 
 @media (max-width: 760px) {
   .squisq-ascii-timeline-editor {
-    --squisq-ascii-timeline-label-width: 88px;
+    --squisq-ascii-timeline-label-width: 132px;
   }
 
   .squisq-ascii-timeline-inspector {
@@ -475,6 +568,10 @@
   .squisq-ascii-timeline-delete {
     grid-column: 2 / 3;
   }
+
+  .squisq-ascii-timeline-header-actions small {
+    display: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/styles/editor.css

@@ -645,6 +645,19 @@
   z-index: 100;
   min-width: 200px;
   padding: 4px 0;
+  /* This menu is portaled to <body>, outside the editor shell that normally
+     supplies the UX font. Keep its unbuttoned content (notably the header)
+     on the same sans-serif UI stack instead of inheriting the host page font. */
+  font-family: var(
+    --squisq-ux-font,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Noto Sans',
+    Helvetica,
+    Arial,
+    sans-serif
+  );
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
@@ -661,6 +674,12 @@
   user-select: none;
 }
 
+.squisq-insert-menu-header--separated {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
 /* Portaled outside squisq-editor-shell, so dark mode is applied via data-theme. */
 .squisq-insert-menu[data-theme='dark'] {
   background: #1f2937;
@@ -680,6 +699,10 @@
   color: #6b7280;
 }
 
+.squisq-insert-menu[data-theme='dark'] .squisq-insert-menu-header--separated {
+  border-top-color: #374151;
+}
+
 /* ─── Template Picker (toolbar) ──────────────────────── */
 
 .squisq-template-picker {
@@ -2066,6 +2089,13 @@
   color: var(--squisq-theme-text-muted, #6b7280);
 }
 
+/* Consecutive Markdown quote lines share one blockquote. Keep their Tiptap
+   paragraphs visually line-adjacent instead of applying the normal prose
+   paragraph gap between every authored `>` line. */
+.squisq-wysiwyg-editor blockquote > p {
+  margin: 0;
+}
+
 /* Inline `code` and `<pre>` blocks: the foreground / background draw from
    the active theme when the WYSIWYG container inherits theme colors
    (View menu → "Editor styling from theme: Fonts & colors"). The

package/src/styles/tree-view.css

@@ -48,7 +48,10 @@
   border-color: var(--squisq-text-muted, #94a3b8);
 }
 
-.squisq-tree-rows {
+/* Include the widget wrapper so this reset wins over the editor's generic
+ * `.squisq-wysiwyg-editor ul` padding. Otherwise every nested rail picks up
+ * another 24px of list indentation. */
+.squisq-tree-outline .squisq-tree-rows {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -58,16 +61,51 @@
   margin-left: 8px;
 }
 
+.squisq-tree-item {
+  position: relative;
+}
+
 .squisq-tree-row {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 1px 0;
+  border-radius: 4px;
 }
 .squisq-tree-row:hover .squisq-tree-controls {
   opacity: 1;
 }
 
+.squisq-tree-item--dragging {
+  opacity: 0.42;
+}
+
+.squisq-tree-item--drop-before > .squisq-tree-row::before,
+.squisq-tree-item--drop-after::after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 999px;
+  background: #6366f1;
+  pointer-events: none;
+}
+.squisq-tree-item--drop-before > .squisq-tree-row::before {
+  top: -1px;
+}
+/* An after-drop becomes the target's sibling, so show the marker below its
+ * complete subtree rather than directly below the target row. */
+.squisq-tree-item--drop-after::after {
+  bottom: -1px;
+}
+.squisq-tree-item--drop-child > .squisq-tree-row {
+  background: rgba(99, 102, 241, 0.12);
+  box-shadow: inset 0 0 0 1px #6366f1;
+}
+
 .squisq-tree-chevron {
   flex: 0 0 auto;
   width: 16px;
@@ -115,6 +153,18 @@
   opacity: 0;
   transition: opacity 0.12s;
 }
+.squisq-tree-drag-handle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  color: var(--squisq-text-muted, #64748b);
+  cursor: grab;
+}
+.squisq-tree-drag-handle:active {
+  cursor: grabbing;
+}
 .squisq-tree-controls button {
   border: none;
   background: transparent;

package/src/timeline/TimelineEditorWidget.tsx

@@ -56,6 +56,8 @@ const clamp01 = (value: number): number => Math.max(0, Math.min(1, value));
 export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetProps) {
   const view = useTimelineData(editor, blockId);
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
+  const [addingTrackId, setAddingTrackId] = useState<string | null>(null);
+  const [editingTrackId, setEditingTrackId] = useState<string | null>(null);
   const [hover, setHover] = useState<{ trackId: string; position: number } | null>(null);
   const [dragged, setDragged] = useState<DraggedEvent | null>(null);
   const suppressClickEventId = useRef<string | null>(null);
@@ -86,6 +88,8 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
     // editor's cursor/selection hot path.
     [sourceText, sourceTimeline],
   );
+  const editorEditable = editor.isEditable;
+  const editable = editorEditable && sourceSafe;
 
   const positioned = useMemo(() => {
     if (!view) return [];
@@ -142,25 +146,65 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
 
+  useEffect(() => {
+    if (editable) return;
+    setAddingTrackId(null);
+    setEditingTrackId(null);
+    setHover(null);
+  }, [editable]);
+
+  useEffect(() => {
+    if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
+      return;
+    }
+    setEditingTrackId(null);
+  }, [editingTrackId, view]);
+
   if (!view) return null;
 
-  const editorEditable = editor.isEditable;
-  const editable = editorEditable && sourceSafe;
   const totalEvents = positioned.length;
+  const addTrack = () => {
+    if (!editable) return;
+    const result = dispatch({ kind: 'addTrack' });
+    if (result.applied && result.eventId && result.trackId) {
+      setAddingTrackId(null);
+      setEditingTrackId(result.trackId);
+      setHover(null);
+      setSelectedEventId(result.eventId);
+      setAnnouncement('New timeline line added. Edit its name on the line.');
+    }
+  };
+
   const addEvent = (trackId: string, position: number) => {
     if (!editable) return;
     const result = dispatch({ kind: 'addEvent', trackId, position: clamp01(position) });
     if (result.applied && result.eventId) {
+      setAddingTrackId(null);
+      setEditingTrackId(null);
+      setHover(null);
       setSelectedEventId(result.eventId);
       setAnnouncement('New timeline point added. Edit its text below.');
     }
   };
 
   const selectEvent = (event: AsciiTimelineEvent, trackLabel: string) => {
+    setAddingTrackId(null);
+    setHover(null);
     setSelectedEventId(event.id);
     setAnnouncement(`${event.label || 'Timeline point'} selected on ${trackLabel}.`);
   };
 
+  const deleteTrack = (trackId: string, trackLabel: string) => {
+    const remaining = positioned.filter((point) => point.trackId !== trackId);
+    const result = dispatch({ kind: 'removeTrack', trackId });
+    if (!result.applied) return;
+    setAddingTrackId(null);
+    setEditingTrackId((current) => (current === trackId ? null : current));
+    setHover(null);
+    if (selected?.trackId === trackId) setSelectedEventId(remaining[0]?.event.id ?? null);
+    setAnnouncement(`${trackLabel} line deleted.`);
+  };
+
   const dragPosition = (event: ReactPointerEvent<HTMLButtonElement>): number | null => {
     const rail = event.currentTarget.closest<HTMLElement>('.squisq-ascii-timeline-rail');
     if (!rail) return null;
@@ -170,18 +214,36 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
   };
 
   return (
-    <section className="squisq-ascii-timeline-editor" aria-label="Timeline editor">
+    <section
+      className="squisq-ascii-timeline-editor"
+      aria-label="Timeline editor"
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !addingTrackId) return;
+        setAddingTrackId(null);
+        setHover(null);
+        setAnnouncement('Add point cancelled.');
+      }}
+    >
       <header className="squisq-ascii-timeline-header">
         <span>
           <Icon icon="fa-solid fa-timeline" /> Timeline
         </span>
-        {editable ? (
-          <small>Click the line to add a point · Drag dots to move</small>
-        ) : editorEditable ? (
-          <small>Source repair needed</small>
-        ) : (
-          <small>Read only</small>
-        )}
+        <div className="squisq-ascii-timeline-header-actions">
+          {editable && addingTrackId ? (
+            <small>Click the line to add a point · Esc to cancel</small>
+          ) : editable ? (
+            <small>Use + to add a point · Drag dots to move</small>
+          ) : editorEditable ? (
+            <small>Source repair needed</small>
+          ) : (
+            <small>Read only</small>
+          )}
+          {editable ? (
+            <button type="button" onClick={addTrack}>
+              <Icon icon="fa-solid fa-plus" /> Add line
+            </button>
+          ) : null}
+        </div>
       </header>
 
       <div
@@ -227,29 +289,68 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
             .sort((a, b) => a.position - b.position);
           const eventPositions = events.map((entry) => entry.position);
           const gaps = insertionGaps(eventPositions);
+          const addingPoint = editable && addingTrackId === track.id;
           return (
             <div className="squisq-ascii-timeline-track" key={track.id}>
-              <div className="squisq-ascii-timeline-track-label" title={trackLabel}>
-                <span>{trackLabel}</span>
+              <div className="squisq-ascii-timeline-track-label">
+                <InlineTrackLabel
+                  trackId={track.id}
+                  label={trackLabel}
+                  editing={editable && editingTrackId === track.id}
+                  editable={editable}
+                  dispatch={dispatch}
+                  onStart={() => {
+                    setAddingTrackId(null);
+                    setHover(null);
+                    setEditingTrackId(track.id);
+                  }}
+                  onFinish={() => setEditingTrackId(null)}
+                />
                 {editable ? (
-                  <button
-                    type="button"
-                    className="squisq-ascii-timeline-track-add"
-                    aria-label={`Add point to ${trackLabel} timeline`}
-                    title="Add point in the largest available gap"
-                    onClick={() => addEvent(track.id, largestGap(eventPositions))}
-                  >
-                    +
-                  </button>
+                  <>
+                    <button
+                      type="button"
+                      className="squisq-ascii-timeline-track-delete"
+                      aria-label={`Delete line: ${trackLabel}`}
+                      disabled={view.timeline.tracks.length <= 1}
+                      title={
+                        view.timeline.tracks.length > 1
+                          ? `Delete ${trackLabel} line and all of its points`
+                          : 'A timeline needs one line'
+                      }
+                      onClick={() => deleteTrack(track.id, trackLabel)}
+                    >
+                      <Icon icon="fa-solid fa-trash" />
+                    </button>
+                    <button
+                      type="button"
+                      className="squisq-ascii-timeline-track-add"
+                      aria-label={`Add point to ${trackLabel} timeline`}
+                      aria-pressed={addingPoint}
+                      title={addingPoint ? 'Cancel adding a point' : 'Choose where to add a point'}
+                      onClick={() => {
+                        setEditingTrackId(null);
+                        setAddingTrackId((current) => (current === track.id ? null : track.id));
+                        setHover(null);
+                        setAnnouncement(
+                          addingPoint
+                            ? 'Add point cancelled.'
+                            : `Choose where to add a point on ${trackLabel}.`,
+                        );
+                      }}
+                    >
+                      +
+                    </button>
+                  </>
                 ) : null}
               </div>
               <div
-                className={`squisq-ascii-timeline-rail${editable ? '' : ' squisq-ascii-timeline-rail--readonly'}`}
+                className={`squisq-ascii-timeline-rail${addingPoint ? ' squisq-ascii-timeline-rail--adding' : ''}${editable ? '' : ' squisq-ascii-timeline-rail--readonly'}`}
                 role="group"
                 aria-label={`${trackLabel} timeline rail`}
-                title={editable ? 'Click anywhere on the line to add a point' : undefined}
+                title={addingPoint ? 'Click anywhere on the line to add a point' : undefined}
                 onPointerMove={(event) => {
-                  if (!editable || dragged) return;
+                  if (!addingPoint || dragged) return;
                   const rect = event.currentTarget.getBoundingClientRect();
                   if (rect.width <= 0) return;
                   setHover({
@@ -261,14 +362,14 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
                   setHover((current) => (current?.trackId === track.id ? null : current))
                 }
                 onClick={(event) => {
-                  if (!editable || event.target !== event.currentTarget) return;
+                  if (!addingPoint || event.target !== event.currentTarget) return;
                   const rect = event.currentTarget.getBoundingClientRect();
                   if (rect.width <= 0) return;
                   addEvent(track.id, (event.clientX - rect.left) / rect.width);
                 }}
               >
                 <span className="squisq-ascii-timeline-rail-line" aria-hidden="true" />
-                {hover?.trackId === track.id && !dragged ? (
+                {addingPoint && hover?.trackId === track.id && !dragged ? (
                   <span
                     className="squisq-ascii-timeline-add-ghost"
                     style={{ left: `${hover.position * 100}%` }}
@@ -278,7 +379,7 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
                   </span>
                 ) : null}
 
-                {editable && !dragged
+                {addingPoint && !dragged
                   ? gaps.map((position) => (
                       <button
                         type="button"
@@ -344,6 +445,7 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
                           const point = dragPosition(pointerEvent);
                           if (point === null) return;
                           pointerEvent.stopPropagation();
+                          setAddingTrackId(null);
                           setHover(null);
                           setSelectedEventId(event.id);
                           suppressClickEventId.current = null;
@@ -505,6 +607,77 @@ export function TimelineEditorWidget({ editor, blockId }: TimelineEditorWidgetPr
   );
 }
 
+function InlineTrackLabel({
+  trackId,
+  label,
+  editing,
+  editable,
+  dispatch,
+  onStart,
+  onFinish,
+}: {
+  trackId: string;
+  label: string;
+  editing: boolean;
+  editable: boolean;
+  dispatch: (command: TimelineCommand) => TimelineCommandResult;
+  onStart: () => void;
+  onFinish: () => void;
+}) {
+  const [draft, setDraft] = useState(label);
+
+  useEffect(() => {
+    if (editing) setDraft(label);
+  }, [editing, label]);
+
+  const commitLabel = () => {
+    const next = draft.trim();
+    if (!next) {
+      setDraft(label);
+    } else if (next !== label) {
+      const result = dispatch({ kind: 'updateTrack', trackId, label: next });
+      if (!result.applied) setDraft(label);
+    }
+    onFinish();
+  };
+
+  if (!editable) return <span className="squisq-ascii-timeline-track-name">{label}</span>;
+
+  return editing ? (
+    <input
+      className="squisq-ascii-timeline-track-name-input"
+      aria-label={`Rename line: ${label}`}
+      value={draft}
+      autoFocus
+      onFocus={(event) => event.currentTarget.select()}
+      onChange={(event) => setDraft(event.target.value)}
+      onBlur={commitLabel}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          event.stopPropagation();
+          commitLabel();
+        } else if (event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          setDraft(label);
+          onFinish();
+        }
+      }}
+    />
+  ) : (
+    <button
+      type="button"
+      className="squisq-ascii-timeline-track-name"
+      aria-label={`Rename line: ${label}`}
+      title={`Rename ${label}`}
+      onClick={onStart}
+    >
+      {label}
+    </button>
+  );
+}
+
 function EventInspector({
   selected,
   editable,
@@ -664,20 +837,6 @@ function insertionGaps(positions: readonly number[]): number[] {
   return gaps;
 }
 
-function largestGap(positions: readonly number[]): number {
-  if (positions.length === 0) return 0.5;
-  const sorted = [0, ...positions.map(clamp01).sort((a, b) => a - b), 1];
-  let start = sorted[0];
-  let end = sorted[1];
-  for (let index = 1; index < sorted.length - 1; index++) {
-    if (sorted[index + 1] - sorted[index] > end - start) {
-      start = sorted[index];
-      end = sorted[index + 1];
-    }
-  }
-  return (start + end) / 2;
-}
-
 function navigateTrackPoints(event: KeyboardEvent<HTMLButtonElement>): void {
   if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
   const rail = event.currentTarget.closest('.squisq-ascii-timeline-rail');