@prokodo/ui 0.1.9 → 0.1.11

package/README.md

@@ -194,6 +194,7 @@ export default function GalleryPage() {
 | Quote               |               ✅               |                 –                  |
 | Rating              |               ✅               |                 ✅                 |
 | RichText            |               ✅               |                 ✅                 |
+| RTE (Beta)          |               ✅               |                 ✅                 |
 | Select              |               ✅               |                 ✅                 |
 | SideNav             |               ✅               |                 ✅                 |
 | Skeleton            |               ✅               |                 –                  |

package/dist/_virtual/_commonjsHelpers.js

@@ -1,9 +1,11 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
 __name(getDefaultExportFromCjs, "getDefaultExportFromCjs");
 export {
+  commonjsGlobal,
   getDefaultExportFromCjs
 };

package/dist/_virtual/quill.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireQuill } from "../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.js";
+function _mergeNamespaces(n, m) {
+  for (var i = 0; i < m.length; i++) {
+    const e = m[i];
+    if (typeof e !== "string" && !Array.isArray(e)) {
+      for (const k in e) {
+        if (k !== "default" && !(k in n)) {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          if (d) {
+            Object.defineProperty(n, k, d.get ? d : {
+              enumerable: true,
+              get: /* @__PURE__ */ __name(() => e[k], "get")
+            });
+          }
+        }
+      }
+    }
+  }
+  return Object.freeze(Object.defineProperty(n, Symbol.toStringTag, { value: "Module" }));
+}
+__name(_mergeNamespaces, "_mergeNamespaces");
+var quillExports = /* @__PURE__ */ requireQuill();
+const quill = /* @__PURE__ */ getDefaultExportFromCjs(quillExports);
+const quill$1 = /* @__PURE__ */ _mergeNamespaces({
+  __proto__: null,
+  default: quill
+}, [quillExports]);
+export {
+  quill as default,
+  quill$1 as q
+};

package/dist/_virtual/quill2.js

@@ -0,0 +1,4 @@
+var quill = { exports: {} };
+export {
+  quill as __module
+};

package/dist/components/RTE/RTE.client.js

@@ -0,0 +1,326 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef, useEffect, useState, useCallback } from "react";
+import { handleValidation } from "../input/InputValidation.js";
+import { create } from "../../helpers/bem.js";
+import { isString, isNull } from "../../helpers/validations.js";
+import styles from "./RTE.module.scss.js";
+import { ensureQuillSnowStyles } from "./RTE.styles.js";
+import cssText from "../../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.snow.css.js";
+import { cleanupQuill, addClasses, decorateToolbar } from "./RTE.utils.js";
+import { RTEView } from "./RTE.view.js";
+const bem = create(styles, "RTE");
+function RTEClient(props) {
+  const {
+    name,
+    value,
+    onChange,
+    onValidate,
+    required,
+    maxLength,
+    errorTranslations,
+    errorText,
+    disabled,
+    readOnly,
+    placeholder,
+    rteOptions,
+    rteToolbar,
+    ...rest
+  } = props;
+  const mountRef = useRef(null);
+  const surfaceRef = useRef(null);
+  const quillRef = useRef(null);
+  const htmlRef = useRef(value ?? "");
+  const onChangeRef = useRef(onChange);
+  const onValidateRef = useRef(onValidate);
+  const validationCfgRef = useRef({ name, required, errorTranslations });
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onValidateRef.current = onValidate;
+  }, [onValidate]);
+  useEffect(() => {
+    validationCfgRef.current = { name, required, errorTranslations };
+  }, [name, required, errorTranslations]);
+  const rteOptionsRef = useRef(rteOptions);
+  const rteToolbarRef = useRef(rteToolbar);
+  useEffect(() => {
+    rteOptionsRef.current = rteOptions;
+  }, [rteOptions]);
+  useEffect(() => {
+    rteToolbarRef.current = rteToolbar;
+  }, [rteToolbar]);
+  const startYRef = useRef(0);
+  const startHRef = useRef(0);
+  const rootClickHandlerRef = useRef(null);
+  const [err, setErr] = useState(errorText);
+  const lastEmittedHtmlRef = useRef("");
+  useEffect(() => {
+    if (isString(errorText)) setErr(errorText);
+  }, [errorText]);
+  const emitValidation = useCallback((plainText) => {
+    const cfg = validationCfgRef.current;
+    handleValidation(
+      "text",
+      cfg.name,
+      plainText,
+      cfg.required,
+      void 0,
+      void 0,
+      void 0,
+      cfg.errorTranslations,
+      (n, e) => {
+        var _a;
+        setErr(e);
+        (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, n, e);
+      }
+    );
+  }, []);
+  const syncFromQuill = useCallback(() => {
+    var _a, _b, _c;
+    const q = quillRef.current;
+    if (!q) return;
+    const html = q.root.innerHTML;
+    const text = ((_b = (_a = q.getText()) == null ? void 0 : _a.trim) == null ? void 0 : _b.call(_a)) ?? "";
+    htmlRef.current = html;
+    lastEmittedHtmlRef.current = html;
+    emitValidation(text);
+    (_c = onChangeRef.current) == null ? void 0 : _c.call(onChangeRef, html, { text });
+  }, [emitValidation]);
+  const getQuillContainer = useCallback(() => {
+    const surface = surfaceRef.current;
+    if (!surface) return null;
+    return surface.querySelector(".ql-container");
+  }, []);
+  const startResize = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (Boolean(disabled) || Boolean(readOnly)) return;
+      const container = getQuillContainer();
+      if (!container) return;
+      startYRef.current = e.clientY;
+      startHRef.current = container.getBoundingClientRect().height;
+      const onMove = /* @__PURE__ */ __name((ev) => {
+        const dy = ev.clientY - startYRef.current;
+        const next = Math.max(160, startHRef.current + dy);
+        container.style.height = `${next}px`;
+      }, "onMove");
+      const onUp = /* @__PURE__ */ __name(() => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }, "onUp");
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [disabled, readOnly, getQuillContainer]
+  );
+  useEffect(() => {
+    ensureQuillSnowStyles(cssText);
+    let cancelled = false;
+    const mountEl = mountRef.current;
+    const surfaceEl = surfaceRef.current;
+    async function init() {
+      var _a, _b, _c, _d, _e;
+      if (!mountEl || !surfaceEl) return;
+      if (Boolean(disabled) || Boolean(readOnly)) return;
+      cleanupQuill(surfaceEl, mountEl);
+      const QuillImport = await import("../../_virtual/quill.js").then((n) => n.q);
+      const Quill = (QuillImport == null ? void 0 : QuillImport.default) ?? QuillImport;
+      if (cancelled) return;
+      try {
+        const BaseImage = Quill.import("formats/image");
+        const _ImageWithAlt = class _ImageWithAlt extends BaseImage {
+          static formats(domNode) {
+            var _a2;
+            const formats = ((_a2 = super.formats) == null ? void 0 : _a2.call(this, domNode)) ?? {};
+            const alt = domNode.getAttribute("alt");
+            const title = domNode.getAttribute("title");
+            if (alt != null) formats.alt = alt;
+            if (title != null) formats.title = title;
+            return formats;
+          }
+          format(name2, value2) {
+            if (name2 === "alt") {
+              const v = typeof value2 === "string" ? value2.trim() : "";
+              if (v) this.domNode.setAttribute("alt", v);
+              else this.domNode.removeAttribute("alt");
+              return;
+            }
+            if (name2 === "title") {
+              const v = typeof value2 === "string" ? value2.trim() : "";
+              if (v) this.domNode.setAttribute("title", v);
+              else this.domNode.removeAttribute("title");
+              return;
+            }
+            super.format(name2, value2);
+          }
+        };
+        __name(_ImageWithAlt, "ImageWithAlt");
+        __publicField(_ImageWithAlt, "blotName", "image");
+        __publicField(_ImageWithAlt, "tagName", "IMG");
+        let ImageWithAlt = _ImageWithAlt;
+        Quill.register("formats/image", ImageWithAlt, true);
+      } catch {
+      }
+      const opts = rteOptionsRef.current;
+      const extraToolbar = rteToolbarRef.current;
+      const baseToolbar = [
+        ["bold", "italic", "underline", "strike"],
+        [{ list: "ordered" }, { list: "bullet" }],
+        ["link", "code-block", "image"],
+        ["clean"]
+      ];
+      const toolbarContainer = Array.isArray(extraToolbar) && extraToolbar.length ? [...baseToolbar, extraToolbar] : baseToolbar;
+      const q = new Quill(mountEl, {
+        ...opts,
+        theme: "snow",
+        placeholder: placeholder ?? "",
+        modules: {
+          history: {
+            delay: 1e3,
+            maxStack: 200,
+            userOnly: true,
+            ...((_a = opts == null ? void 0 : opts.modules) == null ? void 0 : _a.history) ?? {}
+          },
+          ...opts == null ? void 0 : opts.modules,
+          toolbar: toolbarContainer,
+          clipboard: {
+            ...((_b = opts == null ? void 0 : opts.modules) == null ? void 0 : _b.clipboard) ?? {}
+          }
+        }
+      });
+      quillRef.current = q;
+      (_c = opts == null ? void 0 : opts.onInit) == null ? void 0 : _c.call(opts, q);
+      addClasses(q.root, bem("editor"));
+      const toolbarModule = q.getModule("toolbar");
+      addClasses((toolbarModule == null ? void 0 : toolbarModule.container) ?? null, bem("toolbar"));
+      const toolbarEl = (toolbarModule == null ? void 0 : toolbarModule.container) ?? null;
+      if (toolbarEl) decorateToolbar(toolbarEl);
+      const tooltipEl = q.container.querySelector(
+        ".ql-tooltip"
+      );
+      addClasses(tooltipEl, bem("tooltip"));
+      const mo = new MutationObserver(() => {
+        const t = q.container.querySelector(".ql-tooltip");
+        if (t) addClasses(t, bem("tooltip"));
+      });
+      mo.observe(q.container, { subtree: true, childList: true });
+      const container = getQuillContainer();
+      if (container && !container.style.height) container.style.height = "220px";
+      if (htmlRef.current)
+        q.clipboard.dangerouslyPasteHTML(htmlRef.current, "silent");
+      emitValidation(((_e = (_d = q.getText()) == null ? void 0 : _d.trim) == null ? void 0 : _e.call(_d)) ?? "");
+      q.on("text-change", (_d2, _o, source) => {
+        if (source === "user") syncFromQuill();
+      });
+      const root = q.root;
+      const onRootClick = /* @__PURE__ */ __name((ev) => {
+        var _a2, _b2;
+        if (Boolean(disabled) || Boolean(readOnly)) return;
+        const el = ev.target;
+        if (!el || el.tagName !== "IMG") return;
+        const img = el;
+        const currentAlt = img.getAttribute("alt") ?? "";
+        const nextAlt = window.prompt("Alt text", currentAlt);
+        if (nextAlt == null) return;
+        const v = nextAlt.trim();
+        try {
+          const blot = Quill.find(img);
+          if (!isNull(blot == null ? void 0 : blot.format)) {
+            blot.format("alt", v);
+            (_a2 = q.update) == null ? void 0 : _a2.call(q, "user");
+            syncFromQuill();
+            return;
+          }
+        } catch {
+        }
+        if (v) img.setAttribute("alt", v);
+        else img.removeAttribute("alt");
+        (_b2 = q.update) == null ? void 0 : _b2.call(q, "user");
+        syncFromQuill();
+      }, "onRootClick");
+      rootClickHandlerRef.current = onRootClick;
+      root.addEventListener("click", onRootClick);
+    }
+    __name(init, "init");
+    void init();
+    return () => {
+      cancelled = true;
+      const q = quillRef.current;
+      const h = rootClickHandlerRef.current;
+      if ((q == null ? void 0 : q.root) && h) q.root.removeEventListener("click", h);
+      rootClickHandlerRef.current = null;
+      quillRef.current = null;
+      cleanupQuill(surfaceEl, mountEl);
+    };
+  }, [
+    disabled,
+    readOnly,
+    placeholder,
+    emitValidation,
+    syncFromQuill,
+    getQuillContainer
+  ]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (isNull(value)) return;
+    const q = quillRef.current;
+    if (Boolean((_a = q == null ? void 0 : q.hasFocus) == null ? void 0 : _a.call(q))) return;
+    const next = String(value);
+    if (next === htmlRef.current) return;
+    if (next === lastEmittedHtmlRef.current) {
+      htmlRef.current = next;
+      return;
+    }
+    htmlRef.current = next;
+    if (q) {
+      q.clipboard.dangerouslyPasteHTML(next, "silent");
+      emitValidation(((_c = (_b = q.getText()) == null ? void 0 : _b.trim) == null ? void 0 : _c.call(_b)) ?? "");
+    }
+  }, [value, emitValidation]);
+  return /* @__PURE__ */ jsx(
+    RTEView,
+    {
+      ...rest,
+      disabled,
+      errorText: err,
+      errorTranslations,
+      htmlValue: htmlRef.current,
+      maxLength,
+      mountRef,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      rteToolbar,
+      showResize: !Boolean(disabled) && !Boolean(readOnly),
+      surfaceRef,
+      value: htmlRef.current,
+      onChange,
+      onStartResize: startResize,
+      onValidate,
+      onBlur: /* @__PURE__ */ __name((e) => {
+        var _a, _b, _c;
+        const q = quillRef.current;
+        if (q) emitValidation(((_b = (_a = q.getText()) == null ? void 0 : _a.trim) == null ? void 0 : _b.call(_a)) ?? "");
+        (_c = rest.onBlur) == null ? void 0 : _c.call(rest, e);
+      }, "onBlur"),
+      onFocus: /* @__PURE__ */ __name((e) => {
+        var _a;
+        (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
+      }, "onFocus")
+    }
+  );
+}
+__name(RTEClient, "RTEClient");
+const RTEClient$1 = memo(RTEClient);
+export {
+  bem,
+  RTEClient$1 as default
+};

package/dist/components/RTE/RTE.css

@@ -0,0 +1,253 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-RTE {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.prokodo-RTE__surface {
+  position: relative;
+  width: calc(100% - 4px);
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--color-primary-40);
+}
+.prokodo-RTE__surface::after {
+  content: none;
+}
+.prokodo-RTE__toolbar {
+  border: none !important;
+  background-color: var(--color-primary-50);
+}
+.prokodo-RTE__toolbar__icon__part__stroke, .prokodo-RTE__toolbar__icon__part__stroke__miter {
+  stroke: var(--color-grey-900) !important;
+  opacity: 0.7;
+}
+.prokodo-RTE__toolbar__icon__part__fill {
+  fill: var(--color-grey-900) !important;
+  opacity: 0.7;
+}
+.prokodo-RTE__resize {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-grey-900);
+  cursor: ns-resize;
+  opacity: 0.55;
+}
+.prokodo-RTE__mount {
+  position: relative;
+  height: 200px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  border: none !important;
+}
+.prokodo-RTE__mount--disabled {
+  cursor: not-allowed;
+  opacity: 0.85;
+}
+.prokodo-RTE__tooltip {
+  max-width: calc(100% - 0.75rem - 0.75rem);
+  box-sizing: border-box;
+  border-radius: 14px;
+  overflow: hidden;
+}
+.prokodo-RTE__editor {
+  height: 100%;
+  padding: 0.75rem;
+  outline: none;
+  overflow-y: auto;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor {
+    font-size: 1rem;
+  }
+}
+.prokodo-RTE__editor p {
+  margin: 0 0 0.5rem 0;
+}
+.prokodo-RTE__editor p:last-child {
+  margin-bottom: 0;
+}
+.prokodo-RTE__editor ul,
+.prokodo-RTE__editor ol {
+  margin: 0 0 0.5rem 1.25rem;
+  padding: 0;
+}
+.prokodo-RTE__editor pre {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  border-radius: 14px;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.06);
+}
+.prokodo-RTE__editor code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0 6px;
+  border-radius: 8px;
+}
+.prokodo-RTE__editor img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 14px;
+  display: block;
+  margin: 0.5rem 0;
+}
+.prokodo-RTE--disabled {
+  opacity: 0.9;
+}
+.prokodo-RTE--readonly {
+  opacity: 0.95;
+}
+.prokodo-RTE__hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}

package/dist/components/RTE/RTE.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import RTEServer from "./RTE.server.js";
+const RTE = createIsland({
+  name: "RTE",
+  Server: RTEServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./RTE.lazy.js"), "loadLazy")
+});
+export {
+  RTE
+};

package/dist/components/RTE/RTE.lazy.js

@@ -0,0 +1,12 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import RTEClient from "./RTE.client.js";
+import RTEServer from "./RTE.server.js";
+const RTE_lazy = createLazyWrapper({
+  name: "RTE",
+  Client: RTEClient,
+  Server: RTEServer
+});
+export {
+  RTE_lazy as default
+};