tetrons 2.2.2 → 2.2.3

package/dist/styles/styles/tetrons.css

@@ -0,0 +1,371 @@
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.editor-toolbar {
+  padding: 0.5rem;
+  border-bottom: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.editor-save-btn {
+  padding: 0.25rem 0.75rem;
+  background-color: #2563eb;
+  color: white;
+  border-radius: 0.375rem;
+  transition: background-color 0.2s;
+}
+
+.editor-save-btn:hover {
+  background-color: #1d4ed8;
+}
+
+.editor-save-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.editor-version-btn {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #d1d5db;
+  color: #374151;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  transition: all 0.2s;
+  background: none;
+}
+
+.editor-version-btn:hover {
+  border-color: #4b5563;
+}
+
+.editor-version-btn.active {
+  border-color: #2563eb;
+  color: #2563eb;
+  font-weight: 600;
+}
+
+.editor-content-wrapper {
+  flex-grow: 1;
+  padding: 1.5rem;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  overflow: auto;
+  position: relative;
+  min-height: 0;
+}
+
+.editor-loading {
+  color: #6b7280;
+  font-size: 0.875rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.editor-content-wrapper .ProseMirror {
+  outline: none;
+  min-height: 300px;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.editor-content-wrapper .ProseMirror[data-placeholder]:empty::before {
+  content: attr(data-placeholder);
+  color: #9ca3af;
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.ProseMirror pre {
+  background: #f3f4f6;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+  overflow-x: auto;
+}
+
+.editor-versions-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+.editor-no-versions {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.tetrons-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  position: relative;
+  z-index: 10;
+}
+
+.tetrons-toolbar .group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.tetrons-toolbar input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tetrons-toolbar label {
+  font-size: 0.875rem;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.misc-group {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.list-align-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+  align-items: center;
+}
+
+.insert-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+  position: relative;
+  align-items: center;
+}
+
+.table-grid-popup {
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  z-index: 20;
+}
+
+.table-grid {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 1px;
+}
+
+.table-grid-cell {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1px solid #d1d5db;
+  background-color: #f3f4f6;
+  cursor: pointer;
+}
+
+.table-grid-cell.selected {
+  background-color: #3b82f6;
+}
+
+.table-grid-label {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  text-align: center;
+  color: #6b7280;
+}
+
+.hidden-input {
+  display: none;
+}
+
+.emoji-picker {
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  z-index: 50;
+}
+
+.font-style-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+  align-items: center;
+}
+
+.font-style-group select {
+  font-size: 0.875rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  margin-right: 0.5rem;
+}
+
+.color-label {
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.color-indicator {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 4px;
+  background-color: var(--indicator-color, #000000);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+.color-label input[type="color"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.file-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.file-group input[type="file"] {
+  display: none;
+}
+
+.clipboard-group {
+  display: flex;
+  gap: 0.25rem;
+  border-right: 1px solid #e5e7eb;
+  padding-right: 0.75rem;
+}
+
+.action-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.export-button {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+}
+
+.export-button:hover {
+  background-color: #f3f4f6;
+}
+
+.export-button:focus {
+  outline: none;
+}
+
+.export-dropdown {
+  position: absolute;
+  z-index: 10;
+  margin-top: 0.5rem;
+  width: 10rem;
+  background-color: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.export-dropdown button {
+  width: 100%;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  background: none;
+  border: none;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.export-dropdown button:hover {
+  background-color: #f3f4f6;
+}
+
+.toolbar-button {
+  padding: 0.5rem;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.toolbar-button:hover {
+  background-color: #e5e7eb;
+}
+
+.toolbar-button.active {
+  background-color: #d1d5db;
+}
+
+.toolbar-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.tableWrapper table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableWrapper th,
+.tableWrapper td {
+  border: 1px solid #d1d5db;
+  padding: 0.5rem;
+  text-align: left;
+}

package/dist/styles/tetrons.css

@@ -327,3 +327,45 @@
 .export-dropdown button:hover {
   background-color: #f3f4f6;
 }
+
+.toolbar-button {
+  padding: 0.5rem;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.toolbar-button:hover {
+  background-color: #e5e7eb;
+}
+
+.toolbar-button.active {
+  background-color: #d1d5db;
+}
+
+.toolbar-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.tableWrapper table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.tableWrapper th,
+.tableWrapper td {
+  border: 1px solid #d1d5db;
+  padding: 0.5rem;
+  text-align: left;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "tetrons",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "A Next.js project written in TypeScript",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "next dev --turbo",
-    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist",
+    "build": "tsup src/index.ts --format esm,cjs --dts --out-dir dist && copyfiles -u 1 src/styles/*.css dist/styles",
     "start": "next start",
     "lint": "next lint"
   },
@@ -42,6 +42,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "copyfiles": "^2.4.1",
     "eslint": "^9",
     "eslint-config-next": "^15.3.2",
     "tailwindcss": "^4",
@@ -65,7 +66,8 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./style.css": "./dist/styles/tetrons.css"
   },
   "files": [
     "dist",

package/dist/app/page.jsx

@@ -1,9 +0,0 @@
-import EditorContent from "../components/tetrons/EditorContent";
-import "../styles/tetrons.css";
-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/tetrons/toolbar/ClipboardGroup.jsx

@@ -1,36 +0,0 @@
-import { MdContentPaste, MdContentCut, MdContentCopy, MdFormatPaint, } from "react-icons/md";
-import React from "react";
-import ToolbarButton from "./ToolbarButton";
-export default function ClipboardGroup({ editor }) {
-    return (<div className="clipboard-group">
-      <ToolbarButton icon={MdContentPaste} title="Paste" onClick={async () => {
-            try {
-                const text = await navigator.clipboard.readText();
-                editor.chain().focus().insertContent(text).run();
-            }
-            catch (error) {
-                console.error("Failed to read clipboard contents:", error);
-            }
-        }}/>
-      <ToolbarButton icon={MdContentCut} title="Cut" onClick={() => {
-            const { from, to } = editor.state.selection;
-            if (from === to)
-                return;
-            const selectedText = editor.state.doc.textBetween(from, to);
-            navigator.clipboard.writeText(selectedText).then(() => {
-                editor.chain().focus().deleteRange({ from, to }).run();
-            });
-        }}/>
-      <ToolbarButton icon={MdContentCopy} title="Copy" onClick={() => {
-            const { from, to } = editor.state.selection;
-            if (from === to)
-                return;
-            const selectedText = editor.state.doc.textBetween(from, to);
-            navigator.clipboard.writeText(selectedText);
-        }}/>
-      <ToolbarButton icon={MdFormatPaint} title="Format Painter" onClick={() => {
-            const currentMarks = editor.getAttributes("textStyle");
-            localStorage.setItem("formatPainter", JSON.stringify(currentMarks));
-        }}/>
-    </div>);
-}

package/dist/components/tetrons/toolbar/FontStyleGroup.jsx

@@ -1,104 +0,0 @@
-"use client";
-import { MdFormatBold, MdFormatItalic, MdFormatUnderlined, MdStrikethroughS, MdSubscript, MdSuperscript, MdFormatClear, MdFormatPaint, } from "react-icons/md";
-import { ImTextColor } from "react-icons/im";
-import { BiSolidColorFill } from "react-icons/bi";
-import ToolbarButton from "./ToolbarButton";
-import React, { useEffect, useState } from "react";
-export default function FontStyleGroup({ editor }) {
-    const [textColor, setTextColor] = useState("#000000");
-    const [highlightColor, setHighlightColor] = useState("#ffff00");
-    const [fontFamily, setFontFamily] = useState("Arial");
-    const [fontSize, setFontSize] = useState("16px");
-    useEffect(() => {
-        if (!editor)
-            return;
-        const updateStates = () => {
-            var _a, _b, _c;
-            const highlight = editor.getAttributes("highlight");
-            setHighlightColor((highlight === null || highlight === void 0 ? void 0 : highlight.color) || "#ffff00");
-            const color = (_a = editor.getAttributes("textStyle")) === null || _a === void 0 ? void 0 : _a.color;
-            setTextColor(color || "#000000");
-            const fontAttr = ((_b = editor.getAttributes("fontFamily")) === null || _b === void 0 ? void 0 : _b.font) || "Arial";
-            setFontFamily(fontAttr);
-            const sizeAttr = ((_c = editor.getAttributes("fontSize")) === null || _c === void 0 ? void 0 : _c.size) || "16px";
-            setFontSize(sizeAttr);
-        };
-        updateStates();
-        editor.on("selectionUpdate", updateStates);
-        editor.on("transaction", updateStates);
-        return () => {
-            editor.off("selectionUpdate", updateStates);
-            editor.off("transaction", updateStates);
-        };
-    }, [editor]);
-    return (<div className="font-style-group">
-      <select title="Font Family" value={fontFamily} onChange={(e) => {
-            const value = e.target.value;
-            setFontFamily(value);
-            editor.chain().focus().setFontFamily(value).run();
-        }}>
-        <option value="Arial">Arial</option>
-        <option value="Georgia">Georgia</option>
-        <option value="Times New Roman">Times New Roman</option>
-        <option value="Courier New">Courier New</option>
-        <option value="Verdana">Verdana</option>
-      </select>
-
-      <select title="Font Size" value={fontSize} onChange={(e) => {
-            const value = e.target.value;
-            setFontSize(value);
-            editor.chain().focus().setFontSize(value).run();
-        }}>
-        <option value="12px">12</option>
-        <option value="14px">14</option>
-        <option value="16px">16</option>
-        <option value="18px">18</option>
-        <option value="24px">24</option>
-        <option value="36px">36</option>
-        <option value="48px">48</option>
-        <option value="64px">64</option>
-        <option value="72px">72</option>
-      </select>
-
-      <ToolbarButton icon={MdFormatBold} label="Bold" onClick={() => editor.chain().focus().toggleBold().run()} isActive={editor.isActive("bold")}/>
-      <ToolbarButton icon={MdFormatItalic} label="Italic" onClick={() => editor.chain().focus().toggleItalic().run()} isActive={editor.isActive("italic")}/>
-      <ToolbarButton icon={MdFormatUnderlined} label="Underline" onClick={() => editor.chain().focus().toggleUnderline().run()} isActive={editor.isActive("underline")}/>
-      <ToolbarButton icon={MdStrikethroughS} label="Strikethrough" onClick={() => editor.chain().focus().toggleStrike().run()} isActive={editor.isActive("strike")}/>
-      <ToolbarButton icon={MdSubscript} label="Subscript" onClick={() => editor.chain().focus().toggleSubscript().run()} isActive={editor.isActive("subscript")}/>
-      <ToolbarButton icon={MdSuperscript} label="Superscript" onClick={() => editor.chain().focus().toggleSuperscript().run()} isActive={editor.isActive("superscript")}/>
-
-      <label title="Font Color" aria-label="Font Color" className="color-label" style={{ "--indicator-color": textColor }}>
-        <ImTextColor size={20}/>
-        <div className="color-indicator"/>
-        <input type="color" value={textColor} onChange={(e) => {
-            const color = e.target.value;
-            setTextColor(color);
-            editor.chain().focus().setColor(color).run();
-        }}/>
-      </label>
-
-      <label title="Highlight Color" aria-label="Highlight Color" className="color-label" style={{ "--indicator-color": highlightColor }}>
-        <BiSolidColorFill size={20}/>
-        <div className="color-indicator"/>
-        <input type="color" value={highlightColor} onChange={(e) => {
-            const color = e.target.value;
-            setHighlightColor(color);
-            editor.chain().focus().setHighlight({ color }).run();
-        }}/>
-      </label>
-
-      <ToolbarButton icon={MdFormatClear} label="Clear Formatting" onClick={() => editor.chain().focus().unsetAllMarks().run()}/>
-      <ToolbarButton icon={MdFormatPaint} label="Apply Painter Format" onClick={() => {
-            const format = JSON.parse(localStorage.getItem("formatPainter") || "{}");
-            if (format.color)
-                editor.chain().focus().setColor(format.color).run();
-            if (format.backgroundColor) {
-                editor
-                    .chain()
-                    .focus()
-                    .setHighlight({ color: format.backgroundColor })
-                    .run();
-            }
-        }}/>
-    </div>);
-}