import React from 'react';
import { Editor } from 'lilac-editor';

function MyApp() {
  const [content, setContent] = useState('');

  return (
    <Editor
      initialContent="<h1>Welcome to Lilac!</h1><p>Start typing...</p>"
      placeholder="Enter your text here..."
      onChange={setContent}
      theme="light"
      autoFocus
      toolbar={{
        show: true,
        tools: ['bold', 'italic', 'underline', 'separator', 'heading1', 'heading2']
      }}
    />
  );
}

import React from 'react';
import { Editor, wordCountPlugin, emojiPlugin, tablePlugin } from 'lilac-editor';

function MyApp() {
  const [content, setContent] = useState('');

  return (
    <Editor
      initialContent="<h1>Welcome to Lilac!</h1><p>Start typing...</p>"
      onChange={setContent}
      plugins={[
        wordCountPlugin,    // Document statistics panel
        emojiPlugin,        // Emoji picker with Ctrl+Shift+E
        tablePlugin,        // Table inserter with Ctrl+Shift+T
      ]}
      toolbar={{ show: true }}
    />
  );
}

import React, { useRef } from 'react';
import { Editor, type EditorRef } from 'lilac-editor';

function MyApp() {
  const editorRef = useRef<EditorRef>(null);

  const handleUndo = () => {
    editorRef.current?.undo();
  };

  const handleRedo = () => {
    editorRef.current?.redo();
  };

  const getContent = () => {
    const content = editorRef.current?.getContent();
    console.log('Current content:', content);
  };

  return (
    <div>
      <div>
        <button onClick={handleUndo}>Undo</button>
        <button onClick={handleRedo}>Redo</button>
        <button onClick={getContent}>Get Content</button>
      </div>
      
      <Editor
        ref={editorRef}
        initialContent="Welcome to Lilac Editor!"
        maxLength={5000}
        toolbar={{ show: true }}
      />
    </div>
  );
}

import React from 'react';
import { Editor } from 'lilac-editor';

function MyApp() {
  return (
    <Editor
      initialContent="<h1>Welcome to Lilac!</h1><p>This editor has custom height settings...</p>"
      placeholder="Start typing..."
      minHeight={300}
      maxHeight={500}
      toolbar={{ show: true }}
    />
  );
}

<Editor
  toolbar={{
    show: true,
    tools: [
      'bold',
      'italic',
      'underline',
      'separator',
      'heading1',
      'heading2',
      'heading3',
      'paragraph',
      'separator',
      'bulletList',
      'orderedList',
      'blockquote',
      'separator',
      'link',
      'codeBlock'
    ]
  }}
/>

import { wordCountPlugin } from 'lilac-editor';

<Editor plugins={[wordCountPlugin]} />

import { emojiPlugin } from 'lilac-editor';

<Editor plugins={[emojiPlugin]} />

import { tablePlugin } from 'lilac-editor';

<Editor plugins={[tablePlugin]} />

import { EditorPlugin, EditorContext } from 'lilac-editor';
import { MyIcon } from 'lucide-react';

export const myCustomPlugin: EditorPlugin = {
  id: 'my-custom-plugin',
  name: 'My Custom Plugin',
  version: '1.0.0',
  description: 'A custom plugin that does amazing things',
  
  // Add toolbar buttons
  toolbarButtons: [
    {
      id: 'my-button',
      icon: <MyIcon size={16} />,
      label: 'My Tool',
      tooltip: 'My custom tool (Ctrl+M)',
      onClick: (context: EditorContext) => {
        context.insertContent('<strong>Custom content!</strong>');
      },
    },
  ],
  
  // Add keyboard shortcuts
  keyboardShortcuts: [
    {
      key: 'm',
      ctrlKey: true,
      action: (context: EditorContext) => {
        context.insertContent('<em>Shortcut triggered!</em>');
      },
    },
  ],
  
  // Add custom styles
  styles: `
    .my-custom-styles {
      color: #ff6b6b;
      font-weight: bold;
    }
  `,
  
  // Lifecycle hooks
  onInstall: (context) => console.log('Plugin installed'),
  onContentChange: (content, context) => {
    // React to content changes
  },
};

import { pluginManager } from 'lilac-editor';

// Install a plugin
pluginManager.install(myCustomPlugin);

// Check if installed
if (pluginManager.isInstalled('my-plugin-id')) {
  console.log('Plugin is active');
}

// Get all plugins
const allPlugins = pluginManager.getAllPlugins();

// Uninstall a plugin
pluginManager.uninstall('my-plugin-id');

// Plugin system
import { 
  PluginManager, 
  pluginManager,
  EditorPlugin,
  EditorContext 
} from 'lilac-editor';

// Built-in plugins
import { 
  wordCountPlugin,
  emojiPlugin,
  tablePlugin 
} from 'lilac-editor';