@svadmin/editor 0.1.0

package/src/extensions/index.ts

@@ -0,0 +1,211 @@
+/**
+ * @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';
+import type { AnyExtension } from '@tiptap/core';
+
+export interface EditorPresetOptions {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Max character count (0 = unlimited) */
+  maxLength?: number;
+  /** Enable code block syntax highlighting */
+  codeHighlight?: boolean;
+  /** lowlight instance (required if codeHighlight is true) */
+  lowlight?: unknown;
+}
+
+/**
+ * Full preset: all extensions enabled.
+ * Suitable for content management, article editing, knowledge bases.
+ */
+export function fullPreset(options: EditorPresetOptions = {}): AnyExtension[] {
+  const extensions: AnyExtension[] = [
+    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 as Parameters<typeof CodeBlockLowlight.configure>[0] extends { lowlight: infer L } ? L : never,
+      })
+    );
+  }
+
+  return extensions;
+}
+
+/**
+ * Minimal preset: basic text formatting only.
+ * Suitable for comments, short descriptions, inline editing.
+ */
+export function minimalPreset(options: EditorPresetOptions = {}): AnyExtension[] {
+  const extensions: AnyExtension[] = [
+    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: EditorPresetOptions = {}): AnyExtension[] {
+  const extensions: AnyExtension[] = [
+    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 as Parameters<typeof CodeBlockLowlight.configure>[0] extends { lowlight: infer L } ? L : never,
+      })
+    );
+  }
+
+  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/src/extensions/slash-command.ts

@@ -0,0 +1,150 @@
+/**
+ * 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, { type SuggestionOptions } from '@tiptap/suggestion';
+import type { Editor } from '@tiptap/core';
+import { t } from '@svadmin/core';
+
+export interface SlashCommandItem {
+  title: string;
+  description?: string;
+  icon?: string;
+  category?: string;
+  command: (editor: Editor) => void;
+}
+
+/**
+ * Default slash command items
+ */
+export function getDefaultSlashItems(): SlashCommandItem[] {
+  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();
+        }
+      },
+    },
+  ];
+}
+
+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 function createSlashCommand(options: SlashCommandOptions = {}): Extension {
+  const items = options.items ?? getDefaultSlashItems();
+
+  return Extension.create({
+    name: 'slashCommand',
+
+    addOptions() {
+      return {
+        suggestion: {
+          char: '/',
+          command: ({ editor, range, props }: { editor: Editor; range: { from: number; to: number }; props: SlashCommandItem }) => {
+            // Delete the slash and trigger text
+            editor.chain().focus().deleteRange(range).run();
+            // Execute the command
+            props.command(editor);
+          },
+          items: ({ query }: { query: string }) => {
+            return items.filter((item) =>
+              item.title.toLowerCase().includes(query.toLowerCase())
+            );
+          },
+          ...(options.render ? { render: options.render } : {}),
+        } as Partial<SuggestionOptions>,
+      };
+    },
+
+    addProseMirrorPlugins() {
+      return [
+        Suggestion({
+          editor: this.editor,
+          ...this.options.suggestion,
+        }),
+      ];
+    },
+  });
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+/**
+ * @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..." />
+ * ```
+ */
+
+// ─── 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';
+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';
+
+// ─── Extension presets ───────────────────────────────────────────
+export {
+  fullPreset,
+  minimalPreset,
+  prosePreset,
+  type EditorPresetOptions,
+} 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';
+
+// ─── Tiptap core re-exports (convenience) ────────────────────────
+export { Editor as TiptapEditor } from '@tiptap/core';
+export type { AnyExtension, Extension, Mark, Node } from '@tiptap/core';