feat: use stylo menu for code edit

studio/src/app/components/core/app-icon/app-icon.tsx

@@ -1,6 +1,6 @@
 import {FunctionalComponent, h} from '@stencil/core';
 
-import {EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../config/environment-config';
 import {EnvironmentConfigService} from '../../../services/environment/environment-config.service';
 
 interface AppIconProps {

studio/src/app/components/core/app-signin/app-signin.tsx

@@ -10,7 +10,7 @@ import errorStore from '../../../stores/error.store';
 import {AppIcon} from '../app-icon/app-icon';
 
 import {EnvironmentConfigService} from '../../../services/environment/environment-config.service';
-import {EnvironmentCloud, EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config';
+import {EnvironmentCloud, EnvironmentDeckDeckGoConfig} from '../../../config/environment-config';
 
 import {renderI18n} from '../../../utils/core/i18n.utils';
 import {firebase, cloud} from '../../../utils/core/environment.utils';

studio/src/app/components/core/storage/app-storage-files/app-storage-files.tsx

@@ -5,7 +5,7 @@ import {AuthUser, StorageFile, StorageFilesList} from '@deckdeckgo/editor';
 import store from '../../../../stores/error.store';
 import i18n from '../../../../stores/i18n.store';
 
-import {Constants} from '../../../../types/core/constants';
+import {Constants} from '../../../../config/constants';
 
 import {getFiles} from '../../../../providers/storage/storage.provider';
 import authStore from '../../../../stores/auth.store';

studio/src/app/components/editor/deck/publish/app-publish-edit/app-publish-edit.tsx

@@ -9,7 +9,7 @@ import errorStore from '../../../../../stores/error.store';
 import authStore from '../../../../../stores/auth.store';
 import i18n from '../../../../../stores/i18n.store';
 
-import {Constants} from '../../../../../types/core/constants';
+import {Constants} from '../../../../../config/constants';
 
 import {publish, publishUrl} from '../../../../../providers/publish/publish.provider';
 
@@ -18,7 +18,7 @@ import {renderI18n} from '../../../../../utils/core/i18n.utils';
 import {AppIcon} from '../../../../core/app-icon/app-icon';
 import {firebase} from '../../../../../utils/core/environment.utils';
 import {EnvironmentConfigService} from '../../../../../services/environment/environment-config.service';
-import {EnvironmentDeckDeckGoConfig} from '../../../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../../../config/environment-config';
 
 interface CustomInputEvent extends KeyboardEvent {
   data: string | null;

studio/src/app/components/editor/deck/slide/templates/platform/app-templates-default/app-templates-default.tsx

@@ -12,7 +12,7 @@ import {tenor} from '../../../../../../../utils/core/environment.utils';
 
 import {EnvironmentConfigService} from '../../../../../../../services/environment/environment-config.service';
 
-import {EnvironmentDeckDeckGoConfig} from '../../../../../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../../../../../config/environment-config';
 
 import {AppTemplatesFixed} from '../app-templates-fixed/app-templates-fixed';
 import {AppIcon} from '../../../../../../core/app-icon/app-icon';

studio/src/app/config/editor.ts

@@ -0,0 +1,34 @@
+import {h1, h2, h3, StyloConfig, ul} from '@deckdeckgo/stylo';
+
+import i18n from '../stores/i18n.store';
+
+import {imgStorage} from '../plugins/img.storage.plugin';
+import {imgUnsplash} from '../plugins/img.unsplash.plugin';
+import {imgGif} from '../plugins/img.gif.plugin';
+import {code} from '../plugins/code.plugin';
+import {hr} from '../plugins/hr.plugin';
+
+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: i18n.state.editor.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);
+          }
+        }
+      ]
+    }
+  ]
+};

studio/src/app/definitions/i18.d.ts

@@ -401,6 +401,7 @@ interface I18nEditor {
   transform_slide: string;
   add_element: string;
   saving: string;
+  edit_code: string;
 }
 
 interface I18nOffline {

studio/src/app/editors/app-deck-editor/app-deck-editor.tsx

@@ -39,7 +39,7 @@ import {Editor} from '../../types/editor/editor';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 import {FontsService} from '../../services/editor/fonts/fonts.service';
 
-import {EnvironmentGoogleConfig} from '../../types/core/environment-config';
+import {EnvironmentGoogleConfig} from '../../config/environment-config';
 import {cloud} from '../../utils/core/environment.utils';
 import {ColorUtils} from '../../utils/editor/color.utils';
 
@@ -121,7 +121,7 @@ export class AppDeckEditor implements ComponentInterface {
 
   @State()
   private editorConfig: Partial<StyloToolbar> = {
-    actions: {
+    style: {
       list: false,
       align: false,
       fontSize: false,

studio/src/app/editors/app-doc-editor/app-doc-editor.tsx

@@ -5,7 +5,7 @@ import {v4 as uuid} from 'uuid';
 import {modalController} from '@ionic/core';
 
 import {isFirefox, moveCursorToStart} from '@deckdeckgo/utils';
-import {StyloConfig, h1, h2, h3, ul, StyloPaletteColor} from '@deckdeckgo/stylo';
+import {StyloConfig, StyloPaletteColor} from '@deckdeckgo/stylo';
 
 import editorStore from '../../stores/editor.store';
 import busyStore from '../../stores/busy.store';
@@ -18,6 +18,8 @@ import i18n from '../../stores/i18n.store';
 import {Editor} from '../../types/editor/editor';
 import {SlotType} from '../../types/editor/slot-type';
 
+import {editorConfig} from '../../config/editor';
+
 import {ImageEvents} from '../../events/core/image/image.events';
 import {ChartEvents} from '../../events/core/chart/chart.events';
 import {DocDataEvents} from '../../events/editor/doc/doc.data.events';
@@ -32,12 +34,6 @@ import {cloud} from '../../utils/core/environment.utils';
 import {signIn} from '../../utils/core/signin.utils';
 import {ColorUtils} from '../../utils/editor/color.utils';
 
-import {imgStorage} from '../../plugins/img.storage.plugin';
-import {imgUnsplash} from '../../plugins/img.unsplash.plugin';
-import {imgGif} from '../../plugins/img.gif.plugin';
-import {hr} from '../../plugins/hr.plugin';
-import {code} from '../../plugins/code.plugin';
-
 @Component({
   tag: 'app-doc-editor',
   styleUrl: 'app-doc-editor.scss'
@@ -50,9 +46,7 @@ export class AppDocEditor implements ComponentInterface {
   private paragraphs: JSX.IntrinsicElements[] = [];
 
   @State()
-  private editorConfig: Partial<StyloConfig> = {
-    plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr]
-  };
+  private editorConfig: Partial<StyloConfig> = editorConfig;
 
   private readonly imageEvents: ImageEvents = new ImageEvents();
   private readonly chartEvents: ChartEvents = new ChartEvents();
@@ -267,7 +261,7 @@ export class AppDocEditor implements ComponentInterface {
       observer.disconnect();
 
       const elements: NodeListOf<HTMLElement> = this.containerRef.querySelectorAll<HTMLElement>(
-        `${SlotType.CODE}, ${SlotType.MATH}, ${SlotType.WORD_CLOUD}, ${SlotType.MARKDOWN}`
+        `${SlotType.MATH}, ${SlotType.WORD_CLOUD}, ${SlotType.MARKDOWN}`
       );
       Array.from(elements).forEach((element: HTMLElement) => element.setAttribute('editable', 'true'));
     };

studio/src/app/events/editor/code/code.events.ts

@@ -12,8 +12,10 @@ export class CodeEvents {
   }
 
   private onEditCode = async ({target}: CustomEvent<void>) => {
-    const highlightCodeElement: HTMLDeckgoHighlightCodeElement = target as HTMLDeckgoHighlightCodeElement;
+    await this.editCode(target as HTMLDeckgoHighlightCodeElement);
+  };
 
+  private editCode = async (highlightCodeElement: HTMLDeckgoHighlightCodeElement) => {
     this.emitSnapshotParagraph(highlightCodeElement);
 
     const code: HTMLElement | null = highlightCodeElement.querySelector(':scope > code');

studio/src/app/events/editor/deck/deck.data.events.ts

@@ -27,7 +27,7 @@ import errorStore from '../../../stores/error.store';
 import busyStore from '../../../stores/busy.store';
 import authStore from '../../../stores/auth.store';
 
-import {Constants} from '../../../types/core/constants';
+import {Constants} from '../../../config/constants';
 
 import {SlotUtils} from '../../../utils/editor/slot.utils';
 import {ParseElementsUtils} from '../../../utils/editor/parse-elements.utils';

studio/src/app/events/editor/remote/remote.events.ts

@@ -10,7 +10,7 @@ import {ConnectionState, DeckdeckgoDeckDefinition, DeckdeckgoEventDeckRequest, D
 
 import remoteStore from '../../../stores/remote.store';
 
-import {EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../config/environment-config';
 import {EnvironmentConfigService} from '../../../services/environment/environment-config.service';
 
 import {RemoteService} from '../../../services/editor/remote/remote.service';

studio/src/app/pages/core/settings/app-profile/app-profile.tsx

@@ -24,7 +24,7 @@ import {updateUser} from '../../../../providers/data/user/user.provider';
 import {uploadOnlineFile} from '../../../../providers/storage/storage.provider';
 import {deleteAuth} from '../../../../providers/auth/auth.provider';
 
-import {EnvironmentDeckDeckGoConfig} from '../../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../../config/environment-config';
 import {EnvironmentConfigService} from '../../../../services/environment/environment-config.service';
 import {clearEdit} from '../../../../utils/editor/editor.utils';
 

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

@@ -3,7 +3,7 @@ import {Component, Element, h, Prop} from '@stencil/core';
 import assetsStore from '../../../stores/assets.store';
 import i18n from '../../../stores/i18n.store';
 
-import {EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../config/environment-config';
 import {EnvironmentConfigService} from '../../../services/environment/environment-config.service';
 
 @Component({

studio/src/app/providers/auth/auth.provider.ts

@@ -3,7 +3,7 @@ import {AuthUser, InitAuth, User, SignOut, DeleteAuth} from '@deckdeckgo/editor'
 import authStore from '../../stores/auth.store';
 import userStore from '../../stores/user.store';
 
-import {EnvironmentAppConfig, EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentAppConfig, EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 import {cloudProvider} from '../../utils/core/providers.utils';

studio/src/app/providers/publish/publish.provider.ts

@@ -11,7 +11,7 @@ import {cloud} from '../../utils/core/environment.utils';
 import {cloudProvider} from '../../utils/core/providers.utils';
 
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
-import {EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 
 interface PublishInputs {
   name: string;

studio/src/app/providers/storage/storage.provider.ts

@@ -8,7 +8,7 @@ import {StorageOfflineProvider} from './storage.offline.provider';
 import {cloud} from '../../utils/core/environment.utils';
 import {cloudProvider} from '../../utils/core/providers.utils';
 
-import {Constants} from '../../types/core/constants';
+import {Constants} from '../../config/constants';
 
 export const uploadOnlineFile = async (
   data: File,

studio/src/app/providers/tenor/tenor.provider.ts

@@ -4,7 +4,7 @@ import {get, set} from 'idb-keyval';
 
 import store from '../../stores/error.store';
 
-import {EnvironmentTenorConfig} from '../../types/core/environment-config';
+import {EnvironmentTenorConfig} from '../../config/environment-config';
 
 export class TenorProvider {
   private static instance: TenorProvider;

studio/src/app/providers/unsplash/unsplash.provider.ts

@@ -1,6 +1,6 @@
 import {UnsplashPhoto, RegisterUnsplashDownload, UnsplashSearchResponse, GetUnsplashPhotos} from '@deckdeckgo/editor';
 
-import {EnvironmentUnsplashConfig} from '../../types/core/environment-config';
+import {EnvironmentUnsplashConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 import {unsplashProvider} from '../../utils/core/providers.utils';

studio/src/app/services/editor/fonts/fonts.service.ts

@@ -2,7 +2,7 @@ import assetsStore from '../../../stores/assets.store';
 
 import {injectCSS} from '@deckdeckgo/editor';
 
-import {EnvironmentGoogleConfig} from '../../../types/core/environment-config';
+import {EnvironmentGoogleConfig} from '../../../config/environment-config';
 import {EnvironmentConfigService} from '../../environment/environment-config.service';
 
 export class FontsService {

studio/src/app/services/editor/sw/sw.service.ts

@@ -7,7 +7,7 @@ import {SlotType} from '../../../types/editor/slot-type';
 
 import {ServiceWorkerUtils} from '../../../utils/core/service-worker.utils';
 
-import {EnvironmentDeckDeckGoConfig} from '../../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../../config/environment-config';
 import {EnvironmentConfigService} from '../../environment/environment-config.service';
 
 import {FontsService} from '../fonts/fonts.service';

studio/src/app/services/environment/environment-config.service.ts

@@ -1,4 +1,4 @@
-import {EnvironmentConfig} from '../../types/core/environment-config';
+import {EnvironmentConfig} from '../../config/environment-config';
 
 export class EnvironmentConfigService {
   private static instance: EnvironmentConfigService;

studio/src/app/services/poll/poll.service.ts

@@ -4,7 +4,7 @@ import store from '../../stores/poll.store';
 
 import {DeckdeckgoPoll} from '@deckdeckgo/types';
 
-import {EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../environment/environment-config.service';
 
 export class PollService {

studio/src/app/utils/core/environment.utils.ts

@@ -1,5 +1,5 @@
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
-import {EnvironmentAppConfig} from '../../types/core/environment-config';
+import {EnvironmentAppConfig} from '../../config/environment-config';
 
 export const tenor = (): boolean => EnvironmentConfigService.getInstance().get('tenor') !== undefined;
 

studio/src/app/utils/core/providers.utils.ts

@@ -1,4 +1,4 @@
-import {EnvironmentCloud, EnvironmentUnsplashConfig} from '../../types/core/environment-config';
+import {EnvironmentCloud, EnvironmentUnsplashConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 export const cloudProvider = <T>(): Promise<T> => {

studio/src/app/utils/editor/create-slides.utils.tsx

@@ -9,7 +9,7 @@ import userStore from '../../stores/user.store';
 
 import {publishUrl} from '../../providers/publish/publish.provider';
 
-import {EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 import {SlotType} from '../../types/editor/slot-type';

studio/src/app/utils/editor/header-footer.utils.ts

@@ -1,6 +1,6 @@
 import {User} from '@deckdeckgo/editor';
 
-import {EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 import {SlotType} from '../../types/editor/slot-type';

studio/src/app/utils/editor/parse-slides.utils.tsx

@@ -6,7 +6,7 @@ import {Slide, SlideTemplate, SlideScope, convertStyle} from '@deckdeckgo/editor
 
 import {ParseElementsUtils} from './parse-elements.utils';
 
-import {EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 export class ParseSlidesUtils {

studio/src/app/utils/editor/plugin.utils.ts

@@ -69,7 +69,6 @@ export const openCodeModal = async ({pluginParams}: {pluginParams: StyloPluginCr
     const {code: innerHTML} = data || {code: '\u200B'};
 
     const code: HTMLElement = document.createElement('deckgo-highlight-code');
-    code.setAttribute('editable', 'true');
 
     const slot: HTMLElement = document.createElement('code');
     slot.setAttribute('slot', 'code');

studio/src/app/utils/editor/social.utils.tsx

@@ -2,7 +2,7 @@ import {h, JSX} from '@stencil/core';
 
 import {User, UserSocial} from '@deckdeckgo/editor';
 
-import {EnvironmentDeckDeckGoConfig} from '../../types/core/environment-config';
+import {EnvironmentDeckDeckGoConfig} from '../../config/environment-config';
 import {EnvironmentConfigService} from '../../services/environment/environment-config.service';
 
 export class SocialUtils {

studio/src/assets/i18n/de.json

@@ -392,7 +392,8 @@
     "transform_element": "Ändere Element",
     "transform_slide": "Ändere Folie",
     "add_element": "Fügen Sie ein Bild, Code oder ein neues Element hinzu",
-    "saving": "Wird gespeichert..."
+    "saving": "Wird gespeichert...",
+    "edit_code": "Code bearbeiten"
   },
   "offline": {
     "editing": "Du bearbeitest gerade offline.",

studio/src/assets/i18n/en.json

@@ -392,7 +392,8 @@
     "transform_element": "Transform element",
     "transform_slide": "Transform slide",
     "add_element": "Add an image, code, or new part",
-    "saving": "Saving..."
+    "saving": "Saving...",
+    "edit_code": "Edit code"
   },
   "offline": {
     "editing": "You are editing offline.",

studio/src/assets/i18n/es.json

@@ -392,7 +392,8 @@
     "transform_element": "Elemento de transformación",
     "transform_slide": "Transformar diapositiva",
     "add_element": "Add an image, code, or new part",
-    "saving": "Guardando..."
+    "saving": "Guardando...",
+    "edit_code": "Editar código"
   },
   "offline": {
     "editing": "Estás editando sin conexión.",

studio/src/assets/i18n/nl.json

@@ -392,7 +392,8 @@
     "transform_element": "Transformeer element",
     "transform_slide": "Transformeer slide",
     "add_element": "Voeg een afbeelding, code of nieuw element toe",
-    "saving": "Bezig met opslaan..."
+    "saving": "Bezig met opslaan...",
+    "edit_code": "Code bewerken"
   },
   "offline": {
     "editing": "U bent offline aan het bewerken.",

studio/src/global/app-dev.ts

@@ -33,7 +33,7 @@ import '@deckdeckgo/slide-playground';
 
 import '@deckdeckgo/stylo';
 
-import {setupConfig as setupDeckGoConfig} from '../app/types/core/environment-config';
+import {setupConfig as setupDeckGoConfig} from '../app/config/environment-config';
 
 setupDeckGoConfig({
   app: {