npm - tetrons - Versions diffs - 2.1.7 → 2.1.8 - Mend

tetrons 2.1.7 → 2.1.8

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 (67) hide show

package/dist/app/api/export/route.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function GET(req: Request): Response;

package/dist/app/api/export/route.js ADDED Viewed

@@ -0,0 +1,4 @@
+export function GET(req) {
+    console.log(req.method); // Example usage
+    return new Response("Hello, world!", { status: 200 });
+}

package/dist/app/api/save/route.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { NextRequest, NextResponse } from "next/server";
+export declare function POST(request: NextRequest): Promise<NextResponse<{
+    message: string;
+}> | NextResponse<{
+    error: string;
+}>>;

package/dist/app/api/save/route.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import path from "path";
+import fs from "fs/promises";
+export async function POST(request) {
+    try {
+        const json = await request.json();
+        const publicDir = path.join(process.cwd(), "public");
+        const filePath = path.join(publicDir, "editor-content.json");
+        await fs.writeFile(filePath, JSON.stringify(json, null, 2), "utf-8");
+        return NextResponse.json({ message: "File saved successfully" });
+    }
+    catch (_a) {
+        return NextResponse.json({ error: "Failed to save file" }, { status: 500 });
+    }
+}

package/dist/app/layout.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Metadata } from "next";
+import "./globals.css";
+export declare const metadata: Metadata;
+export default function RootLayout({ children, }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/dist/app/layout.jsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+export const metadata = {
+    title: "Tetrons",
+    description: "A modern Word-style rich text editor built with Next.js",
+    icons: {
+        icon: [
+            { url: "/favicon.ico", type: "image/x-icon" },
+            { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
+            { url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
+        ],
+        apple: "/apple-touch-icon.png",
+    },
+    manifest: "/site.webmanifest",
+};
+export default function RootLayout({ children, }) {
+    return (<html lang="en">
+      <body suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased bg-gray-50 text-gray-900`}>
+        <main className="max-w-screen-xl mx-auto p-4">{children}</main>
+      </body>
+    </html>);
+}

package/dist/app/page.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export default function Home(): import("react").JSX.Element;

package/dist/app/page.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+import EditorContent from "../components/tetrons/EditorContent";
+export default function Home() {
+    return (<main className="flex flex-col h-screen overflow-hidden">
+      <div className="flex-1 overflow-auto flex flex-col">
+        <EditorContent />
+      </div>
+    </main>);
+}

package/dist/components/UI/Button.d.ts ADDED Viewed

File without changes

package/dist/components/UI/Button.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";

package/dist/components/UI/Dropdown.d.ts ADDED Viewed

File without changes

package/dist/components/UI/Dropdown.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";

package/dist/components/tetrons/EditorContent.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from "react";
2	+ export default function EditorContent(): React.JSX.Element;

package/dist/components/tetrons/EditorContent.jsx ADDED Viewed

@@ -0,0 +1,160 @@
+"use client";
+import React from "react";
+import { Comment } from "./toolbar/extensions/Comment";
+import { useEffect, useRef } from "react";
+import { useEditor, EditorContent as TiptapEditorContent, } 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] = React.useState([]);
+    const [currentVersionIndex, setCurrentVersionIndex] = React.useState(null);
+    const editor = 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...",
+            },
+        },
+        immediatelyRender: false,
+    });
+    const wrapperRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            editor === null || editor === void 0 ? void 0 : 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) => {
+        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/dist/components/tetrons/ResizableImage.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ResizableImage: import("@tiptap/react").Node<import("@tiptap/extension-image").ImageOptions, any>;

package/dist/components/tetrons/ResizableImage.js ADDED Viewed

@@ -0,0 +1,40 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableImageComponent from "./ResizableImageComponent";
+export const ResizableImage = Image.extend({
+    name: "resizableImage",
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { width: {
+                default: null,
+            }, height: {
+                default: null,
+            } });
+    },
+    renderHTML({ HTMLAttributes }) {
+        const { width, height } = HTMLAttributes, rest = __rest(HTMLAttributes, ["width", "height"]);
+        const style = [];
+        if (width)
+            style.push(`width: ${width}px`);
+        if (height)
+            style.push(`height: ${height}px`);
+        return [
+            "img",
+            Object.assign(Object.assign({}, rest), { style: style.join("; ") }),
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ResizableImageComponent);
+    },
+});

package/dist/components/tetrons/ResizableImageComponent.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from "react";
+import { NodeViewRendererProps } from "@tiptap/react";
+interface ResizableImageProps extends NodeViewRendererProps {
+    updateAttributes: (attrs: {
+        width?: number | null;
+        height?: number | null;
+    }) => void;
+    selected?: boolean;
+}
+declare const ResizableImageComponent: React.FC<ResizableImageProps>;
+export default ResizableImageComponent;

package/dist/components/tetrons/ResizableImageComponent.jsx ADDED Viewed

@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableImageComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, alt, title, width, height } = node.attrs;
+    const wrapperRef = useRef(null);
+    const imgRef = useRef(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 !== null && alt !== void 0 ? alt : ""} title={title !== null && title !== void 0 ? 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.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Node } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        video: {
+            setVideo: (options: {
+                src: string;
+                controls?: boolean;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const ResizableVideo: Node<any, any>;

package/dist/components/tetrons/ResizableVideo.js ADDED Viewed

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ResizableVideoComponent from "./ResizableVideoComponent";
+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 } = HTMLAttributes, rest = __rest(HTMLAttributes, ["width", "height"]);
+        const style = [];
+        if (width)
+            style.push(`width: ${width}px`);
+        if (height)
+            style.push(`height: ${height}px`);
+        return ["video", Object.assign(Object.assign({}, 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.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+import type { NodeViewProps } from "@tiptap/core";
+declare const ResizableVideoComponent: React.FC<NodeViewProps>;
+export default ResizableVideoComponent;

package/dist/components/tetrons/ResizableVideoComponent.jsx ADDED Viewed

@@ -0,0 +1,32 @@
+import React, { useRef, useEffect } from "react";
+import { NodeViewWrapper } from "@tiptap/react";
+const ResizableVideoComponent = ({ node, updateAttributes, selected, }) => {
+    const { src, controls, width, height } = node.attrs;
+    const wrapperRef = useRef(null);
+    const videoRef = useRef(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/helpers.d.ts ADDED Viewed

File without changes

package/dist/components/tetrons/helpers.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ "use strict";

package/dist/components/tetrons/toolbar/ActionGroup.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+type ActionGroupProps = {
+    editor: Editor;
+};
+export default function ActionGroup({ editor }: ActionGroupProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,165 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { MdZoomIn, MdZoomOut, MdPrint, MdSave, MdDownload, } from "react-icons/md";
+import ToolbarButton from "./ToolbarButton";
+export default function ActionGroup({ editor }) {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                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");
+        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");
+        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>);
+}

package/dist/components/tetrons/toolbar/ClipboardGroup.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from "react";
+import { Editor } from "@tiptap/react";
+export default function ClipboardGroup({ editor }: {
+    editor: Editor;
+}): React.JSX.Element;