rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render change editor menu only if it is open (#894)

Browse Source
This commit is contained in:
Aman Harwara
2022-02-23 20:55:26 +05:30
committed by GitHub
parent 209bd99fe5
commit 5df3e59604
4 changed files with 44 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
View File

@@ -11,7 +11,6 @@ import { STRING_EDIT_LOCKED_ATTEMPT } from '@/strings';
import { WebApplication } from '@/ui_models/application';
import {
ComponentArea,
FeatureStatus,
ItemMutator,
NoteMutator,
PrefKey,
@@ -48,28 +47,6 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
}) => {
const premiumModal = usePremiumModal();
const isEntitledToEditor = useCallback(
(item: EditorMenuItem) => {
const isPlainEditor = !item.component;
if (item.isPremiumFeature) {
return false;
}
if (isPlainEditor) {
return true;
}
if (item.component) {
return (
application.getFeatureStatus(item.component.identifier) ===
FeatureStatus.Entitled
);
}
},
[application]
);
const isSelectedEditor = useCallback(
(item: EditorMenuItem) => {
if (currentEditor) {
@@ -163,6 +140,11 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
};
const selectEditor = async (itemToBeSelected: EditorMenuItem) => {
if (!itemToBeSelected.isEntitled) {
premiumModal.activate(itemToBeSelected.name);
return;
}
const areBothEditorsPlain = !currentEditor && !itemToBeSelected.component;
if (areBothEditorsPlain) {
@@ -184,14 +166,6 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
}
}
if (
itemToBeSelected.isPremiumFeature ||
!isEntitledToEditor(itemToBeSelected)
) {
premiumModal.activate(itemToBeSelected.name);
shouldSelectEditor = false;
}
if (shouldSelectEditor) {
selectComponent(itemToBeSelected.component ?? null, note);
}
@@ -238,9 +212,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
>
<div className="flex flex-grow items-center justify-between">
{item.name}
{(item.isPremiumFeature || !isEntitledToEditor(item)) && (
<Icon type="premium-feature" />
)}
{!item.isEntitled && <Icon type="premium-feature" />}
</div>
</MenuItem>
);

14
app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
View File

@@ -1,10 +1,11 @@
import { WebApplication } from '@/ui_models/application';
import {
ComponentArea,
FeatureDescription,
GetFeatures,
NoteType,
} from '@standardnotes/features';
import { ContentType, SNComponent } from '@standardnotes/snjs';
import { ContentType, FeatureStatus, SNComponent } from '@standardnotes/snjs';
import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
export const PLAIN_EDITOR_NAME = 'Plain Editor';
@@ -31,11 +32,15 @@ const getEditorGroup = (
return 'others';
};
export const createEditorMenuGroups = (editors: SNComponent[]) => {
export const createEditorMenuGroups = (
application: WebApplication,
editors: SNComponent[]
) => {
const editorItems: Record<EditorGroup, EditorMenuItem[]> = {
plain: [
{
name: PLAIN_EDITOR_NAME,
isEntitled: true,
},
],
'rich-text': [],
@@ -61,7 +66,7 @@ export const createEditorMenuGroups = (editors: SNComponent[]) => {
) {
editorItems[getEditorGroup(editorFeature)].push({
name: editorFeature.name as string,
isPremiumFeature: true,
isEntitled: false,
});
}
});
@@ -70,6 +75,9 @@ export const createEditorMenuGroups = (editors: SNComponent[]) => {
const editorItem: EditorMenuItem = {
name: editor.name,
component: editor,
isEntitled:
application.getFeatureStatus(editor.identifier) ===
FeatureStatus.Entitled,
};
editorItems[getEditorGroup(editor.package_info)].push(editorItem);