/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; import {mergeRegister} from '@lexical/utils'; import { $getSelection, $isRangeSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, } from 'lexical'; import {useCallback, useEffect, useRef, useState} from 'react'; const LowPriority = 1; function Divider() { return

; } export default function ToolbarPlugin() { const [editor] = useLexicalComposerContext(); const toolbarRef = useRef(null); const [canUndo, setCanUndo] = useState(false); const [canRedo, setCanRedo] = useState(false); const [isBold, setIsBold] = useState(false); const [isItalic, setIsItalic] = useState(false); const [isUnderline, setIsUnderline] = useState(false); const [isStrikethrough, setIsStrikethrough] = useState(false); const $updateToolbar = useCallback(() => { const selection = $getSelection(); if ($isRangeSelection(selection)) { // Update text format setIsBold(selection.hasFormat('bold')); setIsItalic(selection.hasFormat('italic')); setIsUnderline(selection.hasFormat('underline')); setIsStrikethrough(selection.hasFormat('strikethrough')); } }, []); useEffect(() => { return mergeRegister( editor.registerUpdateListener(({editorState}) => { editorState.read(() => { $updateToolbar(); }); }), editor.registerCommand( SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => { $updateToolbar(); return false; }, LowPriority, ), editor.registerCommand( CAN_UNDO_COMMAND, (payload) => { setCanUndo(payload); return false; }, LowPriority, ), editor.registerCommand( CAN_REDO_COMMAND, (payload) => { setCanRedo(payload); return false; }, LowPriority, ), ); }, [editor, $updateToolbar]); return (

{' '}

); }

Incompatible Web Browser