ElementType Enum

ElementType.TEXT = 'text'

const textElement: IElement = {
  type: ElementType.TEXT,  // Optional - this is default
  value: 'Hello World',
  bold: true,
  size: 18
}

ElementType.IMAGE = 'image'

import { ElementType, ImageDisplay } from '@hufe921/canvas-editor'

const imageElement: IElement = {
  type: ElementType.IMAGE,
  value: 'data:image/png;base64,...',
  width: 300,
  height: 200,
  imgDisplay: ImageDisplay.INLINE
}

ElementType.TABLE = 'table'

const tableElement: IElement = {
  type: ElementType.TABLE,
  value: '',
  colgroup: [{ width: 100 }, { width: 200 }],
  trList: [
    {
      height: 40,
      tdList: [
        { valueList: [{ value: 'Cell 1' }] },
        { valueList: [{ value: 'Cell 2' }] }
      ]
    }
  ]
}

ElementType.HYPERLINK = 'hyperlink'

const linkElement: IElement = {
  type: ElementType.HYPERLINK,
  value: '',
  url: 'https://example.com',
  valueList: [
    { value: 'Click here' }
  ]
}

ElementType.SUPERSCRIPT = 'superscript'

const element: IElement = {
  type: ElementType.SUPERSCRIPT,
  value: '2'
}
// Renders as superscript

ElementType.SUBSCRIPT = 'subscript'

const element: IElement = {
  type: ElementType.SUBSCRIPT,
  value: '2'
}
// Renders as subscript

ElementType.SEPARATOR = 'separator'

const separator: IElement = {
  type: ElementType.SEPARATOR,
  value: '',
  dashArray: [5, 5],  // Dashed line
  lineWidth: 1
}

ElementType.PAGE_BREAK = 'pageBreak'

const pageBreak: IElement = {
  type: ElementType.PAGE_BREAK,
  value: ''
}

ElementType.CONTROL = 'control'

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

const controlElement: IElement = {
  type: ElementType.CONTROL,
  value: '',
  control: {
    type: ControlType.TEXT,
    value: null,
    conceptId: 'firstName',
    placeholder: 'Enter name'
  }
}

ElementType.CHECKBOX = 'checkbox'

const checkbox: IElement = {
  type: ElementType.CHECKBOX,
  value: '',
  checkbox: {
    value: true  // checked
  }
}

ElementType.RADIO = 'radio'

const radio: IElement = {
  type: ElementType.RADIO,
  value: '',
  radio: {
    value: false  // not selected
  }
}

ElementType.LATEX = 'latex'

const latex: IElement = {
  type: ElementType.LATEX,
  value: 'E = mc^2',
  laTexSVG: '<svg>...</svg>'  // Rendered SVG
}

ElementType.TAB = 'tab'

const tab: IElement = {
  type: ElementType.TAB,
  value: '\t'
}

ElementType.DATE = 'date'

const date: IElement = {
  type: ElementType.DATE,
  value: '2024-01-15',
  dateFormat: 'YYYY-MM-DD'
}

ElementType.BLOCK = 'block'

const block: IElement = {
  type: ElementType.BLOCK,
  value: 'function() {}',
  block: {
    type: BlockType.CODE
  }
}

ElementType.TITLE = 'title'

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

const title: IElement = {
  type: ElementType.TITLE,
  value: 'Chapter 1',
  level: TitleLevel.FIRST
}

ElementType.LIST = 'list'

import { ListType, ListStyle } from '@hufe921/canvas-editor'

const listItem: IElement = {
  type: ElementType.LIST,
  value: 'First item',
  listType: ListType.UL,
  listStyle: ListStyle.DISC
}

ElementType.LABEL = 'label'

const label: IElement = {
  type: ElementType.LABEL,
  value: 'Important',
  label: {
    color: '#FFFFFF',
    backgroundColor: '#FF0000',
    borderRadius: 4
  }
}

ElementType.AREA = 'area'

const area: IElement = {
  type: ElementType.AREA,
  value: '',
  areaId: 'header-area',
  valueList: [
    { value: 'Content in area' }
  ]
}

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

function processElement(element: IElement) {
  switch (element.type) {
    case ElementType.TEXT:
      console.log('Text:', element.value)
      break
    
    case ElementType.IMAGE:
      console.log('Image:', element.width, element.height)
      break
    
    case ElementType.TABLE:
      console.log('Table with', element.trList?.length, 'rows')
      break
    
    case ElementType.CONTROL:
      console.log('Control:', element.control?.type)
      break
  }
}

const data = editor.command.getValue()

// Find all images
const images = data.data.main.filter(
  el => el.type === ElementType.IMAGE
)

// Find all tables
const tables = data.data.main.filter(
  el => el.type === ElementType.TABLE
)

// Find all controls
const controls = data.data.main.filter(
  el => el.type === ElementType.CONTROL
)

function createElement(type: ElementType, value: string): IElement {
  const baseElement: IElement = {
    type,
    value
  }
  
  // Add type-specific properties
  switch (type) {
    case ElementType.IMAGE:
      return { ...baseElement, width: 200, height: 150 }
    
    case ElementType.SEPARATOR:
      return { ...baseElement, dashArray: [5, 5] }
    
    case ElementType.PAGE_BREAK:
      return { ...baseElement, value: '' }
    
    default:
      return baseElement
  }
}

import Editor, {
  ElementType,
  ImageDisplay,
  ControlType,
  ListType,
  ListStyle,
  TitleLevel
} from '@hufe921/canvas-editor'

const editor = new Editor(container, data)

// Insert various element types
const elements: IElement[] = [
  {
    type: ElementType.TITLE,
    value: 'Document Title',
    level: TitleLevel.FIRST
  },
  {
    type: ElementType.TEXT,
    value: 'Introduction paragraph.'
  },
  {
    type: ElementType.SEPARATOR,
    value: '',
    dashArray: [5, 5]
  },
  {
    type: ElementType.IMAGE,
    value: 'data:image/png;base64,...',
    width: 300,
    height: 200,
    imgDisplay: ImageDisplay.BLOCK
  },
  {
    type: ElementType.LIST,
    value: 'List item 1',
    listType: ListType.UL,
    listStyle: ListStyle.DISC
  },
  {
    type: ElementType.PAGE_BREAK,
    value: ''
  }
]

editor.command.executeInsertElementList(elements)

// Query by type
const result = editor.command.getValue()

const elementsByType = {
  images: result.data.main.filter(e => e.type === ElementType.IMAGE),
  tables: result.data.main.filter(e => e.type === ElementType.TABLE),
  controls: result.data.main.filter(e => e.type === ElementType.CONTROL)
}

console.log(`Found ${elementsByType.images.length} images`)
console.log(`Found ${elementsByType.tables.length} tables`)
console.log(`Found ${elementsByType.controls.length} controls`)