@connectedxm/entity-editor 0.0.3 → 0.0.4

package/dist/index.es.js

@@ -31,7 +31,7 @@ function Fe() {
   }
   return x.Fragment = t, x.jsx = n, x.jsxs = n, x;
 }
-var L = {};
+var D = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -47,7 +47,7 @@ function We() {
     function e(r) {
       if (r == null) return null;
       if (typeof r == "function")
-        return r.$$typeof === z ? null : r.displayName || r.name || null;
+        return r.$$typeof === V ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
         case O:
@@ -60,7 +60,7 @@ function We() {
           return "Suspense";
         case U:
           return "SuspenseList";
-        case V:
+        case z:
           return "Activity";
       }
       if (typeof r == "object")
@@ -78,7 +78,7 @@ function We() {
             return r = r.displayName, r || (r = l.displayName || l.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
           case S:
             return l = r.displayName || null, l !== null ? l : e(r.type) || "Memo";
-          case y:
+          case I:
             l = r._payload, r = r._init;
             try {
               return e(r(l));
@@ -109,7 +109,7 @@ function We() {
     }
     function s(r) {
       if (r === O) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === y)
+      if (typeof r == "object" && r !== null && r.$$typeof === I)
         return "<...>";
       try {
         var l = e(r);
@@ -119,7 +119,7 @@ function We() {
       }
     }
     function o() {
-      var r = T.A;
+      var r = M.A;
       return r === null ? null : r.getOwner();
     }
     function i() {
@@ -152,7 +152,7 @@ function We() {
     }
     function m(r, l, d, g, R, w, de, Ee) {
       return d = w.ref, r = {
-        $$typeof: I,
+        $$typeof: j,
         type: r,
         key: l,
         props: w,
@@ -197,10 +197,10 @@ function We() {
         else p(k);
       if (G.call(l, "key")) {
         k = e(r);
-        var j = Object.keys(l).filter(function(Be) {
-          return Be !== "key";
+        var P = Object.keys(l).filter(function(Le) {
+          return Le !== "key";
         });
-        g = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", h[k + g] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+        g = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", h[k + g] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -209,7 +209,7 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           g,
           k,
-          j,
+          P,
           k
         ), h[k + g] = !0);
       }
@@ -233,22 +233,22 @@ React keys must be passed directly to JSX without using spread:
       );
     }
     function p(r) {
-      typeof r == "object" && r !== null && r.$$typeof === I && r._store && (r._store.validated = 1);
+      typeof r == "object" && r !== null && r.$$typeof === j && r._store && (r._store.validated = 1);
     }
-    var P = A, I = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), le = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), W = Symbol.for("react.consumer"), K = Symbol.for("react.context"), ue = Symbol.for("react.forward_ref"), ae = Symbol.for("react.suspense"), U = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), V = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), T = P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, fe = Array.isArray, M = console.createTask ? console.createTask : function() {
+    var C = A, j = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), le = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), W = Symbol.for("react.consumer"), K = Symbol.for("react.context"), ue = Symbol.for("react.forward_ref"), ae = Symbol.for("react.suspense"), U = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), z = Symbol.for("react.activity"), V = Symbol.for("react.client.reference"), M = C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, fe = Array.isArray, T = console.createTask ? console.createTask : function() {
       return null;
     };
-    P = {
+    C = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var J, a = {}, _ = P.react_stack_bottom_frame.bind(
-      P,
+    var J, a = {}, _ = C.react_stack_bottom_frame.bind(
+      C,
       i
-    )(), E = M(s(i)), h = {};
-    L.Fragment = O, L.jsx = function(r, l, d, g, R) {
-      var w = 1e4 > T.recentlyCreatedOwnerStacks++;
+    )(), E = T(s(i)), h = {};
+    D.Fragment = O, D.jsx = function(r, l, d, g, R) {
+      var w = 1e4 > M.recentlyCreatedOwnerStacks++;
       return N(
         r,
         l,
@@ -257,10 +257,10 @@ React keys must be passed directly to JSX without using spread:
         g,
         R,
         w ? Error("react-stack-top-frame") : _,
-        w ? M(s(r)) : E
+        w ? T(s(r)) : E
       );
-    }, L.jsxs = function(r, l, d, g, R) {
-      var w = 1e4 > T.recentlyCreatedOwnerStacks++;
+    }, D.jsxs = function(r, l, d, g, R) {
+      var w = 1e4 > M.recentlyCreatedOwnerStacks++;
       return N(
         r,
         l,
@@ -269,16 +269,16 @@ React keys must be passed directly to JSX without using spread:
         g,
         R,
         w ? Error("react-stack-top-frame") : _,
-        w ? M(s(r)) : E
+        w ? T(s(r)) : E
       );
     };
-  })()), L;
+  })()), D;
 }
 var Ie;
 function Ke() {
   return Ie || (Ie = 1, process.env.NODE_ENV === "production" ? X.exports = Fe() : X.exports = We()), X.exports;
 }
-var C = Ke();
+var y = Ke();
 const ye = () => {
   const e = window.getSelection(), t = document.getElementById("entity-editor");
   if (!e || !t) return { start: 0, end: 0 };
@@ -314,7 +314,7 @@ const ye = () => {
     const N = window.getSelection();
     N?.removeAllRanges(), N?.addRange(m);
   }
-}, Ve = (e, t, n) => {
+}, ze = (e, t, n) => {
   let s = "", o = "", i = "", c = "";
   t.includes("bold") && (o = "bold"), t.includes("italic") && (i = "italic"), (t.includes("underline") || e === "link") && (c += "underline"), t.includes("strike") && (c += " line-through"), e !== "segment" && (s = "#1da1f2", e === "mention" && n.mentionColor ? s = n.mentionColor : e === "interest" && n.interestColor ? s = n.interestColor : e === "link" && n.linkColor && (s = n.linkColor));
   let u = "";
@@ -325,24 +325,27 @@ const ye = () => {
   let s = "", o = 0;
   return t.forEach((i) => {
     o < i.startIndex && (s += e.slice(o, i.startIndex));
-    const c = e.slice(i.startIndex, i.endIndex), u = Ve(i.type, i.marks, n);
+    const c = e.slice(i.startIndex, i.endIndex), u = ze(i.type, i.marks, n);
     s += `<span style="${u}">${c}</span>`, o = i.endIndex;
   }), s += e.slice(o), s;
-}, ze = (e, t) => {
+}, Ve = (e, t) => {
   let n = !1;
   e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), document.execCommand("insertLineBreak"), n = !0) : (e.metaKey || e.ctrlKey) && (e.key === "b" ? (t("bold"), n = !0) : e.key === "i" ? (t("italic"), n = !0) : e.key === "u" ? (t("underline"), n = !0) : e.key === "s" && (t("strike"), n = !0)), n && e.preventDefault();
-}, ee = 128, Ge = /^(?<protocol>[a-z\-]+)?:?(?<host>\/\/.*\.[^\/]+)$/, Je = "()[]{}", Me = "", xe = (e, t) => {
+}, ee = 128, Ge = "()[]{}", Te = "", Je = new RegExp(
+  "^(?:(?:(?:https?|ftp):)?\\/\\/)(?:\\S+(?::\\S*)?@)?(?:(?!(?:10|127)(?:\\.\\d{1,3}){3})(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z0-9\\u00a1-\\uffff][a-z0-9\\u00a1-\\uffff_-]{0,62})?[a-z0-9\\u00a1-\\uffff]\\.)+(?:[a-z\\u00a1-\\uffff]{2,}\\.?))(?::\\d{2,5})?(?:[/?#]\\S*)?$",
+  "i"
+), xe = (e, t) => {
   const n = ve(
     e,
     t,
-    Je,
-    Me
+    Ge,
+    Te
   );
-  return n?.search.match(Ge) ? {
+  return n?.search.match(Je) ? {
     type: "link",
     ...n
   } : null;
-}, te = (e) => (e & ee) !== 0, Re = (e, t) => t ? e | ee : e & ~ee, re = 32, Xe = /^@[a-zA-Z0-9_'-]+$/, qe = `.,!?;()[]{}"'<>#`, ne = "@", Le = (e, t) => {
+}, te = (e) => (e & ee) !== 0, Re = (e, t) => t ? e | ee : e & ~ee, re = 32, Xe = /^@[a-zA-Z0-9_'-]+$/, qe = `.,!?;()[]{}"'<>#`, ne = "@", De = (e, t) => {
   const n = ve(
     e,
     t,
@@ -353,7 +356,7 @@ const ye = () => {
     type: "mention",
     ...n
   } : null;
-}, oe = (e) => (e & re) !== 0, _e = (e, t) => t ? e | re : e & ~re, D = 2, q = (e) => (e & D) !== 0, ke = (e, t) => t ? e | D : e & ~D, B = 4, H = (e) => (e & B) !== 0, be = (e, t) => t ? e | B : e & ~B, $ = 16, Z = (e) => (e & $) !== 0, Se = (e, t) => t ? e | $ : e & ~$, Y = 8, Q = (e) => (e & Y) !== 0, we = (e, t) => t ? e | Y : e & ~Y, Pe = (e, t) => {
+}, oe = (e) => (e & re) !== 0, _e = (e, t) => t ? e | re : e & ~re, B = 2, q = (e) => (e & B) !== 0, ke = (e, t) => t ? e | B : e & ~B, L = 4, H = (e) => (e & L) !== 0, be = (e, t) => t ? e | L : e & ~L, $ = 16, Z = (e) => (e & $) !== 0, Se = (e, t) => t ? e | $ : e & ~$, Y = 8, Q = (e) => (e & Y) !== 0, we = (e, t) => t ? e | Y : e & ~Y, je = (e, t) => {
   if (e === t) return null;
   let n = 0;
   for (; n < e.length && n < t.length && e[n] === t[n]; )
@@ -386,7 +389,7 @@ const ye = () => {
     i--;
   }
   return e;
-}, je = (e, t, n) => {
+}, Pe = (e, t, n) => {
   if (!t) return e;
   const { position: s, deletedLength: o, insertedText: i } = t, c = i.length;
   let u = [...e];
@@ -426,7 +429,7 @@ const ye = () => {
     startIndex: i,
     endIndex: c
   };
-}, se = 64, Ze = `.,!?;()[]{}"'<>@`, Qe = /^#[\w-]+$/, ie = "#", De = (e, t) => {
+}, se = 64, Ze = `.,!?;()[]{}"'<>@`, Qe = /^#[\w-]+$/, ie = "#", Be = (e, t) => {
   const n = ve(
     e,
     t,
@@ -457,8 +460,8 @@ const ye = () => {
       startIndex: c,
       endIndex: u + 1,
       marks: m,
-      username: f === "mention" ? Le(e, u)?.search.replace(ne, "") : void 0,
-      interest: f === "interest" ? De(e, u)?.search.replace(
+      username: f === "mention" ? De(e, u)?.search.replace(ne, "") : void 0,
+      interest: f === "interest" ? Be(e, u)?.search.replace(
         ie,
         ""
       ) : void 0,
@@ -467,9 +470,9 @@ const ye = () => {
     s.push(N), o = u + 1;
   }
   return s;
-}, rt = (e, t) => e & re && t.mentions ? "mention" : e & se && t.interests ? "interest" : e & ee && t.links ? "link" : (e & (D | B | Y | $), "segment"), nt = (e) => {
+}, rt = (e, t) => e & re && t.mentions ? "mention" : e & se && t.interests ? "interest" : e & ee && t.links ? "link" : (e & (B | L | Y | $), "segment"), nt = (e) => {
   const t = [];
-  return e & D && t.push("bold"), e & B && t.push("italic"), e & Y && t.push("underline"), e & $ && t.push("strike"), t;
+  return e & B && t.push("bold"), e & L && t.push("italic"), e & Y && t.push("underline"), e & $ && t.push("strike"), t;
 }, b = (e, t) => {
   const n = e[t];
   return typeof n != "number" ? 0 : n;
@@ -532,7 +535,7 @@ const ye = () => {
   for (let c = t; c < n; c++)
     o = st(o, c, s, i);
   return o;
-}, Te = (e, t) => {
+}, Me = (e, t) => {
   const n = new Array(e.length).fill(0);
   for (let s = 0; s < e.length; s++) {
     let o = 0;
@@ -565,25 +568,28 @@ const ye = () => {
   options: m = {},
   entityStyles: N = {},
   placeholder: p = "",
-  debug: P = !1,
-  ...I
+  debug: C = !1,
+  ...j
 }) => {
-  const v = A.useRef(null), [O, le] = A.useState({ start: 0, end: 0 }), [F, W] = A.useState(!1), [K, ue] = A.useState(!1), [ae, U] = A.useState(!1), [S, y] = A.useState(
-    Te(t, s)
+  const v = A.useRef(null), [O, le] = A.useState({ start: 0, end: 0 }), [F, W] = A.useState(!1), [K, ue] = A.useState(!1), [ae, U] = A.useState(!1), [S, I] = A.useState(
+    Me(t, s)
   );
   e.current = {
     selectEntity: (a, _, E, h) => {
       if (!v.current) return;
       let r = [...S];
-      a === "mention" ? h = ne + h : a === "interest" ? h = ie + h : a === "link" && (h = Me + h);
-      const l = t.slice(0, _) + h + t.slice(E), d = Pe(t, l);
-      d ? r = je(S, d, i) : r = Te(l, s);
+      a === "mention" ? h = ne + h : a === "interest" ? h = ie + h : a === "link" && (h = Te + h);
+      const l = t.slice(0, _) + h + t.slice(E), d = je(t, l);
+      d ? r = Pe(S, d, i) : r = Me(l, s);
       for (let g = _; g < _ + h.length; g++)
         r[g] = ot(r, g, a);
-      n(l), y(r), f(null);
+      n(l), I(r), f(null);
     },
     toggleMark: (a) => {
-      z(a);
+      V(a);
+    },
+    clear: () => {
+      n(""), I([]), o([]);
     }
   }, A.useEffect(() => {
     if (v.current) {
@@ -596,10 +602,10 @@ const ye = () => {
     const a = tt(t, S, m), _ = ye() ?? O, E = Ce(t, a, N);
     v.current.innerHTML = E, o(a), K && Ue(v.current, _);
   }, [S]);
-  const V = ut(O, 500);
+  const z = ut(O, 500);
   A.useEffect(() => {
-    let { start: a, end: _ } = V, E = null;
-    if (!E && !oe(b(S, a - 1)) && (E = Le(t, a), E && (E.search = E.search.replace(ne, ""))), !E && !ce(b(S, a - 1)) && (E = De(t, a), E && (E.search = E.search.replace(ie, ""))), !E && !te(b(S, a - 1)) && (E = xe(t, a)), E ? f(E) : u && f(null), F) return;
+    let { start: a, end: _ } = z, E = null;
+    if (!E && !oe(b(S, a - 1)) && (E = De(t, a), E && (E.search = E.search.replace(ne, ""))), !E && !ce(b(S, a - 1)) && (E = Be(t, a), E && (E.search = E.search.replace(ie, ""))), !E && !te(b(S, a - 1)) && (E = xe(t, a)), E ? f(E) : u && f(null), F) return;
     let h = !0, r = !0, l = !0, d = !0;
     if (a === _)
       if (a > 0) {
@@ -620,38 +626,38 @@ const ye = () => {
       underline: l,
       strike: d
     });
-  }, [V]);
-  const z = (a) => {
+  }, [z]);
+  const V = (a) => {
     if (W(!0), !v.current)
       return;
     const { start: _, end: E } = O;
     if (_ !== E) {
       const r = lt(S, _, E, a);
-      y(r);
+      I(r);
     }
     const h = { ...i };
     a === "bold" ? h.bold = !i.bold : a === "italic" ? h.italic = !i.italic : a === "underline" ? h.underline = !i.underline : a === "strike" && (h.strike = !i.strike), c(h);
-  }, T = (a) => {
+  }, M = (a) => {
     if (!v.current) return;
     if (F && W(!1), a.target.textContent.length === 0) {
-      n(""), y([]), o([]);
+      n(""), I([]), o([]);
       return;
     }
-    const _ = a.target.innerText || "", E = Pe(t, _);
+    const _ = a.target.innerText || "", E = je(t, _);
     if (E) {
-      const h = je(
+      const h = Pe(
         S,
         E,
         i
       );
-      y(h);
+      I(h);
     }
     n(_);
   }, G = (a) => {
-    v.current && ze(a, z);
+    v.current && Ve(a, V);
   }, fe = () => {
     U(!0);
-  }, M = () => {
+  }, T = () => {
     U(!1);
   };
   A.useEffect(() => {
@@ -664,42 +670,42 @@ const ye = () => {
     };
   }, []);
   const J = t.length === 0 && p && !ae;
-  return /* @__PURE__ */ C.jsxs(C.Fragment, { children: [
-    /* @__PURE__ */ C.jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ C.jsx(
+  return /* @__PURE__ */ y.jsxs(y.Fragment, { children: [
+    /* @__PURE__ */ y.jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ y.jsx(
         "div",
         {
           id: "entity-editor",
           ref: v,
-          style: { ...I.style, position: "relative", zIndex: 2 },
-          className: I.className,
+          style: { ...j.style, position: "relative", zIndex: 2 },
+          className: j.className,
           contentEditable: !0,
           onKeyDown: G,
-          onInput: T,
+          onInput: M,
           onFocus: fe,
-          onBlur: M,
+          onBlur: T,
           role: "textbox",
           "aria-multiline": "true"
         }
       ),
-      J && /* @__PURE__ */ C.jsx(
+      J && /* @__PURE__ */ y.jsx(
         "div",
         {
           style: {
+            ...j.style,
             position: "absolute",
             top: 0,
             left: 0,
-            paddingTop: I.style?.paddingTop,
-            paddingLeft: I.style?.paddingLeft,
-            padding: I.style?.padding,
+            right: 0,
+            bottom: 0,
             color: "#9ca3af"
           },
           "aria-hidden": "true",
-          children: p
+          children: /* @__PURE__ */ y.jsx("p", { children: p })
         }
       )
     ] }),
-    P && /* @__PURE__ */ C.jsx("div", { style: {}, children: /* @__PURE__ */ C.jsx("pre", { children: JSON.stringify(S) }) })
+    C && /* @__PURE__ */ y.jsx("div", { style: {}, children: /* @__PURE__ */ y.jsx("pre", { children: JSON.stringify(S) }) })
   ] });
 };
 export {

package/dist/src/Editor.d.ts

@@ -3,6 +3,7 @@ import { Entity, EntityOptions, StyleOptions, EntityType, MarkState, MarkType, S
 export interface EditorRef {
     selectEntity: (entityType: EntityType, startIndex: number, endIndex: number, newText: string) => void;
     toggleMark: (markType: MarkType) => void;
+    clear: () => void;
 }
 export interface EditorProps {
     ref: React.RefObject<EditorRef | null>;

package/dist/src/helpers/entities/Link.d.ts

@@ -1,8 +1,8 @@
 import { SearchEntity } from '../../interfaces';
 export declare const LINK_MASK = 128;
-export declare const LINK_REGEX: RegExp;
 export declare const LINK_BOUNDARIES = "()[]{}";
 export declare const LINK_KEY = "";
+export declare const LINK_REGEX: RegExp;
 export declare const getLinkWord: (plainText: string, position: number) => SearchEntity | null;
 export declare const isLink: (value: number) => boolean;
 export declare const setLink: (value: number, link: boolean) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectedxm/entity-editor",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "type": "module",
   "main": "dist/index.umd.js",