el-text-editor 0.0.65 → 0.0.67
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/el-text-editor.component.mjs +76 -6
- package/fesm2015/el-text-editor.mjs +75 -5
- package/fesm2015/el-text-editor.mjs.map +1 -1
- package/fesm2020/el-text-editor.mjs +75 -5
- package/fesm2020/el-text-editor.mjs.map +1 -1
- package/lib/el-text-editor.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -81,6 +81,7 @@ class ElTextEditorComponent {
|
|
|
81
81
|
this.parsedTable = null;
|
|
82
82
|
this.isFullScreen = false;
|
|
83
83
|
this.userRole = [];
|
|
84
|
+
this.showEditButton = false;
|
|
84
85
|
this.IsOpen = false;
|
|
85
86
|
this.onFullscreenChange = () => {
|
|
86
87
|
if (!document.fullscreenElement) {
|
|
@@ -292,12 +293,65 @@ class ElTextEditorComponent {
|
|
|
292
293
|
}
|
|
293
294
|
return userRoleName;
|
|
294
295
|
}
|
|
296
|
+
// private addClickListenerToImages() {
|
|
297
|
+
// const editor = document.getElementById('editor');
|
|
298
|
+
// const roles = this.roleCheck(); // Get user roles dynamically
|
|
299
|
+
// const isAdmin = roles.includes('Admin');
|
|
300
|
+
// const isCreator = roles.includes('Creator');
|
|
301
|
+
// const isApprover = roles.includes('Approver');
|
|
302
|
+
// if (isCreator || isAdmin) {
|
|
303
|
+
// if (editor) {
|
|
304
|
+
// editor.addEventListener('click', (event) => {
|
|
305
|
+
// const target = event.target as HTMLElement;
|
|
306
|
+
// if (target.tagName === 'IMG') {
|
|
307
|
+
// this.selectedImage = target as HTMLImageElement;
|
|
308
|
+
// this.imageEditUrl = this.selectedImage.src;
|
|
309
|
+
// let container = this.selectedImage.parentElement;
|
|
310
|
+
// if (!container || container.className !== 'image-container') {
|
|
311
|
+
// container = document.createElement('div');
|
|
312
|
+
// container.className = 'image-container';
|
|
313
|
+
// container.style.position = 'relative';
|
|
314
|
+
// container.style.display = 'inline-block';
|
|
315
|
+
// this.selectedImage.parentNode?.insertBefore(container, this.selectedImage);
|
|
316
|
+
// container.appendChild(this.selectedImage);
|
|
317
|
+
// }
|
|
318
|
+
// const existingButton = container.querySelector('.image-edit-button');
|
|
319
|
+
// if (existingButton) {
|
|
320
|
+
// existingButton.remove();
|
|
321
|
+
// }
|
|
322
|
+
// const button = document.createElement('button');
|
|
323
|
+
// button.textContent = 'Edit Image';
|
|
324
|
+
// button.className = 'image-edit-button btn btn-sm';
|
|
325
|
+
// button.style.position = 'absolute';
|
|
326
|
+
// button.style.top = '50%';
|
|
327
|
+
// button.style.left = '50%';
|
|
328
|
+
// button.style.transform = 'translate(-50%, -50%)';
|
|
329
|
+
// button.style.zIndex = '1000';
|
|
330
|
+
// button.style.backgroundColor = '#fff';
|
|
331
|
+
// button.style.border = '2px solid #fff';
|
|
332
|
+
// button.style.color = '#313a46';
|
|
333
|
+
// button.style.cursor = 'pointer';
|
|
334
|
+
// button.style.userSelect = 'none';
|
|
335
|
+
// button.addEventListener('click', (e) => {
|
|
336
|
+
// e.stopPropagation();
|
|
337
|
+
// this.editImage();
|
|
338
|
+
// });
|
|
339
|
+
// container.appendChild(button);
|
|
340
|
+
// } else {
|
|
341
|
+
// this.selectedImage = null;
|
|
342
|
+
// this.selectedItemIndex = null;
|
|
343
|
+
// const buttons = document.querySelectorAll('.image-edit-button');
|
|
344
|
+
// buttons.forEach(button => button.remove());
|
|
345
|
+
// }
|
|
346
|
+
// });
|
|
347
|
+
// }
|
|
348
|
+
// }
|
|
349
|
+
// }
|
|
295
350
|
addClickListenerToImages() {
|
|
296
351
|
const editor = document.getElementById('editor');
|
|
297
352
|
const roles = this.roleCheck(); // Get user roles dynamically
|
|
298
353
|
const isAdmin = roles.includes('Admin');
|
|
299
354
|
const isCreator = roles.includes('Creator');
|
|
300
|
-
const isApprover = roles.includes('Approver');
|
|
301
355
|
if (isCreator || isAdmin) {
|
|
302
356
|
if (editor) {
|
|
303
357
|
editor.addEventListener('click', (event) => {
|
|
@@ -338,15 +392,31 @@ class ElTextEditorComponent {
|
|
|
338
392
|
container.appendChild(button);
|
|
339
393
|
}
|
|
340
394
|
else {
|
|
341
|
-
this.
|
|
342
|
-
this.selectedItemIndex = null;
|
|
343
|
-
const buttons = document.querySelectorAll('.image-edit-button');
|
|
344
|
-
buttons.forEach(button => button.remove());
|
|
395
|
+
this.removeEditButtons();
|
|
345
396
|
}
|
|
346
397
|
});
|
|
398
|
+
// Monitor editor content changes to handle image deletion
|
|
399
|
+
const observer = new MutationObserver(() => {
|
|
400
|
+
const buttons = editor.querySelectorAll('.image-edit-button');
|
|
401
|
+
buttons.forEach((button) => {
|
|
402
|
+
const container = button.parentElement;
|
|
403
|
+
if (container && !container.querySelector('img')) {
|
|
404
|
+
button.remove(); // Remove the button if the associated image is gone
|
|
405
|
+
container.remove(); // Clean up the container
|
|
406
|
+
}
|
|
407
|
+
});
|
|
408
|
+
});
|
|
409
|
+
// Observe changes in the editor
|
|
410
|
+
observer.observe(editor, { childList: true, subtree: true });
|
|
347
411
|
}
|
|
348
412
|
}
|
|
349
413
|
}
|
|
414
|
+
removeEditButtons() {
|
|
415
|
+
const buttons = document.querySelectorAll('.image-edit-button');
|
|
416
|
+
buttons.forEach((button) => button.remove());
|
|
417
|
+
this.selectedImage = null;
|
|
418
|
+
this.selectedItemIndex = null;
|
|
419
|
+
}
|
|
350
420
|
// private addClickListenerToImages() {
|
|
351
421
|
// const editor = document.getElementById('editor');
|
|
352
422
|
// if (editor) {
|