How to use the @edtr-io/ui.usePluginTheme function in @edtr-io/ui

To help you get started, we’ve selected a few @edtr-io/ui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github edtr-io / edtr-io / packages / plugin-rows / src / editor / row.tsx View on Github external
// 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,
github edtr-io / edtr-io / packages / plugins / text / src / controls / colors.tsx View on Github external
> = props => {
  const theme = usePluginTheme(props.name, textPluginThemeFactory)
  const { colors, defaultColor } = theme.plugins.colors
  return (
    
      <button name="{props.name}"> {
          removeColor(props.editor)
            .moveToEnd()
            .focus()
          props.switchControls(VisibleControls.All)
          props.onChange(props.editor)
        }}
        title="Farbe zurücksetzen"
      &gt;
        </button>