rapid-text-editor 1.0.16 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/rapid-text-editor.component.mjs +74 -21
- package/fesm2015/rapid-text-editor.mjs +73 -20
- package/fesm2015/rapid-text-editor.mjs.map +1 -1
- package/fesm2020/rapid-text-editor.mjs +73 -20
- package/fesm2020/rapid-text-editor.mjs.map +1 -1
- package/lib/rapid-text-editor.component.d.ts +2 -0
- package/package.json +2 -2
|
@@ -58,6 +58,8 @@ class RapidTextEditorComponent {
|
|
|
58
58
|
else {
|
|
59
59
|
console.log('Content capture is disabled.');
|
|
60
60
|
}
|
|
61
|
+
// this.initializeEditorContent('');
|
|
62
|
+
// this.ensureParagraphAndFocus();
|
|
61
63
|
}
|
|
62
64
|
ngOnChanges(changes) {
|
|
63
65
|
if (changes['height'] || changes['width']) {
|
|
@@ -96,6 +98,51 @@ class RapidTextEditorComponent {
|
|
|
96
98
|
characterData: true,
|
|
97
99
|
subtree: true
|
|
98
100
|
});
|
|
101
|
+
// this.initializeEditorContent('');
|
|
102
|
+
// this.ensureParagraphAndFocus();
|
|
103
|
+
}
|
|
104
|
+
ensureParagraphAndFocus() {
|
|
105
|
+
const editor = document.getElementById('editor');
|
|
106
|
+
if (!editor)
|
|
107
|
+
return;
|
|
108
|
+
// If editor is empty or doesn't have a <p> as the last element
|
|
109
|
+
if (!editor.innerHTML.trim()) {
|
|
110
|
+
editor.innerHTML = '<p style="font-size:14px; font-weight:normal;">\u200B</p>';
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
const firstChild = editor.firstChild;
|
|
114
|
+
if (!firstChild || firstChild.tagName !== 'P') {
|
|
115
|
+
const content = editor.innerHTML;
|
|
116
|
+
editor.innerHTML = `<p style="font-size:14px; font-weight:normal;">${content}</p>`;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
const p = editor.querySelector('p');
|
|
120
|
+
if (p) {
|
|
121
|
+
const range = document.createRange();
|
|
122
|
+
range.selectNodeContents(p);
|
|
123
|
+
range.collapse(true);
|
|
124
|
+
const selection = window.getSelection();
|
|
125
|
+
if (selection) {
|
|
126
|
+
selection.removeAllRanges();
|
|
127
|
+
selection.addRange(range);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
// Focus the editor
|
|
131
|
+
editor.focus();
|
|
132
|
+
}
|
|
133
|
+
initializeEditorContent(data) {
|
|
134
|
+
const editor = document.getElementById('editor');
|
|
135
|
+
if (!editor)
|
|
136
|
+
return;
|
|
137
|
+
// If content has no HTML tags, wrap with <p>
|
|
138
|
+
const hasHtmlTags = /<[^>]+>/.test(data);
|
|
139
|
+
if (!hasHtmlTags) {
|
|
140
|
+
editor.innerHTML = `<p style="font-size:14px; font-weight: normal;">${data}</p>`;
|
|
141
|
+
// this.ensureParagraphAndFocus();
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
editor.innerHTML = data;
|
|
145
|
+
}
|
|
99
146
|
}
|
|
100
147
|
onContentChange() {
|
|
101
148
|
if (this.contentCapture) {
|
|
@@ -224,7 +271,7 @@ class RapidTextEditorComponent {
|
|
|
224
271
|
if (!range.collapsed) {
|
|
225
272
|
// Non-empty selection
|
|
226
273
|
const span = document.createElement('span');
|
|
227
|
-
span.style.
|
|
274
|
+
span.style.setProperty('font-size', `${size}px`, 'important');
|
|
228
275
|
span.classList.add(`fs-${size}`);
|
|
229
276
|
try {
|
|
230
277
|
range.surroundContents(span);
|
|
@@ -234,7 +281,7 @@ class RapidTextEditorComponent {
|
|
|
234
281
|
document.execCommand('fontSize', false, '7'); // temporary largest size
|
|
235
282
|
document.querySelectorAll('font[size="7"]').forEach((el) => {
|
|
236
283
|
el.removeAttribute('size');
|
|
237
|
-
el.style.
|
|
284
|
+
el.style.setProperty('font-size', `${size}px`, 'important');
|
|
238
285
|
el.classList.add(`fs-${size}`);
|
|
239
286
|
});
|
|
240
287
|
}
|
|
@@ -242,7 +289,7 @@ class RapidTextEditorComponent {
|
|
|
242
289
|
else {
|
|
243
290
|
// Collapsed selection (no text selected)
|
|
244
291
|
const span = document.createElement('span');
|
|
245
|
-
span.style.
|
|
292
|
+
span.style.setProperty('font-size', `${size}px`, 'important');
|
|
246
293
|
span.classList.add(`fs-${size}`);
|
|
247
294
|
span.appendChild(document.createTextNode('\u200B')); // zero-width space
|
|
248
295
|
range.insertNode(span);
|
|
@@ -271,33 +318,33 @@ class RapidTextEditorComponent {
|
|
|
271
318
|
const newElem = document.createElement(tag);
|
|
272
319
|
switch (tag) {
|
|
273
320
|
case 'H1':
|
|
274
|
-
newElem.style.
|
|
275
|
-
newElem.style.
|
|
321
|
+
newElem.style.setProperty('font-size', '32px', 'important');
|
|
322
|
+
newElem.style.setProperty('font-weight', 'bold', 'important');
|
|
276
323
|
break;
|
|
277
324
|
case 'H2':
|
|
278
|
-
newElem.style.
|
|
279
|
-
newElem.style.
|
|
325
|
+
newElem.style.setProperty('font-size', '28px', 'important');
|
|
326
|
+
newElem.style.setProperty('font-weight', 'bold', 'important');
|
|
280
327
|
break;
|
|
281
328
|
case 'H3':
|
|
282
|
-
newElem.style.
|
|
283
|
-
newElem.style.
|
|
329
|
+
newElem.style.setProperty('font-size', '24px', 'important');
|
|
330
|
+
newElem.style.setProperty('font-weight', 'bold', 'important');
|
|
284
331
|
break;
|
|
285
332
|
case 'H4':
|
|
286
|
-
newElem.style.
|
|
287
|
-
newElem.style.
|
|
333
|
+
newElem.style.setProperty('font-size', '20px', 'important');
|
|
334
|
+
newElem.style.setProperty('font-weight', 'bold', 'important');
|
|
288
335
|
break;
|
|
289
336
|
case 'H5':
|
|
290
|
-
newElem.style.
|
|
291
|
-
newElem.style.
|
|
337
|
+
newElem.style.setProperty('font-size', '18px', 'important');
|
|
338
|
+
newElem.style.setProperty('font-weight', '600', 'important');
|
|
292
339
|
break;
|
|
293
340
|
case 'H6':
|
|
294
|
-
newElem.style.
|
|
295
|
-
newElem.style.
|
|
341
|
+
newElem.style.setProperty('font-size', '16px', 'important');
|
|
342
|
+
newElem.style.setProperty('font-weight', '600', 'important');
|
|
296
343
|
break;
|
|
297
344
|
case 'P':
|
|
298
345
|
default:
|
|
299
|
-
newElem.style.
|
|
300
|
-
newElem.style.
|
|
346
|
+
newElem.style.setProperty('font-size', '14px', 'important');
|
|
347
|
+
newElem.style.setProperty('font-weight', 'normal', 'important');
|
|
301
348
|
break;
|
|
302
349
|
}
|
|
303
350
|
const selectedText = selection.toString();
|
|
@@ -305,7 +352,7 @@ class RapidTextEditorComponent {
|
|
|
305
352
|
newElem.textContent = selectedText;
|
|
306
353
|
}
|
|
307
354
|
else {
|
|
308
|
-
newElem.innerHTML = '\u200B'; //
|
|
355
|
+
newElem.innerHTML = '\u200B'; // Keeps cursor visible
|
|
309
356
|
}
|
|
310
357
|
range.deleteContents();
|
|
311
358
|
range.insertNode(newElem);
|
|
@@ -706,8 +753,14 @@ class RapidTextEditorComponent {
|
|
|
706
753
|
}
|
|
707
754
|
submitContent() {
|
|
708
755
|
const editor = this.editor.nativeElement;
|
|
756
|
+
if (!editor)
|
|
757
|
+
return;
|
|
709
758
|
const content = editor.innerHTML; // Get the HTML content from the editor
|
|
710
759
|
const plainTextContent = editor.innerText; // Optionally, get plain text content
|
|
760
|
+
if (!editor.innerHTML.trim()) {
|
|
761
|
+
editor.innerHTML = '<p style="font-size:14px; font-weight:normal;">\u200B</p>';
|
|
762
|
+
// this.ensureParagraphAndFocus();
|
|
763
|
+
}
|
|
711
764
|
this.onChange(content);
|
|
712
765
|
}
|
|
713
766
|
}
|
|
@@ -718,7 +771,7 @@ RapidTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
|
|
|
718
771
|
useExisting: forwardRef(() => RapidTextEditorComponent),
|
|
719
772
|
multi: true
|
|
720
773
|
}
|
|
721
|
-
], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px; font-weight: bold;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px; font-weight: bold;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px; font-weight: bold;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px; font-weight: bold;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px; font-weight: 600;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px; font-weight: 600;\">H6</option>\r\n </select>\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px;\" value=\"20\">20px</option>\r\n <option style=\"font-size: 24px;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px;\" value=\"48\">48px</option>\r\n </select>\r\n <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n <mat-icon>format_bold</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n <mat-icon>format_italic</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n <mat-icon>format_underline</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n <mat-icon>strikethrough_s</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n <mat-icon>format_align_left</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n <mat-icon>format_align_center</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n <mat-icon>format_align_right</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n <mat-icon>format_align_justify</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n <mat-icon>format_list_bulleted</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n <mat-icon>format_list_numbered</mat-icon>\r\n </button>\r\n <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n </button>\r\n <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\"\r\n aria-label=\"Choose table rows and columns\">\r\n <mat-icon>border_all</mat-icon>\r\n </button>\r\n\r\n <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}.fs-28{font-size:28px}.editor h1{font-size:32px;font-weight:700;margin:0}.editor h2{font-size:28px;font-weight:700;margin:0}.editor h3{font-size:24px;font-weight:700;margin:0}.editor h4{font-size:20px;font-weight:700;margin:0}.editor h5{font-size:18px;font-weight:600;margin:0}.editor h6{font-size:16px;font-weight:600;margin:0}.editor p{font-size:14px;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
774
|
+
], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px !important;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px !important; font-weight: bold !important;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px !important; font-weight: bold !important;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px !important; font-weight: bold !important;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px !important; font-weight: bold !important;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px !important; font-weight: 600 !important;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px !important; font-weight: 600 !important;\">H6</option>\r\n </select>\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px !important;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px !important;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px !important;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px !important;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px !important;\" value=\"20\">20px</option> \r\n <option style=\"font-size: 24px !important;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px !important;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px !important;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px !important;\" value=\"48\">48px</option>\r\n </select>\r\n <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n <mat-icon>format_bold</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n <mat-icon>format_italic</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n <mat-icon>format_underline</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n <mat-icon>strikethrough_s</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n <mat-icon>format_align_left</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n <mat-icon>format_align_center</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n <mat-icon>format_align_right</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n <mat-icon>format_align_justify</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n <mat-icon>format_list_bulleted</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n <mat-icon>format_list_numbered</mat-icon>\r\n </button>\r\n <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n </button>\r\n <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\"\r\n aria-label=\"Choose table rows and columns\">\r\n <mat-icon>border_all</mat-icon>\r\n </button>\r\n\r\n <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-24{font-size:24px!important}.fs-28{font-size:28px!important}.editor h1{font-size:32px!important;font-weight:700!important;margin:0}.editor h2{font-size:28px!important;font-weight:700!important;margin:0}.editor h3{font-size:24px!important;font-weight:700!important;margin:0}.editor h4{font-size:20px!important;font-weight:700!important;margin:0}.editor h5{font-size:18px!important;font-weight:600!important;margin:0}.editor h6{font-size:16px!important;font-weight:600!important;margin:0}.editor p{font-size:14px!important;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
722
775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, decorators: [{
|
|
723
776
|
type: Component,
|
|
724
777
|
args: [{ selector: 'rapid-text-editor', providers: [
|
|
@@ -727,7 +780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
727
780
|
useExisting: forwardRef(() => RapidTextEditorComponent),
|
|
728
781
|
multi: true
|
|
729
782
|
}
|
|
730
|
-
], template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px; font-weight: bold;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px; font-weight: bold;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px; font-weight: bold;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px; font-weight: bold;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px; font-weight: 600;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px; font-weight: 600;\">H6</option>\r\n </select>\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px;\" value=\"20\">20px</option
|
|
783
|
+
], template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px !important;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px !important; font-weight: bold !important;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px !important; font-weight: bold !important;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px !important; font-weight: bold !important;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px !important; font-weight: bold !important;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px !important; font-weight: 600 !important;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px !important; font-weight: 600 !important;\">H6</option>\r\n </select>\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px !important;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px !important;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px !important;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px !important;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px !important;\" value=\"20\">20px</option> \r\n <option style=\"font-size: 24px !important;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px !important;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px !important;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px !important;\" value=\"48\">48px</option>\r\n </select>\r\n <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n <mat-icon>format_bold</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n <mat-icon>format_italic</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n <mat-icon>format_underline</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n <mat-icon>strikethrough_s</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n <mat-icon>format_align_left</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n <mat-icon>format_align_center</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n <mat-icon>format_align_right</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n <mat-icon>format_align_justify</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n <mat-icon>format_list_bulleted</mat-icon>\r\n </button>\r\n\r\n <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n <mat-icon>format_list_numbered</mat-icon>\r\n </button>\r\n <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n </button>\r\n <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\"\r\n aria-label=\"Choose table rows and columns\">\r\n <mat-icon>border_all</mat-icon>\r\n </button>\r\n\r\n <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-24{font-size:24px!important}.fs-28{font-size:28px!important}.editor h1{font-size:32px!important;font-weight:700!important;margin:0}.editor h2{font-size:28px!important;font-weight:700!important;margin:0}.editor h3{font-size:24px!important;font-weight:700!important;margin:0}.editor h4{font-size:20px!important;font-weight:700!important;margin:0}.editor h5{font-size:18px!important;font-weight:600!important;margin:0}.editor h6{font-size:16px!important;font-weight:600!important;margin:0}.editor p{font-size:14px!important;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"] }]
|
|
731
784
|
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { contentCapture: [{
|
|
732
785
|
type: Input
|
|
733
786
|
}], height: [{
|