@multiplatform.one/rich-text 7.7.0 → 7.7.2

package/src/toolbar/FixedToolbar.stories.tsx

@@ -0,0 +1,224 @@
+/**
+ * Storybook stories for FixedToolbar — the bar across the top of the editor,
+ * the thing the whole toolbar/ folder assembles into.
+ *
+ * Stories: Main, Sections, MarkdownCapabilities, ErrorState, FullscreenToggle,
+ * LiveEditor
+ *
+ * The toolbar owns no editor state: it renders `state` and calls commands
+ * through `editorRef`. So every story but the last drives it from a plain
+ * state object and reports the commands into the actions panel, which is the
+ * only way to see the command wiring without a document to run it against.
+ * LiveEditor is the exception — a real editor behind a standalone bar, which
+ * is what the compound `RichEditor.Editor` export exists for.
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "@multiplatform.one/storybook";
+import { useRef, useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { EditorFrame } from "../styled";
+import { RichEditor } from "../RichEditor";
+import { defaultEditorState } from "../types";
+import type { EditorCapabilities, EditorState, RichEditorRef, ToolbarSection } from "../types";
+import { FixedToolbar } from "./FixedToolbar";
+
+export interface FixedToolbarStoryArgs {
+  /** Bold is on in the current selection */
+  isBold: boolean;
+  /** Italic is on in the current selection */
+  isItalic: boolean;
+  /** There is history to undo (an empty history washes the Undo button) */
+  canUndo: boolean;
+  /** There is history to redo */
+  canRedo: boolean;
+  /** Which sections show; undefined shows every one */
+  sections?: ToolbarSection[];
+  /** markdown drops the controls GFM cannot express */
+  capabilities: EditorCapabilities;
+  /** Paints the bar's bottom rule red, matching the frame */
+  hasError: boolean;
+}
+
+function stateFor(args: FixedToolbarStoryArgs): EditorState {
+  return {
+    ...defaultEditorState,
+    isBold: args.isBold,
+    isItalic: args.isItalic,
+    canUndo: args.canUndo,
+    canRedo: args.canRedo,
+  };
+}
+
+/**
+ * A toolbar with no editor under it. `editorRef` stays null, so commands are
+ * reported to the actions panel instead of running — which is the point:
+ * the bar's job is to name the command, not to perform it.
+ */
+function ToolbarSpecimen(args: FixedToolbarStoryArgs) {
+  const editorRef = useRef<RichEditorRef>({
+    executeCommand: (command, payload) => action("executeCommand")(command, payload),
+    getState: () => stateFor(args),
+    getHTML: () => "",
+    getJSON: () => null,
+    getMarkdown: () => "",
+    setHTML: () => {},
+    setJSON: () => {},
+    setMarkdown: () => {},
+    focus: () => {},
+    blur: () => {},
+  });
+  return (
+    <EditorFrame maxWidth={720} borderRadius="$3" hasError={args.hasError}>
+      <FixedToolbar
+        editorRef={editorRef}
+        state={stateFor(args)}
+        sections={args.sections}
+        capabilities={args.capabilities}
+        hasError={args.hasError}
+      />
+      <YStack minHeight={100} padding="$3">
+        <Paragraph size="$3" color="$color11">
+          The bar above drives this space. Commands land in the Actions panel.
+        </Paragraph>
+      </YStack>
+    </EditorFrame>
+  );
+}
+
+const meta: Meta<FixedToolbarStoryArgs> = {
+  title: "Forms/RichTextEditor/FixedToolbar",
+  component: FixedToolbar as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    isBold: { control: "boolean" },
+    isItalic: { control: "boolean" },
+    canUndo: { control: "boolean" },
+    canRedo: { control: "boolean" },
+    capabilities: { control: "radio", options: ["full", "markdown"] },
+    hasError: { control: "boolean" },
+    sections: { control: false },
+  },
+  args: {
+    isBold: false,
+    isItalic: false,
+    canUndo: true,
+    canRedo: false,
+    capabilities: "full",
+    hasError: false,
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  render: (args) => <ToolbarSpecimen {...args} />,
+};
+
+export default meta;
+type Story = StoryObj<FixedToolbarStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls) — every section, bold off, redo unavailable
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// Sections — the `sections` prop trims the bar to the listed groups
+// ---------------------------------------------------------------------------
+
+export const Sections: Story = {
+  args: {
+    sections: ["formatting", "link"],
+    isBold: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// MarkdownCapabilities — GFM cannot express colour or underline, so those
+// controls are absent, not merely disabled
+// ---------------------------------------------------------------------------
+
+export const MarkdownCapabilities: Story = {
+  name: "Markdown capabilities",
+  args: {
+    capabilities: "markdown",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// ErrorState — the bar's bottom rule turns red with the frame
+// ---------------------------------------------------------------------------
+
+export const ErrorState: Story = {
+  name: "Error state",
+  args: {
+    hasError: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// FullscreenToggle — onFullscreenToggle adds the expand control at the right
+// end, outside the scrolling strip so it never scrolls away
+// ---------------------------------------------------------------------------
+
+export const FullscreenToggle: Story = {
+  name: "Fullscreen toggle",
+  render: (args) => {
+    const FullscreenSpecimen = () => {
+      const [fullscreen, setFullscreen] = useState(false);
+      const editorRef = useRef<RichEditorRef>(null);
+      return (
+        <EditorFrame maxWidth={720} borderRadius="$3">
+          <FixedToolbar
+            editorRef={editorRef}
+            state={stateFor(args)}
+            fullscreen={fullscreen}
+            onFullscreenToggle={() => {
+              action("onFullscreenToggle")(!fullscreen);
+              setFullscreen(!fullscreen);
+            }}
+          />
+          <YStack minHeight={100} padding="$3">
+            <Paragraph size="$3" color="$color11">
+              {fullscreen ? "Fullscreen: on" : "Fullscreen: off"}
+            </Paragraph>
+          </YStack>
+        </EditorFrame>
+      );
+    };
+    return <FullscreenSpecimen />;
+  },
+};
+
+// ---------------------------------------------------------------------------
+// LiveEditor — a standalone bar wired to a real editor through the compound
+// `RichEditor.Editor` export; typing updates the marks
+// ---------------------------------------------------------------------------
+
+export const LiveEditor: Story = {
+  name: "Live editor",
+  render: () => {
+    const LiveSpecimen = () => {
+      const editorRef = useRef<RichEditorRef>(null);
+      const [state, setState] = useState<EditorState>(defaultEditorState);
+      return (
+        <EditorFrame maxWidth={720} borderRadius="$3">
+          <FixedToolbar editorRef={editorRef} state={state} />
+          <RichEditor.Editor
+            ref={editorRef}
+            initialContent="<p>Select this text and press <strong>B</strong> in the bar above — the button marks itself from the editor's own state.</p>"
+            onStateChange={setState}
+            minHeight={160}
+          />
+        </EditorFrame>
+      );
+    };
+    return <LiveSpecimen />;
+  },
+};

package/src/toolbar/StatusBar.stories.tsx

@@ -0,0 +1,146 @@
+/**
+ * Storybook stories for StatusBar — the editor footer: the rich-text /
+ * markdown mode toggle on the left, word and character counts on the right.
+ *
+ * Stories: Main, SingularCounts, MarkdownMode, Empty, InFrame
+ *
+ * The footer is a pure function of `state` and `mode`, so the controls drive
+ * the two counts and the active mode directly; pressing a mode label reports
+ * through `onModeChange` (actions panel) and flips the local mode so the
+ * marking swaps the way it does inside RichEditor.
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "@multiplatform.one/storybook";
+import { useEffect, useState } from "react";
+import { Paragraph, View, YStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { EditorFrame } from "../styled";
+import { defaultEditorState } from "../types";
+import type { EditorMode, EditorState } from "../types";
+import { StatusBar } from "./StatusBar";
+
+export interface StatusBarStoryArgs {
+  /** Word count shown on the right */
+  wordCount: number;
+  /** Character count shown on the right */
+  characterCount: number;
+  /** Which mode label is marked active */
+  mode: EditorMode;
+}
+
+function stateFor(args: StatusBarStoryArgs): EditorState {
+  return {
+    ...defaultEditorState,
+    wordCount: args.wordCount,
+    characterCount: args.characterCount,
+  };
+}
+
+/** Mode is local so the toggle is live; the `mode` control seeds and resets it. */
+function StatusBarSpecimen(args: StatusBarStoryArgs) {
+  const [mode, setMode] = useState<EditorMode>(args.mode);
+  useEffect(() => setMode(args.mode), [args.mode]);
+  return (
+    <StatusBar
+      state={stateFor(args)}
+      mode={mode}
+      onModeChange={(next) => {
+        action("onModeChange")(next);
+        setMode(next);
+      }}
+    />
+  );
+}
+
+const meta: Meta<StatusBarStoryArgs> = {
+  title: "Forms/RichTextEditor/StatusBar",
+  component: StatusBar as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    wordCount: { control: { type: "number", min: 0 } },
+    characterCount: { control: { type: "number", min: 0 } },
+    mode: { control: "radio", options: ["richtext", "markdown"] },
+  },
+  args: {
+    wordCount: 42,
+    characterCount: 240,
+    mode: "richtext",
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  render: (args) => (
+    <View maxWidth={520} borderWidth={1} borderColor="$color6" borderRadius="$3">
+      <StatusBarSpecimen {...args} />
+    </View>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<StatusBarStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls)
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// SingularCounts — the plural forms flip exactly at one
+// ---------------------------------------------------------------------------
+
+export const SingularCounts: Story = {
+  args: {
+    wordCount: 1,
+    characterCount: 1,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// MarkdownMode — the raw-source toggle is the marked one
+// ---------------------------------------------------------------------------
+
+export const MarkdownMode: Story = {
+  args: {
+    mode: "markdown",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Empty — a fresh document pluralises at zero
+// ---------------------------------------------------------------------------
+
+export const Empty: Story = {
+  args: {
+    wordCount: 0,
+    characterCount: 0,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// InFrame — where it sits: the foot of an EditorFrame, under the content
+// ---------------------------------------------------------------------------
+
+export const InFrame: Story = {
+  name: "In frame",
+  args: {
+    wordCount: 12,
+    characterCount: 71,
+  },
+  render: (args) => (
+    <EditorFrame maxWidth={520} borderRadius="$3">
+      <YStack minHeight={120} padding="$3">
+        <Paragraph size="$3" color="$color11">
+          Twelve words of body copy stand in for the editor content here.
+        </Paragraph>
+      </YStack>
+      <StatusBarSpecimen {...args} />
+    </EditorFrame>
+  ),
+};

package/src/toolbar/ToolbarButton.stories.tsx

@@ -0,0 +1,193 @@
+/**
+ * Storybook stories for ToolbarButton and ToolbarDropdownButton — the two
+ * pressables every toolbar cluster is built from.
+ *
+ * Stories: Main, Active, Unavailable, WithTooltip, DropdownButton, Row
+ *
+ * Two things are worth seeing here and nowhere else. The pressable is a 44x44
+ * target (Axiom 12) while the visible chrome is a 30x30 box inside it, so the
+ * strip stays dense without shrinking the hit area. And an unavailable control
+ * is never bare-`disabled` (DG-ST-03): it keeps focus, reports `aria-disabled`,
+ * dims, drops its hover surface, and loses its tooltip (DG-OVL-05).
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "@multiplatform.one/storybook";
+import { XStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { ToolbarFrame } from "../styled";
+import { BoldIcon, ItalicIcon, RedoIcon, StrikeIcon, UndoIcon } from "./icons";
+import { ToolbarButton, ToolbarDropdownButton } from "./ToolbarButton";
+import { ToolbarGroup } from "./ToolbarGroup";
+
+export interface ToolbarButtonStoryArgs {
+  /** Format is on: the chrome box takes the active surface */
+  active: boolean;
+  /** Unavailable: aria-disabled, dimmed, no hover surface, no tooltip */
+  disabled: boolean;
+  /** Shortcut hint on hover; suppressed while unavailable */
+  tooltip: string;
+  /** Accessible name — required, since the glyph carries no text */
+  "aria-label": string;
+}
+
+const meta: Meta<ToolbarButtonStoryArgs> = {
+  title: "Forms/RichTextEditor/ToolbarButton",
+  component: ToolbarButton as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    active: { control: "boolean" },
+    disabled: { control: "boolean" },
+    tooltip: { control: "text" },
+    "aria-label": { control: "text" },
+  },
+  args: {
+    active: false,
+    disabled: false,
+    tooltip: "Bold (⌘B)",
+    "aria-label": "Bold",
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  render: (args) => (
+    <ToolbarFrame width={80} justifyContent="center">
+      <ToolbarButton
+        active={args.active}
+        disabled={args.disabled}
+        tooltip={args.tooltip}
+        aria-label={args["aria-label"]}
+        onPress={() => action("onPress")(args["aria-label"])}
+      >
+        <BoldIcon>B</BoldIcon>
+      </ToolbarButton>
+    </ToolbarFrame>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<ToolbarButtonStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls)
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// Active — the format is on, so the chrome box takes the active surface
+// ---------------------------------------------------------------------------
+
+export const Active: Story = {
+  args: {
+    active: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Unavailable — DG-ST-03: aria-disabled and washed, never bare `disabled`
+// ---------------------------------------------------------------------------
+
+export const Unavailable: Story = {
+  args: {
+    disabled: true,
+    "aria-label": "Undo",
+    tooltip: "Undo (⌘Z)",
+  },
+  render: (args) => (
+    <ToolbarFrame width={80} justifyContent="center">
+      <ToolbarButton
+        disabled={args.disabled}
+        tooltip={args.tooltip}
+        aria-label={args["aria-label"]}
+        onPress={() => action("onPress")(args["aria-label"])}
+      >
+        <UndoIcon />
+      </ToolbarButton>
+    </ToolbarFrame>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// WithTooltip — the shortcut hint that returns with availability
+// ---------------------------------------------------------------------------
+
+export const WithTooltip: Story = {
+  name: "With tooltip",
+  args: {
+    tooltip: "Strikethrough (⌘⇧X)",
+    "aria-label": "Strikethrough",
+  },
+  render: (args) => (
+    <ToolbarFrame width={80} justifyContent="center">
+      <ToolbarButton
+        tooltip={args.tooltip}
+        aria-label={args["aria-label"]}
+        onPress={() => action("onPress")(args["aria-label"])}
+      >
+        <StrikeIcon>S</StrikeIcon>
+      </ToolbarButton>
+    </ToolbarFrame>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// DropdownButton — the caret variant: fixed height, width follows its label
+// ---------------------------------------------------------------------------
+
+export const DropdownButton: Story = {
+  name: "Dropdown button",
+  render: () => (
+    <ToolbarFrame width={220} justifyContent="center">
+      <XStack alignItems="center" gap="$1">
+        <ToolbarDropdownButton aria-label="Heading" onPress={() => action("onPress")("Heading")}>
+          H1
+        </ToolbarDropdownButton>
+        <ToolbarDropdownButton active aria-label="Lists" onPress={() => action("onPress")("Lists")}>
+          Bullets
+        </ToolbarDropdownButton>
+        <ToolbarDropdownButton
+          disabled
+          aria-label="Table"
+          onPress={() => action("onPress")("Table")}
+        >
+          Table
+        </ToolbarDropdownButton>
+      </XStack>
+    </ToolbarFrame>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Row — the four states side by side, in the bar they live in
+// ---------------------------------------------------------------------------
+
+export const Row: Story = {
+  render: () => (
+    <ToolbarFrame width={320}>
+      <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
+        <ToolbarGroup>
+          <ToolbarButton disabled onPress={() => {}} aria-label="Undo" tooltip="Undo (⌘Z)">
+            <UndoIcon />
+          </ToolbarButton>
+          <ToolbarButton onPress={() => action("onPress")("Redo")} aria-label="Redo">
+            <RedoIcon />
+          </ToolbarButton>
+        </ToolbarGroup>
+        <ToolbarGroup showSeparator={false}>
+          <ToolbarButton active onPress={() => action("onPress")("Bold")} aria-label="Bold">
+            <BoldIcon>B</BoldIcon>
+          </ToolbarButton>
+          <ToolbarButton onPress={() => action("onPress")("Italic")} aria-label="Italic">
+            <ItalicIcon>I</ItalicIcon>
+          </ToolbarButton>
+        </ToolbarGroup>
+      </XStack>
+    </ToolbarFrame>
+  ),
+};