@svadmin/editor 0.1.0 → 0.2.4

package/dist/extensions/index.js

@@ -0,0 +1,156 @@
+/**
+ * @svadmin/editor — Extension presets
+ *
+ * Pre-configured extension bundles for different use cases.
+ * Users can pick a preset or compose their own extension array.
+ */
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import CharacterCount from '@tiptap/extension-character-count';
+import Typography from '@tiptap/extension-typography';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+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 CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+/**
+ * Full preset: all extensions enabled.
+ * Suitable for content management, article editing, knowledge bases.
+ */
+export function fullPreset(options = {}) {
+    const extensions = [
+        StarterKit.configure({
+            // Disable default code block in favor of CodeBlockLowlight
+            codeBlock: options.codeHighlight ? false : undefined,
+        }),
+        Underline,
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        TextAlign.configure({
+            types: ['heading', 'paragraph'],
+        }),
+        Link.configure({
+            openOnClick: false,
+            autolink: true,
+            HTMLAttributes: {
+                rel: 'noopener noreferrer',
+                target: '_blank',
+            },
+        }),
+        Image.configure({
+            allowBase64: true,
+            HTMLAttributes: {
+                loading: 'lazy',
+            },
+        }),
+        Subscript,
+        Superscript,
+        TaskList,
+        TaskItem.configure({ nested: true }),
+        Table.configure({
+            resizable: true,
+            HTMLAttributes: {
+                class: 'svadmin-table',
+            },
+        }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        Typography,
+        CharacterCount.configure({
+            limit: options.maxLength || undefined,
+        }),
+    ];
+    if (options.placeholder) {
+        extensions.push(Placeholder.configure({
+            placeholder: options.placeholder,
+        }));
+    }
+    if (options.codeHighlight && options.lowlight) {
+        extensions.push(CodeBlockLowlight.configure({
+            lowlight: options.lowlight,
+        }));
+    }
+    return extensions;
+}
+/**
+ * Minimal preset: basic text formatting only.
+ * Suitable for comments, short descriptions, inline editing.
+ */
+export function minimalPreset(options = {}) {
+    const extensions = [
+        StarterKit.configure({
+            heading: { levels: [1, 2, 3] },
+            codeBlock: false,
+        }),
+        Underline,
+        Link.configure({
+            openOnClick: false,
+            autolink: true,
+        }),
+        CharacterCount.configure({
+            limit: options.maxLength || undefined,
+        }),
+    ];
+    if (options.placeholder) {
+        extensions.push(Placeholder.configure({
+            placeholder: options.placeholder,
+        }));
+    }
+    return extensions;
+}
+/**
+ * Prose preset: optimized for long-form writing.
+ * Includes typography, highlights, but no tables.
+ */
+export function prosePreset(options = {}) {
+    const extensions = [
+        StarterKit.configure({
+            codeBlock: options.codeHighlight ? false : undefined,
+        }),
+        Underline,
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        TextAlign.configure({
+            types: ['heading', 'paragraph'],
+        }),
+        Link.configure({
+            openOnClick: false,
+            autolink: true,
+        }),
+        Image.configure({ allowBase64: true }),
+        TaskList,
+        TaskItem.configure({ nested: true }),
+        Typography,
+        CharacterCount.configure({
+            limit: options.maxLength || undefined,
+        }),
+    ];
+    if (options.placeholder) {
+        extensions.push(Placeholder.configure({
+            placeholder: options.placeholder,
+        }));
+    }
+    if (options.codeHighlight && options.lowlight) {
+        extensions.push(CodeBlockLowlight.configure({
+            lowlight: options.lowlight,
+        }));
+    }
+    return extensions;
+}
+export { 
+// Re-export individual extensions for custom composition
+StarterKit, Underline, TextAlign, TextStyle, Color, Highlight, Link, Image, Placeholder, CharacterCount, Typography, Subscript, Superscript, TaskList, TaskItem, Table, TableRow, TableHeader, TableCell, CodeBlockLowlight, };

package/dist/extensions/slash-command.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Slash command extension for Tiptap
+ *
+ * Type "/" on an empty line to open a command menu.
+ * Uses @tiptap/suggestion under the hood.
+ */
+import { Extension } from '@tiptap/core';
+import { type SuggestionOptions } from '@tiptap/suggestion';
+import type { Editor } from '@tiptap/core';
+export interface SlashCommandItem {
+    title: string;
+    description?: string;
+    icon?: string;
+    category?: string;
+    command: (editor: Editor) => void;
+}
+/**
+ * Default slash command items
+ */
+export declare function getDefaultSlashItems(): SlashCommandItem[];
+export interface SlashCommandOptions {
+    items?: SlashCommandItem[];
+    /** Custom rendering handlers — follows @tiptap/suggestion render interface */
+    render?: SuggestionOptions['render'];
+}
+/**
+ * Create a slash command extension.
+ *
+ * Usage:
+ * ```ts
+ * import { createSlashCommand } from '@svadmin/editor/extensions/slash-command';
+ * const SlashCommand = createSlashCommand();
+ * ```
+ */
+export declare function createSlashCommand(options?: SlashCommandOptions): Extension;

package/dist/extensions/slash-command.js

@@ -0,0 +1,127 @@
+/**
+ * Slash command extension for Tiptap
+ *
+ * Type "/" on an empty line to open a command menu.
+ * Uses @tiptap/suggestion under the hood.
+ */
+import { Extension } from '@tiptap/core';
+import Suggestion, {} from '@tiptap/suggestion';
+import { t } from '@svadmin/core';
+/**
+ * Default slash command items
+ */
+export function getDefaultSlashItems() {
+    return [
+        {
+            title: t('editor.h1'),
+            description: 'Large section heading',
+            category: 'Headings',
+            command: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+        },
+        {
+            title: t('editor.h2'),
+            description: 'Medium section heading',
+            category: 'Headings',
+            command: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        },
+        {
+            title: t('editor.h3'),
+            description: 'Small section heading',
+            category: 'Headings',
+            command: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+        },
+        {
+            title: t('editor.bulletList'),
+            description: 'Create a bulleted list',
+            category: 'Lists',
+            command: (editor) => editor.chain().focus().toggleBulletList().run(),
+        },
+        {
+            title: t('editor.orderedList'),
+            description: 'Create a numbered list',
+            category: 'Lists',
+            command: (editor) => editor.chain().focus().toggleOrderedList().run(),
+        },
+        {
+            title: t('editor.taskList'),
+            description: 'Create a task checklist',
+            category: 'Lists',
+            command: (editor) => editor.chain().focus().toggleTaskList().run(),
+        },
+        {
+            title: t('editor.blockquote'),
+            description: 'Insert a blockquote',
+            category: 'Blocks',
+            command: (editor) => editor.chain().focus().toggleBlockquote().run(),
+        },
+        {
+            title: t('editor.codeBlock'),
+            description: 'Insert a code block',
+            category: 'Blocks',
+            command: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+        },
+        {
+            title: 'Divider',
+            description: 'Insert a horizontal rule',
+            category: 'Blocks',
+            command: (editor) => editor.chain().focus().setHorizontalRule().run(),
+        },
+        {
+            title: t('editor.table'),
+            description: 'Insert a 3×3 table',
+            category: 'Media',
+            command: (editor) => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+        },
+        {
+            title: 'Image',
+            description: 'Insert image from URL',
+            category: 'Media',
+            command: (editor) => {
+                const url = window.prompt('Enter image URL:');
+                if (url) {
+                    editor.chain().focus().setImage({ src: url }).run();
+                }
+            },
+        },
+    ];
+}
+/**
+ * Create a slash command extension.
+ *
+ * Usage:
+ * ```ts
+ * import { createSlashCommand } from '@svadmin/editor/extensions/slash-command';
+ * const SlashCommand = createSlashCommand();
+ * ```
+ */
+export function createSlashCommand(options = {}) {
+    const items = options.items ?? getDefaultSlashItems();
+    return Extension.create({
+        name: 'slashCommand',
+        addOptions() {
+            return {
+                suggestion: {
+                    char: '/',
+                    command: ({ editor, range, props }) => {
+                        // Delete the slash and trigger text
+                        editor.chain().focus().deleteRange(range).run();
+                        // Execute the command
+                        props.command(editor);
+                    },
+                    items: ({ query }) => {
+                        return items.filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
+                    },
+                    ...(options.render ? { render: options.render } : {}),
+                },
+            };
+        },
+        addProseMirrorPlugins() {
+            return [
+                Suggestion({
+                    editor: this.editor,
+                    ...this.options.suggestion,
+                }),
+            ];
+        },
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @svadmin/editor — Modern Tiptap-based rich text editor for Svelte 5
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Editor } from '@svadmin/editor';
+ *
+ *   let content = $state('<p>Hello World</p>');
+ * </script>
+ *
+ * <Editor bind:value={content} placeholder="Start writing..." />
+ * ```
+ */
+export { default as Editor } from './components/Editor.svelte';
+export { default as Toolbar } from './components/Toolbar.svelte';
+export { default as ToolbarButton } from './components/ToolbarButton.svelte';
+export { default as ToolbarGroup } from './components/ToolbarGroup.svelte';
+export { default as ToolbarSelect } from './components/ToolbarSelect.svelte';
+export { default as BubbleMenu } from './components/BubbleMenu.svelte';
+export { default as FloatingMenu } from './components/FloatingMenu.svelte';
+export { default as ColorPicker } from './components/ColorPicker.svelte';
+export { default as LinkPopover } from './components/LinkPopover.svelte';
+export { default as TableMenu } from './components/TableMenu.svelte';
+export { default as ImageUpload } from './components/ImageUpload.svelte';
+export { fullPreset, minimalPreset, prosePreset, type EditorPresetOptions, } from './extensions/index.js';
+export { StarterKit, Underline, TextAlign, TextStyle, Color, Highlight, Link, Image, Placeholder, CharacterCount, Typography, Subscript, Superscript, TaskList, TaskItem, Table, TableRow, TableHeader, TableCell, CodeBlockLowlight, } from './extensions/index.js';
+export { Editor as TiptapEditor } from '@tiptap/core';
+export type { AnyExtension, Extension, Mark, Node } from '@tiptap/core';

package/{src/index.ts → dist/index.js}

@@ -12,10 +12,8 @@
  * <Editor bind:value={content} placeholder="Start writing..." />
  * ```
  */
-
 // ─── Main component ──────────────────────────────────────────────
 export { default as Editor } from './components/Editor.svelte';
-
 // ─── Sub-components (for custom layouts) ─────────────────────────
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as ToolbarButton } from './components/ToolbarButton.svelte';
@@ -27,39 +25,9 @@ export { default as ColorPicker } from './components/ColorPicker.svelte';
 export { default as LinkPopover } from './components/LinkPopover.svelte';
 export { default as TableMenu } from './components/TableMenu.svelte';
 export { default as ImageUpload } from './components/ImageUpload.svelte';
-
 // ─── Extension presets ───────────────────────────────────────────
-export {
-  fullPreset,
-  minimalPreset,
-  prosePreset,
-  type EditorPresetOptions,
-} from './extensions/index.js';
-
+export { fullPreset, minimalPreset, prosePreset, } from './extensions/index.js';
 // ─── Individual extensions (re-exports for custom composition) ──
-export {
-  StarterKit,
-  Underline,
-  TextAlign,
-  TextStyle,
-  Color,
-  Highlight,
-  Link,
-  Image,
-  Placeholder,
-  CharacterCount,
-  Typography,
-  Subscript,
-  Superscript,
-  TaskList,
-  TaskItem,
-  Table,
-  TableRow,
-  TableHeader,
-  TableCell,
-  CodeBlockLowlight,
-} from './extensions/index.js';
-
+export { StarterKit, Underline, TextAlign, TextStyle, Color, Highlight, Link, Image, Placeholder, CharacterCount, Typography, Subscript, Superscript, TaskList, TaskItem, Table, TableRow, TableHeader, TableCell, CodeBlockLowlight, } from './extensions/index.js';
 // ─── Tiptap core re-exports (convenience) ────────────────────────
 export { Editor as TiptapEditor } from '@tiptap/core';
-export type { AnyExtension, Extension, Mark, Node } from '@tiptap/core';

package/package.json

@@ -1,56 +1,78 @@
 {
   "name": "@svadmin/editor",
-  "version": "0.1.0",
+  "version": "0.2.4",
   "description": "Modern Tiptap-based rich text editor for Svelte 5 — headless, modular, production-ready",
   "type": "module",
+  "sideEffects": [
+    "./dist/styles/editor.css"
+  ],
   "files": [
-    "src/**/*"
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.test-*",
+    "!dist/**/*.spec.*",
+    "!dist/**/*.spec-*"
   ],
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components/*.svelte": {
+      "types": "./dist/components/*.svelte.d.ts",
+      "svelte": "./dist/components/*.svelte",
+      "default": "./dist/components/*.svelte"
     },
-    "./components/*": "./src/components/*",
-    "./editor.css": "./src/styles/editor.css"
+    "./components/*": "./dist/components/*",
+    "./editor.css": {
+      "svelte": "./dist/styles/editor.css",
+      "style": "./dist/styles/editor.css",
+      "import": "./dist/styles/editor.css",
+      "default": "./dist/styles/editor.css"
+    }
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "@svadmin/core": "^0.5.14"
+    "svelte": "^5.56.8",
+    "@svadmin/core": "^0.34.2"
   },
   "devDependencies": {
-    "@svadmin/core": "^0.5.14"
+    "@svadmin/core": "^0.34.2"
   },
   "dependencies": {
-    "@tiptap/core": "^2.12.0",
-    "@tiptap/pm": "^2.12.0",
-    "@tiptap/starter-kit": "^2.12.0",
-    "@tiptap/extension-bubble-menu": "^2.12.0",
-    "@tiptap/extension-character-count": "^2.12.0",
-    "@tiptap/extension-code-block-lowlight": "^2.12.0",
-    "@tiptap/extension-color": "^2.12.0",
-    "@tiptap/extension-floating-menu": "^2.12.0",
-    "@tiptap/extension-highlight": "^2.12.0",
-    "@tiptap/extension-image": "^2.12.0",
-    "@tiptap/extension-link": "^2.12.0",
-    "@tiptap/extension-placeholder": "^2.12.0",
-    "@tiptap/extension-subscript": "^2.12.0",
-    "@tiptap/extension-superscript": "^2.12.0",
-    "@tiptap/extension-table": "^2.12.0",
-    "@tiptap/extension-table-cell": "^2.12.0",
-    "@tiptap/extension-table-header": "^2.12.0",
-    "@tiptap/extension-table-row": "^2.12.0",
-    "@tiptap/extension-task-item": "^2.12.0",
-    "@tiptap/extension-task-list": "^2.12.0",
-    "@tiptap/extension-text-align": "^2.12.0",
-    "@tiptap/extension-text-style": "^2.12.0",
-    "@tiptap/extension-typography": "^2.12.0",
-    "@tiptap/extension-underline": "^2.12.0",
-    "@tiptap/suggestion": "^2.12.0",
-    "lowlight": "^3.3.0",
-    "lucide-svelte": "^0.577.0"
+    "@lucide/svelte": "^1.30.0",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-bubble-menu": "^3.29.2",
+    "@tiptap/extension-character-count": "^3.29.2",
+    "@tiptap/extension-code-block-lowlight": "^3.29.2",
+    "@tiptap/extension-color": "^3.29.2",
+    "@tiptap/extension-floating-menu": "^3.29.2",
+    "@tiptap/extension-highlight": "^3.29.2",
+    "@tiptap/extension-image": "^3.29.2",
+    "@tiptap/extension-link": "^3.29.2",
+    "@tiptap/extension-placeholder": "^3.29.2",
+    "@tiptap/extension-subscript": "^3.29.2",
+    "@tiptap/extension-superscript": "^3.29.2",
+    "@tiptap/extension-table": "^3.29.2",
+    "@tiptap/extension-table-cell": "^3.29.2",
+    "@tiptap/extension-table-header": "^3.29.2",
+    "@tiptap/extension-table-row": "^3.29.2",
+    "@tiptap/extension-task-item": "^3.29.2",
+    "@tiptap/extension-task-list": "^3.29.2",
+    "@tiptap/extension-text-align": "^3.29.2",
+    "@tiptap/extension-text-style": "^3.29.2",
+    "@tiptap/extension-typography": "^3.29.2",
+    "@tiptap/extension-underline": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
+    "@tiptap/suggestion": "^3.29.2",
+    "lowlight": "^3.3.0"
+  },
+  "scripts": {
+    "build": "node ../../node_modules/@sveltejs/package/svelte-package.js -i src -o dist"
   },
   "license": "MIT",
   "publishConfig": {
@@ -62,5 +84,13 @@
     "type": "git",
     "url": "https://github.com/zuohuadong/svadmin.git",
     "directory": "packages/editor"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    },
+    "@svadmin/core": {
+      "optional": true
+    }
   }
 }

package/src/editor.svelte.ts

@@ -1,99 +0,0 @@
-/**
- * @svadmin/editor — Editor factory
- *
- * Creates and manages a Tiptap editor instance with Svelte 5 reactivity.
- */
-
-import { Editor, type EditorOptions } from '@tiptap/core';
-import { fullPreset, minimalPreset, prosePreset, type EditorPresetOptions } from './extensions/index.js';
-import type { AnyExtension } from '@tiptap/core';
-
-export interface SvadminEditorOptions {
-  /** Initial HTML content */
-  content?: string;
-  /** Placeholder text shown when editor is empty */
-  placeholder?: string;
-  /** Whether the editor is editable */
-  editable?: boolean;
-  /** Autofocus on mount */
-  autofocus?: boolean | 'start' | 'end';
-  /** Maximum character count (0 = unlimited) */
-  maxLength?: number;
-  /** Extension preset: 'full' | 'minimal' | 'prose' */
-  preset?: 'full' | 'minimal' | 'prose';
-  /** Custom extensions (overrides preset) */
-  extensions?: AnyExtension[];
-  /** Preset options */
-  presetOptions?: EditorPresetOptions;
-  /** Image upload handler */
-  onUpload?: (file: File) => Promise<string>;
-  /** Called on every content update */
-  onUpdate?: (html: string) => void;
-  /** Additional Tiptap EditorOptions overrides */
-  editorProps?: Partial<EditorOptions>;
-}
-
-/**
- * Create a Tiptap editor instance with svadmin defaults.
- */
-export function createSvadminEditor(
-  element: HTMLElement,
-  options: SvadminEditorOptions = {}
-): Editor {
-  const {
-    content = '',
-    placeholder = '',
-    editable = true,
-    autofocus = false,
-    maxLength = 0,
-    preset = 'full',
-    extensions: customExtensions,
-    presetOptions,
-    onUpdate,
-    editorProps,
-  } = options;
-
-  // Resolve extensions
-  let extensions: AnyExtension[];
-  if (customExtensions) {
-    extensions = customExtensions;
-  } else {
-    const opts: EditorPresetOptions = {
-      placeholder,
-      maxLength,
-      ...presetOptions,
-    };
-
-    switch (preset) {
-      case 'minimal':
-        extensions = minimalPreset(opts);
-        break;
-      case 'prose':
-        extensions = prosePreset(opts);
-        break;
-      case 'full':
-      default:
-        extensions = fullPreset(opts);
-    }
-  }
-
-  const editor = new Editor({
-    element,
-    extensions,
-    content,
-    editable,
-    autofocus,
-    editorProps: {
-      attributes: {
-        class: 'tiptap',
-      },
-      ...editorProps?.editorProps,
-    },
-    onUpdate({ editor: e }) {
-      onUpdate?.(e.getHTML());
-    },
-    ...editorProps,
-  });
-
-  return editor;
-}