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