npm - tetrons - Versions diffs - 0.1.0 - Mend

tetrons 0.1.0

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

package/.hintrc +13 -0
package/README.md +36 -0
package/eslint.config.mjs +16 -0
package/next.config.ts +7 -0
package/package.json +61 -0
package/postcss.config.mjs +5 -0
package/public/editor-content.json +27 -0
package/public/favicon-16x16.png +0 -0
package/public/favicon-32x32.png +0 -0
package/public/favicon-64x64.png +0 -0
package/public/favicon-768x768.png +0 -0
package/public/file.svg +1 -0
package/public/globe.svg +1 -0
package/public/next.svg +1 -0
package/public/site.webmanifest +20 -0
package/public/vercel.svg +1 -0
package/public/window.svg +1 -0
package/src/app/api/export/route.ts +0 -0
package/src/app/api/save/route.ts +18 -0
package/src/app/favicon-16x16.png +0 -0
package/src/app/favicon-32x32.png +0 -0
package/src/app/favicon-64x64.png +0 -0
package/src/app/favicon-768x768.png +0 -0
package/src/app/favicon.ico +0 -0
package/src/app/globals.css +207 -0
package/src/app/layout.tsx +47 -0
package/src/app/page.tsx +11 -0
package/src/components/UI/Button.tsx +0 -0
package/src/components/UI/Dropdown.tsx +0 -0
package/src/components/tetrons/EditorContent.tsx +210 -0
package/src/components/tetrons/ResizableImage.ts +39 -0
package/src/components/tetrons/ResizableImageComponent.tsx +77 -0
package/src/components/tetrons/ResizableVideo.ts +66 -0
package/src/components/tetrons/ResizableVideoComponent.tsx +56 -0
package/src/components/tetrons/helpers.ts +0 -0
package/src/components/tetrons/toolbar/ActionGroup.tsx +222 -0
package/src/components/tetrons/toolbar/ClipboardGroup.tsx +57 -0
package/src/components/tetrons/toolbar/FileGroup.tsx +70 -0
package/src/components/tetrons/toolbar/FontStyleGroup.tsx +198 -0
package/src/components/tetrons/toolbar/InsertGroup.tsx +268 -0
package/src/components/tetrons/toolbar/ListAlignGroup.tsx +69 -0
package/src/components/tetrons/toolbar/MiscGroup.tsx +70 -0
package/src/components/tetrons/toolbar/TableContextMenu.tsx +91 -0
package/src/components/tetrons/toolbar/TetronsToolbar.tsx +60 -0
package/src/components/tetrons/toolbar/ToolbarButton.tsx +38 -0
package/src/components/tetrons/toolbar/extensions/Comment.ts +72 -0
package/src/components/tetrons/toolbar/extensions/Embed.ts +113 -0
package/src/components/tetrons/toolbar/extensions/FontFamily.ts +43 -0
package/src/components/tetrons/toolbar/extensions/FontSize.ts +43 -0
package/src/components/tetrons/toolbar/extensions/ResizableTable.ts +16 -0
package/src/components/tetrons/toolbar/marks/Subscript.ts +45 -0
package/src/components/tetrons/toolbar/marks/Superscript.ts +45 -0
package/src/index.ts +3 -0
package/src/lib/export.ts +0 -0
package/src/lib/tiptap-extensions.ts +0 -0
package/src/types/dom-to-pdf.d.ts +13 -0
package/src/types/editor.d.ts +0 -0
package/src/types/emoji-picker.d.ts +18 -0
package/src/types/global.d.ts +6 -0
package/src/types/html2pdf.d.ts +1 -0
package/src/types/tiptap-extensions.d.ts +23 -0
package/src/utils/loadEmojiPicker.ts +12 -0
package/tsconfig.json +41 -0

package/src/components/tetrons/toolbar/MiscGroup.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import {
+  MdUndo,
+  MdRedo,
+  MdRefresh,
+  MdVisibility,
+  MdCode,
+} from "react-icons/md";
+import { Editor } from "@tiptap/react";
+import ToolbarButton from "./ToolbarButton";
+interface MiscGroupProps {
+  editor: Editor;
+}
+export default function MiscGroup({ editor }: MiscGroupProps) {
+  const handlePreview = () => {
+    const html = editor.getHTML();
+    const previewWindow = window.open("", "_blank");
+    if (previewWindow) {
+      previewWindow.document.open();
+      previewWindow.document.write(`
+        <html>
+          <head>
+            <title>Preview</title>
+            <style>
+              body { font-family: sans-serif; padding: 2rem; line-height: 1.6; }
+            </style>
+          </head>
+          <body>${html}</body>
+        </html>
+      `);
+      previewWindow.document.close();
+    }
+  };
+  return (
+    <div className="flex gap-1 items-center border-r pr-3">
+      <ToolbarButton
+        icon={MdUndo}
+        label="Undo"
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().undo()}
+      />
+      <ToolbarButton
+        icon={MdRedo}
+        label="Redo"
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().redo()}
+      />
+      <ToolbarButton
+        icon={MdRefresh}
+        label="Reset Formatting"
+        onClick={() =>
+          editor.chain().focus().unsetAllMarks().clearNodes().run()
+        }
+      />
+      <ToolbarButton
+        icon={MdCode}
+        label="Toggle Code Block"
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        isActive={editor.isActive("codeBlock")}
+      />
+      <ToolbarButton
+        icon={MdVisibility}
+        label="Preview"
+        onClick={handlePreview}
+      />
+    </div>
+  );
+}

package/src/components/tetrons/toolbar/TableContextMenu.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+"use client";
+import { 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/src/components/tetrons/toolbar/TetronsToolbar.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+"use client";
+import { useState, useEffect } 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 }: { editor: Editor }) {
+  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="flex flex-wrap items-center gap-4 p-3 border-b bg-white shadow-sm relative z-10">
+      <div className="flex items-center gap-2 border-r pr-3">
+        <input
+          type="checkbox"
+          id="autoSave"
+          checked={autoSave}
+          onChange={(e) => setAutoSave(e.target.checked)}
+          className="w-4 h-4"
+        />
+        <label htmlFor="autoSave" className="text-sm select-none">
+          Auto Save
+        </label>
+      </div>
+      <FileGroup editor={editor} />
+      <ClipboardGroup editor={editor} />
+      <FontStyleGroup editor={editor} />
+      <ListAlignGroup editor={editor} />
+      <InsertGroup editor={editor} />
+      <MiscGroup editor={editor} />
+      <ActionGroup editor={editor} />
+    </div>
+  );
+}

package/src/components/tetrons/toolbar/ToolbarButton.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+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={`p-2 rounded hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${
+          isActive ? "bg-gray-300" : ""
+        }`}
+      >
+        <Icon size={20} />
+      </button>
+    );
+  }
+);
+ToolbarButton.displayName = "ToolbarButton";
+export default ToolbarButton;

package/src/components/tetrons/toolbar/extensions/Comment.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/extensions/Embed.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/extensions/FontFamily.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/extensions/FontSize.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/extensions/ResizableTable.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/marks/Subscript.ts ADDED Viewed

@@ -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/src/components/tetrons/toolbar/marks/Superscript.ts ADDED Viewed

@@ -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/src/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as EditorContent } from "./components/tetrons/EditorContent";
+// import { EditorContent } from "tetrons";

package/src/lib/export.ts ADDED Viewed

File without changes

package/src/lib/tiptap-extensions.ts ADDED Viewed

File without changes

package/src/types/dom-to-pdf.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+declare module "dom-to-pdf" {
+  const domToPdf: (
+    element: HTMLElement,
+    options: {
+      filename?: string;
+      overrideWidth?: number;
+      overrideHeight?: number;
+    },
+    callback?: () => void
+  ) => void;
+  export default domToPdf;
+}

package/src/types/editor.d.ts ADDED Viewed

File without changes

package/src/types/emoji-picker.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import * as React from "react";
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "emoji-picker": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & {
+        "skin-tone-emoji"?: string;
+        "category-order"?: string;
+        class?: string;
+      };
+    }
+  }
+}
+export {};

package/src/types/global.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+declare global {
+    interface Window {
+      EmojiButton?: any;
+    }
+  }
+  export {};

package/src/types/html2pdf.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ declare module "html2pdf.js";