import 'authorly-editor/styles.css';

import { AuthorlyEditor } from 'authorly-editor';
import 'authorly-editor/styles.css';

function App() {
  const [content, setContent] = useState('<p>Hello World!</p>');

  return (
    <AuthorlyEditor
      initialContent={content}
      onChange={setContent}
    />
  );
}

import { AuthorlyEditor } from 'authorly-editor';
import 'authorly-editor/styles.css';

<AuthorlyEditor
  initialContent="<p>Start writing...</p>"
  onChange={(html) => console.log(html)}
  onSave={(html) => saveToDatabase(html)}
  darkMode={false}
  showToolbar={true}
  placeholder="Type '/' for commands..."
/>

import { AuthorlyRenderer } from 'authorly-editor';
import 'authorly-editor/styles.css';

<AuthorlyRenderer
  html={savedContent}
  darkMode={false}
  enableCodeCopy={true}
/>

import { AuthorlyTableOfContents, AuthorlyRenderer } from 'authorly-editor';

<div style={{ display: 'flex' }}>
  <aside style={{ width: 200 }}>
    <AuthorlyTableOfContents html={content} title="Contents" />
  </aside>
  <main>
    <AuthorlyRenderer html={content} enableHeadingIds={true} />
  </main>
</div>

import { useRef } from 'react';
import { AuthorlyEditor, EditorRef } from 'authorly-editor';

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

  return (
    <>
      <AuthorlyEditor ref={editorRef} />
      <button onClick={() => console.log(editorRef.current?.getHTML())}>
        Get HTML
      </button>
    </>
  );
}

import { useState, useRef } from 'react';
import { 
  AuthorlyEditor, 
  AuthorlyRenderer,
  EditorRef 
} from 'authorly-editor';
import 'authorly-editor/styles.css';

function BlogEditor() {
  const editorRef = useRef<EditorRef>(null);
  const [content, setContent] = useState('<p>Write your post...</p>');
  const [showPreview, setShowPreview] = useState(false);

  const handleSave = async (html: string) => {
    await fetch('/api/posts', {
      method: 'POST',
      body: JSON.stringify({ content: html }),
    });
  };

  return (
    <div>
      <button onClick={() => setShowPreview(!showPreview)}>
        {showPreview ? 'Edit' : 'Preview'}
      </button>

      {showPreview ? (
        <AuthorlyRenderer html={content} />
      ) : (
        <AuthorlyEditor
          ref={editorRef}
          initialContent={content}
          onChange={setContent}
          onSave={handleSave}
        />
      )}
    </div>
  );
}

import { 
  AuthorlyRenderer, 
  AuthorlyTableOfContents 
} from 'authorly-editor';
import 'authorly-editor/styles.css';

function DocsPage({ content }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '250px 1fr', gap: '2rem' }}>
      <aside style={{ position: 'sticky', top: '1rem', height: 'fit-content' }}>
        <AuthorlyTableOfContents 
          html={content} 
          title="On this page"
          maxLevel={3}
        />
      </aside>
      <main>
        <AuthorlyRenderer 
          html={content}
          enableHeadingIds={true}
          enableCodeCopy={true}
        />
      </main>
    </div>
  );
}

import { AuthorlyEditor, createCloudinaryConfig } from 'authorly-editor';

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

  // Configure Cloudinary upload
  const uploadConfig = createCloudinaryConfig({
    cloudName: 'your-cloud-name',
    uploadPreset: 'your-upload-preset',
    folder: 'blog-images',
    maxSizeMB: 5,
  });

  return (
    <AuthorlyEditor
      initialContent={content}
      onChange={setContent}
      imageUploadConfig={uploadConfig}
      onUploadSuccess={(result) => {
        console.log('Image uploaded:', result.url);
      }}
    />
  );
}

import { useState } from 'react';
import { AuthorlyEditor } from 'authorly-editor';

function ThemedEditor() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div style={{ 
      background: darkMode ? '#0f172a' : '#ffffff',
      minHeight: '100vh',
      padding: '2rem'
    }}>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Theme
      </button>
      <AuthorlyEditor darkMode={darkMode} />
    </div>
  );
}

import { blockRegistry, BlockDefinition } from 'authorly-editor';

const myCustomBlock: BlockDefinition = {
  name: 'custom',
  tag: 'div',
  editable: true,
  allowedChildren: ['text', 'inline'],
  label: 'Custom Block',
  icon: 'box',
  create: (data) => {
    const el = document.createElement('div');
    el.className = 'my-custom-block';
    el.contentEditable = 'true';
    el.innerHTML = data?.content || '';
    return el;
  },
  getData: (el) => ({ content: el.innerHTML }),
  update: (el, data) => { el.innerHTML = data.content; },
};

blockRegistry.register(myCustomBlock);

import type {
  EditorRef,
  EditorInstance,
  BlockType,
  BlockData,
  AuthorlyEditorProps,
  AuthorlyRendererProps,
  AuthorlyTableOfContentsProps,
  TocItem,
  // Legacy names still available:
  ContentBlocksEditorProps,
  ContentBlocksRendererProps,
  TableOfContentsProps,
} from 'authorly-editor';