tetrons 2.3.22 → 2.3.24

package/dist/components/tetrons/ResizableImageComponent.tsx

@@ -0,0 +1,77 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper, NodeViewRendererProps } from "@tiptap/react";
+
+interface ResizableImageProps extends NodeViewRendererProps {
+  updateAttributes: (attrs: {
+    width?: number | null;
+    height?: number | null;
+  }) => void;
+  selected?: boolean;
+}
+
+const ResizableImageComponent: React.FC<ResizableImageProps> = ({
+  node,
+  updateAttributes,
+  selected,
+}) => {
+  const { src, alt, title, width, height } = node.attrs as {
+    src: string;
+    alt?: string;
+    title?: string;
+    width?: number | null;
+    height?: number | null;
+  };
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const img = imgRef.current;
+    if (!img) return;
+
+    const observer = new ResizeObserver(() => {
+      const w = Math.round(img.offsetWidth);
+      const h = Math.round(img.offsetHeight);
+      updateAttributes({ width: w, height: h });
+    });
+
+    observer.observe(img);
+    return () => observer.disconnect();
+  }, [updateAttributes]);
+
+  return (
+    <NodeViewWrapper
+      ref={wrapperRef}
+      contentEditable={false}
+      className={`resizable-image-wrapper ${
+        selected ? "ProseMirror-selectednode" : ""
+      }`}
+      style={{
+        resize: "both",
+        overflow: "auto",
+        border: "1px solid #ccc",
+        padding: 2,
+        display: "inline-block",
+        maxWidth: "100%",
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        ref={imgRef}
+        src={src}
+        alt={alt ?? ""}
+        title={title ?? ""}
+        loading="lazy"
+        style={{
+          width: width ? `${width}px` : "auto",
+          height: height ? `${height}px` : "auto",
+          display: "block",
+          userSelect: "none",
+          pointerEvents: "auto",
+        }}
+        draggable={false}
+      />
+    </NodeViewWrapper>
+  );
+};
+
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableVideo.ts

@@ -0,0 +1,66 @@
+import { Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableVideoComponent from "./ResizableVideoComponent";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    video: {
+      setVideo: (options: { src: string; controls?: boolean }) => ReturnType;
+    };
+  }
+}
+
+export const ResizableVideo = Node.create({
+  name: "video",
+  group: "block",
+  draggable: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      controls: {
+        default: true,
+        parseHTML: (element) => element.hasAttribute("controls"),
+        renderHTML: (attributes) =>
+          attributes.controls ? { controls: "controls" } : {},
+      },
+      width: {
+        default: null,
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+  parseHTML() {
+    return [{ tag: "video[src]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { width, height, ...rest } = HTMLAttributes;
+    const style = [];
+
+    if (width) style.push(`width: ${width}px`);
+    if (height) style.push(`height: ${height}px`);
+
+    return ["video", { ...rest, style: style.join("; ") }];
+  },
+
+  addCommands() {
+    return {
+      setVideo:
+        (attributes) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: attributes,
+          });
+        },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ResizableVideoComponent);
+  },
+});

package/dist/components/tetrons/ResizableVideoComponent.tsx

@@ -0,0 +1,56 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/core";
+
+const ResizableVideoComponent: React.FC<NodeViewProps> = ({
+  node,
+  updateAttributes,
+  selected,
+}) => {
+  const { src, controls, width, height } = node.attrs;
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const observer = new ResizeObserver(() => {
+      const w = Math.round(video.offsetWidth);
+      const h = Math.round(video.offsetHeight);
+      updateAttributes({ width: w, height: h });
+    });
+
+    observer.observe(video);
+    return () => observer.disconnect();
+  }, [updateAttributes]);
+
+  return (
+    <NodeViewWrapper
+      ref={wrapperRef}
+      contentEditable={false}
+      className={`resizable-video-wrapper ${
+        selected ? "ProseMirror-selectednode" : ""
+      }`}
+      style={{
+        resize: "both",
+        overflow: "auto",
+        border: "1px solid #ccc",
+        padding: "2px",
+        display: "inline-block",
+      }}
+    >
+      <video
+        ref={videoRef}
+        src={src}
+        controls={controls}
+        style={{
+          width: width ? `${width}px` : "auto",
+          height: height ? `${height}px` : "auto",
+        }}
+      />
+    </NodeViewWrapper>
+  );
+};
+
+export default ResizableVideoComponent;

package/dist/components/tetrons/extensions/Spellcheck.ts

@@ -0,0 +1,50 @@
+import { Mark, markInputRule } from "@tiptap/core";
+
+export interface SpellcheckOptions {
+  spellcheckFn: (word: string) => boolean;
+}
+
+const wordMatchRegex = () => /(?:^|\s)([a-zA-Z]{2,})(?=\s|$)/g;
+
+export const Spellcheck = Mark.create<SpellcheckOptions>({
+  name: "spellcheck",
+
+  addOptions() {
+    return {
+      spellcheckFn: () => true,
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: wordMatchRegex(),
+        type: this.type,
+        getAttributes: (match) =>
+          this.options.spellcheckFn(match[1])
+            ? false
+            : { "data-spellcheck": "true" },
+      }),
+    ];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-spellcheck]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      {
+        ...HTMLAttributes,
+        style: "text-decoration: red wavy underline;",
+        "data-spellcheck": "true",
+      },
+      0,
+    ];
+  },
+});

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

@@ -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

@@ -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

@@ -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>
+  );
+}