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

}
export interface BlockRendererProps {
  node: BlockJSON
}
export type NodeRendererProps = BlockRendererProps | InlineRendererProps

export type TextPlugin = Plugin &
  Rule & {
    // FIXME: This type should exist in slate somewhere...
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    commands?: { [key: string]: (editor: Editor, ...args: any[]) => Editor }
  }

export { isValueEmpty } from './factory'

const textState = scalar(emptyDocument)
export type TextState = typeof textState
export interface TextConfig {
  placeholder: string
  plugins: ((pluginClosure: SlatePluginClosure) => TextPlugin)[]
  registry: {
    name: string
    title?: string
    description?: string
  }[]
  theme: {
    backgroundColor: string
    color: string
    hoverColor: string
    active: {
      backgroundColor: string
      color: string

import { DeprecatedPlugin, string } from '@edtr-io/plugin'
import { createIcon, faCubes } from '@edtr-io/ui'
import * as React from 'react'

import { GeogebraEditor } from './editor'
import { GeogebraRenderer } from './renderer'

export const geogebraState = string()
export const geogebraPlugin: DeprecatedPlugin = {
  //eslint-disable-next-line react/display-name
  Component: props =>
    props.editable ? (
      
    ) : (
      
    ),
  state: geogebraState,
  title: 'Geogebra Applet',
  description: 'Binde Applets von Geogebratube via Link oder ID ein.',
  icon: createIcon(faCubes),
  onPaste(clipboardData: DataTransfer) {
    const value = clipboardData.getData('text')

    if (/geogebra\.org\/m\/(.+)/.test(value)) {

import { Plugin, string, object, migratable } from '@edtr-io/plugin'
import { createIcon, faFilm } from '@edtr-io/ui'
import * as React from 'react'

import { VideoEditor } from './editor'
import { VideoRenderer } from './renderer'

const stateV0 = string()
const stateV1 = object({ src: string(), alt: string() })
export const videoState = migratable(stateV0).migrate(stateV1, src => {
  return { src, alt: '' }
})

export const videoPlugin: Plugin = {
  //eslint-disable-next-line react/display-name
  Component: props =>
    props.editable ?  : ,
  state: videoState,
  title: 'Video',
  description: 'Binde Videos von Youtube, Vimeo, Wikimedia und BR ein.',
  icon: createIcon(faFilm),
  onPaste(clipboardData: DataTransfer) {
    const value = clipboardData.getData('text')

    const regex = /^(https?:\/\/)?(.*?(youtube\.com\/watch\?(.*&)?v=.+|youtu\.be\/.+|vimeo\.com\/.+|upload\.wikimedia\.org\/.+(\.webm|\.ogg)?|br\.de\/.+))/
    if (regex.test(value)) {

import { Plugin, string } from '@edtr-io/plugin'
import { createIcon, faNewspaper } from '@edtr-io/ui'

import { SerloInjectionEditor } from './editor'

export const serloInjectionState = string()

export const serloInjectionPlugin: Plugin = {
  Component: SerloInjectionEditor,
  state: serloInjectionState,
  title: 'Serlo Inhalt',
  description: 'Binde einen Inhalt von serlo.org via ID ein',
  icon: createIcon(faNewspaper)
}

import { Plugin, string, object, migratable } from '@edtr-io/plugin'
import { createIcon, faFilm } from '@edtr-io/ui'
import * as React from 'react'

import { VideoEditor } from './editor'
import { VideoRenderer } from './renderer'

const stateV0 = string()
const stateV1 = object({ src: string(), alt: string() })
export const videoState = migratable(stateV0).migrate(stateV1, src => {
  return { src, alt: '' }
})

export const videoPlugin: Plugin = {
  //eslint-disable-next-line react/display-name
  Component: props =>
    props.editable ?  : ,
  state: videoState,
  title: 'Video',
  description: 'Binde Videos von Youtube, Vimeo, Wikimedia und BR ein.',
  icon: createIcon(faFilm),
  onPaste(clipboardData: DataTransfer) {
    const value = clipboardData.getData('text')

import { child, object, list, Plugin, string, boolean } from '@edtr-io/plugin'
import { createIcon, faCheckSquare } from '@edtr-io/ui'

import { SolutionStepsEditor } from './editor'

export const solutionStep = object({
  type: string('step'),
  isHalf: boolean(),
  content: child('rows')
})

export const solutionStepsState = object({
  introduction: child('text'),
  strategy: child('rows'),
  hasStrategy: boolean(),
  solutionSteps: list(solutionStep),
  additionals: child('rows'),
  hasAdditionals: boolean()
})

export const solutionStepsPlugin: Plugin = {
  Component: SolutionStepsEditor,
  state: solutionStepsState,

import { Plugin, string, object, migratable } from '@edtr-io/plugin'
import { createIcon, faFilm } from '@edtr-io/ui'
import * as React from 'react'

import { VideoEditor } from './editor'
import { VideoRenderer } from './renderer'

const stateV0 = string()
const stateV1 = object({ src: string(), alt: string() })
export const videoState = migratable(stateV0).migrate(stateV1, src => {
  return { src, alt: '' }
})

export const videoPlugin: Plugin = {
  //eslint-disable-next-line react/display-name
  Component: props =>
    props.editable ?  : ,
  state: videoState,
  title: 'Video',
  description: 'Binde Videos von Youtube, Vimeo, Wikimedia und BR ein.',
  icon: createIcon(faFilm),
  onPaste(clipboardData: DataTransfer) {
    const value = clipboardData.getData('text')

    const regex = /^(https?:\/\/)?(.*?(youtube\.com\/watch\?(.*&)?v=.+|youtu\.be\/.+|vimeo\.com\/.+|upload\.wikimedia\.org\/.+(\.webm|\.ogg)?|br\.de\/.+))/

import { Plugin, string } from '@edtr-io/plugin'
import * as React from 'react'
import ReactMarkdown from 'react-markdown'

import { createTableEditor } from './editor'

export const tableState = string()

export function createTablePlugin(
  config: TablePluginConfig
): Plugin {
  return {
    Component: createTableEditor(config),
    state: tableState,
    title: 'Tabelle',
    description: 'Erstelle eine Tabelle mit Markdown.'
  }
}

export const tablePlugin = createTablePlugin({
  renderMarkdown: function RenderMarkdown(markdown) {
    return 
  }

import { string, StatefulPlugin } from '@edtr-io/plugin'
import * as React from 'react'
import ReactMarkdown from 'react-markdown'

import { createTableEditor } from './editor'

export const tableState = string()

export function createTablePlugin(
  config: TablePluginConfig
): StatefulPlugin {
  return {
    Component: createTableEditor(config),
    state: tableState,
    title: 'Tabelle',
    description: 'Erstelle eine Tabelle mit Markdown.'
  }
}

export const tablePlugin = createTablePlugin({
  renderMarkdown: function RenderMarkdown(markdown) {
    return 
  }

export const multimediaExplanationState = (multimediaPlugins: PluginRegistry) =>
  object({
    explanation: child('rows'),
    multimedia: child(multimediaPlugins[0].name),
    illustrating: boolean(true),
    width: number(50) //percent
  })