@logora/debate 0.4.25 → 0.4.27

package/dist/components/input/text_editor/plugins/ToolbarPlugin.js

@@ -1,135 +1,146 @@
-import { jsxs as w, jsx as i } from "react/jsx-runtime";
-import { $isListNode as A, ListNode as z, INSERT_ORDERED_LIST_COMMAND as G, $isListItemNode as E, $createListNode as X } from "@lexical/list";
-import { useLexicalComposerContext as J } from "@lexical/react/LexicalComposerContext";
-import { $isHeadingNode as W, $createQuoteNode as D } from "@lexical/rich-text";
-import { $setBlocksType as O } from "@lexical/selection";
-import { $getNearestNodeOfType as Y, mergeRegister as Z } from "@lexical/utils";
-import a from "classnames";
-import { $getSelection as N, $isRangeSelection as T, SELECTION_CHANGE_COMMAND as ee, FORMAT_TEXT_COMMAND as te, $createParagraphNode as B } from "lexical";
-import { useRef as oe, useState as g, useCallback as ie, useEffect as ae } from "react";
-import { useIntl as ne } from "react-intl";
-import e from "./ToolbarPlugin.module.scss.js";
-import { Icon as b } from "../../../icons/icon/Icon.js";
-import { Button as le } from "../../../action/button/Button.js";
-const _e = (s) => {
-  const d = ne(), R = 1, [r] = J(), $ = oe(null), [h, I] = g("paragraph"), [se, q] = g(null), [K, x] = g(!1), [P, C] = g(!1), [F, L] = g(!1), k = s.hideSubmit && s.hideSourceAction && s.disableRichText, p = ie(() => {
-    const t = N();
-    if (T(t)) {
-      const n = t.anchor.getNode(), c = n.getKey() === "root" ? n : n.getTopLevelElementOrThrow(), u = c.getKey();
-      if (r.getElementByKey(u) !== null)
-        if (q(u), A(c)) {
-          const o = Y(n, z), f = o ? o.getTag() : c.getTag();
-          I(f);
+import { jsxs as B, jsx as i } from "react/jsx-runtime";
+import { $isListNode as R, ListNode as W, INSERT_ORDERED_LIST_COMMAND as Y, $isListItemNode as _, $createListNode as Z } from "@lexical/list";
+import { useLexicalComposerContext as ee } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode as te, $createQuoteNode as $ } from "@lexical/rich-text";
+import { $setBlocksType as K } from "@lexical/selection";
+import { $getNearestNodeOfType as oe, mergeRegister as ie } from "@lexical/utils";
+import n from "classnames";
+import { $getSelection as T, $isRangeSelection as y, SELECTION_CHANGE_COMMAND as ae, FORMAT_TEXT_COMMAND as ne, $createParagraphNode as q } from "lexical";
+import { useRef as le, useState as h, useCallback as se, useEffect as P } from "react";
+import { useIntl as re } from "react-intl";
+import t from "./ToolbarPlugin.module.scss.js";
+import { Icon as m } from "../../../icons/icon/Icon.js";
+import { Button as ce } from "../../../action/button/Button.js";
+const Le = (s) => {
+  const c = re(), U = 1, [r] = ee(), x = le(null), [p, C] = h("paragraph"), [de, F] = h(null), [j, k] = h(!1), [H, w] = h(!1), [Q, A] = h(!1), E = s.hideSubmit && s.hideSourceAction && s.disableRichText, N = se(() => {
+    const e = T();
+    if (y(e)) {
+      const o = e.anchor.getNode(), a = o.getKey() === "root" ? o : o.getTopLevelElementOrThrow(), d = a.getKey();
+      if (r.getElementByKey(d) !== null)
+        if (F(d), R(a)) {
+          const b = oe(o, W), f = b ? b.getTag() : a.getTag();
+          C(f);
         } else {
-          const o = W(c) ? c.getTag() : c.getType();
-          I(o);
+          const b = te(a) ? a.getTag() : a.getType();
+          C(b);
         }
-      x(t.hasFormat("bold")), C(t.hasFormat("italic")), L(t.hasFormat("underline"));
+      k(e.hasFormat("bold")), w(e.hasFormat("italic")), A(e.hasFormat("underline"));
     }
   }, [r]);
-  ae(() => Z(
-    r.registerUpdateListener(({ editorState: t }) => {
-      t.read(() => {
-        p();
+  P(() => ie(
+    r.registerUpdateListener(({ editorState: e }) => {
+      e.read(() => {
+        N();
       });
     }),
     r.registerCommand(
-      ee,
-      () => (p(), !1),
-      R
+      ae,
+      () => (N(), !1),
+      U
     )
-  ), [r, p]);
-  const l = (t) => {
-    t.preventDefault();
-  }, M = () => {
+  ), [r, N]), P(() => {
+    const e = x.current;
+    if (!e) return;
+    const o = (a) => {
+      (a.target.tagName === "BUTTON" || a.target.closest("button")) && a.preventDefault();
+    };
+    return e.addEventListener("touchstart", o, { passive: !1 }), () => e.removeEventListener("touchstart", o);
+  }, []);
+  const g = (e) => {
+    e.preventDefault();
+  }, D = () => {
     setTimeout(() => {
       r.getEditorState().read(() => {
-        p();
+        N();
       });
     }, 0);
-  }, _ = (t) => {
-    r.dispatchCommand(te, t), t === "bold" && x((n) => !n), t === "italic" && C((n) => !n), t === "underline" && L((n) => !n), M();
-  }, U = () => {
+  }, I = (e) => {
+    r.dispatchCommand(ne, e), e === "bold" && k((o) => !o), e === "italic" && w((o) => !o), e === "underline" && A((o) => !o);
+  }, V = () => {
     r.update(() => {
-      const t = N();
-      if (!T(t))
+      const e = T();
+      if (!y(e))
         return;
-      const n = t.getNodes(), c = /* @__PURE__ */ new Set();
-      for (const m of n) {
-        let o = m;
-        for (; o !== null && !E(o); )
-          o = o.getParent();
-        E(o) && c.add(o);
+      let o = e.anchor.getNode();
+      for (; o !== null && !_(o); )
+        o = o.getParent();
+      const a = _(o) ? o.getKey() : null, d = e.getNodes(), L = /* @__PURE__ */ new Set();
+      for (const u of d) {
+        let l = u;
+        for (; l !== null && !_(l); )
+          l = l.getParent();
+        _(l) && L.add(l);
       }
-      const u = Array.from(c).reverse();
-      for (const m of u) {
-        const o = m.getParent();
-        if (!A(o))
+      const b = Array.from(L).reverse();
+      let f = null;
+      for (const u of b) {
+        const l = u.getParent();
+        if (!R(l))
           continue;
-        const f = B(), Q = m.getChildren();
-        for (const y of Q)
-          f.append(y);
-        const S = m.getNextSiblings();
-        if (o.insertAfter(f), S.length > 0) {
-          const y = S[0].getValue(), v = X(o.getListType(), y);
-          for (const V of S)
-            v.append(V);
-          f.insertAfter(v);
+        const M = q(), X = u.getChildren();
+        for (const S of X)
+          M.append(S);
+        const v = u.getNextSiblings();
+        if (l.insertAfter(M), v.length > 0) {
+          const S = v[0].getValue(), O = Z(l.getListType(), S);
+          for (const J of v)
+            O.append(J);
+          M.insertAfter(O);
         }
-        m.remove(), o.getChildrenSize() === 0 && o.remove();
+        u.getKey() === a && (f = M), u.remove(), l.getChildrenSize() === 0 && l.remove();
       }
+      f !== null && f.selectEnd();
     });
-  }, j = () => {
-    h !== "ol" ? r.dispatchCommand(G) : U(), M();
-  }, H = () => {
-    h !== "quote" ? r.update(() => {
-      const t = N();
-      if (T(t))
-        if (t.isCollapsed()) {
-          const c = t.anchor.getNode().getTopLevelElementOrThrow(), u = D();
-          c.insertAfter(u), u.selectEnd();
+  }, z = () => {
+    p !== "ol" ? r.dispatchCommand(Y) : V(), D();
+  }, G = () => {
+    p !== "quote" ? r.update(() => {
+      const e = T();
+      if (y(e))
+        if (e.isCollapsed()) {
+          const a = e.anchor.getNode().getTopLevelElementOrThrow(), d = $();
+          a.insertAfter(d), d.selectEnd();
         } else
-          O(t, () => D());
+          K(e, () => $());
     }) : r.update(() => {
-      const t = N();
-      T(t) && O(t, () => B());
-    }), M();
+      const e = T();
+      y(e) && K(e, () => q());
+    }), D();
   };
-  return k ? null : /* @__PURE__ */ w(
+  return E ? null : /* @__PURE__ */ B(
     "div",
     {
-      className: a(e.toolbar, {
-        [e.toolbarIsActive]: k ? !1 : s.isActive
+      className: n(t.toolbar, {
+        [t.toolbarIsActive]: E ? !1 : s.isActive
       }),
-      ref: $,
+      ref: x,
       children: [
-        s.isActive ? !s.disableRichText && /* @__PURE__ */ w(
+        s.isActive ? !s.disableRichText && /* @__PURE__ */ B(
           "div",
           {
-            className: a(e.iconToolbar, {
-              [e.shortBar]: s.shortBar
+            className: n(t.iconToolbar, {
+              [t.shortBar]: s.shortBar
             }),
             children: [
               /* @__PURE__ */ i(
                 "button",
                 {
-                  onTouchStart: l,
-                  onMouseDown: l,
-                  onClick: () => _("bold"),
+                  onMouseDown: g,
+                  onClick: () => I("bold"),
                   type: "button",
-                  className: a(e.toolbarItem, { [e.active]: K }),
+                  className: n(t.toolbarItem, { [t.active]: j }),
                   "data-testid": "format-bold",
-                  "aria-label": d.formatMessage({
+                  "aria-label": c.formatMessage({
                     id: "input.text_editor.plugins.toolbar_plugin.bold.aria_label",
                     defaultMessage: "Make text bold"
                   }),
                   children: /* @__PURE__ */ i(
-                    b,
+                    m,
                     {
                       name: "bold",
                       width: 24,
                       height: 24,
-                      className: a(e.format, e.bold)
+                      className: n(t.format, t.bold)
                     }
                   )
                 }
@@ -137,24 +148,23 @@ const _e = (s) => {
               /* @__PURE__ */ i(
                 "button",
                 {
-                  onTouchStart: l,
-                  onMouseDown: l,
-                  onClick: () => _("italic"),
+                  onMouseDown: g,
+                  onClick: () => I("italic"),
                   type: "button",
-                  className: a(e.toolbarItem, {
-                    [e.active]: P
+                  className: n(t.toolbarItem, {
+                    [t.active]: H
                   }),
-                  "aria-label": d.formatMessage({
+                  "aria-label": c.formatMessage({
                     id: "input.text_editor.plugins.toolbar_plugin.italic.aria_label",
                     defaultMessage: "Make text italic"
                   }),
                   children: /* @__PURE__ */ i(
-                    b,
+                    m,
                     {
                       name: "italic",
                       width: 24,
                       height: 24,
-                      className: a(e.format, e.italic)
+                      className: n(t.format, t.italic)
                     }
                   )
                 }
@@ -162,24 +172,23 @@ const _e = (s) => {
               /* @__PURE__ */ i(
                 "button",
                 {
-                  onTouchStart: l,
-                  onMouseDown: l,
-                  onClick: () => _("underline"),
+                  onMouseDown: g,
+                  onClick: () => I("underline"),
                   type: "button",
-                  className: a(e.toolbarItem, {
-                    [e.active]: F
+                  className: n(t.toolbarItem, {
+                    [t.active]: Q
                   }),
-                  "aria-label": d.formatMessage({
+                  "aria-label": c.formatMessage({
                     id: "input.text_editor.plugins.toolbar_plugin.underline.aria_label",
                     defaultMessage: "Underline text"
                   }),
                   children: /* @__PURE__ */ i(
-                    b,
+                    m,
                     {
                       name: "underline",
                       width: 24,
                       height: 24,
-                      className: a(e.format, e.underline)
+                      className: n(t.format, t.underline)
                     }
                   )
                 }
@@ -187,24 +196,23 @@ const _e = (s) => {
               /* @__PURE__ */ i(
                 "button",
                 {
-                  onTouchStart: l,
-                  onMouseDown: l,
-                  onClick: () => H(),
+                  onMouseDown: g,
+                  onClick: () => G(),
                   type: "button",
-                  className: a(e.toolbarItem, {
-                    [e.active]: h === "quote"
+                  className: n(t.toolbarItem, {
+                    [t.active]: p === "quote"
                   }),
-                  "aria-label": d.formatMessage({
+                  "aria-label": c.formatMessage({
                     id: "input.text_editor.plugins.toolbar_plugin.blockquote.aria_label",
                     defaultMessage: "Add a blockquote"
                   }),
                   children: /* @__PURE__ */ i(
-                    b,
+                    m,
                     {
                       name: "blockquote",
                       width: 24,
                       height: 24,
-                      className: a(e.format, e.quote)
+                      className: n(t.format, t.quote)
                     }
                   )
                 }
@@ -212,24 +220,23 @@ const _e = (s) => {
               /* @__PURE__ */ i(
                 "button",
                 {
-                  onTouchStart: l,
-                  onMouseDown: l,
-                  onClick: () => j(),
+                  onMouseDown: g,
+                  onClick: () => z(),
                   type: "button",
-                  className: a(e.toolbarItem, {
-                    [e.active]: h === "ol"
+                  className: n(t.toolbarItem, {
+                    [t.active]: p === "ol"
                   }),
-                  "aria-label": d.formatMessage({
+                  "aria-label": c.formatMessage({
                     id: "input.text_editor.plugins.toolbar_plugin.numbered_list.aria_label",
                     defaultMessage: "Insert a numbered list"
                   }),
                   children: /* @__PURE__ */ i(
-                    b,
+                    m,
                     {
                       name: "orderedList",
                       width: 24,
                       height: 24,
-                      className: a(e.format, e.numberedList)
+                      className: n(t.format, t.numberedList)
                     }
                   )
                 }
@@ -237,22 +244,21 @@ const _e = (s) => {
               !s.hideSourceAction && /* @__PURE__ */ i(
                 "button",
                 {
-                  onTouchStart: l,
-                  onMouseDown: l,
+                  onMouseDown: g,
                   onClick: s.onAddSource,
                   type: "button",
-                  className: e.toolbarItem,
-                  "aria-label": d.formatMessage({
+                  className: t.toolbarItem,
+                  "aria-label": c.formatMessage({
                     id: "input.text_editor.plugins.toolbar_plugin.add_link.aria_label",
                     defaultMessage: "Add hyperlink"
                   }),
                   children: /* @__PURE__ */ i(
-                    b,
+                    m,
                     {
                       name: "link",
                       width: 20,
                       height: 20,
-                      className: a(e.format, e.link)
+                      className: n(t.format, t.link)
                     }
                   )
                 }
@@ -260,18 +266,18 @@ const _e = (s) => {
             ]
           }
         ) : null,
-        /* @__PURE__ */ i("div", { className: e.actionButton, children: s.hideSubmit ? null : /* @__PURE__ */ i(
-          le,
+        /* @__PURE__ */ i("div", { className: t.actionButton, children: s.hideSubmit ? null : /* @__PURE__ */ i(
+          ce,
           {
             type: "button",
             "data-testid": "submit-button",
             handleClick: s.onSubmit,
-            className: a(e.inputSubmitActionButton, e.submitAction),
-            "aria-label": d.formatMessage({
+            className: n(t.inputSubmitActionButton, t.submitAction),
+            "aria-label": c.formatMessage({
               id: "input.text_editor.plugins.toolbar_plugin.submit_button.aria_label",
               defaultMessage: "Send message"
             }),
-            children: /* @__PURE__ */ i(b, { name: "send", width: 20, height: 20 })
+            children: /* @__PURE__ */ i(m, { name: "send", width: 20, height: 20 })
           }
         ) })
       ]
@@ -279,5 +285,5 @@ const _e = (s) => {
   );
 };
 export {
-  _e as ToolbarPlugin
+  Le as ToolbarPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logora/debate",
-  "version": "0.4.25",
+  "version": "0.4.27",
   "type": "module",
   "license": "AGPL-3.0",
   "description": "Design system of @Logora made with React",