feat: code options for docs

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;

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<StyloConfig> = {
   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: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
-            <polygon points='364.13 125.25 87 403 64 448 108.99 425 386.75 147.87 364.13 125.25' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
-            <path d='M420.69,68.69,398.07,91.31l22.62,22.63,22.62-22.63a16,16,0,0,0,0-22.62h0A16,16,0,0,0,420.69,68.69Z' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
-          </svg>`,
-          action: async ({paragraph}: {paragraph: HTMLElement}) => {
-            const editCode: CustomEvent<void> = new CustomEvent<void>('editCode', {
-              bubbles: true
-            });
-
-            paragraph.dispatchEvent(editCode);
-          }
-        }
-      ]
-    }
-  ]
+  menus: [codeMenu]
 };

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: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+            <polygon points='364.13 125.25 87 403 64 448 108.99 425 386.75 147.87 364.13 125.25' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
+            <path d='M420.69,68.69,398.07,91.31l22.62,22.63,22.62-22.63a16,16,0,0,0,0-22.62h0A16,16,0,0,0,420.69,68.69Z' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
+          </svg>`,
+      action: async ({paragraph}: {paragraph: HTMLElement}) => {
+        const editCode: CustomEvent<void> = new CustomEvent<void>('editCode', {
+          bubbles: true
+        });
+
+        paragraph.dispatchEvent(editCode);
+      }
+    },
+    {
+      text: 'options',
+      icon: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+            <path d='M262.29,192.31a64,64,0,1,0,57.4,57.4A64.13,64.13,0,0,0,262.29,192.31ZM416.39,256a154.34,154.34,0,0,1-1.53,20.79l45.21,35.46A10.81,10.81,0,0,1,462.52,326l-42.77,74a10.81,10.81,0,0,1-13.14,4.59l-44.9-18.08a16.11,16.11,0,0,0-15.17,1.75A164.48,164.48,0,0,1,325,400.8a15.94,15.94,0,0,0-8.82,12.14l-6.73,47.89A11.08,11.08,0,0,1,298.77,470H213.23a11.11,11.11,0,0,1-10.69-8.87l-6.72-47.82a16.07,16.07,0,0,0-9-12.22,155.3,155.3,0,0,1-21.46-12.57,16,16,0,0,0-15.11-1.71l-44.89,18.07a10.81,10.81,0,0,1-13.14-4.58l-42.77-74a10.8,10.8,0,0,1,2.45-13.75l38.21-30a16.05,16.05,0,0,0,6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16,16,0,0,0-6.07-13.94l-38.19-30A10.81,10.81,0,0,1,49.48,186l42.77-74a10.81,10.81,0,0,1,13.14-4.59l44.9,18.08a16.11,16.11,0,0,0,15.17-1.75A164.48,164.48,0,0,1,187,111.2a15.94,15.94,0,0,0,8.82-12.14l6.73-47.89A11.08,11.08,0,0,1,213.23,42h85.54a11.11,11.11,0,0,1,10.69,8.87l6.72,47.82a16.07,16.07,0,0,0,9,12.22,155.3,155.3,0,0,1,21.46,12.57,16,16,0,0,0,15.11,1.71l44.89-18.07a10.81,10.81,0,0,1,13.14,4.58l42.77,74a10.8,10.8,0,0,1-2.45,13.75l-38.21,30a16.05,16.05,0,0,0-6.05,14.08C416.17,247.67,416.39,251.83,416.39,256Z' style='fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
+          </svg>`,
+      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();
+      }
+    }
+  ]
+};

studio/src/app/modals/editor/app-code-languages/app-code-languages.tsx

@@ -19,7 +19,7 @@ export class AppCodeLanguages {
   selectedElement: HTMLElement;
 
   @Prop()
-  codeDidChange: EventEmitter<HTMLElement>;
+  codeDidChange: EventEmitter<HTMLElement> | 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<KeyboardEvent>) {
@@ -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 {
           <ion-searchbar
             debounce={500}
             placeholder={i18n.state.editor.filter_languages}
+            ref={(el) => (this.input = el as HTMLIonSearchbarElement)}
             value={this.filter}
             onIonClear={() => this.clear()}
             onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}

studio/src/app/popovers/editor/app-code/app-code.tsx

@@ -22,7 +22,7 @@ export class AppCode {
   selectedElement: HTMLElement;
 
   @Prop()
-  codeDidChange: EventEmitter<HTMLElement>;
+  codeDidChange: EventEmitter<HTMLElement> | 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<void> {

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<PrismLanguage[]> => {
+export const filterCodeLanguages = (filter: string | undefined): PrismLanguage[] => {
   const languages: PrismLanguage[] = [];
 
   for (const key in deckdeckgoHighlightCodeLanguages) {

studio/src/components.d.ts

@@ -92,15 +92,15 @@ export namespace Components {
     interface AppCloudWait {
     }
     interface AppCode {
-        "codeDidChange": EventEmitter<HTMLElement>;
+        "codeDidChange": EventEmitter<HTMLElement> | undefined;
         "selectedElement": HTMLElement;
     }
     interface AppCodeEditor {
         "code": string;
         "options": MonacoEditorOptions;
     }
     interface AppCodeLanguages {
-        "codeDidChange": EventEmitter<HTMLElement>;
+        "codeDidChange": EventEmitter<HTMLElement> | undefined;
         "currentLanguage": PrismLanguage | undefined;
         "selectedElement": HTMLElement;
     }
@@ -1452,15 +1452,15 @@ declare namespace LocalJSX {
     interface AppCloudWait {
     }
     interface AppCode {
-        "codeDidChange"?: EventEmitter<HTMLElement>;
+        "codeDidChange"?: EventEmitter<HTMLElement> | undefined;
         "selectedElement"?: HTMLElement;
     }
     interface AppCodeEditor {
         "code"?: string;
         "options"?: MonacoEditorOptions;
     }
     interface AppCodeLanguages {
-        "codeDidChange"?: EventEmitter<HTMLElement>;
+        "codeDidChange"?: EventEmitter<HTMLElement> | undefined;
         "currentLanguage"?: PrismLanguage | undefined;
         "selectedElement"?: HTMLElement;
     }