@anhnv/lexical-playground 0.39.0

package/dist/QuestionComponent-DQFO_Or8.js

@@ -0,0 +1,60 @@
+import { jsxs as n, Fragment as u, jsx as o } from "react/jsx-runtime";
+import { useLexicalComposerContext as p } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as m } from "@lexical/react/useLexicalEditable";
+import { useState as f } from "react";
+import { M as b, m as x } from "./index-C0BTrOQP.js";
+function k({
+  id: t,
+  nodeKey: s
+}) {
+  const [r] = p(), e = m(), [a, i] = f(!1), d = (c) => {
+    e && (c.preventDefault(), i(!0));
+  }, l = () => {
+    i(!1);
+  };
+  return /* @__PURE__ */ n(u, { children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: "question-node",
+        style: {
+          display: "inline-block",
+          padding: "2px 6px",
+          backgroundColor: "rgba(24, 119, 232, 0.1)",
+          borderRadius: "4px",
+          fontSize: "0.9em",
+          border: "1px solid rgba(24, 119, 232, 0.3)",
+          cursor: e ? "pointer" : "default"
+        },
+        contentEditable: !1,
+        onDoubleClick: d,
+        title: e ? "Double-click to edit ID" : void 0,
+        children: [
+          /* @__PURE__ */ o("span", { style: { fontWeight: "bold" }, children: "Q:" }),
+          " ",
+          t
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ o(
+      b,
+      {
+        onClose: l,
+        title: "Edit Question ID",
+        closeOnClickOutside: !0,
+        children: /* @__PURE__ */ o(
+          x,
+          {
+            activeEditor: r,
+            onClose: l,
+            currentId: t,
+            nodeKey: s
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  k as default
+};

package/dist/StickyComponent-B-sytJ7W.js

@@ -0,0 +1,161 @@
+import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { useCollaborationContext as z } from "@lexical/react/LexicalCollaborationContext";
+import { CollaborationPlugin as B } from "@lexical/react/LexicalCollaborationPlugin";
+import { useLexicalComposerContext as X } from "@lexical/react/LexicalComposerContext";
+import { LexicalErrorBoundary as _ } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin as T } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalNestedComposer as Y } from "@lexical/react/LexicalNestedComposer";
+import { PlainTextPlugin as $ } from "@lexical/react/LexicalPlainTextPlugin";
+import { calculateZoomLevel as x } from "@lexical/utils";
+import { $getNodeByKey as C } from "lexical";
+import { useRef as L, useEffect as R, useLayoutEffect as H } from "react";
+import { t as W, u as j, f as O, g as A, n as h } from "./index-C0BTrOQP.js";
+const F = {
+  ...W,
+  paragraph: "StickyEditorTheme__paragraph"
+};
+function y(f, a) {
+  const u = f.style, m = a.rootElementRect, p = m !== null ? m.left : 0, s = m !== null ? m.top : 0;
+  u.top = s + a.y + "px", u.left = p + a.x + "px";
+}
+function ot({
+  x: f,
+  y: a,
+  nodeKey: u,
+  color: m,
+  caption: p
+}) {
+  const [s] = X(), c = L(null), d = L({
+    isDragging: !1,
+    offsetX: 0,
+    offsetY: 0,
+    rootElementRect: null,
+    x: 0,
+    y: 0
+  }), { isCollabActive: N } = z();
+  R(() => {
+    const t = d.current;
+    t.x = f, t.y = a;
+    const o = c.current;
+    o !== null && y(o, t);
+  }, [f, a]), H(() => {
+    const t = d.current, o = new ResizeObserver((r) => {
+      for (let i = 0; i < r.length; i++) {
+        const g = r[i], { target: w } = g;
+        t.rootElementRect = w.getBoundingClientRect();
+        const v = c.current;
+        v !== null && y(v, t);
+      }
+    }), e = s.registerRootListener(
+      (r, i) => {
+        i !== null && o.unobserve(i), r !== null && o.observe(r);
+      }
+    ), n = () => {
+      const r = s.getRootElement(), i = c.current;
+      r !== null && i !== null && (t.rootElementRect = r.getBoundingClientRect(), y(i, t));
+    };
+    return window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n), e();
+    };
+  }, [s]), R(() => {
+    const t = c.current;
+    t !== null && setTimeout(() => {
+      t.style.setProperty(
+        "transition",
+        "top 0.3s ease 0s, left 0.3s ease 0s"
+      );
+    }, 500);
+  }, []);
+  const k = (t) => {
+    const o = c.current, e = d.current, n = e.rootElementRect, r = x(o);
+    o !== null && e.isDragging && n !== null && (e.x = t.pageX / r - e.offsetX - n.left, e.y = t.pageY / r - e.offsetY - n.top, y(o, e));
+  }, E = (t) => {
+    const o = c.current, e = d.current;
+    o !== null && (e.isDragging = !1, o.classList.remove("dragging"), s.update(() => {
+      const n = C(u);
+      h(n) && n.setPosition(e.x, e.y);
+    })), document.removeEventListener("pointermove", k), document.removeEventListener("pointerup", E);
+  }, P = () => {
+    s.update(() => {
+      const t = C(u);
+      h(t) && t.remove();
+    });
+  }, D = () => {
+    s.update(() => {
+      const t = C(u);
+      h(t) && t.toggleColor();
+    });
+  }, { historyState: S } = j();
+  return /* @__PURE__ */ l("div", { ref: c, className: "sticky-note-container", children: /* @__PURE__ */ b(
+    "div",
+    {
+      className: `sticky-note ${m}`,
+      onPointerDown: (t) => {
+        const o = c.current;
+        if (o == null || t.button === 2 || t.target !== o.firstChild)
+          return;
+        const e = o, n = d.current;
+        if (e !== null) {
+          const { top: r, left: i } = e.getBoundingClientRect(), g = x(e);
+          n.offsetX = t.clientX / g - i, n.offsetY = t.clientY / g - r, n.isDragging = !0, e.classList.add("dragging"), document.addEventListener("pointermove", k), document.addEventListener("pointerup", E), t.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ l(
+          "button",
+          {
+            onClick: P,
+            className: "delete",
+            "aria-label": "Delete sticky note",
+            title: "Delete",
+            children: "X"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            onClick: D,
+            className: "color",
+            "aria-label": "Change sticky note color",
+            title: "Color",
+            children: /* @__PURE__ */ l("i", { className: "bucket" })
+          }
+        ),
+        /* @__PURE__ */ b(
+          Y,
+          {
+            initialEditor: p,
+            initialTheme: F,
+            children: [
+              N ? /* @__PURE__ */ l(
+                B,
+                {
+                  id: p.getKey(),
+                  providerFactory: O,
+                  shouldBootstrap: !0
+                }
+              ) : /* @__PURE__ */ l(T, { externalHistoryState: S }),
+              /* @__PURE__ */ l(
+                $,
+                {
+                  contentEditable: /* @__PURE__ */ l(
+                    A,
+                    {
+                      placeholder: "What's up?",
+                      placeholderClassName: "StickyNode__placeholder",
+                      className: "StickyNode__contentEditable"
+                    }
+                  ),
+                  ErrorBoundary: _
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  ot as default
+};

package/dist/StickyComponent-DGi089bO.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),j=require("@lexical/react/LexicalCollaborationContext"),q=require("@lexical/react/LexicalCollaborationPlugin"),B=require("@lexical/react/LexicalComposerContext"),D=require("@lexical/react/LexicalErrorBoundary"),w=require("@lexical/react/LexicalHistoryPlugin"),z=require("@lexical/react/LexicalNestedComposer"),T=require("@lexical/react/LexicalPlainTextPlugin"),v=require("@lexical/utils"),h=require("lexical"),y=require("react"),a=require("./index-BF-WAqsp.cjs"),$={...a.theme,paragraph:"StickyEditorTheme__paragraph"};function C(m,u){const d=m.style,f=u.rootElementRect,p=f!==null?f.left:0,c=f!==null?f.top:0;d.top=c+u.y+"px",d.left=p+u.x+"px"}function X({x:m,y:u,nodeKey:d,color:f,caption:p}){const[c]=B.useLexicalComposerContext(),l=y.useRef(null),g=y.useRef({isDragging:!1,offsetX:0,offsetY:0,rootElementRect:null,x:0,y:0}),{isCollabActive:b}=j.useCollaborationContext();y.useEffect(()=>{const e=g.current;e.x=m,e.y=u;const o=l.current;o!==null&&C(o,e)},[m,u]),y.useLayoutEffect(()=>{const e=g.current,o=new ResizeObserver(i=>{for(let r=0;r<i.length;r++){const x=i[r],{target:S}=x;e.rootElementRect=S.getBoundingClientRect();const E=l.current;E!==null&&C(E,e)}}),t=c.registerRootListener((i,r)=>{r!==null&&o.unobserve(r),i!==null&&o.observe(i)}),n=()=>{const i=c.getRootElement(),r=l.current;i!==null&&r!==null&&(e.rootElementRect=i.getBoundingClientRect(),C(r,e))};return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n),t()}},[c]),y.useEffect(()=>{const e=l.current;e!==null&&setTimeout(()=>{e.style.setProperty("transition","top 0.3s ease 0s, left 0.3s ease 0s")},500)},[]);const k=e=>{const o=l.current,t=g.current,n=t.rootElementRect,i=v.calculateZoomLevel(o);o!==null&&t.isDragging&&n!==null&&(t.x=e.pageX/i-t.offsetX-n.left,t.y=e.pageY/i-t.offsetY-n.top,C(o,t))},L=e=>{const o=l.current,t=g.current;o!==null&&(t.isDragging=!1,o.classList.remove("dragging"),c.update(()=>{const n=h.$getNodeByKey(d);a.$isStickyNode(n)&&n.setPosition(t.x,t.y)})),document.removeEventListener("pointermove",k),document.removeEventListener("pointerup",L)},R=()=>{c.update(()=>{const e=h.$getNodeByKey(d);a.$isStickyNode(e)&&e.remove()})},N=()=>{c.update(()=>{const e=h.$getNodeByKey(d);a.$isStickyNode(e)&&e.toggleColor()})},{historyState:P}=a.useSharedHistoryContext();return s.jsx("div",{ref:l,className:"sticky-note-container",children:s.jsxs("div",{className:`sticky-note ${f}`,onPointerDown:e=>{const o=l.current;if(o==null||e.button===2||e.target!==o.firstChild)return;const t=o,n=g.current;if(t!==null){const{top:i,left:r}=t.getBoundingClientRect(),x=v.calculateZoomLevel(t);n.offsetX=e.clientX/x-r,n.offsetY=e.clientY/x-i,n.isDragging=!0,t.classList.add("dragging"),document.addEventListener("pointermove",k),document.addEventListener("pointerup",L),e.preventDefault()}},children:[s.jsx("button",{onClick:R,className:"delete","aria-label":"Delete sticky note",title:"Delete",children:"X"}),s.jsx("button",{onClick:N,className:"color","aria-label":"Change sticky note color",title:"Color",children:s.jsx("i",{className:"bucket"})}),s.jsxs(z.LexicalNestedComposer,{initialEditor:p,initialTheme:$,children:[b?s.jsx(q.CollaborationPlugin,{id:p.getKey(),providerFactory:a.createWebsocketProvider,shouldBootstrap:!0}):s.jsx(w.HistoryPlugin,{externalHistoryState:P}),s.jsx(T.PlainTextPlugin,{contentEditable:s.jsx(a.LexicalContentEditable,{placeholder:"What's up?",placeholderClassName:"StickyNode__placeholder",className:"StickyNode__contentEditable"}),ErrorBoundary:D.LexicalErrorBoundary})]})]})})}exports.default=X;

package/dist/_commonjsHelpers-C6fGbg64.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+}
+export {
+  e as g
+};

package/dist/_commonjsHelpers-DwGv2jUC.cjs

@@ -0,0 +1 @@
+"use strict";function e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}exports.getDefaultExportFromCjs=e;