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

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

import { createImageEditor } from './editor'
import { UploadConfig } from './upload'

export const imageState = StateType.object({
  src: StateType.string(''),
  href: StateType.string(''),
  target: StateType.string(''),
  rel: StateType.string(''),
  description: StateType.string(''),
  maxWidth: StateType.number(0)
})
export const createImagePlugin = (
  config: ImagePluginConfig
): StatefulPlugin => {
  return {
    Component: createImageEditor(config),
    state: imageState,
    onPaste: (clipboardData: DataTransfer) => {
      const value = clipboardData.getData('text')

      if (/\.(jpe?g|png|bmp|gif|svg)$/.test(value)) {
        return {
          state: {
            src: value,

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

import { createImageEditor } from './editor'
import { UploadConfig } from './upload'

export const imageState = StateType.object({
  src: StateType.string(''),
  href: StateType.string(''),
  target: StateType.string(''),
  rel: StateType.string(''),
  description: StateType.string(''),
  maxWidth: StateType.number(0)
})
export const createImagePlugin = (
  config: ImagePluginConfig
): StatefulPlugin => {
  return {
    Component: createImageEditor(config),
    state: imageState,
    onPaste: (clipboardData: DataTransfer) => {
      const value = clipboardData.getData('text')

      if (/\.(jpe?g|png|bmp|gif|svg)$/.test(value)) {
        return {

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

import { SolutionEditor } from './editor'
import { createIcon, faCheckSquare } from '@edtr-io/editor-ui'

export const solutionState = StateType.object({
  title: StateType.string(''),
  content: StateType.child('rows')
})

export const solutionPlugin: StatefulPlugin = {
  Component: SolutionEditor,
  state: solutionState,
  icon: createIcon(faCheckSquare),
  title: 'Lösung',
  description:
    'Gestalte in dieser ausklappbaren Box eine ausführliche Lösung zu deinen Aufgaben.'
}

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 { StateType, StatefulPlugin } from '@edtr-io/core'

import { H5pEditor } from './editor'

export const h5pState = StateType.object({
  src: StateType.string('')
})

export const h5pPlugin: StatefulPlugin = {
  Component: H5pEditor,
  title: 'H5P Plugin',
  description: 'Füge Inhalte von H5P via ID oder Link ein.',
  state: h5pState
}

import { storiesOf } from '@storybook/react'
import * as React from 'react'

import { EditorStory } from '../src'
import { StatefulPluginEditorProps, StateType } from '@edtr-io/core'

const asyncState = StateType.async(
  StateType.string('Waiting for async state... (should take 3 seconds)'),
  new Promise(resolve => {
    setTimeout(() => {
      resolve('Async initial state completed')
    }, 3000)
  })
)
const AsyncRenderer = (props: StatefulPluginEditorProps) => {
  return <div>{props.state()}</div>
}
const asyncPlugin = {
  Component: AsyncRenderer,
  state: asyncState
}

storiesOf('Async/Basic', module).add('Initial State', () =&gt; {
  const state = {

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

import { createHighlightEditor } from './editor'
import { createIcon, faCode } from '@edtr-io/editor-ui'

export const highlightState = StateType.object({
  text: StateType.string(''),
  language: StateType.string('text'),
  lineNumbers: StateType.boolean(false)
})

import { HighlightRenderer, HighlightRendererProps } from './renderer'

export function createHighlightPluginWithDefault() : StatefulPlugin {
  return createHighlightPlugin({ renderer: HighlightRenderer })
}

export function createHighlightPlugin(config: HighlightPluginConfig) : StatefulPlugin {
  return {
    Component: createHighlightEditor(config),
    state: highlightState,
    title: 'Code',
    description:
      'Schreibe Code und lasse ihn je nach Programmiersprache highlighten.',

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

import { AnchorEditor } from './editor'
import { faAnchor, createIcon } from '@edtr-io/editor-ui'

export const anchorState = StateType.string()

export const anchorPlugin: StatefulPlugin = {
  Component: AnchorEditor,
  state: anchorState,
  title: 'Anker',
  description: 'Füge eine Sprungmarke innerhalb deines Inhalts hinzu.',
  icon: createIcon(faAnchor)
}

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

import { HintEditor } from './editor'
import { createIcon, faLightbulb } from '@edtr-io/editor-ui'

export const hintState = StateType.object({
  title: StateType.string(''),
  content: StateType.child('rows')
})

export const hintPlugin: StatefulPlugin = {
  Component: HintEditor,
  state: hintState,
  title: 'Hinweis',
  description: 'Gib zusätzliche Tipps zur Aufgabe in dieser ausklappbaren Box.',
  icon: createIcon(faLightbulb)
}