@ibodr/editor 0.1.11 → 0.1.13

package/dist/index.d.ts

@@ -49,7 +49,7 @@ interface DrUserPreferences {
     animationSpeed?: number | null;
     areKeyboardShortcutsEnabled?: boolean | null;
     edgeScrollSpeed?: number | null;
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | 'inherit';
     isSnapMode?: boolean | null;
     isWrapMode?: boolean | null;
     isDynamicSizeMode?: boolean | null;
@@ -4160,7 +4160,7 @@ declare class UserPreferencesManager {
     systemColorScheme: _ibodr_state.Atom<"light" | "dark", unknown>;
     disposables: Set<() => void>;
     dispose(): void;
-    constructor(user: DrCurrentUser, colorScheme: 'light' | 'dark' | 'system');
+    constructor(user: DrCurrentUser, colorScheme: 'light' | 'dark' | 'system' | 'inherit');
     updateUserPreferences(userPreferences: Partial<DrUserPreferences>): void;
     getUserPreferences(): {
         id: string;
@@ -4170,7 +4170,7 @@ declare class UserPreferencesManager {
         animationSpeed: number;
         areKeyboardShortcutsEnabled: boolean;
         isSnapMode: boolean;
-        colorScheme: "light" | "dark" | "system" | undefined;
+        colorScheme: "light" | "dark" | "system" | "inherit" | undefined;
         isDarkMode: boolean;
         isWrapMode: boolean;
         isDynamicResizeMode: boolean;
@@ -4535,7 +4535,7 @@ interface DrEditorOptions {
      * - `'dark'` - Always use dark mode.
      * - `'system'` - Follow the OS color scheme preference.
      */
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | 'inherit';
     /**
      * Additional configuration options for the tldraw editor.
      */
@@ -10003,8 +10003,10 @@ interface DrawEditorBaseProps {
      * - `'light'` - Always use light mode.
      * - `'dark'` - Always use dark mode.
      * - `'system'` - Follow the OS color scheme preference.
+     * - `'inherit'` - Follow the nearest ancestor's `data-color-mode` attribute
+     *   (for embedding inside a host app that manages its own theme).
      */
-    colorScheme?: 'light' | 'dark' | 'system';
+    colorScheme?: 'light' | 'dark' | 'system' | 'inherit';
     /**
      * Named themes for the editor.
      */

package/dist/index.mjs

@@ -5043,7 +5043,7 @@ var userTypeValidator = T.object({
   animationSpeed: T.number.nullable().optional(),
   areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
   edgeScrollSpeed: T.number.nullable().optional(),
-  colorScheme: T.literalEnum("light", "dark", "system").optional(),
+  colorScheme: T.literalEnum("light", "dark", "system", "inherit").optional(),
   isSnapMode: T.boolean.nullable().optional(),
   isWrapMode: T.boolean.nullable().optional(),
   isDynamicSizeMode: T.boolean.nullable().optional(),
@@ -24543,6 +24543,25 @@ var Stadium2d = class extends Geometry2d {
     return [a, b, c, d].map((p, i) => p.getSvgPathData(i === 0)).join(" ") + " Z";
   }
 };
+
+// src/lib/utils/resolveInheritedColorMode.ts
+function resolveInheritedColorMode(container) {
+  const doc = container.ownerDocument;
+  const candidates = [];
+  let el = container.parentElement;
+  while (el) {
+    candidates.push(el);
+    el = el.parentElement;
+  }
+  if (doc?.documentElement) {
+    candidates.push(doc.documentElement);
+  }
+  for (const node of candidates) {
+    const mode = node.getAttribute("data-color-mode");
+    if (mode === "dark" || mode === "light") return mode;
+  }
+  return null;
+}
 function useDarkMode() {
   const editor = useEditor();
   const container = useContainer();
@@ -24858,6 +24877,36 @@ function DrawEditorWithReadyStore({
       editor.setCurrentTheme(initialTheme);
     }
   }, [editor, initialTheme]);
+  useLayoutEffect(() => {
+    if (!editor || !colorScheme || colorScheme === "system" || colorScheme === "inherit") return;
+    editor.setColorMode(colorScheme);
+  }, [editor, colorScheme]);
+  useLayoutEffect(() => {
+    if (!editor || colorScheme !== "inherit") return;
+    const container2 = editor.getContainer();
+    const sync = () => {
+      const inherited = resolveInheritedColorMode(container2);
+      if (inherited) {
+        editor.setColorMode(inherited);
+      }
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    const targets = /* @__PURE__ */ new Set();
+    let el = container2.parentElement;
+    while (el) {
+      targets.add(el);
+      el = el.parentElement;
+    }
+    targets.add(container2.ownerDocument.documentElement);
+    for (const target of targets) {
+      observer.observe(target, {
+        attributes: true,
+        attributeFilter: ["data-color-mode", "class"]
+      });
+    }
+    return () => observer.disconnect();
+  }, [editor, colorScheme]);
   const crashingError = useSyncExternalStore(
     useCallback(
       (onStoreChange) => {
@@ -25058,7 +25107,7 @@ function getFontsFromRichText(editor, richText, initialState2) {
 // src/index.ts
 registerDrawLibraryVersion(
   "@ibodr/editor",
-  "0.1.11",
+  "0.1.13",
   "esm"
 );
 /*!