From e9b208fda4b58a503866bd790c6f3b18fa0cb60a Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 28 Jan 2022 16:47:44 +0100 Subject: [PATCH 1/2] refactor: extract code menu Signed-off-by: peterpeterparker --- studio/src/app/config/editor.ts | 24 +++--------------------- studio/src/app/menus/code.menu.ts | 21 +++++++++++++++++++++ 2 files changed, 24 insertions(+), 21 deletions(-) create mode 100644 studio/src/app/menus/code.menu.ts diff --git a/studio/src/app/config/editor.ts b/studio/src/app/config/editor.ts index 4eccd39d2..336239782 100644 --- a/studio/src/app/config/editor.ts +++ b/studio/src/app/config/editor.ts @@ -6,27 +6,9 @@ import {imgGif} from '../plugins/img.gif.plugin'; import {code} from '../plugins/code.plugin'; import {hr} from '../plugins/hr.plugin'; +import {codeMenu} from '../menus/code.menu'; + export const editorConfig: Partial = { plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr], - menus: [ - { - match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code', - actions: [ - { - text: 'edit_code', - icon: ` - - - `, - action: async ({paragraph}: {paragraph: HTMLElement}) => { - const editCode: CustomEvent = new CustomEvent('editCode', { - bubbles: true - }); - - paragraph.dispatchEvent(editCode); - } - } - ] - } - ] + menus: [codeMenu] }; diff --git a/studio/src/app/menus/code.menu.ts b/studio/src/app/menus/code.menu.ts new file mode 100644 index 000000000..89bb20113 --- /dev/null +++ b/studio/src/app/menus/code.menu.ts @@ -0,0 +1,21 @@ +import {StyloMenu} from '../../../../../stylo'; + +export const codeMenu: StyloMenu = { + match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code', + actions: [ + { + text: 'edit_code', + icon: ` + + + `, + action: async ({paragraph}: {paragraph: HTMLElement}) => { + const editCode: CustomEvent = new CustomEvent('editCode', { + bubbles: true + }); + + paragraph.dispatchEvent(editCode); + } + } + ] +}; From a7105462068b44f06f4f24f03d1a72068c43f4bb Mon Sep 17 00:00:00 2001 From: peterpeterparker Date: Fri, 28 Jan 2022 17:15:29 +0100 Subject: [PATCH 2/2] feat: add code options to doc editor Signed-off-by: peterpeterparker --- .../app-actions-element.tsx | 1 + studio/src/app/menus/code.menu.ts | 20 +++++++++++++++++++ .../app-code-languages/app-code-languages.tsx | 17 ++++++++++------ .../app/popovers/editor/app-code/app-code.tsx | 4 ++-- studio/src/app/utils/editor/prism.utils.ts | 2 +- studio/src/components.d.ts | 8 ++++---- 6 files changed, 39 insertions(+), 13 deletions(-) diff --git a/studio/src/app/components/editor/deck/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/deck/actions/element/app-actions-element/app-actions-element.tsx index 21090c4dc..f8e11e186 100644 --- a/studio/src/app/components/editor/deck/actions/element/app-actions-element/app-actions-element.tsx +++ b/studio/src/app/components/editor/deck/actions/element/app-actions-element/app-actions-element.tsx @@ -541,6 +541,7 @@ export class AppActionsElement { await popover.present(); } + private async openMath() { if (!this.selectedElement?.slot?.math) { return; diff --git a/studio/src/app/menus/code.menu.ts b/studio/src/app/menus/code.menu.ts index 89bb20113..3781ae905 100644 --- a/studio/src/app/menus/code.menu.ts +++ b/studio/src/app/menus/code.menu.ts @@ -1,4 +1,5 @@ import {StyloMenu} from '../../../../../stylo'; +import {popoverController} from '@ionic/core'; export const codeMenu: StyloMenu = { match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code', @@ -16,6 +17,25 @@ export const codeMenu: StyloMenu = { paragraph.dispatchEvent(editCode); } + }, + { + text: 'options', + icon: ` + + `, + action: async ({paragraph}: {paragraph: HTMLElement}) => { + const popover: HTMLIonPopoverElement = await popoverController.create({ + component: 'app-code', + componentProps: { + selectedElement: paragraph + }, + mode: 'ios', + showBackdrop: false, + cssClass: 'popover-menu' + }); + + await popover.present(); + } } ] }; diff --git a/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx b/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx index d00a56b6d..a505a44df 100644 --- a/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx +++ b/studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx @@ -19,7 +19,7 @@ export class AppCodeLanguages { selectedElement: HTMLElement; @Prop() - codeDidChange: EventEmitter; + codeDidChange: EventEmitter | undefined; @Prop() currentLanguage: PrismLanguage | undefined; @@ -30,12 +30,16 @@ export class AppCodeLanguages { @State() private filter: string; + private input: HTMLIonSearchbarElement | undefined; + async componentWillLoad() { await this.search(); } componentDidLoad() { history.pushState({modal: true}, null); + + setTimeout(async () => await this.input?.setFocus(), 500); } @Listen('popstate', {target: 'window'}) @@ -47,15 +51,15 @@ export class AppCodeLanguages { await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(selectedLanguage); } - private async search() { - const filtered: PrismLanguage[] = await filterCodeLanguages(this.filter); + private search() { + const filtered: PrismLanguage[] = filterCodeLanguages(this.filter); this.filteredLanguages = [...filtered]; } - private async clear() { + private clear() { this.filter = undefined; - await this.search(); + this.search(); } private handleInput($event: CustomEvent) { @@ -88,7 +92,7 @@ export class AppCodeLanguages { // Reload component with new language await (this.selectedElement as any).load(); - this.codeDidChange.emit(this.selectedElement); + this.codeDidChange?.emit(this.selectedElement); await this.closeModal(language); @@ -120,6 +124,7 @@ export class AppCodeLanguages { (this.input = el as HTMLIonSearchbarElement)} value={this.filter} onIonClear={() => this.clear()} onIonInput={(e: CustomEvent) => this.handleInput(e)} diff --git a/studio/src/app/popovers/editor/app-code/app-code.tsx b/studio/src/app/popovers/editor/app-code/app-code.tsx index e527b4247..2718462f7 100644 --- a/studio/src/app/popovers/editor/app-code/app-code.tsx +++ b/studio/src/app/popovers/editor/app-code/app-code.tsx @@ -22,7 +22,7 @@ export class AppCode { selectedElement: HTMLElement; @Prop() - codeDidChange: EventEmitter; + codeDidChange: EventEmitter | undefined; @State() private currentLanguage: PrismLanguage | undefined; @@ -56,7 +56,7 @@ export class AppCode { } private emitCodeDidChange() { - this.codeDidChange.emit(this.selectedElement); + this.codeDidChange?.emit(this.selectedElement); } private toggleLineNumbers($event: CustomEvent): Promise { diff --git a/studio/src/app/utils/editor/prism.utils.ts b/studio/src/app/utils/editor/prism.utils.ts index 175050b1f..53874e32b 100644 --- a/studio/src/app/utils/editor/prism.utils.ts +++ b/studio/src/app/utils/editor/prism.utils.ts @@ -2,7 +2,7 @@ import {DeckdeckgoHighlightCodeLanguage, deckdeckgoHighlightCodeLanguages} from import {PrismLanguage} from '../../types/editor/prism-language'; -export const filterCodeLanguages = async (filter: string | undefined): Promise => { +export const filterCodeLanguages = (filter: string | undefined): PrismLanguage[] => { const languages: PrismLanguage[] = []; for (const key in deckdeckgoHighlightCodeLanguages) { diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts index 796abda33..61a8f6846 100644 --- a/studio/src/components.d.ts +++ b/studio/src/components.d.ts @@ -92,7 +92,7 @@ export namespace Components { interface AppCloudWait { } interface AppCode { - "codeDidChange": EventEmitter; + "codeDidChange": EventEmitter | undefined; "selectedElement": HTMLElement; } interface AppCodeEditor { @@ -100,7 +100,7 @@ export namespace Components { "options": MonacoEditorOptions; } interface AppCodeLanguages { - "codeDidChange": EventEmitter; + "codeDidChange": EventEmitter | undefined; "currentLanguage": PrismLanguage | undefined; "selectedElement": HTMLElement; } @@ -1452,7 +1452,7 @@ declare namespace LocalJSX { interface AppCloudWait { } interface AppCode { - "codeDidChange"?: EventEmitter; + "codeDidChange"?: EventEmitter | undefined; "selectedElement"?: HTMLElement; } interface AppCodeEditor { @@ -1460,7 +1460,7 @@ declare namespace LocalJSX { "options"?: MonacoEditorOptions; } interface AppCodeLanguages { - "codeDidChange"?: EventEmitter; + "codeDidChange"?: EventEmitter | undefined; "currentLanguage"?: PrismLanguage | undefined; "selectedElement"?: HTMLElement; }