@sps-woodland/rich-text-editor 8.51.2 → 8.52.0

package/README.md

@@ -1,17 +1,3 @@
 ## [@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.
-
-### 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";
-```
+SPS Woodland Design System rich text editor component

package/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/lib/RTELinkModal.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+import type { SelectionDOMContextFind } from "./hooks/useRTESelectionListener";
+export interface LinkConfig {
+    text: string;
+    link: string;
+}
+export declare function RTELinkModal({ onClose, selectionDOMContextFind, selectionRange, }: ComponentProps<{
+    onClose: (range?: Range, config?: LinkConfig) => void;
+    selectionDOMContextFind: SelectionDOMContextFind;
+    selectionRange?: Range;
+}>): React.ReactElement;

package/lib/RichTextEditor.css.d.ts

@@ -0,0 +1,14 @@
+export declare const richTextEditor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    disabled: {
+        true: {
+            borderColor: string;
+        };
+        false: {
+            borderColor: string;
+        };
+    };
+}>;
+export type RichTextEditorVariants = Required<Parameters<typeof richTextEditor>>[0];
+export declare const rteEditableDiv: typeof richTextEditor;
+export declare const rteToolbar: string;
+export declare const vr: string;

package/lib/RichTextEditor.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+import type { RichTextEditorAggregateValue } from "./hooks/useRTEContent";
+import type { RichTextEditorVariants } from "./RichTextEditor.css";
+export declare function RichTextEditor({ className, md: mdProp, html: htmlProp, disabled, onChange, ...rest }: ComponentProps<RichTextEditorVariants & Partial<RichTextEditorAggregateValue> & {
+    onChange?: (newValue: RichTextEditorAggregateValue) => void;
+}, HTMLDivElement>): React.ReactElement;

package/lib/browser-ponyfill-D7tZnTg2-DLSaolgA.js

@@ -0,0 +1,366 @@
+import { y as A, G as X } from "./index-DUfGYdq1.js";
+function J(E, y) {
+  for (var b = 0; b < y.length; b++) {
+    const d = y[b];
+    if (typeof d != "string" && !Array.isArray(d)) {
+      for (const c in d)
+        if (c !== "default" && !(c in E)) {
+          const p = Object.getOwnPropertyDescriptor(d, c);
+          p && Object.defineProperty(E, c, p.get ? p : {
+            enumerable: !0,
+            get: () => d[c]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(E, Symbol.toStringTag, { value: "Module" }));
+}
+var P = { exports: {} }, S;
+function Z() {
+  return S || (S = 1, (function(E, y) {
+    var b = typeof globalThis < "u" && globalThis || typeof self < "u" && self || typeof A < "u" && A, d = (function() {
+      function p() {
+        this.fetch = !1, this.DOMException = b.DOMException;
+      }
+      return p.prototype = b, new p();
+    })();
+    (function(p) {
+      (function(h) {
+        var a = typeof p < "u" && p || typeof self < "u" && self || // eslint-disable-next-line no-undef
+        typeof A < "u" && A || {}, f = {
+          searchParams: "URLSearchParams" in a,
+          iterable: "Symbol" in a && "iterator" in Symbol,
+          blob: "FileReader" in a && "Blob" in a && (function() {
+            try {
+              return new Blob(), !0;
+            } catch {
+              return !1;
+            }
+          })(),
+          formData: "FormData" in a,
+          arrayBuffer: "ArrayBuffer" in a
+        };
+        function F(t) {
+          return t && DataView.prototype.isPrototypeOf(t);
+        }
+        if (f.arrayBuffer)
+          var I = [
+            "[object Int8Array]",
+            "[object Uint8Array]",
+            "[object Uint8ClampedArray]",
+            "[object Int16Array]",
+            "[object Uint16Array]",
+            "[object Int32Array]",
+            "[object Uint32Array]",
+            "[object Float32Array]",
+            "[object Float64Array]"
+          ], C = ArrayBuffer.isView || function(t) {
+            return t && I.indexOf(Object.prototype.toString.call(t)) > -1;
+          };
+        function w(t) {
+          if (typeof t != "string" && (t = String(t)), /[^a-z0-9\-#$%&'*+.^_`|~!]/i.test(t) || t === "")
+            throw new TypeError('Invalid character in header field name: "' + t + '"');
+          return t.toLowerCase();
+        }
+        function _(t) {
+          return typeof t != "string" && (t = String(t)), t;
+        }
+        function T(t) {
+          var e = {
+            next: function() {
+              var r = t.shift();
+              return { done: r === void 0, value: r };
+            }
+          };
+          return f.iterable && (e[Symbol.iterator] = function() {
+            return e;
+          }), e;
+        }
+        function i(t) {
+          this.map = {}, t instanceof i ? t.forEach(function(e, r) {
+            this.append(r, e);
+          }, this) : Array.isArray(t) ? t.forEach(function(e) {
+            if (e.length != 2)
+              throw new TypeError("Headers constructor: expected name/value pair to be length 2, found" + e.length);
+            this.append(e[0], e[1]);
+          }, this) : t && Object.getOwnPropertyNames(t).forEach(function(e) {
+            this.append(e, t[e]);
+          }, this);
+        }
+        i.prototype.append = function(t, e) {
+          t = w(t), e = _(e);
+          var r = this.map[t];
+          this.map[t] = r ? r + ", " + e : e;
+        }, i.prototype.delete = function(t) {
+          delete this.map[w(t)];
+        }, i.prototype.get = function(t) {
+          return t = w(t), this.has(t) ? this.map[t] : null;
+        }, i.prototype.has = function(t) {
+          return this.map.hasOwnProperty(w(t));
+        }, i.prototype.set = function(t, e) {
+          this.map[w(t)] = _(e);
+        }, i.prototype.forEach = function(t, e) {
+          for (var r in this.map)
+            this.map.hasOwnProperty(r) && t.call(e, this.map[r], r, this);
+        }, i.prototype.keys = function() {
+          var t = [];
+          return this.forEach(function(e, r) {
+            t.push(r);
+          }), T(t);
+        }, i.prototype.values = function() {
+          var t = [];
+          return this.forEach(function(e) {
+            t.push(e);
+          }), T(t);
+        }, i.prototype.entries = function() {
+          var t = [];
+          return this.forEach(function(e, r) {
+            t.push([r, e]);
+          }), T(t);
+        }, f.iterable && (i.prototype[Symbol.iterator] = i.prototype.entries);
+        function x(t) {
+          if (!t._noBody) {
+            if (t.bodyUsed)
+              return Promise.reject(new TypeError("Already read"));
+            t.bodyUsed = !0;
+          }
+        }
+        function D(t) {
+          return new Promise(function(e, r) {
+            t.onload = function() {
+              e(t.result);
+            }, t.onerror = function() {
+              r(t.error);
+            };
+          });
+        }
+        function M(t) {
+          var e = new FileReader(), r = D(e);
+          return e.readAsArrayBuffer(t), r;
+        }
+        function L(t) {
+          var e = new FileReader(), r = D(e), n = /charset=([A-Za-z0-9_-]+)/.exec(t.type), s = n ? n[1] : "utf-8";
+          return e.readAsText(t, s), r;
+        }
+        function q(t) {
+          for (var e = new Uint8Array(t), r = new Array(e.length), n = 0; n < e.length; n++)
+            r[n] = String.fromCharCode(e[n]);
+          return r.join("");
+        }
+        function R(t) {
+          if (t.slice)
+            return t.slice(0);
+          var e = new Uint8Array(t.byteLength);
+          return e.set(new Uint8Array(t)), e.buffer;
+        }
+        function U() {
+          return this.bodyUsed = !1, this._initBody = function(t) {
+            this.bodyUsed = this.bodyUsed, this._bodyInit = t, t ? typeof t == "string" ? this._bodyText = t : f.blob && Blob.prototype.isPrototypeOf(t) ? this._bodyBlob = t : f.formData && FormData.prototype.isPrototypeOf(t) ? this._bodyFormData = t : f.searchParams && URLSearchParams.prototype.isPrototypeOf(t) ? this._bodyText = t.toString() : f.arrayBuffer && f.blob && F(t) ? (this._bodyArrayBuffer = R(t.buffer), this._bodyInit = new Blob([this._bodyArrayBuffer])) : f.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(t) || C(t)) ? this._bodyArrayBuffer = R(t) : this._bodyText = t = Object.prototype.toString.call(t) : (this._noBody = !0, this._bodyText = ""), this.headers.get("content-type") || (typeof t == "string" ? this.headers.set("content-type", "text/plain;charset=UTF-8") : this._bodyBlob && this._bodyBlob.type ? this.headers.set("content-type", this._bodyBlob.type) : f.searchParams && URLSearchParams.prototype.isPrototypeOf(t) && this.headers.set("content-type", "application/x-www-form-urlencoded;charset=UTF-8"));
+          }, f.blob && (this.blob = function() {
+            var t = x(this);
+            if (t)
+              return t;
+            if (this._bodyBlob)
+              return Promise.resolve(this._bodyBlob);
+            if (this._bodyArrayBuffer)
+              return Promise.resolve(new Blob([this._bodyArrayBuffer]));
+            if (this._bodyFormData)
+              throw new Error("could not read FormData body as blob");
+            return Promise.resolve(new Blob([this._bodyText]));
+          }), this.arrayBuffer = function() {
+            if (this._bodyArrayBuffer) {
+              var t = x(this);
+              return t || (ArrayBuffer.isView(this._bodyArrayBuffer) ? Promise.resolve(
+                this._bodyArrayBuffer.buffer.slice(
+                  this._bodyArrayBuffer.byteOffset,
+                  this._bodyArrayBuffer.byteOffset + this._bodyArrayBuffer.byteLength
+                )
+              ) : Promise.resolve(this._bodyArrayBuffer));
+            } else {
+              if (f.blob)
+                return this.blob().then(M);
+              throw new Error("could not read as ArrayBuffer");
+            }
+          }, this.text = function() {
+            var t = x(this);
+            if (t)
+              return t;
+            if (this._bodyBlob)
+              return L(this._bodyBlob);
+            if (this._bodyArrayBuffer)
+              return Promise.resolve(q(this._bodyArrayBuffer));
+            if (this._bodyFormData)
+              throw new Error("could not read FormData body as text");
+            return Promise.resolve(this._bodyText);
+          }, f.formData && (this.formData = function() {
+            return this.text().then(G);
+          }), this.json = function() {
+            return this.text().then(JSON.parse);
+          }, this;
+        }
+        var N = ["CONNECT", "DELETE", "GET", "HEAD", "OPTIONS", "PATCH", "POST", "PUT", "TRACE"];
+        function k(t) {
+          var e = t.toUpperCase();
+          return N.indexOf(e) > -1 ? e : t;
+        }
+        function m(t, e) {
+          if (!(this instanceof m))
+            throw new TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.');
+          e = e || {};
+          var r = e.body;
+          if (t instanceof m) {
+            if (t.bodyUsed)
+              throw new TypeError("Already read");
+            this.url = t.url, this.credentials = t.credentials, e.headers || (this.headers = new i(t.headers)), this.method = t.method, this.mode = t.mode, this.signal = t.signal, !r && t._bodyInit != null && (r = t._bodyInit, t.bodyUsed = !0);
+          } else
+            this.url = String(t);
+          if (this.credentials = e.credentials || this.credentials || "same-origin", (e.headers || !this.headers) && (this.headers = new i(e.headers)), this.method = k(e.method || this.method || "GET"), this.mode = e.mode || this.mode || null, this.signal = e.signal || this.signal || (function() {
+            if ("AbortController" in a) {
+              var o = new AbortController();
+              return o.signal;
+            }
+          })(), this.referrer = null, (this.method === "GET" || this.method === "HEAD") && r)
+            throw new TypeError("Body not allowed for GET or HEAD requests");
+          if (this._initBody(r), (this.method === "GET" || this.method === "HEAD") && (e.cache === "no-store" || e.cache === "no-cache")) {
+            var n = /([?&])_=[^&]*/;
+            if (n.test(this.url))
+              this.url = this.url.replace(n, "$1_=" + (/* @__PURE__ */ new Date()).getTime());
+            else {
+              var s = /\?/;
+              this.url += (s.test(this.url) ? "&" : "?") + "_=" + (/* @__PURE__ */ new Date()).getTime();
+            }
+          }
+        }
+        m.prototype.clone = function() {
+          return new m(this, { body: this._bodyInit });
+        };
+        function G(t) {
+          var e = new FormData();
+          return t.trim().split("&").forEach(function(r) {
+            if (r) {
+              var n = r.split("="), s = n.shift().replace(/\+/g, " "), o = n.join("=").replace(/\+/g, " ");
+              e.append(decodeURIComponent(s), decodeURIComponent(o));
+            }
+          }), e;
+        }
+        function z(t) {
+          var e = new i(), r = t.replace(/\r?\n[\t ]+/g, " ");
+          return r.split("\r").map(function(n) {
+            return n.indexOf(`
+`) === 0 ? n.substr(1, n.length) : n;
+          }).forEach(function(n) {
+            var s = n.split(":"), o = s.shift().trim();
+            if (o) {
+              var g = s.join(":").trim();
+              try {
+                e.append(o, g);
+              } catch (O) {
+                console.warn("Response " + O.message);
+              }
+            }
+          }), e;
+        }
+        U.call(m.prototype);
+        function l(t, e) {
+          if (!(this instanceof l))
+            throw new TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.');
+          if (e || (e = {}), this.type = "default", this.status = e.status === void 0 ? 200 : e.status, this.status < 200 || this.status > 599)
+            throw new RangeError("Failed to construct 'Response': The status provided (0) is outside the range [200, 599].");
+          this.ok = this.status >= 200 && this.status < 300, this.statusText = e.statusText === void 0 ? "" : "" + e.statusText, this.headers = new i(e.headers), this.url = e.url || "", this._initBody(t);
+        }
+        U.call(l.prototype), l.prototype.clone = function() {
+          return new l(this._bodyInit, {
+            status: this.status,
+            statusText: this.statusText,
+            headers: new i(this.headers),
+            url: this.url
+          });
+        }, l.error = function() {
+          var t = new l(null, { status: 200, statusText: "" });
+          return t.ok = !1, t.status = 0, t.type = "error", t;
+        };
+        var V = [301, 302, 303, 307, 308];
+        l.redirect = function(t, e) {
+          if (V.indexOf(e) === -1)
+            throw new RangeError("Invalid status code");
+          return new l(null, { status: e, headers: { location: t } });
+        }, h.DOMException = a.DOMException;
+        try {
+          new h.DOMException();
+        } catch {
+          h.DOMException = function(t, e) {
+            this.message = t, this.name = e;
+            var r = Error(t);
+            this.stack = r.stack;
+          }, h.DOMException.prototype = Object.create(Error.prototype), h.DOMException.prototype.constructor = h.DOMException;
+        }
+        function B(t, e) {
+          return new Promise(function(r, n) {
+            var s = new m(t, e);
+            if (s.signal && s.signal.aborted)
+              return n(new h.DOMException("Aborted", "AbortError"));
+            var o = new XMLHttpRequest();
+            function g() {
+              o.abort();
+            }
+            o.onload = function() {
+              var u = {
+                statusText: o.statusText,
+                headers: z(o.getAllResponseHeaders() || "")
+              };
+              s.url.indexOf("file://") === 0 && (o.status < 200 || o.status > 599) ? u.status = 200 : u.status = o.status, u.url = "responseURL" in o ? o.responseURL : u.headers.get("X-Request-URL");
+              var v = "response" in o ? o.response : o.responseText;
+              setTimeout(function() {
+                r(new l(v, u));
+              }, 0);
+            }, o.onerror = function() {
+              setTimeout(function() {
+                n(new TypeError("Network request failed"));
+              }, 0);
+            }, o.ontimeout = function() {
+              setTimeout(function() {
+                n(new TypeError("Network request timed out"));
+              }, 0);
+            }, o.onabort = function() {
+              setTimeout(function() {
+                n(new h.DOMException("Aborted", "AbortError"));
+              }, 0);
+            };
+            function O(u) {
+              try {
+                return u === "" && a.location.href ? a.location.href : u;
+              } catch {
+                return u;
+              }
+            }
+            if (o.open(s.method, O(s.url), !0), s.credentials === "include" ? o.withCredentials = !0 : s.credentials === "omit" && (o.withCredentials = !1), "responseType" in o && (f.blob ? o.responseType = "blob" : f.arrayBuffer && (o.responseType = "arraybuffer")), e && typeof e.headers == "object" && !(e.headers instanceof i || a.Headers && e.headers instanceof a.Headers)) {
+              var j = [];
+              Object.getOwnPropertyNames(e.headers).forEach(function(u) {
+                j.push(w(u)), o.setRequestHeader(u, _(e.headers[u]));
+              }), s.headers.forEach(function(u, v) {
+                j.indexOf(v) === -1 && o.setRequestHeader(v, u);
+              });
+            } else
+              s.headers.forEach(function(u, v) {
+                o.setRequestHeader(v, u);
+              });
+            s.signal && (s.signal.addEventListener("abort", g), o.onreadystatechange = function() {
+              o.readyState === 4 && s.signal.removeEventListener("abort", g);
+            }), o.send(typeof s._bodyInit > "u" ? null : s._bodyInit);
+          });
+        }
+        return B.polyfill = !0, a.fetch || (a.fetch = B, a.Headers = i, a.Request = m, a.Response = l), h.Headers = i, h.Request = m, h.Response = l, h.fetch = B, h;
+      })({});
+    })(d), d.fetch.ponyfill = !0, delete d.fetch.polyfill;
+    var c = b.fetch ? b : d;
+    y = c.fetch, y.default = c.fetch, y.fetch = c.fetch, y.Headers = c.Headers, y.Request = c.Request, y.Response = c.Response, E.exports = y;
+  })(P, P.exports)), P.exports;
+}
+var H = Z();
+const $ = /* @__PURE__ */ X(H), K = /* @__PURE__ */ J({
+  __proto__: null,
+  default: $
+}, [H]);
+export {
+  K as b
+};

package/lib/hooks/useHtmlToMd.d.ts

@@ -0,0 +1 @@
+export declare function useHtmlToMd(): (html: string) => Promise<string>;

package/lib/hooks/useMdToHtml.d.ts

@@ -0,0 +1 @@
+export declare function useMdToHtml(): (md: string) => Promise<string>;

package/lib/hooks/useRTEContent.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+export interface RichTextEditorAggregateValue {
+    md: string;
+    html: string;
+}
+export type RTEStateUpdateFromDiv = <T extends HTMLElement>(ref: RefObject<T>) => void;
+export declare function useRTEContent(initMd?: string, initHtml?: string): {
+    aggValue?: RichTextEditorAggregateValue;
+    editableDivInnerHtml: {
+        html: string;
+    };
+    updateStateFromDiv: RTEStateUpdateFromDiv;
+};

package/lib/hooks/useRTEObserver.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from "react";
+import type { RTEStateUpdateFromDiv } from "./useRTEContent";
+export declare function moveCaretAfter(node: Node): void;
+export declare function moveCaretBefore(node: Node): void;
+export declare function useRTEObserver(updateStateFromDiv: RTEStateUpdateFromDiv): RefObject<HTMLDivElement>;

package/lib/hooks/useRTESelectionListener.d.ts

@@ -0,0 +1,6 @@
+export type ElementTest = (element: HTMLElement) => boolean;
+export type SelectionDOMContextFind = (test?: ElementTest) => HTMLElement | null;
+export declare function useRTESelectionListener(editableDivRef: any): {
+    selectionRange: Range | undefined;
+    selectionDOMContextFind: SelectionDOMContextFind;
+};

package/lib/hooks/useRTEToolbarButtons.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from "react";
+import type { RTEToolbarButton } from "../toolbar-button/RTEToolbarButton";
+import type { LinkConfig } from "../RTELinkModal";
+import type { SelectionDOMContextFind } from "./useRTESelectionListener";
+type ToolbarButtonProps = Parameters<typeof RTEToolbarButton>[0] & {
+    key: string;
+};
+type ToolbarButtonPartialProps = Omit<ToolbarButtonProps, "selectionDOMContextFind">;
+export declare function useRTEToolbarButtons(selectionDOMContextFind: SelectionDOMContextFind, editableDivRef: RefObject<HTMLDivElement>): {
+    toolbarButtons: (ToolbarButtonPartialProps | "vr")[];
+    showLinkModal: boolean;
+    handleLinkModalClose: (range: Range, config?: LinkConfig) => void;
+};
+export {};

package/lib/icons/index.d.ts

@@ -0,0 +1,11 @@
+import bold from "./BOLD.svg";
+import indent from "./INDENT.svg";
+import italics from "./ITALICS.svg";
+import link from "./LINK.svg";
+import orderedList from "./ORDERED_LIST.svg";
+import outdent from "./OUTDENT.svg";
+import redo from "./REDO.svg";
+import undo from "./UNDO.svg";
+import unlink from "./UNLINK.svg";
+import unorderedList from "./UNORDERED_LIST.svg";
+export { bold, indent, italics, link, orderedList, outdent, redo, undo, unlink, unorderedList, };