From 937ef20c9960f278922c561a33699541c82a8b3c Mon Sep 17 00:00:00 2001 From: Strek Date: Fri, 17 Jun 2022 13:07:51 +0530 Subject: [PATCH 1/3] renamed character styles popup plugin --- packages/lexical-playground/src/Editor.tsx | 4 ++-- ...acterStylesPopupPlugin.tsx => FloatingFormatterPlugin.tsx} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename packages/lexical-playground/src/plugins/{CharacterStylesPopupPlugin.tsx => FloatingFormatterPlugin.tsx} (99%) diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx index 5def8e18c01..d821a277703 100644 --- a/packages/lexical-playground/src/Editor.tsx +++ b/packages/lexical-playground/src/Editor.tsx @@ -28,7 +28,7 @@ import {useSharedHistoryContext} from './context/SharedHistoryContext'; import ActionsPlugin from './plugins/ActionsPlugin'; import AutocompletePlugin from './plugins/AutocompletePlugin'; import AutoLinkPlugin from './plugins/AutoLinkPlugin'; -import CharacterStylesPopupPlugin from './plugins/CharacterStylesPopupPlugin'; +import FloatingFormatterPlugin from './plugins/FloatingFormatterPlugin'; import ClickableLinkPlugin from './plugins/ClickableLinkPlugin'; import CodeHighlightPlugin from './plugins/CodeHighlightPlugin'; import CommentPlugin from './plugins/CommentPlugin'; @@ -132,7 +132,7 @@ export default function Editor(): JSX.Element { - + diff --git a/packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.tsx b/packages/lexical-playground/src/plugins/FloatingFormatterPlugin.tsx similarity index 99% rename from packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.tsx rename to packages/lexical-playground/src/plugins/FloatingFormatterPlugin.tsx index c66a87832ef..6d976c11cc2 100644 --- a/packages/lexical-playground/src/plugins/CharacterStylesPopupPlugin.tsx +++ b/packages/lexical-playground/src/plugins/FloatingFormatterPlugin.tsx @@ -349,7 +349,7 @@ function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null { ); } -export default function CharacterStylesPopupPlugin(): JSX.Element | null { +export default function FloatingFormatterPlugin(): JSX.Element | null { const [editor] = useLexicalComposerContext(); return useCharacterStylesPopup(editor); } From 649f02d150d72ba2e02af48e900ae0c7ae56fb64 Mon Sep 17 00:00:00 2001 From: Strek Date: Fri, 17 Jun 2022 13:16:23 +0530 Subject: [PATCH 2/3] fix lint --- packages/lexical-playground/src/Editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx index d821a277703..ff7f6e378b4 100644 --- a/packages/lexical-playground/src/Editor.tsx +++ b/packages/lexical-playground/src/Editor.tsx @@ -28,13 +28,13 @@ import {useSharedHistoryContext} from './context/SharedHistoryContext'; import ActionsPlugin from './plugins/ActionsPlugin'; import AutocompletePlugin from './plugins/AutocompletePlugin'; import AutoLinkPlugin from './plugins/AutoLinkPlugin'; -import FloatingFormatterPlugin from './plugins/FloatingFormatterPlugin'; import ClickableLinkPlugin from './plugins/ClickableLinkPlugin'; import CodeHighlightPlugin from './plugins/CodeHighlightPlugin'; import CommentPlugin from './plugins/CommentPlugin'; import EmojisPlugin from './plugins/EmojisPlugin'; import EquationsPlugin from './plugins/EquationsPlugin'; import ExcalidrawPlugin from './plugins/ExcalidrawPlugin'; +import FloatingFormatterPlugin from './plugins/FloatingFormatterPlugin'; import HorizontalRulePlugin from './plugins/HorizontalRulePlugin'; import ImagesPlugin from './plugins/ImagesPlugin'; import KeywordsPlugin from './plugins/KeywordsPlugin'; From a154eca161fb4af656619c038ca6daa2fdfadf1a Mon Sep 17 00:00:00 2001 From: Strek Date: Fri, 17 Jun 2022 15:43:38 +0530 Subject: [PATCH 3/3] rename classnames and functions --- packages/lexical-playground/src/Editor.tsx | 4 +-- packages/lexical-playground/src/index.css | 32 +++++++++---------- ...sx => TextFormatFloatingToolbarPlugin.tsx} | 28 ++++++++-------- 3 files changed, 33 insertions(+), 31 deletions(-) rename packages/lexical-playground/src/plugins/{FloatingFormatterPlugin.tsx => TextFormatFloatingToolbarPlugin.tsx} (93%) diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx index ff7f6e378b4..0b237c380ac 100644 --- a/packages/lexical-playground/src/Editor.tsx +++ b/packages/lexical-playground/src/Editor.tsx @@ -34,7 +34,6 @@ import CommentPlugin from './plugins/CommentPlugin'; import EmojisPlugin from './plugins/EmojisPlugin'; import EquationsPlugin from './plugins/EquationsPlugin'; import ExcalidrawPlugin from './plugins/ExcalidrawPlugin'; -import FloatingFormatterPlugin from './plugins/FloatingFormatterPlugin'; import HorizontalRulePlugin from './plugins/HorizontalRulePlugin'; import ImagesPlugin from './plugins/ImagesPlugin'; import KeywordsPlugin from './plugins/KeywordsPlugin'; @@ -47,6 +46,7 @@ import SpeechToTextPlugin from './plugins/SpeechToTextPlugin'; import TabFocusPlugin from './plugins/TabFocusPlugin'; import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin'; import TableCellResizer from './plugins/TableCellResizer'; +import TextFormatFloatingToolbarPlugin from './plugins/TextFormatFloatingToolbarPlugin'; import ToolbarPlugin from './plugins/ToolbarPlugin'; import TreeViewPlugin from './plugins/TreeViewPlugin'; import TwitterPlugin from './plugins/TwitterPlugin'; @@ -132,7 +132,7 @@ export default function Editor(): JSX.Element { - + diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css index 4b055b7238f..6774b44afe3 100644 --- a/packages/lexical-playground/src/index.css +++ b/packages/lexical-playground/src/index.css @@ -1396,7 +1396,7 @@ button.action-button:disabled { background-image: url(images/icons/x-lg.svg); } -.character-style-popup { +.floating-text-format-popup { display: flex; margin-bottom: 1px; background: #fff; @@ -1415,7 +1415,7 @@ button.action-button:disabled { height: 35px; } -.character-style-popup button.popup-item { +.floating-text-format-popup button.popup-item { border: 0; display: flex; background: none; @@ -1425,15 +1425,15 @@ button.action-button:disabled { vertical-align: middle; } -.character-style-popup button.popup-item:disabled { +.floating-text-format-popup button.popup-item:disabled { cursor: not-allowed; } -.character-style-popup button.popup-item.spaced { +.floating-text-format-popup button.popup-item.spaced { margin-right: 2px; } -.character-style-popup button.popup-item i.format { +.floating-text-format-popup button.popup-item i.format { background-size: contain; display: inline-block; height: 18px; @@ -1444,23 +1444,23 @@ button.action-button:disabled { opacity: 0.6; } -.character-style-popup button.popup-item:disabled i.format { +.floating-text-format-popup button.popup-item:disabled i.format { opacity: 0.2; } -.character-style-popup button.popup-item.active { +.floating-text-format-popup button.popup-item.active { background-color: rgba(223, 232, 250, 0.3); } -.character-style-popup button.popup-item.active i { +.floating-text-format-popup button.popup-item.active i { opacity: 1; } -.character-style-popup .popup-item:hover:not([disabled]) { +.floating-text-format-popup .popup-item:hover:not([disabled]) { background-color: #eee; } -.character-style-popup select.popup-item { +.floating-text-format-popup select.popup-item { border: 0; display: flex; background: none; @@ -1475,12 +1475,12 @@ button.action-button:disabled { text-overflow: ellipsis; } -.character-style-popup select.code-language { +.floating-text-format-popup select.code-language { text-transform: capitalize; width: 130px; } -.character-style-popup .popup-item .text { +.floating-text-format-popup .popup-item .text { display: flex; line-height: 20px; width: 200px; @@ -1494,7 +1494,7 @@ button.action-button:disabled { text-align: left; } -.character-style-popup .popup-item .icon { +.floating-text-format-popup .popup-item .icon { display: flex; width: 20px; height: 20px; @@ -1504,7 +1504,7 @@ button.action-button:disabled { background-size: contain; } -.character-style-popup i.chevron-down { +.floating-text-format-popup i.chevron-down { margin-top: 3px; width: 16px; height: 16px; @@ -1512,7 +1512,7 @@ button.action-button:disabled { user-select: none; } -.character-style-popup i.chevron-down.inside { +.floating-text-format-popup i.chevron-down.inside { width: 16px; height: 16px; display: flex; @@ -1522,7 +1522,7 @@ button.action-button:disabled { pointer-events: none; } -.character-style-popup .divider { +.floating-text-format-popup .divider { width: 1px; background-color: #eee; margin: 0 4px; diff --git a/packages/lexical-playground/src/plugins/FloatingFormatterPlugin.tsx b/packages/lexical-playground/src/plugins/TextFormatFloatingToolbarPlugin.tsx similarity index 93% rename from packages/lexical-playground/src/plugins/FloatingFormatterPlugin.tsx rename to packages/lexical-playground/src/plugins/TextFormatFloatingToolbarPlugin.tsx index 6d976c11cc2..8f29ae28021 100644 --- a/packages/lexical-playground/src/plugins/FloatingFormatterPlugin.tsx +++ b/packages/lexical-playground/src/plugins/TextFormatFloatingToolbarPlugin.tsx @@ -57,7 +57,7 @@ function setPopupPosition( editor.style.left = `${left}px`; } -function FloatingCharacterStylesEditor({ +function TextFormatFloatingToolbar({ editor, isLink, isBold, @@ -92,7 +92,7 @@ function FloatingCharacterStylesEditor({ editor.dispatchCommand(INSERT_INLINE_COMMAND, null); }; - const updateCharacterStylesEditor = useCallback(() => { + const updateTextFormatFloatingToolbar = useCallback(() => { const selection = $getSelection(); const popupCharStylesEditorElem = popupCharStylesEditorRef.current; @@ -131,7 +131,7 @@ function FloatingCharacterStylesEditor({ useEffect(() => { const onResize = () => { editor.getEditorState().read(() => { - updateCharacterStylesEditor(); + updateTextFormatFloatingToolbar(); }); }; window.addEventListener('resize', onResize); @@ -139,32 +139,32 @@ function FloatingCharacterStylesEditor({ return () => { window.removeEventListener('resize', onResize); }; - }, [editor, updateCharacterStylesEditor]); + }, [editor, updateTextFormatFloatingToolbar]); useEffect(() => { editor.getEditorState().read(() => { - updateCharacterStylesEditor(); + updateTextFormatFloatingToolbar(); }); return mergeRegister( editor.registerUpdateListener(({editorState}) => { editorState.read(() => { - updateCharacterStylesEditor(); + updateTextFormatFloatingToolbar(); }); }), editor.registerCommand( SELECTION_CHANGE_COMMAND, () => { - updateCharacterStylesEditor(); + updateTextFormatFloatingToolbar(); return false; }, COMMAND_PRIORITY_LOW, ), ); - }, [editor, updateCharacterStylesEditor]); + }, [editor, updateTextFormatFloatingToolbar]); return ( -
+