tetrons 2.3.22 → 2.3.23

package/dist/components/tetrons/EditorContent.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import React from "react";
+import { Comment } from "./toolbar/extensions/Comment";
+import { useEffect, useRef } 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);
+
+type EditorContentProps = {
+  apiKey: string;
+};
+
+export default function EditorContent({ apiKey }: EditorContentProps) {
+  const [isValid, setIsValid] = React.useState<boolean | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [versions, setVersions] = React.useState<string[]>([]);
+  const [userVersion, setUserVersion] = React.useState<
+    "free" | "pro" | "premium" | "platinum" | null
+  >(null);
+
+  const [currentVersionIndex, setCurrentVersionIndex] = React.useState<
+    number | null
+  >(null);
+
+  function getApiBaseUrl(): string {
+    if (
+      typeof import.meta !== "undefined" &&
+      import.meta.env?.VITE_TETRONS_API_URL
+    ) {
+      return import.meta.env.VITE_TETRONS_API_URL;
+    }
+    if (
+      typeof process !== "undefined" &&
+      process.env?.NEXT_PUBLIC_TETRONS_API_URL
+    ) {
+      return process.env.NEXT_PUBLIC_TETRONS_API_URL;
+    }
+    return "https://staging.tetrons.com";
+  }
+
+  const API_BASE_URL = getApiBaseUrl();  
+
+  useEffect(() => {
+    const validateKey = async () => {
+      try {
+        const res = await fetch(`${API_BASE_URL}/api/validate`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ apiKey }),
+        });               
+
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || "Invalid API Key");
+
+        setIsValid(true);
+        setUserVersion(data.version);
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          setError(err.message || "Invalid API Key");
+        } else {
+          setError("Invalid API Key");
+        }
+        setIsValid(false);
+      }
+    };
+
+    validateKey();
+  }, [apiKey]); 
+
+  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...",
+      },
+    },
+    immediatelyRender: false,
+  });
+
+  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);
+    }
+  }; 
+
+  if (isValid === false) {
+    return <div className="editor-error">⚠️ {error}</div>;
+  }
+
+  if (isValid === null) {
+    return <div className="editor-loading">🔍 Validating license...</div>;
+  }
+
+  return (
+    <div className="editor-container">
+      {userVersion !== "free" && (
+        <div className="editor-toolbar">
+          <button
+            type="button"
+            onClick={saveVersion}
+            disabled={!editor}
+            className="editor-save-btn"
+          >
+            Save Version
+          </button>
+
+          <div className="editor-versions-wrapper">
+            {versions.length === 0 && (
+              <span className="editor-no-versions">No saved versions</span>
+            )}
+            {versions.map((_, idx) => (
+              <button
+                type="button"
+                key={idx}
+                onClick={() => restoreVersion(idx)}
+                className={`editor-version-btn ${
+                  idx === currentVersionIndex ? "active" : ""
+                }`}
+                title={`Restore Version ${idx + 1}`}
+              >
+                {`V${idx + 1}`}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {editor && userVersion && (
+        <TetronsToolbar editor={editor} version={userVersion} />
+      )}
+
+      <div
+        ref={wrapperRef}
+        className="editor-content-wrapper"
+        onClick={handleEditorClick}
+      >
+        {editor ? (
+          <>
+            <TiptapEditorContent editor={editor} />
+            {editor && <TableContextMenu editor={editor} />}
+          </>
+        ) : (
+          <div className="editor-loading">Loading editor...</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/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/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;