@connectedxm/entity-editor 0.0.2 → 0.0.3

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import C, { useState as xe, useRef as he, useEffect as $e } from "react";
-var J = { exports: {} }, B = {};
+import A, { useState as $e, useRef as me, useEffect as Ye } from "react";
+var X = { exports: {} }, x = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var J = { exports: {} }, B = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ne;
-function Ye() {
-  if (Ne) return B;
-  Ne = 1;
+var Ae;
+function Fe() {
+  if (Ae) return x;
+  Ae = 1;
   var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function r(s, n, i) {
+  function n(s, o, i) {
     var c = null;
-    if (i !== void 0 && (c = "" + i), n.key !== void 0 && (c = "" + n.key), "key" in n) {
+    if (i !== void 0 && (c = "" + i), o.key !== void 0 && (c = "" + o.key), "key" in o) {
       i = {};
-      for (var l in n)
-        l !== "key" && (i[l] = n[l]);
-    } else i = n;
-    return n = i.ref, {
+      for (var u in o)
+        u !== "key" && (i[u] = o[u]);
+    } else i = o;
+    return o = i.ref, {
       $$typeof: e,
       type: s,
       key: c,
-      ref: n !== void 0 ? n : null,
+      ref: o !== void 0 ? o : null,
       props: i
     };
   }
-  return B.Fragment = t, B.jsx = r, B.jsxs = r, B;
+  return x.Fragment = t, x.jsx = n, x.jsxs = n, x;
 }
-var x = {};
+var L = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,377 +41,377 @@ var x = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Ae;
+var Oe;
 function We() {
-  return Ae || (Ae = 1, process.env.NODE_ENV !== "production" && (function() {
-    function e(o) {
-      if (o == null) return null;
-      if (typeof o == "function")
-        return o.$$typeof === u ? null : o.displayName || o.name || null;
-      if (typeof o == "string") return o;
-      switch (o) {
-        case L:
+  return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && (function() {
+    function e(r) {
+      if (r == null) return null;
+      if (typeof r == "function")
+        return r.$$typeof === z ? null : r.displayName || r.name || null;
+      if (typeof r == "string") return r;
+      switch (r) {
+        case O:
           return "Fragment";
         case F:
           return "Profiler";
-        case U:
+        case le:
           return "StrictMode";
-        case M:
+        case ae:
           return "Suspense";
-        case z:
+        case U:
           return "SuspenseList";
-        case ae:
+        case V:
           return "Activity";
       }
-      if (typeof o == "object")
-        switch (typeof o.tag == "number" && console.error(
+      if (typeof r == "object")
+        switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), o.$$typeof) {
-          case T:
+        ), r.$$typeof) {
+          case v:
             return "Portal";
+          case K:
+            return (r.displayName || "Context") + ".Provider";
+          case W:
+            return (r._context.displayName || "Context") + ".Consumer";
           case ue:
-            return (o.displayName || "Context") + ".Provider";
-          case V:
-            return (o._context.displayName || "Context") + ".Consumer";
-          case v:
-            var a = o.render;
-            return o = o.displayName, o || (o = a.displayName || a.name || "", o = o !== "" ? "ForwardRef(" + o + ")" : "ForwardRef"), o;
-          case G:
-            return a = o.displayName || null, a !== null ? a : e(o.type) || "Memo";
-          case X:
-            a = o._payload, o = o._init;
+            var l = r.render;
+            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:
+            l = r._payload, r = r._init;
             try {
-              return e(o(a));
+              return e(r(l));
             } catch {
             }
         }
       return null;
     }
-    function t(o) {
-      return "" + o;
+    function t(r) {
+      return "" + r;
     }
-    function r(o) {
+    function n(r) {
       try {
-        t(o);
-        var a = !1;
+        t(r);
+        var l = !1;
       } catch {
-        a = !0;
+        l = !0;
       }
-      if (a) {
-        a = console;
-        var m = a.error, k = typeof Symbol == "function" && Symbol.toStringTag && o[Symbol.toStringTag] || o.constructor.name || "Object";
-        return m.call(
-          a,
+      if (l) {
+        l = console;
+        var d = l.error, g = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return d.call(
+          l,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          k
-        ), t(o);
+          g
+        ), t(r);
       }
     }
-    function s(o) {
-      if (o === L) return "<>";
-      if (typeof o == "object" && o !== null && o.$$typeof === X)
+    function s(r) {
+      if (r === O) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === y)
         return "<...>";
       try {
-        var a = e(o);
-        return a ? "<" + a + ">" : "<...>";
+        var l = e(r);
+        return l ? "<" + l + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function n() {
-      var o = g.A;
-      return o === null ? null : o.getOwner();
+    function o() {
+      var r = T.A;
+      return r === null ? null : r.getOwner();
     }
     function i() {
       return Error("react-stack-top-frame");
     }
-    function c(o) {
-      if (d.call(o, "key")) {
-        var a = Object.getOwnPropertyDescriptor(o, "key").get;
-        if (a && a.isReactWarning) return !1;
+    function c(r) {
+      if (G.call(r, "key")) {
+        var l = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (l && l.isReactWarning) return !1;
       }
-      return o.key !== void 0;
+      return r.key !== void 0;
     }
-    function l(o, a) {
-      function m() {
-        A || (A = !0, console.error(
+    function u(r, l) {
+      function d() {
+        J || (J = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          a
+          l
         ));
       }
-      m.isReactWarning = !0, Object.defineProperty(o, "key", {
-        get: m,
+      d.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: d,
         configurable: !0
       });
     }
     function f() {
-      var o = e(this.type);
-      return O[o] || (O[o] = !0, console.error(
+      var r = e(this.type);
+      return a[r] || (a[r] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), o = this.props.ref, o !== void 0 ? o : null;
+      )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function h(o, a, m, k, P, I, fe, de) {
-      return m = I.ref, o = {
-        $$typeof: S,
-        type: o,
-        key: a,
-        props: I,
-        _owner: P
-      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(o, "ref", {
+    function m(r, l, d, g, R, w, de, Ee) {
+      return d = w.ref, r = {
+        $$typeof: I,
+        type: r,
+        key: l,
+        props: w,
+        _owner: R
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
         get: f
-      }) : Object.defineProperty(o, "ref", { enumerable: !1, value: null }), o._store = {}, Object.defineProperty(o._store, "validated", {
+      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(o, "_debugInfo", {
+      }), Object.defineProperty(r, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(o, "_debugStack", {
+      }), Object.defineProperty(r, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: fe
-      }), Object.defineProperty(o, "_debugTask", {
+        value: de
+      }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: de
-      }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
+        value: Ee
+      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function N(o, a, m, k, P, I, fe, de) {
-      var b = a.children;
-      if (b !== void 0)
-        if (k)
-          if (E(b)) {
-            for (k = 0; k < b.length; k++)
-              le(b[k]);
-            Object.freeze && Object.freeze(b);
+    function N(r, l, d, g, R, w, de, Ee) {
+      var k = l.children;
+      if (k !== void 0)
+        if (g)
+          if (fe(k)) {
+            for (g = 0; g < k.length; g++)
+              p(k[g]);
+            Object.freeze && Object.freeze(k);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else le(b);
-      if (d.call(a, "key")) {
-        b = e(o);
-        var D = Object.keys(a).filter(function(Be) {
+        else p(k);
+      if (G.call(l, "key")) {
+        k = e(r);
+        var j = Object.keys(l).filter(function(Be) {
           return Be !== "key";
         });
-        k = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", p[b + k] || (D = 0 < D.length ? "{" + D.join(": ..., ") + ": ...}" : "{}", console.error(
+        g = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", h[k + g] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
+          g,
           k,
-          b,
-          D,
-          b
-        ), p[b + k] = !0);
+          j,
+          k
+        ), h[k + g] = !0);
       }
-      if (b = null, m !== void 0 && (r(m), b = "" + m), c(a) && (r(a.key), b = "" + a.key), "key" in a) {
-        m = {};
-        for (var Ee in a)
-          Ee !== "key" && (m[Ee] = a[Ee]);
-      } else m = a;
-      return b && l(
-        m,
-        typeof o == "function" ? o.displayName || o.name || "Unknown" : o
-      ), h(
-        o,
-        b,
-        I,
-        P,
-        n(),
-        m,
-        fe,
-        de
+      if (k = null, d !== void 0 && (n(d), k = "" + d), c(l) && (n(l.key), k = "" + l.key), "key" in l) {
+        d = {};
+        for (var he in l)
+          he !== "key" && (d[he] = l[he]);
+      } else d = l;
+      return k && u(
+        d,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      ), m(
+        r,
+        k,
+        w,
+        R,
+        o(),
+        d,
+        de,
+        Ee
       );
     }
-    function le(o) {
-      typeof o == "object" && o !== null && o.$$typeof === S && o._store && (o._store.validated = 1);
+    function p(r) {
+      typeof r == "object" && r !== null && r.$$typeof === I && r._store && (r._store.validated = 1);
     }
-    var j = C, S = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), L = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), ue = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), z = Symbol.for("react.suspense_list"), G = Symbol.for("react.memo"), X = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), u = Symbol.for("react.client.reference"), g = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, d = Object.prototype.hasOwnProperty, E = Array.isArray, R = console.createTask ? console.createTask : function() {
+    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() {
       return null;
     };
-    j = {
-      react_stack_bottom_frame: function(o) {
-        return o();
+    P = {
+      react_stack_bottom_frame: function(r) {
+        return r();
       }
     };
-    var A, O = {}, y = j.react_stack_bottom_frame.bind(
-      j,
+    var J, a = {}, _ = P.react_stack_bottom_frame.bind(
+      P,
       i
-    )(), _ = R(s(i)), p = {};
-    x.Fragment = L, x.jsx = function(o, a, m, k, P) {
-      var I = 1e4 > g.recentlyCreatedOwnerStacks++;
+    )(), E = M(s(i)), h = {};
+    L.Fragment = O, L.jsx = function(r, l, d, g, R) {
+      var w = 1e4 > T.recentlyCreatedOwnerStacks++;
       return N(
-        o,
-        a,
-        m,
+        r,
+        l,
+        d,
         !1,
-        k,
-        P,
-        I ? Error("react-stack-top-frame") : y,
-        I ? R(s(o)) : _
+        g,
+        R,
+        w ? Error("react-stack-top-frame") : _,
+        w ? M(s(r)) : E
       );
-    }, x.jsxs = function(o, a, m, k, P) {
-      var I = 1e4 > g.recentlyCreatedOwnerStacks++;
+    }, L.jsxs = function(r, l, d, g, R) {
+      var w = 1e4 > T.recentlyCreatedOwnerStacks++;
       return N(
-        o,
-        a,
-        m,
+        r,
+        l,
+        d,
         !0,
-        k,
-        P,
-        I ? Error("react-stack-top-frame") : y,
-        I ? R(s(o)) : _
+        g,
+        R,
+        w ? Error("react-stack-top-frame") : _,
+        w ? M(s(r)) : E
       );
     };
-  })()), x;
+  })()), L;
 }
-var Oe;
+var Ie;
 function Ke() {
-  return Oe || (Oe = 1, process.env.NODE_ENV === "production" ? J.exports = Ye() : J.exports = We()), J.exports;
+  return Ie || (Ie = 1, process.env.NODE_ENV === "production" ? X.exports = Fe() : X.exports = We()), X.exports;
 }
-var Ue = Ke();
-const Ie = () => {
+var C = Ke();
+const ye = () => {
   const e = window.getSelection(), t = document.getElementById("entity-editor");
   if (!e || !t) return { start: 0, end: 0 };
   if (e.anchorNode && t.contains(e.anchorNode)) {
-    const r = e.getRangeAt(0), s = r.cloneRange();
-    s.selectNodeContents(t), s.setEnd(r.startContainer, r.startOffset);
-    const n = s.toString().length, i = r.cloneRange();
-    i.selectNodeContents(t), i.setEnd(r.endContainer, r.endOffset);
+    const n = e.getRangeAt(0), s = n.cloneRange();
+    s.selectNodeContents(t), s.setEnd(n.startContainer, n.startOffset);
+    const o = s.toString().length, i = n.cloneRange();
+    i.selectNodeContents(t), i.setEnd(n.endContainer, n.endOffset);
     const c = i.toString().length;
-    return { start: n, end: c };
+    return { start: o, end: c };
   } else
     return null;
-}, Fe = (e, t) => {
-  const r = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
-  let s = 0, n = r.nextNode(), i = null, c = null, l = 0, f = 0;
-  for (; n; ) {
-    const h = s + (n.textContent?.length || 0);
-    if (!i && h >= t.start && (i = n, l = t.start - s), !c && h >= t.end) {
-      c = n, f = t.end - s;
+}, Ue = (e, t) => {
+  const n = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
+  let s = 0, o = n.nextNode(), i = null, c = null, u = 0, f = 0;
+  for (; o; ) {
+    const m = s + (o.textContent?.length || 0);
+    if (!i && m >= t.start && (i = o, u = t.start - s), !c && m >= t.end) {
+      c = o, f = t.end - s;
       break;
     }
-    s = h, n = r.nextNode();
+    s = m, o = n.nextNode();
   }
   if (i && c) {
-    const h = document.createRange();
-    h.setStart(
+    const m = document.createRange();
+    m.setStart(
       i,
-      Math.min(l, i.textContent?.length || 0)
-    ), h.setEnd(
+      Math.min(u, i.textContent?.length || 0)
+    ), m.setEnd(
       c,
       Math.min(f, c.textContent?.length || 0)
     );
     const N = window.getSelection();
-    N?.removeAllRanges(), N?.addRange(h);
+    N?.removeAllRanges(), N?.addRange(m);
   }
-}, Ve = (e, t, r) => {
-  let s = "", n = "", i = "", c = "";
-  t.includes("bold") && (n = "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" && r.mentionColor ? s = r.mentionColor : e === "interest" && r.interestColor ? s = r.interestColor : e === "link" && r.linkColor && (s = r.linkColor));
-  let l = "";
-  return s && (l += `color: ${s}; `), n && (l += `font-weight: ${n}; `), i && (l += `font-style: ${i}; `), c && (l += `text-decoration: ${c}; `), l;
-}, Ce = (e, t, r) => {
+}, Ve = (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 = "";
+  return s && (u += `color: ${s}; `), o && (u += `font-weight: ${o}; `), i && (u += `font-style: ${i}; `), c && (u += `text-decoration: ${c}; `), u;
+}, Ce = (e, t, n) => {
   if (t.length === 0)
     return e;
-  let s = "", n = 0;
+  let s = "", o = 0;
   return t.forEach((i) => {
-    n < i.startIndex && (s += e.slice(n, i.startIndex));
-    const c = e.slice(i.startIndex, i.endIndex), l = Ve(i.type, i.marks, r);
-    s += `<span style="${l}">${c}</span>`, n = i.endIndex;
-  }), s += e.slice(n), s;
+    o < i.startIndex && (s += e.slice(o, i.startIndex));
+    const c = e.slice(i.startIndex, i.endIndex), u = Ve(i.type, i.marks, n);
+    s += `<span style="${u}">${c}</span>`, o = i.endIndex;
+  }), s += e.slice(o), s;
 }, ze = (e, t) => {
-  let r = !1;
-  e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), document.execCommand("insertLineBreak"), r = !0) : (e.metaKey || e.ctrlKey) && (e.key === "b" ? (t("bold"), r = !0) : e.key === "i" ? (t("italic"), r = !0) : e.key === "u" ? (t("underline"), r = !0) : e.key === "s" && (t("strike"), r = !0)), r && e.preventDefault();
-}, ee = 128, Ge = /^(?<protocol>[a-z\-]+)?:?(?<host>\/\/.*\.[^\/]+)$/, Xe = "()[]{}", pe = "", Me = (e, t) => {
-  const r = Se(
+  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) => {
+  const n = ve(
     e,
     t,
-    Xe,
-    pe
+    Je,
+    Me
   );
-  return r?.search.match(Ge) ? {
+  return n?.search.match(Ge) ? {
     type: "link",
-    ...r
+    ...n
   } : null;
-}, te = (e) => (e & ee) !== 0, ge = (e, t) => t ? e | ee : e & ~ee, re = 32, Je = /^@[a-zA-Z0-9_'-]+$/, qe = `.,!?;()[]{}"'<>#`, ne = "@", De = (e, t) => {
-  const r = Se(
+}, 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) => {
+  const n = ve(
     e,
     t,
     qe,
     ne
   );
-  return r?.search.match(Je) ? {
+  return n?.search.match(Xe) ? {
     type: "mention",
-    ...r
+    ...n
   } : null;
-}, oe = (e) => (e & re) !== 0, Re = (e, t) => t ? e | re : e & ~re, $ = 2, q = (e) => (e & $) !== 0, _e = (e, t) => t ? e | $ : e & ~$, Y = 4, H = (e) => (e & Y) !== 0, ke = (e, t) => t ? e | Y : e & ~Y, W = 16, Z = (e) => (e & W) !== 0, be = (e, t) => t ? e | W : e & ~W, K = 8, Q = (e) => (e & K) !== 0, we = (e, t) => t ? e | K : e & ~K, ye = (e, t) => {
+}, 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) => {
   if (e === t) return null;
-  let r = 0;
-  for (; r < e.length && r < t.length && e[r] === t[r]; )
-    r++;
-  let s = e.length, n = t.length;
-  for (; s > r && n > r && e[s - 1] === t[n - 1]; )
-    s--, n--;
+  let n = 0;
+  for (; n < e.length && n < t.length && e[n] === t[n]; )
+    n++;
+  let s = e.length, o = t.length;
+  for (; s > n && o > n && e[s - 1] === t[o - 1]; )
+    s--, o--;
   return {
-    position: r,
-    deletedLength: s - r,
-    insertedText: t.slice(r, n)
+    position: n,
+    deletedLength: s - n,
+    insertedText: t.slice(n, o)
   };
-}, me = (e, t, r, s) => {
-  let n = t;
-  for (; n < e.length; ) {
-    const c = w(e, n);
-    if (r(c))
-      e[n] = s(c, !1);
+}, ge = (e, t, n, s) => {
+  let o = t;
+  for (; o < e.length; ) {
+    const c = b(e, o);
+    if (n(c))
+      e[o] = s(c, !1);
     else
       break;
-    n++;
+    o++;
   }
   let i = t - 1;
   for (; i >= 0; ) {
-    const c = w(e, i);
-    if (r(c))
+    const c = b(e, i);
+    if (n(c))
       e[i] = s(c, !1);
     else
       break;
     i--;
   }
   return e;
-}, Pe = (e, t, r) => {
+}, je = (e, t, n) => {
   if (!t) return e;
-  const { position: s, deletedLength: n, insertedText: i } = t, c = i.length;
-  let l = [...e];
-  const f = w(l, s);
-  if (oe(f) ? l = me(l, s, oe, Re) : ce(f) ? l = me(l, s, ce, ve) : te(f) && (l = me(l, s, te, ge)), n > 0 && l.splice(s, n), c > 0) {
-    let h = 0;
-    r.bold && (h = _e(h, !0)), r.italic && (h = ke(h, !0)), r.underline && (h = we(h, !0)), r.strike && (h = be(h, !0));
-    const N = new Array(c).fill(h);
-    l.splice(s, 0, ...N);
+  const { position: s, deletedLength: o, insertedText: i } = t, c = i.length;
+  let u = [...e];
+  const f = b(u, s);
+  if (oe(f) ? u = ge(u, s, oe, _e) : ce(f) ? u = ge(u, s, ce, Ne) : te(f) && (u = ge(u, s, te, Re)), o > 0 && u.splice(s, o), c > 0) {
+    let m = 0;
+    n.bold && (m = ke(m, !0)), n.italic && (m = be(m, !0)), n.underline && (m = we(m, !0)), n.strike && (m = Se(m, !0));
+    const N = new Array(c).fill(m);
+    u.splice(s, 0, ...N);
   }
-  return l;
-}, He = (e) => /\s/.test(e) || /[\u2000-\u200B\u2028\u2029\u3000]/.test(e), Se = (e, t, r, s) => {
+  return u;
+}, He = (e) => /\s/.test(e) || /[\u2000-\u200B\u2028\u2029\u3000]/.test(e), ve = (e, t, n, s) => {
   if (t <= 0 || t > e.length)
     return null;
-  let n = "", i = t - 1, c = t;
-  const l = (f) => He(f) || r.includes(f);
+  let o = "", i = t - 1, c = t;
+  const u = (f) => He(f) || n.includes(f);
   for (let f = i; f >= 0; f--) {
-    if (l(e[f])) {
+    if (u(e[f])) {
       i = f + 1;
       break;
     }
-    f === 0 && (i = 0), n = e[f] + n;
+    f === 0 && (i = 0), o = e[f] + o;
   }
   for (let f = c; f < e.length; f++) {
-    if (l(e[f])) {
+    if (u(e[f])) {
       c = f;
       break;
     }
@@ -419,93 +419,93 @@ const Ie = () => {
       c = f;
       break;
     }
-    f === e.length - 1 && (c = e.length), n = n + e[f];
+    f === e.length - 1 && (c = e.length), o = o + e[f];
   }
   return {
     search: e.slice(i, c),
     startIndex: i,
     endIndex: c
   };
-}, se = 64, Ze = `.,!?;()[]{}"'<>@`, Qe = /^#[\w-]+$/, ie = "#", Le = (e, t) => {
-  const r = Se(
+}, se = 64, Ze = `.,!?;()[]{}"'<>@`, Qe = /^#[\w-]+$/, ie = "#", De = (e, t) => {
+  const n = ve(
     e,
     t,
     Ze,
     ie
   );
-  return r?.search.match(Qe) ? {
+  return n?.search.match(Qe) ? {
     type: "interest",
-    ...r
+    ...n
   } : null;
-}, ce = (e) => (e & se) !== 0, ve = (e, t) => t ? e | se : e & ~se, et = (e, t) => e.find(
-  (r) => r.startIndex <= t && r.endIndex > t
-), tt = (e, t, r) => {
+}, ce = (e) => (e & se) !== 0, Ne = (e, t) => t ? e | se : e & ~se, et = (e, t) => e.find(
+  (n) => n.startIndex <= t && n.endIndex > t
+), tt = (e, t, n) => {
   const s = [];
-  let n = 0;
-  for (; n < t.length; ) {
-    const i = w(t, n);
+  let o = 0;
+  for (; o < t.length; ) {
+    const i = b(t, o);
     if (i === 0 || i === 1) {
-      n++;
+      o++;
       continue;
     }
-    const c = n;
-    let l = n;
-    for (; l + 1 < t.length && w(t, l + 1) === i; )
-      l++;
-    const f = rt(i, r), h = nt(i), N = {
+    const c = o;
+    let u = o;
+    for (; u + 1 < t.length && b(t, u + 1) === i; )
+      u++;
+    const f = rt(i, n), m = nt(i), N = {
       type: f,
       startIndex: c,
-      endIndex: l + 1,
-      marks: h,
-      username: f === "mention" ? De(e, l)?.search.replace(ne, "") : void 0,
-      interest: f === "interest" ? Le(e, l)?.search.replace(
+      endIndex: u + 1,
+      marks: m,
+      username: f === "mention" ? Le(e, u)?.search.replace(ne, "") : void 0,
+      interest: f === "interest" ? De(e, u)?.search.replace(
         ie,
         ""
       ) : void 0,
-      href: f === "link" ? Me(e, c)?.search : void 0
+      href: f === "link" ? xe(e, u)?.search : void 0
     };
-    s.push(N), n = l + 1;
+    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 & ($ | Y | K | W), "segment"), nt = (e) => {
+}, 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) => {
   const t = [];
-  return e & $ && t.push("bold"), e & Y && t.push("italic"), e & K && t.push("underline"), e & W && t.push("strike"), t;
-}, w = (e, t) => {
-  const r = e[t];
-  return typeof r != "number" ? 0 : r;
-}, ot = (e, t, r) => {
-  const s = w(e, t);
-  switch (r) {
+  return e & D && t.push("bold"), e & B && 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;
+}, ot = (e, t, n) => {
+  const s = b(e, t);
+  switch (n) {
     case "mention":
-      return Re(s, !0);
+      return _e(s, !0);
     case "interest":
-      return ve(s, !0);
+      return Ne(s, !0);
     case "link":
-      return ge(s, !0);
+      return Re(s, !0);
   }
   return s;
-}, st = (e, t, r, s) => {
-  let n = w(e, t);
-  switch (r) {
+}, st = (e, t, n, s) => {
+  let o = b(e, t);
+  switch (n) {
     case "bold":
-      n = _e(n, s);
+      o = ke(o, s);
       break;
     case "italic":
-      n = ke(n, s);
+      o = be(o, s);
       break;
     case "underline":
-      n = we(n, s);
+      o = we(o, s);
       break;
     case "strike":
-      n = be(n, s);
+      o = Se(o, s);
       break;
     default:
       return e;
   }
-  return e[t] = n, e;
-}, it = (e, t, r) => {
-  const s = w(e, t);
-  switch (r) {
+  return e[t] = o, e;
+}, it = (e, t, n) => {
+  const s = b(e, t);
+  switch (n) {
     case "bold":
       return q(s);
     case "italic":
@@ -515,160 +515,192 @@ const Ie = () => {
     case "strike":
       return Z(s);
     default:
-      throw Error(`Invalid mark type: ${r}`);
+      throw Error(`Invalid mark type: ${n}`);
   }
-}, ct = (e, t, r, s) => {
-  for (let n = e; n < t; n++)
-    if (!it(s, n, r)) return !1;
+}, ct = (e, t, n, s) => {
+  for (let o = e; o < t; o++)
+    if (!it(s, o, n)) return !1;
   return !0;
-}, je = (e) => oe(e) || ce(e) || te(e), lt = (e, t, r, s) => {
-  let n = [...e];
-  for (; je(w(e, t - 1)) && t > 0; )
+}, pe = (e) => oe(e) || ce(e) || te(e), lt = (e, t, n, s) => {
+  let o = [...e];
+  for (; pe(b(e, t - 1)) && t > 0; )
     t--;
-  for (; je(w(e, r)) && r < e.length; )
-    r++;
+  for (; pe(b(e, n)) && n < e.length; )
+    n++;
   let i = !0;
-  ct(t, r, s, n) && (i = !1);
-  for (let c = t; c < r; c++)
-    n = st(n, c, s, i);
-  return n;
+  ct(t, n, s, o) && (i = !1);
+  for (let c = t; c < n; c++)
+    o = st(o, c, s, i);
+  return o;
 }, Te = (e, t) => {
-  const r = new Array(e.length).fill(0);
+  const n = new Array(e.length).fill(0);
   for (let s = 0; s < e.length; s++) {
-    let n = 0;
+    let o = 0;
     const i = et(t, s);
     if (i) {
-      i.type === "mention" ? n = Re(n, !0) : i.type === "interest" ? n = ve(n, !0) : i.type === "link" && (n = ge(n, !0));
+      i.type === "mention" ? o = _e(o, !0) : i.type === "interest" ? o = Ne(o, !0) : i.type === "link" && (o = Re(o, !0));
       for (const c of i.marks)
-        c === "bold" ? n = _e(n, !0) : c === "italic" ? n = ke(n, !0) : c === "underline" ? n = we(n, !0) : c === "strike" && (n = be(n, !0));
+        c === "bold" ? o = ke(o, !0) : c === "italic" ? o = be(o, !0) : c === "underline" ? o = we(o, !0) : c === "strike" && (o = Se(o, !0));
     }
-    r[s] = n;
+    n[s] = o;
   }
-  return r;
-}, ut = (e, t, r) => {
-  const [s, n] = xe(e), i = he(Date.now()), c = he(null), l = he(null);
-  return $e(() => (c.current && clearTimeout(c.current), l.current && clearTimeout(l.current), Date.now() - i.current, c.current = setTimeout(() => {
-    n(e), i.current = Date.now();
+  return n;
+}, ut = (e, t, n) => {
+  const [s, o] = $e(e), i = me(Date.now()), c = me(null), u = me(null);
+  return Ye(() => (c.current && clearTimeout(c.current), u.current && clearTimeout(u.current), Date.now() - i.current, c.current = setTimeout(() => {
+    o(e), i.current = Date.now();
   }, t), () => {
-    c.current && clearTimeout(c.current), l.current && clearTimeout(l.current);
-  }), [e, t, r]), s;
+    c.current && clearTimeout(c.current), u.current && clearTimeout(u.current);
+  }), [e, t, n]), s;
 }, ft = ({
   ref: e,
   plainText: t = "",
-  setPlainText: r,
+  setPlainText: n,
   entities: s = [],
-  setEntities: n,
+  setEntities: o,
   markState: i,
   setMarkState: c,
-  search: l,
+  search: u,
   setSearch: f,
-  options: h = {},
+  options: m = {},
   entityStyles: N = {},
-  debug: le = !1,
-  ...j
+  placeholder: p = "",
+  debug: P = !1,
+  ...I
 }) => {
-  const S = C.useRef(null), [T, L] = C.useState({ start: 0, end: 0 }), [U, F] = C.useState(!1), [V, ue] = C.useState(!1), [v, M] = C.useState(
+  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)
   );
   e.current = {
-    selectEntity: (u, g, d, E) => {
-      if (!S.current) return;
-      let R = [...v];
-      u === "mention" ? E = ne + E : u === "interest" ? E = ie + E : u === "link" && (E = pe + E);
-      const A = t.slice(0, g) + E + t.slice(d), O = ye(t, A);
-      O ? R = Pe(v, O, i) : R = Te(A, s);
-      for (let y = g; y < g + E.length; y++)
-        R[y] = ot(R, y, u);
-      r(A), M(R), f(null);
+    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);
+      for (let g = _; g < _ + h.length; g++)
+        r[g] = ot(r, g, a);
+      n(l), y(r), f(null);
     },
-    toggleMark: (u) => {
-      G(u);
+    toggleMark: (a) => {
+      z(a);
     }
-  }, C.useEffect(() => {
-    if (S.current) {
-      S.current.textContent = t;
-      const u = Ce(t, s, N);
-      S.current.innerHTML = u, V || ue(!0);
+  }, A.useEffect(() => {
+    if (v.current) {
+      v.current.textContent = t;
+      const a = Ce(t, s, N);
+      v.current.innerHTML = a, K || ue(!0);
     }
-  }, []), C.useEffect(() => {
-    if (!S.current) return;
-    const u = tt(t, v, h), g = Ie() ?? T, d = Ce(t, u, N);
-    S.current.innerHTML = d, n(u), V && Fe(S.current, g);
-  }, [v]);
-  const z = ut(T, 500);
-  C.useEffect(() => {
-    let { start: u, end: g } = z, d = null;
-    if (!d && !oe(w(v, u - 1)) && (d = De(t, u), d && (d.search = d.search.replace(ne, ""))), !d && !ce(w(v, u - 1)) && (d = Le(t, u), d && (d.search = d.search.replace(ie, ""))), !d && !te(w(v, u - 1)) && (d = Me(t, u)), d ? f(d) : l && f(null), U) return;
-    let E = !0, R = !0, A = !0, O = !0;
-    if (u === g)
-      if (u > 0) {
-        const _ = w(v, u - 1);
-        E = q(_), R = H(_), A = Q(_), O = Z(_);
+  }, []), A.useEffect(() => {
+    if (!v.current) return;
+    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);
+  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 h = !0, r = !0, l = !0, d = !0;
+    if (a === _)
+      if (a > 0) {
+        const R = b(S, a - 1);
+        h = q(R), r = H(R), l = Q(R), d = Z(R);
       } else {
-        const _ = w(v, u);
-        E = q(_), R = H(_), A = Q(_), O = Z(_);
+        const R = b(S, a);
+        h = q(R), r = H(R), l = Q(R), d = Z(R);
       }
     else
-      for (let _ = u; _ < g; _++) {
-        const p = w(v, _);
-        E = q(p) ? E : !1, R = H(p) ? R : !1, A = Q(p) ? A : !1, O = Z(p) ? O : !1;
+      for (let R = a; R < _; R++) {
+        const w = b(S, R);
+        h = q(w) ? h : !1, r = H(w) ? r : !1, l = Q(w) ? l : !1, d = Z(w) ? d : !1;
       }
     c({
-      bold: E,
-      italic: R,
-      underline: A,
-      strike: O
+      bold: h,
+      italic: r,
+      underline: l,
+      strike: d
     });
-  }, [z]);
-  const G = (u) => {
-    if (F(!0), !S.current)
+  }, [V]);
+  const z = (a) => {
+    if (W(!0), !v.current)
       return;
-    const { start: g, end: d } = T;
-    if (g !== d) {
-      const R = lt(v, g, d, u);
-      M(R);
+    const { start: _, end: E } = O;
+    if (_ !== E) {
+      const r = lt(S, _, E, a);
+      y(r);
     }
-    const E = { ...i };
-    u === "bold" ? E.bold = !i.bold : u === "italic" ? E.italic = !i.italic : u === "underline" ? E.underline = !i.underline : u === "strike" && (E.strike = !i.strike), c(E);
-  }, X = (u) => {
-    if (!S.current) return;
-    if (U && F(!1), u.target.textContent.length === 0) {
-      r(""), M([]), n([]);
+    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) => {
+    if (!v.current) return;
+    if (F && W(!1), a.target.textContent.length === 0) {
+      n(""), y([]), o([]);
       return;
     }
-    const g = u.target.innerText || "", d = ye(t, g);
-    if (d) {
-      const E = Pe(
-        v,
-        d,
+    const _ = a.target.innerText || "", E = Pe(t, _);
+    if (E) {
+      const h = je(
+        S,
+        E,
         i
       );
-      M(E);
+      y(h);
     }
-    r(g);
-  }, ae = (u) => {
-    S.current && ze(u, G);
+    n(_);
+  }, G = (a) => {
+    v.current && ze(a, z);
+  }, fe = () => {
+    U(!0);
+  }, M = () => {
+    U(!1);
   };
-  return C.useEffect(() => {
-    const u = () => {
-      const g = Ie() ?? { start: 0, end: 0 };
-      (g.start !== T.start || g.end !== T.end) && L(g);
+  A.useEffect(() => {
+    const a = () => {
+      const _ = ye() ?? { start: 0, end: 0 };
+      (_.start !== O.start || _.end !== O.end) && le(_);
     };
-    return document.addEventListener("selectionchange", u), () => {
-      document.removeEventListener("selectionchange", u);
+    return document.addEventListener("selectionchange", a), () => {
+      document.removeEventListener("selectionchange", a);
     };
-  }, []), /* @__PURE__ */ Ue.jsx(
-    "div",
-    {
-      id: "entity-editor",
-      ref: S,
-      style: j.style,
-      className: j.className,
-      contentEditable: !0,
-      onKeyDown: ae,
-      onInput: X
-    }
-  );
+  }, []);
+  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(
+        "div",
+        {
+          id: "entity-editor",
+          ref: v,
+          style: { ...I.style, position: "relative", zIndex: 2 },
+          className: I.className,
+          contentEditable: !0,
+          onKeyDown: G,
+          onInput: T,
+          onFocus: fe,
+          onBlur: M,
+          role: "textbox",
+          "aria-multiline": "true"
+        }
+      ),
+      J && /* @__PURE__ */ C.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            paddingTop: I.style?.paddingTop,
+            paddingLeft: I.style?.paddingLeft,
+            padding: I.style?.padding,
+            color: "#9ca3af"
+          },
+          "aria-hidden": "true",
+          children: p
+        }
+      )
+    ] }),
+    P && /* @__PURE__ */ C.jsx("div", { style: {}, children: /* @__PURE__ */ C.jsx("pre", { children: JSON.stringify(S) }) })
+  ] });
 };
 export {
   ft as Editor

package/dist/src/Editor.d.ts

@@ -4,7 +4,7 @@ export interface EditorRef {
     selectEntity: (entityType: EntityType, startIndex: number, endIndex: number, newText: string) => void;
     toggleMark: (markType: MarkType) => void;
 }
-interface EditorProps {
+export interface EditorProps {
     ref: React.RefObject<EditorRef | null>;
     plainText: string;
     setPlainText: (plainText: string) => void;
@@ -18,7 +18,7 @@ interface EditorProps {
     className?: string;
     options?: EntityOptions;
     entityStyles?: StyleOptions;
+    placeholder?: string;
     debug?: boolean;
 }
-export declare const Editor: ({ ref, plainText, setPlainText, entities, setEntities, markState, setMarkState, search, setSearch, options, entityStyles, debug, ...props }: EditorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Editor: ({ ref, plainText, setPlainText, entities, setEntities, markState, setMarkState, search, setSearch, options, entityStyles, placeholder, debug, ...props }: EditorProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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