How to use @edtr-io/core - 10 common examples

export function useLogState(scope?: string) {
  const store = useScopedStore(scope)
  return () => {
    const serialized = serializeRootDocument()(store.getState())
    const stringified = JSON.stringify({
      state: JSON.stringify(serialized)
    })
    // eslint-disable-next-line no-console
    console.log(stringified.substr(9, stringified.length - 9 - 1))
  }
}

>((props, ref) => {
  const [expandedState, setExpanded] = React.useState(false)
  const [showExtendedSettings, setShowExtendedSettings] = React.useState(false)
  const rows = props.state
  const index = props.index
  const row = rows[index]
  const focused = useScopedSelector(isFocused(row.id))

  // DnD
  const rowRef = React.useRef(null)

  React.useImperativeHandle(ref, () => {
    return { getNode: () => rowRef.current }
  })

  if (props.connectDragSource) {
    props.connectDragPreview(rowRef)
    props.connectDropTarget(rowRef)
    // const opacity = isDragging ? 0 : 1
  }

  const extendedSettingsNode = React.useRef(null)
  const settingsTheme = usePluginTheme(name, rowsPluginThemeFactory)

insert,
  moveRow,
  row,
  rows,
  index,
  plugins
}: {
  insert(index: number, options?: { plugin: string; state?: unknown }): void
  moveRow(from: number, to: number): void
  row: StateTypeReturnType[0]
  rows: StateTypeReturnType
  index: number
  plugins: ReturnTypeFromSelector
}) {
  const container = React.useRef(null)
  const dispatch = useScopedDispatch()
  const store = useScopedStore()

  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
  const [collectedDragProps, drag, dragPreview] = useDrag({
    item: { id: row.id, index, type: 'row' },
    collect(monitor) {
      return {
        isDragging: !!monitor.isDragging()
      }
    }
  })
  const drop = useDrop({
    accept: ['row', NativeTypes.FILE, NativeTypes.URL],
    hover(item: RowDragObject, monitor) {
      if (!container.current) return
      monitor.getItem().boundingRect = container.current.getBoundingClientRect()

moveRow,
  row,
  rows,
  index,
  plugins
}: {
  insert(index: number, options?: { plugin: string; state?: unknown }): void
  moveRow(from: number, to: number): void
  row: StateTypeReturnType[0]
  rows: StateTypeReturnType
  index: number
  plugins: ReturnTypeFromSelector
}) {
  const container = React.useRef(null)
  const dispatch = useScopedDispatch()
  const store = useScopedStore()

  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
  const [collectedDragProps, drag, dragPreview] = useDrag({
    item: { id: row.id, index, type: 'row' },
    collect(monitor) {
      return {
        isDragging: !!monitor.isDragging()
      }
    }
  })
  const drop = useDrop({
    accept: ['row', NativeTypes.FILE, NativeTypes.URL],
    hover(item: RowDragObject, monitor) {
      if (!container.current) return
      monitor.getItem().boundingRect = container.current.getBoundingClientRect()

paramName: 'attachment[file]',
  maxFileSize: 2 * 1024 * 1024,
  allowedExtensions: ['gif', 'jpg', 'jpeg', 'png', 'svg'],
  getAdditionalFields: () => {
    return {
      type: 'file',
      csrf: ((window as unknown) as { csrf: string }).csrf
    }
  },
  getStateFromResponse: response => {
    return {
      src: response.files[0].location
    }
  }
}
const counterState = StateType.number(0)

const counterPlugin: StatefulPlugin = {
  // eslint-disable-next-line react/display-name
  Component: ({ editable, focused, state }) => {
    return (
      <div style="{{">
        {state.value}
        {editable &amp;&amp; (
          <button> {
              state.set(value =&gt; value + 1)
            }}</button></div>

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 { 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,
            href: '',
            target: '',

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.'
}