Bug: $getSelectionStyleValueForProperty(selection, 'font-size', '16px') doesn't work as expected

> {isEditMode ? (
> ref={inputRef}
> className="link-input"
> value={linkUrl}
> onChange={(event) => {
> setLinkUrl(event.target.value);
> }}
> onKeyDown={(event) => {
> if (event.key === "Enter") {
> event.preventDefault();
> if (lastSelection !== null) {
> if (linkUrl !== "") {
> editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
> }
> setEditMode(false);
> }
> } else if (event.key === "Escape") {
> event.preventDefault();
> setEditMode(false);
> }
> }}
> />
> ) : (
> <>
>
> );
> }
>
> function dropDownActiveClass(active) {
> if (active) return 'active dropdown-item-active';
> else return '';
> }
>
> function getSelectedNode(selection) {
> const anchor = selection.anchor;
> const focus = selection.focus;
> const anchorNode = selection.anchor.getNode();
> const focusNode = selection.focus.getNode();
> if (anchorNode === focusNode) {
> return anchorNode;
> }
> const isBackward = selection.isBackward();
> if (isBackward) {
> return $isAtNodeEnd(focus) ? anchorNode : focusNode;
> } else {
> return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
> }
> }
>
> function BlockOptionsDropdownList({
> editor,
> blockType,
> toolbarRef,
> setShowBlockOptionsDropDown
> }) {
> const dropDownRef = useRef(null);
>
> useEffect(() => {
> const toolbar = toolbarRef.current;
> const dropDown = dropDownRef.current;
>
> if (toolbar !== null && dropDown !== null) {
> const { top, left } = toolbar.getBoundingClientRect();
> dropDown.style.top = `${top + 40}px`;
> dropDown.style.left = `${left}px`;
> }
> }, [dropDownRef, toolbarRef]);
>
> useEffect(() => {
> const dropDown = dropDownRef.current;
> const toolbar = toolbarRef.current;
>
> if (dropDown !== null && toolbar !== null) {
> const handle = (event) => {
> const target = event.target;
>
> if (!dropDown.contains(target) && !toolbar.contains(target)) {
> setShowBlockOptionsDropDown(false);
> }
> };
> document.addEventListener("click", handle);
>
> return () => {
> document.removeEventListener("click", handle);
> };
> }
> }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
>
> const formatParagraph = () => {
> if (blockType !== "paragraph") {
> editor.update(() => {
> const selection = $getSelection();
>
> if ($isRangeSelection(selection)) {
> $wrapNodes(selection, () => $createParagraphNode());
> }
> });
> }
> setShowBlockOptionsDropDown(false);
> };
>
> const formatHeading = (size) => {
> if (blockType !== size) {
> editor.update(() => {
> const selection = $getSelection();
>
> if ($isRangeSelection(selection)) {
> $wrapNodes(selection, () => $createHeadingNode(size));
> }
> });
> }
> setShowBlockOptionsDropDown(false);
> };
>
> /*
> const formatSmallHeading = () => {
> if (blockType !== "h2") {
> editor.update(() => {
> const selection = $getSelection();
>
> if ($isRangeSelection(selection)) {
> $wrapNodes(selection, () => $createHeadingNode("h2"));
> }
> });
> }
> setShowBlockOptionsDropDown(false);
> };
> */
>
> const formatBulletList = () => {
> if (blockType !== "ul") {
> editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
> } else {
> editor.dispatchCommand(REMOVE_LIST_COMMAND);
> }
> setShowBlockOptionsDropDown(false);
> };
>
> const formatNumberedList = () => {
> if (blockType !== "ol") {
> editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
> } else {
> editor.dispatchCommand(REMOVE_LIST_COMMAND);
> }
> setShowBlockOptionsDropDown(false);
> };
>
> const formatQuote = () => {
> if (blockType !== "quote") {
> editor.update(() => {
> const selection = $getSelection();
>
> if ($isRangeSelection(selection)) {
> $wrapNodes(selection, () => $createQuoteNode());
> }
> });
> }
> setShowBlockOptionsDropDown(false);
> };
>
> return (
>
> );
> }
>
> function FontDropDown({
> editor,
> value,
> style,
> disabled = false,
> }) {
> const handleClick = useCallback(
> (option) => {
> editor.update(() => {
> const selection = $getSelection();
> if ($isRangeSelection(selection)) {
> $patchStyleText(selection, {
> [style]: option,
> });
> }
> });
> },
> [editor, style],
> );
>
> const buttonAriaLabel =
> style === 'font-family'
> ? 'Formatting options for font family'
> : 'Formatting options for font size';
>
> return (
> disabled={disabled}
> buttonClassName={'toolbar-item ' + style}
> buttonLabel={value}
> buttonAriaLabel={buttonAriaLabel}>
> {(style === 'font-family' ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(
> ([option, text]) => (
> className={`item ${dropDownActiveClass(value === option)} ${style === 'font-size' ? 'fontsize-item' : ''
> }`}
> onClick={() => handleClick(option)}
> key={option}>
> {text}
>
> ),
> )}
>
> );
> }
>
> export default function ToolbarPlugin() {
> const [editor] = useLexicalComposerContext();
> const [activeEditor, setActiveEditor] = useState(editor);
> const toolbarRef = useRef(null);
> const [blockType, setBlockType] = useState("paragraph");
> const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(
> false
> );
> const [codeLanguage, setCodeLanguage] = useState("");
> const [isLink, setIsLink] = useState(false);
> const [isBold, setIsBold] = useState(false);
> const [isItalic, setIsItalic] = useState(false);
> const [isUnderline, setIsUnderline] = useState(false);
> const [isStrikethrough, setIsStrikethrough] = useState(false);
> const [isCode, setIsCode] = useState(false);
> const [isEditable, setIsEditable] = useState(() => editor.isEditable());
> const [fontSize, setFontSize] = useState('16px');
> const [fontFamily, setFontFamily] = useState('Arial');
> const [fontColor, setFontColor] = useState('#000');
> const [bgColor, setBgColor] = useState('#fff');
>
>
>
> const updateToolbar = useCallback(() => {
> const selection = $getSelection();
> if ($isRangeSelection(selection)) {
> const anchorNode = selection.anchor.getNode();
> const element =
> anchorNode.getKey() === "root"
> ? anchorNode
> : anchorNode.getTopLevelElementOrThrow();
> const elementKey = element.getKey();
> const elementDOM = activeEditor.getElementByKey(elementKey);
> if (elementDOM !== null) {
> if ($isListNode(element)) {
> const parentList = $getNearestNodeOfType(anchorNode, ListNode);
> const type = parentList ? parentList.getTag() : element.getTag();
> setBlockType(type);
> } else {
> const type = $isHeadingNode(element)
> ? element.getTag()
> : element.getType();
> setBlockType(type);
> if ($isCodeNode(element)) {
> setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
> }
> }
> }
> // Update text format
> setIsBold(selection.hasFormat("bold"));
> setIsItalic(selection.hasFormat("italic"));
> setIsUnderline(selection.hasFormat("underline"));
> setIsStrikethrough(selection.hasFormat("strikethrough"));
> setIsCode(selection.hasFormat("code"));
>
> // Update links
> const node = getSelectedNode(selection);
> const parent = node.getParent();
> if ($isLinkNode(parent) || $isLinkNode(node)) {
> setIsLink(true);
> } else {
> setIsLink(false);
> }
> setFontSize(
> $getSelectionStyleValueForProperty(selection, 'font-size', '16px'),
> );
> setFontColor(
> $getSelectionStyleValueForProperty(selection, 'color', '#000'),
> );
> setBgColor(
> $getSelectionStyleValueForProperty(
> selection,
> 'background-color',
> '#fff',
> ),
> );
> setFontFamily(
> $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'),
> );
> }
> }, [activeEditor]);
>
>
> /*
> const updateToolbar = useCallback(() => {
> const selection = $getSelection();
> if ($isRangeSelection(selection)) {
> const anchorNode = selection.anchor.getNode();
> let element =
> anchorNode.getKey() === 'root'
> ? anchorNode
> : $findMatchingParent(anchorNode, (e) => {
> const parent = e.getParent();
> return parent !== null && $isRootOrShadowRoot(parent);
> });
>
> if (element === null) {
> element = anchorNode.getTopLevelElementOrThrow();
> }
>
> const elementKey = element.getKey();
> const elementDOM = activeEditor.getElementByKey(elementKey);
>
> // Update text format
> setIsBold(selection.hasFormat('bold'));
> setIsItalic(selection.hasFormat('italic'));
> setIsUnderline(selection.hasFormat('underline'));
> setIsStrikethrough(selection.hasFormat('strikethrough'));
> setIsCode(selection.hasFormat('code'));
>
> // Update links
> const node = getSelectedNode(selection);
> const parent = node.getParent();
> if ($isLinkNode(parent) || $isLinkNode(node)) {
> setIsLink(true);
> } else {
> setIsLink(false);
> }
>
> if (elementDOM !== null) {
> if ($isListNode(element)) {
> const parentList = $getNearestNodeOfType(
> anchorNode,
> ListNode,
> );
> const type = parentList
> ? parentList.getListType()
> : element.getListType();
> setBlockType(type);
> } else {
> const type = $isHeadingNode(element)
> ? element.getTag()
> : element.getType();
> if (type in blockTypeToBlockName) {
> setBlockType(type);
> }
>
> if ($isCodeNode(element)) {
> const language =
> element.getLanguage();
> setCodeLanguage(
> language ? CODE_LANGUAGE_MAP[language] || language : '',
> );
> return;
> }
>
> }
> }
> // Handle buttons
> setFontSize(
> $getSelectionStyleValueForProperty(selection, 'font-size', '16px'),
> );
> setFontColor(
> $getSelectionStyleValueForProperty(selection, 'color', '#000'),
> );
> setBgColor(
> $getSelectionStyleValueForProperty(
> selection,
> 'background-color',
> '#fff',
> ),
> );
> setFontFamily(
> $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'),
> );
> }
> }, [activeEditor]);
> */
>
> useEffect(() => {
> return editor.registerCommand(
> SELECTION_CHANGE_COMMAND,
> (_payload, newEditor) => {
> updateToolbar();
> setActiveEditor(newEditor);
> return false;
> },
> COMMAND_PRIORITY_CRITICAL,
> );
> }, [editor, updateToolbar]);
>
> useEffect(() => {
> return mergeRegister(
> editor.registerEditableListener((editable) => {
> setIsEditable(editable);
> }),
> activeEditor.registerUpdateListener(({ editorState }) => {
> editorState.read(() => {
> updateToolbar();
> });
> }),
> );
> }, [activeEditor, editor, updateToolbar]);
>
> /*
> useEffect(() => {
> return mergeRegister(
> editor.registerUpdateListener(({ editorState }) => {
> editorState.read(() => {
> updateToolbar();
> });
> }),
> editor.registerCommand(
> SELECTION_CHANGE_COMMAND,
> (_payload, newEditor) => {
> updateToolbar();
> return false;
> },
> LowPriority
> )
> );
> }, [editor, updateToolbar]);
> */
>
> const applyStyleText = useCallback(
> (styles) => {
> activeEditor.update(() => {
> const selection = $getSelection();
> if ($isRangeSelection(selection)) {
> $patchStyleText(selection, styles);
> }
> });
> },
> [activeEditor],
> );
>
> const onFontColorSelect = useCallback(
> (value) => {
> applyStyleText({ color: value });
> },
> [applyStyleText],
> );
>
> const onBgColorSelect = useCallback(
> (value) => {
> applyStyleText({ 'background-color': value });
> },
> [applyStyleText],
> );
>
> const insertLink = useCallback(() => {
> if (!isLink) {
> editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
> } else {
> editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
> }
> }, [editor, isLink]);
>
> return (
>
> );
> }

## The current behavior
The font-size ui do not show the correct font-size of the current node
## The expected behavior
The font-size ui should display correct font-size of the current node