@multiplatform.one/rich-text 6.0.0

package/src/editor/useEditorState.spec.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from "vitest";
+import {
+  getEditorStateFromTiptap,
+  getEditorStateFromBridge,
+  defaultEditorState,
+} from "./useEditorState";
+
+describe("getEditorStateFromTiptap", () => {
+  it("returns defaultEditorState when editor is null", () => {
+    const state = getEditorStateFromTiptap(null);
+    expect(state).toEqual(defaultEditorState);
+  });
+
+  it("maps a mock Tiptap editor to correct EditorState shape", () => {
+    const mockEditor = {
+      isActive: (type: string, attrs?: any) => {
+        if (type === "bold") return true;
+        if (type === "heading" && attrs?.level === 2) return true;
+        if (type === "paragraph") return true;
+        if (type === "link") return true;
+        return false;
+      },
+      getAttributes: (type: string) => {
+        if (type === "textStyle") return { color: "#e53935" };
+        if (type === "highlight") return { color: "#fff59d" };
+        return {};
+      },
+      can: () => ({
+        undo: () => true,
+        redo: () => false,
+      }),
+    };
+
+    const state = getEditorStateFromTiptap(mockEditor);
+    expect(state.isBold).toBe(true);
+    expect(state.isItalic).toBe(false);
+    expect(state.isHeading2).toBe(true);
+    expect(state.isParagraph).toBe(false);
+    expect(state.isLink).toBe(true);
+    expect(state.textColor).toBe("#e53935");
+    expect(state.highlightColor).toBe("#fff59d");
+    expect(state.canUndo).toBe(true);
+    expect(state.canRedo).toBe(false);
+    expect(state.textAlign).toBe("left");
+  });
+});
+
+describe("getEditorStateFromBridge", () => {
+  it("returns defaultEditorState when bridgeState is null", () => {
+    const state = getEditorStateFromBridge(null);
+    expect(state).toEqual(defaultEditorState);
+  });
+
+  it("properly reads activeColor, activeHighlight, and isTaskListActive", () => {
+    const bridgeState = {
+      isBoldActive: true,
+      isItalicActive: false,
+      isUnderlineActive: false,
+      isStrikeActive: false,
+      isCodeActive: false,
+      headingLevel: 0,
+      isBulletListActive: false,
+      isOrderedListActive: false,
+      isTaskListActive: true,
+      isBlockquoteActive: false,
+      isLinkActive: false,
+      canUndo: true,
+      canRedo: false,
+      activeColor: "#1e88e5",
+      activeHighlight: "#c8e6c9",
+    };
+
+    const state = getEditorStateFromBridge(bridgeState);
+    expect(state.isBold).toBe(true);
+    expect(state.isTaskList).toBe(true);
+    expect(state.textColor).toBe("#1e88e5");
+    expect(state.highlightColor).toBe("#c8e6c9");
+    expect(state.canUndo).toBe(true);
+    expect(state.isParagraph).toBe(true);
+  });
+
+  it("reads heading level from bridgeState", () => {
+    const bridgeState = {
+      headingLevel: 3,
+      isBoldActive: false,
+    };
+
+    const state = getEditorStateFromBridge(bridgeState);
+    expect(state.isHeading3).toBe(true);
+    expect(state.isHeading1).toBe(false);
+    expect(state.isParagraph).toBe(false);
+  });
+});

package/src/editor/useEditorState.ts

@@ -0,0 +1,125 @@
+/**
+ * State mapping functions for extracting EditorState from platform editors
+ */
+
+import type { EditorState, TextAlignment } from "../types";
+import { defaultEditorState } from "../types";
+
+export { defaultEditorState };
+
+// ===========================================================================
+// Web (Tiptap)
+// ===========================================================================
+
+/**
+ * Extract EditorState from a Tiptap editor instance.
+ * Returns defaultEditorState if the editor is null/undefined.
+ */
+export function getEditorStateFromTiptap(editor: any): EditorState {
+  if (!editor) return defaultEditorState;
+
+  let textAlign: TextAlignment = "left";
+  if (editor.isActive({ textAlign: "center" })) textAlign = "center";
+  else if (editor.isActive({ textAlign: "right" })) textAlign = "right";
+  else if (editor.isActive({ textAlign: "justify" })) textAlign = "justify";
+
+  const textColor = editor.getAttributes("textStyle").color || null;
+  const highlightColor = editor.getAttributes("highlight").color || null;
+
+  const isHeading1 = editor.isActive("heading", { level: 1 });
+  const isHeading2 = editor.isActive("heading", { level: 2 });
+  const isHeading3 = editor.isActive("heading", { level: 3 });
+  const isHeading4 = editor.isActive("heading", { level: 4 });
+  const isHeading5 = editor.isActive("heading", { level: 5 });
+  const isHeading6 = editor.isActive("heading", { level: 6 });
+  const isParagraph =
+    editor.isActive("paragraph") &&
+    !isHeading1 &&
+    !isHeading2 &&
+    !isHeading3 &&
+    !isHeading4 &&
+    !isHeading5 &&
+    !isHeading6;
+
+  return {
+    isBold: editor.isActive("bold"),
+    isItalic: editor.isActive("italic"),
+    isUnderline: editor.isActive("underline"),
+    isStrike: editor.isActive("strike"),
+    isCode: editor.isActive("code"),
+    isSubscript: editor.isActive("subscript"),
+    isSuperscript: editor.isActive("superscript"),
+    isHeading1,
+    isHeading2,
+    isHeading3,
+    isHeading4,
+    isHeading5,
+    isHeading6,
+    isParagraph,
+    isBulletList: editor.isActive("bulletList"),
+    isOrderedList: editor.isActive("orderedList"),
+    isTaskList: editor.isActive("taskList"),
+    isBlockquote: editor.isActive("blockquote"),
+    isCodeBlock: editor.isActive("codeBlock"),
+    isLink: editor.isActive("link"),
+    canUndo: editor.can().undo(),
+    canRedo: editor.can().redo(),
+    textAlign,
+    textColor,
+    highlightColor,
+    wordCount: editor.storage?.characterCount?.words?.() ?? 0,
+    characterCount: editor.storage?.characterCount?.characters?.() ?? 0,
+  };
+}
+
+// ===========================================================================
+// Native (10Tap Bridge)
+// ===========================================================================
+
+/**
+ * Extract EditorState from a 10Tap bridge state object.
+ *
+ * Reads activeColor, activeHighlight, and isTaskListActive from bridge
+ * state instead of hardcoding them to false/null.
+ */
+export function getEditorStateFromBridge(bridgeState: any): EditorState {
+  if (!bridgeState) return defaultEditorState;
+
+  const isHeading1 = bridgeState.headingLevel === 1;
+  const isHeading2 = bridgeState.headingLevel === 2;
+  const isHeading3 = bridgeState.headingLevel === 3;
+  const isHeading4 = bridgeState.headingLevel === 4;
+  const isHeading5 = bridgeState.headingLevel === 5;
+  const isHeading6 = bridgeState.headingLevel === 6;
+
+  return {
+    isBold: bridgeState.isBoldActive ?? false,
+    isItalic: bridgeState.isItalicActive ?? false,
+    isUnderline: bridgeState.isUnderlineActive ?? false,
+    isStrike: bridgeState.isStrikeActive ?? false,
+    isCode: bridgeState.isCodeActive ?? false,
+    isSubscript: false,
+    isSuperscript: false,
+    isHeading1,
+    isHeading2,
+    isHeading3,
+    isHeading4,
+    isHeading5,
+    isHeading6,
+    isParagraph:
+      !isHeading1 && !isHeading2 && !isHeading3 && !isHeading4 && !isHeading5 && !isHeading6,
+    isBulletList: bridgeState.isBulletListActive ?? false,
+    isOrderedList: bridgeState.isOrderedListActive ?? false,
+    isTaskList: bridgeState.isTaskListActive ?? false,
+    isBlockquote: bridgeState.isBlockquoteActive ?? false,
+    isCodeBlock: false,
+    isLink: bridgeState.isLinkActive ?? false,
+    canUndo: bridgeState.canUndo ?? false,
+    canRedo: bridgeState.canRedo ?? false,
+    textAlign: "left",
+    textColor: bridgeState.activeColor ?? null,
+    highlightColor: bridgeState.activeHighlight ?? null,
+    wordCount: 0,
+    characterCount: 0,
+  };
+}

package/src/exports.spec.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect, vi } from "vitest";
+
+// ---------------------------------------------------------------------------
+// Mocks -- must come before imports to prevent Tiptap module errors
+// ---------------------------------------------------------------------------
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Field: () => null,
+  FieldLayout: ({ children }: any) => children,
+  Skeleton: () => null,
+  getFieldError: () => undefined,
+  useFormField: () => ({
+    resolvedForm: undefined,
+    knobProps: {
+      body: {},
+      borderRadius: { borderRadius: "$3", borderWidth: 1 },
+      elevation: undefined,
+      sizeToken: "$4",
+      outlined: false,
+      inputBackground: "$color2",
+      textAccentColor: "$color",
+      transition: undefined,
+      heading: {},
+      gap: { gap: "$2" },
+    },
+    id: "test-id",
+  }),
+  useResolvedValidators: () => undefined,
+  mergeFieldHandler: () => () => {},
+  clampRadiusForLargeComponent: () => "$3",
+  Button: () => null,
+}));
+
+vi.mock("@multiplatform.one/components", () => ({
+  Tooltip: ({ children }: any) => children,
+}));
+
+vi.mock("@multiplatform.one/theme", () => ({
+  useResolvedKnobs: () => ({
+    knobProps: {
+      body: {},
+      borderRadius: { borderRadius: "$3", borderWidth: 1 },
+      elevation: undefined,
+      sizeToken: "$4",
+      outlined: false,
+      inputBackground: "$color2",
+      textAccentColor: "$color",
+      transition: undefined,
+      heading: {},
+      gap: { gap: "$2" },
+    },
+    control: {},
+  }),
+}));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: () => null,
+}));
+
+vi.mock("@tiptap/react", () => ({
+  useEditor: vi.fn().mockReturnValue(null),
+  EditorContent: () => null,
+}));
+
+vi.mock("@tiptap/starter-kit", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-underline", () => ({ default: {} }));
+vi.mock("@tiptap/extension-link", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-placeholder", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-text-align", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-color", () => ({ Color: {} }));
+vi.mock("@tiptap/extension-text-style", () => ({ TextStyle: {} }));
+vi.mock("@tiptap/extension-highlight", () => ({
+  Highlight: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-subscript", () => ({ Subscript: {} }));
+vi.mock("@tiptap/extension-superscript", () => ({ Superscript: {} }));
+vi.mock("@tiptap/extension-task-list", () => ({ default: {} }));
+vi.mock("@tiptap/extension-task-item", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-image", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+
+// ---------------------------------------------------------------------------
+// Imports (after mocks)
+// ---------------------------------------------------------------------------
+
+const exports = await import("./index");
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("package exports", () => {
+  it("exports RichEditor and RichTextEditor as named exports", () => {
+    expect(exports.RichEditor).toBeDefined();
+    expect(typeof exports.RichEditor).not.toBe("undefined");
+    expect(exports.RichTextEditor).toBeDefined();
+    expect(typeof exports.RichTextEditor).toBe("function");
+  });
+
+  it("exports expected type-compatible values (EditorState default, EditorCommand support)", () => {
+    // Verify that types are usable through their runtime counterparts
+    // RichEditorRef, RichEditorProps, EditorCommand, EditorState are types
+    // but we can verify their related runtime exports work
+    expect(exports.RichEditor).toBeDefined();
+    expect(exports.RichTextEditor).toBeDefined();
+
+    // Verify the compound component has expected static properties
+    expect((exports.RichEditor as any).FixedToolbar).toBeDefined();
+    expect((exports.RichEditor as any).BubbleToolbar).toBeDefined();
+    expect((exports.RichEditor as any).Editor).toBeDefined();
+  });
+
+  it("does NOT export EditorToolbar or CodeTheme", () => {
+    expect((exports as any).EditorToolbar).toBeUndefined();
+    expect((exports as any).CodeTheme).toBeUndefined();
+  });
+});

package/src/index.ts

@@ -0,0 +1,13 @@
+/**
+ * @multiplatform.one/rich-text
+ *
+ * Cross-platform rich text editor built on Tiptap (web) and 10Tap (native)
+ */
+
+export { RichEditor } from "./RichEditor";
+export type { RichEditorCombinedProps } from "./RichEditor";
+
+export { RichTextEditor } from "./RichTextEditor";
+export type { RichTextEditorProps } from "./RichTextEditor";
+
+export type { RichEditorRef, RichEditorProps, EditorCommand, EditorState } from "./types";