import React, { useState } from 'react'
import { ScrivlyEditor } from 'scrivly'
import 'scrivly/dist/styles.css' // Import styles

function App() {
  const [content, setContent] = useState('<p>Start writing...</p>')

  return (
    <ScrivlyEditor
      value={content}
      onChange={setContent}
      placeholder="Start writing something amazing..."
      showWordCount={true}
      showCharCount={true}
      darkMode={false}
    />
  )
}

export default App

import { ScrivlyEditor, CustomTool } from 'scrivly'
import { Highlighter } from 'lucide-react'

const customTools: CustomTool[] = [
  {
    id: 'highlight',
    name: 'Highlight',
    icon: Highlighter,
    tooltip: 'Highlight text',
    group: 'formatting', // Optional grouping
    action: (editor) => {
      // Your custom action
      document.execCommand('hiliteColor', false, '#ffff00')
    },
    isActive: (editor) => {
      // Return true if tool should appear active
      return document.queryCommandState('hiliteColor')
    }
  }
]

function App() {
  return (
    <ScrivlyEditor
      customTools={customTools}
      toolbarOptions={['bold', 'italic', 'customTool']} // Include 'customTool' to show custom tools
    />
  )
}

type ToolbarOption = 
  | "bold" | "italic" | "underline" | "strikethrough"
  | "code" | "subscript" | "superscript"
  | "textColor" | "backgroundColor" 
  | "fontSize" | "fontFamily" | "formatBlock"
  | "blockquote" | "bulletList" | "numberList" | "checklist"
  | "codeBlock" | "table" | "link" | "image" | "video" | "emoji"
  | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify"
  | "indent" | "outdent" | "lineHeight" | "clear"
  | "undo" | "redo" | "fullscreen" | "darkMode"

import { ScrivlyEditor } from 'scrivly'

function App() {
  const handleImageUpload = async (file: File): Promise<string> => {
    // Upload to your server/cloud storage
    const formData = new FormData()
    formData.append('image', file)
    
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    
    const { url } = await response.json()
    return url
  }

  return (
    <ScrivlyEditor
      allowImageUpload={true}
      onImageUpload={handleImageUpload}
    />
  )
}

import { ScrivlyEditor } from 'scrivly'
import { useState } from 'react'

function App() {
  const [isDark, setIsDark] = useState(false)

  return (
    <ScrivlyEditor
      darkMode={isDark}
      onDarkModeChange={setIsDark}
      toolbarOptions={['darkMode', 'bold', 'italic']} // Include darkMode button
    />
  )
}

import { ScrivlyEditor, ScrivlyEditorProps, EditorState } from 'scrivly'

const editorProps: ScrivlyEditorProps = {
  value: '<p>Hello World</p>',
  onChange: (content: string) => console.log(content),
  onStateChange: (state: EditorState) => console.log(state),
  toolbarOptions: ['bold', 'italic', 'underline'],
  darkMode: true
}

function MyEditor() {
  return <ScrivlyEditor {...editorProps} />
}

import { ScrivlyEditor } from 'scrivly'
import { useState, useCallback } from 'react'

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

  const handleAutoSave = useCallback(async (content: string) => {
    try {
      await fetch('/api/save', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
      })
      console.log('Content auto-saved!')
    } catch (error) {
      console.error('Auto-save failed:', error)
    }
  }, [])

  return (
    <ScrivlyEditor
      value={content}
      onChange={setContent}
      autoSave={true}
      autoSaveInterval={3000}
      onAutoSave={handleAutoSave}
    />
  )
}

import { ScrivlyEditor } from 'scrivly'

const customTheme = {
  primary: '#6366f1',
  secondary: '#8b5cf6',
  background: '#ffffff',
  surface: '#f8fafc',
  text: '#1e293b'
}

function ThemedEditor() {
  return (
    <ScrivlyEditor
      theme={customTheme}
      className="custom-editor"
    />
  )
}