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

padding: '5px 0 10px',
      opacity: focused ? 0.6 : 0,
      transition: '250ms all ease-in-out 250ms',
      // position: inline ? 'absolute' : 'relative',
      zIndex: 70,

      '&:hover': {
        color: theme.highlightColor,
        opacity: 1,
        cursor: 'pointer'
      }
    }
  }
)

const TriggerArea = styled.div({
  width: '100%',
  padding: '2px 0 4px',
  display: 'flex',
  justifyContent: 'center',

  '&:hover .add-trigger': {
    opacity: 0.6
  }
})

const Icon = styled(EdtrIcon)({
  width: '26px'
})

export function Add(props: {
  config: RowsConfig

import { styled } from '@edtr-io/ui'
// @ts-ignore
import IframeResizer from 'iframe-resizer-react'
import * as React from 'react'

const Iframe = styled(IframeResizer)({
  width: '100%',
  border: '1px solid #ddd',
  borderRadius: '2px'
})

export const SerloInjectionRenderer = (props: { src: string }) => {
  return (
    <div>
      </div>

// 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)

  const theme = React.useMemo(() => {
    return {
      editorUi: {
        overlay: {
          input: {
            backgroundColor: settingsTheme.backgroundColor,
            color: settingsTheme.menu.primary.color
          },
          button: {
            backgroundColor: settingsTheme.backgroundColor,
            color: settingsTheme.menu.primary.color,
            borderColor: settingsTheme.menu.primary.color
          },
          textarea: {
            backgroundColor: settingsTheme.backgroundColor,

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)) {
      return { state: value }
    }
  }
}

const StyledResizable = styled(Resizable)({
  padding: '5px',
  position: 'relative'
})

const Clear = styled.div({
  clear: 'both'
})

const Container = styled.div<{ hasFocus: boolean }>(props => {
  return {
    border: props.hasFocus ? '2px solid #ccc' : ''
  }
})

const InlineOptionsWrapper = styled.div({
  position: 'absolute',
  top: '-30px',
  right: '0',
  padding: '30px',
  zIndex: 95,
  whiteSpace: 'nowrap'
})

const InlineOptionsContentWrapper = styled.div({
  boxShadow: '0 2px 4px 0 rgba(0,0,0,0.50)',
  backgroundColor: 'rgba(255, 255, 255, 0.95)',
  borderRadius: '4px'
})

function InlineOptions(props: React.PropsWithChildren<{}>) {
  return (

{}}
          />
        
        
          {children}
        
      
    )
  }
  private Container = styled.div<{ isCorrect: boolean; showFeedback: boolean }>(
    props => {
      return {
        paddingLeft: '20 px',
        color: props.showFeedback
          ? props.isCorrect
            ? '#95bc1a'
            : '#f7b07c'
          : 'black'
      }
    }
  )
}

export interface ChoiceRendererProps {
  index: number
  onClick?: (event: React.MouseEvent<element>) =&gt; void</element>

display: 'inline-block'
  })
)

const AddMenuContainer = styled(OverlayBox)({
  padding: '20px',
  maxWidth: '400px'
})

const AddMenu = styled.div({
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-around'
})

export const FloatingButtonContainer = styled.div({
  position: 'absolute',
  height: '0',
  textAlign: 'center'
})

export const IconButton: React.FunctionComponent<{
  onClick: () => void
  icon: IconProp
  disabled?: boolean
}> = props => (

import {
  Editor,
  EditorContext,
  getClipboard,
  PluginState,
  getPlugins
} from '@edtr-io/core'
import { styled } from '@edtr-io/ui'

const ClipboardHeader = styled.div({
  fontSize: '130%',
  textAlign: 'center',
  marginBottom: '10px'
})

const Container = styled.div({
  textAlign: 'center'
})

const ButtonContainer = styled.div({
  marginTop: '10px',
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-evenly'
})

const Preview = styled.div({
  display: 'flex',
  width: '80px',
  height: '45px',
  overflow: 'hidden',
  border: '1px solid black',

margin: '0 auto',
    position: 'absolute',
    backgroundColor: props.theme.backgroundColor,
    color: props.theme.textColor,
    padding: '20px',
    left: '8%',
    right: '8%',
    maxWidth: '400px',
    zIndex: 100
  }
})
AddMenuContainer.defaultProps = {
  theme: defaultTheming
}

const AddMenu = styled.div({
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-around'
})

const AddMenuButton = styled.button((props: ThemeProps) => {
  return {
    margin: '3px',
    backgroundColor: props.theme.buttonBackgroundColor,
    outline: 'none',
    border: `2px solid ${props.theme.textColor}`,
    color: props.theme.textColor,
    padding: '10px',
    borderRadius: '4px',
    minWidth: '125px',
    cursor: 'pointer',

})

const Preview = styled.div({
  display: 'flex',
  width: '80px',
  height: '45px',
  overflow: 'hidden',
  border: '1px solid black',
  margin: '0 5px'
})

const Button = styled.div({
  cursor: 'pointer'
})

const PreventMouseEvents = styled.div({
  pointerEvents: 'none'
})

export const Clipboard: React.FunctionComponent<{
  onClose: (pluginState: PluginState) => void
}> = props => {
  const store = React.useContext(EditorContext)
  const states = getClipboard(store.state)
  return (
    
       Zwischenablage 
      
        {states.length ? (
          states.map((state, index) => {
            return (
              <button> props.onClose(state)}&gt;</button>