tetrons 2.3.22 → 2.3.24

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

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Editor } from "@tiptap/react";
+
+interface ContextMenuProps {
+  editor: Editor;
+}
+
+export default function TableContextMenu({ editor }: ContextMenuProps) {
+  const [menuPosition, setMenuPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const handleContextMenu = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+
+      if (target.closest("td") || target.closest("th")) {
+        event.preventDefault();
+        setMenuPosition({ x: event.pageX, y: event.pageY });
+      } else {
+        setMenuPosition(null);
+      }
+    };
+
+    const handleClick = () => setMenuPosition(null);
+
+    document.addEventListener("contextmenu", handleContextMenu);
+    document.addEventListener("click", handleClick);
+
+    return () => {
+      document.removeEventListener("contextmenu", handleContextMenu);
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+
+  const insertRowAbove = () => editor.chain().focus().addRowBefore().run();
+  const insertRowBelow = () => editor.chain().focus().addRowAfter().run();
+  const insertColLeft = () => editor.chain().focus().addColumnBefore().run();
+  const insertColRight = () => editor.chain().focus().addColumnAfter().run();
+  const deleteRow = () => editor.chain().focus().deleteRow().run();
+  const deleteCol = () => editor.chain().focus().deleteColumn().run();
+
+  if (!menuPosition) return null;
+
+  return (
+    <ul
+      className="absolute bg-white shadow border rounded text-sm z-50"
+      style={{ top: menuPosition.y, left: menuPosition.x }}
+    >
+      <li
+        className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
+        onClick={insertRowAbove}
+      >
+        Insert Row Above
+      </li>
+      <li
+        className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
+        onClick={insertRowBelow}
+      >
+        Insert Row Below
+      </li>
+      <li
+        className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
+        onClick={insertColLeft}
+      >
+        Insert Column Left
+      </li>
+      <li
+        className="px-3 py-1 hover:bg-gray-100 cursor-pointer"
+        onClick={insertColRight}
+      >
+        Insert Column Right
+      </li>
+      <li
+        className="px-3 py-1 hover:bg-red-100 cursor-pointer"
+        onClick={deleteRow}
+      >
+        Delete Row
+      </li>
+      <li
+        className="px-3 py-1 hover:bg-red-100 cursor-pointer"
+        onClick={deleteCol}
+      >
+        Delete Column
+      </li>
+    </ul>
+  );
+}

package/dist/components/tetrons/toolbar/TetronsToolbar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { Editor } from "@tiptap/react";
+export default function TetronsToolbar({ editor, version, }: {
+    editor: Editor;
+    version: "free" | "pro" | "premium" | "platinum";
+}): React.JSX.Element;

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

@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+
+import ActionGroup from "./ActionGroup";
+import ClipboardGroup from "./ClipboardGroup";
+import FontStyleGroup from "./FontStyleGroup";
+import InsertGroup from "./InsertGroup";
+import ListAlignGroup from "./ListAlignGroup";
+import MiscGroup from "./MiscGroup";
+import FileGroup from "./FileGroup";
+
+export default function TetronsToolbar({
+  editor,
+  version,
+}: {
+  editor: Editor;
+  version: "free" | "pro" | "premium" | "platinum";
+}) {
+  const [autoSave, setAutoSave] = useState(false);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleUpdate = () => {
+      if (!autoSave) return;
+      const content = editor.getJSON();
+      fetch("/api/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(content),
+      }).catch((err) => console.error("Auto-save failed:", err));
+    };
+
+    editor.on("update", handleUpdate);
+    return () => {
+      editor.off("update", handleUpdate);
+    };
+  }, [autoSave, editor]);
+
+  return (
+    <div className="tetrons-toolbar">
+      {version !== "free" && (
+        <div className="group">
+          <input
+            type="checkbox"
+            id="autoSave"
+            checked={autoSave}
+            onChange={(e) => setAutoSave(e.target.checked)}
+          />
+          <label htmlFor="autoSave">Auto Save</label>
+        </div>
+      )}
+
+      {["pro", "premium", "platinum"].includes(version) && (
+        <FileGroup editor={editor} />
+      )}
+      <ClipboardGroup editor={editor} />
+      <FontStyleGroup editor={editor} />
+      <ListAlignGroup editor={editor} />
+      {["premium", "platinum"].includes(version) && (
+        <>
+          <InsertGroup editor={editor} />
+          <ActionGroup editor={editor} />
+        </>
+      )}
+      {version === "platinum" && <MiscGroup editor={editor} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import React from "react";
+import type { IconType } from "react-icons";
+
+export type ToolbarButtonProps = {
+  icon: IconType;
+  onClick: () => void;
+  disabled?: boolean;
+  title?: string;
+  label?: string;
+  isActive?: boolean;
+};
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  (
+    { icon: Icon, onClick, disabled = false, title, label, isActive = false },
+    ref
+  ) => {
+    return (
+      <button
+        type="button"
+        ref={ref}
+        onClick={onClick}
+        disabled={disabled}
+        title={title ?? label}
+        aria-label={title ?? label}
+        className={`toolbar-button ${isActive ? "active" : ""}`}
+      >
+        <Icon size={20} />
+      </button>
+    );
+  }
+);
+
+ToolbarButton.displayName = "ToolbarButton";
+
+export default ToolbarButton;

package/dist/components/tetrons/toolbar/extensions/Comment.ts

@@ -0,0 +1,72 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+export interface CommentOptions {
+  HTMLAttributes: {
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  };
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    comment: {
+      setComment: (comment: string) => ReturnType;
+      unsetComment: () => ReturnType;
+    };
+  }
+}
+
+export const Comment = Mark.create<CommentOptions>({
+  name: "comment",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      comment: {
+        default: "",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-comment]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        "data-comment": HTMLAttributes.comment,
+        class: "comment-highlight",
+        title: HTMLAttributes.comment,
+        style: "background-color: rgba(255, 230, 0, 0.3);",
+      }),
+      0,
+    ];
+  },
+
+  addCommands() {
+    return {
+      setComment:
+        (comment) =>
+        ({ commands }) => {
+          return commands.setMark(this.name, { comment });
+        },
+      unsetComment:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/Embed.ts

@@ -0,0 +1,113 @@
+import { Node, mergeAttributes, CommandProps } from "@tiptap/core";
+
+export const Embed = Node.create({
+  name: "embed",
+  group: "block",
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      width: { default: 560 },
+      height: { default: 315 },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "iframe[src]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["iframe", mergeAttributes(HTMLAttributes)];
+  },
+
+  addCommands() {
+    return {
+      setEmbed: ((attributes: {
+        src: string;
+        width?: number;
+        height?: number;
+      }) => {
+        return ({ chain }: CommandProps): boolean => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: attributes,
+            })
+            .run();
+        };
+      }).bind(this),
+    };
+  },
+
+  addNodeView() {
+    return ({ node, getPos, editor }) => {
+      const container = document.createElement('div');
+      container.style.position = 'relative';
+      container.style.display = 'inline-block';
+      container.style.width = node.attrs.width + 'px';
+      container.style.height = node.attrs.height + 'px';
+  
+      const iframe = document.createElement('iframe');
+      iframe.setAttribute('src', node.attrs.src);
+      iframe.setAttribute('frameborder', '0');
+      iframe.setAttribute('allowfullscreen', 'true');
+      iframe.style.width = '100%';
+      iframe.style.height = '100%';
+      container.appendChild(iframe);
+  
+      const handle = document.createElement('div');
+      handle.style.position = 'absolute';
+      handle.style.width = '16px';
+      handle.style.height = '16px';
+      handle.style.right = '0';
+      handle.style.bottom = '0';
+      handle.style.cursor = 'se-resize';
+      handle.style.background = 'rgba(0,0,0,0.5)';
+      handle.style.borderRadius = '2px';
+      container.appendChild(handle);
+  
+      let startX: number, startY: number, startWidth: number, startHeight: number;
+  
+      const onMouseDown = (event: MouseEvent) => {
+        event.preventDefault();
+        startX = event.clientX;
+        startY = event.clientY;
+        startWidth = container.offsetWidth;
+        startHeight = container.offsetHeight;
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+      };
+  
+      const onMouseMove = (event: MouseEvent) => {
+        const newWidth = Math.max(100, startWidth + (event.clientX - startX));
+        const newHeight = Math.max(100, startHeight + (event.clientY - startY));
+        container.style.width = newWidth + 'px';
+        container.style.height = newHeight + 'px';
+      };
+  
+      const onMouseUp = () => {
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+
+        editor.commands.command(({ tr }) => {
+          tr.setNodeMarkup(getPos(), undefined, {
+            ...node.attrs,
+            width: container.offsetWidth,
+            height: container.offsetHeight,
+          });
+          return true;
+        });
+      };      
+  
+      handle.addEventListener('mousedown', onMouseDown);
+  
+      return {
+        dom: container,
+        destroy() {
+          handle.removeEventListener('mousedown', onMouseDown);
+        }
+      };
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/FontFamily.ts

@@ -0,0 +1,43 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontFamily: {
+      setFontFamily: (font: string) => ReturnType;
+    };
+  }
+}
+
+export const FontFamily = Mark.create({
+  name: 'fontFamily',
+
+  addAttributes() {
+    return {
+      font: {
+        default: null,
+        parseHTML: element => element.style.fontFamily.replace(/['"]/g, ''),
+        renderHTML: attributes => {
+          if (!attributes.font) return {};
+          return { style: `font-family: ${attributes.font}` };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ style: 'font-family' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setFontFamily:
+        font =>
+        ({ commands }) =>
+          commands.setMark(this.name, { font }),
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/FontSize.ts

@@ -0,0 +1,43 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    fontSize: {
+      setFontSize: (size: string) => ReturnType;
+    };
+  }
+}
+
+export const FontSize = Mark.create({
+  name: "fontSize",
+
+  addAttributes() {
+    return {
+      size: {
+        default: null,
+        parseHTML: (element) => element.style.fontSize,
+        renderHTML: (attributes) => {
+          if (!attributes.size) return {};
+          return { style: `font-size: ${attributes.size}` };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ style: "font-size" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setFontSize:
+        (size) =>
+        ({ commands }) =>
+          commands.setMark(this.name, { size }),
+    };
+  },
+});

package/dist/components/tetrons/toolbar/extensions/ResizableTable.ts

@@ -0,0 +1,16 @@
+import { Table } from "@tiptap/extension-table";
+import { columnResizing, tableEditing } from "prosemirror-tables";
+import { Plugin } from "prosemirror-state";
+
+export const ResizableTable = Table.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      resizable: true,
+    };
+  },
+
+  addProseMirrorPlugins(): Plugin[] {
+    return [columnResizing({ handleWidth: 5 }), tableEditing()];
+  },
+});

package/dist/components/tetrons/toolbar/marks/Subscript.ts

@@ -0,0 +1,45 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+
+export const Subscript = Mark.create({
+  name: "subscript",
+
+  excludes: "superscript",
+
+  parseHTML() {
+    return [{ tag: "sub" }, { style: "vertical-align: sub" }];
+  },
+
+  renderHTML() {
+    return ["sub", 0];
+  },
+
+  addCommands() {
+    return {
+      toggleSubscript:
+        () =>
+        ({ chain }) =>
+          chain()
+            .unsetMark("superscript")
+            .toggleMark(this.name)
+            .run(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: /~([^~]+)~/,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: /~([^~]+)~/g,
+        type: this.type,
+      }),
+    ];
+  },
+});

package/dist/components/tetrons/toolbar/marks/Superscript.ts

@@ -0,0 +1,45 @@
+import { Mark, markInputRule, markPasteRule } from "@tiptap/core";
+
+export const Superscript = Mark.create({
+  name: "superscript",
+
+  excludes: "subscript",
+
+  parseHTML() {
+    return [{ tag: "sup" }, { style: "vertical-align: super" }];
+  },
+
+  renderHTML() {
+    return ["sup", 0];
+  },
+
+  addCommands() {
+    return {
+      toggleSuperscript:
+        () =>
+        ({ chain }) =>
+          chain()
+            .unsetMark("subscript")
+            .toggleMark(this.name)
+            .run(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: /\^([^^]+)\^/,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: /\^([^^]+)\^/g,
+        type: this.type,
+      }),
+    ];
+  },
+});

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import EditorContent from "./components/tetrons/EditorContent";
 export declare function initializeTetrons(apiKey: string): Promise<void>;
-export declare function getTetronsVersion(): "" | "free" | "pro" | "premium" | "platinum";
+export declare function getTetronsVersion(): "" | "platinum" | "free" | "pro" | "premium";
 export declare function isApiKeyValid(): boolean;
 export { EditorContent };
 export default EditorContent;