From e280309be6187f85620e85d70b86a12bd7925058 Mon Sep 17 00:00:00 2001 From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com> Date: Tue, 7 Jul 2020 12:01:11 +0200 Subject: [PATCH] fix: enable, disable, sync editor stack per note --- .../javascripts/views/editor/editor-view.pug | 220 +++++++++--------- .../javascripts/views/editor/editor_view.ts | 139 +++++------ 2 files changed, 181 insertions(+), 178 deletions(-) diff --git a/app/assets/javascripts/views/editor/editor-view.pug b/app/assets/javascripts/views/editor/editor-view.pug index 00372964c..e5ab4338b 100644 --- a/app/assets/javascripts/views/editor/editor-view.pug +++ b/app/assets/javascripts/views/editor/editor-view.pug @@ -1,9 +1,9 @@ #editor-column.section.editor.sn-component(aria-label='Note') .sn-component .sk-app-bar.no-edges( - ng-if='self.noteLocked', - ng-init="self.lockText = 'Note Locked'", - ng-mouseleave="self.lockText = 'Note Locked'", + ng-if='self.noteLocked', + ng-init="self.lockText = 'Note Locked'", + ng-mouseleave="self.lockText = 'Note Locked'", ng-mouseover="self.lockText = 'Unlock'" ) .left @@ -12,17 +12,17 @@ i.icon.ion-locked | {{self.lockText}} #editor-title-bar.section-title-bar( - ng-class="{'locked' : self.noteLocked}", + ng-class="{'locked' : self.noteLocked}", ng-show='self.note && !self.note.errorDecrypting' ) .title input#note-title-editor.input( - ng-blur='self.onTitleBlur()', - ng-change='self.onTitleChange()', - ng-disabled='self.noteLocked', - ng-focus='self.onTitleFocus()', - ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)', - ng-model='self.editorValues.title', + ng-blur='self.onTitleBlur()', + ng-change='self.onTitleChange()', + ng-disabled='self.noteLocked', + ng-focus='self.onTitleFocus()', + ng-keyup='$event.keyCode == 13 && self.onTitleEnter($event)', + ng-model='self.editorValues.title', select-on-focus='true', spellcheck='false' ) @@ -34,28 +34,28 @@ .editor-tags #note-tags-component-container(ng-if='self.activeTagsComponent') component-view.component-view( - component-uuid='self.activeTagsComponent.uuid', - ng-class="{'locked' : self.noteLocked}", + component-uuid='self.activeTagsComponent.uuid', + ng-class="{'locked' : self.noteLocked}", ng-style="self.noteLocked && {'pointer-events' : 'none'}", application='self.application' ) input.tags-input( - ng-blur='self.onTagsInputBlur()', - ng-disabled='self.noteLocked', - ng-if='!self.activeTagsComponent', - ng-keyup='$event.keyCode == 13 && $event.target.blur();', - ng-model='self.editorValues.tagsInputValue', - placeholder='#tags', - spellcheck='false', + ng-blur='self.onTagsInputBlur()', + ng-disabled='self.noteLocked', + ng-if='!self.activeTagsComponent', + ng-keyup='$event.keyCode == 13 && $event.target.blur();', + ng-model='self.editorValues.tagsInputValue', + placeholder='#tags', + spellcheck='false', type='text' ) .sn-component(ng-if='self.note') #editor-menu-bar.sk-app-bar.no-edges .left .sk-app-bar-item( - click-outside=`self.setMenuState('showOptionsMenu', false)`, - is-open='self.state.showOptionsMenu', - ng-class="{'selected' : self.state.showOptionsMenu}", + click-outside=`self.setMenuState('showOptionsMenu', false)`, + is-open='self.state.showOptionsMenu', + ng-class="{'selected' : self.state.showOptionsMenu}", ng-click="self.toggleMenu('showOptionsMenu')" ) .sk-label Options @@ -64,182 +64,182 @@ .sk-menu-panel-header .sk-menu-panel-header-title Note Options menu-row( - action='self.selectedMenuItem(true); self.togglePin()' - desc="'Pin or unpin a note from the top of your list'", + action='self.selectedMenuItem(true); self.togglePin()' + desc="'Pin or unpin a note from the top of your list'", label="self.note.pinned ? 'Unpin' : 'Pin'" ) menu-row( - action='self.selectedMenuItem(true); self.toggleArchiveNote()' - desc="'Archive or unarchive a note from your Archived system tag'", + action='self.selectedMenuItem(true); self.toggleArchiveNote()' + desc="'Archive or unarchive a note from your Archived system tag'", label="self.note.archived ? 'Unarchive' : 'Archive'" ) menu-row( - action='self.selectedMenuItem(true); self.toggleLockNote()' - desc="'Locking notes prevents unintentional editing'", + action='self.selectedMenuItem(true); self.toggleLockNote()' + desc="'Locking notes prevents unintentional editing'", label="self.noteLocked ? 'Unlock' : 'Lock'" ) menu-row( - action='self.selectedMenuItem(true); self.toggleProtectNote()' - desc=`'Protecting a note will require credentials to view - it (Manage Privileges via Account menu)'`, + action='self.selectedMenuItem(true); self.toggleProtectNote()' + desc=`'Protecting a note will require credentials to view + it (Manage Privileges via Account menu)'`, label="self.note.protected ? 'Unprotect' : 'Protect'" ) menu-row( - action='self.selectedMenuItem(true); self.toggleNotePreview()' - circle="self.note.hidePreview ? 'danger' : 'success'", - circle-align="'right'", - desc="'Hide or unhide the note preview from the list of notes'", + action='self.selectedMenuItem(true); self.toggleNotePreview()' + circle="self.note.hidePreview ? 'danger' : 'success'", + circle-align="'right'", + desc="'Hide or unhide the note preview from the list of notes'", label="'Preview'" ) menu-row( - action='self.selectedMenuItem(); self.deleteNote()' - desc="'Send this note to the trash'", - label="'Move to Trash'", - ng-show='!self.state.altKeyDown && !self.note.trashed && !self.note.errorDecrypting', + action='self.selectedMenuItem(); self.deleteNote()' + desc="'Send this note to the trash'", + label="'Move to Trash'", + ng-show='!self.state.altKeyDown && !self.note.trashed && !self.note.errorDecrypting', stylekit-class="'warning'" ) menu-row( - action='self.selectedMenuItem(); self.deleteNotePermanantely()' - desc="'Delete this note permanently from all your devices'", - label="'Delete Permanently'", - ng-show='!self.note.trashed && self.note.errorDecrypting', + action='self.selectedMenuItem(); self.deleteNotePermanantely()' + desc="'Delete this note permanently from all your devices'", + label="'Delete Permanently'", + ng-show='!self.note.trashed && self.note.errorDecrypting', stylekit-class="'danger'" ) div(ng-if='self.note.trashed || self.state.altKeyDown') menu-row( - action='self.selectedMenuItem(true); self.restoreTrashedNote()' - desc="'Undelete this note and restore it back into your notes'", - label="'Restore'", - ng-show='self.note.trashed', + action='self.selectedMenuItem(true); self.restoreTrashedNote()' + desc="'Undelete this note and restore it back into your notes'", + label="'Restore'", + ng-show='self.note.trashed', stylekit-class="'info'" ) menu-row( - action='self.selectedMenuItem(true); self.deleteNotePermanantely()' - desc="'Delete this note permanently from all your devices'", - label="'Delete Permanently'", + action='self.selectedMenuItem(true); self.deleteNotePermanantely()' + desc="'Delete this note permanently from all your devices'", + label="'Delete Permanently'", stylekit-class="'danger'" ) menu-row( - action='self.selectedMenuItem(true); self.emptyTrash()' - desc="'Permanently delete all notes in the trash'", - label="'Empty Trash'", - ng-show='self.note.trashed || !self.state.altKeyDown', - stylekit-class="'danger'", + action='self.selectedMenuItem(true); self.emptyTrash()' + desc="'Permanently delete all notes in the trash'", + label="'Empty Trash'", + ng-show='self.note.trashed || !self.state.altKeyDown', + stylekit-class="'danger'", subtitle="self.getTrashCount() + ' notes in trash'" ) .sk-menu-panel-section .sk-menu-panel-header .sk-menu-panel-header-title Global Display menu-row( - action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)" - circle="self.state.monospaceFont ? 'success' : 'neutral'", - desc="'Toggles the font style for the default editor'", - disabled='self.activeEditorComponent', - label="'Monospace Font'", + action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMonospace)" + circle="self.state.monospaceFont ? 'success' : 'neutral'", + desc="'Toggles the font style for the default editor'", + disabled='self.activeEditorComponent', + label="'Monospace Font'", subtitle="self.activeEditorComponent ? 'Not available with editor extensions' : null" ) menu-row( - action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)" - circle="self.state.spellcheck ? 'success' : 'neutral'", - desc="'Toggles spellcheck for the default editor'", - disabled='self.activeEditorComponent', - label="'Spellcheck'", + action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeySpellcheck)" + circle="self.state.spellcheck ? 'success' : 'neutral'", + desc="'Toggles spellcheck for the default editor'", + disabled='self.activeEditorComponent', + label="'Spellcheck'", subtitle=` - self.activeEditorComponent - ? 'Not available with editor extensions' + self.activeEditorComponent + ? 'Not available with editor extensions' : (self.state.isDesktop ? 'May degrade editor performance' : null) `) menu-row( - action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)" - circle="self.state.marginResizersEnabled ? 'success' : 'neutral'", - desc="'Allows for editor left and right margins to be resized'", - faded='!self.state.marginResizersEnabled', + action="self.selectedMenuItem(true); self.toggleWebPrefKey(self.prefKeyMarginResizers)" + circle="self.state.marginResizersEnabled ? 'success' : 'neutral'", + desc="'Allows for editor left and right margins to be resized'", + faded='!self.state.marginResizersEnabled', label="'Margin Resizers'" ) .sk-app-bar-item( click-outside=`self.setMenuState('showEditorMenu', false)` - is-open='self.state.showEditorMenu', - ng-class="{'selected' : self.state.showEditorMenu}", + is-open='self.state.showEditorMenu', + ng-class="{'selected' : self.state.showEditorMenu}", ng-click="self.toggleMenu('showEditorMenu')" ) .sk-label Editor editor-menu( - callback='self.editorMenuOnSelect', - current-item='self.note', - ng-if='self.state.showEditorMenu', + callback='self.editorMenuOnSelect', + current-item='self.note', + ng-if='self.state.showEditorMenu', selected-editor-uuid='self.activeEditorComponent && self.activeEditorComponent.uuid', application='self.application' ) .sk-app-bar-item( - click-outside=`self.setMenuState('showExtensions', false)`, - is-open='self.state.showExtensions', - ng-class="{'selected' : self.state.showExtensions}", + click-outside=`self.setMenuState('showExtensions', false)`, + is-open='self.state.showExtensions', + ng-class="{'selected' : self.state.showExtensions}", ng-click="self.toggleMenu('showExtensions')" ) .sk-label Actions actions-menu( - item='self.note', + item='self.note', ng-if='self.state.showExtensions', application='self.application' ) .sk-app-bar-item( - click-outside=`self.setMenuState('showSessionHistory', false)`, - is-open='self.state.showSessionHistory', + click-outside=`self.setMenuState('showSessionHistory', false)`, + is-open='self.state.showSessionHistory', ng-click="self.toggleMenu('showSessionHistory')" ) .sk-label Session History session-history-menu( - item='self.note', + item='self.note', ng-if='self.state.showSessionHistory', application='self.application' ) #editor-content.editor-content(ng-if='!self.note.errorDecrypting') panel-resizer.left( - control='self.leftPanelPuppet', - hoverable='true', - min-width='300', - ng-if='self.state.marginResizersEnabled', - on-resize-finish='self.onPanelResizeFinish', - panel-id="'editor-content'", + control='self.leftPanelPuppet', + hoverable='true', + min-width='300', + ng-if='self.state.marginResizersEnabled', + on-resize-finish='self.onPanelResizeFinish', + panel-id="'editor-content'", property="'left'" ) component-view.component-view( - component-uuid='self.activeEditorComponent.uuid', - ng-if='self.activeEditorComponent && !self.state.editorComponentUnloading', + component-uuid='self.activeEditorComponent.uuid', + ng-if='self.activeEditorComponent && !self.state.editorComponentUnloading', on-load='self.onEditorLoad', application='self.application' ) textarea#note-text-editor.editable( - dir='auto', - ng-attr-spellcheck='{{self.state.spellcheck}}', - ng-change='self.contentChanged()', - ng-click='self.clickedTextArea()', + dir='auto', + ng-attr-spellcheck='{{self.state.spellcheck}}', + ng-change='self.contentChanged()', + ng-click='self.clickedTextArea()', ng-focus='self.onContentFocus()', - ng-if='!self.activeEditorComponent && !self.state.textareaUnloading', - ng-model='self.editorValues.text', - ng-model-options='{ debounce: self.state.editorDebounce}', - ng-readonly='self.noteLocked', + ng-if='!self.activeEditorComponent && !self.state.textareaUnloading', + ng-model='self.editorValues.text', + ng-model-options='{ debounce: self.state.editorDebounce}', + ng-readonly='self.noteLocked', ng-trim='false' ) | {{self.onSystemEditorLoad()}} panel-resizer( - control='self.rightPanelPuppet', - hoverable='true', min-width='300', - ng-if='self.state.marginResizersEnabled', - on-resize-finish='self.onPanelResizeFinish', - panel-id="'editor-content'", + control='self.rightPanelPuppet', + hoverable='true', min-width='300', + ng-if='self.state.marginResizersEnabled', + on-resize-finish='self.onPanelResizeFinish', + panel-id="'editor-content'", property="'right'" ) .section(ng-show='self.note.errorDecrypting') p.medium-padding(style='padding-top: 0 !important;') - | There was an error decrypting this item. Ensure you are running the + | There was an error decrypting this item. Ensure you are running the | latest version of this app, then sign out and sign back in to try again. #editor-pane-component-stack(ng-show='self.note') #component-stack-menu-bar.sk-app-bar.no-edges(ng-if='self.state.allStackComponents.length') .left .sk-app-bar-item( ng-repeat='component in self.state.allStackComponents track by component.uuid' - ng-click='self.toggleStackComponentForCurrentItem(component)', + ng-click='self.toggleStackComponentForCurrentItem(component)', ) .sk-app-bar-item-column .sk-circle.small( @@ -249,9 +249,9 @@ .sk-label {{component.name}} .sn-component component-view.component-view.component-stack-item( - ng-repeat='component in self.state.activeStackComponents track by component.uuid', - component-uuid='component.uuid', - manual-dealloc='true', + ng-repeat='component in self.state.allStackComponents track by component.uuid', + component-uuid='component.uuid', + manual-dealloc='true', ng-show='!self.stackComponentHidden(component)', application='self.application' - ) + ) diff --git a/app/assets/javascripts/views/editor/editor_view.ts b/app/assets/javascripts/views/editor/editor_view.ts index 2097c4a8e..a373d9016 100644 --- a/app/assets/javascripts/views/editor/editor_view.ts +++ b/app/assets/javascripts/views/editor/editor_view.ts @@ -15,7 +15,7 @@ import { ComponentArea, ComponentAction, WebPrefKey, - ComponentMutator + ComponentMutator, } from 'snjs'; import find from 'lodash/find'; import { isDesktopApplication } from '@/utils'; @@ -90,12 +90,11 @@ type EditorValues = { tagsInputValue?: string } -interface EditorViewScope { - application: WebApplication - editor: Editor +function sortAlphabetically(array: SNComponent[]): SNComponent[] { + return array.sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1); } -class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { +class EditorViewCtrl extends PureViewCtrl<{}, EditorState> { /** Passed through template */ readonly application!: WebApplication readonly editor!: Editor @@ -210,19 +209,16 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { const currentEditor = this.activeEditorComponent; const newEditor = this.componentGroup.activeComponentForArea(ComponentArea.Editor); if (currentEditor && newEditor && currentEditor.uuid !== newEditor.uuid) { - /** Unload current component view so that we create a new one, + /** Unload current component view so that we create a new one, * then change the active editor */ - await this.setEditorState({ + await this.setState({ editorComponentUnloading: true }); } - await this.setEditorState({ + this.setState({ activeEditorComponent: newEditor, activeTagsComponent: this.componentGroup.activeComponentForArea(ComponentArea.NoteTags), - activeStackComponents: this.componentGroup.activeComponentsForArea(ComponentArea.EditorStack) - }) - /** Stop unloading, if we were already unloading */ - await this.setEditorState({ + /** Stop unloading, if we were already unloading */ editorComponentUnloading: false }); } @@ -237,14 +233,19 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { editorDebounce: EDITOR_DEBOUNCE, isDesktop: isDesktopApplication(), spellcheck: true, + syncTakingTooLong: false, + showExtensions: false, + showOptionsMenu: false, + showEditorMenu: false, + showSessionHistory: false, + altKeyDown: false, + noteStatus: undefined, + editorComponentUnloading: false, + textareaUnloading: false, mutable: { tagsString: '' } - } as Partial; - } - - async setEditorState(state: Partial) { - return this.setState(state); + } as EditorState; } async onAppLaunch() { @@ -263,10 +264,10 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { /** @override */ onAppEvent(eventName: ApplicationEvent) { if (eventName === ApplicationEvent.HighLatencySync) { - this.setEditorState({ syncTakingTooLong: true }); + this.setState({ syncTakingTooLong: true }); } else if (eventName === ApplicationEvent.CompletedFullSync) { - this.setEditorState({ syncTakingTooLong: false }); - const isInErrorState = this.getState().saveError; + this.setState({ syncTakingTooLong: false }); + const isInErrorState = this.state.saveError; /** if we're still dirty, don't change status, a sync is likely upcoming. */ if (!this.note.dirty && isInErrorState) { this.showAllChangesSavedStatus(); @@ -289,11 +290,11 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { } get activeEditorComponent() { - return this.getState().activeEditorComponent; + return this.state.activeEditorComponent; } get activeTagsComponent() { - return this.getState().activeTagsComponent; + return this.state.activeTagsComponent; } get componentGroup() { @@ -302,7 +303,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { async handleEditorNoteChange() { this.cancelPendingSetStatus(); - await this.setEditorState({ + await this.setState({ showExtensions: false, showOptionsMenu: false, showEditorMenu: false, @@ -322,31 +323,32 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { } } - async reloadComponentEditorState() { - const associatedEditor = this.application.componentManager!.editorForNote(this.note); - if (!associatedEditor) { - /** No editor */ - let changed = false; + async reloadComponentEditorState(): Promise<{ editor?: SNComponent, changed: boolean }> { + const editor = this.application.componentManager!.editorForNote(this.note); + if (!editor) { + let changed: boolean; if (this.activeEditorComponent) { await this.componentGroup.deactivateComponentForArea(ComponentArea.Editor); changed = true; + } else { + changed = false; } - return { editor: undefined, changed }; + return { editor, changed }; } - if (associatedEditor.uuid === this.activeEditorComponent?.uuid) { + if (editor.uuid === this.activeEditorComponent?.uuid) { /** Same editor, no change */ - return { editor: associatedEditor, changed: false }; + return { editor, changed: false }; } - await this.componentGroup.activateComponent(associatedEditor); - return { editor: associatedEditor, changed: true }; + await this.componentGroup.activateComponent(editor); + return { editor, changed: true }; } /** * Because note.locked accesses note.content.appData, * we do not want to expose the template to direct access to note.locked, - * otherwise an exception will occur when trying to access note.locked if the note + * otherwise an exception will occur when trying to access note.locked if the note * is deleted. There is potential for race conditions to occur with setState, where a * previous setState call may have queued a digest cycle, and the digest cycle triggers * on a deleted note. @@ -381,38 +383,39 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { this.removeComponentsObserver = this.application.streamItems( ContentType.Component, async (items) => { - const components = items as SNComponent[]; - if (!this.note) { - return; - } - /** Reload componentStack in case new ones were added or removed */ - await this.reloadComponentStack(); + if (!this.note) return; + this.setState({ + allStackComponents: sortAlphabetically( + this.application.componentManager!.componentsForArea(ComponentArea.EditorStack) + .filter(component => component.active) + ) + }); + this.reloadComponentContext(); this.reloadNoteTagsComponent(); /** Observe editor changes to see if the current note should update its editor */ + const components = items as SNComponent[]; const editors = components.filter((component) => { return component.isEditor(); }); - if (editors.length === 0) { - return; - } - /** Find the most recent editor for note */ - this.reloadComponentEditorState().then(({ editor, changed }) => { + if (editors.length) { + /** Find the most recent editor for note */ + const { editor, changed } = await this.reloadComponentEditorState(); if (!editor && changed) { this.reloadFont(); } - }); + } } ); } setMenuState(menu: string, state: boolean) { - this.setEditorState({ + this.setState({ [menu]: state }); this.closeAllMenus(menu); } - toggleMenu(menu: string) { + toggleMenu(menu: keyof EditorState) { this.setMenuState(menu, !this.state[menu]); } @@ -429,7 +432,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { menuState[candidate] = false; } } - this.setEditorState(menuState); + this.setState(menuState); } async editorMenuOnSelect(component?: SNComponent) { @@ -490,7 +493,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { * immediately. * @param isUserModified This field determines if the item will be saved as a user * modification, thus updating the user modified date displayed in the UI - * @param dontUpdatePreviews Whether this change should update the note's plain and HTML + * @param dontUpdatePreviews Whether this change should update the note's plain and HTML * preview. * @param customMutate A custom mutator function. * @param closeAfterSync Whether this editor should be closed after the sync starts. @@ -569,7 +572,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { } showAllChangesSavedStatus() { - this.setEditorState({ + this.setState({ saveError: false, syncTakingTooLong: false }); @@ -585,7 +588,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { desc: "Changes saved offline" }; } - this.setEditorState({ + this.setState({ saveError: true, syncTakingTooLong: false }); @@ -609,7 +612,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { } this.statusTimeout = this.$timeout(() => { status.date = new Date(); - this.setEditorState({ + this.setState({ noteStatus: status }); }, waitForMs); @@ -876,7 +879,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { public async saveTagsFromStrings(strings?: string[]) { if ( !strings - && this.editorValues.tagsInputValue === this.getState().tagsAsStrings + && this.editorValues.tagsInputValue === this.state.tagsAsStrings ) { return; } @@ -965,7 +968,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { WebPrefKey.EditorResizersEnabled, true ); - await this.setEditorState({ + await this.setState({ monospaceFont, spellcheck, marginResizersEnabled @@ -979,7 +982,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { this.reloadFont(); if ( - this.getState().marginResizersEnabled && + this.state.marginResizersEnabled && this.leftPanelPuppet!.ready && this.rightPanelPuppet!.ready ) { @@ -1009,8 +1012,8 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { if (!editor) { return; } - if (this.getState().monospaceFont) { - if (this.getState().isDesktop) { + if (this.state.monospaceFont) { + if (this.state.isDesktop) { editor.style.fontFamily = Fonts.DesktopMonospaceFamily; } else { editor.style.fontFamily = Fonts.WebMonospaceFamily; @@ -1021,21 +1024,21 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { } async toggleWebPrefKey(key: WebPrefKey) { - const currentValue = this.state[key]; + const currentValue = (this.state as any)[key]; await this.application.getPrefsService().setUserPrefValue( key, !currentValue, true ); - await this.setEditorState({ + await this.setState({ [key]: !currentValue }) this.reloadFont(); if (key === WebPrefKey.EditorSpellcheck) { /** Allows textarea to reload */ - await this.setEditorState({ textareaUnloading: true }); - await this.setEditorState({ textareaUnloading: false }); + await this.setState({ textareaUnloading: true }); + await this.setState({ textareaUnloading: false }); this.reloadFont(); } else if (key === WebPrefKey.EditorResizersEnabled && this.state[key] === true) { this.$timeout(() => { @@ -1060,7 +1063,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { if ( componentUuid === currentEditor?.uuid || componentUuid === this.activeTagsComponent?.uuid || - Uuids(this.getState().activeStackComponents).includes(componentUuid) + Uuids(this.state.allStackComponents).includes(componentUuid) ) { return this.note; } @@ -1128,12 +1131,12 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { .sort((a, b) => { return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; }); - await this.setEditorState({ + await this.setState({ allStackComponents: components }); this.reloadComponentContext(); /** component.active is a persisted state. So if we download a stack component - * whose .active is true, it doesn't mean it was explicitely activated by us. So + * whose .active is true, it doesn't mean it was explicitely activated by us. So * we need to do that here. */ for (const component of components) { if (component.active) { @@ -1144,7 +1147,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { reloadComponentContext() { if (this.note) { - for (const component of this.getState().allStackComponents!) { + for (const component of this.state.allStackComponents!) { if (component.active) { this.application.componentManager!.setComponentHidden( component, @@ -1203,12 +1206,12 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope { KeyboardModifier.Alt ], onKeyDown: () => { - this.setEditorState({ + this.setState({ altKeyDown: true }); }, onKeyUp: () => { - this.setEditorState({ + this.setState({ altKeyDown: false }); }