Utility Functions

splitText(text: string): IElement[]

import { splitText } from '@hufe921/canvas-editor'

const elements = splitText('Hello')
// Returns:
// [
//   { value: 'H' },
//   { value: 'e' },
//   { value: 'l' },
//   { value: 'l' },
//   { value: 'o' }
// ]

// Use with formatting
const formattedElements = splitText('Bold').map(el => ({
  ...el,
  bold: true,
  size: 20
}))

editor.command.executeInsertElementList(formattedElements)

getElementListByHTML(
  html: string,
  options?: IGetElementListByHTMLOption
): IElement[]

import { getElementListByHTML } from '@hufe921/canvas-editor'

// Simple HTML
const html = '<p>Hello <b>World</b></p>'
const elements = getElementListByHTML(html)

// Complex HTML with formatting
const richHtml = `
  <h1>Title</h1>
  <p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
`
const richElements = getElementListByHTML(richHtml)

editor.command.executeInsertElementList(richElements)

createDomFromElementList(
  elementList: IElement[],
  options?: any
): HTMLElement

import { createDomFromElementList } from '@hufe921/canvas-editor'

const elements: IElement[] = [
  { value: 'Hello ' },
  { value: 'World', bold: true }
]

const domNode = createDomFromElementList(elements)

// Append to page
document.body.appendChild(domNode)

// Or get HTML string
const htmlString = domNode.outerHTML

getTextFromElementList(
  elementList: IElement[],
  options?: any
): string

import { getTextFromElementList } from '@hufe921/canvas-editor'

const elements: IElement[] = [
  { value: 'Hello ' },
  { value: 'World', bold: true },
  { value: '!', color: '#FF0000' }
]

const text = getTextFromElementList(elements)
// Returns: 'Hello World!'

// Use with editor data
const data = editor.command.getValue()
const mainText = getTextFromElementList(data.data.main)
const headerText = getTextFromElementList(data.data.header || [])

console.log('Document text:', mainText)
console.log('Header text:', headerText)

import Editor, {
  splitText,
  getElementListByHTML,
  createDomFromElementList,
  getTextFromElementList,
  IElement
} from '@hufe921/canvas-editor'

const editor = new Editor(container, data)

// 1. Insert text with character-level control
function insertAnimatedText(text: string) {
  const chars = splitText(text)
  
  // Add color gradient
  const colored = chars.map((char, index) => {
    const hue = (index / chars.length) * 360
    return {
      ...char,
      color: `hsl(${hue}, 70%, 50%)`,
      size: 20
    }
  })
  
  editor.command.executeInsertElementList(colored)
}

// 2. Import HTML content
function importHTML(html: string) {
  const elements = getElementListByHTML(html)
  editor.command.executeInsertElementList(elements)
}

// Example usage
const htmlContent = `
  <h1>Welcome</h1>
  <p>This is <b>bold</b> and this is <i>italic</i>.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
`
importHTML(htmlContent)

// 3. Export as HTML
function exportAsHTML(): string {
  const data = editor.command.getValue()
  const domNode = createDomFromElementList(data.data.main)
  return domNode.innerHTML
}

// 4. Get plain text
function getPlainText(): string {
  const data = editor.command.getValue()
  return getTextFromElementList(data.data.main)
}

// 5. Word count
function getWordCount(): number {
  const text = getPlainText()
  return text.split(/\s+/).filter(word => word.length > 0).length
}

// 6. Search and highlight
function searchText(query: string) {
  const text = getPlainText()
  const index = text.toLowerCase().indexOf(query.toLowerCase())
  
  if (index !== -1) {
    editor.command.executeSearch({
      value: query,
      matchCase: false
    })
  }
}

// 7. Content validation
function validateContent(): boolean {
  const text = getPlainText()
  const minLength = 100
  
  if (text.length < minLength) {
    alert(`Content must be at least ${minLength} characters`)
    return false
  }
  
  return true
}

// 8. Copy formatted content
function copyFormatted() {
  const data = editor.command.getValue()
  const html = exportAsHTML()
  
  // Copy both HTML and plain text
  const text = getPlainText()
  
  navigator.clipboard.write([
    new ClipboardItem({
      'text/html': new Blob([html], { type: 'text/html' }),
      'text/plain': new Blob([text], { type: 'text/plain' })
    })
  ])
}

// 9. Generate preview
function generatePreview(): HTMLElement {
  const data = editor.command.getValue()
  const previewNode = createDomFromElementList(data.data.main)
  
  // Style the preview
  previewNode.style.padding = '20px'
  previewNode.style.backgroundColor = '#f5f5f5'
  previewNode.style.borderRadius = '8px'
  
  return previewNode
}

// 10. Import from clipboard
async function importFromClipboard() {
  const clipboardData = await navigator.clipboard.read()
  
  for (const item of clipboardData) {
    if (item.types.includes('text/html')) {
      const blob = await item.getType('text/html')
      const html = await blob.text()
      importHTML(html)
      break
    } else if (item.types.includes('text/plain')) {
      const blob = await item.getType('text/plain')
      const text = await blob.text()
      const chars = splitText(text)
      editor.command.executeInsertElementList(chars)
      break
    }
  }
}

interface IGetElementListByHTMLOption {
  // Implementation-specific options
  // Refer to source code for details
}

// Good - Single insert
const elements = splitText('Hello World')
editor.command.executeInsertElementList(elements)

// Bad - Multiple inserts
for (const char of 'Hello World') {
  editor.command.executeInsertElementList([{ value: char }])
}

import DOMPurify from 'dompurify'
import { getElementListByHTML } from '@hufe921/canvas-editor'

// Sanitize HTML before importing
function safeImportHTML(untrustedHTML: string) {
  const cleanHTML = DOMPurify.sanitize(untrustedHTML)
  const elements = getElementListByHTML(cleanHTML)
  editor.command.executeInsertElementList(elements)
}

// Good - Extract text once
const text = getPlainText()
const wordCount = text.split(/\s+/).length
const charCount = text.length

// Bad - Extract multiple times
const wordCount = getPlainText().split(/\s+/).length
const charCount = getPlainText().length

import { IElement } from '@hufe921/canvas-editor'

function processElements(elements: IElement[]): string {
  return getTextFromElementList(elements)
}

// TypeScript ensures type safety
const data = editor.command.getValue()
const text = processElements(data.data.main) // ✓ Type-safe