How to use the @edtr-io/core.useScopedSelector function in @edtr-io/core

To help you get started, we’ve selected a few @edtr-io/core 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
>((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)
github edtr-io / edtr-io / packages / plugins / solution-steps / src / helper / add-buttons.tsx View on Github external
export function AddButtonsComponent(
  props: PluginEditorProps & {
    id: string
    index: number
  }
) {
  const hasFocusedChild = useScopedSelector(hasFocusedDescendant(props.id))

  const insertStep = () => {
    props.state.solutionSteps.insert(props.index + 1)
  }
  const insertExplanation = () => {
    props.state.solutionSteps.insert(props.index + 1, {
      type: explanation,
      content: { plugin: 'rows' },
      isHalf: false
    })
  }
  return (
    
      {hasFocusedChild || props.id === '' ? (
github edtr-io / edtr-io / packages / plugins / multimedia-explanation / src / editor.tsx View on Github external
return function MultimediaExplanationEditor(
    props: PluginEditorProps
  ) {
    function handleIllustratingChange(e: React.ChangeEvent) {
      props.state.illustrating.set(e.target.value === 'illustrating')
    }
    const textFocused = useScopedSelector(
      hasFocusedDescendant(props.state.explanation.id)
    )

    const multimediaFocused = useScopedSelector(
      isFocused(props.state.multimedia.id)
    )

    const hasFocus = props.focused || multimediaFocused || textFocused

    const multimedia: {
      plugin: string
      state?: unknown
    } | null = useScopedSelector(serializeDocument(props.state.multimedia.id))
    const [
      replacedMultimediaCache,
      setReplacedMultimediaCache
github edtr-io / edtr-io / packages / plugins / solution-steps / src / editor.tsx View on Github external
export function SolutionStepsEditor(
  props: PluginEditorProps
) {
  const { state, editable } = props
  const { solutionSteps } = state
  const pluginFocused = useHasFocusSelector(props.id)
  const introductionFocused = useScopedSelector(
    isFocused(state.introduction.id)
  )
  const strategyFocused = useHasFocusSelector(state.strategy.id)

  return editable && pluginFocused ? (
     dragContent(result, state)}>
      
        
          <content type="{SolutionPluginTypes.introduction}">
            {state.introduction.render()}
          </content>
        
        {!state.hasStrategy.value ? (
           {
github edtr-io / edtr-io / packages / plugins / multimedia-explanation / src / editor.tsx View on Github external
props.state.illustrating.set(e.target.value === 'illustrating')
    }
    const textFocused = useScopedSelector(
      hasFocusedDescendant(props.state.explanation.id)
    )

    const multimediaFocused = useScopedSelector(
      isFocused(props.state.multimedia.id)
    )

    const hasFocus = props.focused || multimediaFocused || textFocused

    const multimedia: {
      plugin: string
      state?: unknown
    } | null = useScopedSelector(serializeDocument(props.state.multimedia.id))
    const [
      replacedMultimediaCache,
      setReplacedMultimediaCache
    ] = React.useState&gt;({})
    function handleMultimediaChange(selected: string) {
      setReplacedMultimediaCache(current =&gt; {
        if (!multimedia) return current

        return {
          ...current,
          [multimedia.plugin]: multimedia.state
        }
      })
      props.state.multimedia.replace(
        selected,
        replacedMultimediaCache[selected]
github edtr-io / edtr-io / packages / plugins / solution-steps / src / helper / has-focus-selector.tsx View on Github external
export function useHasFocusSelector(id: string) {
  const elementFocused = useScopedSelector(isFocused(id))
  const descendantFocused = useScopedSelector(hasFocusedDescendant(id))
  return elementFocused || descendantFocused
}
github edtr-io / edtr-io / packages / plugins / multimedia-explanation / src / editor.tsx View on Github external
return function MultimediaExplanationEditor(
    props: PluginEditorProps
  ) {
    function handleIllustratingChange(e: React.ChangeEvent) {
      props.state.illustrating.set(e.target.value === 'illustrating')
    }
    const textFocused = useScopedSelector(
      hasFocusedDescendant(props.state.explanation.id)
    )

    const multimediaFocused = useScopedSelector(
      isFocused(props.state.multimedia.id)
    )

    const hasFocus = props.focused || multimediaFocused || textFocused

    const multimedia: {
      plugin: string
      state?: unknown
    } | null = useScopedSelector(serializeDocument(props.state.multimedia.id))
    const [
      replacedMultimediaCache,
      setReplacedMultimediaCache
    ] = React.useState&gt;({})
    function handleMultimediaChange(selected: string) {
      setReplacedMultimediaCache(current =&gt; {
        if (!multimedia) return current
github edtr-io / edtr-io / packages / plugins / solution-steps / src / helper / has-focus-selector.tsx View on Github external
export function useHasFocusSelector(id: string) {
  const elementFocused = useScopedSelector(isFocused(id))
  const descendantFocused = useScopedSelector(hasFocusedDescendant(id))
  return elementFocused || descendantFocused
}
github edtr-io / edtr-io / packages / private / demo / src / container / plain.tsx View on Github external
function PlainEditorContainerInner(props: {
  children: React.ReactNode
  editable?: boolean
}) {
  const dispatch = useScopedDispatch()
  const hasPendingChanges = useScopedSelector(hasPendingChangesSelector())
  const logState = useLogState()
  const [editable, setEditable] = React.useState(
    props.editable === undefined ? true : props.editable
  )

  return (
    
      <div style="{{">{props.children}</div>
      <button>Log State</button>
      <button> {
          dispatch(undo())
        }}
      &gt;
        Undo
      </button>