@svadmin/editor 0.1.0 → 0.2.4

package/src/extensions/index.ts

@@ -1,211 +0,0 @@
-/**
- * @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

@@ -1,150 +0,0 @@
-/**
- * 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,
-        }),
-      ];
-    },
-  });
-}