@actuate-media/cms-admin 0.1.3 → 0.2.0

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextValue {
+  theme: Theme;
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'system',
+  resolvedTheme: 'light',
+  setTheme: () => {},
+});
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function resolveTheme(theme: Theme): 'light' | 'dark' {
+  return theme === 'system' ? getSystemTheme() : theme;
+}
+
+const STORAGE_KEY = 'actuate-theme';
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  /** When true, default to dark mode if the user hasn't explicitly chosen a theme. */
+  defaultDarkMode?: boolean;
+}
+
+export function ThemeProvider({ children, defaultDarkMode }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>('system');
+  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+    let initial: Theme;
+    if (stored && ['light', 'dark', 'system'].includes(stored)) {
+      initial = stored;
+    } else if (defaultDarkMode === true) {
+      initial = 'dark';
+    } else if (defaultDarkMode === false) {
+      initial = 'light';
+    } else {
+      initial = 'system';
+    }
+    setThemeState(initial);
+    const resolved = resolveTheme(initial);
+    setResolvedTheme(resolved);
+    applyTheme(resolved);
+  }, [defaultDarkMode]);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      if (theme === 'system') {
+        const resolved = getSystemTheme();
+        setResolvedTheme(resolved);
+        applyTheme(resolved);
+      }
+    };
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [theme]);
+
+  const setTheme = useCallback((next: Theme) => {
+    setThemeState(next);
+    localStorage.setItem(STORAGE_KEY, next);
+    const resolved = resolveTheme(next);
+    setResolvedTheme(resolved);
+    applyTheme(resolved);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+function applyTheme(resolved: 'light' | 'dark') {
+  const adminRoot = document.querySelector('.actuate-admin');
+  if (!adminRoot) return;
+  if (resolved === 'dark') {
+    adminRoot.classList.add('dark');
+  } else {
+    adminRoot.classList.remove('dark');
+  }
+}

package/src/components/TipTapEditor.tsx

@@ -0,0 +1,469 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useEditor, EditorContent, type Editor } from '@tiptap/react';
+import { MediaPickerModal } from './MediaPickerModal.js';
+import StarterKit from '@tiptap/starter-kit';
+import UnderlineExt from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Table from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableHeader from '@tiptap/extension-table-header';
+import TableCell from '@tiptap/extension-table-cell';
+import TextAlign from '@tiptap/extension-text-align';
+import Placeholder from '@tiptap/extension-placeholder';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import { common, createLowlight } from 'lowlight';
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Quote,
+  FileCode,
+  Minus,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Link as LinkIcon,
+  Image as ImageIcon,
+  Table as TableIcon,
+  Columns,
+  Rows,
+  Trash2,
+  Undo,
+  Redo,
+} from 'lucide-react';
+
+const lowlight = createLowlight(common);
+
+export interface TipTapEditorProps {
+  content: string;
+  onChange: (html: string) => void;
+  placeholder?: string;
+  editable?: boolean;
+  className?: string;
+}
+
+const editorStyles = `
+.ProseMirror {
+  min-height: 300px;
+  outline: none;
+  padding: 1rem;
+}
+.ProseMirror h1 { font-size: 2em; font-weight: 700; margin: 0.67em 0; }
+.ProseMirror h2 { font-size: 1.5em; font-weight: 700; margin: 0.75em 0; }
+.ProseMirror h3 { font-size: 1.17em; font-weight: 700; margin: 0.83em 0; }
+.ProseMirror h4 { font-size: 1em; font-weight: 700; margin: 1em 0; }
+.ProseMirror h5 { font-size: 0.83em; font-weight: 700; margin: 1.17em 0; }
+.ProseMirror h6 { font-size: 0.67em; font-weight: 700; margin: 1.33em 0; }
+.ProseMirror ul { list-style: disc; padding-left: 1.5rem; margin: 0.5em 0; }
+.ProseMirror ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5em 0; }
+.ProseMirror li { margin: 0.25em 0; }
+.ProseMirror p { margin: 0.5em 0; }
+.ProseMirror table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1rem 0;
+}
+.ProseMirror th,
+.ProseMirror td {
+  border: 1px solid #d1d5db;
+  padding: 0.5rem;
+  text-align: left;
+  min-width: 80px;
+}
+.ProseMirror th {
+  background-color: #f3f4f6;
+  font-weight: 600;
+}
+.ProseMirror img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.375rem;
+}
+.ProseMirror blockquote {
+  border-left: 3px solid #3b82f6;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #4b5563;
+}
+.ProseMirror pre {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+}
+.ProseMirror code {
+  background: #f1f5f9;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+}
+.ProseMirror pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+.ProseMirror hr {
+  border: none;
+  border-top: 2px solid #e5e7eb;
+  margin: 1.5rem 0;
+}
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #9ca3af;
+  pointer-events: none;
+  height: 0;
+}
+.ProseMirror .selectedCell {
+  background-color: #dbeafe;
+}
+`;
+
+function ToolbarButton({
+  onClick,
+  isActive = false,
+  disabled = false,
+  title,
+  children,
+}: {
+  onClick: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={`p-1.5 rounded transition-colors ${
+        isActive
+          ? 'bg-blue-100 text-blue-700'
+          : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+      } ${disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Divider() {
+  return <div className="w-px h-6 bg-gray-200 mx-1" />;
+}
+
+function Toolbar({ editor, onOpenMediaPicker }: { editor: Editor; onOpenMediaPicker: () => void }) {
+  const addLink = () => {
+    const previousUrl = editor.getAttributes('link').href ?? '';
+    const url = window.prompt('Enter URL:', previousUrl);
+    if (url === null) return;
+    if (url === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+  };
+
+  const insertTable = () => {
+    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  };
+
+  const isInTable = editor.isActive('table');
+
+  return (
+    <div className="border-b border-gray-200 bg-gray-50 p-2 flex items-center gap-0.5 flex-wrap sticky top-0 z-10">
+      {/* Group 1: Text formatting */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        isActive={editor.isActive('bold')}
+        title="Bold (Ctrl+B)"
+      >
+        <Bold className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        isActive={editor.isActive('italic')}
+        title="Italic (Ctrl+I)"
+      >
+        <Italic className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleUnderline().run()}
+        isActive={editor.isActive('underline')}
+        title="Underline (Ctrl+U)"
+      >
+        <Underline className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        isActive={editor.isActive('strike')}
+        title="Strikethrough"
+      >
+        <Strikethrough className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        isActive={editor.isActive('code')}
+        title="Inline code"
+      >
+        <Code className="w-4 h-4" />
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Group 2: Headings */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        isActive={editor.isActive('heading', { level: 1 })}
+        title="Heading 1"
+      >
+        <Heading1 className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        isActive={editor.isActive('heading', { level: 2 })}
+        title="Heading 2"
+      >
+        <Heading2 className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        isActive={editor.isActive('heading', { level: 3 })}
+        title="Heading 3"
+      >
+        <Heading3 className="w-4 h-4" />
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Group 3: Lists & blocks */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        isActive={editor.isActive('bulletList')}
+        title="Bullet list"
+      >
+        <List className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        isActive={editor.isActive('orderedList')}
+        title="Ordered list"
+      >
+        <ListOrdered className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        isActive={editor.isActive('blockquote')}
+        title="Blockquote"
+      >
+        <Quote className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        isActive={editor.isActive('codeBlock')}
+        title="Code block"
+      >
+        <FileCode className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().setHorizontalRule().run()}
+        title="Horizontal rule"
+      >
+        <Minus className="w-4 h-4" />
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Group 4: Alignment */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().setTextAlign('left').run()}
+        isActive={editor.isActive({ textAlign: 'left' })}
+        title="Align left"
+      >
+        <AlignLeft className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().setTextAlign('center').run()}
+        isActive={editor.isActive({ textAlign: 'center' })}
+        title="Align center"
+      >
+        <AlignCenter className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().setTextAlign('right').run()}
+        isActive={editor.isActive({ textAlign: 'right' })}
+        title="Align right"
+      >
+        <AlignRight className="w-4 h-4" />
+      </ToolbarButton>
+
+      <Divider />
+
+      {/* Group 5: Insert */}
+      <ToolbarButton
+        onClick={addLink}
+        isActive={editor.isActive('link')}
+        title="Insert link"
+      >
+        <LinkIcon className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={onOpenMediaPicker}
+        title="Insert image"
+      >
+        <ImageIcon className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={insertTable}
+        title="Insert table (3×3)"
+      >
+        <TableIcon className="w-4 h-4" />
+      </ToolbarButton>
+
+      {/* Group 6: Table controls (visible only when cursor is inside a table) */}
+      {isInTable && (
+        <>
+          <Divider />
+          <ToolbarButton
+            onClick={() => editor.chain().focus().addColumnBefore().run()}
+            title="Add column before"
+          >
+            <Columns className="w-4 h-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().addColumnAfter().run()}
+            title="Add column after"
+          >
+            <Columns className="w-4 h-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().deleteColumn().run()}
+            title="Delete column"
+          >
+            <Columns className="w-4 h-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().addRowBefore().run()}
+            title="Add row before"
+          >
+            <Rows className="w-4 h-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().addRowAfter().run()}
+            title="Add row after"
+          >
+            <Rows className="w-4 h-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().deleteRow().run()}
+            title="Delete row"
+          >
+            <Rows className="w-4 h-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().deleteTable().run()}
+            title="Delete table"
+          >
+            <Trash2 className="w-4 h-4" />
+          </ToolbarButton>
+        </>
+      )}
+
+      <Divider />
+
+      {/* Group 7: History */}
+      <ToolbarButton
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().undo()}
+        title="Undo"
+      >
+        <Undo className="w-4 h-4" />
+      </ToolbarButton>
+      <ToolbarButton
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().redo()}
+        title="Redo"
+      >
+        <Redo className="w-4 h-4" />
+      </ToolbarButton>
+    </div>
+  );
+}
+
+export function TipTapEditor({
+  content,
+  onChange,
+  placeholder,
+  editable = true,
+  className,
+}: TipTapEditorProps) {
+  const [mediaPickerOpen, setMediaPickerOpen] = useState(false);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: false,
+        horizontalRule: false,
+      }),
+      UnderlineExt,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { class: 'text-blue-600 underline' },
+      }),
+      Image.configure({
+        inline: true,
+        allowBase64: true,
+      }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      Placeholder.configure({
+        placeholder: placeholder || 'Start writing...',
+      }),
+      CodeBlockLowlight.configure({ lowlight }),
+      HorizontalRule,
+    ],
+    content,
+    editable: editable !== false,
+    onUpdate: ({ editor: ed }) => {
+      onChange(ed.getHTML());
+    },
+  });
+
+  if (!editor) return null;
+
+  const handleImageSelected = (url: string, alt?: string) => {
+    editor.chain().focus().setImage({ src: url, alt: alt ?? '' }).run();
+  };
+
+  return (
+    <div className={`border border-gray-200 rounded-lg overflow-hidden bg-white ${className ?? ''}`}>
+      {editable && <Toolbar editor={editor} onOpenMediaPicker={() => setMediaPickerOpen(true)} />}
+      <EditorContent editor={editor} />
+      <style dangerouslySetInnerHTML={{ __html: editorStyles }} />
+      <MediaPickerModal
+        open={mediaPickerOpen}
+        onClose={() => setMediaPickerOpen(false)}
+        onSelect={handleImageSelected}
+        accept="image/*"
+      />
+    </div>
+  );
+}