@sps-woodland/rich-text-editor 8.50.2 → 8.51.0

package/README.md

@@ -1,3 +1,17 @@
 ## [@sps-woodland/rich-text-editor](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/rich-text-editor#readme)
 
-SPS Woodland Design System rich text editor component
+SPS Woodland Design System rich text editor component.
+
+### Usage
+
+```ts
+// Preferred (mono-package, tree-shakes per component)
+import { RichTextEditor } from "@sps-woodland/core/rich-text-editor";
+import "@sps-woodland/core/rich-text-editor/style.css";
+```
+
+```ts
+// Still supported, re-exports from @sps-woodland/core
+import { RichTextEditor } from "@sps-woodland/rich-text-editor";
+import "@sps-woodland/rich-text-editor/style.css";
+```

package/lib/index.d.ts

@@ -1,4 +1,2 @@
+export * from "@sps-woodland/core/rich-text-editor";
 export * from "./manifest";
-export type { RichTextEditorAggregateValue } from "./hooks/useRTEContent";
-export * from "./RichTextEditor";
-export * from "./RichTextEditor.examples";

package/lib/index.js

@@ -1,6 +1,148 @@
-import { M as e, R as i, a as o } from "./index-C7zTOoex.js";
+import { RichTextEditor as t } from "@sps-woodland/core/rich-text-editor";
+export * from "@sps-woodland/core/rich-text-editor";
+import { code as e } from "@spscommerce/utils";
+import * as o from "react";
+const r = {
+  description: () => /* @__PURE__ */ o.createElement("p", null, "Placeholder for Rich Text Editor guidelines"),
+  components: [t],
+  examples: {
+    general: {
+      label: "General Usage",
+      description: "Coming Soon"
+    },
+    basic: {
+      label: "Basic Usage",
+      examples: {
+        basic: {
+          react: e`
+            import { RichTextEditor } from "@sps-woodland/rich-text-editor";
+            import { useSpsForm, SpsLabel } from "@spscommerce/ds-react";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                text: "",
+              });
+
+              const mdChangeHandler = ({ md }) => {
+                updateForm({ ...formValue, text: md });
+              };
+
+              return (
+                <>
+                  <SpsLabel for={formMeta.fields.text}>Markdown</SpsLabel>
+                  <RichTextEditor
+                    md={formValue.text}
+                    onChange={(event) => mdChangeHandler(event)}
+                  />
+                  {JSON.stringify(formValue)}
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    markdown: {
+      label: "Using Markdown",
+      examples: {
+        markdown: {
+          react: e`
+          import { RichTextEditor } from "@sps-woodland/rich-text-editor";
+          import { useSpsForm, SpsLabel } from "@spscommerce/ds-react";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                text: "**bold text** _italic text_",
+              });
+
+              const mdChangeHandler = ({ md }) => {
+                updateForm({ ...formValue, text: md });
+              };
+
+              return (
+                <>
+                  <SpsLabel for={formMeta.fields.text}>Markdown</SpsLabel>
+                  <RichTextEditor
+                    md={formValue.text}
+                    onChange={(event) => mdChangeHandler(event)}
+                  />
+                  {JSON.stringify(formValue)}
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    html: {
+      label: "Using HTML",
+      examples: {
+        html: {
+          react: e`
+          import { RichTextEditor } from "@sps-woodland/rich-text-editor";
+          import { useSpsForm, SpsLabel } from "@spscommerce/ds-react";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                text: "<b>bold text</b><ul><li>bulleted list</li></ul>",
+              });
+
+              const htmlChangeHandler = ({ html }) => {
+                updateForm({ ...formValue, text: html });
+              };
+
+              return (
+                <>
+                  <SpsLabel for={formMeta.fields.text}>Markdown</SpsLabel>
+                  <RichTextEditor
+                    html={formValue.text}
+                    onChange={(event) => htmlChangeHandler(event)}
+                  />
+                  {JSON.stringify(formValue)}
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    disabled: {
+      label: "Disabled State",
+      examples: {
+        disabled: {
+          react: e`
+          import { RichTextEditor } from "@sps-woodland/rich-text-editor";
+          import { useSpsForm, SpsLabel } from "@spscommerce/ds-react";
+
+            function Component() {
+              const { formValue, formMeta, updateForm } = useSpsForm({
+                text: "",
+              });
+
+              const mdChangeHandler = ({ md }) => {
+                updateForm({ ...formValue, text: md });
+              };
+
+              return (
+                <>
+                  <SpsLabel for={formMeta.fields.text}>Markdown</SpsLabel>
+                  <RichTextEditor
+                    md={formValue.text}
+                    onChange={(event) => mdChangeHandler(event)}
+                    disabled
+                  />
+                  {JSON.stringify(formValue)}
+                </>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, n = {
+  "Rich Text Editor": r
+};
 export {
-  e as MANIFEST,
-  i as RichTextEditor,
-  o as RichTextEditorExamples
+  n as MANIFEST
 };