@umituz/react-native-photo-editor 2.0.24 → 2.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "2.0.24",
+  "version": "2.0.26",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/PhotoEditor.tsx

@@ -3,31 +3,25 @@
  * Main entry point for the photo editor
  */
 
-import React, { useCallback, useMemo } from "react";
-import { View, ScrollView, TouchableOpacity } from "react-native";
-import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import React, { useMemo } from "react";
+import { View } from "react-native";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
-
-import { EditorCanvas } from "./presentation/components/EditorCanvas";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { EditorHeader } from "./presentation/components/EditorHeader";
+import { EditorContent } from "./presentation/components/EditorContent";
+import { EditorSheets } from "./presentation/components/EditorSheets";
 import { EditorToolbar } from "./presentation/components/EditorToolbar";
-import { FontControls } from "./presentation/components/FontControls";
-import { TextEditorSheet } from "./presentation/components/sheets/TextEditorSheet";
-import { StickerPicker } from "./presentation/components/sheets/StickerPicker";
-import { FilterSheet } from "./presentation/components/sheets/FilterSheet";
-import { AdjustmentsSheet } from "./presentation/components/sheets/AdjustmentsSheet";
-import { LayerManager } from "./presentation/components/sheets/LayerManager";
-import { AIMagicSheet } from "./presentation/components/sheets/AIMagicSheet";
 import { useEditorUI } from "./application/hooks/useEditorUI";
-import { DEFAULT_FONTS } from "./constants";
+import { DEFAULT_FONTS } from "./utils/constants";
+import type { Layer } from "./domain/entities/Layer.entity";
+import type { FilterSettings } from "./domain/value-objects/FilterSettings.vo";
 
 export interface PhotoEditorProps {
   imageUri: string;
-  onSave?: (uri: string, layers: any[], filters: Record<string, number>) => void;
+  onSave?: (uri: string, layers: Layer[], filters: FilterSettings) => void;
   onClose: () => void;
   title?: string;
-  customTools?: React.ReactNode | ((ui: ReturnType<typeof useEditorUI>) => React.ReactNode);
+  customTools?: React.ReactNode | ((ui: unknown) => React.ReactNode);
   initialCaption?: string;
   t: (key: string) => string;
   fonts?: readonly string[];
@@ -49,73 +43,42 @@ export function PhotoEditor({
   const insets = useSafeAreaInsets();
   const ui = useEditorUI(initialCaption);
 
-  const styles = useMemo(() => ({
-    container: {
-      flex: 1,
-      backgroundColor: tokens.colors.surface,
-      paddingTop: insets.top,
-    },
-    header: {
-      flexDirection: "row" as const,
-      alignItems: "center" as const,
-      justifyContent: "space-between" as const,
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.sm,
-      borderBottomWidth: 1,
-      borderBottomColor: tokens.colors.border,
-    },
-    headerTitle: {
-      flex: 1,
-      textAlign: "center",
-    },
-    scrollContent: {
-      padding: tokens.spacing.md,
-      gap: tokens.spacing.md,
-    },
-  }), [tokens, insets]);
-
-  const handleSave = useCallback(
-    () => onSave?.(imageUri, ui.layers.map(l => l.toJSON()), ui.filters),
-    [onSave, imageUri, ui.layers, ui.filters],
+  const styles = useMemo(
+    () => ({
+      container: {
+        flex: 1,
+        backgroundColor: tokens.colors.surface,
+        paddingTop: insets.top,
+      },
+    }),
+    [tokens, insets]
   );
 
+  const handleSave = () =>
+    onSave?.(imageUri, ui.layers, ui.filters);
+
   return (
     <View style={styles.container}>
-      {/* Header */}
-      <View style={styles.header}>
-        <TouchableOpacity onPress={onClose} accessibilityLabel="Close editor" accessibilityRole="button">
-          <AtomicIcon name="close" size="md" color="textPrimary" />
-        </TouchableOpacity>
-        <AtomicText type="headlineSmall" style={styles.headerTitle}>
-          {title}
-        </AtomicText>
-        <TouchableOpacity onPress={handleSave} accessibilityLabel="Save" accessibilityRole="button">
-          <AtomicText fontWeight="bold" color="primary">
-            {t("common.save") || "Save"}
-          </AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <ScrollView contentContainerStyle={styles.scrollContent}>
-        <EditorCanvas
-          imageUrl={imageUri}
-          layers={ui.layers}
-          activeLayerId={ui.activeLayerId}
-          filters={ui.filters}
-          onLayerTap={ui.handleTextLayerTap}
-          onLayerTransform={ui.handleLayerTransform}
-        />
-
-        {typeof customTools === "function" ? customTools(ui) : customTools}
+      <EditorHeader
+        title={title}
+        saveLabel={t("common.save") || "Save"}
+        onClose={onClose}
+        onSave={handleSave}
+      />
 
-        <FontControls
-          fontSize={ui.fontSize}
-          selectedFont={ui.selectedFont}
-          fonts={fonts}
-          onFontSizeChange={ui.setFontSize}
-          onFontSelect={ui.setSelectedFont}
-        />
-      </ScrollView>
+      <EditorContent
+        imageUrl={imageUri}
+        layers={ui.layers}
+        filters={ui.filters}
+        activeLayerId={ui.activeLayerId}
+        selectedFont={ui.selectedFont}
+        fontSize={ui.fontSize}
+        fonts={fonts}
+        customTools={customTools}
+        ui={ui}
+        onFontSizeChange={ui.setFontSize}
+        onFontSelect={ui.setSelectedFont}
+      />
 
       <EditorToolbar
         onAddText={ui.handleAddText}
@@ -131,64 +94,7 @@ export function PhotoEditor({
         t={t}
       />
 
-      {/* Bottom Sheets */}
-      <BottomSheetModal ref={ui.textEditorSheetRef} snapPoints={["55%"]}>
-        <TextEditorSheet
-          value={ui.editingText}
-          onChange={ui.setEditingText}
-          onSave={ui.handleSaveText}
-          t={t}
-          color={ui.editingColor}
-          onColorChange={ui.setEditingColor}
-          textAlign={ui.editingAlign}
-          onTextAlignChange={ui.setEditingAlign}
-          isBold={ui.editingBold}
-          onBoldChange={ui.setEditingBold}
-          isItalic={ui.editingItalic}
-          onItalicChange={ui.setEditingItalic}
-        />
-      </BottomSheetModal>
-
-      <BottomSheetModal ref={ui.stickerSheetRef} snapPoints={["50%"]}>
-        <StickerPicker onSelectSticker={ui.handleSelectSticker} />
-      </BottomSheetModal>
-
-      <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}>
-        <FilterSheet
-          selectedFilter={ui.selectedFilter}
-          onSelectFilter={(option) => {
-            ui.setSelectedFilter(option.id);
-            ui.updateFilters(option.filters);
-            ui.filterSheetRef.current?.dismiss();
-          }}
-        />
-      </BottomSheetModal>
-
-      <BottomSheetModal ref={ui.adjustmentsSheetRef} snapPoints={["55%"]}>
-        <AdjustmentsSheet
-          filters={ui.filters}
-          onFiltersChange={ui.updateFilters}
-        />
-      </BottomSheetModal>
-
-      <BottomSheetModal ref={ui.layerSheetRef} snapPoints={["55%"]}>
-        <LayerManager
-          layers={ui.layers}
-          activeLayerId={ui.activeLayerId}
-          onSelectLayer={ui.selectLayer}
-          onDeleteLayer={ui.deleteLayer}
-          onDuplicateLayer={ui.duplicateLayer}
-          onMoveLayerUp={ui.moveLayerUp}
-          onMoveLayerDown={ui.moveLayerDown}
-          t={t}
-        />
-      </BottomSheetModal>
-
-      {onAICaption && (
-        <BottomSheetModal ref={ui.aiSheetRef} snapPoints={["60%"]}>
-          <AIMagicSheet onGenerateCaption={onAICaption} />
-        </BottomSheetModal>
-      )}
+      <EditorSheets ui={ui} filters={ui.filters} t={t} onAICaption={onAICaption} />
     </View>
   );
 }

package/src/application/hooks/useEditor.ts

@@ -5,10 +5,6 @@
 
 import { useMemo } from "react";
 import { useEditorStore } from "../stores/EditorStore";
-import { Layer } from "../../domain/entities/Layer";
-import type { TextLayerData } from "../../domain/entities/Layer";
-import type { Transform } from "../../domain/entities/Transform";
-import type { FilterValues } from "../../domain/entities/Filters";
 
 export function useEditor() {
   const store = useEditorStore();
@@ -30,6 +26,7 @@ export function useEditor() {
     addTextLayer: store.addTextLayer,
     addStickerLayer: store.addStickerLayer,
     updateLayer: store.updateLayer,
+    updateTextLayerContent: store.updateTextLayerContent,
     deleteLayer: store.deleteLayer,
     duplicateLayer: store.duplicateLayer,
     moveLayerUp: store.moveLayerUp,
@@ -51,6 +48,7 @@ export function useEditor() {
     store.addTextLayer,
     store.addStickerLayer,
     store.updateLayer,
+    store.updateTextLayerContent,
     store.deleteLayer,
     store.duplicateLayer,
     store.moveLayerUp,
@@ -61,7 +59,7 @@ export function useEditor() {
   ]);
 }
 
-export type { Layer } from "../../domain/entities/Layer";
+export type { Layer } from "../../domain/entities/Layer.entity";
 export type { Transform } from "../../domain/entities/Transform";
 export type { FilterValues } from "../../domain/entities/Filters";
-export type { TextLayerData } from "../../domain/entities/Layer";
+export type { TextContent as TextLayerData } from "../../domain/types";

package/src/application/hooks/useEditorUI.ts

@@ -7,7 +7,8 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import type { BottomSheetModalRef } from "@umituz/react-native-design-system/molecules";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useEditor } from "./useEditor";
-import type { TextAlign } from "../../domain/entities/Layer";
+import type { TextAlign } from "../../domain/types";
+import type { Transform } from "../../domain/entities/Transform";
 
 export function useEditorUI(initialCaption?: string) {
   const tokens = useAppDesignTokens();
@@ -50,8 +51,8 @@ export function useEditorUI(initialCaption?: string) {
   // Handle text layer tap
   const handleTextLayerTap = useCallback((layerId: string) => {
     editor.selectLayer(layerId);
-    const layer = editor.layers.find(l => l.id === layerId);
-    if (layer?.type === "text") {
+    const layer = editor.layers.find((l: { id: string }) => l.id === layerId);
+    if (layer && layer.isText()) {
       setEditingText(layer.text ?? "");
       setFontSize(layer.fontSize ?? 48);
       setEditingColor(layer.color ?? tokens.colors.textPrimary);
@@ -64,8 +65,8 @@ export function useEditorUI(initialCaption?: string) {
 
   // Handle save text
   const handleSaveText = useCallback(() => {
-    if (editor.activeLayerId) {
-      editor.updateLayer(editor.activeLayerId, {
+    if (editor.activeLayerId && editor.activeLayer?.isText()) {
+      editor.updateTextLayerContent(editor.activeLayerId, {
         text: editingText,
         fontSize,
         fontFamily: selectedFont,
@@ -143,3 +144,5 @@ export function useEditorUI(initialCaption?: string) {
     handleLayerTransform,
   };
 }
+
+export type EditorUIState = ReturnType<typeof useEditorUI>;

package/src/application/stores/EditorStore.ts

@@ -4,8 +4,9 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { Layer, TextLayer, StickerLayer } from "../../domain/entities/Layer";
-import { FiltersVO, FilterValues, DEFAULT_FILTERS } from "../../domain/entities/Filters";
+import { Layer } from "../../domain/entities/Layer.entity";
+import type { TextContent as TextLayerData } from "../../domain/types";
+import { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
 import { HistoryService, HistoryState } from "../../domain/services/HistoryService";
 import { LayerService } from "../../domain/services/LayerService";
 import type { Transform } from "../../domain/entities/Transform";
@@ -19,27 +20,24 @@ export function useEditorStore() {
     historyService.createInitialState([])
   );
   const [activeLayerId, setActiveLayerId] = useState<string | null>(null);
-  const [filters, setFilters] = useState<FiltersVO>(FiltersVO.default());
+  const [filters, setFilters] = useState<FilterSettings>(FilterSettings.DEFAULT);
 
   // History actions
   const pushLayers = useCallback((layers: Layer[]) => {
-    setHistory((prev) => historyService.push(prev, layers));
+    setHistory((prev: HistoryState<Layer[]>) => historyService.push(prev, layers));
   }, []);
 
   const undo = useCallback(() => {
-    setHistory((prev) => historyService.undo(prev));
+    setHistory((prev: HistoryState<Layer[]>) => historyService.undo(prev));
   }, []);
 
   const redo = useCallback(() => {
-    setHistory((prev) => historyService.redo(prev));
+    setHistory((prev: HistoryState<Layer[]>) => historyService.redo(prev));
   }, []);
 
   // Layer actions
-  const addTextLayer = useCallback((overrides?: Partial<Omit<TextLayerData, "id" | "type">>) => {
-    const layer = layerService.createTextLayer({
-      ...overrides,
-      zIndex: history.present.length,
-    });
+  const addTextLayer = useCallback((overrides?: Partial<TextLayerData>) => {
+    const layer = layerService.createTextLayer(overrides || {});
     pushLayers([...history.present, layer]);
     setActiveLayerId(layer.id);
     return layer.id;
@@ -59,6 +57,16 @@ export function useEditorStore() {
     pushLayers(layers);
   }, [history.present, pushLayers]);
 
+  const updateTextLayerContent = useCallback((id: string, updates: Partial<Omit<TextLayerData, "id" | "type">>) => {
+    const layers = history.present.map(layer => {
+      if (layer.id === id && layer.isText()) {
+        return layer.withStyle(updates);
+      }
+      return layer;
+    });
+    pushLayers(layers);
+  }, [history.present, pushLayers]);
+
   const deleteLayer = useCallback((id: string) => {
     const layers = layerService.deleteLayer(history.present, id);
     pushLayers(layers);
@@ -89,19 +97,35 @@ export function useEditorStore() {
   }, []);
 
   // Filter actions
-  const updateFilters = useCallback((updates: Partial<FilterValues>) => {
-    const current = filters.toJSON();
-    setFilters(FiltersVO.from({ ...current, ...updates }));
+  const updateFilters = useCallback((updates: Partial<{ brightness: number; contrast: number; saturation: number; sepia: number; grayscale: number; hueRotate?: number }>) => {
+    if (updates.brightness !== undefined) {
+      setFilters(filters.withBrightness(updates.brightness));
+    }
+    if (updates.contrast !== undefined) {
+      setFilters(filters.withContrast(updates.contrast));
+    }
+    if (updates.saturation !== undefined) {
+      setFilters(filters.withSaturation(updates.saturation));
+    }
+    if (updates.sepia !== undefined) {
+      setFilters(filters.withSepia(updates.sepia));
+    }
+    if (updates.grayscale !== undefined) {
+      setFilters(filters.withGrayscale(updates.grayscale));
+    }
+    if (updates.hueRotate !== undefined) {
+      setFilters(filters.withHueRotate(updates.hueRotate));
+    }
   }, [filters]);
 
   const resetFilters = useCallback(() => {
-    setFilters(FiltersVO.default());
+    setFilters(FilterSettings.DEFAULT);
   }, []);
 
   // Getters
   const layers = useMemo(() => layerService.sortByZIndex(history.present), [history.present]);
   const activeLayer = useMemo(() =>
-    history.present.find(l => l.id === activeLayerId) ?? null,
+    history.present.find((l: Layer) => l.id === activeLayerId) ?? null,
   [history.present, activeLayerId]
   );
   const canUndo = useMemo(() => historyService.canUndo(history), [history]);
@@ -112,7 +136,7 @@ export function useEditorStore() {
     layers,
     activeLayerId,
     activeLayer,
-    filters: filters.toJSON(),
+    filters,
     canUndo,
     canRedo,
 
@@ -124,6 +148,7 @@ export function useEditorStore() {
     addTextLayer,
     addStickerLayer,
     updateLayer,
+    updateTextLayerContent,
     deleteLayer,
     duplicateLayer,
     moveLayerUp,

package/src/domain/entities/Layer.entity.ts

@@ -0,0 +1,138 @@
+/**
+ * Base Layer Entity
+ * Core layer abstraction with transform and appearance
+ */
+
+import type { LayerType, Position, Appearance, LayerContent } from "../types";
+import type { TextLayer } from "./TextLayer.entity";
+import type { StickerLayer } from "./StickerLayer.entity";
+import { TextLayer as TextLayerClass } from "./TextLayer.entity";
+import { StickerLayer as StickerLayerClass } from "./StickerLayer.entity";
+
+export class Layer {
+  readonly id: string;
+  readonly type: LayerType;
+  readonly position: Position;
+  readonly rotation: number;
+  readonly scale: number;
+  readonly appearance: Appearance;
+  readonly content: LayerContent;
+
+  constructor(data: {
+    id: string;
+    type: LayerType;
+    position: Position;
+    rotation: number;
+    scale: number;
+    appearance: Appearance;
+    content: LayerContent;
+  }) {
+    this.id = data.id;
+    this.type = data.type;
+    this.position = data.position;
+    this.rotation = data.rotation;
+    this.scale = data.scale;
+    this.appearance = data.appearance;
+    this.content = data.content;
+  }
+
+  // Convenience getters for backward compatibility
+  get x(): number { return this.position.x; }
+  get y(): number { return this.position.y; }
+  get zIndex(): number { return this.appearance.zIndex; }
+  get opacity(): number { return this.appearance.opacity; }
+
+  // Type guards
+  isText(): this is TextLayer {
+    return this.type === "text";
+  }
+
+  isSticker(): this is StickerLayer {
+    return this.type === "sticker";
+  }
+
+  // Immutable updates
+  withPosition(position: Partial<Position>): Layer {
+    return new Layer({
+      ...this,
+      position: { ...this.position, ...position },
+    });
+  }
+
+  withTransform(transform: { rotation?: number; scale?: number }): Layer {
+    return new Layer({
+      ...this,
+      ...transform,
+    });
+  }
+
+  withAppearance(appearance: Partial<Appearance>): Layer {
+    return new Layer({
+      ...this,
+      appearance: { ...this.appearance, ...appearance },
+    });
+  }
+
+  withZIndex(zIndex: number): Layer {
+    return this.withAppearance({ zIndex });
+  }
+
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      x: this.position.x,
+      y: this.position.y,
+      rotation: this.rotation,
+      scale: this.scale,
+      opacity: this.appearance.opacity,
+      zIndex: this.appearance.zIndex,
+      ...this.content,
+    };
+  }
+
+  static from(data: ReturnType<Layer["toJSON"]>): Layer {
+    if (data.type === "text") {
+      return new TextLayerClass({
+        id: data.id,
+        position: { x: data.x, y: data.y },
+        rotation: data.rotation,
+        scale: data.scale,
+        appearance: { opacity: data.opacity, zIndex: data.zIndex },
+        content: {
+          text: (data as Record<string, unknown>).text as string || "",
+          fontSize: (data as Record<string, unknown>).fontSize as number || 32,
+          fontFamily: (data as Record<string, unknown>).fontFamily as string || "System",
+          color: (data as Record<string, unknown>).color as string || "#FFFFFF",
+          backgroundColor: (data as Record<string, unknown>).backgroundColor as string || "transparent",
+          textAlign: (data as Record<string, unknown>).textAlign as "left" | "center" | "right" || "center",
+          isBold: (data as Record<string, unknown>).isBold as boolean || undefined,
+          isItalic: (data as Record<string, unknown>).isItalic as boolean || undefined,
+        },
+      });
+    }
+    return new StickerLayerClass({
+      id: data.id,
+      position: { x: data.x, y: data.y },
+      rotation: data.rotation,
+      scale: data.scale,
+      appearance: { opacity: data.opacity, zIndex: data.zIndex },
+      content: { uri: (data as Record<string, unknown>).uri as string || "" },
+    });
+  }
+}
+
+// Type exports for backward compatibility
+export type { TextLayer } from "./TextLayer.entity";
+export type { StickerLayer } from "./StickerLayer.entity";
+export type { TextAlign } from "../types";
+
+// Type guard functions for backward compatibility
+export function isTextLayer(layer: Layer): layer is TextLayer {
+  return layer.isText();
+}
+
+export function isStickerLayer(layer: Layer): layer is StickerLayer {
+  return layer.isSticker();
+}
+

package/src/domain/entities/{Layer.ts → Layer.legacy.ts}

@@ -41,7 +41,7 @@ export interface StickerLayerData extends BaseLayerData {
 export type LayerData = TextLayerData | StickerLayerData;
 
 export class Layer {
-  constructor(private readonly data: LayerData) {}
+  constructor(protected readonly data: LayerData) {}
 
   get id(): string { return this.data.id; }
   get type(): LayerType { return this.data.type; }
@@ -87,7 +87,7 @@ export class Layer {
 }
 
 export class TextLayer extends Layer {
-  declare readonly data: TextLayerData;
+  declare protected readonly data: TextLayerData;
 
   get text(): string { return this.data.text; }
   get fontSize(): number { return this.data.fontSize; }
@@ -108,7 +108,7 @@ export class TextLayer extends Layer {
 }
 
 export class StickerLayer extends Layer {
-  declare readonly data: StickerLayerData;
+  declare protected readonly data: StickerLayerData;
 
   get uri(): string { return this.data.uri; }
 

package/src/domain/entities/StickerLayer.entity.ts

@@ -0,0 +1,37 @@
+/**
+ * Sticker Layer Entity
+ * Specialized layer for sticker/image content
+ */
+
+import { Layer } from "./Layer.entity";
+import type { StickerContent, Position, Appearance } from "../types";
+
+export class StickerLayer extends Layer {
+  readonly content: StickerContent;
+
+  constructor(data: {
+    id: string;
+    position: Position;
+    rotation: number;
+    scale: number;
+    appearance: Appearance;
+    content: StickerContent;
+  }) {
+    super({
+      ...data,
+      type: "sticker",
+    });
+    this.content = data.content;
+  }
+
+  // Convenience getters
+  get uri(): string { return this.content.uri; }
+
+  // Immutable updates
+  withUri(uri: string): StickerLayer {
+    return new StickerLayer({
+      ...this,
+      content: { ...this.content, uri },
+    });
+  }
+}

package/src/domain/entities/TextLayer.entity.ts

@@ -0,0 +1,58 @@
+/**
+ * Text Layer Entity
+ * Specialized layer for text content with font and style properties
+ */
+
+import { Layer } from "./Layer.entity";
+import type { TextContent, Position, Appearance, TextAlign } from "../types";
+
+export class TextLayer extends Layer {
+  readonly content: TextContent;
+
+  constructor(data: {
+    id: string;
+    position: Position;
+    rotation: number;
+    scale: number;
+    appearance: Appearance;
+    content: TextContent;
+  }) {
+    super({
+      ...data,
+      type: "text",
+    });
+    this.content = data.content;
+  }
+
+  // Convenience getters
+  get text(): string { return this.content.text; }
+  get fontSize(): number { return this.content.fontSize; }
+  get fontFamily(): string { return this.content.fontFamily; }
+  get color(): string { return this.content.color; }
+  get backgroundColor(): string { return this.content.backgroundColor; }
+  get textAlign(): TextAlign { return this.content.textAlign; }
+  get isBold(): boolean { return this.content.isBold ?? false; }
+  get isItalic(): boolean { return this.content.isItalic ?? false; }
+
+  // Immutable updates
+  withText(text: string): TextLayer {
+    return new TextLayer({
+      ...this,
+      content: { ...this.content, text },
+    });
+  }
+
+  withStyle(styles: Partial<Omit<TextContent, "text">>): TextLayer {
+    return new TextLayer({
+      ...this,
+      content: { ...this.content, ...styles },
+    });
+  }
+
+  withContent(content: Partial<TextContent>): TextLayer {
+    return new TextLayer({
+      ...this,
+      content: { ...this.content, ...content },
+    });
+  }
+}