@multiplatform.one/rich-text 7.11.0 → 7.15.0

package/src/editor/TentapEditor.native.tsx

@@ -36,7 +36,7 @@ import {
   darkEditorCss,
   darkEditorTheme,
 } from "@10play/tentap-editor";
-import { View, useTheme, useThemeName } from "tamagui";
+import { View, getConfig, getVariableValue, useTheme, useThemeName } from "tamagui";
 import type { RichEditorProps, RichEditorRef, EditorCommand } from "../types";
 import { RichEditorContext } from "../context";
 import { PALETTE_THEME_TOKENS } from "../constants";
@@ -46,13 +46,56 @@ import { getEditorCSS } from "./editorStyles";
 import { escapeNativeEditorCSS } from "./nativeEditorCSS";
 import { htmlToMarkdown, markdownToHtml } from "./markdown";
 
-function useNativeEditorDarkMode(): boolean {
-  const themeName = useThemeName();
+type EditorScheme = "light" | "dark";
+
+function useNativeEditorScheme() {
+  const themeName = String(useThemeName() || "");
   const osScheme = useColorScheme();
-  if (themeName) {
-    return String(themeName).startsWith("dark");
-  }
-  return osScheme === "dark";
+  const scheme: EditorScheme = themeName
+    ? themeName.startsWith("dark")
+      ? "dark"
+      : "light"
+    : osScheme === "dark"
+      ? "dark"
+      : "light";
+  return { themeName: themeName || scheme, scheme, followsAppearance: osScheme === scheme };
+}
+
+function paletteDecls(read: (token: string) => unknown): string {
+  return PALETTE_THEME_TOKENS.flatMap((token) => {
+    const value = read(token);
+    return value ? [`--${token}: ${value};`] : [];
+  }).join(" ");
+}
+
+/**
+ * A theme that follows the appearance gets both palettes behind
+ * prefers-color-scheme, so the WebView repaints on a scheme flip JS never
+ * hears about: a fullScreen modal detaches the root view, and RN's Appearance
+ * stays silent until it closes (MPO-187).
+ */
+function schemeStyles(
+  themeName: string,
+  scheme: EditorScheme,
+  followsAppearance: boolean,
+  current: string,
+): { dark: string; palette: string } {
+  const staticStyles = {
+    dark: scheme === "dark" ? darkEditorCss : "",
+    palette: `:root { ${current} }`,
+  };
+  if (!followsAppearance) return staticStyles;
+  const other: EditorScheme = scheme === "dark" ? "light" : "dark";
+  const otherTheme = (getConfig().themes as Record<string, Record<string, unknown>>)[
+    themeName.replace(/^(light|dark)/, other)
+  ];
+  if (!otherTheme) return staticStyles;
+  const opposite = paletteDecls((token) => getVariableValue(otherTheme[token]));
+  const byScheme = { [scheme]: current, [other]: opposite } as Record<EditorScheme, string>;
+  return {
+    dark: `@media (prefers-color-scheme: dark) { ${darkEditorCss} }`,
+    palette: `@media (prefers-color-scheme: light) { :root { ${byScheme.light} } } @media (prefers-color-scheme: dark) { :root { ${byScheme.dark} } }`,
+  };
 }
 
 // ===========================================================================
@@ -91,7 +134,8 @@ export const TentapEditor = forwardRef(
   ) => {
     const ctx = RichEditorContext.useStyledContext();
     const placeholder = placeholderProp ?? t("Start writing...");
-    const isDarkMode = useNativeEditorDarkMode();
+    const { themeName, scheme, followsAppearance } = useNativeEditorScheme();
+    const isDarkMode = scheme === "dark";
     const cachedHtml = useRef<string>("");
     const cachedJson = useRef<any>(null);
 
@@ -133,14 +177,16 @@ export const TentapEditor = forwardRef(
       const inject = (css: string, tag: string) => {
         editor.injectCSS(escapeNativeEditorCSS(css), tag);
       };
-      inject(isDarkMode ? darkEditorCss : "", "multiplatform-tentap-dark");
       // The WebView has no Tamagui stylesheet. Resolve the same palette as
       // web-authored color/highlight marks before applying content rules.
-      const decls = PALETTE_THEME_TOKENS.map((token) => {
-        const value = (theme as any)[token]?.val;
-        return value ? `--${token}: ${value};` : "";
-      }).join(" ");
-      inject(`:root { ${decls} }`, "multiplatform-tentap-palette");
+      const styles = schemeStyles(
+        themeName,
+        scheme,
+        followsAppearance,
+        paletteDecls((token) => (theme as any)[token]?.val),
+      );
+      inject(styles.dark, "multiplatform-tentap-dark");
+      inject(styles.palette, "multiplatform-tentap-palette");
       inject(
         getEditorCSS({
           minHeight,
@@ -152,7 +198,18 @@ export const TentapEditor = forwardRef(
         }),
         "multiplatform-tentap-content",
       );
-    }, [editor, isDarkMode, theme, minHeight, maxHeight, bodyFontFamily, headingFontFamily, fill]);
+    }, [
+      editor,
+      themeName,
+      scheme,
+      followsAppearance,
+      theme,
+      minHeight,
+      maxHeight,
+      bodyFontFamily,
+      headingFontFamily,
+      fill,
+    ]);
 
     // TenTap invokes this after its internal onLoad handling, including its
     // first-load iOS reload. Apply on every load so the replacement document

package/src/toolbar/ColorPicker.tsx

@@ -80,7 +80,7 @@ export function TextColorPicker({ editorRef, state, disabled }: ColorPickerProps
   );
 
   return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
       <Popover.Trigger asChild>
         <ToolbarButton
           active={!!state.textColor}
@@ -123,7 +123,7 @@ export function HighlightColorPicker({ editorRef, state, disabled }: ColorPicker
   );
 
   return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
       <Popover.Trigger asChild>
         <ToolbarButton
           active={!!state.highlightColor}

package/src/toolbar/ImageDialog.tsx

@@ -43,7 +43,7 @@ export function ImageDialog({ editorRef, disabled }: ImageDialogProps) {
   }, [imageUrl, editorRef]);
 
   return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
       <Popover.Trigger asChild>
         <ToolbarButton
           disabled={disabled}

package/src/toolbar/LinkDialog.tsx

@@ -69,7 +69,7 @@ export function LinkDialog({
   }, [editorRef]);
 
   return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom">
+    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
       <Popover.Trigger asChild>
         <ToolbarButton
           active={state.isLink}

package/src/toolbar/MoreDropdown.tsx

@@ -159,7 +159,7 @@ export function MoreDropdown({
   );
 
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen} placement="bottom-end">
+    <DropdownMenu open={open} onOpenChange={setOpen} placement="bottom-start">
       <DropdownMenu.Trigger asChild>
         <ToolbarButton
           disabled={disabled}

package/src/toolbar/TableBubble.spec.tsx

@@ -117,6 +117,12 @@ describe("TableBubble", () => {
     expect(bubble.props?.options).toMatchObject({ placement: "top-start" });
   });
 
+  it("attaches flush to the table at the overlay family gap, not a private 6px (MPO-35)", () => {
+    const { editor } = makeEditor();
+    render(editor);
+    expect(bubble.props?.options).toMatchObject({ offset: 0 });
+  });
+
   // LC-52: GFM pipe tables are plain grids, so merge and split have no
   // markdown form. The markdown capability must drop exactly those two.
   it("markdown capability removes exactly mergeCells and splitCell", () => {

package/src/toolbar/TableBubble.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import type { Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { PopoverContent } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { OVERLAY_ATTACH_GAP, useResolvedKnobs } from "@multiplatform.one/theme";
 import { ColumnsPlusRightIcon, RowsPlusBottomIcon, TrashIcon } from "@phosphor-icons/react";
 import { Popover, Text, XStack, YStack } from "tamagui";
 import { DropdownMenuItemFrame, ToolbarSeparatorFrame } from "../styled";
@@ -111,7 +111,7 @@ export function TableBubble({ editor, capabilities = "full" }: TableBubbleProps)
       // the first row and holds still while typing in cells (LC-06 spirit:
       // chrome must not sit on top of the content being edited).
       getReferencedVirtualElement={() => getBlockVirtualElement(editor, "table")}
-      options={{ placement: "top-start", offset: 6 }}
+      options={{ placement: "top-start", offset: OVERLAY_ATTACH_GAP }}
     >
       <XStack
         backgroundColor="$background"

package/src/toolbar/toolbarMenuAnchoring.spec.ts

@@ -0,0 +1,32 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+// MPO-35 ruling B (Clay, 2026-09-26): toolbar menus are input-anchored. Each
+// one drops flush below its trigger and starts at the trigger's left edge, so
+// a menu never covers the toolbar being worked in and never centres itself
+// off to one side. The selection and block bubbles are their own lineage and
+// are not held to this.
+const here = dirname(fileURLToPath(import.meta.url));
+const toolbarMenus = {
+  "ColorPicker.tsx": 2,
+  "HeadingPicker.tsx": 1,
+  "ImageDialog.tsx": 1,
+  "LinkDialog.tsx": 1,
+  "ListPicker.tsx": 1,
+  "MoreDropdown.tsx": 1,
+} as const;
+
+describe("rich-text toolbar menus open input-anchored (MPO-35)", () => {
+  for (const [file, menus] of Object.entries(toolbarMenus)) {
+    it(`${file}: every menu opens bottom-start`, () => {
+      const src = readFileSync(join(here, file), "utf8");
+      const placements = [
+        ...src.matchAll(/<(?:Popover|DropdownMenu)\b[^>]*placement="([^"]+)"/g),
+      ].map((match) => match[1]);
+      expect(placements).toHaveLength(menus);
+      expect(placements.every((placement) => placement === "bottom-start")).toBe(true);
+    });
+  }
+});

package/src/toolbar/useHorizontalScroll.tsx

@@ -9,6 +9,7 @@ import { View } from "tamagui";
 import { LinearGradient } from "@tamagui/linear-gradient";
 import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { useDirection } from "@multiplatform.one/components";
+import { transitionProps } from "@multiplatform.one/theme";
 
 const scrollArrowThreshold = 8;
 
@@ -276,7 +277,7 @@ export function HorizontalScrollArrow({
       opacity={visible ? 1 : 0}
       // `animation` is the tamagui 1.x prop — silently dropped on 2.x, which
       // left this opacity fade popping.
-      {...(transition ? { transition } : undefined)}
+      {...transitionProps(transition)}
       onPointerEnter={visible ? handlePointerEnter : undefined}
       onPointerLeave={handlePointerLeave}
       data-testid={`toolbar-scroll-arrow-${direction}`}

package/types/editor/TentapEditor.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TentapEditor.native.d.ts","sourceRoot":"","sources":["../../src/editor/TentapEditor.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AA0BH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAiB,MAAM,UAAU,CAAC;AAsB9E,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID,eAAO,MAAM,YAAY,6GA6QxB,CAAC"}
+{"version":3,"file":"TentapEditor.native.d.ts","sourceRoot":"","sources":["../../src/editor/TentapEditor.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AA0BH,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAiB,MAAM,UAAU,CAAC;AAiE9E,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+EAA+E;IAC/E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAID,eAAO,MAAM,YAAY,6GA2RxB,CAAC"}

package/types/toolbar/useHorizontalScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalScroll.d.ts","sourceRoot":"","sources":["../../src/toolbar/useHorizontalScroll.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC,EACxE,SAAS,EAAE,KAAK,GAAG,KAAK,GACvB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CAOjD;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,QAsE9E;AAMD;;GAEG;AACH,wBAAgB,yBAAyB;;;;4BAO3B,WAAW;EAWxB;AAMD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,UAAU,GACX,EAAE,0BAA0B,2CAwI5B"}
+{"version":3,"file":"useHorizontalScroll.d.ts","sourceRoot":"","sources":["../../src/toolbar/useHorizontalScroll.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAWH;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC,EACxE,SAAS,EAAE,KAAK,GAAG,KAAK,GACvB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,CAOjD;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,QAsE9E;AAMD;;GAEG;AACH,wBAAgB,yBAAyB;;;;4BAO3B,WAAW;EAWxB;AAMD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,SAAS,EACT,OAAO,EACP,iBAAiB,EACjB,UAAU,GACX,EAAE,0BAA0B,2CAwI5B"}