@multiplatform.one/rich-text 6.0.0

package/dist/esm/RichEditor.stories.mjs

@@ -0,0 +1,291 @@
+import { useForm } from "@tanstack/react-form";
+import { useRef, useState } from "react";
+import { Button, Paragraph, Text, View, XStack, YStack } from "tamagui";
+import { RichTextEditor } from "./RichTextEditor/index.mjs";
+import { RichEditor } from "./RichEditor.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const meta = {
+  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 => /* @__PURE__ */jsx(View, {
+    padding: "$4",
+    maxWidth: 800,
+    children: /* @__PURE__ */jsx(Story, {})
+  })]
+};
+var RichEditor_stories_default = meta;
+const Main = {
+  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
+  }
+};
+const WithInitialContent = {
+  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
+  }
+};
+const WithoutToolbar = {
+  args: {
+    label: "No Toolbar",
+    showToolbar: false,
+    defaultValue: "<p>Editor without toolbar - keyboard shortcuts still work</p>",
+    minHeight: 150
+  }
+};
+const BubbleToolbarOnly = {
+  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"
+  }
+};
+const MinimalToolbar = {
+  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"
+  }
+};
+const ReadOnly = {
+  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
+  }
+};
+const WithError = {
+  args: {
+    label: "Content",
+    error: "This field is required",
+    placeholder: "This field has an error...",
+    required: true,
+    minHeight: 150
+  }
+};
+const WithMaxHeight = {
+  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
+  }
+};
+const Interactive = {
+  render: () => {
+    const editorRef = useRef(null);
+    const [html, setHtml] = useState("");
+    const [charCount, setCharCount] = useState(0);
+    const handleChange = newHtml => {
+      setHtml(newHtml);
+      const text = newHtml.replace(/<[^>]*>/g, "");
+      setCharCount(text.length);
+    };
+    return /* @__PURE__ */jsxs(YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */jsx(RichEditor, {
+        ref: editorRef,
+        placeholder: "Type here to see live updates...",
+        onChange: handleChange,
+        minHeight: 200,
+        showBubbleToolbar: true
+      }), /* @__PURE__ */jsxs(XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */jsxs(Text, {
+          color: "$color10",
+          fontSize: "$2",
+          children: ["Characters: ", charCount]
+        }), /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          onPress: () => {
+            const content = editorRef.current?.getHTML();
+            console.log("HTML Content:", content);
+          },
+          children: "Log HTML"
+        }), /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          onPress: () => {
+            editorRef.current?.setHTML("<p>Content set programmatically!</p>");
+          },
+          children: "Set Content"
+        }), /* @__PURE__ */jsx(Button, {
+          size: "$3",
+          onPress: () => editorRef.current?.focus(),
+          children: "Focus"
+        })]
+      }), html && /* @__PURE__ */jsx(YStack, {
+        backgroundColor: "$color3",
+        padding: "$3",
+        borderRadius: "$3",
+        maxHeight: 200,
+        overflow: "scroll",
+        children: /* @__PURE__ */jsx(Paragraph, {
+          size: "$1",
+          fontFamily: "$mono",
+          whiteSpace: "pre-wrap",
+          children: html
+        })
+      })]
+    });
+  }
+};
+const FormIntegrated = {
+  render: () => {
+    const FormExample = () => {
+      const form = useForm({
+        defaultValues: {
+          title: "",
+          content: ""
+        },
+        onSubmit: async ({
+          value
+        }) => {
+          console.log("Form submitted:", value);
+          alert(JSON.stringify(value, null, 2));
+        }
+      });
+      return /* @__PURE__ */jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */jsx(RichTextEditor, {
+          form,
+          name: "content",
+          label: "Article Content",
+          helperText: "Write your article content here",
+          required: true,
+          placeholder: "Start writing...",
+          minHeight: 250,
+          showBubbleToolbar: true
+        }), /* @__PURE__ */jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */jsx(Button, {
+            size: "$3",
+            onPress: () => form.handleSubmit(),
+            children: "Submit"
+          }), /* @__PURE__ */jsx(Button, {
+            size: "$3",
+            theme: "gray",
+            onPress: () => form.reset(),
+            children: "Reset"
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */jsx(FormExample, {});
+  }
+};
+const Skeleton = {
+  args: {
+    skeleton: true,
+    label: "Loading Content",
+    minHeight: 200
+  }
+};
+export { BubbleToolbarOnly, FormIntegrated, Interactive, Main, MinimalToolbar, ReadOnly, Skeleton, WithError, WithInitialContent, WithMaxHeight, WithoutToolbar, RichEditor_stories_default as default };
+//# sourceMappingURL=RichEditor.stories.mjs.map

package/dist/esm/RichEditor.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useForm","useRef","useState","Button","Paragraph","Text","View","XStack","YStack","RichTextEditor","RichEditor","jsx","jsxs","meta","title","component","parameters","layout","argTypes","label","control","placeholder","helperText","error","required","disabled","readOnly","showToolbar","showBubbleToolbar","compact","skeleton","size","options","minHeight","maxHeight","sections","form","validators","decorators","Story","padding","maxWidth","children","RichEditor_stories_default","Main","args","WithInitialContent","defaultValue","WithoutToolbar","BubbleToolbarOnly","MinimalToolbar","ReadOnly","WithError","WithMaxHeight","Interactive","render","editorRef","html","setHtml","charCount","setCharCount","handleChange","newHtml","text","replace","length","gap","ref","onChange","alignItems","color","fontSize","onPress","content","current","getHTML","console","log","setHTML","focus","backgroundColor","borderRadius","overflow","fontFamily","whiteSpace","FormIntegrated","FormExample","defaultValues","onSubmit","value","alert","JSON","stringify","name","handleSubmit","theme","reset","Skeleton"],"sources":["../../src/RichEditor.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/RichEditor.stories.native.js

@@ -0,0 +1,303 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "@tanstack/react-form";
+import { useRef, useState } from "react";
+import { Button, Paragraph, Text, View, XStack, YStack } from "tamagui";
+import { RichTextEditor } from "./RichTextEditor/index.native.js";
+import { RichEditor } from "./RichEditor.native.js";
+var meta = {
+  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: [function (Story) {
+    return /* @__PURE__ */_jsx(View, {
+      padding: "$4",
+      maxWidth: 800,
+      children: /* @__PURE__ */_jsx(Story, {})
+    });
+  }]
+};
+var RichEditor_stories_default = meta;
+var Main = {
+  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
+  }
+};
+var WithInitialContent = {
+  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
+  }
+};
+var WithoutToolbar = {
+  args: {
+    label: "No Toolbar",
+    showToolbar: false,
+    defaultValue: "<p>Editor without toolbar - keyboard shortcuts still work</p>",
+    minHeight: 150
+  }
+};
+var BubbleToolbarOnly = {
+  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"
+  }
+};
+var MinimalToolbar = {
+  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"
+  }
+};
+var ReadOnly = {
+  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
+  }
+};
+var WithError = {
+  args: {
+    label: "Content",
+    error: "This field is required",
+    placeholder: "This field has an error...",
+    required: true,
+    minHeight: 150
+  }
+};
+var WithMaxHeight = {
+  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
+  }
+};
+var Interactive = {
+  render: function render() {
+    var editorRef = useRef(null);
+    var [html, setHtml] = useState("");
+    var [charCount, setCharCount] = useState(0);
+    var handleChange = function handleChange2(newHtml) {
+      setHtml(newHtml);
+      var text = newHtml.replace(/<[^>]*>/g, "");
+      setCharCount(text.length);
+    };
+    return /* @__PURE__ */_jsxs(YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */_jsx(RichEditor, {
+        ref: editorRef,
+        placeholder: "Type here to see live updates...",
+        onChange: handleChange,
+        minHeight: 200,
+        showBubbleToolbar: true
+      }), /* @__PURE__ */_jsxs(XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */_jsxs(Text, {
+          color: "$color10",
+          fontSize: "$2",
+          children: ["Characters: ", charCount]
+        }), /* @__PURE__ */_jsx(Button, {
+          size: "$3",
+          onPress: function onPress() {
+            var _editorRef_current;
+            var content = (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.getHTML();
+            console.log("HTML Content:", content);
+          },
+          children: "Log HTML"
+        }), /* @__PURE__ */_jsx(Button, {
+          size: "$3",
+          onPress: function onPress() {
+            var _editorRef_current;
+            (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.setHTML("<p>Content set programmatically!</p>");
+          },
+          children: "Set Content"
+        }), /* @__PURE__ */_jsx(Button, {
+          size: "$3",
+          onPress: function onPress() {
+            var _editorRef_current;
+            return (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.focus();
+          },
+          children: "Focus"
+        })]
+      }), html && /* @__PURE__ */_jsx(YStack, {
+        backgroundColor: "$color3",
+        padding: "$3",
+        borderRadius: "$3",
+        maxHeight: 200,
+        overflow: "scroll",
+        children: /* @__PURE__ */_jsx(Paragraph, {
+          size: "$1",
+          fontFamily: "$mono",
+          whiteSpace: "pre-wrap",
+          children: html
+        })
+      })]
+    });
+  }
+};
+var FormIntegrated = {
+  render: function render2() {
+    var FormExample = function FormExample2() {
+      var form = useForm({
+        defaultValues: {
+          title: "",
+          content: ""
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          console.log("Form submitted:", value);
+          alert(JSON.stringify(value, null, 2));
+        }
+      });
+      return /* @__PURE__ */_jsxs(YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */_jsx(RichTextEditor, {
+          form,
+          name: "content",
+          label: "Article Content",
+          helperText: "Write your article content here",
+          required: true,
+          placeholder: "Start writing...",
+          minHeight: 250,
+          showBubbleToolbar: true
+        }), /* @__PURE__ */_jsxs(XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(Button, {
+            size: "$3",
+            onPress: function onPress() {
+              return form.handleSubmit();
+            },
+            children: "Submit"
+          }), /* @__PURE__ */_jsx(Button, {
+            size: "$3",
+            theme: "gray",
+            onPress: function onPress() {
+              return form.reset();
+            },
+            children: "Reset"
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */_jsx(FormExample, {});
+  }
+};
+var Skeleton = {
+  args: {
+    skeleton: true,
+    label: "Loading Content",
+    minHeight: 200
+  }
+};
+export { BubbleToolbarOnly, FormIntegrated, Interactive, Main, MinimalToolbar, ReadOnly, Skeleton, WithError, WithInitialContent, WithMaxHeight, WithoutToolbar, RichEditor_stories_default as default };
+//# sourceMappingURL=RichEditor.stories.native.js.map

package/dist/esm/RichEditor.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","useForm","useRef","useState","Button","Paragraph","Text","View","XStack","YStack","RichTextEditor","RichEditor","meta","title","component","parameters","layout","argTypes","label","control","placeholder","helperText","error","required","disabled","readOnly","showToolbar","showBubbleToolbar","compact","skeleton","size","options","minHeight","maxHeight","sections","form","validators","decorators","Story","padding","maxWidth","children","RichEditor_stories_default","Main","args","WithInitialContent","defaultValue","WithoutToolbar","BubbleToolbarOnly","MinimalToolbar","ReadOnly","WithError","WithMaxHeight","Interactive","render","editorRef","html","setHtml","charCount","setCharCount","handleChange","handleChange2","newHtml","text","replace","length","gap","ref","onChange","alignItems","color","fontSize","onPress","_editorRef_current","content","current","getHTML","console","log","setHTML","focus"],"sources":["../../src/RichEditor.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}