@xyz/editor

@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