import { RayEditor } from '@rohanyeole/ray-editor';
import '@rohanyeole/ray-editor/css';

const editor = new RayEditor('my-editor', {
  theme: 'light',            // 'light' | 'dark' | 'auto'
  wordCount: true,          // show live word count bar
  slashCommands: true,      // / command palette
  markdownShortcuts: true,  // ## → H2, **text** → bold
  toolbar: [
    ['bold', 'italic', 'underline', 'highlight'],
    ['headings', 'blockquote', 'callout'],
    ['orderedList', 'unorderedList', 'taskList'],
    ['codeBlock', 'link', 'table'],
    ['undo', 'redo', 'removeFormat'],
  ],
  onChange: (html) => console.log('changed', html),
});

editor.setContent('<p>Hello world!</p>');
const html = editor.getContent(); // clean HTML string

// ── Content ─────────────────────────────────────────────────────────
editor.getContent()             // → clean HTML string (strips UI chrome)
editor.setContent(html)          // set HTML — rebuilds code blocks, tables, task lists

// ── Theme ────────────────────────────────────────────────────────────
editor.setTheme('dark')           // 'light' | 'dark' | 'auto'

// ── Editing mode ─────────────────────────────────────────────────────
editor.setReadOnly(true)         // lock/unlock editing + toolbar

// ── Word count ───────────────────────────────────────────────────────
editor.getWordCount()            // → { words: number, chars: number }

// ── Export ───────────────────────────────────────────────────────────
editor.exportHtml()              // downloads filename.html with getContent() output
editor.exportText()              // downloads filename.txt (plain text, strips tags)

// ── Events ───────────────────────────────────────────────────────────
editor.on('content:change', (html) => {});
editor.on('selection:change', () => {});
editor.on('focus', () => {});
editor.on('blur', () => {});
editor.off('content:change', handler);

// ── Plugins ──────────────────────────────────────────────────────────
editor.use({ name: 'my-plugin', install(ed) { /* ... */ } });

// ── Slash commands ───────────────────────────────────────────────────
editor.registerSlashCommand({
  name: "Today's Date", icon: '📅',
  description: 'Insert today\'s date',
  action: () => document.execCommand('insertText', false, new Date().toLocaleDateString()),
});

// ── Cleanup ──────────────────────────────────────────────────────────
editor.destroy();                  // removes event listeners and DOM — call in SPA unmount

import type { RayPlugin } from '@rohanyeole/ray-editor';

const myPlugin: RayPlugin = {
  name: 'my-plugin',
  version: '1.0.0',

  install(editor) {
    // Listen to content changes
    editor.on('content:change', (html) => {
      console.log('changed:', html.length, 'chars');
    });

    // Register a custom slash command
    editor.registerSlashCommand({
      name: 'Timestamp', icon: '🕐', description: 'Insert current timestamp',
      action: () => document.execCommand('insertText', false, new Date().toISOString()),
    });
  },

  destroy() {
    // Cleanup — called by editor.destroy()
  },
};

// Install at construction time:
const editor = new RayEditor('editor', { plugins: [myPlugin] });

// Or after construction:
editor.use(myPlugin);

editor.registerSlashCommand({
  name: 'Template',                     // shown in palette
  icon: '📄',                           // emoji or text
  description: 'Insert a bug report template',
  action: () => {
    editor.setContent(`
      <h2>Bug Report</h2>
      <p><strong>Steps to reproduce:</strong></p>
      <ol><li></li></ol>
      <p><strong>Expected:</strong></p>
      <p><strong>Actual:</strong></p>
    `);
  },
});

<ul class="ray-task-list">
  <li data-type="taskItem" data-checked="false">Buy groceries</li>
  <li data-type="taskItem" data-checked="true">Call the bank</li>
</ul>

<div class="ray-callout ray-callout-info">
  <span class="ray-callout-icon">ℹ️</span>
  <div class="ray-callout-body">Your note here.</div>
</div>

/* Override editor colors for your brand */
.ray-editor-wrapper {
  --ray-bg: #f0f9ff;
  --ray-toolbar-bg: #e0f2fe;
  --ray-border: #bae6fd;
  --ray-accent: #0284c7;
  --ray-text: #0c4a6e;
}