Svelty Editor

A powerful, flexible Svelte wrapper for Editor.js that brings block-styled editing to your Svelte applications with full TypeScript support and enhanced configuration options.

✨ Features

• 🎯 Full TypeScript Support - Comprehensive type definitions for enhanced development experience
• ⚡ Dynamic Tool Loading - Load editor tools on-demand for optimal performance
• 🌍 i18n Ready - Built-in internationalization support for multiple languages
• 📝 Flexible Modes - Support for both editing and read-only modes
• 🛠 Customizable UI - Configurable inline toolbar and block tunes
• 🎨 Block Styling - Rich text editing with customizable block styles
• 📊 Event System - Comprehensive event handling for content changes
• 🔌 Plugin Architecture - Easy integration of custom tools and extensions

📦 Installation

# Install the core package
npm install svelty-editor

# Install required peer dependencies
npm install @editorjs/editorjs

# Optional: Install commonly used tools
npm install @editorjs/header @editorjs/list @editorjs/paragraph

🚀 Quick Start

<script lang="ts">
  import { SveltyEditor } from 'svelty-editor';
  import type { OutputData } from '@editorjs/editorjs';

  const handleChange = (data: OutputData) => {
    console.log('Editor content:', data);
  };
</script>

<SveltyEditor
  onChange={handleChange}
  placeholder="Start writing..."
  autofocus={true}
/>

🛠 Advanced Usage

Full Configuration Example

<script lang="ts">
  import { SveltyEditor } from 'svelty-editor';
  import type { OutputData, EditorConfig } from '@editorjs/editorjs';
  
  let editor: any;

  const config: EditorConfig = {
    // Core settings
    defaultBlock: 'paragraph',
    autofocus: true,
    placeholder: 'Create something amazing...',
    logLevel: 'ERROR',
    
    // Toolbar configuration
    inlineToolbar: ['link', 'marker', 'bold', 'italic'],
    
    // Tool settings
    tools: {
      header: {
        class: Header,
        inlineToolbar: true,
        config: {
          placeholder: 'Enter a header',
          levels: [1, 2, 3],
          defaultLevel: 1
        }
      },
      list: {
        class: List,
        inlineToolbar: true,
        config: {
          defaultStyle: 'unordered'
        }
      }
    },
    
    // Internationalization
    i18n: {
      messages: {
        ui: {
          'blockTunes.deleteTune.delete': 'Delete',
          'blockTunes.deleteTune.confirm': 'Confirm deletion'
        },
        toolNames: {
          'header': 'Heading',
          'list': 'List'
        }
      }
    },
    
    // Event handlers
    onChange: (api, event) => {
      console.log('Content updated:', event);
    },
    onReady: () => {
      console.log('Editor initialized');
    }
  };
</script>

<SveltyEditor
  bind:this={editor}
  {...config}
/>

Custom Tools Integration

// Define a custom tool
class CustomTool {
  static get toolbox() {
    return {
      title: 'Custom Tool',
      icon: '<svg>...</svg>'
    };
  }
  
  constructor({ data, config, api }) {
    this.data = data;
    this.config = config;
    this.api = api;
  }
  
  render() {
    // Tool rendering logic
  }
  
  save(blockContent) {
    // Save logic
  }
}

// Register the custom tool
await editor.registerTool('customTool', CustomTool, {
  inlineToolbar: true,
  config: {
    // Custom configuration
  }
});

📖 API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | OutputData | {} | Initial editor content | | onChange | (data: OutputData) => void | undefined | Content change callback | | placeholder | string | 'Start writing...' | Editor placeholder text | | autofocus | boolean | false | Auto-focus on load | | readOnly | boolean | false | Read-only mode | | defaultBlock | string | 'paragraph' | Default block type | | logLevel | LogLevel | 'WARN' | Logging verbosity | | inlineToolbar | boolean \| string[] | true | Inline toolbar config | | tools | Record<string, EditorTool> | {} | Tool configurations | | i18n | I18nConfig | undefined | Internationalization | | tunes | string[] | [] | Block tune settings |

Methods

// Save editor content
const data = await editor.save();

// Toggle read-only mode
editor.setReadOnly(boolean);

// Register a new tool
await editor.registerTool(name, toolClass, config);

// Clear editor content
editor.clear();

// Get editor instance
const editorInstance = editor.getEditor();

Events

The editor emits several events that you can listen to:

editor.on('change', (data) => {
  console.log('Content changed:', data);
});

editor.on('ready', () => {
  console.log('Editor is ready');
});

editor.on('save', (data) => {
  console.log('Content saved:', data);
});

🧩 TypeScript Support

Import types for better development experience:

import type { 
  EditorConfig,
  EditorTool,
  OutputData,
  LogLevel,
  I18nConfig,
  EditorEvents
} from 'svelty-editor';

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please read our Contributing Guide for details on our code of conduct and development process.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Credits

• Built on top of Editor.js