tetrons 0.1.0

package/src/components/tetrons/EditorContent.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { Comment } from "./toolbar/extensions/Comment";
+import { useEffect, useRef, useState } from "react";
+import {
+  useEditor,
+  EditorContent as TiptapEditorContent,
+  Editor,
+} from "@tiptap/react";
+
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import History from "@tiptap/extension-history";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Underline from "@tiptap/extension-underline";
+import Strike from "@tiptap/extension-strike";
+import Code from "@tiptap/extension-code";
+import Blockquote from "@tiptap/extension-blockquote";
+import HardBreak from "@tiptap/extension-hard-break";
+import Heading from "@tiptap/extension-heading";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+
+import TextAlign from "@tiptap/extension-text-align";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import TextStyle from "@tiptap/extension-text-style";
+
+import ListItem from "@tiptap/extension-list-item";
+import BulletList from "@tiptap/extension-bullet-list";
+import OrderedList from "@tiptap/extension-ordered-list";
+import { Subscript } from "./toolbar/marks/Subscript";
+import { Superscript } from "./toolbar/marks/Superscript";
+
+import { ResizableTable } from "./toolbar/extensions/ResizableTable";
+import { Embed } from "./toolbar/extensions/Embed";
+import TableRow from "@tiptap/extension-table-row";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+
+import { FontFamily } from "./toolbar/extensions/FontFamily";
+import { FontSize } from "./toolbar/extensions/FontSize";
+import TetronsToolbar from "./toolbar/TetronsToolbar";
+
+import { ResizableImage } from "./ResizableImage";
+import { ResizableVideo } from "./ResizableVideo";
+import TableContextMenu from "./toolbar/TableContextMenu";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { createLowlight } from "lowlight";
+
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+
+const lowlight = createLowlight();
+
+lowlight.register("js", js);
+lowlight.register("ts", ts);
+
+export default function EditorContent() {
+  const [versions, setVersions] = useState<string[]>([]);
+  const [currentVersionIndex, setCurrentVersionIndex] = useState<number | null>(
+    null
+  );
+
+  const editor: Editor | null = useEditor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      History,
+      Bold,
+      Italic,
+      Underline,
+      Strike,
+      Code,
+      Blockquote,
+      HardBreak,
+      Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      HorizontalRule,
+
+      TextStyle,
+      Color,
+      Highlight.configure({ multicolor: true }),
+      FontFamily,
+      FontSize,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+
+      ListItem,
+      BulletList,
+      OrderedList,
+      Subscript,
+      Superscript,
+
+      Image,
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        linkOnPaste: true,
+      }),
+
+      ResizableTable.configure({
+        resizable: true,
+      }),
+      TableRow,
+      TableCell,
+      TableHeader,
+      Embed,
+
+      ResizableImage,
+      ResizableVideo,
+      Comment,
+      CodeBlockLowlight.configure({
+        lowlight,
+        HTMLAttributes: {
+          class: "bg-gray-100 p-2 rounded font-mono text-sm overflow-auto",
+        },
+      }),
+    ],
+    content: "",
+    editorProps: {
+      attributes: {
+        class: "min-h-full focus:outline-none p-0",
+        "data-placeholder": "Start typing here...",
+      },
+    },
+  });
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    return () => {
+      editor?.destroy();
+    };
+  }, [editor]);
+
+  const handleEditorClick = () => {
+    if (editor && !editor.isFocused) {
+      editor.commands.focus();
+    }
+  };
+
+  const saveVersion = () => {
+    if (!editor) return;
+    const content = editor.getJSON();
+    setVersions((prev) => [...prev, JSON.stringify(content)]);
+    setCurrentVersionIndex(versions.length);
+  };
+
+  const restoreVersion = (index: number) => {
+    if (!editor) return;
+    const versionContent = versions[index];
+    if (versionContent) {
+      editor.commands.setContent(JSON.parse(versionContent));
+      setCurrentVersionIndex(index);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-2 border-b border-gray-300 bg-gray-50 flex flex-wrap items-center gap-3">
+        <button
+          onClick={saveVersion}
+          disabled={!editor}
+          className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+        >
+          Save Version
+        </button>
+
+        <div className="flex items-center gap-2 overflow-x-auto max-w-full">
+          {versions.length === 0 && (
+            <span className="text-gray-500 text-sm">No saved versions</span>
+          )}
+          {versions.map((_, idx) => (
+            <button
+              key={idx}
+              onClick={() => restoreVersion(idx)}
+              className={`px-2 py-1 rounded border ${
+                idx === currentVersionIndex
+                  ? "border-blue-600 font-semibold text-blue-600"
+                  : "border-gray-300 text-gray-700 hover:border-gray-600"
+              }`}
+              title={`Restore Version ${idx + 1}`}
+            >
+              {`V${idx + 1}`}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {editor && <TetronsToolbar editor={editor} />}
+      <div
+        ref={wrapperRef}
+        className="flex-grow p-4 md:p-6 bg-white border border-gray-300 rounded shadow-sm overflow-auto min-h-0 prose relative"
+        onClick={handleEditorClick}
+      >
+        {editor ? (
+          <>
+            <TiptapEditorContent editor={editor} />
+            {editor && <TableContextMenu editor={editor} />}
+          </>
+        ) : (
+          <div className="text-gray-500">Loading editor...</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/tetrons/ResizableImage.ts

@@ -0,0 +1,39 @@
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableImageComponent from "./ResizableImageComponent";
+
+export const ResizableImage = Image.extend({
+  name: "resizableImage",
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: null,
+      },
+      height: {
+        default: null,
+      },
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { width, height, ...rest } = HTMLAttributes;
+    const style = [];
+
+    if (width) style.push(`width: ${width}px`);
+    if (height) style.push(`height: ${height}px`);
+
+    return [
+      "img",
+      {
+        ...rest,
+        style: style.join("; "),
+      },
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ResizableImageComponent);
+  },
+});

package/src/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/src/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/src/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/src/components/tetrons/toolbar/ActionGroup.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { 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 currentZoom = parseFloat(element.style.zoom || "1");
+      const next = Math.min(currentZoom + 0.1, 2);
+      element.style.zoom = next.toString();
+    }
+  };
+
+  const zoomOut = () => {
+    const element = document.querySelector(
+      ".ProseMirror"
+    ) as HTMLElement | null;
+    if (element) {
+      const currentZoom = parseFloat(element.style.zoom || "1");
+      const next = Math.max(currentZoom - 0.1, 0.5);
+      element.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="relative flex items-center gap-1"
+      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="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 focus:outline-none"
+          title="Export"
+        >
+          <MdDownload />
+          <span className="text-sm"></span>
+        </button>
+
+        {dropdownOpen && (
+          <div className="absolute z-10 mt-2 w-40 bg-white border rounded shadow-md">
+            <button
+              type="button"
+              onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadPDF();
+              }}
+              className="w-full text-left px-4 py-2 hover:bg-gray-100"
+            >
+              Export as PDF
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadHTML();
+              }}
+              className="w-full text-left px-4 py-2 hover:bg-gray-100"
+            >
+              Export as HTML
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setDropdownOpen(false);
+                handleDownloadDOCX();
+              }}
+              className="w-full text-left px-4 py-2 hover:bg-gray-100"
+            >
+              Export as DOCX
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}