@seyamali/aurelia-editor 0.1.1 → 0.1.3

package/dist/plugins/advanced/raw-html-node.d.ts

@@ -0,0 +1,20 @@
+import { DecoratorNode, NodeKey, SerializedLexicalNode, Spread, DOMConversionMap, DOMExportOutput } from 'lexical';
+export type SerializedRawHtmlNode = Spread<{
+    html: string;
+    tag: string;
+}, SerializedLexicalNode>;
+export declare class RawHtmlNode extends DecoratorNode<HTMLElement> {
+    __html: string;
+    __tag: string;
+    static getType(): string;
+    static clone(node: RawHtmlNode): RawHtmlNode;
+    constructor(html: string, tag: string, key?: NodeKey);
+    static importJSON(serializedNode: SerializedRawHtmlNode): RawHtmlNode;
+    exportJSON(): SerializedRawHtmlNode;
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    decorate(): HTMLElement;
+    static importDOM(): DOMConversionMap | null;
+    exportDOM(): DOMExportOutput;
+}
+export declare function $createRawHtmlNode(html: string, tag: string): RawHtmlNode;

package/dist/state-logic-DmJ5y08x.js

@@ -0,0 +1,103 @@
+import { CAN_UNDO_COMMAND as h, COMMAND_PRIORITY_CRITICAL as r, CAN_REDO_COMMAND as y, UNDO_COMMAND as L, REDO_COMMAND as T, SELECTION_CHANGE_COMMAND as C, $getSelection as B, $isRangeSelection as I, $isNodeSelection as E } from "lexical";
+import { $getNearestNodeOfType as b } from "@lexical/utils";
+import { $isHeadingNode as O, $isQuoteNode as M } from "@lexical/rich-text";
+import { ListNode as f } from "@lexical/list";
+import { LinkNode as k } from "@lexical/link";
+import { I as A, $ as _ } from "./index-BrE44rnx.js";
+import { $isTableNode as v } from "@lexical/table";
+function U(s) {
+  const p = () => {
+    s.getEditorState().read(() => {
+      const e = B();
+      let t = !1;
+      if (I(e)) {
+        const o = {
+          bold: "bold-btn",
+          italic: "italic-btn",
+          underline: "underline-btn",
+          strikethrough: "strikethrough-btn",
+          subscript: "subscript-btn",
+          superscript: "superscript-btn",
+          code: "code-btn"
+        };
+        for (const [d, u] of Object.entries(o))
+          document.getElementById(u)?.classList.toggle("active", e.hasFormat(d));
+        const n = e.anchor.getNode();
+        let i = n.getKey() === "root" ? n : n.getTopLevelElementOrThrow(), l = "paragraph";
+        O(i) ? l = i.getTag() : M(i) && (l = "blockquote");
+        const c = document.querySelector('button[data-item-id="heading-dropdown"]');
+        if (c) {
+          const u = {
+            h1: "Heading 1",
+            h2: "Heading 2",
+            h3: "Heading 3",
+            h4: "Heading 4",
+            h5: "Heading 5",
+            h6: "Heading 6",
+            paragraph: "Normal",
+            blockquote: "Quote"
+          }[l] || "Normal";
+          c.innerHTML = `${A.HEADING} ${u} <span style="font-size: 0.8em; opacity: 0.6; margin-left: 4px;">▼</span>`;
+        }
+        document.getElementById("blockquote-btn")?.classList.toggle("active", l === "blockquote");
+        const a = b(n, f);
+        if (a) {
+          const d = a.getListType();
+          document.getElementById("bullet-list-btn")?.classList.toggle("active", d === "bullet"), document.getElementById("numbered-list-btn")?.classList.toggle("active", d === "number");
+        } else
+          document.getElementById("bullet-list-btn")?.classList.remove("active"), document.getElementById("numbered-list-btn")?.classList.remove("active");
+        t = b(n, k) !== null;
+      } else if (E(e)) {
+        const o = e.getNodes();
+        o.length === 1 && _(o[0]) && (t = !!o[0].__linkUrl);
+      }
+      document.getElementById("insert-link-btn")?.classList.toggle("active", t);
+      const m = document.getElementById("indent-btn"), g = document.getElementById("outdent-btn");
+      if (m && g)
+        if (I(e)) {
+          const o = e.anchor.getNode(), n = o.getTopLevelElement(), i = b(o, f), l = n !== null && !v(n);
+          m.disabled = !l;
+          const c = n?.getIndent?.() || 0, a = i !== null && i.getParent() instanceof f;
+          g.disabled = !(c > 0 || a);
+        } else
+          m.disabled = !0, g.disabled = !0;
+    });
+  }, N = (e) => {
+    const t = document.getElementById("announcer");
+    t && (t.innerText = e, setTimeout(() => {
+      t.innerText === e && (t.innerText = "");
+    }, 3e3));
+  };
+  s.registerCommand(
+    h,
+    (e) => {
+      const t = document.getElementById("undo-btn");
+      return t && (t.disabled = !e), !1;
+    },
+    r
+  ), s.registerCommand(
+    y,
+    (e) => {
+      const t = document.getElementById("redo-btn");
+      return t && (t.disabled = !e), !1;
+    },
+    r
+  ), s.registerCommand(
+    L,
+    () => (N("Undo performed"), !1),
+    r
+  ), s.registerCommand(
+    T,
+    () => (N("Redo performed"), !1),
+    r
+  ), s.registerUpdateListener(() => {
+    p();
+  }), s.registerCommand(
+    C,
+    () => (p(), !1),
+    r
+  );
+}
+export {
+  U as setupToolbarState
+};

package/dist/table-popover-ui-BoxmjrtM.js

@@ -0,0 +1,161 @@
+import { $getSelection as v, $isRangeSelection as f, SELECTION_CHANGE_COMMAND as R, COMMAND_PRIORITY_LOW as B } from "lexical";
+import { $isTableSelection as m, $unmergeCell as T, $isTableCellNode as C, $mergeCells as _, $isTableNode as y, $deleteTableColumn__EXPERIMENTAL as h, $deleteTableRow__EXPERIMENTAL as $, $insertTableColumn__EXPERIMENTAL as I, $insertTableRow__EXPERIMENTAL as L } from "@lexical/table";
+import { I as r } from "./index-BrE44rnx.js";
+const l = {
+  insertRowAbove: (e) => {
+    e.getInternalEditor().update(() => {
+      L(!1);
+    });
+  },
+  insertRowBelow: (e) => {
+    e.getInternalEditor().update(() => {
+      L(!0);
+    });
+  },
+  insertColumnLeft: (e) => {
+    e.getInternalEditor().update(() => {
+      I(!1);
+    });
+  },
+  insertColumnRight: (e) => {
+    e.getInternalEditor().update(() => {
+      I(!0);
+    });
+  },
+  deleteRow: (e) => {
+    e.getInternalEditor().update(() => {
+      $();
+    });
+  },
+  deleteColumn: (e) => {
+    e.getInternalEditor().update(() => {
+      h();
+    });
+  },
+  deleteTable: (e) => {
+    e.getInternalEditor().update(() => {
+      const t = v();
+      if (f(t) || m(t)) {
+        const p = t.getNodes();
+        for (const s of p) {
+          let n = s;
+          for (; n !== null; ) {
+            if (y(n)) {
+              n.remove();
+              return;
+            }
+            n = typeof n.getParent == "function" ? n.getParent() : null;
+          }
+        }
+      }
+    });
+  },
+  // Aliases for backward compatibility
+  insertRow: (e) => l.insertRowBelow(e),
+  insertColumn: (e) => l.insertColumnRight(e),
+  mergeCells: (e) => {
+    e.getInternalEditor().update(() => {
+      const t = v();
+      if (m(t)) {
+        const s = t.getNodes().filter((n) => C(n));
+        s.length > 1 && _(s);
+      } else
+        console.warn("Please select multiple cells (drag across cells) to merge");
+    });
+  },
+  splitCell: (e) => {
+    e.getInternalEditor().update(() => {
+      const t = v();
+      (f(t) || m(t)) && T();
+    });
+  }
+};
+function O(e) {
+  let t = document.getElementById("table-popover");
+  t || (t = document.createElement("div"), t.id = "table-popover", t.className = "table-popover hidden", t.innerHTML = `
+            <div class="table-popover-group">
+                <button id="table-row-above" title="Insert Row Above">${r.TABLE_ROW_ABOVE}</button>
+                <button id="table-row-below" title="Insert Row Below">${r.TABLE_ROW_BELOW}</button>
+                <button id="table-row-delete" title="Delete Row" class="danger">${r.TABLE_ROW_DELETE}</button>
+            </div>
+            <div class="divider-v"></div>
+            <div class="table-popover-group">
+                <button id="table-col-left" title="Insert Column Left">${r.TABLE_COL_LEFT}</button>
+                <button id="table-col-right" title="Insert Column Right">${r.TABLE_COL_RIGHT}</button>
+                <button id="table-col-delete" title="Delete Column" class="danger">${r.TABLE_COL_DELETE}</button>
+            </div>
+            <div class="divider-v" id="table-merge-divider"></div>
+            <div class="table-popover-group">
+                <button id="table-merge" title="Merge Cells">${r.TABLE_MERGE}</button>
+                <button id="table-split" title="Split Cell">${r.TABLE_SPLIT}</button>
+            </div>
+            <div class="divider-v"></div>
+            <div class="table-popover-group">
+                <button id="table-delete" title="Delete Table" class="danger">${r.TABLE_DELETE}</button>
+            </div>
+        `, document.getElementById("editor-wrapper")?.appendChild(t));
+  const p = (o) => {
+    const b = document.getElementById("editor-wrapper");
+    if (!b || !t) return;
+    const d = b.getBoundingClientRect(), a = o.getBoundingClientRect(), c = t.getBoundingClientRect();
+    let E = a.top - d.top - c.height - 10, u = a.left - d.left + a.width / 2 - c.width / 2;
+    u < 10 && (u = 10), u + c.width > d.width - 10 && (u = d.width - c.width - 10), E < 10 && (E = a.bottom - d.top + 10), t.style.top = `${E}px`, t.style.left = `${u}px`;
+  }, s = () => {
+    t?.classList.add("hidden");
+  }, n = (o) => {
+    t?.classList.remove("hidden"), requestAnimationFrame(() => p(o));
+  };
+  e.registerCommand(
+    R,
+    () => {
+      const o = v();
+      if (f(o) || m(o)) {
+        const b = o.getNodes();
+        let d = !1;
+        const a = document.getElementById("table-merge"), c = document.getElementById("table-merge-divider"), E = m(o);
+        a && (a.style.display = E ? "flex" : "none"), c && (c.style.display = E ? "block" : "none");
+        for (const u of b) {
+          let g = u;
+          for (; g !== null; ) {
+            if (C(g)) {
+              const w = e.getElementByKey(g.getKey());
+              if (w) {
+                n(w), d = !0;
+                break;
+              }
+            }
+            g = typeof g.getParent == "function" ? g.getParent() : null;
+          }
+          if (d) break;
+        }
+        d || s();
+      } else
+        s();
+      return !1;
+    },
+    B
+  );
+  const i = { update: (o) => e.update(o), getInternalEditor: () => e };
+  document.getElementById("table-row-above")?.addEventListener("click", () => {
+    l.insertRowAbove(i);
+  }), document.getElementById("table-row-below")?.addEventListener("click", () => {
+    l.insertRowBelow(i);
+  }), document.getElementById("table-row-delete")?.addEventListener("click", () => {
+    l.deleteRow(i);
+  }), document.getElementById("table-col-left")?.addEventListener("click", () => {
+    l.insertColumnLeft(i);
+  }), document.getElementById("table-col-right")?.addEventListener("click", () => {
+    l.insertColumnRight(i);
+  }), document.getElementById("table-col-delete")?.addEventListener("click", () => {
+    l.deleteColumn(i);
+  }), document.getElementById("table-merge")?.addEventListener("click", () => {
+    l.mergeCells(i);
+  }), document.getElementById("table-split")?.addEventListener("click", () => {
+    l.splitCell(i);
+  }), document.getElementById("table-delete")?.addEventListener("click", () => {
+    s(), l.deleteTable(i);
+  });
+}
+export {
+  O as setupTablePopover
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@seyamali/aurelia-editor",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/aurelia-editor.umd.cjs",
   "module": "./dist/aurelia-editor.js",