From b4fcc993aa6d994efadff8a7401d5515eb43fa1b Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Thu, 30 Sep 2021 20:50:44 +0530 Subject: [PATCH 01/20] feat(preferences): Defaults segment feat: Dropdown component --- .../javascripts/components/Dropdown.tsx | 45 ++++++++++ .../javascripts/preferences/panes/General.tsx | 4 +- .../panes/general-segments/Defaults.tsx | 59 +++++++++++++ .../panes/general-segments/index.ts | 1 + package.json | 3 +- yarn.lock | 83 ++++++++++++++++++- 6 files changed, 188 insertions(+), 7 deletions(-) create mode 100644 app/assets/javascripts/components/Dropdown.tsx create mode 100644 app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx new file mode 100644 index 000000000..d9667c310 --- /dev/null +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -0,0 +1,45 @@ +import { Listbox, ListboxOption } from '@reach/listbox'; +import VisuallyHidden from '@reach/visually-hidden'; +import { FunctionComponent } from 'preact'; +import { IconType } from './Icon'; +import '@reach/listbox/styles.css'; +import { useState } from 'preact/hooks'; + +export type DropdownItem = { + icon?: IconType; + label: string; + value: string; +}; + +type Props = { + id: string; + srLabel: string; + items: DropdownItem[]; + defaultValue: string; +}; + +export const Dropdown: FunctionComponent = ({ + id, + srLabel, + items, + defaultValue, +}) => { + const [value, setValue] = useState(defaultValue); + + const labelId = `${id}-label`; + + return ( + <> + {srLabel} + setValue(value)} + aria-labelledby={labelId} + > + {items.map((item) => ( + {item.label} + ))} + + + ); +}; diff --git a/app/assets/javascripts/preferences/panes/General.tsx b/app/assets/javascripts/preferences/panes/General.tsx index b4fa9ad8e..826485fef 100644 --- a/app/assets/javascripts/preferences/panes/General.tsx +++ b/app/assets/javascripts/preferences/panes/General.tsx @@ -2,8 +2,7 @@ import { WebApplication } from '@/ui_models/application'; import { AppState } from '@/ui_models/app_state'; import { FunctionComponent } from 'preact'; import { PreferencesPane } from '../components'; -import { ErrorReporting } from './general-segments'; -import { Tools } from './general-segments/Tools'; +import { ErrorReporting, Tools, Defaults } from './general-segments'; interface GeneralProps { appState: AppState; @@ -13,6 +12,7 @@ interface GeneralProps { export const General: FunctionComponent = (props) => ( + ); diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx new file mode 100644 index 000000000..7f492b854 --- /dev/null +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -0,0 +1,59 @@ +import { Dropdown, DropdownItem } from '@/components/Dropdown'; +import { + PreferencesGroup, + PreferencesSegment, + Subtitle, + Text, + Title, +} from '@/preferences/components'; +import { WebApplication } from '@/ui_models/application'; +import { ComponentArea } from '@standardnotes/snjs'; +import { FunctionComponent } from 'preact'; +import { useEffect, useState } from 'preact/hooks'; + +type Props = { + application: WebApplication; +}; + +export const Defaults: FunctionComponent = ({ application }) => { + const [editorItems, setEditorItems] = useState([]); + + useEffect(() => { + const editors = application.componentManager + .componentsForArea(ComponentArea.Editor) + .map((editor) => { + return { + label: editor.name, + value: editor.package_info.identifier, + }; + }); + + setEditorItems([ + { + label: 'Plain Editor', + value: 'plain-editor', + }, + ...editors, + ]); + }, [application]); + + return ( + + + Defaults +
+ Default Editor + New notes will be created using this editor. +
+ +
+
+ + + ); +}; diff --git a/app/assets/javascripts/preferences/panes/general-segments/index.ts b/app/assets/javascripts/preferences/panes/general-segments/index.ts index dd28d7a2c..42a057b5d 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/index.ts +++ b/app/assets/javascripts/preferences/panes/general-segments/index.ts @@ -1,2 +1,3 @@ export * from './ErrorReporting'; export * from './Tools'; +export * from './Defaults'; diff --git a/package.json b/package.json index 442f0aae2..d0fe0b065 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,9 @@ "@reach/alert-dialog": "^0.13.0", "@reach/checkbox": "^0.13.2", "@reach/dialog": "^0.13.0", - "@standardnotes/sncrypto-web": "1.5.2", + "@reach/listbox": "^0.16.1", "@standardnotes/features": "1.6.1", + "@standardnotes/sncrypto-web": "1.5.2", "@standardnotes/snjs": "2.14.8", "mobx": "^6.3.2", "mobx-react-lite": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index 2b15bab0f..62314ca67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1834,6 +1834,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/auto-id@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed" + integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/checkbox@^0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@reach/checkbox/-/checkbox-0.13.2.tgz#b972b922cf6cea0c2bbabca0129c58307b566a4e" @@ -1853,6 +1861,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/descendants@0.16.1": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f" + integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/dialog@0.13.0", "@reach/dialog@^0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.13.0.tgz#2110725c3b8a3c64685834cdc9f3ce5c15617809" @@ -1887,6 +1903,18 @@ "@reach/utils" "0.15.2" prop-types "^15.7.2" +"@reach/listbox@^0.16.1": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@reach/listbox/-/listbox-0.16.1.tgz#8a4a13cf171e9ba3118d2e6e72f3e7f17f4c2f80" + integrity sha512-2KQTYmxKvZW0XdBWGoV7E2gUWWBINJmfj2MDRmWbRNdTjsF9w3mTb09buTWQ2sznzF7DrLrwiBFv4b2egMfKOw== + dependencies: + "@reach/auto-id" "0.16.0" + "@reach/descendants" "0.16.1" + "@reach/machine" "0.16.0" + "@reach/popover" "0.16.0" + "@reach/utils" "0.16.0" + prop-types "^15.7.2" + "@reach/machine@0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.13.2.tgz#744302f5ce2d4e5fd0527ae0baa60d325b2325d8" @@ -1905,6 +1933,15 @@ "@xstate/fsm" "1.4.0" tslib "^2.3.0" +"@reach/machine@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/machine/-/machine-0.16.0.tgz#0504ba47ac09ed495bd341bf5fdd6625bcade0e3" + integrity sha512-c8SRQz2xGtg5M9aXuuM5pFgaV1ZW5/nyMIYpZzBwHUlNFKGO+VBhwedbnqUxO0yLcbgl3wPvjPh740O3YjqiHg== + dependencies: + "@reach/utils" "0.16.0" + "@xstate/fsm" "1.4.0" + tslib "^2.3.0" + "@reach/menu-button@^0.15.1": version "0.15.2" resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.15.2.tgz#00f91402be3ff23d3b4cfe377529f4f9e82a78fe" @@ -1934,6 +1971,17 @@ tabbable "^4.0.0" tslib "^2.3.0" +"@reach/popover@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623" + integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA== + dependencies: + "@reach/portal" "0.16.0" + "@reach/rect" "0.16.0" + "@reach/utils" "0.16.0" + tabbable "^4.0.0" + tslib "^2.3.0" + "@reach/portal@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.13.0.tgz#bed220d41097deb1454a7928b22529ba10d3ea2b" @@ -1950,6 +1998,14 @@ "@reach/utils" "0.15.2" tslib "^2.3.0" +"@reach/portal@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3" + integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw== + dependencies: + "@reach/utils" "0.16.0" + tslib "^2.3.0" + "@reach/rect@0.15.2": version "0.15.2" resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.15.2.tgz#734e3f17a499d6e22bd2ea95856c801c41ed66fd" @@ -1961,6 +2017,17 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/rect@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16" + integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q== + dependencies: + "@reach/observe-rect" "1.2.0" + "@reach/utils" "0.16.0" + prop-types "^15.7.2" + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/utils@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.0.tgz#2da775a910d8894bb34e1e94fe95842674f71844" @@ -1996,6 +2063,14 @@ tiny-warning "^1.0.3" tslib "^2.3.0" +"@reach/utils@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce" + integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q== + dependencies: + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@reach/visually-hidden@0.13.0": version "0.13.0" resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.0.tgz#cace36d9bb80ffb797374fcaea989391b881038f" @@ -2069,10 +2144,10 @@ "@standardnotes/sncrypto-common" "^1.5.2" libsodium-wrappers "^0.7.8" -"@standardnotes/snjs@2.14.6": - version "2.14.6" - resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.6.tgz#fb3f625ec6f22bbee543ccb6fc69e177311c1a4b" - integrity sha512-/PfuyOv2u4Km29yQi2JXYYUteFmHmLYnbQhk96wYHbCwBiNmIyVdSp0VaA4XgVIuZq32QyhhTayjkexq5Huw/Q== +"@standardnotes/snjs@2.14.8": + version "2.14.8" + resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.14.8.tgz#ebd89734d7e846ade96b7d0d81a465418147337d" + integrity sha512-+nfo1civqJlHfrcDeKNJfp2t6o4gs1pkDbjPzT3vULhZUWbOwCeuF1jXHosCxpjnhd+5Wa/oG2KcbKKsqlrrfw== dependencies: "@standardnotes/auth" "3.7.2" "@standardnotes/common" "1.1.0" From 6d47821b8f967f52fea3e43bdf2f4102257928b4 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 00:28:03 +0530 Subject: [PATCH 02/20] feat: Add editor icons --- app/assets/icons/ic-authenticator.svg | 3 +++ app/assets/icons/ic-code.svg | 3 +++ app/assets/icons/ic-markdown.svg | 3 +++ app/assets/icons/ic-menu-arrow-down.svg | 4 ++++ app/assets/icons/ic-spreadsheets.svg | 3 +++ app/assets/icons/ic-tasks.svg | 3 +++ app/assets/icons/ic-text-paragraph.svg | 4 ++++ 7 files changed, 23 insertions(+) create mode 100644 app/assets/icons/ic-authenticator.svg create mode 100644 app/assets/icons/ic-code.svg create mode 100644 app/assets/icons/ic-markdown.svg create mode 100644 app/assets/icons/ic-menu-arrow-down.svg create mode 100644 app/assets/icons/ic-spreadsheets.svg create mode 100644 app/assets/icons/ic-tasks.svg create mode 100644 app/assets/icons/ic-text-paragraph.svg diff --git a/app/assets/icons/ic-authenticator.svg b/app/assets/icons/ic-authenticator.svg new file mode 100644 index 000000000..9a1193919 --- /dev/null +++ b/app/assets/icons/ic-authenticator.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-code.svg b/app/assets/icons/ic-code.svg new file mode 100644 index 000000000..4a871e270 --- /dev/null +++ b/app/assets/icons/ic-code.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-markdown.svg b/app/assets/icons/ic-markdown.svg new file mode 100644 index 000000000..bceed54b3 --- /dev/null +++ b/app/assets/icons/ic-markdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-menu-arrow-down.svg b/app/assets/icons/ic-menu-arrow-down.svg new file mode 100644 index 000000000..be1d6a489 --- /dev/null +++ b/app/assets/icons/ic-menu-arrow-down.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/assets/icons/ic-spreadsheets.svg b/app/assets/icons/ic-spreadsheets.svg new file mode 100644 index 000000000..70f175be2 --- /dev/null +++ b/app/assets/icons/ic-spreadsheets.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-tasks.svg b/app/assets/icons/ic-tasks.svg new file mode 100644 index 000000000..0f8ef0587 --- /dev/null +++ b/app/assets/icons/ic-tasks.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/ic-text-paragraph.svg b/app/assets/icons/ic-text-paragraph.svg new file mode 100644 index 000000000..4f43cdc0c --- /dev/null +++ b/app/assets/icons/ic-text-paragraph.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file From a98409a95ff6a571d0c0c12f2d0196444758718a Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 00:29:32 +0530 Subject: [PATCH 03/20] feat: Dropdown component feat: Add editor icons feat: Implement default editor selection --- .../javascripts/components/Dropdown.tsx | 77 +++++++++++++--- app/assets/javascripts/components/Icon.tsx | 14 +++ .../panes/general-segments/Defaults.tsx | 90 ++++++++++++++++++- app/assets/stylesheets/_reach-sub.scss | 3 +- app/assets/stylesheets/_sn.scss | 35 +++++++- 5 files changed, 204 insertions(+), 15 deletions(-) diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index d9667c310..54b3b64b5 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -1,7 +1,14 @@ -import { Listbox, ListboxOption } from '@reach/listbox'; +import { + ListboxArrow, + ListboxButton, + ListboxInput, + ListboxList, + ListboxOption, + ListboxPopover, +} from '@reach/listbox'; import VisuallyHidden from '@reach/visually-hidden'; import { FunctionComponent } from 'preact'; -import { IconType } from './Icon'; +import { IconType, Icon } from './Icon'; import '@reach/listbox/styles.css'; import { useState } from 'preact/hooks'; @@ -11,35 +18,85 @@ export type DropdownItem = { value: string; }; -type Props = { +type DropdownProps = { id: string; srLabel: string; items: DropdownItem[]; defaultValue: string; + onChange: (value: string) => void; }; -export const Dropdown: FunctionComponent = ({ +type ListboxButtonProps = { + value: string | null; + label: string; + isExpanded: boolean; +}; + +const customDropdownButton: FunctionComponent = ({ + label, + isExpanded, +}) => ( + <> +
{label}
+ + + + +); + +export const Dropdown: FunctionComponent = ({ id, srLabel, items, defaultValue, + onChange, }) => { const [value, setValue] = useState(defaultValue); const labelId = `${id}-label`; + const handleChange = (value: string) => { + setValue(value); + onChange(value); + }; + return ( <> {srLabel} - setValue(value)} + onChange={handleChange} aria-labelledby={labelId} > - {items.map((item) => ( - {item.label} - ))} - + + +
+ + {items.map((item) => ( + + {item.icon ? ( +
+ +
+ ) : null} +
{item.label}
+ + ))} + +
+ + ); }; diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx index e72804ae2..9e2ca1b1a 100644 --- a/app/assets/javascripts/components/Icon.tsx +++ b/app/assets/javascripts/components/Icon.tsx @@ -1,4 +1,5 @@ import PencilOffIcon from '../../icons/ic-pencil-off.svg'; +import PlainTextIcon from '../../icons/ic-text-paragraph.svg'; import RichTextIcon from '../../icons/ic-text-rich.svg'; import TrashIcon from '../../icons/ic-trash.svg'; import PinIcon from '../../icons/ic-pin.svg'; @@ -13,6 +14,12 @@ import PasswordIcon from '../../icons/ic-textbox-password.svg'; import TrashSweepIcon from '../../icons/ic-trash-sweep.svg'; import MoreIcon from '../../icons/ic-more.svg'; import TuneIcon from '../../icons/ic-tune.svg'; +import MenuArrowDownIcon from '../../icons/ic-menu-arrow-down.svg'; +import AuthenticatorIcon from '../../icons/ic-authenticator.svg'; +import SpreadsheetsIcon from '../../icons/ic-spreadsheets.svg'; +import TasksIcon from '../../icons/ic-tasks.svg'; +import MarkdownIcon from '../../icons/ic-markdown.svg'; +import CodeIcon from '../../icons/ic-code.svg'; import AccessibilityIcon from '../../icons/ic-accessibility.svg'; import HelpIcon from '../../icons/ic-help.svg'; @@ -35,7 +42,13 @@ import { FunctionalComponent } from 'preact'; const ICONS = { 'pencil-off': PencilOffIcon, + 'plain-text': PlainTextIcon, 'rich-text': RichTextIcon, + code: CodeIcon, + markdown: MarkdownIcon, + authenticator: AuthenticatorIcon, + spreadsheets: SpreadsheetsIcon, + tasks: TasksIcon, trash: TrashIcon, pin: PinIcon, unpin: UnpinIcon, @@ -64,6 +77,7 @@ const ICONS = { check: CheckIcon, 'check-bold': CheckBoldIcon, 'account-circle': AccountCircleIcon, + 'menu-arrow-down': MenuArrowDownIcon, }; export type IconType = keyof typeof ICONS; diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index 7f492b854..5ebb8725f 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -1,4 +1,5 @@ import { Dropdown, DropdownItem } from '@/components/Dropdown'; +import { IconType } from '@/components/Icon'; import { PreferencesGroup, PreferencesSegment, @@ -7,7 +8,11 @@ import { Title, } from '@/preferences/components'; import { WebApplication } from '@/ui_models/application'; -import { ComponentArea } from '@standardnotes/snjs'; +import { + ComponentArea, + ComponentMutator, + SNComponent, +} from '@standardnotes/snjs'; import { FunctionComponent } from 'preact'; import { useEffect, useState } from 'preact/hooks'; @@ -15,21 +20,85 @@ type Props = { application: WebApplication; }; +const getEditorIconType = (name: string): IconType | null => { + switch (name) { + case 'Bold Editor': + case 'Plus Editor': + return 'rich-text'; + case 'TokenVault': + return 'authenticator'; + case 'Secure Spreadsheets': + return 'spreadsheets'; + case 'Task Editor': + return 'tasks'; + case 'Code Editor': + return 'code'; + } + if (name.includes('Markdown')) { + return 'markdown'; + } + return null; +}; + +const makeEditorDefault = ( + application: WebApplication, + component: SNComponent, + currentDefault: SNComponent +) => { + if (currentDefault) { + application.changeItem(currentDefault.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); + } + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = true; + }); +}; + +const removeEditorDefault = ( + application: WebApplication, + component: SNComponent +) => { + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); +}; + +const getDefaultEditor = (application: WebApplication) => { + return application.componentManager + .componentsForArea(ComponentArea.Editor) + .filter((e) => e.isDefaultEditor())[0]; +}; + export const Defaults: FunctionComponent = ({ application }) => { const [editorItems, setEditorItems] = useState([]); + const [defaultEditorValue] = useState( + () => + getDefaultEditor(application)?.package_info?.identifier || 'plain-editor' + ); useEffect(() => { const editors = application.componentManager .componentsForArea(ComponentArea.Editor) + .sort((a, b) => { + return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; + }) .map((editor) => { + const iconType = getEditorIconType(editor.name); + return { label: editor.name, value: editor.package_info.identifier, + ...(iconType ? { icon: iconType } : null), }; }); setEditorItems([ { + icon: 'plain-text', label: 'Plain Editor', value: 'plain-editor', }, @@ -37,6 +106,22 @@ export const Defaults: FunctionComponent = ({ application }) => { ]); }, [application]); + const setDefaultEditor = (value: string) => { + const editors = application.componentManager.componentsForArea( + ComponentArea.Editor + ); + const currentDefault = getDefaultEditor(application); + + if (value !== 'plain-editor') { + const editorComponent = editors.filter( + (e) => e.package_info.identifier === value + )[0]; + makeEditorDefault(application, editorComponent, currentDefault); + } else { + removeEditorDefault(application, currentDefault); + } + }; + return ( @@ -49,7 +134,8 @@ export const Defaults: FunctionComponent = ({ application }) => { id="def-editor-dropdown" srLabel="Select the default editor" items={editorItems} - defaultValue="plain-editor" + defaultValue={defaultEditorValue} + onChange={setDefaultEditor} /> diff --git a/app/assets/stylesheets/_reach-sub.scss b/app/assets/stylesheets/_reach-sub.scss index fcb0da138..3d209c899 100644 --- a/app/assets/stylesheets/_reach-sub.scss +++ b/app/assets/stylesheets/_reach-sub.scss @@ -9,14 +9,13 @@ } [data-reach-dialog-overlay]::before { background-color: var(--sn-stylekit-contrast-background-color); - content: ""; + content: ''; position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.75; - } [data-reach-dialog-content] { diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index 6ecdf4abe..39bdc30ca 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -53,6 +53,29 @@ } } +.sn-dropdown-popover { + z-index: 3001; +} + +.sn-dropdown-button { + @extend .rounded; + @extend .px-3\.5; + @extend .py-1\.75; + @extend .fit-content; + @extend .bg-default; + @extend .text-input; + @extend .color-text; + @extend .border-neutral; + @extend .border-solid; + @extend .border-gray-300; + @extend .border-1; + @extend .min-w-42; +} + +.sn-dropdown-arrow { + @extend .flex; +} + /** Lesser specificity will give priority to reach's styles */ [data-reach-custom-checkbox-container].sn-switch { @extend .duration-150; @@ -114,6 +137,16 @@ &.sn-dropdown-item--no-icon { @extend .py-2; } + + &[data-current-nav] { + @extend .bg-contrast; + @extend .hover\:color-text; + } + + &[data-current-selected] { + background-color: var(--sn-stylekit-info-backdrop-color); + @extend .color-info; + } } .sn-tag { @@ -278,4 +311,4 @@ .select-none { user-select: none; -} \ No newline at end of file +} From 1a92fffcd46941de944f8416060c27e6624a157d Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 11:46:56 +0530 Subject: [PATCH 04/20] feat: Remove Set Default & Undefault buttons --- .../directives/views/editorMenu.ts | 70 ++++--------------- .../templates/directives/editor-menu.pug | 4 -- 2 files changed, 15 insertions(+), 59 deletions(-) diff --git a/app/assets/javascripts/directives/views/editorMenu.ts b/app/assets/javascripts/directives/views/editorMenu.ts index 3f2d0244e..44427d675 100644 --- a/app/assets/javascripts/directives/views/editorMenu.ts +++ b/app/assets/javascripts/directives/views/editorMenu.ts @@ -4,34 +4,30 @@ import { SNComponent, SNItem, ComponentArea } from '@standardnotes/snjs'; import { isDesktopApplication } from '@/utils'; import template from '%/directives/editor-menu.pug'; import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl'; -import { ComponentMutator } from '@standardnotes/snjs'; interface EditorMenuScope { - callback: (component: SNComponent) => void - selectedEditorUuid: string - currentItem: SNItem - application: WebApplication + callback: (component: SNComponent) => void; + selectedEditorUuid: string; + currentItem: SNItem; + application: WebApplication; } class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { - - callback!: () => (component: SNComponent) => void - selectedEditorUuid!: string - currentItem!: SNItem - application!: WebApplication + callback!: () => (component: SNComponent) => void; + selectedEditorUuid!: string; + currentItem!: SNItem; + application!: WebApplication; /* @ngInject */ - constructor( - $timeout: ng.ITimeoutService, - ) { + constructor($timeout: ng.ITimeoutService) { super($timeout); this.state = { - isDesktop: isDesktopApplication() + isDesktop: isDesktopApplication(), }; } public isEditorSelected(editor: SNComponent) { - if(!this.selectedEditorUuid) { + if (!this.selectedEditorUuid) { return false; } return this.selectedEditorUuid === editor.uuid; @@ -43,14 +39,15 @@ class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { $onInit() { super.$onInit(); - const editors = this.application.componentManager!.componentsForArea(ComponentArea.Editor) + const editors = this.application + .componentManager!.componentsForArea(ComponentArea.Editor) .sort((a, b) => { return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; }); const defaultEditor = editors.filter((e) => e.isDefaultEditor())[0]; this.setState({ editors: editors, - defaultEditor: defaultEditor + defaultEditor: defaultEditor, }); } @@ -67,46 +64,9 @@ class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { }); } - toggleDefaultForEditor(editor: SNComponent) { - if (this.state.defaultEditor === editor) { - this.removeEditorDefault(editor); - } else { - this.makeEditorDefault(editor); - } - } - offlineAvailableForComponent(component: SNComponent) { return component.local_url && this.state.isDesktop; } - - makeEditorDefault(component: SNComponent) { - const currentDefault = this.application.componentManager! - .componentsForArea(ComponentArea.Editor) - .filter((e) => e.isDefaultEditor())[0]; - if (currentDefault) { - this.application.changeItem(currentDefault.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - } - this.application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = true; - }); - this.setState({ - defaultEditor: component - }); - } - - removeEditorDefault(component: SNComponent) { - this.application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - this.setState({ - defaultEditor: null - }); - } } export class EditorMenu extends WebDirective { @@ -121,7 +81,7 @@ export class EditorMenu extends WebDirective { callback: '&', selectedEditorUuid: '=', currentItem: '=', - application: '=' + application: '=', }; } } diff --git a/app/assets/templates/directives/editor-menu.pug b/app/assets/templates/directives/editor-menu.pug index 67710575f..7d278faca 100644 --- a/app/assets/templates/directives/editor-menu.pug +++ b/app/assets/templates/directives/editor-menu.pug @@ -11,11 +11,7 @@ menu-row( ng-repeat='editor in self.state.editors track by editor.uuid' action='self.selectComponent(editor)', - button-action='self.toggleDefaultForEditor(editor)', - button-class="self.isEditorSelected(editor) ? 'warning' : 'info'", - button-text="self.isEditorDefault(editor) ? 'Undefault' : 'Set Default'", circle="self.isEditorSelected(editor) && 'success'", - has-button='self.isEditorSelected(editor) || isEditorDefault(editor)', label='editor.name', subtitle="self.isEditorSelected(editor) && 'Version ' + editor.package_info.version", ) From 47b49aa7a978896ccd20ddc5b350ccfa9405d837 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 13:06:00 +0530 Subject: [PATCH 05/20] feat: Add support for icons in Dropdown --- .../javascripts/components/Dropdown.tsx | 24 ++++++++++++++++--- app/assets/stylesheets/_sn.scss | 11 ++++++++- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index 54b3b64b5..093914de7 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -27,6 +27,7 @@ type DropdownProps = { }; type ListboxButtonProps = { + icon?: IconType; value: string | null; label: string; isExpanded: boolean; @@ -35,12 +36,20 @@ type ListboxButtonProps = { const customDropdownButton: FunctionComponent = ({ label, isExpanded, + icon, }) => ( <> -
{label}
+
+ {icon ? ( +
+ +
+ ) : null} +
{label}
+
@@ -74,7 +83,16 @@ export const Dropdown: FunctionComponent = ({ > { + const current = items.find((item) => item.value === value); + const icon = current ? current?.icon : null; + return customDropdownButton({ + value, + label, + isExpanded, + ...(icon ? { icon } : null), + }); + }} />
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index 39bdc30ca..a17f5fbf0 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -69,11 +69,20 @@ @extend .border-solid; @extend .border-gray-300; @extend .border-1; - @extend .min-w-42; + @extend .min-w-55; +} + +.sn-dropdown-button-label { + @extend .flex; + @extend .items-center; } .sn-dropdown-arrow { @extend .flex; + + &.sn-dropdown-arrow-flipped { + transform: rotate(180deg); + } } /** Lesser specificity will give priority to reach's styles */ From b165be2928f87640066fba67f7f8104440f89c14 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 13:23:52 +0530 Subject: [PATCH 06/20] fix: Fix dropdown list colors --- app/assets/stylesheets/_sn.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index a17f5fbf0..e1ff02453 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -55,6 +55,10 @@ .sn-dropdown-popover { z-index: 3001; + + &[data-reach-listbox-popover] { + background: var(--sn-stylekit-background-color); + } } .sn-dropdown-button { @@ -147,6 +151,10 @@ @extend .py-2; } + .sn-dropdown-popover & { + @extend .bg-default; + } + &[data-current-nav] { @extend .bg-contrast; @extend .hover\:color-text; From db888c4e0246346e55c794e0fbff1babfda3b604 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 20:04:39 +0530 Subject: [PATCH 07/20] fix: Fix dropdown item colors --- app/assets/javascripts/components/Dropdown.tsx | 1 - app/assets/stylesheets/_sn.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index 093914de7..46a65a909 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -9,7 +9,6 @@ import { import VisuallyHidden from '@reach/visually-hidden'; import { FunctionComponent } from 'preact'; import { IconType, Icon } from './Icon'; -import '@reach/listbox/styles.css'; import { useState } from 'preact/hooks'; export type DropdownItem = { diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index e1ff02453..d42e5bdaa 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -156,6 +156,7 @@ } &[data-current-nav] { + color: var(--sn-stylekit-contrast-foreground-color); @extend .bg-contrast; @extend .hover\:color-text; } From b1d95808d13dc3f903ed2ce0fb55651b7731451b Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 20:07:33 +0530 Subject: [PATCH 08/20] fix: Selected item bg color --- app/assets/stylesheets/_sn.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index d42e5bdaa..76e54101b 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -161,7 +161,7 @@ @extend .hover\:color-text; } - &[data-current-selected] { + .sn-dropdown-popover &[data-current-selected] { background-color: var(--sn-stylekit-info-backdrop-color); @extend .color-info; } From f6c019b63c7ab5ac9ba2d030dabad3e08b1baf6d Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 20:38:58 +0530 Subject: [PATCH 09/20] feat: Remove references of default editor --- app/assets/javascripts/directives/views/editorMenu.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/assets/javascripts/directives/views/editorMenu.ts b/app/assets/javascripts/directives/views/editorMenu.ts index 44427d675..2c41dc302 100644 --- a/app/assets/javascripts/directives/views/editorMenu.ts +++ b/app/assets/javascripts/directives/views/editorMenu.ts @@ -33,10 +33,6 @@ class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { return this.selectedEditorUuid === editor.uuid; } - public isEditorDefault(editor: SNComponent) { - return this.state.defaultEditor?.uuid === editor.uuid; - } - $onInit() { super.$onInit(); const editors = this.application @@ -44,10 +40,8 @@ class EditorMenuCtrl extends PureViewCtrl implements EditorMenuScope { .sort((a, b) => { return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; }); - const defaultEditor = editors.filter((e) => e.isDefaultEditor())[0]; this.setState({ editors: editors, - defaultEditor: defaultEditor, }); } From c48d9f22302dee82c20734f36a42adbd805cf556 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 20:39:52 +0530 Subject: [PATCH 10/20] refactor: Use identifier instead of name feat: Create EditorIdentifier enum --- .../panes/general-segments/Defaults.tsx | 43 +++++++++++++------ 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index 5ebb8725f..e6e8f6127 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -20,23 +20,39 @@ type Props = { application: WebApplication; }; -const getEditorIconType = (name: string): IconType | null => { - switch (name) { - case 'Bold Editor': - case 'Plus Editor': +enum EditorIdentifier { + PlainEditor = 'plain-editor', + BoldEditor = 'org.standardnotes.bold-editor', + CodeEditor = 'org.standardnotes.code-editor', + MarkdownBasic = 'org.standardnotes.simple-markdown-editor', + MarkdownMath = 'org.standardnotes.fancy-markdown-editor', + MarkdownMinimist = 'org.standardnotes.minimal-markdown-editor', + MarkdownPro = 'org.standardnotes.advanced-markdown-editor', + PlusEditor = 'org.standardnotes.plus-editor', + SecureSpreadsheets = 'org.standardnotes.standard-sheets', + TaskEditor = 'org.standardnotes.simple-task-editor', + TokenVault = 'org.standardnotes.token-vault', +} + +const getEditorIconType = (identifier: string): IconType | null => { + switch (identifier) { + case EditorIdentifier.BoldEditor: + case EditorIdentifier.PlusEditor: return 'rich-text'; - case 'TokenVault': + case EditorIdentifier.MarkdownBasic: + case EditorIdentifier.MarkdownMath: + case EditorIdentifier.MarkdownMinimist: + case EditorIdentifier.MarkdownPro: + return 'markdown'; + case EditorIdentifier.TokenVault: return 'authenticator'; - case 'Secure Spreadsheets': + case EditorIdentifier.SecureSpreadsheets: return 'spreadsheets'; - case 'Task Editor': + case EditorIdentifier.TaskEditor: return 'tasks'; - case 'Code Editor': + case EditorIdentifier.CodeEditor: return 'code'; } - if (name.includes('Markdown')) { - return 'markdown'; - } return null; }; @@ -87,11 +103,12 @@ export const Defaults: FunctionComponent = ({ application }) => { return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; }) .map((editor) => { - const iconType = getEditorIconType(editor.name); + const identifier = editor.package_info.identifier; + const iconType = getEditorIconType(identifier); return { label: editor.name, - value: editor.package_info.identifier, + value: identifier, ...(iconType ? { icon: iconType } : null), }; }); From b4b1e4260668d40372345603cfb2c658050457d0 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 20:46:00 +0530 Subject: [PATCH 11/20] refactor: Use enum instead of string --- .../preferences/panes/general-segments/Defaults.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index e6e8f6127..f3f15acc3 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -93,7 +93,8 @@ export const Defaults: FunctionComponent = ({ application }) => { const [editorItems, setEditorItems] = useState([]); const [defaultEditorValue] = useState( () => - getDefaultEditor(application)?.package_info?.identifier || 'plain-editor' + getDefaultEditor(application)?.package_info?.identifier || + EditorIdentifier.PlainEditor ); useEffect(() => { @@ -117,7 +118,7 @@ export const Defaults: FunctionComponent = ({ application }) => { { icon: 'plain-text', label: 'Plain Editor', - value: 'plain-editor', + value: EditorIdentifier.PlainEditor, }, ...editors, ]); @@ -129,7 +130,7 @@ export const Defaults: FunctionComponent = ({ application }) => { ); const currentDefault = getDefaultEditor(application); - if (value !== 'plain-editor') { + if (value !== EditorIdentifier.PlainEditor) { const editorComponent = editors.filter( (e) => e.package_info.identifier === value )[0]; From e71c5cc85d41f080894f8725f90b6947ba5c94d5 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 20:50:29 +0530 Subject: [PATCH 12/20] feat: Use lighter border on Dropdown --- app/assets/stylesheets/_sn.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss index 76e54101b..3567bff84 100644 --- a/app/assets/stylesheets/_sn.scss +++ b/app/assets/stylesheets/_sn.scss @@ -69,7 +69,6 @@ @extend .bg-default; @extend .text-input; @extend .color-text; - @extend .border-neutral; @extend .border-solid; @extend .border-gray-300; @extend .border-1; From 7aea7f330ca152b818ada0326593bd36868b0730 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 21:07:26 +0530 Subject: [PATCH 13/20] refactor: Sort editor array after concat --- .../panes/general-segments/Defaults.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index f3f15acc3..6c3bb2423 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -100,9 +100,6 @@ export const Defaults: FunctionComponent = ({ application }) => { useEffect(() => { const editors = application.componentManager .componentsForArea(ComponentArea.Editor) - .sort((a, b) => { - return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; - }) .map((editor) => { const identifier = editor.package_info.identifier; const iconType = getEditorIconType(identifier); @@ -112,16 +109,19 @@ export const Defaults: FunctionComponent = ({ application }) => { value: identifier, ...(iconType ? { icon: iconType } : null), }; + }) + .concat([ + { + icon: 'plain-text', + label: 'Plain Editor', + value: EditorIdentifier.PlainEditor, + }, + ]) + .sort((a, b) => { + return a.label.toLowerCase() < b.label.toLowerCase() ? -1 : 1; }); - setEditorItems([ - { - icon: 'plain-text', - label: 'Plain Editor', - value: EditorIdentifier.PlainEditor, - }, - ...editors, - ]); + setEditorItems(editors); }, [application]); const setDefaultEditor = (value: string) => { From ce1c51905304af72072b49820c76f2dc09b5949e Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 21:15:38 +0530 Subject: [PATCH 14/20] refactor: Move functions inside component refactor: Remove application param as it is already present in component props --- .../panes/general-segments/Defaults.tsx | 70 +++++++++---------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index 6c3bb2423..a3620b812 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -56,47 +56,43 @@ const getEditorIconType = (identifier: string): IconType | null => { return null; }; -const makeEditorDefault = ( - application: WebApplication, - component: SNComponent, - currentDefault: SNComponent -) => { - if (currentDefault) { - application.changeItem(currentDefault.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - } - application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = true; - }); -}; - -const removeEditorDefault = ( - application: WebApplication, - component: SNComponent -) => { - application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); -}; - -const getDefaultEditor = (application: WebApplication) => { - return application.componentManager - .componentsForArea(ComponentArea.Editor) - .filter((e) => e.isDefaultEditor())[0]; -}; - export const Defaults: FunctionComponent = ({ application }) => { const [editorItems, setEditorItems] = useState([]); const [defaultEditorValue] = useState( () => - getDefaultEditor(application)?.package_info?.identifier || + getDefaultEditor()?.package_info?.identifier || EditorIdentifier.PlainEditor ); + const makeEditorDefault = ( + component: SNComponent, + currentDefault: SNComponent + ) => { + if (currentDefault) { + application.changeItem(currentDefault.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); + } + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = true; + }); + }; + + const removeEditorDefault = (component: SNComponent) => { + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); + }; + + const getDefaultEditor = () => { + return application.componentManager + .componentsForArea(ComponentArea.Editor) + .filter((e) => e.isDefaultEditor())[0]; + }; + useEffect(() => { const editors = application.componentManager .componentsForArea(ComponentArea.Editor) @@ -128,15 +124,15 @@ export const Defaults: FunctionComponent = ({ application }) => { const editors = application.componentManager.componentsForArea( ComponentArea.Editor ); - const currentDefault = getDefaultEditor(application); + const currentDefault = getDefaultEditor(); if (value !== EditorIdentifier.PlainEditor) { const editorComponent = editors.filter( (e) => e.package_info.identifier === value )[0]; - makeEditorDefault(application, editorComponent, currentDefault); + makeEditorDefault(editorComponent, currentDefault); } else { - removeEditorDefault(application, currentDefault); + removeEditorDefault(currentDefault); } }; From 24289a9322f7c74962818561630625e124ea41a1 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 1 Oct 2021 21:33:40 +0530 Subject: [PATCH 15/20] Revert "refactor: Move functions inside component" This reverts commit ce1c51905304af72072b49820c76f2dc09b5949e. --- .../panes/general-segments/Defaults.tsx | 70 ++++++++++--------- 1 file changed, 37 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index a3620b812..6c3bb2423 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -56,43 +56,47 @@ const getEditorIconType = (identifier: string): IconType | null => { return null; }; +const makeEditorDefault = ( + application: WebApplication, + component: SNComponent, + currentDefault: SNComponent +) => { + if (currentDefault) { + application.changeItem(currentDefault.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); + } + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = true; + }); +}; + +const removeEditorDefault = ( + application: WebApplication, + component: SNComponent +) => { + application.changeAndSaveItem(component.uuid, (m) => { + const mutator = m as ComponentMutator; + mutator.defaultEditor = false; + }); +}; + +const getDefaultEditor = (application: WebApplication) => { + return application.componentManager + .componentsForArea(ComponentArea.Editor) + .filter((e) => e.isDefaultEditor())[0]; +}; + export const Defaults: FunctionComponent = ({ application }) => { const [editorItems, setEditorItems] = useState([]); const [defaultEditorValue] = useState( () => - getDefaultEditor()?.package_info?.identifier || + getDefaultEditor(application)?.package_info?.identifier || EditorIdentifier.PlainEditor ); - const makeEditorDefault = ( - component: SNComponent, - currentDefault: SNComponent - ) => { - if (currentDefault) { - application.changeItem(currentDefault.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - } - application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = true; - }); - }; - - const removeEditorDefault = (component: SNComponent) => { - application.changeAndSaveItem(component.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); - }; - - const getDefaultEditor = () => { - return application.componentManager - .componentsForArea(ComponentArea.Editor) - .filter((e) => e.isDefaultEditor())[0]; - }; - useEffect(() => { const editors = application.componentManager .componentsForArea(ComponentArea.Editor) @@ -124,15 +128,15 @@ export const Defaults: FunctionComponent = ({ application }) => { const editors = application.componentManager.componentsForArea( ComponentArea.Editor ); - const currentDefault = getDefaultEditor(); + const currentDefault = getDefaultEditor(application); if (value !== EditorIdentifier.PlainEditor) { const editorComponent = editors.filter( (e) => e.package_info.identifier === value )[0]; - makeEditorDefault(editorComponent, currentDefault); + makeEditorDefault(application, editorComponent, currentDefault); } else { - removeEditorDefault(currentDefault); + removeEditorDefault(application, currentDefault); } }; From fc226043fac6bf7c24e61fb86b1a06ead7c07a52 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Mon, 4 Oct 2021 19:00:57 +0530 Subject: [PATCH 16/20] Update app/assets/javascripts/components/Dropdown.tsx Co-authored-by: Antonella Sgarlatta --- app/assets/javascripts/components/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index 46a65a909..8169c43f0 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -32,7 +32,7 @@ type ListboxButtonProps = { isExpanded: boolean; }; -const customDropdownButton: FunctionComponent = ({ +const CustomDropdownButton: FunctionComponent = ({ label, isExpanded, icon, From 170234ce843ba1ca59faf05a02e006cc7987a147 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Mon, 4 Oct 2021 19:12:11 +0530 Subject: [PATCH 17/20] refactor: Use PascalCase naming --- app/assets/javascripts/components/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index 8169c43f0..cfb9c7839 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -85,7 +85,7 @@ export const Dropdown: FunctionComponent = ({ children={({ value, label, isExpanded }) => { const current = items.find((item) => item.value === value); const icon = current ? current?.icon : null; - return customDropdownButton({ + return CustomDropdownButton({ value, label, isExpanded, From 980ab9358df2f1368c8449eebc531ae4500b3fa8 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Mon, 4 Oct 2021 19:12:37 +0530 Subject: [PATCH 18/20] refactor: Use removeEditorDefault --- .../preferences/panes/general-segments/Defaults.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index 6c3bb2423..6231e74b8 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -62,10 +62,7 @@ const makeEditorDefault = ( currentDefault: SNComponent ) => { if (currentDefault) { - application.changeItem(currentDefault.uuid, (m) => { - const mutator = m as ComponentMutator; - mutator.defaultEditor = false; - }); + removeEditorDefault(application, currentDefault); } application.changeAndSaveItem(component.uuid, (m) => { const mutator = m as ComponentMutator; From f233c87b0f89c12414ffb180506d14e44870c042 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Mon, 4 Oct 2021 20:22:19 +0530 Subject: [PATCH 19/20] refactor: Change srLabel to label --- app/assets/javascripts/components/Dropdown.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx index cfb9c7839..e06994bae 100644 --- a/app/assets/javascripts/components/Dropdown.tsx +++ b/app/assets/javascripts/components/Dropdown.tsx @@ -19,7 +19,7 @@ export type DropdownItem = { type DropdownProps = { id: string; - srLabel: string; + label: string; items: DropdownItem[]; defaultValue: string; onChange: (value: string) => void; @@ -58,7 +58,7 @@ const CustomDropdownButton: FunctionComponent = ({ export const Dropdown: FunctionComponent = ({ id, - srLabel, + label, items, defaultValue, onChange, @@ -74,7 +74,7 @@ export const Dropdown: FunctionComponent = ({ return ( <> - {srLabel} + {label} Date: Mon, 4 Oct 2021 20:25:09 +0530 Subject: [PATCH 20/20] refactor: Fix label prop --- .../javascripts/preferences/panes/general-segments/Defaults.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx index 6231e74b8..51a6062d1 100644 --- a/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx +++ b/app/assets/javascripts/preferences/panes/general-segments/Defaults.tsx @@ -147,7 +147,7 @@ export const Defaults: FunctionComponent = ({ application }) => {