import Editor from "@tech-library/react-editor"

const MyComponent = () => {
  const handleContentChange = content => {
    console.log("Content changed:", content)
  }

  return (
    <Editor
      initialContent="<p>Hello World!</p>"
      placeholder="Start writing..."
      onContentChange={handleContentChange}
      className="my-editor"
    />
  )
}

import Editor from "@tech-library/react-editor"

const minimalConfig = {
  toolbar: {
    items: {
      bold: true,
      italic: true,
      link: true,
      // All other items will default to false
    },
  },
  features: {
    preview: false,
    fileUpload: false,
  },
}

const MyComponent = () => {
  return <Editor config={minimalConfig} />
}

import Editor from "@tech-library/react-editor"
import { useState } from "react"

const MarkdownEditor = () => {
  const [markdownContent, setMarkdownContent] = useState(
    '# Welcome to Markdown Mode!\n\n' +
    'This editor supports **Markdown** syntax:\n\n' +
    '- Use **bold** and *italic* text\n' +
    '- Create [links](https://example.com)\n' +
    '- Add `inline code` and\n\n' +
    '```\ncode blocks\n```\n\n' +
    '## Try these shortcuts:\n' +
    '- **Ctrl+B** for bold\n' +
    '- **Ctrl+I** for italic\n' +
    '- **Ctrl+K** for links'
  )

  const handleMarkdownContentChange = (content) => {
    setMarkdownContent(content)
    console.log("Markdown content:", content)
  }

  return (
    <Editor
      initialContent={markdownContent}
      onContentChange={handleMarkdownContentChange}
      config={{
        settings: {
          placeholder: "Write in Markdown syntax...",
          editorType: "markdown"
        }
      }}
    />
  )
}

const markdownConfig = {
  features: {
    preview: true,
    fileUpload: false
  },
  settings: {
    placeholder: 'Write in Markdown syntax...',
    editorType: 'markdown'
  }
}

const MarkdownEditor = () => {
  return (
    <Editor
      config={markdownConfig}
      initialContent="# Welcome to Markdown Mode!\n\nThis editor supports **Markdown** syntax..."
    />
  )
}

const minimalConfig = {
  toolbar: {
    show: true,
    items: {
      bold: true,
      italic: true,
      underline: true,
      link: true,
      // All other items will default to false
      strikethrough: false,
      alignLeft: false,
      alignCenter: false,
      alignRight: false,
      alignJustify: false,
      orderedList: false,
      unorderedList: false,
      heading1: false,
      heading2: false,
      heading3: false,
      fontFamily: false,
      fontSize: false,
      textColor: false,
      backgroundColor: false,
      inlineCode: false,
      codeBlock: false,
      fileUpload: false,
      preview: false,
      previewLayout: false
    }
  },
  floatingToolbar: {
    show: true,
    items: {
      bold: true,
      italic: true,
      underline: false,
      link: true
    }
  },
  features: {
    preview: false,
    fileUpload: false
  },
  settings: {
    placeholder: 'Minimal editor - basic formatting only...'
  }
}

const writer = {
  toolbar: {
    items: {
      bold: true,
      italic: true,
      underline: true,
      heading1: true,
      heading2: true,
      heading3: true,
      orderedList: true,
      unorderedList: true,
      preview: true,
      previewLayout: true,
    },
  },
  settings: { placeholder: "Start writing..." },
}

const code = {
  toolbar: {
    items: {
      inlineCode: true,
      codeBlock: true,
      fileUpload: true,
      preview: true,
      bold: false,
      italic: false,
    },
  },
  floatingToolbar: { show: false },
  settings: { spellCheck: false },
}

const noToolbar = {
  toolbar: { show: false },
  floatingToolbar: { show: false },
}

const editorConfig = {
  toolbar: {
    show: true, // Show/hide entire toolbar
    items: {
      // Text Formatting
      bold: true,
      italic: true,
      underline: true,
      strikethrough: true,

      // Alignment
      alignLeft: true,
      alignCenter: true,
      alignRight: true,
      alignJustify: true,

      // Lists
      orderedList: true,
      unorderedList: true,

      // Headings
      heading1: true,
      heading2: true,
      heading3: true,

      // Typography
      fontFamily: true,
      fontSize: true,

      // Colors
      textColor: true,
      backgroundColor: true,

      // Links & Code
      link: true,
      inlineCode: true,
      codeBlock: true,

      // Media
      fileUpload: true,

      // View
      preview: true,
      previewLayout: true,
    },
  },
  floatingToolbar: {
    show: true,
    items: {
      bold: true,
      italic: true,
      underline: true,
      link: true,
    },
  },
  features: {
    preview: true,
    fileUpload: true,
    inlineLinkInsert: true,
    customModals: true,
    dragAndDrop: true,
  },
  settings: {
    placeholder: "Start writing...",
    initialContent: "",
    autoFocus: false,
    spellCheck: true,
  },
}

import { useRef } from 'react'
import Editor from "@tech-library/react-editor"

const MyComponent = () => {
  const editorRef = useRef(null)

  // Focus the editor
  const focusEditor = () => {
    editorRef.current?.focus()
  }

  // Remove focus from the editor
  const blurEditor = () => {
    editorRef.current?.blur()
  }

  // Check if editor currently has focus
  const checkEditorFocus = () => {
    const hasFocus = editorRef.current?.hasFocus()
    console.log(`Editor has focus: ${hasFocus}`)
  }

  // Enable the editor (make it editable)
  const enableEditor = () => {
    editorRef.current?.enable()
  }

  // Disable the editor (make it read-only)
  const disableEditor = () => {
    editorRef.current?.disable()
  }

  // Clear all content from the editor
  const clearEditor = () => {
    editorRef.current?.clear()
  }

  // Set content programmatically
  const setEditorContent = () => {
    editorRef.current?.setContent('<p>New content set programmatically!</p>')
  }

  // Get current content and editor type
  const getEditorContents = () => {
    const contents = editorRef.current?.getContents()
    const editorType = editorRef.current?.getEditorType()
    console.log(`Editor Type: ${editorType}`)
    console.log(`Contents: ${contents}`)
  }

  return (
    <div>
      {/* Control buttons */}
      <div className="mb-4 flex gap-2">
        <button onClick={focusEditor}>Focus</button>
        <button onClick={blurEditor}>Blur</button>
        <button onClick={checkEditorFocus}>Check Focus</button>
        <button onClick={enableEditor}>Enable</button>
        <button onClick={disableEditor}>Disable</button>
        <button onClick={clearEditor}>Clear</button>
        <button onClick={setEditorContent}>Set Content</button>
        <button onClick={getEditorContents}>Get Contents</button>
      </div>

      {/* Editor with ref */}
      <Editor
        ref={editorRef}
        initialContent="<p>Initial content</p>"
        placeholder="Start writing..."
      />
    </div>
  )
}