How to use @edtr-io/editor-ui - 10 common examples

outline: 'none',
  boxShadow: '0 1px 1px 0 rgba(0,0,0,0.50)',
  '&::-webkit-input-placeholder': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const QuestionIcon = styled(Icon)({
  color: 'black',
  margin: '0 10px -3px 5px',
  '&:hover': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const CheckboxContainer = styled.div({
  float: 'right'
})

// TODO: type and theming. maybe put in editor-ui?
const HelpIcon: React.FunctionComponent = () => (
  <a title="Available Languages" rel="noopener noreferrer" href="https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD">
    
  </a>
)

export const createHighlightEditor = (config: HighlightPluginConfig) =&gt;

const Textarea = styled.textarea({
  height: '250px',
  width: '100%',
  margin: 'auto',
  padding: '10px',
  resize: 'none',
  fontFamily: 'Menlo, Monaco, "Courier New", monospace',
  border: 'none',
  outline: 'none',
  boxShadow: '0 1px 1px 0 rgba(0,0,0,0.50)',
  '&::-webkit-input-placeholder': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const QuestionIcon = styled(Icon)({
  color: 'black',
  margin: '0 10px -3px 5px',
  '&:hover': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const CheckboxContainer = styled.div({
  float: 'right'
})

// TODO: type and theming. maybe put in editor-ui?
const HelpIcon: React.FunctionComponent = () => (

return () => {
        window.removeEventListener('keydown', closeListener)
      }
    }, [hideExtendedSettings])

    // render only the expanded, so only one extended settings exist
    if (!expanded) return null
    // render even if not yet visible, because of ref.
    return (
      
        <content name="{name}">
          <header>
            <h4 style="{{">Erweiterte Einstellungen</h4>
            
              
            
          </header>
          <div>
          <footer name="{name}">
            
            
              Schließen
            
          </footer>
        </div></content>

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

import { VideoEditor } from './editor'
import { VideoRenderer } from './renderer'
import { createIcon, faFilm } from '@edtr-io/editor-ui'

export const videoState = StateType.string()
export const videoPlugin: StatefulPlugin = {
  //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)) {
      return { state: value }
    }
  }
}

import { EdtrIcon, edtrRowsControls, styled } from '@edtr-io/editor-ui'
import { StateTypeReturnType } from '@edtr-io/plugin'
import * as React from 'react'

import { MoveControlsProps } from '.'
import { createRowPluginTheme, rowsState, rowState } from '../..'

const StyledControls = styled.div({
  display: 'flex'
})

const IconContainer = styled.div<{ disabled?: boolean; name: string }>(
  ({ disabled, name, ...props }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      height: '24px',
      marginBottom: '15px',
      cursor: disabled ? 'not-allowed' : 'pointer',
      color: disabled ? theme.menu.secondary.color : theme.menu.primary.color,
      pointerEvents: disabled ? 'none' : undefined,
      '&:hover': {
        color: disabled ? theme.menu.secondary.color : theme.menu.highlightColor
      }
    }

'&::before': {
      position: 'absolute',
      pointerEvents: 'none',
      top: 0,
      right: 0,
      content: '""',
      opacity: 1,
      height: '100%',
      width: '2px',
      backgroundColor: theme.backgroundColor,
      zIndex: 15
    }
  }
})

const StyledIconContainer = styled.div(
  ({ name, ...props }: ThemeProps & { name: string }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      height: '24px',
      opacity: 0.8,
      cursor: 'pointer',
      color: theme.menu.primary.color,

      '&:hover': {
        color: theme.menu.highlightColor
      }
    }
  }
)

const Content = styled.div(

backgroundColor: theme.menu.primary.backgroundColor,
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100vh',
      zIndex: 9999,

      '@media (max-width: 1000px)': {
        padding: '25px 20px 155px'
      }
    }
  }
)

const CloseButtonContainer = styled.div({
  position: 'absolute',
  top: '15px',
  right: '15px',
  width: '30px',
  cursor: 'pointer'
})

const PluginList = styled.div({
  display: 'flex',
  justifyContent: 'space-around',
  flexWrap: 'wrap',
  overflowY: 'auto',
  alignItems: 'stretch'
})

interface MenuConnectorProps {

import { StatefulPluginEditorProps } from '@edtr-io/core'
import { Icon, faPlus, faTimes, styled } from '@edtr-io/editor-ui'
import * as React from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

import { EquationsRenderer } from './renderer'
import { equationsState } from '.'

const DraggableContainer = styled.div({
  border: '1px solid #000',
  margin: '10px',
  background: 'lightgrey',
  padding: '10px'
})

const RemoveButton = styled.button({
  borderRadius: '50%',
  outline: 'none',
  width: '35px',
  height: '35px',
  border: 'none',
  float: 'right',
  background: 'transparent',
  position: 'relative',
  top: '-15px',

import { styled, Icon, faCopy, faTrashAlt } from '@edtr-io/editor-ui'
import { StateTypeReturnType } from '@edtr-io/plugin'
import * as React from 'react'

import { createRowPluginTheme, rowsState } from '../..'

const StyledGlobals = styled.div({
  display: 'flex',
  alignItems: 'center'
})

const IconContainer = styled.div<{ disabled?: boolean; name: string }>(
  ({ disabled, name, ...props }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      margin: '0 5px 0 15px',
      padding: '5px',

      cursor: disabled ? 'not-allowed' : 'pointer',
      color: disabled ? theme.menu.secondary.color : theme.menu.primary.color,
      '&:hover': {
        color: disabled ? theme.menu.secondary.color : theme.highlightColor
      }

})

const CloseBtnContainer = styled.div<{ name: string }>(({ name, ...props }) => {
  const theme = createRowPluginTheme(name, props.theme)
  return {
    width: '24px',
    height: '24px',
    cursor: 'pointer',
    color: theme.menu.primary.color,
    '&:hover': {
      color: theme.menu.highlightColor
    }
  }
})

const Footer = styled.div<{ name: string }>(({ name, ...props }) => {
  const theme = createRowPluginTheme(name, props.theme)
  return {
    paddingTop: '10px',
    marginTop: '25px',
    borderTop: `1px solid ${theme.lightBackgroundColor}`, //rgba(182,182,182,1)
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }
})

const CloseCaption = styled.div<{ name: string }>(({ name, ...props }) => {
  const theme = createRowPluginTheme(name, props.theme)
  return {
    color: theme.menu.highlightColor,
    cursor: 'pointer'