panelui-native 0.78.0 → 0.79.1

package/src/components/markdown-editor/markdown-transforms.ts

@@ -81,6 +81,23 @@ export function toggleWrap(
     };
   }
 
+  /*
+   * A selection that crosses a line break is wrapped line by line.
+   *
+   * `**one\ntwo**` is not bold in any reader — an inline marker cannot span a
+   * paragraph break — so wrapping the whole span produces asterisks the writer
+   * can see and no emphasis they asked for. Each line gets its own pair, and
+   * blank lines are left alone rather than given an empty pair of markers.
+   */
+  if (selected.includes('\n')) {
+    const wrapped = selected
+      .split('\n')
+      .map((line) => (line.trim() === '' ? line : marker + line + marker))
+      .join('\n');
+    const next = text.slice(0, start) + wrapped + text.slice(end);
+    return { text: next, selection: { start, end: start + wrapped.length } };
+  }
+
   const next = text.slice(0, start) + marker + selected + marker + text.slice(end);
 
   // Nothing selected: the caret goes between the markers, which is where the
@@ -121,6 +138,60 @@ function replaceBlock(
   };
 }
 
+/**
+ * The same replacement, with the caret left where the writer's was.
+ *
+ * A line-level action applies to whole lines, but the writer's caret was in the
+ * middle of one of them, and handing back the whole block selected means the
+ * next thing they type replaces the list they just made. So the caret is put
+ * back at the same distance from the start of the block, shifted by however
+ * much the text before it grew.
+ */
+function replaceBlockKeepingCaret(
+  text: string,
+  range: EditorSelection,
+  replacement: string,
+  selection: EditorSelection
+): EditResult {
+  const next = text.slice(0, range.start) + replacement + text.slice(range.end);
+  const { start, end } = normalise(text, selection);
+
+  // A real selection is kept as a selection over the same lines; only a caret
+  // is followed precisely.
+  if (start !== end) {
+    return { text: next, selection: { start: range.start, end: range.start + replacement.length } };
+  }
+
+  const before = text.slice(range.start, start);
+  const line = before.split('\n').length - 1;
+  const column = before.length - (before.lastIndexOf('\n') + 1);
+
+  const oldLines = text.slice(range.start, range.end).split('\n');
+  const newLines = replacement.split('\n');
+  const index = Math.min(line, newLines.length - 1);
+  const oldLine = oldLines[Math.min(line, oldLines.length - 1)] ?? '';
+  const newLine = newLines[index] ?? '';
+
+  /*
+   * The caret keeps its distance from the *end* of its line, not from the
+   * start of it.
+   *
+   * These actions change what is in front of the text: a caret held at the
+   * same column ends up inside the bullet it just gained, and after removing
+   * one it ends up two characters into the word. The distance to the end of
+   * the line is the thing a prefix cannot move.
+   */
+  const fromEnd = Math.max(0, oldLine.length - column);
+  const nextColumn = Math.max(0, newLine.length - fromEnd);
+
+  const offsetToLine = newLines
+    .slice(0, index)
+    .reduce((total, each) => total + each.length + 1, 0);
+
+  const at = range.start + offsetToLine + Math.min(nextColumn, newLine.length);
+  return { text: next, selection: { start: at, end: at } };
+}
+
 /**
  * Puts `prefix` on the front of every line the selection touches, or takes it
  * off if every one of them already has it.
@@ -140,7 +211,7 @@ export function toggleLinePrefix(
     ? lines.map((line) => line.slice(prefix.length))
     : lines.map((line) => (has(line) ? line : prefix + line));
 
-  return replaceBlock(text, range, next.join('\n'));
+  return replaceBlockKeepingCaret(text, range, next.join('\n'), selection);
 }
 
 /** How an ordered-list line starts, so it can be recognised and removed. */
@@ -164,7 +235,7 @@ export function toggleOrderedList(
     ? lines.map((line) => line.replace(ORDERED, ''))
     : lines.map((line, i) => `${i + 1}. ${line.replace(ORDERED, '')}`);
 
-  return replaceBlock(text, range, next.join('\n'));
+  return replaceBlockKeepingCaret(text, range, next.join('\n'), selection);
 }
 
 /* -------------------------------------------------------------------------- *
@@ -208,21 +279,214 @@ export function insertLink(text: string, selection: EditorSelection): EditResult
  * makes room for itself: a blank line before it when it is not already at the
  * start of a paragraph, and one after it at the end.
  */
+/**
+ * The whole fenced block the selection is inside, or `null`.
+ *
+ * Scanned from the top of the document rather than read off the lines the
+ * selection touches, because a caret sitting on a line of code touches one
+ * line and that line says nothing about the fence around it. Without this,
+ * pressing the code button inside a fence wrapped it in a second one.
+ */
+function enclosingFence(
+  text: string,
+  selection: EditorSelection
+): EditorSelection | null {
+  const { start, end } = normalise(text, selection);
+  let offset = 0;
+  let openedAt: number | null = null;
+
+  for (const line of text.split('\n')) {
+    const lineStart = offset;
+    const lineEnd = offset + line.length;
+
+    if (line.startsWith('```')) {
+      if (openedAt === null) openedAt = lineStart;
+      else {
+        if (start >= openedAt && end <= lineEnd) return { start: openedAt, end: lineEnd };
+        openedAt = null;
+      }
+    }
+
+    offset = lineEnd + 1;
+  }
+
+  return null;
+}
+
 export function toggleFence(text: string, selection: EditorSelection): EditResult {
+  const enclosing = enclosingFence(text, selection);
+  if (enclosing) {
+    const inner = text
+      .slice(enclosing.start, enclosing.end)
+      .split('\n')
+      .slice(1, -1)
+      .join('\n');
+    return replaceBlock(text, enclosing, inner);
+  }
+
   const range = lineRange(text, selection);
   const block = text.slice(range.start, range.end);
-  const lines = block.split('\n');
-
-  if (lines.length >= 2 && lines[0]?.startsWith('```') && lines.at(-1) === '```') {
-    return replaceBlock(text, range, lines.slice(1, -1).join('\n'));
-  }
 
   const leadIn = range.start > 0 && text[range.start - 1] !== '\n' ? '\n' : '';
-  const fenced = `${leadIn}\`\`\`\n${block}\n\`\`\``;
+  // And a blank line after it, unless the fence already ends the document or
+  // the line below it is blank. A paragraph butted up against a closing fence
+  // is a paragraph some readers swallow into the code block.
+  const rest = text.slice(range.end);
+  const leadOut = rest === '' || rest.startsWith('\n\n') ? '' : '\n';
+
+  const opener = `${leadIn}\`\`\`\n`;
+  const fenced = `${opener}${block}\n\`\`\`${leadOut}`;
   const result = replaceBlock(text, range, fenced);
 
   // Inside the fence, on the line the code goes on — not around the whole
-  // block, which would be selecting the markers along with the content.
-  const inner = range.start + leadIn.length + 4;
+  // block, which would be selecting the markers along with the content. The
+  // offset is the opener's own length rather than a written-down number, so it
+  // cannot drift from the string above it.
+  const inner = range.start + opener.length;
   return { text: result.text, selection: { start: inner, end: inner + block.length } };
 }
+
+/* -------------------------------------------------------------------------- *
+ * Images
+ * -------------------------------------------------------------------------- */
+
+/** Placeholder left where an image's description goes. */
+export const IMAGE_PLACEHOLDER = 'description';
+
+/**
+ * Inserts an image, and selects the part that still needs filling in.
+ *
+ * The description first, not the URL. An image with no alt text is the failure
+ * that actually happens, and the writer is far more likely to have the URL on
+ * the clipboard than the sentence describing what is in it — so the sentence is
+ * what the caret is left on.
+ */
+export function insertImage(text: string, selection: EditorSelection): EditResult {
+  const { start, end } = normalise(text, selection);
+  const label = text.slice(start, end);
+  const alt = label || IMAGE_PLACEHOLDER;
+  const inserted = `![${alt}](${LINK_PLACEHOLDER})`;
+  const next = text.slice(0, start) + inserted + text.slice(end);
+
+  // With a description already written, what is missing is the target.
+  if (label) {
+    const from = start + label.length + 4; // `![` + label + `](`
+    return { text: next, selection: { start: from, end: from + LINK_PLACEHOLDER.length } };
+  }
+
+  const from = start + 2; // `![`
+  return { text: next, selection: { start: from, end: from + alt.length } };
+}
+
+/* -------------------------------------------------------------------------- *
+ * Continuing a list
+ * -------------------------------------------------------------------------- */
+
+/** A bullet line, and how much of it is the marker. */
+const BULLET = /^(\s*)([-*+])(\s+)(.*)$/;
+/** A numbered line, split the same way. */
+const NUMBERED = /^(\s*)(\d+)\.(\s+)(.*)$/;
+
+/**
+ * What Return should do inside a list.
+ *
+ * Returns `null` when the caret is not on a list line, which is the signal to
+ * let the newline happen normally. Otherwise it either starts the next item or,
+ * on an item with nothing in it, ends the list — because a writer pressing
+ * Return on an empty bullet is telling you they have run out of items, and the
+ * alternative is a trail of empty bullets they have to delete by hand.
+ */
+export function continueList(
+  text: string,
+  selection: EditorSelection
+): EditResult | null {
+  const { start, end } = normalise(text, selection);
+  // Only a caret continues a list. With a range selected, Return replaces it,
+  // and guessing which end of it the writer meant is worse than not guessing.
+  if (start !== end) return null;
+
+  const lineStart = text.lastIndexOf('\n', start - 1) + 1;
+  const line = text.slice(lineStart, start);
+
+  const bullet = BULLET.exec(line);
+  const numbered = bullet ? null : NUMBERED.exec(line);
+  if (!bullet && !numbered) return null;
+
+  const [, indent = '', marker = '', gap = ' ', content = ''] = (bullet ?? numbered)!;
+
+  // An item with nothing in it ends the list: the line becomes empty and the
+  // caret stays on it, ready for an ordinary paragraph.
+  if (content.trim() === '') {
+    const next = text.slice(0, lineStart) + text.slice(start);
+    return { text: next, selection: { start: lineStart, end: lineStart } };
+  }
+
+  const opener = numbered
+    ? `${indent}${Number(marker) + 1}.${gap}`
+    : `${indent}${marker}${gap}`;
+  const inserted = `\n${opener}`;
+  const next = text.slice(0, start) + inserted + text.slice(start);
+  const at = start + inserted.length;
+  return { text: next, selection: { start: at, end: at } };
+}
+
+/* -------------------------------------------------------------------------- *
+ * What is already applied
+ * -------------------------------------------------------------------------- */
+
+/**
+ * Whether an inline marker is already around the caret or the selection.
+ *
+ * Both arrangements count, for the same reason `toggleWrap` accepts both: the
+ * writer may have selected `**bold**` or selected `bold` inside it, and with
+ * nothing selected at all the caret may simply be sitting between the markers.
+ */
+export function hasWrap(
+  text: string,
+  selection: EditorSelection,
+  marker: string
+): boolean {
+  const { start, end } = normalise(text, selection);
+  const selected = text.slice(start, end);
+  const len = marker.length;
+
+  if (
+    selected.length >= len * 2 &&
+    selected.startsWith(marker) &&
+    selected.endsWith(marker)
+  ) {
+    return true;
+  }
+
+  return (
+    text.slice(Math.max(0, start - len), start) === marker &&
+    text.slice(end, end + len) === marker
+  );
+}
+
+/** Whether every line the selection touches already starts with `prefix`. */
+export function hasLinePrefix(
+  text: string,
+  selection: EditorSelection,
+  prefix: string
+): boolean {
+  const range = lineRange(text, selection);
+  return text
+    .slice(range.start, range.end)
+    .split('\n')
+    .every((line) => line.startsWith(prefix));
+}
+
+/** Whether every line the selection touches is already numbered. */
+export function hasOrderedList(text: string, selection: EditorSelection): boolean {
+  const range = lineRange(text, selection);
+  return text
+    .slice(range.start, range.end)
+    .split('\n')
+    .every((line) => ORDERED.test(line));
+}
+
+/** Whether the selection is inside a fence. */
+export function hasFence(text: string, selection: EditorSelection): boolean {
+  return enclosingFence(text, selection) !== null;
+}

package/src/components/marquee/index.tsx

@@ -46,8 +46,10 @@
  */
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useState,
   type ComponentType,
@@ -69,6 +71,7 @@ import Animated, {
   useReducedMotion,
   useSharedValue,
   withRepeat,
+  withSequence,
   withTiming,
 } from 'react-native-reanimated';
 import { useDirectionSign } from '../../hooks/use-direction';
@@ -130,6 +133,15 @@ export interface MarqueeProps extends Omit<ViewProps, 'children'> {
 interface MarqueeGroupContextValue {
   /** True while the group's control is holding everything in it still. */
   paused: boolean;
+  /**
+   * How a marquee inside the group reports whether it has a loop to stop.
+   *
+   * The group draws one control for everything in it, and it should not offer
+   * to pause content that never measured — the failure mode a marquee already
+   * has, where a child with no intrinsic size never starts. Only the marquees
+   * themselves know that, so they say so.
+   */
+  report: (id: string, live: boolean) => void;
 }
 
 const MarqueeGroupContext = createContext<MarqueeGroupContextValue | null>(null);
@@ -185,18 +197,43 @@ function MarqueeRoot({
 
   const offset = useSharedValue(0);
 
+  /*
+   * A re-measure is the only thing allowed to move the content back to the
+   * start. The loop length has changed, so an offset taken against the old one
+   * no longer means anything.
+   */
   useEffect(() => {
     cancelAnimation(offset);
     offset.value = 0;
+  }, [offset, period]);
+
+  /*
+   * Pausing freezes where it is. `cancelAnimation` already leaves the shared
+   * value at whatever it had reached, so stopping is simply not starting again
+   * — the content stays exactly where the reader stopped it, which is the
+   * whole point of a pause control on something they are trying to read.
+   *
+   * Resuming picks up from there. The first leg is shortened to the distance
+   * actually left, or the lap after a pause would run at a fraction of the
+   * speed every other lap runs at.
+   */
+  useEffect(() => {
+    cancelAnimation(offset);
     if (reducedMotion || !moving || period <= 0 || speed <= 0) return undefined;
-    offset.value = withRepeat(
-      withTiming(period, {
-        duration: (period / speed) * 1000,
-        easing: Easing.linear,
-      }),
-      -1,
-      false
+
+    const cycle = (period / speed) * 1000;
+    const from = ((offset.value % period) + period) % period;
+    const remaining = period - from;
+
+    offset.value = from;
+    offset.value = withSequence(
+      withTiming(period, { duration: cycle * (remaining / period), easing: Easing.linear }),
+      // Back to the seam in no time at all. The state at `period` is the state
+      // at `0`, so this is a bookkeeping step rather than a visible one.
+      withTiming(0, { duration: 0 }),
+      withRepeat(withTiming(period, { duration: cycle, easing: Easing.linear }), -1, false)
     );
+
     return () => cancelAnimation(offset);
   }, [offset, period, moving, reducedMotion, speed]);
 
@@ -220,6 +257,24 @@ function MarqueeRoot({
     setContent(horizontal ? width : height);
   };
 
+  /*
+   * Whether there is motion here at all: content that measured, a speed to
+   * travel it at, and a `playing` that has not already stopped it from
+   * outside. A control offering to pause a still marquee is the same lie as a
+   * disabled button with no reason on it.
+   */
+  const live = playing && !reducedMotion && period > 0 && speed > 0;
+
+  // Reported to the group, if there is one, so its single control can be
+  // decided the same way this one's is.
+  const id = useId();
+  const report = group?.report;
+  useEffect(() => {
+    if (!report) return undefined;
+    report(id, live);
+    return () => report(id, false);
+  }, [report, id, live]);
+
   // Nothing to loop, so nothing to clip or clone: render the content plainly
   // and let it sit where it falls.
   if (reducedMotion) {
@@ -236,56 +291,61 @@ function MarqueeRoot({
   }
 
   return (
-    <View
-      className={cn('overflow-hidden', className)}
-      style={style}
-      onLayout={onContainerLayout}
-      {...props}
-    >
-      {/* Measured, never seen. A scroller on this axis is what frees the
-          content to report its own size instead of the container's. */}
-      <ScrollView
-        horizontal={horizontal}
-        scrollEnabled={false}
-        style={styles.measure}
-        pointerEvents="none"
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-      >
-        <InertView
-          inert={Platform.OS === 'web' ? true : undefined}
-          onLayout={onContentLayout}
+    <View className={cn('gap-3', className)} style={style} onLayout={onLayout} {...props}>
+      {/* The track, and only the track. The control below it is not clipped by
+          this and does not travel with it. */}
+      <View className="flex-1 overflow-hidden" onLayout={onContainerLayout}>
+        {/* Measured, never seen. A scroller on this axis is what frees the
+            content to report its own size instead of the container's. */}
+        <ScrollView
+          horizontal={horizontal}
+          scrollEnabled={false}
+          style={styles.measure}
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
         >
-          {children}
-        </InertView>
-      </ScrollView>
-
-      <Animated.View style={[StyleSheet.absoluteFill, trackStyle]} pointerEvents="box-none">
-        {copies.map((index) => {
-          // Index 1 is the copy that starts flush with the container's edge,
-          // and it is the one a screen reader is given.
-          const spoken = index === 1;
-          const at = (index - 1) * period;
-          return (
-            <InertView
-              key={index}
-              style={[styles.copy, horizontal ? { left: at } : { top: at }]}
-              pointerEvents={spoken ? 'box-none' : 'none'}
-              inert={Platform.OS === 'web' && !spoken ? true : undefined}
-              aria-hidden={!spoken}
-              accessibilityElementsHidden={!spoken}
-              importantForAccessibility={spoken ? 'auto' : 'no-hide-descendants'}
-            >
-              {children}
-            </InertView>
-          );
-        })}
-      </Animated.View>
-      {showControl && playing && period > 0 && speed > 0 ? (
+          <InertView
+            inert={Platform.OS === 'web' ? true : undefined}
+            onLayout={onContentLayout}
+          >
+            {children}
+          </InertView>
+        </ScrollView>
+
+        <Animated.View style={[StyleSheet.absoluteFill, trackStyle]} pointerEvents="box-none">
+          {copies.map((index) => {
+            // Index 1 is the copy that starts flush with the container's edge,
+            // and it is the one a screen reader is given.
+            const spoken = index === 1;
+            const at = (index - 1) * period;
+            return (
+              <InertView
+                key={index}
+                style={[styles.copy, horizontal ? { left: at } : { top: at }]}
+                pointerEvents={spoken ? 'box-none' : 'none'}
+                inert={Platform.OS === 'web' && !spoken ? true : undefined}
+                aria-hidden={!spoken}
+                accessibilityElementsHidden={!spoken}
+                importantForAccessibility={spoken ? 'auto' : 'no-hide-descendants'}
+              >
+                {children}
+              </InertView>
+            );
+          })}
+        </Animated.View>
+      </View>
+      {showControl && live ? (
         <Pressable
           accessibilityRole="button"
           accessibilityLabel={userPaused ? playLabel : pauseLabel}
-          className="absolute bottom-2 end-2 min-h-12 min-w-12 items-center justify-center rounded-full border border-border bg-background/95 px-3"
+          /*
+           * Below the content, in flow, the way a group's control already is.
+           * Floating over the track it was clipped by the track's own
+           * `overflow-hidden` — a 48pt target on a strip of badges half that
+           * tall — and it covered the content it was there to let you read.
+           */
+          className="min-h-12 self-end items-center justify-center rounded-full border border-border bg-background px-4"
           onPress={() => {
             const next = !userPaused;
             setUserPaused(next);
@@ -349,14 +409,27 @@ function MarqueeGroup({
   ...props
 }: MarqueeGroupProps) {
   const [userPaused, setUserPaused] = useState(false);
+  const [liveRows, setLiveRows] = useState<ReadonlySet<string>>(() => new Set());
   const reducedMotion = useReducedMotion();
 
-  const value = useMemo(() => ({ paused: userPaused }), [userPaused]);
+  // Each marquee inside says whether it has a loop to stop, and the group's
+  // control is drawn only if at least one of them does.
+  const report = useCallback((id: string, live: boolean) => {
+    setLiveRows((current) => {
+      if (current.has(id) === live) return current;
+      const next = new Set(current);
+      if (live) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const value = useMemo(() => ({ paused: userPaused, report }), [userPaused, report]);
 
   // Nothing is moving, so there is nothing to stop. The control is not hidden
   // to save space — offering to pause content that is already still is the
   // same lie as a disabled button with no reason on it.
-  const showControl = showPauseControl && playing && !reducedMotion;
+  const showControl = showPauseControl && playing && !reducedMotion && liveRows.size > 0;
 
   return (
     <MarqueeGroupContext.Provider value={value}>