@multiplatform.one/rich-text 6.0.0

package/dist/jsx/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/jsx/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/jsx/RichEditor.stories.native.js

@@ -0,0 +1,342 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RichEditor_stories_exports = {};
+__export(RichEditor_stories_exports, {
+  BubbleToolbarOnly: () => BubbleToolbarOnly,
+  FormIntegrated: () => FormIntegrated,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  MinimalToolbar: () => MinimalToolbar,
+  ReadOnly: () => ReadOnly,
+  Skeleton: () => Skeleton,
+  WithError: () => WithError,
+  WithInitialContent: () => WithInitialContent,
+  WithMaxHeight: () => WithMaxHeight,
+  WithoutToolbar: () => WithoutToolbar,
+  default: () => RichEditor_stories_default
+});
+module.exports = __toCommonJS(RichEditor_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_RichTextEditor = require("./RichTextEditor/index.native.js");
+var import_RichEditor = require("./RichEditor.native.js");
+var meta = {
+  title: "Forms/RichTextEditor",
+  component: import_RichTextEditor.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      padding: "$4",
+      maxWidth: 800,
+      children: /* @__PURE__ */(0, import_jsx_runtime.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 = (0, import_react.useRef)(null);
+    var [html, setHtml] = (0, import_react.useState)("");
+    var [charCount, setCharCount] = (0, import_react.useState)(0);
+    var handleChange = function handleChange2(newHtml) {
+      setHtml(newHtml);
+      var text = newHtml.replace(/<[^>]*>/g, "");
+      setCharCount(text.length);
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RichEditor.RichEditor, {
+        ref: editorRef,
+        placeholder: "Type here to see live updates...",
+        onChange: handleChange,
+        minHeight: 200,
+        showBubbleToolbar: true
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$4",
+        alignItems: "center",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          color: "$color10",
+          fontSize: "$2",
+          children: ["Characters: ", charCount]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        backgroundColor: "$color3",
+        padding: "$3",
+        borderRadius: "$3",
+        maxHeight: 200,
+        overflow: "scroll",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+          size: "$1",
+          fontFamily: "$mono",
+          whiteSpace: "pre-wrap",
+          children: html
+        })
+      })]
+    });
+  }
+};
+var FormIntegrated = {
+  render: function render2() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RichTextEditor.RichTextEditor, {
+          form,
+          name: "content",
+          label: "Article Content",
+          helperText: "Write your article content here",
+          required: true,
+          placeholder: "Start writing...",
+          minHeight: 250,
+          showBubbleToolbar: true
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$3",
+            onPress: function onPress() {
+              return form.handleSubmit();
+            },
+            children: "Submit"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$3",
+            theme: "gray",
+            onPress: function onPress() {
+              return form.reset();
+            },
+            children: "Reset"
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Skeleton = {
+  args: {
+    skeleton: true,
+    label: "Loading Content",
+    minHeight: 200
+  }
+};
+//# sourceMappingURL=RichEditor.stories.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","RichEditor_stories_exports","BubbleToolbarOnly","FormIntegrated","Interactive","Main","MinimalToolbar","ReadOnly","Skeleton","WithError","WithInitialContent","WithMaxHeight","WithoutToolbar","default","RichEditor_stories_default","module","exports","import_jsx_runtime","require","import_react_form","import_react","import_tamagui","import_RichTextEditor","import_RichEditor","meta","title","component","RichTextEditor","parameters","layout","argTypes","label","control","placeholder","helperText","error","required","disabled","readOnly","showToolbar","showBubbleToolbar","compact","skeleton","size","options","minHeight","maxHeight","sections","form","validators","decorators","Story","jsx","View","padding","maxWidth","children","args","defaultValue","render","editorRef","useRef","html","setHtml","useState","charCount","setCharCount","handleChange","handleChange2","newHtml","text","replace","length","jsxs","YStack","gap","RichEditor","ref","onChange","XStack","alignItems"],"sources":["../../src/RichEditor.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}