@shadospace/editor 1.0.0

package/README.md

@@ -0,0 +1,21 @@
+# Next.js template
+
+This is a Next.js template with shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button";
+```

package/components/editor/index.tsx

@@ -0,0 +1,67 @@
+"use client"
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Image from "@tiptap/extension-image"
+import { TableKit } from "@tiptap/extension-table"
+import { TextStyleKit } from "@tiptap/extension-text-style"
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"
+import css from "highlight.js/lib/languages/css"
+import js from "highlight.js/lib/languages/javascript"
+import ts from "highlight.js/lib/languages/typescript"
+import html from "highlight.js/lib/languages/xml"
+import { MenuBar } from "./menu-bar"
+import { cn } from "@/lib/utils"
+
+import { all, createLowlight } from "lowlight"
+const lowlight = createLowlight(all)
+
+lowlight.register("html", html)
+lowlight.register("css", css)
+lowlight.register("js", js)
+lowlight.register("ts", ts)
+
+export default function Editor({
+  content,
+  onChange,
+  readonly,
+}: {
+  content?: string
+  onChange?: (content: string) => void
+  readonly?: boolean
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      TextStyleKit,
+      Image,
+      TableKit,
+      CodeBlockLowlight.configure({ lowlight }),
+    ],
+    editorProps: {
+      attributes: {
+        class: "max-w-none min-h-64 w-full outline-none",
+      },
+    },
+    content,
+    immediatelyRender: false,
+    editable: !readonly,
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getHTML())
+    },
+  })
+
+  return (
+    <div>
+      {!readonly && editor && (
+        <div className="sticky top-17 z-50 px-4 sm:px-0">
+          <MenuBar editor={editor} />
+        </div>
+      )}
+      <div className="px-4 sm:px-0">
+        <div className={cn(!readonly && "border p-4")}>
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/editor/menu-bar.tsx

@@ -0,0 +1,190 @@
+import type { Editor } from "@tiptap/core"
+import { useEditorState } from "@tiptap/react"
+
+import { menuBarStateSelector } from "./menubar-state"
+import {
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  List,
+  ListOrdered,
+  Minus,
+  Pilcrow,
+  Quote,
+  Redo2,
+  SquareCode,
+  Strikethrough,
+  TextWrap,
+  Undo2,
+} from "lucide-react"
+import { Button } from "../ui/button"
+
+export const MenuBar = ({ editor }: { editor: Editor }) => {
+  const editorState = useEditorState({
+    editor,
+    selector: menuBarStateSelector,
+  })
+
+  return (
+    <div>
+      <div className="overflow-x-auto border bg-card">
+        <div className="flex w-max items-center p-2">
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            aria-label="Toggle H1"
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 1 }).run()
+            }
+            disabled={editorState.isHeading1}
+          >
+            <Heading1 />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            aria-label="Toggle H2"
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 2 }).run()
+            }
+            disabled={editorState.isHeading2}
+          >
+            <Heading2 />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() =>
+              editor.chain().focus().toggleHeading({ level: 3 }).run()
+            }
+            disabled={editorState.isHeading3}
+          >
+            <Heading3 />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleBold().run()}
+            disabled={!editorState.canBold}
+          >
+            <Bold />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+            disabled={!editorState.canItalic}
+          >
+            <Italic />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+            disabled={!editorState.canStrike}
+          >
+            <Strikethrough />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleCode().run()}
+            disabled={!editorState.canCode}
+          >
+            <Code />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().setParagraph().run()}
+            disabled={editorState.isParagraph}
+          >
+            <Pilcrow />
+          </Button>
+
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleBulletList().run()}
+            disabled={editorState.isBulletList}
+          >
+            <List />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            disabled={editorState.isOrderedList}
+          >
+            <ListOrdered />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            disabled={editorState.isCodeBlock}
+          >
+            <SquareCode />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            disabled={editorState.isBlockquote}
+          >
+            <Quote />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().setHorizontalRule().run()}
+          >
+            <Minus />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().setHardBreak().run()}
+          >
+            <TextWrap />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={!editorState.canUndo}
+          >
+            <Undo2 />
+          </Button>
+          <Button
+            type="button"
+            variant={"ghost"}
+            size={"icon"}
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={!editorState.canRedo}
+          >
+            <Redo2 />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/editor/menubar-state.tsx

@@ -0,0 +1,42 @@
+import type { Editor } from "@tiptap/core"
+import type { EditorStateSnapshot } from "@tiptap/react"
+
+/**
+ * State selector for the MenuBar component.
+ * Extracts the relevant editor state for rendering menu buttons.
+ */
+export function menuBarStateSelector(ctx: EditorStateSnapshot<Editor>) {
+  return {
+    // Text formatting
+    isBold: ctx.editor.isActive("bold") ?? false,
+    canBold: ctx.editor.can().chain().toggleBold().run() ?? false,
+    isItalic: ctx.editor.isActive("italic") ?? false,
+    canItalic: ctx.editor.can().chain().toggleItalic().run() ?? false,
+    isStrike: ctx.editor.isActive("strike") ?? false,
+    canStrike: ctx.editor.can().chain().toggleStrike().run() ?? false,
+    isCode: ctx.editor.isActive("code") ?? false,
+    canCode: ctx.editor.can().chain().toggleCode().run() ?? false,
+    canClearMarks: ctx.editor.can().chain().unsetAllMarks().run() ?? false,
+
+    // Block types
+    isParagraph: ctx.editor.isActive("paragraph") ?? false,
+    isHeading1: ctx.editor.isActive("heading", { level: 1 }) ?? false,
+    isHeading2: ctx.editor.isActive("heading", { level: 2 }) ?? false,
+    isHeading3: ctx.editor.isActive("heading", { level: 3 }) ?? false,
+    isHeading4: ctx.editor.isActive("heading", { level: 4 }) ?? false,
+    isHeading5: ctx.editor.isActive("heading", { level: 5 }) ?? false,
+    isHeading6: ctx.editor.isActive("heading", { level: 6 }) ?? false,
+
+    // Lists and blocks
+    isBulletList: ctx.editor.isActive("bulletList") ?? false,
+    isOrderedList: ctx.editor.isActive("orderedList") ?? false,
+    isCodeBlock: ctx.editor.isActive("codeBlock") ?? false,
+    isBlockquote: ctx.editor.isActive("blockquote") ?? false,
+
+    // History
+    canUndo: ctx.editor.can().chain().undo().run() ?? false,
+    canRedo: ctx.editor.can().chain().redo().run() ?? false,
+  }
+}
+
+export type MenuBarState = ReturnType<typeof menuBarStateSelector>

package/components/editor/styles.css

@@ -0,0 +1,102 @@
+.tiptap {
+  p {
+    @apply my-4 text-base first:mt-0 last:mb-0;
+  }
+
+  h1 {
+    @apply mt-8 mb-4 text-3xl font-bold first:mt-0 last:mb-0;
+  }
+
+  h2 {
+    @apply mt-8 mb-4 text-2xl font-semibold first:mt-0 last:mb-0;
+  }
+
+  h3 {
+    @apply mt-8 mb-4 text-xl font-medium first:mt-0 last:mb-0;
+  }
+
+  a {
+    @apply text-red-400 underline underline-offset-2;
+  }
+
+  blockquote {
+    @apply my-6 border-l-4 border-primary pl-4 italic;
+  }
+
+  ul,
+  ol {
+    @apply my-4 ml-6 list-disc pl-1;
+  }
+
+  li {
+    @apply my-1;
+  }
+
+  img {
+    @apply my-6 max-w-full;
+  }
+
+  hr {
+    @apply my-8 border-border;
+  }
+  pre {
+    @apply my-6 overflow-x-auto overflow-y-clip bg-card/50 p-4 font-mono text-sm text-foreground;
+
+    code {
+      @apply whitespace-pre-wrap;
+    }
+
+    /* Code styling */
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@shadospace/editor",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "files": [
+    "scripts/init.js",
+    "components/editor"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "postinstall": "bun scripts/init.js"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@neondatabase/serverless": "^1.1.0",
+    "@tiptap/extension-code-block-lowlight": "^3.23.1",
+    "@tiptap/extension-image": "^3.23.1",
+    "@tiptap/extension-table": "^3.23.1",
+    "@tiptap/extension-text-style": "^3.23.1",
+    "@tiptap/pm": "^3.23.1",
+    "@tiptap/react": "^3.23.1",
+    "@tiptap/starter-kit": "^3.23.1",
+    "better-auth": "^1.6.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.4.2",
+    "drizzle-orm": "^0.45.2",
+    "lucide-react": "^1.14.0",
+    "next": "16.1.7",
+    "next-themes": "^0.4.6",
+    "pg": "^8.20.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.75.0",
+    "shadcn": "^4.7.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.5.0",
+    "@types/pg": "^8.20.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "drizzle-kit": "^0.31.10",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "16.1.7",
+    "postcss": "^8",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "^4.2.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}

package/scripts/init.js

@@ -0,0 +1,88 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Target directory (where the user is installing the package)
+// INIT_CWD is set by npm/yarn/pnpm/bun during postinstall
+const targetDir = process.env.INIT_CWD || process.cwd();
+
+console.log(`[tiptap-starter] Initializing in ${targetDir}`);
+
+const sourceEditorDir = path.join(__dirname, '../components/editor');
+
+// Detect if target project uses src directory
+const hasSrc = fs.existsSync(path.join(targetDir, 'src'));
+const baseTargetDir = hasSrc ? path.join(targetDir, 'src') : targetDir;
+
+const targetEditorDir = path.join(baseTargetDir, 'components/editor');
+
+// Function to copy files
+function copyFile(src, dest) {
+  if (fs.existsSync(dest)) {
+    console.log(`[tiptap-starter] ${path.basename(dest)} already exists, skipping.`);
+    return;
+  }
+  fs.mkdirSync(path.dirname(dest), { recursive: true });
+  fs.copyFileSync(src, dest);
+  console.log(`[tiptap-starter] Created ${dest}`);
+}
+
+// Files to copy
+const files = [
+  'index.tsx',
+  'menu-bar.tsx',
+  'menubar-state.tsx',
+  'styles.css'
+];
+
+try {
+  // Check if source files exist
+  files.forEach(file => {
+    const src = path.join(sourceEditorDir, file);
+    const dest = path.join(targetEditorDir, file);
+    if (fs.existsSync(src)) {
+      copyFile(src, dest);
+    } else {
+      console.error(`[tiptap-starter] Source file missing: ${src}`);
+    }
+  });
+
+  // Update globals.css
+  const possiblePaths = [
+    path.join(targetDir, 'app/globals.css'),
+    path.join(targetDir, 'src/app/globals.css'),
+    path.join(targetDir, 'styles/globals.css')
+  ];
+
+  let globalsCssPath = possiblePaths.find(p => fs.existsSync(p));
+
+  if (globalsCssPath) {
+    const content = fs.readFileSync(globalsCssPath, 'utf8');
+    const importStatement = `@import "../components/editor/styles.css";`;
+    
+    if (!content.includes(importStatement)) {
+      const lines = content.split('\n');
+      let insertIndex = 0;
+      for (let i = 0; i < lines.length; i++) {
+        if (lines[i].startsWith('@import')) {
+          insertIndex = i + 1;
+        } else if (lines[i].trim() !== '') {
+          break;
+        }
+      }
+      lines.splice(insertIndex, 0, importStatement);
+      fs.writeFileSync(globalsCssPath, lines.join('\n'));
+      console.log(`[tiptap-starter] Referenced styles in ${globalsCssPath}`);
+    } else {
+      console.log(`[tiptap-starter] Styles already referenced in ${globalsCssPath}`);
+    }
+  } else {
+    console.warn(`[tiptap-starter] globals.css not found. Please add \`@import "../components/editor/styles.css";\` manually to your CSS file.`);
+  }
+
+} catch (error) {
+  console.error(`[tiptap-starter] Error during initialization:`, error);
+}