@multiplatform.one/rich-text 6.0.0

package/src/RichEditor.stories.tsx

@@ -0,0 +1,324 @@
+/**
+ * Storybook stories for RichTextEditor
+ *
+ * Stories: Main, WithInitialContent, WithoutToolbar, BubbleToolbarOnly,
+ * MinimalToolbar, ReadOnly, WithError, WithMaxHeight, Interactive,
+ * FormIntegrated, Skeleton
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useForm } from "@tanstack/react-form";
+import { useRef, useState } from "react";
+import { Button, Paragraph, Text, View, XStack, YStack } from "tamagui";
+import { RichTextEditor } from "./RichTextEditor";
+import type { RichEditorRef } from "./types";
+import { RichEditor } from "./RichEditor";
+
+const meta: Meta<typeof RichTextEditor> = {
+  title: "Forms/RichTextEditor",
+  component: RichTextEditor,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    label: { control: "text" },
+    placeholder: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "text" },
+    required: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    showToolbar: { control: "boolean" },
+    showBubbleToolbar: { control: "boolean" },
+    compact: { control: "boolean" },
+    skeleton: { control: "boolean" },
+    size: { control: "select", options: ["$2", "$3", "$4"] },
+    minHeight: { control: "number" },
+    maxHeight: { control: "number" },
+    sections: { control: false },
+    form: { control: false },
+    validators: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <View padding="$4" maxWidth={800}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof RichTextEditor>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls)
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {
+  args: {
+    label: "Content",
+    placeholder: "Start typing your content...",
+    helperText: "Rich text editor with full formatting support",
+    minHeight: 200,
+    showToolbar: true,
+    showBubbleToolbar: false,
+    compact: false,
+    skeleton: false,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// WithInitialContent
+// ---------------------------------------------------------------------------
+
+export const WithInitialContent: Story = {
+  args: {
+    label: "Article Body",
+    defaultValue: `
+      <h1>Welcome to the Rich Editor</h1>
+      <p>This is a <strong>rich text editor</strong> built with <em>Tiptap</em>.</p>
+      <h2>Features</h2>
+      <ul>
+        <li>Bold, italic, underline, strikethrough</li>
+        <li>Headings (H1-H6)</li>
+        <li>Bullet and numbered lists</li>
+        <li>Blockquotes and code blocks</li>
+        <li>Links and images</li>
+        <li>Text color and highlighting</li>
+      </ul>
+      <blockquote>
+        <p>This is a blockquote with some important information.</p>
+      </blockquote>
+      <p>Here is some <code>inline code</code> for you.</p>
+    `,
+    minHeight: 300,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// WithoutToolbar
+// ---------------------------------------------------------------------------
+
+export const WithoutToolbar: Story = {
+  args: {
+    label: "No Toolbar",
+    showToolbar: false,
+    defaultValue: "<p>Editor without toolbar - keyboard shortcuts still work</p>",
+    minHeight: 150,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// BubbleToolbarOnly
+// ---------------------------------------------------------------------------
+
+export const BubbleToolbarOnly: Story = {
+  args: {
+    label: "Bubble Toolbar Only",
+    showToolbar: false,
+    showBubbleToolbar: true,
+    defaultValue:
+      "<p>Select some text to see the bubble toolbar appear with inline formatting options.</p>",
+    minHeight: 150,
+    helperText: "Select text to see the bubble toolbar",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// MinimalToolbar
+// ---------------------------------------------------------------------------
+
+export const MinimalToolbar: Story = {
+  args: {
+    label: "Minimal Toolbar",
+    sections: ["formatting", "list"],
+    defaultValue: "<p>Minimal toolbar with only formatting and list options</p>",
+    minHeight: 150,
+    helperText: "Only text formatting and list controls are shown",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// ReadOnly
+// ---------------------------------------------------------------------------
+
+export const ReadOnly: Story = {
+  args: {
+    label: "Read-only Content",
+    readOnly: true,
+    defaultValue: `
+      <h2>Read-only Content</h2>
+      <p>This content cannot be edited. The toolbar is hidden.</p>
+      <ul>
+        <li>View-only mode for displaying formatted content</li>
+        <li>No toolbar or editing capabilities</li>
+      </ul>
+    `,
+    minHeight: 150,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// WithError
+// ---------------------------------------------------------------------------
+
+export const WithError: Story = {
+  args: {
+    label: "Content",
+    error: "This field is required",
+    placeholder: "This field has an error...",
+    required: true,
+    minHeight: 150,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// WithMaxHeight
+// ---------------------------------------------------------------------------
+
+export const WithMaxHeight: Story = {
+  args: {
+    label: "Scrollable Content",
+    defaultValue: `
+      <h1>Scrollable Content</h1>
+      <p>This editor has a maximum height and will scroll when content exceeds it.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+      <p>Duis aute irure dolor in reprehenderit in voluptate velit.</p>
+      <p>Excepteur sint occaecat cupidatat non proident.</p>
+      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <p>More content to demonstrate scrolling...</p>
+      <p>And even more content...</p>
+      <p>Keep scrolling...</p>
+    `,
+    minHeight: 150,
+    maxHeight: 250,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Interactive
+// ---------------------------------------------------------------------------
+
+export const Interactive: Story = {
+  render: () => {
+    const editorRef = useRef<RichEditorRef>(null);
+    const [html, setHtml] = useState("");
+    const [charCount, setCharCount] = useState(0);
+
+    const handleChange = (newHtml: string) => {
+      setHtml(newHtml);
+      const text = newHtml.replace(/<[^>]*>/g, "");
+      setCharCount(text.length);
+    };
+
+    return (
+      <YStack gap="$4">
+        <RichEditor
+          ref={editorRef}
+          placeholder="Type here to see live updates..."
+          onChange={handleChange}
+          minHeight={200}
+          showBubbleToolbar
+        />
+        <XStack gap="$4" alignItems="center">
+          <Text color="$color10" fontSize="$2">
+            Characters: {charCount}
+          </Text>
+          <Button
+            size="$3"
+            onPress={() => {
+              const content = editorRef.current?.getHTML();
+              console.log("HTML Content:", content);
+            }}
+          >
+            Log HTML
+          </Button>
+          <Button
+            size="$3"
+            onPress={() => {
+              editorRef.current?.setHTML("<p>Content set programmatically!</p>");
+            }}
+          >
+            Set Content
+          </Button>
+          <Button size="$3" onPress={() => editorRef.current?.focus()}>
+            Focus
+          </Button>
+        </XStack>
+        {html && (
+          <YStack
+            backgroundColor="$color3"
+            padding="$3"
+            borderRadius="$3"
+            maxHeight={200}
+            overflow="scroll"
+          >
+            <Paragraph size="$1" fontFamily="$mono" whiteSpace="pre-wrap">
+              {html}
+            </Paragraph>
+          </YStack>
+        )}
+      </YStack>
+    );
+  },
+};
+
+// ---------------------------------------------------------------------------
+// FormIntegrated
+// ---------------------------------------------------------------------------
+
+export const FormIntegrated: Story = {
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          title: "",
+          content: "",
+        },
+        onSubmit: async ({ value }) => {
+          console.log("Form submitted:", value);
+          alert(JSON.stringify(value, null, 2));
+        },
+      });
+
+      return (
+        <YStack gap="$4">
+          <RichTextEditor
+            form={form as any}
+            name="content"
+            label="Article Content"
+            helperText="Write your article content here"
+            required
+            placeholder="Start writing..."
+            minHeight={250}
+            showBubbleToolbar
+          />
+          <XStack gap="$2">
+            <Button size="$3" onPress={() => form.handleSubmit()}>
+              Submit
+            </Button>
+            <Button size="$3" theme="gray" onPress={() => form.reset()}>
+              Reset
+            </Button>
+          </XStack>
+        </YStack>
+      );
+    };
+
+    return <FormExample />;
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Skeleton
+// ---------------------------------------------------------------------------
+
+export const Skeleton: Story = {
+  args: {
+    skeleton: true,
+    label: "Loading Content",
+    minHeight: 200,
+  },
+};

package/src/RichEditor.tsx

@@ -0,0 +1,185 @@
+/**
+ * RichEditor compound component (web)
+ *
+ * Combines the TiptapEditor, FixedToolbar, and BubbleToolbar into a compound
+ * component with static properties:
+ * - RichEditor.FixedToolbar
+ * - RichEditor.BubbleToolbar
+ * - RichEditor.Editor
+ *
+ * Root provides RichEditorContext with resolved size, compact, and disabled.
+ * Uses useResolvedKnobs for knobs integration and clampRadiusForLargeComponent
+ * for radius clamping (max $4).
+ */
+
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import type { SizeTokens } from "tamagui";
+import { getConfig, withStaticProperties } from "tamagui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { clampRadiusForLargeComponent } from "@multiplatform.one/forms";
+import type {
+  EditorMode,
+  EditorState,
+  RichEditorProps,
+  RichEditorRef,
+  ToolbarSection,
+} from "./types";
+import { defaultEditorState } from "./types";
+import { RichEditorContext } from "./context";
+import { EditorFrame } from "./styled";
+import { TiptapEditor } from "./editor/TiptapEditor";
+import { FixedToolbar } from "./toolbar/FixedToolbar";
+import { BubbleToolbar } from "./toolbar/BubbleToolbar";
+import { ResizeHandle } from "./toolbar/ResizeHandle";
+import { StatusBar } from "./toolbar/StatusBar";
+
+// ===========================================================================
+// Combined Props
+// ===========================================================================
+
+export interface RichEditorCombinedProps extends RichEditorProps {
+  /** Size token for the editor */
+  size?: SizeTokens;
+  /** Use compact sizing for tighter controls */
+  compact?: boolean;
+  /** Show the fixed toolbar (default: true) */
+  showToolbar?: boolean;
+  /** Show the bubble toolbar on text selection (default: false, web only) */
+  showBubbleToolbar?: boolean;
+  /** Toolbar sections to display (shows all when omitted) */
+  sections?: ToolbarSection[];
+  /** Show a drag handle to resize the editor vertically (default: true) */
+  resizable?: boolean;
+  /** Show word/character count status bar (default: true) */
+  showStatusBar?: boolean;
+}
+
+// ===========================================================================
+// RichEditorImpl
+// ===========================================================================
+
+const RichEditorImpl = forwardRef<RichEditorRef, RichEditorCombinedProps>(
+  (
+    {
+      size,
+      compact = false,
+      showToolbar = true,
+      showBubbleToolbar = false,
+      resizable = true,
+      showStatusBar = true,
+      sections,
+      hasError,
+      editable = true,
+      onStateChange,
+      ...editorProps
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<RichEditorRef>(null);
+    const frameRef = useRef<HTMLElement>(null);
+    const [editorState, setEditorState] = useState<EditorState>(defaultEditorState);
+    const [editorMode, setEditorMode] = useState<EditorMode>("richtext");
+
+    const { knobProps } = useResolvedKnobs({
+      component: "RichEditor",
+      size,
+      compact,
+    });
+
+    const handleStateChange = useCallback(
+      (state: EditorState) => {
+        setEditorState(state);
+        onStateChange?.(state);
+      },
+      [onStateChange],
+    );
+
+    useImperativeHandle(ref, () => internalRef.current!, []);
+
+    const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius, 4);
+
+    const { bodyFontFamily, headingFontFamily } = useMemo(() => {
+      const fonts = getConfig()?.fonts;
+      const resolve = (token?: string) => {
+        if (!token) return undefined;
+        const key = token.startsWith("$") ? token.slice(1) : token;
+        return fonts?.[key]?.family as string | undefined;
+      };
+      return {
+        bodyFontFamily: resolve(knobProps.body?.fontFamily),
+        headingFontFamily: resolve(knobProps.heading?.fontFamily),
+      };
+    }, [knobProps.body?.fontFamily, knobProps.heading?.fontFamily]);
+
+    const disabled = !editable;
+
+    return (
+      <RichEditorContext.Provider
+        size={(knobProps.sizeToken ?? "$true") as any}
+        compact={compact}
+        disabled={disabled}
+      >
+        <EditorFrame
+          ref={frameRef as any}
+          hasError={hasError}
+          borderRadius={cappedRadius}
+          borderWidth={knobProps.borderRadius.borderWidth}
+          borderColor={hasError ? "$red10" : "$color6"}
+          backgroundColor={knobProps.inputBackground ?? "$color2"}
+          disabled={disabled}
+          position="relative"
+        >
+          {showToolbar && !disabled && editorMode === "richtext" && (
+            <FixedToolbar
+              editorRef={internalRef}
+              state={editorState}
+              sections={sections}
+              hasError={hasError}
+            />
+          )}
+          <TiptapEditor
+            ref={internalRef}
+            {...editorProps}
+            editable={editable}
+            onStateChange={handleStateChange}
+            hasError={false}
+            showBubbleToolbar={showBubbleToolbar}
+            bodyFontFamily={bodyFontFamily}
+            headingFontFamily={headingFontFamily}
+            editorMode={editorMode}
+          />
+          {showStatusBar && (
+            <StatusBar state={editorState} mode={editorMode} onModeChange={setEditorMode} />
+          )}
+          {resizable && !disabled && (
+            <ResizeHandle
+              containerRef={frameRef as RefObject<HTMLElement>}
+              minHeight={editorProps.minHeight ?? 150}
+              maxHeight={editorProps.maxHeight}
+            />
+          )}
+        </EditorFrame>
+      </RichEditorContext.Provider>
+    );
+  },
+);
+
+RichEditorImpl.displayName = "RichEditor";
+
+// ===========================================================================
+// Compound Component
+// ===========================================================================
+
+export const RichEditor = withStaticProperties(RichEditorImpl, {
+  FixedToolbar,
+  BubbleToolbar,
+  Editor: TiptapEditor,
+});