How to use the @edtr-io/core.StateType.list function in @edtr-io/core

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { InputExerciseEditor } from './editor'
import { createIcon, faKeyboard } from '@edtr-io/editor-ui'

export const wrongAnswerObject = StateType.object({
  value: StateType.string(''),
  feedback: StateType.child()
})
export const inputExerciseState = StateType.object({
  type: StateType.string('Text'),
  correctAnswers: StateType.list(StateType.string('')),
  wrongAnswers: StateType.list(wrongAnswerObject)
})
export const inputExercisePlugin: StatefulPlugin = {
  Component: InputExerciseEditor,
  state: inputExerciseState,
  title: 'Eingabefeld',
  icon: createIcon(faKeyboard),
  description: 'Füge deiner Aufgabe ein Eingabefeld für die Lernenden hinzu.'
}

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { RowsPlugin } from './editor'

export const rowsState = StateType.list(StateType.child(), 1)

export const rowsPlugin: StatefulPlugin = {
  Component: RowsPlugin,
  state: rowsState
}

import { StateType, StatefulPlugin } from '@edtr-io/core'

import { ScMcExerciseEditor } from './editor'
import { createIcon, faDotCircle } from '@edtr-io/editor-ui'

export const AnswerProps = StateType.object({
  id: StateType.child(),
  isCorrect: StateType.boolean(false),
  feedback: StateType.child(),
  hasFeedback: StateType.boolean(false)
})

export const scMcState = StateType.object({
  isSingleChoice: StateType.boolean(false),
  answers: StateType.list(AnswerProps)
})

export const scMcExercisePlugin: StatefulPlugin = {
  Component: ScMcExerciseEditor,
  state: scMcState,
  icon: createIcon(faDotCircle),
  title: 'Auswahlaufgabe',
  description:
    'Füge deiner Aufgabe mehrere Single- oder Multiplechoice-Antworten hinzu.'
}

import { StatefulPlugin, StateType } from '@edtr-io/core'

import { InputExerciseEditor } from './editor'
import { createIcon, faKeyboard } from '@edtr-io/editor-ui'

export const wrongAnswerObject = StateType.object({
  value: StateType.string(''),
  feedback: StateType.child()
})
export const inputExerciseState = StateType.object({
  type: StateType.string('Text'),
  correctAnswers: StateType.list(StateType.string('')),
  wrongAnswers: StateType.list(wrongAnswerObject)
})
export const inputExercisePlugin: StatefulPlugin = {
  Component: InputExerciseEditor,
  state: inputExerciseState,
  title: 'Eingabefeld',
  icon: createIcon(faKeyboard),
  description: 'Füge deiner Aufgabe ein Eingabefeld für die Lernenden hinzu.'
}

import {
  StatefulPlugin,
  StatefulPluginEditorProps,
  StateType
} from '@edtr-io/core'
import * as React from 'react'

import { RowsEditor } from './editor'
import { RowsRenderer } from './renderer'
import { createPluginTheme } from '@edtr-io/ui'

export const rowState = StateType.child()
export const rowsState = StateType.list(rowState, 1)

const RowsPlugin = (props: StatefulPluginEditorProps) => {
  return props.editable ? (
    
  ) : (
    
  )
}

export const rowsPlugin: StatefulPlugin = {
  Component: RowsPlugin,
  state: rowsState,
  getFocusableChildren(state) {
    return state()
  }
}

import { EquationsEditor } from './editor'
import { StateType, StatefulPlugin } from '@edtr-io/core'
import { createIcon, faEquals } from '@edtr-io/editor-ui'

export const StepProps = StateType.object({
  left: StateType.child(),
  right: StateType.child(),
  transform: StateType.child()
})

export const equationsState = StateType.object({
  steps: StateType.list(StepProps)
})

export const equationsPlugin: StatefulPlugin = {
  Component: EquationsEditor,
  state: equationsState,
  title: 'Gleichungen',
  description: 'Erzeuge einfach übersichtliche mathematische Gleichungen.',
  icon: createIcon(faEquals)
}

export * from './editor'