@svadmin/editor 0.1.0 → 0.2.2

package/{src → dist}/components/BubbleMenu.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
   import type { Editor } from '@tiptap/core';
-  import { BubbleMenu as TiptapBubbleMenu } from '@tiptap/extension-bubble-menu';
+  import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
+  import { PluginKey } from '@tiptap/pm/state';
   import ToolbarButton from './ToolbarButton.svelte';
   import {
     Bold, Italic, Underline as UnderlineIcon, Strikethrough,
     Code, Link as LinkIcon, Highlighter,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
   import { t } from '@svadmin/core';
 
+  const bubbleMenuKey = new PluginKey('svadminBubbleMenu');
+
   let { editor } = $props<{
     editor: Editor;
   }>();
@@ -28,37 +31,25 @@
   const isCode = $derived((void txn, editor.isActive('code')));
   const isLink = $derived((void txn, editor.isActive('link')));
 
-  // Register the bubble menu extension
+  // Register the bubble menu plugin (Tiptap v3)
   $effect(() => {
     if (!menuElement) return;
 
-    // Check if BubbleMenu is already registered
-    const existing = editor.extensionManager.extensions.find(
-      (e) => e.name === 'bubbleMenu'
-    );
-    if (existing) return;
-
-    // We need to register the extension dynamically
-    // Tiptap handles this through the plugin system
-    const plugin = TiptapBubbleMenu.configure({
+    const plugin = BubbleMenuPlugin({
+      pluginKey: bubbleMenuKey,
+      editor,
       element: menuElement,
-      tippyOptions: {
-        duration: 150,
-        placement: 'top',
-        animation: 'shift-away',
-      },
       shouldShow: ({ editor: e, state }) => {
         const { selection } = state;
         const { empty } = selection;
-        // Don't show in code blocks or empty selections
         if (empty || e.isActive('codeBlock')) return false;
         return true;
       },
     });
 
-    editor.registerPlugin(plugin.options.plugin(plugin.options));
+    editor.registerPlugin(plugin);
     return () => {
-      // cleanup handled by editor destroy
+      editor.unregisterPlugin(bubbleMenuKey);
     };
   });
 </script>

package/dist/components/BubbleMenu.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const BubbleMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type BubbleMenu = ReturnType<typeof BubbleMenu>;
+export default BubbleMenu;

package/{src → dist}/components/ColorPicker.svelte

@@ -38,7 +38,7 @@
 
 <div class="svadmin-color-picker" bind:this={popover}>
   <div class="svadmin-color-grid">
-    {#each colors as color}
+    {#each colors as color, _i (_i)}
       <button
         type="button"
         class="svadmin-color-swatch"

package/dist/components/ColorPicker.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    onselect: (color: string) => void;
+    onclose?: () => void;
+};
+declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/{src → dist}/components/Editor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
   import { Editor } from '@tiptap/core';
-  import { onDestroy } from 'svelte';
   import { fullPreset, minimalPreset, prosePreset, type EditorPresetOptions } from '../extensions/index.js';
   import type { AnyExtension } from '@tiptap/core';
   import Toolbar from './Toolbar.svelte';
@@ -178,7 +178,7 @@
     const currentHtml = editor.getHTML();
     if (value !== currentHtml) {
       isUpdatingFromExternal = true;
-      editor.commands.setContent(value || '', false);
+      editor.commands.setContent(value || '', { emitUpdate: false });
       isUpdatingFromExternal = false;
     }
   });
@@ -191,8 +191,8 @@
   });
 
   // Character count
-  const charCount = $derived(editor?.storage.characterCount?.characters() ?? 0);
-  const wordCount = $derived(editor?.storage.characterCount?.words() ?? 0);
+  const charCount = $derived(((editor as any)?.storage as Record<string, any>)?.characterCount?.characters() ?? 0);
+  const wordCount = $derived(((editor as any)?.storage as Record<string, any>)?.characterCount?.words() ?? 0);
 </script>
 
 <div class="svadmin-editor {className}">

package/dist/components/Editor.svelte.d.ts

@@ -0,0 +1,42 @@
+import { Editor } from '@tiptap/core';
+import type { AnyExtension } from '@tiptap/core';
+import '../styles/editor.css';
+interface Props {
+    /** HTML string content (bindable) */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the editor is editable */
+    editable?: boolean;
+    /** Autofocus on mount */
+    autofocus?: boolean | 'start' | 'end';
+    /** Max character count */
+    maxLength?: number;
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Show bubble menu on text selection */
+    showBubbleMenu?: boolean;
+    /** Show floating menu on empty lines */
+    showFloatingMenu?: boolean;
+    /** Show character count in footer */
+    showCharCount?: boolean;
+    /** Extension preset */
+    preset?: 'full' | 'minimal' | 'prose';
+    /** Custom extensions (overrides preset) */
+    extensions?: AnyExtension[];
+    /** Image upload handler */
+    onUpload?: (file: File) => Promise<string>;
+    /** Called on every content change */
+    onchange?: (html: string) => void;
+    /** Additional CSS class for the wrapper */
+    class?: string;
+    /** Min height for the editor content area */
+    minHeight?: string;
+    /** Max height for the editor content area */
+    maxHeight?: string;
+    /** lowlight instance for syntax-highlighted code blocks */
+    lowlight?: unknown;
+}
+declare const Editor: import("svelte").Component<Props, {}, "value">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/{src → dist}/components/FloatingMenu.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import type { Editor } from '@tiptap/core';
-  import { FloatingMenu as TiptapFloatingMenu } from '@tiptap/extension-floating-menu';
+  import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
+  import { PluginKey } from '@tiptap/pm/state';
   import ToolbarButton from './ToolbarButton.svelte';
   import {
     Heading1, Heading2, Heading3,
     List, ListOrdered, ListChecks,
-    Quote, Code2, Minus, ImageIcon, TableIcon,
-  } from 'lucide-svelte';
+    Quote, Code2, Minus,
+  } from '@lucide/svelte';
   import { t } from '@svadmin/core';
 
+  const floatingMenuKey = new PluginKey('svadminFloatingMenu');
+
   let { editor } = $props<{
     editor: Editor;
   }>();
@@ -18,21 +21,13 @@
   $effect(() => {
     if (!menuElement) return;
 
-    const existing = editor.extensionManager.extensions.find(
-      (e) => e.name === 'floatingMenu'
-    );
-    if (existing) return;
-
-    const plugin = TiptapFloatingMenu.configure({
+    const plugin = FloatingMenuPlugin({
+      pluginKey: floatingMenuKey,
+      editor,
       element: menuElement,
-      tippyOptions: {
-        duration: 150,
-        placement: 'left-start',
-      },
-      shouldShow: ({ editor: e, state }) => {
+      shouldShow: ({ editor: _e, state }) => {
         const { selection } = state;
         const { $anchor: anchor, empty } = selection;
-        // Show only on empty paragraphs
         if (!empty) return false;
         const isRootDepth = anchor.depth === 1;
         const isEmptyTextBlock = anchor.parent.isTextblock
@@ -42,7 +37,10 @@
       },
     });
 
-    editor.registerPlugin(plugin.options.plugin(plugin.options));
+    editor.registerPlugin(plugin);
+    return () => {
+      editor.unregisterPlugin(floatingMenuKey);
+    };
   });
 </script>
 

package/dist/components/FloatingMenu.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const FloatingMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type FloatingMenu = ReturnType<typeof FloatingMenu>;
+export default FloatingMenu;

package/{src → dist}/components/ImageUpload.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Editor } from '@tiptap/core';
-  import { ImageIcon, Upload, Link as LinkIcon, X } from 'lucide-svelte';
+  import { ImageIcon, Upload, Link as LinkIcon } from '@lucide/svelte';
   import { t } from '@svadmin/core';
 
   let { editor, onUpload, onclose } = $props<{
@@ -56,6 +56,13 @@
     dragover = false;
   }
 
+  function handleDropZoneKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      fileInput?.click();
+    }
+  }
+
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -122,8 +129,10 @@
       </button>
     </div>
   {:else}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
+      role="button"
+      tabindex="0"
+      aria-label={t('editor.image.upload')}
       style="
         border: 2px dashed {dragover ? 'var(--editor-primary)' : 'var(--editor-border)'};
         border-radius: 8px;
@@ -136,6 +145,7 @@
       ondrop={handleDrop}
       ondragover={handleDragOver}
       ondragleave={handleDragLeave}
+      onkeydown={handleDropZoneKeydown}
       onclick={() => fileInput?.click()}
     >
       {#if uploading}

package/dist/components/ImageUpload.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+    onUpload?: (file: File) => Promise<string>;
+    onclose?: () => void;
+};
+declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;

package/{src → dist}/components/LinkPopover.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Editor } from '@tiptap/core';
-  import { ExternalLink, Unlink, Check } from 'lucide-svelte';
+  import { ExternalLink, Unlink, Check } from '@lucide/svelte';
   import { t } from '@svadmin/core';
 
   let { editor, onclose } = $props<{

package/dist/components/LinkPopover.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+    onclose?: () => void;
+};
+declare const LinkPopover: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinkPopover = ReturnType<typeof LinkPopover>;
+export default LinkPopover;

package/{src → dist}/components/TableMenu.svelte

@@ -4,7 +4,7 @@
     TableIcon, Plus, Minus, Trash2,
     MergeIcon, SplitIcon,
     ArrowDownToLine, ArrowRightToLine,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
   import ToolbarButton from './ToolbarButton.svelte';
   import { t } from '@svadmin/core';
 

package/dist/components/TableMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+    onclose?: () => void;
+};
+declare const TableMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableMenu = ReturnType<typeof TableMenu>;
+export default TableMenu;

package/{src → dist}/components/Toolbar.svelte

@@ -9,16 +9,14 @@
   import ImageUpload from './ImageUpload.svelte';
   import {
     Bold, Italic, Underline as UnderlineIcon, Strikethrough,
-    Heading1, Heading2, Heading3,
     List, ListOrdered, ListChecks,
     AlignLeft, AlignCenter, AlignRight, AlignJustify,
     Quote, Minus, Code, Code2,
     Undo2, Redo2,
     Link as LinkIcon, ImageIcon, TableIcon,
-    Palette, Highlighter, Type,
+    Palette, Highlighter,
     Subscript, Superscript,
-    Pilcrow,
-  } from 'lucide-svelte';
+  } from '@lucide/svelte';
   import { t } from '@svadmin/core';
 
   let { editor, onUpload, preset = 'full' } = $props<{
@@ -120,7 +118,7 @@
     }
   }
 
-  const isFullOrProse = preset === 'full' || preset === 'prose';
+  const isFullOrProse = $derived(preset === 'full' || preset === 'prose');
 </script>
 
 <div class="svadmin-editor-toolbar">

package/dist/components/Toolbar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+    onUpload?: (file: File) => Promise<string>;
+    preset?: 'full' | 'minimal' | 'prose';
+};
+declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/ToolbarButton.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    active?: boolean;
+    disabled?: boolean;
+    title?: string;
+    onclick?: () => void;
+    children: Snippet;
+};
+declare const ToolbarButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/components/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const ToolbarGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/{src → dist}/components/ToolbarSelect.svelte

@@ -17,7 +17,7 @@
     onchange?.(target.value);
   }}
 >
-  {#each options as opt}
+  {#each options as opt, _i (_i)}
     <option value={opt.value} selected={opt.value === value}>{opt.label}</option>
   {/each}
 </select>

package/dist/components/ToolbarSelect.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    value?: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    title?: string;
+    onchange?: (value: string) => void;
+};
+declare const ToolbarSelect: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolbarSelect = ReturnType<typeof ToolbarSelect>;
+export default ToolbarSelect;

package/dist/editor.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @svadmin/editor — Editor factory
+ *
+ * Creates and manages a Tiptap editor instance with Svelte 5 reactivity.
+ */
+import { Editor, type EditorOptions } from '@tiptap/core';
+import { 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 declare function createSvadminEditor(element: HTMLElement, options?: SvadminEditorOptions): Editor;

package/dist/editor.svelte.js

@@ -0,0 +1,54 @@
+/**
+ * @svadmin/editor — Editor factory
+ *
+ * Creates and manages a Tiptap editor instance with Svelte 5 reactivity.
+ */
+import { Editor } from '@tiptap/core';
+import { fullPreset, minimalPreset, prosePreset } from './extensions/index.js';
+/**
+ * Create a Tiptap editor instance with svadmin defaults.
+ */
+export function createSvadminEditor(element, options = {}) {
+    const { content = '', placeholder = '', editable = true, autofocus = false, maxLength = 0, preset = 'full', extensions: customExtensions, presetOptions, onUpdate, editorProps, } = options;
+    // Resolve extensions
+    let extensions;
+    if (customExtensions) {
+        extensions = customExtensions;
+    }
+    else {
+        const opts = {
+            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;
+}

package/dist/extensions/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @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 declare function fullPreset(options?: EditorPresetOptions): AnyExtension[];
+/**
+ * Minimal preset: basic text formatting only.
+ * Suitable for comments, short descriptions, inline editing.
+ */
+export declare function minimalPreset(options?: EditorPresetOptions): AnyExtension[];
+/**
+ * Prose preset: optimized for long-form writing.
+ * Includes typography, highlights, but no tables.
+ */
+export declare function prosePreset(options?: EditorPresetOptions): AnyExtension[];
+export { StarterKit, Underline, TextAlign, TextStyle, Color, Highlight, Link, Image, Placeholder, CharacterCount, Typography, Subscript, Superscript, TaskList, TaskItem, Table, TableRow, TableHeader, TableCell, CodeBlockLowlight, };