Skip to content

fix: toolbar change editor menu not updating #909

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

Merged
merged 3 commits into from
Mar 5, 2022
Merged

fix: toolbar change editor menu not updating #909

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
c36ccd3
fix: toolbar change editor menu not updating
amanharwara Mar 5, 2022
a2ac07b
refactor: rename isOpen prop to isVisible
amanharwara Mar 5, 2022
d3d0eda
style: use better variable naming scheme
amanharwara Mar 5, 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
53 changes: 15 additions & 38 deletions app/assets/javascripts/components/ChangeEditorButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,11 @@ import {
DisclosurePanel,
} from '@reach/disclosure';
import VisuallyHidden from '@reach/visually-hidden';
import { ComponentArea, SNComponent } from '@standardnotes/snjs';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { useEffect, useRef, useState } from 'preact/hooks';
import { useRef, useState } from 'preact/hooks';
import { Icon } from './Icon';
import { ChangeEditorMenu } from './NotesOptions/changeEditor/ChangeEditorMenu';
import { createEditorMenuGroups } from './NotesOptions/changeEditor/createEditorMenuGroups';
import { EditorMenuGroup } from './NotesOptions/ChangeEditorOption';
import { useCloseOnBlur } from './utils';

type Props = {
Expand All @@ -26,7 +23,8 @@ type Props = {
export const ChangeEditorButton: FunctionComponent<Props> = observer(
({ application, appState, onClickPreprocessing }) => {
const note = Object.values(appState.notes.selectedNotes)[0];
const [open, setOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const [position, setPosition] = useState({
top: 0,
right: 0,
Expand All @@ -35,28 +33,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur(containerRef, setOpen);
const [editors] = useState<SNComponent[]>(() =>
application.componentManager
.componentsForArea(ComponentArea.Editor)
.sort((a, b) => {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
})
);
const [editorMenuGroups, setEditorMenuGroups] = useState<EditorMenuGroup[]>(
[]
);
const [currentEditor, setCurrentEditor] = useState<SNComponent>();

useEffect(() => {
setEditorMenuGroups(createEditorMenuGroups(application, editors));
}, [application, editors]);

useEffect(() => {
if (note) {
setCurrentEditor(application.componentManager.editorForNote(note));
}
}, [application, note]);
const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen);

const toggleChangeEditorMenu = async () => {
const rect = buttonRef.current?.getBoundingClientRect();
Expand All @@ -81,22 +58,25 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
right: document.body.clientWidth - rect.right,
});

const newOpenState = !open;
const newOpenState = !isOpen;
if (newOpenState && onClickPreprocessing) {
await onClickPreprocessing();
}

setOpen(newOpenState);
setIsOpen(newOpenState);
setTimeout(() => {
setIsVisible(newOpenState);
});
}
};

return (
<div ref={containerRef}>
<Disclosure open={open} onChange={toggleChangeEditorMenu}>
<Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
<DisclosureButton
onKeyDown={(event) => {
if (event.key === 'Escape') {
setOpen(false);
setIsOpen(false);
}
}}
onBlur={closeOnBlur}
Expand All @@ -109,7 +89,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
<DisclosurePanel
onKeyDown={(event) => {
if (event.key === 'Escape') {
setOpen(false);
setIsOpen(false);
buttonRef.current?.focus();
}
}}
Expand All @@ -121,17 +101,14 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
className="sn-dropdown sn-dropdown--animated min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
onBlur={closeOnBlur}
>
{open && (
{isOpen && (
<ChangeEditorMenu
closeOnBlur={closeOnBlur}
application={application}
isOpen={open}
currentEditor={currentEditor}
setSelectedEditor={setCurrentEditor}
isVisible={isVisible}
note={note}
groups={editorMenuGroups}
closeMenu={() => {
setOpen(false);
setIsOpen(false);
}}
/>
)}
Expand Down
74 changes: 22 additions & 52 deletions app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,10 @@ import {
DisclosureButton,
DisclosurePanel,
} from '@reach/disclosure';
import {
ComponentArea,
IconType,
SNComponent,
SNNote,
} from '@standardnotes/snjs';
import { IconType, SNComponent, SNNote } from '@standardnotes/snjs';
import { FunctionComponent } from 'preact';
import { useEffect, useRef, useState } from 'preact/hooks';
import { Icon } from '../Icon';
import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
import { ChangeEditorMenu } from './changeEditor/ChangeEditorMenu';
import {
calculateSubmenuStyle,
Expand Down Expand Up @@ -49,74 +43,53 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
closeOnBlur,
note,
}) => {
const [changeEditorMenuOpen, setChangeEditorMenuOpen] = useState(false);
const [changeEditorMenuVisible, setChangeEditorMenuVisible] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
right: 0,
bottom: 0,
maxHeight: 'auto',
});
const changeEditorMenuRef = useRef<HTMLDivElement>(null);
const changeEditorButtonRef = useRef<HTMLButtonElement>(null);
const [editors] = useState<SNComponent[]>(() =>
application.componentManager
.componentsForArea(ComponentArea.Editor)
.sort((a, b) => {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
})
);
const [editorMenuGroups, setEditorMenuGroups] = useState<EditorMenuGroup[]>(
[]
);
const [selectedEditor, setSelectedEditor] = useState(() =>
application.componentManager.editorForNote(note)
);

useEffect(() => {
setEditorMenuGroups(createEditorMenuGroups(application, editors));
}, [application, editors]);

useEffect(() => {
setSelectedEditor(application.componentManager.editorForNote(note));
}, [application, note]);
const menuRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);

const toggleChangeEditorMenu = () => {
if (!changeEditorMenuOpen) {
const menuStyle = calculateSubmenuStyle(changeEditorButtonRef.current);
if (!isOpen) {
const menuStyle = calculateSubmenuStyle(buttonRef.current);
if (menuStyle) {
setMenuStyle(menuStyle);
}
}

setChangeEditorMenuOpen(!changeEditorMenuOpen);
setIsOpen(!isOpen);
};

useEffect(() => {
if (changeEditorMenuOpen) {
if (isOpen) {
setTimeout(() => {
const newMenuStyle = calculateSubmenuStyle(
changeEditorButtonRef.current,
changeEditorMenuRef.current
buttonRef.current,
menuRef.current
);

if (newMenuStyle) {
setMenuStyle(newMenuStyle);
setChangeEditorMenuVisible(true);
setIsVisible(true);
}
});
}
}, [changeEditorMenuOpen]);
}, [isOpen]);

return (
<Disclosure open={changeEditorMenuOpen} onChange={toggleChangeEditorMenu}>
<Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
<DisclosureButton
onKeyDown={(event) => {
if (event.key === KeyboardKey.Escape) {
setChangeEditorMenuOpen(false);
setIsOpen(false);
}
}}
onBlur={closeOnBlur}
ref={changeEditorButtonRef}
ref={buttonRef}
className="sn-dropdown-item justify-between"
>
<div className="flex items-center">
Expand All @@ -126,11 +99,11 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
<Icon type="chevron-right" className="color-neutral" />
</DisclosureButton>
<DisclosurePanel
ref={changeEditorMenuRef}
ref={menuRef}
onKeyDown={(event) => {
if (event.key === KeyboardKey.Escape) {
setChangeEditorMenuOpen(false);
changeEditorButtonRef.current?.focus();
setIsOpen(false);
buttonRef.current?.focus();
}
}}
style={{
Expand All @@ -139,17 +112,14 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
}}
className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
>
{changeEditorMenuOpen && (
{isOpen && (
<ChangeEditorMenu
application={application}
closeOnBlur={closeOnBlur}
currentEditor={selectedEditor}
setSelectedEditor={setSelectedEditor}
note={note}
groups={editorMenuGroups}
isOpen={changeEditorMenuVisible}
isVisible={isVisible}
closeMenu={() => {
setChangeEditorMenuOpen(false);
setIsOpen(false);
}}
/>
)}
Expand Down
41 changes: 29 additions & 12 deletions app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,19 @@ import {
TransactionalMutation,
} from '@standardnotes/snjs';
import { Fragment, FunctionComponent } from 'preact';
import { StateUpdater, useCallback } from 'preact/hooks';
import { useCallback, useEffect, useState } from 'preact/hooks';
import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
import { PLAIN_EDITOR_NAME } from './createEditorMenuGroups';
import {
createEditorMenuGroups,
PLAIN_EDITOR_NAME,
} from './createEditorMenuGroups';

type ChangeEditorMenuProps = {
application: WebApplication;
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
closeMenu: () => void;
groups: EditorMenuGroup[];
isOpen: boolean;
currentEditor: SNComponent | undefined;
isVisible: boolean;
note: SNNote;
setSelectedEditor: StateUpdater<SNComponent | undefined>;
};

const getGroupId = (group: EditorMenuGroup) =>
Expand All @@ -41,12 +41,29 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
application,
closeOnBlur,
closeMenu,
groups,
isOpen,
currentEditor,
setSelectedEditor,
isVisible,
note,
}) => {
const [editors] = useState<SNComponent[]>(() =>
application.componentManager
.componentsForArea(ComponentArea.Editor)
.sort((a, b) => {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
})
);
const [groups, setGroups] = useState<EditorMenuGroup[]>([]);
const [currentEditor, setCurrentEditor] = useState<SNComponent>();

useEffect(() => {
setGroups(createEditorMenuGroups(application, editors));
}, [application, editors]);

useEffect(() => {
if (note) {
setCurrentEditor(application.componentManager.editorForNote(note));
}
}, [application, note]);

const premiumModal = usePremiumModal();

const isSelectedEditor = useCallback(
Expand Down Expand Up @@ -138,7 +155,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
/** Dirtying can happen above */
application.sync();

setSelectedEditor(application.componentManager.editorForNote(note));
setCurrentEditor(application.componentManager.editorForNote(note));
};

const selectEditor = async (itemToBeSelected: EditorMenuItem) => {
Expand Down Expand Up @@ -179,7 +196,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
<Menu
className="pt-0.5 pb-1"
a11yLabel="Change editor menu"
isOpen={isOpen}
isOpen={isVisible}
>
{groups
.filter((group) => group.items && group.items.length)
Expand Down