Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

renamed character styles popup plugin #2456

Merged
merged 3 commits into from
Jun 17, 2022
Merged

renamed character styles popup plugin #2456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
937ef20
renamed character styles popup plugin
harish-sethuraman Jun 17, 2022
649f02d
fix lint
harish-sethuraman Jun 17, 2022
a154eca
rename classnames and functions
harish-sethuraman Jun 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/lexical-playground/src/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ 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 ClickableLinkPlugin from './plugins/ClickableLinkPlugin';
import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
import CommentPlugin from './plugins/CommentPlugin';
Expand All @@ -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';
Expand Down Expand Up @@ -132,7 +132,7 @@ export default function Editor(): JSX.Element {
<YouTubePlugin />
<ClickableLinkPlugin />
<HorizontalRulePlugin />
<CharacterStylesPopupPlugin />
<TextFormatFloatingToolbarPlugin />
<EquationsPlugin />
<ExcalidrawPlugin />
<TabFocusPlugin />
Expand Down
32 changes: 16 additions & 16 deletions packages/lexical-playground/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -1504,15 +1504,15 @@ 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;
display: flex;
user-select: none;
}

.character-style-popup i.chevron-down.inside {
.floating-text-format-popup i.chevron-down.inside {
width: 16px;
height: 16px;
display: flex;
Expand All @@ -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;
Expand Down
28 changes: 15 additions & 13 deletions ...rc/plugins/CharacterStylesPopupPlugin.tsx → ...ugins/TextFormatFloatingToolbarPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ function setPopupPosition(
editor.style.left = `${left}px`;
}

function FloatingCharacterStylesEditor({
function TextFormatFloatingToolbar({
editor,
isLink,
isBold,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -131,40 +131,40 @@ function FloatingCharacterStylesEditor({
useEffect(() => {
const onResize = () => {
editor.getEditorState().read(() => {
updateCharacterStylesEditor();
updateTextFormatFloatingToolbar();
});
};
window.addEventListener('resize', onResize);

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 (
<div ref={popupCharStylesEditorRef} className="character-style-popup">
<div ref={popupCharStylesEditorRef} className="floating-text-format-popup">
<button
onClick={() => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
Expand Down Expand Up @@ -255,7 +255,9 @@ function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
}
}

function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null {
function useTextFormatFloatingToolbar(
editor: LexicalEditor,
): JSX.Element | null {
const [isText, setIsText] = useState(false);
const [isLink, setIsLink] = useState(false);
const [isBold, setIsBold] = useState(false);
Expand Down Expand Up @@ -334,7 +336,7 @@ function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null {
}

return createPortal(
<FloatingCharacterStylesEditor
<TextFormatFloatingToolbar
editor={editor}
isLink={isLink}
isBold={isBold}
Expand All @@ -349,7 +351,7 @@ function useCharacterStylesPopup(editor: LexicalEditor): JSX.Element | null {
);
}

export default function CharacterStylesPopupPlugin(): JSX.Element | null {
export default function TextFormatFloatingToolbarPlugin(): JSX.Element | null {
const [editor] = useLexicalComposerContext();
return useCharacterStylesPopup(editor);
return useTextFormatFloatingToolbar(editor);
}