Skip to content

Commit cda2458

Browse files
wfpenawfpena
committed
feat: do not add fonts to the component to reduce its size
1 parent b18b812 commit cda2458

File tree

11 files changed

+72
-81
lines changed

11 files changed

+72
-81
lines changed

‎projects/angular-editor-app/cypress/e2e/spec.cy.ts

+60-54
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,7 @@ describe('General tests', () => {
139139

140140
it('Checks for text pattern and insert quote', () => {
141141
cy.visit('/');
142-
const editor1 = cy.get('#editor1');
143-
editor1.click();
144-
editor1.type('> Hello World');
142+
cy.get('.angular-editor-textarea').first().click().type('> Hello World');
145143
const editor1HTMLContent = cy.get('#html-content-editor1');
146144
editor1HTMLContent.should(
147145
'contain.text',
@@ -1079,23 +1077,51 @@ describe('General tests', () => {
10791077
});
10801078
});
10811079

1080+
const ARIAL = {
1081+
selector:
1082+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(1)',
1083+
name: 'Arial',
1084+
};
1085+
const TIMES_NEW_ROMAN = {
1086+
selector:
1087+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(2)',
1088+
name: 'Times New Roman',
1089+
};
1090+
const ROBOTO = {
1091+
selector:
1092+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(3)',
1093+
name: 'Roboto',
1094+
};
1095+
const COMIC_SANS_MS = {
1096+
selector:
1097+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(4)',
1098+
name: 'Comic Sans MS',
1099+
};
1100+
const ROBOTO_CUSTOM = {
1101+
selector:
1102+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(5)',
1103+
name: 'RobotoSlab',
1104+
};
1105+
1106+
const HEADING_1 = {
1107+
selector:
1108+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(6) > ae-select > span > span > button:nth-child(1)',
1109+
};
1110+
const HEADING_2 = {
1111+
selector:
1112+
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(6) > ae-select > span > span > button:nth-child(2)',
1113+
};
1114+
10821115
it('Should write any header with proper font name selected first', () => {
10831116
cy.visit('/');
1084-
// Selecting the font name:
10851117
cy.get('.ae-picker-label').eq(1).click();
1086-
// 5th option is Verdana
1087-
cy.get(
1088-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(5)',
1089-
).click();
1090-
// Selecting the header:
1118+
cy.get(COMIC_SANS_MS.selector).click();
10911119
cy.get('.ae-picker-label').first().click();
1092-
cy.get(
1093-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(6) > ae-select > span > span > button:nth-child(1)',
1094-
).click();
1120+
cy.get(HEADING_1.selector).click();
10951121
cy.get('.angular-editor-textarea').first().type('WADWADWADWADWAD');
10961122
cy.get('#html-content-editor1').should(
10971123
'have.text',
1098-
'<h1><font face="Verdana">WADWADWADWADWAD</font></h1>',
1124+
`<h1><font face="${COMIC_SANS_MS.name}">WADWADWADWADWAD</font></h1>`,
10991125
);
11001126
});
11011127

@@ -1104,30 +1130,26 @@ describe('General tests', () => {
11041130
// Selecting the font name:
11051131
cy.get('.ae-picker-label').eq(1).click();
11061132
// 5th option is Verdana
1107-
cy.get(
1108-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(5)',
1109-
).click();
1133+
cy.get(ROBOTO_CUSTOM.selector).click();
11101134
// Selecting the header:
11111135
cy.get('.ae-picker-label').first().click();
1112-
cy.get(
1113-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(6) > ae-select > span > span > button:nth-child(1)',
1114-
).click();
1136+
cy.get(HEADING_1.selector).click();
11151137
cy.get('.angular-editor-textarea').first().type('WADWADWADWADWAD');
11161138
cy.get('#html-content-editor1').should(
11171139
'have.text',
1118-
'<h1><font face="Verdana">WADWADWADWADWAD</font></h1>',
1140+
`<h1><font face="${ROBOTO_CUSTOM.name}">WADWADWADWADWAD</font></h1>`,
11191141
);
11201142

11211143
cy.get('.angular-editor-textarea').first().type('{enter}more text');
11221144
cy.get('#html-content-editor1').should(
11231145
'have.text',
1124-
'<h1><font face="Verdana">WADWADWADWADWAD</font></h1><div><font face="Verdana" size="5">more text</font></div>',
1146+
`<h1><font face="${ROBOTO_CUSTOM.name}">WADWADWADWADWAD</font></h1><div><font face="${ROBOTO_CUSTOM.name}" size="5">more text</font></div>`,
11251147
);
11261148

11271149
cy.get('.angular-editor-textarea').first().type('{enter}more text');
11281150
cy.get('#html-content-editor1').should(
11291151
'have.text',
1130-
'<h1><font face="Verdana">WADWADWADWADWAD</font></h1><div><font face="Verdana" size="5">more text</font></div><div><font face="Verdana" size="5">more text</font></div>',
1152+
`<h1><font face="${ROBOTO_CUSTOM.name}">WADWADWADWADWAD</font></h1><div><font face="${ROBOTO_CUSTOM.name}" size="5">more text</font></div><div><font face="${ROBOTO_CUSTOM.name}" size="5">more text</font></div>`,
11311153
);
11321154

11331155
cy.get('.angular-editor-textarea')
@@ -1136,7 +1158,7 @@ describe('General tests', () => {
11361158
.type('more text again...');
11371159
cy.get('#html-content-editor1').should(
11381160
'have.text',
1139-
'<h1><font face="Verdana">more text again...</font></h1>',
1161+
`<h1><font face="${ROBOTO_CUSTOM.name}">more text again...</font></h1>`,
11401162
);
11411163
cy.get('.angular-editor-textarea')
11421164
.first()
@@ -1150,24 +1172,22 @@ describe('General tests', () => {
11501172
);
11511173
cy.get('#html-content-editor1').should(
11521174
'have.text',
1153-
'<font face="Verdana" size="5">This text should not be a header because I&nbsp;</font><div><font face="Verdana" size="5">pressed more times the backspace key</font></div>',
1175+
`<font face="${ROBOTO_CUSTOM.name}" size="5">This text should not be a header because I&nbsp;</font><div><font face="${ROBOTO_CUSTOM.name}" size="5">pressed more times the backspace key</font></div>`,
11541176
);
11551177
});
11561178

11571179
it('Should change font name correctly when all text is selected', () => {
11581180
cy.visit('/');
11591181
cy.get('.ae-picker-label').eq(1).click();
1160-
cy.get(
1161-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(5)',
1162-
).click();
1182+
cy.get(ROBOTO.selector).click();
11631183
cy.get('.angular-editor-textarea')
11641184
.first()
11651185
.type(
1166-
'Text is probably on Verdana here{enter}{enter}here too.... {backspace}',
1186+
`Text is probably on ${ROBOTO.name} here{enter}{enter}here too.... {backspace}`,
11671187
);
11681188
cy.get('#html-content-editor1').should(
11691189
'have.text',
1170-
'<font face="Verdana" size="5">Text is probably on Verdana here</font><div><font face="Verdana" size="5"><br></font></div><div><font face="Verdana" size="5">here too....</font></div>',
1190+
`<font face="${ROBOTO.name}" size="5">Text is probably on ${ROBOTO.name} here</font><div><font face="${ROBOTO.name}" size="5"><br></font></div><div><font face="${ROBOTO.name}" size="5">here too....</font></div>`,
11711191
);
11721192
cy.get('.angular-editor-textarea')
11731193
.first()
@@ -1176,12 +1196,12 @@ describe('General tests', () => {
11761196
.trigger('dblclick');
11771197
cy.get('#html-content-editor1').should(
11781198
'have.text',
1179-
'<font face="Verdana" size="5">Text is probably on Verdana here</font><div><font face="Verdana" size="5"><br></font></div><div><font face="Verdana" size="5">here too....</font></div>',
1199+
`<font face="${ROBOTO.name}" size="5">Text is probably on ${ROBOTO.name} here</font><div><font face="${ROBOTO.name}" size="5"><br></font></div><div><font face="${ROBOTO.name}" size="5">here too....</font></div>`,
11801200
);
11811201
cy.get('.angular-editor-textarea').first().type('MORE TEXT');
11821202
cy.get('#html-content-editor1').should(
11831203
'have.text',
1184-
'<font face="Verdana" size="5">MORE TEXT</font>',
1204+
`<font face="${ROBOTO.name}" size="5">MORE TEXT</font>`,
11851205
);
11861206
});
11871207

@@ -1202,29 +1222,23 @@ describe('General tests', () => {
12021222
.trigger('click')
12031223
.trigger('dblclick');
12041224
cy.get('.ae-picker-label').eq(1).click();
1205-
cy.get(
1206-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(4)',
1207-
).click();
1225+
cy.get(TIMES_NEW_ROMAN.selector).click();
12081226
cy.get('#html-content-editor1').should(
12091227
'have.text',
1210-
'<font face="Comic Sans MS" size="5">Some initial text, should be on the default font and size</font>',
1228+
`<font size="5" face="${TIMES_NEW_ROMAN.name}">Some initial text, should be on the default font and size</font>`,
12111229
);
12121230

12131231
// Then picking another font
12141232
cy.get('.ae-picker-label').eq(1).click();
1215-
cy.get(
1216-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(5)',
1217-
).click();
1233+
cy.get(ARIAL.selector).click();
12181234
cy.get('#html-content-editor1').should(
12191235
'have.text',
1220-
'<font size="5" face="Verdana">Some initial text, should be on the default font and size</font>',
1236+
`<font size="5" face="${ARIAL.name}">Some initial text, should be on the default font and size</font>`,
12211237
);
12221238

12231239
// Then going back to the previous one
12241240
cy.get('.ae-picker-label').eq(1).click();
1225-
cy.get(
1226-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(4)',
1227-
).click();
1241+
cy.get(COMIC_SANS_MS.selector).click();
12281242
cy.get('#html-content-editor1').should(
12291243
'have.text',
12301244
'<font size="5" face="Comic Sans MS">Some initial text, should be on the default font and size</font>',
@@ -1233,9 +1247,7 @@ describe('General tests', () => {
12331247
// Now pressing enter and adding a heading 2
12341248
cy.get('.angular-editor-textarea').first().type('{enter}{backspace}');
12351249
cy.get('.ae-picker-label').first().click();
1236-
cy.get(
1237-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(6) > ae-select > span > span > button:nth-child(2)',
1238-
).click();
1250+
cy.get(HEADING_2.selector).click();
12391251
cy.get('.angular-editor-textarea').first().type('Heading 2');
12401252
cy.get('#html-content-editor1').should(
12411253
'have.text',
@@ -1246,9 +1258,7 @@ describe('General tests', () => {
12461258
.first()
12471259
.type('{selectall}{enter}{backspace}{backspace}{backspace}');
12481260
cy.get('.ae-picker-label').first().click();
1249-
cy.get(
1250-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(6) > ae-select > span > span > button:nth-child(2)',
1251-
).click();
1261+
cy.get(HEADING_2.selector).click();
12521262
cy.get('.angular-editor-textarea').first().type('Heading 2');
12531263
cy.get('#html-content-editor1').should(
12541264
'have.text',
@@ -1273,9 +1283,7 @@ describe('General tests', () => {
12731283
.trigger('click')
12741284
.trigger('dblclick');
12751285
cy.get('.ae-picker-label').eq(1).click();
1276-
cy.get(
1277-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(6)',
1278-
).click();
1286+
cy.get(ROBOTO.selector).click();
12791287
cy.get('#html-content-editor1').should(
12801288
'have.text',
12811289
'<font face="Comic Sans MS" size="5">Some initial text, should be on the default font and size</font>',
@@ -1435,9 +1443,7 @@ describe('General tests', () => {
14351443
cy.get('body').click('top');
14361444
cy.get('#editor1 > div > div > div').first().should('not.be.focused');
14371445
cy.get('.ae-picker-label').eq(1).click();
1438-
cy.get(
1439-
'#editor1 > div > angular-editor-toolbar > div > div:nth-child(7) > ae-select > span > span > button:nth-child(6)',
1440-
).click();
1446+
cy.get(ROBOTO.selector).click();
14411447
cy.get('#editor1 > div > div > div').first().click('center');
14421448
cy.get('#editor1 > div > div > div').first().should('be.focused');
14431449
cy.get('#editor1 > div > div > div').first().type('A b c');

‎projects/angular-editor-app/src/app/app.component.html

-2
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ <h2>Basic Example with HTML Output:</h2>
66
<ng-template #customButtons let-executeCommandFn="executeCommandFn">
77
<ae-toolbar-set>
88
<ae-button iconClass="fa fa-html5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
9-
<!-- <ae-button iconClass="fa fa-file-code-o" title="Code Block" (buttonClick)="executeCommandFn('insertHtml', '<pre><code>dwadwadwa</code></pre>')"></ae-button> -->
109
</ae-toolbar-set>
1110
</ng-template>
1211
</angular-editor>
13-
<!-- <div [innerHTML]="htmlContent1"></div> -->
1412
<p class="html">HTML Output:</p>
1513
<div id="html-content-editor1" class="html-demo-content">{{ htmlContent1 }}</div>
1614
<br>

‎projects/angular-editor/src/assets/Arial.ttf

-269 KB
Binary file not shown.

‎projects/angular-editor/src/assets/Calibri W01 Regular.ttf

-67.3 KB
Binary file not shown.

‎projects/angular-editor/src/assets/Comic Sans MS.ttf

-132 KB
Binary file not shown.

‎projects/angular-editor/src/assets/Roboto-Regular.ttf

-164 KB
Binary file not shown.

‎projects/angular-editor/src/assets/Times New Roman.ttf

-815 KB
Binary file not shown.

‎projects/angular-editor/src/assets/Verdana.ttf

-136 KB
Binary file not shown.

‎projects/angular-editor/src/assets/_index.scss

+11-22
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,18 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Times+New+Roman:ital,wght@0,400;0,700;1,400;1,700&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Comic+Sans+MS:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
4+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
5+
6+
/* Map 'Comic Sans MS' to 'Comic Neue' */
17
@font-face {
28
font-family: 'Comic Sans MS';
3-
src: url("Comic Sans MS.ttf") format("truetype");
9+
src: url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');
10+
font-display: optional; /* Optionally load fonts */
411
}
512

13+
/* Map 'Arial' to 'Arimo' */
614
@font-face {
715
font-family: 'Arial';
8-
src: url("Arial.ttf") format("truetype");
9-
}
10-
11-
@font-face {
12-
font-family: 'Verdana';
13-
src: url("Verdana.ttf") format("truetype");
14-
}
15-
16-
@font-face {
17-
font-family: 'Times New Roman';
18-
src: url("Times New Roman.ttf") format("truetype");
19-
}
20-
21-
@font-face {
22-
font-family: 'Calibri';
23-
src: url("Calibri W01 Regular.ttf") format("truetype");
24-
}
25-
26-
@font-face {
27-
font-family: 'Roboto';
28-
src: url("Roboto-Regular.ttf") format("truetype");
16+
src: url('https://fonts.googleapis.com/css2?family=Arimo:wght@100;300;400;700;900&display=swap');
17+
font-display: optional; /* Optionally load fonts */
2918
}

‎projects/angular-editor/src/assets/calibri.ttf

-344 KB
Binary file not shown.

‎projects/angular-editor/src/lib/config.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,8 @@ export const angularEditorConfig: AngularEditorConfig = {
8080
fonts: [
8181
{ class: 'arial', name: 'Arial' },
8282
{ class: 'times-new-roman', name: 'Times New Roman' },
83-
{ class: 'calibri', name: 'Calibri' },
83+
{ class: 'roboto-condensed-embedded', name: 'Roboto' },
8484
{ class: 'comic-sans-ms', name: 'Comic Sans MS' },
85-
{ class: 'verdana', name: 'Verdana' },
86-
{ class: 'roboto-regular', name: 'Roboto' },
8785
],
8886
// uploadUrl: 'v1/image',
8987
uploadWithCredentials: false,

0 commit comments

Comments
 (0)