npm - tetrons - Versions diffs - 2.3.21 → 2.3.23 - Mend

tetrons 2.3.21 → 2.3.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/components/tetrons/toolbar/ActionGroup.tsx ADDED Viewed

@@ -0,0 +1,218 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { Editor } from "@tiptap/react";
+import {
+  MdZoomIn,
+  MdZoomOut,
+  MdPrint,
+  MdSave,
+  MdDownload,
+} from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+type ActionGroupProps = {
+  editor: Editor;
+};
+export default function ActionGroup({ editor }: ActionGroupProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    };
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [dropdownOpen]);
+  const zoomIn = () => {
+    const element = document.querySelector(
+      ".ProseMirror"
+    ) as HTMLElement | null;
+    if (element) {
+      const style = element.style as ZoomableStyle;
+      const currentZoom = parseFloat(style.zoom || "1");
+      const next = Math.min(currentZoom + 0.1, 2);
+      style.zoom = next.toString();
+    }
+  };
+  const zoomOut = () => {
+    const element = document.querySelector(
+      ".ProseMirror"
+    ) as HTMLElement | null;
+    if (element) {
+      const style = element.style as ZoomableStyle;
+      const currentZoom = parseFloat(style.zoom || "1");
+      const next = Math.max(currentZoom - 0.1, 0.5);
+      style.zoom = next.toString();
+    }
+  };
+  const handlePrint = () => {
+    const html = editor.getHTML();
+    const printWindow = window.open("", "_blank");
+    if (printWindow) {
+      printWindow.document.write(`
+        <html>
+          <head>
+            <title>Print</title>
+          </head>
+          <body>${html}</body>
+        </html>
+      `);
+      printWindow.document.close();
+      printWindow.focus();
+      printWindow.print();
+    }
+  };
+  const handleSave = async () => {
+    const content = editor.getJSON();
+    try {
+      const response = await fetch("/api/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(content),
+      });
+      if (!response.ok) throw new Error("Failed to save file");
+      const result = await response.json();
+      console.log(result.message);
+      alert("Content saved successfully!");
+    } catch (error) {
+      console.error("Error saving content:", error);
+      alert("Failed to save content.");
+    }
+  };
+  const handleDownloadPDF = async () => {
+    const html = editor.getHTML();
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    container.classList.add("p-4", "prose");
+    document.body.appendChild(container);
+    try {
+      const domToPdf = (await import("dom-to-pdf")).default;
+      const options = {
+        filename: "document.pdf",
+        overrideWidth: 800,
+        overrideHeight: 1120,
+      };
+      domToPdf(container, options, () => {
+        console.log("PDF downloaded!");
+      });
+    } catch (error) {
+      console.error("PDF download failed", error);
+      alert("Failed to download PDF.");
+    } finally {
+      document.body.removeChild(container);
+    }
+  };
+  const handleDownloadHTML = () => {
+    const html = editor.getHTML();
+    const blob = new Blob([html], { type: "text/html" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "document.html";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const handleDownloadDOCX = async () => {
+    const { Document, Packer, Paragraph } = await import("docx");
+    const text = editor.getText();
+    const doc = new Document({
+      sections: [
+        {
+          properties: {},
+          children: [new Paragraph(text)],
+        },
+      ],
+    });
+    const blob = await Packer.toBlob(doc);
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "document.docx";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  return (
+    <div className="action-group" role="group" aria-label="Editor actions">
+      <ToolbarButton icon={MdZoomIn} onClick={zoomIn} title="Zoom In" />
+      <ToolbarButton icon={MdZoomOut} onClick={zoomOut} title="Zoom Out" />
+      <ToolbarButton icon={MdPrint} onClick={handlePrint} title="Print" />
+      <ToolbarButton icon={MdSave} onClick={handleSave} title="Save" />
+      <div className="relative" ref={dropdownRef}>
+        <button
+          type="button"
+          onClick={() => setDropdownOpen((open) => !open)}
+          aria-haspopup="menu"
+          aria-expanded={dropdownOpen ? "true" : "false"}
+          className="export-button"
+          title="Export"
+        >
+          <MdDownload />
+          <span className="text-sm"></span>
+        </button>
+        {dropdownOpen && (
+          <div className="export-dropdown">
+            <button
+              type="button"
+              onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadPDF();
+              }}
+            >
+              Export as PDF
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadHTML();
+              }}
+            >
+              Export as HTML
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadDOCX();
+              }}
+            >
+              Export as DOCX
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/components/tetrons/toolbar/ClipboardGroup.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import {
+  MdContentPaste,
+  MdContentCut,
+  MdContentCopy,
+  MdFormatPaint,
+} from "react-icons/md";
+import React from "react";
+import { Editor } from "@tiptap/react";
+import ToolbarButton from "./ToolbarButton";
+export default function ClipboardGroup({ editor }: { editor: Editor }) {
+  return (
+    <div className="clipboard-group">
+      <ToolbarButton
+        icon={MdContentPaste}
+        title="Paste"
+        onClick={async () => {
+          try {
+            const text = await navigator.clipboard.readText();
+            editor.chain().focus().insertContent(text).run();
+          } catch (error) {
+            console.error("Failed to read clipboard contents:", error);
+          }
+        }}
+      />
+      <ToolbarButton
+        icon={MdContentCut}
+        title="Cut"
+        onClick={() => {
+          const { from, to } = editor.state.selection;
+          if (from === to) return;
+          const selectedText = editor.state.doc.textBetween(from, to);
+          navigator.clipboard.writeText(selectedText).then(() => {
+            editor.chain().focus().deleteRange({ from, to }).run();
+          });
+        }}
+      />
+      <ToolbarButton
+        icon={MdContentCopy}
+        title="Copy"
+        onClick={() => {
+          const { from, to } = editor.state.selection;
+          if (from === to) return;
+          const selectedText = editor.state.doc.textBetween(from, to);
+          navigator.clipboard.writeText(selectedText);
+        }}
+      />
+      <ToolbarButton
+        icon={MdFormatPaint}
+        title="Format Painter"
+        onClick={() => {
+          const currentMarks = editor.getAttributes("textStyle");
+          localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
+        }}
+      />
+    </div>
+  );
+}

package/dist/components/tetrons/toolbar/FileGroup.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+"use client";
+import { Editor } from "@tiptap/react";
+import { FaRegFolderOpen } from "react-icons/fa";
+import { VscNewFile } from "react-icons/vsc";
+import ToolbarButton from "./ToolbarButton";
+import React, { useRef } from "react";
+type FileGroupProps = {
+  editor: Editor;
+};
+export default function FileGroup({ editor }: FileGroupProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const handleNew = () => {
+    if (
+      confirm(
+        "Are you sure you want to create a new document? Unsaved changes will be lost."
+      )
+    ) {
+      editor.commands.clearContent();
+    }
+  };
+  const handleOpen = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    try {
+      const text = await file.text();
+      const json = JSON.parse(text);
+      editor.commands.setContent(json);
+    } catch (error) {
+      console.error("Error reading file:", error);
+      alert(
+        "Failed to open or parse the file. Make sure it's a valid JSON file."
+      );
+    } finally {
+      e.target.value = "";
+    }
+  };
+  return (
+    <div className="file-group" role="group" aria-label="File actions">
+      <input
+        type="file"
+        accept=".json"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        className="hidden"
+        aria-label="Open JSON file"
+      />
+      <ToolbarButton icon={VscNewFile} onClick={handleNew} title="New" />
+      <ToolbarButton
+        icon={FaRegFolderOpen}
+        onClick={handleOpen}
+        title="Open File"
+      />
+    </div>
+  );
+}

package/dist/components/tetrons/toolbar/FontStyleGroup.tsx ADDED Viewed

@@ -0,0 +1,194 @@
+"use client";
+import {
+  MdFormatBold,
+  MdFormatItalic,
+  MdFormatUnderlined,
+  MdStrikethroughS,
+  MdSubscript,
+  MdSuperscript,
+  MdFormatClear,
+  MdFormatPaint,
+} from "react-icons/md";
+import { ImTextColor } from "react-icons/im";
+import { BiSolidColorFill } from "react-icons/bi";
+import { Editor } from "@tiptap/react";
+import ToolbarButton from "./ToolbarButton";
+import React, { useEffect, useState } from "react";
+interface FontStyleGroupProps {
+  editor: Editor;
+}
+export default function FontStyleGroup({ editor }: FontStyleGroupProps) {
+  const [textColor, setTextColor] = useState("#000000");
+  const [highlightColor, setHighlightColor] = useState("#ffff00");
+  const [fontFamily, setFontFamily] = useState("Arial");
+  const [fontSize, setFontSize] = useState("16px");
+  useEffect(() => {
+    if (!editor) return;
+    const updateStates = () => {
+      const highlight = editor.getAttributes("highlight");
+      setHighlightColor(highlight?.color || "#ffff00");
+      const color = editor.getAttributes("textStyle")?.color;
+      setTextColor(color || "#000000");
+      const fontAttr = editor.getAttributes("fontFamily")?.font || "Arial";
+      setFontFamily(fontAttr);
+      const sizeAttr = editor.getAttributes("fontSize")?.size || "16px";
+      setFontSize(sizeAttr);
+    };
+    updateStates();
+    editor.on("selectionUpdate", updateStates);
+    editor.on("transaction", updateStates);
+    return () => {
+      editor.off("selectionUpdate", updateStates);
+      editor.off("transaction", updateStates);
+    };
+  }, [editor]);
+  return (
+    <div className="font-style-group">
+      <select
+        title="Font Family"
+        value={fontFamily}
+        onChange={(e) => {
+          const value = e.target.value;
+          setFontFamily(value);
+          editor.chain().focus().setFontFamily(value).run();
+        }}
+      >
+        <option value="Arial">Arial</option>
+        <option value="Georgia">Georgia</option>
+        <option value="Times New Roman">Times New Roman</option>
+        <option value="Courier New">Courier New</option>
+        <option value="Verdana">Verdana</option>
+      </select>
+      <select
+        title="Font Size"
+        value={fontSize}
+        onChange={(e) => {
+          const value = e.target.value;
+          setFontSize(value);
+          editor.chain().focus().setFontSize(value).run();
+        }}
+      >
+        <option value="12px">12</option>
+        <option value="14px">14</option>
+        <option value="16px">16</option>
+        <option value="18px">18</option>
+        <option value="24px">24</option>
+        <option value="36px">36</option>
+        <option value="48px">48</option>
+        <option value="64px">64</option>
+        <option value="72px">72</option>
+      </select>
+      <ToolbarButton
+        icon={MdFormatBold}
+        label="Bold"
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        isActive={editor.isActive("bold")}
+      />
+      <ToolbarButton
+        icon={MdFormatItalic}
+        label="Italic"
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        isActive={editor.isActive("italic")}
+      />
+      <ToolbarButton
+        icon={MdFormatUnderlined}
+        label="Underline"
+        onClick={() => editor.chain().focus().toggleUnderline().run()}
+        isActive={editor.isActive("underline")}
+      />
+      <ToolbarButton
+        icon={MdStrikethroughS}
+        label="Strikethrough"
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        isActive={editor.isActive("strike")}
+      />
+      <ToolbarButton
+        icon={MdSubscript}
+        label="Subscript"
+        onClick={() => editor.chain().focus().toggleSubscript().run()}
+        isActive={editor.isActive("subscript")}
+      />
+      <ToolbarButton
+        icon={MdSuperscript}
+        label="Superscript"
+        onClick={() => editor.chain().focus().toggleSuperscript().run()}
+        isActive={editor.isActive("superscript")}
+      />
+      <label
+        title="Font Color"
+        aria-label="Font Color"
+        className="color-label"
+        style={{ "--indicator-color": textColor } as React.CSSProperties}
+      >
+        <ImTextColor size={20} />
+        <div className="color-indicator" />
+        <input
+          type="color"
+          value={textColor}
+          onChange={(e) => {
+            const color = e.target.value;
+            setTextColor(color);
+            editor.chain().focus().setColor(color).run();
+          }}
+        />
+      </label>
+      <label
+        title="Highlight Color"
+        aria-label="Highlight Color"
+        className="color-label"
+        style={{ "--indicator-color": highlightColor } as React.CSSProperties}
+      >
+        <BiSolidColorFill size={20} />
+        <div className="color-indicator" />
+        <input
+          type="color"
+          value={highlightColor}
+          onChange={(e) => {
+            const color = e.target.value;
+            setHighlightColor(color);
+            editor.chain().focus().setHighlight({ color }).run();
+          }}
+        />
+      </label>
+      <ToolbarButton
+        icon={MdFormatClear}
+        label="Clear Formatting"
+        onClick={() => editor.chain().focus().unsetAllMarks().run()}
+      />
+      <ToolbarButton
+        icon={MdFormatPaint}
+        label="Apply Painter Format"
+        onClick={() => {
+          const format = JSON.parse(
+            localStorage.getItem("formatPainter") || "{}"
+          );
+          if (format.color) editor.chain().focus().setColor(format.color).run();
+          if (format.backgroundColor) {
+            editor
+              .chain()
+              .focus()
+              .setHighlight({ color: format.backgroundColor })
+              .run();
+          }
+        }}
+      />
+    </div>
+  );
+}