Toggle showing Toolbar when editor is selected/focused

[daniellin215]

Hi, I have multiple editors on a page and each editor should have its own toolbar. When an editor is selected or in focus, the toolbar should show up at the bottom. But when I click on a button in the toolbar, (ie. bold), the editor loses focus and the toolbar dissappears immediately and no changes are made. What should I do?

export const PlateEditor: React.FC = ({
card,
isCardEditable,
isCardDeletable,
}) => {
const ref = useRef<any | null>(null);

const [cardContent, setCardContent] = useState<TElement[]>(
card.content ? JSON.parse(card.content) : DEFAULT_VALUE
);
const [isFocused, setIsFocused] = useState(false);

const editableProps: TEditableProps = {
  placeholder: isCardEditable ? "Type here..." : "",
  autoCorrect: "false",
  spellCheck: false,
  readOnly: !isCardEditable,
  onFocus: () => {
    setIsFocused(true);
  },
  onBlur: () => {
    setIsFocused(false);
  },
  onSelect: () => {
    setIsFocused(true);
  },
};

return (
  <Box className={styles.container}>
    <PlateProvider
      id={String(card._id)}
      plugins={plugins}
      initialValue={cardContent}
    >
      <CardHeader
        isCardDeletable={isCardDeletable}
        isCardEditable={isCardEditable}
      />

      <Box className={styles.editor_wrapper_container}>
        <Plate editableProps={editableProps}>
          
        </Plate>
      </Box>

      {isFocused && isCardEditable && (
        <FixedToolbar id={String(card._id)}>
          <FixedToolbarButtons />
        </FixedToolbar>
      )}
    </PlateProvider>
  </Box>
);
};

[12joan]

Correct me if I'm wrong, but this sounds like a generic coding problem and not specific to Plate, and as such might be better suited to StackOverflow.

If you want to set your isFocused to false only when the active (focused) element becomes something other than the Plate editor or one of your toolbar buttons, then you can use FocusEvent.relatedTarget and Node.contains inside an onBlur handler somewhere to determine this. In React, unlike in vanilla DOM, focus and blur events bubble, so you can put the handler on a wrapper element that contains both the editor and the toolbar.

[12joan]

This won't solve your problem exactly, but here's what I use to detect when focus leaves a specific DOM element in React: https://github.com/12joan/react-utils/blob/main/src/hooks/useFocusOut.ts

[daniellin215]

Thanks, I will try that.

As an aside, I originally have a working implementation with vanilla Slate. But I realized that the hooks useFocused exported from slate-react isn't working. It does not correctly reflect the focus state, it is always false when I check its value.

[12joan]

It's possible that your previous toolbar implementation used mousedown-based buttons, which don't cause the editor to lose focus. We don't use those in Plate because they're inaccessible to keyboard and screen-reader users.

[daniellin215]

Just wanted to follow up here and say thanks @12joan , your snippet and suggestions helped me a lot.

Currently, some elements of the toolbar involve having a dropdown or further actions that transfer focus. And those elements will trigger the focus out even though everything is already nested inside and ref.current?.contains(event.relatedTarget(menuDropdownButton))should return true, but returns false. Was wondering if you have any suggestions?

[12joan]

That inline code snippet looks like it has a typo, since you're calling relatedTarget as if it were a function.

This sounds like the sort of problem you'll have to sort out in your own (non-Plate related) code. If you can express what you want to achieve in code, then it will work the way you intend it to; if things aren't behaving the way you expect them to, console.log is your friend. Good luck! ❤️