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/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..3781ae905 --- /dev/null +++ b/studio/src/app/menus/code.menu.ts @@ -0,0 +1,41 @@ +import {StyloMenu} from '../../../../../stylo'; +import {popoverController} from '@ionic/core'; + +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); + } + }, + { + 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; }