@memobit/libs 2.1.0 → 3.1.0

package/dist/components/RichTextEditor/RichTextEditor2.js

@@ -0,0 +1,212 @@
+import './RichTextEditor.css';
+import { htmlToMarkdown as ae } from "../../helpers/HtmlContent.js";
+import { DEFAULT_TABLE_HTML as se } from "./helpers.js";
+import { useEditorHistory as ie } from "./hooks/useEditorHistory.js";
+import { useLinkPrompt as ce } from "./hooks/useLinkPrompt.js";
+import { useTableOps as le } from "./hooks/useTableOps.js";
+import { RteLinkPrompt as de } from "./RteLinkPrompt.js";
+import { RteTableToolbar as me } from "./RteTableToolbar.js";
+import { RteToolbar as pe } from "./RteToolbar.js";
+/* empty css               */
+import { useCallback as c, useEffect as ue, useRef as w, useState as fe } from "react";
+import { jsx as u, jsxs as E } from "react/jsx-runtime";
+var xe = ({ advanced: D = !1, error: g, format: L = "html", id: v, label: A, onBlur: M, onChange: b, placeholder: U, required: H = !1, value: x }) => {
+  const a = w(null), h = w(!1), P = w(null), [k, B] = fe(/* @__PURE__ */ new Set());
+  ue(() => {
+    const e = a.current;
+    if (!e || h.current) return;
+    const t = x ?? "";
+    e.innerHTML !== t && (e.innerHTML = t);
+  }, [x]);
+  const s = c(() => {
+    const e = a.current;
+    if (!e || !b) return;
+    h.current = !0;
+    const t = e.innerHTML.replace(/ /g, " ");
+    b(L === "markdown" ? ae(t) : t), setTimeout(() => {
+      h.current = !1;
+    }, 0);
+  }, [L, b]), { snapshotForUndo: p, undo: T, redo: C } = ie(a, h, s), { showLinkPrompt: F, linkUrl: O, setLinkUrl: _, linkText: $, setLinkText: j, editingAnchorRef: q, openLinkPrompt: R, confirmLink: I, cancelLink: z } = ce({
+    editorRef: a,
+    snapshotForUndo: p,
+    emitChange: s
+  }), { activeTable: W, tableToolbarPos: N, showTableToolbar: K, hideTableToolbar: S, addRowAbove: G, addRowBelow: J, removeRow: Q, addColumnLeft: V, addColumnRight: X, removeColumn: Y, deleteTable: Z } = le({
+    editorRef: a,
+    snapshotForUndo: p,
+    emitChange: s
+  }), l = c(() => {
+    const e = [
+      "bold",
+      "italic",
+      "underline",
+      "insertUnorderedList",
+      "insertOrderedList"
+    ], t = /* @__PURE__ */ new Set();
+    e.forEach((n) => {
+      try {
+        document.queryCommandState(n) && t.add(n);
+      } catch {
+      }
+    });
+    const r = window.getSelection();
+    if (r && r.rangeCount > 0) {
+      let n = r.getRangeAt(0).commonAncestorContainer;
+      for (; n && n !== a.current; ) {
+        if (n.nodeType === Node.ELEMENT_NODE) {
+          const o = n.tagName.toLowerCase();
+          if (/^h[1-6]$/.test(o)) {
+            t.add(o);
+            break;
+          }
+          o === "pre" && t.add("pre");
+        }
+        n = n.parentNode;
+      }
+    }
+    B(t);
+  }, []), f = c((e, t) => {
+    a.current?.focus(), document.execCommand(e, !1, t), l(), s();
+  }, [s, l]), ee = c((e) => {
+    const t = `h${e}`, r = k.has(t);
+    f("formatBlock", r ? "p" : t);
+  }, [k, f]), te = c(() => {
+    p();
+    const e = a.current;
+    if (!e) return;
+    e.focus();
+    const t = window.getSelection();
+    if (!t || t.rangeCount === 0) return;
+    const r = t.getRangeAt(0), n = document.createElement("li");
+    n.setAttribute("data-task", "true");
+    const o = document.createElement("input");
+    o.type = "checkbox", o.style.marginRight = "6px";
+    const i = document.createElement("span");
+    i.textContent = "​", n.appendChild(o), n.appendChild(i);
+    const d = document.createElement("ul");
+    d.className = "rte-task-list", d.appendChild(n), r.deleteContents(), r.insertNode(d);
+    const m = document.createRange();
+    m.setStart(i, 1), m.collapse(!0), t.removeAllRanges(), t.addRange(m), s();
+  }, [p, s]), ne = c(() => {
+    f("insertHTML", se);
+  }, [f]), oe = c((e) => {
+    const t = e.target, r = t.closest("a");
+    if (r) {
+      e.preventDefault(), R(r), l();
+      return;
+    }
+    const n = t.closest("table");
+    n ? K(n) : S(), l();
+  }, [
+    R,
+    l,
+    K,
+    S
+  ]), re = c((e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+      e.preventDefault(), e.shiftKey ? C() : T();
+      return;
+    }
+    const t = e.key.length === 1 && !e.ctrlKey && !e.metaKey, r = [
+      "Enter",
+      "Backspace",
+      "Delete",
+      " "
+    ].includes(e.key);
+    if ((t || r) && p(), e.key === "Enter" && !e.shiftKey) {
+      const n = window.getSelection();
+      if (n && n.rangeCount > 0) {
+        let o = n.getRangeAt(0).commonAncestorContainer;
+        for (; o && o !== a.current; ) {
+          if (o.classList?.contains("rte-task-list")) {
+            e.preventDefault();
+            const i = document.createElement("li");
+            i.setAttribute("data-task", "true");
+            const d = document.createElement("input");
+            d.type = "checkbox", d.style.marginRight = "6px";
+            const m = document.createElement("span");
+            m.textContent = "​", i.appendChild(d), i.appendChild(m), o.appendChild(i);
+            const y = document.createRange();
+            y.setStart(m, 1), y.collapse(!0), n.removeAllRanges(), n.addRange(y);
+            return;
+          }
+          o = o.parentNode;
+        }
+      }
+    }
+  }, [
+    p,
+    T,
+    C
+  ]);
+  return /* @__PURE__ */ E("div", {
+    className: "rte-wrapper",
+    children: [
+      A && /* @__PURE__ */ E("label", {
+        htmlFor: v,
+        className: "rte-label",
+        children: [A, H && /* @__PURE__ */ u("span", {
+          className: "rte-required",
+          children: "*"
+        })]
+      }),
+      /* @__PURE__ */ E("div", {
+        className: `rte-container ${g ? "rte-container--error" : ""}`,
+        style: { position: "relative" },
+        children: [
+          /* @__PURE__ */ u(pe, {
+            advanced: D,
+            isActive: (e) => k.has(e),
+            exec: f,
+            applyHeading: ee,
+            insertTaskList: te,
+            openLinkPrompt: () => R(),
+            insertTable: ne,
+            undo: T,
+            redo: C
+          }),
+          F && /* @__PURE__ */ u(de, {
+            isEditing: !!q.current,
+            linkText: $,
+            linkUrl: O,
+            setLinkText: j,
+            setLinkUrl: _,
+            confirmLink: I,
+            cancelLink: z
+          }),
+          W && N && /* @__PURE__ */ u(me, {
+            pos: N,
+            toolbarRef: P,
+            addRowAbove: G,
+            addRowBelow: J,
+            removeRow: Q,
+            addColumnLeft: V,
+            addColumnRight: X,
+            removeColumn: Y,
+            deleteTable: Z
+          }),
+          /* @__PURE__ */ u("div", {
+            ref: a,
+            id: v,
+            className: "rte-editor",
+            contentEditable: !0,
+            suppressContentEditableWarning: !0,
+            "data-placeholder": U,
+            onInput: s,
+            onKeyUp: l,
+            onMouseUp: l,
+            onClick: oe,
+            onKeyDown: re,
+            onBlur: M
+          })
+        ]
+      }),
+      g && /* @__PURE__ */ u("span", {
+        className: "rte-error-message",
+        children: g
+      })
+    ]
+  });
+};
+export {
+  xe as RichTextEditor
+};

package/dist/components/RichTextEditor/RteLinkPrompt.js

@@ -0,0 +1,42 @@
+import "react";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var k = ({ isEditing: r, linkText: i, linkUrl: o, setLinkText: p, setLinkUrl: s, confirmLink: n, cancelLink: l }) => /* @__PURE__ */ a("div", {
+  className: "rte-link-prompt",
+  children: [
+    /* @__PURE__ */ e("input", {
+      className: "rte-link-input",
+      type: "text",
+      placeholder: "Display text (optional)",
+      value: i,
+      onChange: (t) => p(t.target.value)
+    }),
+    /* @__PURE__ */ e("input", {
+      className: "rte-link-input",
+      type: "url",
+      placeholder: "https://example.com",
+      value: o,
+      onChange: (t) => s(t.target.value),
+      onKeyDown: (t) => {
+        t.key === "Enter" && n(), t.key === "Escape" && l();
+      },
+      autoFocus: !0
+    }),
+    /* @__PURE__ */ a("div", {
+      className: "rte-link-actions",
+      children: [/* @__PURE__ */ e("button", {
+        type: "button",
+        className: "rte-link-btn rte-link-btn--confirm",
+        onClick: n,
+        children: r ? "Update" : "Insert"
+      }), /* @__PURE__ */ e("button", {
+        type: "button",
+        className: "rte-link-btn rte-link-btn--cancel",
+        onClick: l,
+        children: "Cancel"
+      })]
+    })
+  ]
+});
+export {
+  k as RteLinkPrompt
+};

package/dist/components/RichTextEditor/RteTableToolbar.js

@@ -0,0 +1,95 @@
+import { Tooltip as e } from "../Tooltip/Tooltip2.js";
+import "react";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+var N = ({ pos: o, toolbarRef: r, addRowAbove: a, addRowBelow: b, removeRow: n, addColumnLeft: i, addColumnRight: c, removeColumn: d, deleteTable: s }) => /* @__PURE__ */ l("div", {
+  ref: r,
+  className: "rte-table-toolbar",
+  style: {
+    top: o.top,
+    left: o.left
+  },
+  onMouseDown: (m) => m.preventDefault(),
+  children: [
+    /* @__PURE__ */ l("div", {
+      className: "rte-table-toolbar-group",
+      children: [
+        /* @__PURE__ */ t(e, {
+          title: "Add row above",
+          children: /* @__PURE__ */ t("button", {
+            type: "button",
+            className: "rte-table-toolbar-btn",
+            onClick: a,
+            children: "↑ Row"
+          })
+        }),
+        /* @__PURE__ */ t(e, {
+          title: "Add row below",
+          children: /* @__PURE__ */ t("button", {
+            type: "button",
+            className: "rte-table-toolbar-btn",
+            onClick: b,
+            children: "↓ Row"
+          })
+        }),
+        /* @__PURE__ */ t(e, {
+          title: "Remove last row",
+          children: /* @__PURE__ */ t("button", {
+            type: "button",
+            className: "rte-table-toolbar-btn rte-table-toolbar-btn--danger",
+            onClick: n,
+            children: "− Row"
+          })
+        })
+      ]
+    }),
+    /* @__PURE__ */ t("div", { className: "rte-table-toolbar-divider" }),
+    /* @__PURE__ */ l("div", {
+      className: "rte-table-toolbar-group",
+      children: [
+        /* @__PURE__ */ t(e, {
+          title: "Add column left",
+          children: /* @__PURE__ */ t("button", {
+            type: "button",
+            className: "rte-table-toolbar-btn",
+            onClick: i,
+            children: "← Col"
+          })
+        }),
+        /* @__PURE__ */ t(e, {
+          title: "Add column right",
+          children: /* @__PURE__ */ t("button", {
+            type: "button",
+            className: "rte-table-toolbar-btn",
+            onClick: c,
+            children: "→ Col"
+          })
+        }),
+        /* @__PURE__ */ t(e, {
+          title: "Remove last column",
+          children: /* @__PURE__ */ t("button", {
+            type: "button",
+            className: "rte-table-toolbar-btn rte-table-toolbar-btn--danger",
+            onClick: d,
+            children: "− Col"
+          })
+        })
+      ]
+    }),
+    /* @__PURE__ */ t("div", { className: "rte-table-toolbar-divider" }),
+    /* @__PURE__ */ t("div", {
+      className: "rte-table-toolbar-group",
+      children: /* @__PURE__ */ t(e, {
+        title: "Delete table",
+        children: /* @__PURE__ */ t("button", {
+          type: "button",
+          className: "rte-table-toolbar-btn rte-table-toolbar-btn--danger",
+          onClick: s,
+          children: "✕ Table"
+        })
+      })
+    })
+  ]
+});
+export {
+  N as RteTableToolbar
+};

package/dist/components/RichTextEditor/RteToolbar.js

@@ -0,0 +1,106 @@
+import { Icon as i } from "../Icon/Icon2.js";
+import { Tooltip as a } from "../Tooltip/Tooltip2.js";
+import { ADVANCED_BUTTONS as h, HEADING_LEVELS as v, HISTORY_BUTTONS as N, TOOLBAR_BUTTONS as D } from "./helpers.js";
+import "react";
+import { Fragment as f, jsx as e, jsxs as r } from "react/jsx-runtime";
+var k = ({ advanced: m, isActive: l, exec: n, applyHeading: c, insertTaskList: d, openLinkPrompt: s, insertTable: u, undo: b, redo: p }) => /* @__PURE__ */ r("div", {
+  className: "rte-toolbar",
+  children: [
+    /* @__PURE__ */ e("div", {
+      className: "rte-toolbar-group",
+      children: N.map((t) => /* @__PURE__ */ e(a, {
+        title: t.title,
+        children: /* @__PURE__ */ e("button", {
+          type: "button",
+          className: "rte-toolbar-btn",
+          onMouseDown: (o) => {
+            o.preventDefault(), t.command === "undo" ? b() : p();
+          },
+          children: t.label
+        })
+      }, t.command))
+    }),
+    /* @__PURE__ */ e("div", { className: "rte-toolbar-divider" }),
+    /* @__PURE__ */ r("div", {
+      className: "rte-toolbar-group",
+      children: [D.map((t) => /* @__PURE__ */ e(a, {
+        title: t.title,
+        children: /* @__PURE__ */ e("button", {
+          type: "button",
+          className: `rte-toolbar-btn ${l(t.command) ? "rte-toolbar-btn--active" : ""}`,
+          onMouseDown: (o) => {
+            o.preventDefault(), n(t.command, t.value);
+          },
+          children: t.label
+        })
+      }, t.command)), /* @__PURE__ */ e(a, {
+        title: "Task List",
+        children: /* @__PURE__ */ r("button", {
+          type: "button",
+          className: "rte-toolbar-btn",
+          onMouseDown: (t) => {
+            t.preventDefault(), d();
+          },
+          children: [/* @__PURE__ */ e(i, { name: "checkmark" }), " List"]
+        })
+      })]
+    }),
+    /* @__PURE__ */ e("div", { className: "rte-toolbar-divider" }),
+    /* @__PURE__ */ e("div", {
+      className: "rte-toolbar-group",
+      children: v.map((t) => /* @__PURE__ */ e(a, {
+        title: `Heading ${t}`,
+        children: /* @__PURE__ */ r("button", {
+          type: "button",
+          className: `rte-toolbar-btn rte-toolbar-btn--heading ${l(`h${t}`) ? "rte-toolbar-btn--active" : ""}`,
+          onMouseDown: (o) => {
+            o.preventDefault(), c(t);
+          },
+          children: ["H", t]
+        })
+      }, t))
+    }),
+    /* @__PURE__ */ e("div", { className: "rte-toolbar-divider" }),
+    /* @__PURE__ */ e("div", {
+      className: "rte-toolbar-group",
+      children: /* @__PURE__ */ e(a, {
+        title: "Insert Link",
+        children: /* @__PURE__ */ r("button", {
+          type: "button",
+          className: "rte-toolbar-btn",
+          onMouseDown: (t) => {
+            t.preventDefault(), s();
+          },
+          children: [/* @__PURE__ */ e(i, { name: "link" }), " Link"]
+        })
+      })
+    }),
+    m && /* @__PURE__ */ r(f, { children: [/* @__PURE__ */ e("div", { className: "rte-toolbar-divider" }), /* @__PURE__ */ r("div", {
+      className: "rte-toolbar-group",
+      children: [h.map((t) => /* @__PURE__ */ e(a, {
+        title: t.title,
+        children: /* @__PURE__ */ e("button", {
+          type: "button",
+          className: `rte-toolbar-btn ${l(t.value ?? t.command) ? "rte-toolbar-btn--active" : ""}`,
+          onMouseDown: (o) => {
+            o.preventDefault(), n(t.command, t.value);
+          },
+          children: t.label
+        })
+      }, t.command + (t.value ?? ""))), /* @__PURE__ */ e(a, {
+        title: "Insert Table",
+        children: /* @__PURE__ */ e("button", {
+          type: "button",
+          className: "rte-toolbar-btn",
+          onMouseDown: (t) => {
+            t.preventDefault(), u();
+          },
+          children: "Table"
+        })
+      })]
+    })] })
+  ]
+});
+export {
+  k as RteToolbar
+};

package/dist/components/RichTextEditor/helpers.js

@@ -0,0 +1,73 @@
+var r = [
+  {
+    command: "bold",
+    label: "B",
+    title: "Bold (Ctrl+B)"
+  },
+  {
+    command: "italic",
+    label: "I",
+    title: "Italic (Ctrl+I)"
+  },
+  {
+    command: "underline",
+    label: "U",
+    title: "Underline (Ctrl+U)"
+  },
+  {
+    command: "insertUnorderedList",
+    label: "• List",
+    title: "Unordered List"
+  },
+  {
+    command: "insertOrderedList",
+    label: "1. List",
+    title: "Ordered List"
+  }
+], a = [{
+  command: "undo",
+  label: "↩ Undo",
+  title: "Undo (Ctrl+Z)"
+}, {
+  command: "redo",
+  label: "↪ Redo",
+  title: "Redo (Ctrl+Shift+Z)"
+}], n = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6
+], o = [{
+  command: "formatBlock",
+  value: "pre",
+  label: "Code Block",
+  title: "Code Block",
+  isAdvanced: !0
+}], i = (d) => {
+  const e = document.createElement("tr");
+  for (let l = 0; l < d; l++) {
+    const t = document.createElement("td");
+    t.setAttribute("contenteditable", "true"), t.textContent = "Cell", e.appendChild(t);
+  }
+  return e;
+}, c = `
+            <table class="rte-table">
+                <thead>
+                    <tr><th contenteditable="true">Header 1</th><th contenteditable="true">Header 2</th><th contenteditable="true">Header 3</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td contenteditable="true">Cell</td><td contenteditable="true">Cell</td><td contenteditable="true">Cell</td></tr>
+                    <tr><td contenteditable="true">Cell</td><td contenteditable="true">Cell</td><td contenteditable="true">Cell</td></tr>
+                </tbody>
+            </table><p><br></p>
+        `;
+export {
+  o as ADVANCED_BUTTONS,
+  c as DEFAULT_TABLE_HTML,
+  n as HEADING_LEVELS,
+  a as HISTORY_BUTTONS,
+  r as TOOLBAR_BUTTONS,
+  i as makeTableRow
+};

package/dist/components/RichTextEditor/hooks/useEditorHistory.js

@@ -0,0 +1,39 @@
+import { useCallback as s, useRef as T } from "react";
+var H = 100, M = (n, u, c) => {
+  const t = T([]), e = T([]);
+  return {
+    snapshotForUndo: s(() => {
+      const r = n.current;
+      r && (t.current.push(r.innerHTML), t.current.length > H && t.current.shift(), e.current = []);
+    }, [n]),
+    undo: s(() => {
+      const r = n.current;
+      if (!r || t.current.length === 0) return;
+      e.current.push(r.innerHTML);
+      const o = t.current.pop();
+      u.current = !0, r.innerHTML = o, setTimeout(() => {
+        u.current = !1;
+      }, 0), c();
+    }, [
+      n,
+      u,
+      c
+    ]),
+    redo: s(() => {
+      const r = n.current;
+      if (!r || e.current.length === 0) return;
+      t.current.push(r.innerHTML);
+      const o = e.current.pop();
+      u.current = !0, r.innerHTML = o, setTimeout(() => {
+        u.current = !1;
+      }, 0), c();
+    }, [
+      n,
+      u,
+      c
+    ])
+  };
+};
+export {
+  M as useEditorHistory
+};

package/dist/components/RichTextEditor/hooks/useLinkPrompt.js

@@ -0,0 +1,61 @@
+import { useCallback as a, useRef as k, useState as f } from "react";
+var h = ({ editorRef: m, snapshotForUndo: d, emitChange: g }) => {
+  const [p, u] = f(!1), [t, i] = f(""), [o, c] = f(""), s = k(null), n = k(null);
+  return {
+    showLinkPrompt: p,
+    linkUrl: t,
+    setLinkUrl: i,
+    linkText: o,
+    setLinkText: c,
+    editingAnchorRef: n,
+    openLinkPrompt: a((r) => {
+      if (r)
+        n.current = r, c(r.textContent ?? ""), i(r.getAttribute("href") ?? "");
+      else {
+        n.current = null;
+        const e = window.getSelection();
+        e && e.rangeCount > 0 && (s.current = e.getRangeAt(0).cloneRange(), c(e.toString())), i("");
+      }
+      u(!0);
+    }, []),
+    confirmLink: a(() => {
+      const r = m.current;
+      if (r) {
+        if (r.focus(), n.current) {
+          const e = n.current;
+          if (t)
+            e.setAttribute("href", t), o && (e.textContent = o);
+          else {
+            const l = e.parentNode;
+            for (; e.firstChild; ) l?.insertBefore(e.firstChild, e);
+            l?.removeChild(e);
+          }
+          n.current = null;
+        } else {
+          d();
+          const e = window.getSelection();
+          if (s.current && (e?.removeAllRanges(), e?.addRange(s.current)), t) if (o && e?.toString() === "") document.execCommand("insertHTML", !1, `<a href="${t}" target="_blank" rel="noopener noreferrer">${o}</a>`);
+          else {
+            document.execCommand("createLink", !1, t);
+            const l = e?.anchorNode?.parentElement?.closest("a");
+            l && (l.setAttribute("target", "_blank"), l.setAttribute("rel", "noopener noreferrer"));
+          }
+          s.current = null;
+        }
+        u(!1), i(""), c(""), g();
+      }
+    }, [
+      m,
+      t,
+      o,
+      d,
+      g
+    ]),
+    cancelLink: a(() => {
+      u(!1), i(""), c(""), s.current = null, n.current = null;
+    }, [])
+  };
+};
+export {
+  h as useLinkPrompt
+};