Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit d7ecca4

Browse files
peterpeterparkerpeterpeterparker
authored
feat: code options for docs (#1459)
* refactor: extract code menu Signed-off-by: peterpeterparker <[email protected]> * feat: add code options to doc editor Signed-off-by: peterpeterparker <[email protected]>
1 parent 0ee77c3 commit d7ecca4

File tree

7 files changed

+63
-34
lines changed

7 files changed

+63
-34
lines changed

‎studio/src/app/components/editor/deck/actions/element/app-actions-element/app-actions-element.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,7 @@ export class AppActionsElement {
541541

542542
await popover.present();
543543
}
544+
544545
private async openMath() {
545546
if (!this.selectedElement?.slot?.math) {
546547
return;

‎studio/src/app/config/editor.ts‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,9 @@ import {imgGif} from '../plugins/img.gif.plugin';
66
import {code} from '../plugins/code.plugin';
77
import {hr} from '../plugins/hr.plugin';
88

9+
import {codeMenu} from '../menus/code.menu';
10+
911
export const editorConfig: Partial<StyloConfig> = {
1012
plugins: [h1, h2, h3, ul, imgStorage, imgUnsplash, imgGif, code, hr],
11-
menus: [
12-
{
13-
match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code',
14-
actions: [
15-
{
16-
text: 'edit_code',
17-
icon: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
18-
<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'/>
19-
<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'/>
20-
</svg>`,
21-
action: async ({paragraph}: {paragraph: HTMLElement}) => {
22-
const editCode: CustomEvent<void> = new CustomEvent<void>('editCode', {
23-
bubbles: true
24-
});
25-
26-
paragraph.dispatchEvent(editCode);
27-
}
28-
}
29-
]
30-
}
31-
]
13+
menus: [codeMenu]
3214
};

‎studio/src/app/menus/code.menu.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import {StyloMenu} from '../../../../../stylo';
2+
import {popoverController} from '@ionic/core';
3+
4+
export const codeMenu: StyloMenu = {
5+
match: ({paragraph}: {paragraph: HTMLElement}) => paragraph?.nodeName.toLowerCase() === 'deckgo-highlight-code',
6+
actions: [
7+
{
8+
text: 'edit_code',
9+
icon: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
10+
<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'/>
11+
<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'/>
12+
</svg>`,
13+
action: async ({paragraph}: {paragraph: HTMLElement}) => {
14+
const editCode: CustomEvent<void> = new CustomEvent<void>('editCode', {
15+
bubbles: true
16+
});
17+
18+
paragraph.dispatchEvent(editCode);
19+
}
20+
},
21+
{
22+
text: 'options',
23+
icon: `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
24+
<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'/>
25+
</svg>`,
26+
action: async ({paragraph}: {paragraph: HTMLElement}) => {
27+
const popover: HTMLIonPopoverElement = await popoverController.create({
28+
component: 'app-code',
29+
componentProps: {
30+
selectedElement: paragraph
31+
},
32+
mode: 'ios',
33+
showBackdrop: false,
34+
cssClass: 'popover-menu'
35+
});
36+
37+
await popover.present();
38+
}
39+
}
40+
]
41+
};

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export class AppCodeLanguages {
1919
selectedElement: HTMLElement;
2020

2121
@Prop()
22-
codeDidChange: EventEmitter<HTMLElement>;
22+
codeDidChange: EventEmitter<HTMLElement> | undefined;
2323

2424
@Prop()
2525
currentLanguage: PrismLanguage | undefined;
@@ -30,12 +30,16 @@ export class AppCodeLanguages {
3030
@State()
3131
private filter: string;
3232

33+
private input: HTMLIonSearchbarElement | undefined;
34+
3335
async componentWillLoad() {
3436
await this.search();
3537
}
3638

3739
componentDidLoad() {
3840
history.pushState({modal: true}, null);
41+
42+
setTimeout(async () => await this.input?.setFocus(), 500);
3943
}
4044

4145
@Listen('popstate', {target: 'window'})
@@ -47,15 +51,15 @@ export class AppCodeLanguages {
4751
await (this.el.closest('ion-modal') as HTMLIonModalElement).dismiss(selectedLanguage);
4852
}
4953

50-
private async search() {
51-
const filtered: PrismLanguage[] = await filterCodeLanguages(this.filter);
54+
private search() {
55+
const filtered: PrismLanguage[] = filterCodeLanguages(this.filter);
5256
this.filteredLanguages = [...filtered];
5357
}
5458

55-
private async clear() {
59+
private clear() {
5660
this.filter = undefined;
5761

58-
await this.search();
62+
this.search();
5963
}
6064

6165
private handleInput($event: CustomEvent<KeyboardEvent>) {
@@ -88,7 +92,7 @@ export class AppCodeLanguages {
8892
// Reload component with new language
8993
await (this.selectedElement as any).load();
9094

91-
this.codeDidChange.emit(this.selectedElement);
95+
this.codeDidChange?.emit(this.selectedElement);
9296

9397
await this.closeModal(language);
9498

@@ -120,6 +124,7 @@ export class AppCodeLanguages {
120124
<ion-searchbar
121125
debounce={500}
122126
placeholder={i18n.state.editor.filter_languages}
127+
ref={(el) => (this.input = el as HTMLIonSearchbarElement)}
123128
value={this.filter}
124129
onIonClear={() => this.clear()}
125130
onIonInput={(e: CustomEvent<KeyboardEvent>) => this.handleInput(e)}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class AppCode {
2222
selectedElement: HTMLElement;
2323

2424
@Prop()
25-
codeDidChange: EventEmitter<HTMLElement>;
25+
codeDidChange: EventEmitter<HTMLElement> | undefined;
2626

2727
@State()
2828
private currentLanguage: PrismLanguage | undefined;
@@ -56,7 +56,7 @@ export class AppCode {
5656
}
5757

5858
private emitCodeDidChange() {
59-
this.codeDidChange.emit(this.selectedElement);
59+
this.codeDidChange?.emit(this.selectedElement);
6060
}
6161

6262
private toggleLineNumbers($event: CustomEvent): Promise<void> {

‎studio/src/app/utils/editor/prism.utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {DeckdeckgoHighlightCodeLanguage, deckdeckgoHighlightCodeLanguages} from
22

33
import {PrismLanguage} from '../../types/editor/prism-language';
44

5-
export const filterCodeLanguages = async (filter: string | undefined): Promise<PrismLanguage[]> => {
5+
export const filterCodeLanguages = (filter: string | undefined): PrismLanguage[] => {
66
const languages: PrismLanguage[] = [];
77

88
for (const key in deckdeckgoHighlightCodeLanguages) {

‎studio/src/components.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,15 @@ export namespace Components {
9292
interface AppCloudWait {
9393
}
9494
interface AppCode {
95-
"codeDidChange": EventEmitter<HTMLElement>;
95+
"codeDidChange": EventEmitter<HTMLElement> | undefined;
9696
"selectedElement": HTMLElement;
9797
}
9898
interface AppCodeEditor {
9999
"code": string;
100100
"options": MonacoEditorOptions;
101101
}
102102
interface AppCodeLanguages {
103-
"codeDidChange": EventEmitter<HTMLElement>;
103+
"codeDidChange": EventEmitter<HTMLElement> | undefined;
104104
"currentLanguage": PrismLanguage | undefined;
105105
"selectedElement": HTMLElement;
106106
}
@@ -1452,15 +1452,15 @@ declare namespace LocalJSX {
14521452
interface AppCloudWait {
14531453
}
14541454
interface AppCode {
1455-
"codeDidChange"?: EventEmitter<HTMLElement>;
1455+
"codeDidChange"?: EventEmitter<HTMLElement> | undefined;
14561456
"selectedElement"?: HTMLElement;
14571457
}
14581458
interface AppCodeEditor {
14591459
"code"?: string;
14601460
"options"?: MonacoEditorOptions;
14611461
}
14621462
interface AppCodeLanguages {
1463-
"codeDidChange"?: EventEmitter<HTMLElement>;
1463+
"codeDidChange"?: EventEmitter<HTMLElement> | undefined;
14641464
"currentLanguage"?: PrismLanguage | undefined;
14651465
"selectedElement"?: HTMLElement;
14661466
}

0 commit comments

Comments
 (0)