@xyz/editor

A Nuxt layer that provides a TinyMCE self-hosted editor component for rich text editing in Nuxt applications.

Features

• 🎨 TinyMCE Integration: Full-featured rich text editor with TinyMCE
• 🚀 Self-hosted: Uses your own CDN for TinyMCE assets
• ⚙️ Configurable: Customize editor settings via app.config.ts
• 🌙 Theme Switching: Built-in light/dark theme toggle
• 📦 Nuxt Layer: Easy integration with any Nuxt project
• 🔧 TypeScript: Full TypeScript support
• 🎨 Two Components: Editor (vanilla) and UEditor (Nuxt UI compatible)
• 🎯 Auto Theme Detection: Automatically adapts to page theme
• ⚡ Performance Optimized: Caching, memoization, and efficient DOM queries
• 🔄 Smart Caching: Theme and color detection with intelligent caching

Installation

npm install @xyz/editor

Dependencies

The layer requires the following dependencies:

• @tinymce/tinymce-vue - TinyMCE Vue component
• tinymce - TinyMCE core library
• @nuxt/ui - For UEditor component (optional, only if using UEditor)

Note: If you're using the UEditor component, you'll need to install @nuxt/ui which includes @nuxtjs/color-mode:

npm install @nuxt/ui

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@xyz/editor'],
  modules: ['@nuxt/ui']
})

Usage

Basic Setup

Add the layer to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@xyz/editor']
})

Using the Editor Components

Vanilla Editor (Editor.vue)

<template>
  <div>
    <h1>My Rich Text Editor</h1>
    <Editor v-model="content" />
  </div>
</template>

<script setup>
const content = ref('<p>Start typing here...</p>')
</script>

Nuxt UI Editor (UEditor.vue)

<template>
  <div>
    <h1>My Nuxt UI Editor</h1>
    <UEditor v-model="content" size="lg" />
  </div>
</template>

<script setup>
const content = ref('<p>Start typing here...</p>')
</script>

Note: UEditor requires @nuxt/ui to be installed and configured in your nuxt.config.ts (includes @nuxtjs/color-mode).

Component Differences

| Feature | Editor.vue | UEditor.vue | |---------|------------|--------------| | Theme System | Custom theme state | Nuxt UI useColorMode() | | Styling | Custom CSS variables | Nuxt UI design tokens | | Props | init, autoTheme | init, size, disabled, placeholder | | Theme Detection | Manual page detection | Automatic Nuxt UI sync | | Dependencies | None | Requires @nuxt/ui (includes color-mode) | | Use Case | General purpose | Nuxt UI applications |

Theme Switching

Both editors include a built-in theme switcher button in the toolbar:

• 🌙 Moon icon: Switch to dark theme
• ☀️ Sun icon: Switch to light theme
• Persistent: Theme preference is remembered
• Always available: Works even with custom toolbar configurations

Custom Configuration

You can customize the editor configuration in your app.config.ts using standard TinyMCE options:

export default defineAppConfig({
  editor: {
    // CDN Configuration (Layer-specific)
    cdn: {
      scriptUrl: 'https://your-cdn.com/tinymce/tinymce.min.js',
      baseUrl: 'https://your-cdn.com/tinymce'
    },
    
    // Standard TinyMCE Configuration (fully compatible)
    height: 500,
    menubar: true,
    toolbar_mode: 'wrap',
    plugins: 'link image code',
    editimage_cors_hosts: ['your-domain.com'],
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright',
    
    // Any other TinyMCE options work here:
    content_style: 'body { font-family: Arial, sans-serif; }',
    setup: (editor) => {
      // Custom setup logic
    },
    init_instance_callback: (editor) => {
      // Custom initialization
    },
    
    // Layer-specific required configuration (always applied)
    _required: {
      branding: false
    }
  }
})

Advanced Usage

Editor.vue (Vanilla)

<template>
  <Editor 
    v-model="content" 
    :init="customConfig"
    :auto-theme="true"
  />
</template>

<script setup>
const content = ref('')

const customConfig = {
  height: 300,
  plugins: 'link image code',
  toolbar: 'undo redo | bold italic | link image | code'
  // Note: Theme switcher will be automatically appended to your toolbar
}
</script>

UEditor.vue (Nuxt UI)

<template>
  <UEditor 
    v-model="content" 
    :init="customConfig"
    size="lg"
    :disabled="false"
    placeholder="Start writing your content..."
  />
</template>

<script setup>
const content = ref('')

const customConfig = {
  height: 300,
  plugins: 'link image code',
  toolbar: 'undo redo | bold italic | link image | code'
  // Note: Theme switcher will be automatically appended to your toolbar
}
</script>

Custom Toolbar with Theme Switcher

Even when you provide a custom toolbar, the theme switcher is automatically added:

<template>
  <Editor 
    v-model="content" 
    :init="{ toolbar: 'bold italic | link' }" 
  />
</template>
<!-- Result: toolbar will be 'bold italic | link | theme-switcher' -->

Configuration Options

The layer is fully compatible with TinyMCE's native configuration. You can use any standard TinyMCE option directly in your app.config.ts:

Layer-Specific Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | cdn.scriptUrl | string | 'https://cdn.xyz.dev/tinymce/tinymce.min.js' | TinyMCE script URL | | cdn.baseUrl | string | 'https://cdn.xyz.dev/tinymce' | Base URL for TinyMCE assets | | _required | object | { branding: false } | Required configuration (always applied) |

Component Props

Editor.vue Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | init | Partial<RawEditorOptions> | undefined | Custom TinyMCE configuration | | autoTheme | boolean | true | Auto-detect and sync with page theme |

UEditor.vue Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | init | Partial<RawEditorOptions> | undefined | Custom TinyMCE configuration | | size | 'sm' \| 'md' \| 'lg' | 'md' | Editor size (affects height) | | disabled | boolean | false | Disable the editor | | placeholder | string | 'Start typing...' | Placeholder text |

Standard TinyMCE Options

All standard TinyMCE configuration options are supported. Here are some common ones:

| Option | Type | Default | Description | |--------|------|---------|-------------| | height | number | 400 | Editor height in pixels | | menubar | boolean | false | Show menubar | | toolbar_mode | string | 'floating' | Toolbar display mode | | plugins | string | See below | Enabled plugins (comma-separated) | | toolbar | string | See below | Toolbar items | | editimage_cors_hosts | string[] | ['picsum.photos'] | CORS hosts for image editing | | content_style | string | - | Custom CSS for editor content | | setup | function | - | Setup callback function | | init_instance_callback | function | - | Initialization callback |

Note: You can use any TinyMCE configuration option. The layer only adds CDN management, required settings, and the theme switcher on top of the standard TinyMCE API.

Theme Customization

The editor supports both light and dark themes with automatic switching:

Light Theme (Default)

• Skin: oxide (light)
• Content CSS: default/content.min.css
• Button: 🌙 (switch to dark)

Dark Theme

• Skin: oxide-dark (dark)
• Content CSS: dark/content.min.css
• Button: ☀️ (switch to light)

Custom Theme Integration

You can integrate the theme switcher with your app's theme system:

<script setup>
// Sync with your app's theme
const appTheme = useAppConfig().theme // or your theme system
const editorTheme = computed(() => appTheme.value === 'dark' ? 'dark' : 'light')
</script>

Default Configuration

{
  height: 400,
  menubar: false,
  toolbar_mode: 'floating',
  plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
  editimage_cors_hosts: ['picsum.photos'],
  toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl"
}

Performance Features

The editor components are optimized for performance with several key features:

Smart Caching

• Theme Detection: 100ms cache to avoid repeated DOM queries
• Color Detection: 200ms cache for background and text colors
• Computed Properties: Memoized expensive calculations

Efficient DOM Operations

• Debounced Updates: 50ms debounce for theme synchronization
• Early Exit: Stop checking elements once colors are found
• Pre-built Templates: CSS templates with variable replacement

Memory Optimization

• Immutable Operations: Spread operators instead of Object.assign
• Safe Element Selection: No eval usage for better security
• Object Lookups: O(1) size calculations instead of conditionals

Real-World Benefits

• Faster Theme Switching: Cached detection + debounced updates
• Reduced Re-renders: Memoized computed properties
• Better Memory Usage: Immutable operations + caching
• Smoother UX: Optimized MutationObserver

Development

Setup

Make sure to install the dependencies:

pnpm install

Development Server

The .playground directory helps you test your layer during development:

pnpm dev

This will start the development server with your layer loaded.

Publishing

To publish your layer to NPM:

npm publish --access public

License

MIT