rapid-text-editor 1.0.4

package/fesm2020/rapid-text-editor.mjs

@@ -0,0 +1,615 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class RapidTextEditorService {
+    constructor() { }
+}
+RapidTextEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RapidTextEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class RapidTextEditorComponent {
+    constructor(dialog, el) {
+        this.dialog = dialog;
+        this.el = el;
+        this.contentCapture = false;
+        this.contentChange = new EventEmitter();
+        this.editorContent = '';
+        this.rows = 1;
+        this.cols = 1;
+        this.grid = Array(49).fill(0);
+        this.Math = Math;
+        this.uploadedImages = [];
+        //Two Way Data Binding Functionality
+        this.onChange = (content) => { };
+        this.onTouched = () => { };
+        console.log('Build -1');
+    }
+    ngOnInit() {
+        if (this.contentCapture) {
+            console.log('Content capture is enabled.');
+        }
+        else {
+            console.log('Content capture is disabled.');
+        }
+    }
+    ngAfterViewInit() {
+        const editor = this.el.nativeElement.querySelector('.editor');
+        if (!editor) {
+            console.error('Editor element not found.');
+        }
+    }
+    onContentChange() {
+        if (this.contentCapture) {
+            const editor = this.el.nativeElement.querySelector('.editor');
+            if (editor) {
+                this.editorContent = editor.innerHTML;
+                console.log('Captured Content (Child):', this.editorContent);
+                this.contentChange.emit(this.editorContent);
+            }
+            else {
+                console.error('Editor element not found.');
+            }
+        }
+    }
+    getContent() {
+        return this.editorContent;
+    }
+    // Called by Angular to update the value programmatically
+    writeValue(content) {
+        if (this.editor && this.editor.nativeElement) {
+            this.editor.nativeElement.innerHTML = content || '';
+        }
+    }
+    // Registers the onChange callback to notify Angular of content changes
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Registers the onTouched callback for blur events
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    format(command) {
+        document.execCommand(command, false, '');
+    }
+    setHeading(event) {
+        const value = event.target.value;
+        document.execCommand('formatBlock', false, value);
+    }
+    //Image Section
+    allowDrop(event) {
+        event.preventDefault();
+    }
+    // Handle image drag start
+    drag(event, imageUrl) {
+        event.dataTransfer?.setData("text", imageUrl);
+    }
+    // Handle drop event in the editor
+    drop(event) {
+        event.preventDefault();
+        const imageUrl = event.dataTransfer?.getData("text");
+        if (imageUrl) {
+            this.insertImageInEditor(imageUrl);
+        }
+    }
+    // insertImage(event: any): void {
+    //   const files: FileList = event.target.files;
+    //   if (!files || files.length === 0) {
+    //     console.error('No files selected.');
+    //     return;
+    //   }
+    //   Array.from(files).forEach((file) => {
+    //     // Check file type
+    //     if (file.type !== 'image/png' && !file.type.startsWith('image/')) {
+    //       console.error('Unsupported file type:', file.type);
+    //       return;
+    //     }
+    //     // Read the image file
+    //     const reader = new FileReader();
+    //     reader.onload = (e: any) => {
+    //       const imageUrl = e.target.result;
+    //       // Add image to the uploaded images list
+    //       this.uploadedImages.push(imageUrl);
+    //       // Call insertImageInEditor to add the image to the editor
+    //       this.insertImageInEditor(imageUrl);
+    //     };
+    //     reader.readAsDataURL(file);
+    //   });
+    // } -> for PNG
+    removeImage(index) {
+        this.uploadedImages.splice(index, 1); // Remove the image from the array
+    }
+    insertImageInEditor(imageUrl) {
+        const editor = document.querySelector('.editor');
+        if (!editor) {
+            console.error('Editor element not found.');
+            return;
+        }
+        // Create image element
+        const img = document.createElement('img');
+        img.src = imageUrl;
+        img.style.maxWidth = '100%';
+        img.style.display = 'block';
+        img.style.width = '300px';
+        img.style.height = 'auto';
+        // Create a wrapper around the image to allow resizing
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'relative';
+        wrapper.style.display = 'inline-block'; // Ensures the wrapper only takes up space for the image
+        wrapper.style.margin = '10px';
+        wrapper.style.padding = '5px';
+        wrapper.style.border = '1px dashed #ccc'; // Optional border to indicate the image area
+        // Append the image to the wrapper
+        wrapper.appendChild(img);
+        // Append the wrapper to the editor
+        editor.appendChild(wrapper);
+        // Make the image resizable
+        this.makeImageResizable(wrapper, img);
+        // Optionally, add a text node to maintain cursor position after appending the image
+        const textNode = document.createTextNode('\u200B'); // Invisible character to maintain position
+        editor.appendChild(textNode);
+        const range = document.createRange();
+        range.setStartAfter(wrapper);
+        range.collapse(true);
+        const selection = window.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
+    makeImageResizable(wrapper, img) {
+        let isResizing = false;
+        let startX = 0;
+        let startY = 0;
+        let startWidth = 0;
+        let startHeight = 0;
+        // Create resize handles for the image
+        const createResizeHandle = (cursor, positionStyles, resizeCallback) => {
+            const handle = document.createElement('div');
+            handle.style.position = 'absolute';
+            handle.style.width = '10px';
+            handle.style.height = '10px';
+            handle.style.background = 'rgba(0, 0, 0, 0.5)';
+            handle.style.cursor = cursor;
+            Object.assign(handle.style, positionStyles);
+            handle.addEventListener('mousedown', (resizeEvent) => {
+                isResizing = true;
+                startX = resizeEvent.clientX;
+                startY = resizeEvent.clientY;
+                startWidth = img.offsetWidth;
+                startHeight = img.offsetHeight;
+                const onMouseMove = (moveEvent) => {
+                    if (isResizing) {
+                        const deltaX = moveEvent.clientX - startX;
+                        const deltaY = moveEvent.clientY - startY;
+                        resizeCallback(deltaX, deltaY);
+                    }
+                };
+                const onMouseUp = () => {
+                    isResizing = false;
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                };
+                document.addEventListener('mousemove', onMouseMove);
+                document.addEventListener('mouseup', onMouseUp);
+            });
+            wrapper.appendChild(handle);
+        };
+        // Add resizing handles to the wrapper for the image
+        createResizeHandle('nw-resize', { top: '-5px', left: '-5px' }, (deltaX, deltaY) => {
+            img.style.width = `${startWidth - deltaX}px`;
+            img.style.height = `${startHeight - deltaY}px`;
+        });
+        createResizeHandle('se-resize', { bottom: '-5px', right: '-5px' }, (deltaX, deltaY) => {
+            img.style.width = `${startWidth + deltaX}px`;
+            img.style.height = `${startHeight + deltaY}px`;
+        });
+    }
+    insertImage(event) {
+        const input = event.target;
+        if (input?.files) {
+            Array.from(input.files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const imageUrl = e.target.result;
+                    this.uploadedImages.push(imageUrl); // Store image URL in the array
+                };
+                reader.readAsDataURL(file);
+            });
+        }
+    }
+    convertImage(file) {
+        return new Promise((resolve, reject) => {
+            if (file.type !== 'image/png') {
+                resolve(file); // Return the original file if it's not a PNG
+                return;
+            }
+            const img = new Image();
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                img.src = e.target.result;
+                img.onload = () => {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    if (!ctx) {
+                        reject(new Error('Failed to get canvas context'));
+                        return;
+                    }
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    ctx.drawImage(img, 0, 0);
+                    canvas.toBlob(blob => {
+                        if (blob) {
+                            const jpgFile = new File([blob], file.name.replace(/\.png$/, '.jpg'), { type: 'image/jpeg' });
+                            resolve(jpgFile);
+                        }
+                        else {
+                            reject(new Error('Failed to convert PNG to JPG'));
+                        }
+                    }, 'image/jpeg', 0.95 // Quality factor for JPEG
+                    );
+                };
+            };
+            reader.onerror = () => reject(new Error('Failed to read the file'));
+            reader.readAsDataURL(file);
+        });
+    }
+    // insertImageByDrag(imageUrl: string): void {
+    //   const editor = document.querySelector('.editor') as HTMLElement;
+    //   if (!editor) {
+    //     console.error('Editor element not found.');
+    //     return;
+    //   }
+    //   const img = document.createElement('img');
+    //   img.src = imageUrl;
+    //   img.style.maxWidth = '100%';
+    //   img.style.display = 'block';
+    //   img.style.width = '300px'; 
+    //   img.style.height = 'auto';
+    //   editor.appendChild(img);
+    // }
+    insertImageToEditor(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const imageUrl = e.target.result;
+                const editor = document.querySelector('.editor');
+                if (!editor) {
+                    console.error('Editor element not found.');
+                    return;
+                }
+                const wrapper = document.createElement('div');
+                wrapper.contentEditable = 'false';
+                wrapper.style.position = 'relative';
+                wrapper.style.display = 'inline-block';
+                wrapper.style.border = '1px dashed #ccc';
+                wrapper.style.margin = '10px';
+                wrapper.style.padding = '5px';
+                wrapper.style.borderBlockColor = '#007BFF';
+                const img = document.createElement('img');
+                img.src = imageUrl;
+                img.style.maxWidth = '100%';
+                img.style.display = 'block';
+                img.style.width = '300px';
+                img.style.height = 'auto';
+                wrapper.appendChild(img);
+                let isResizing = false;
+                let startX = 0;
+                let startY = 0;
+                let startWidth = 0;
+                let startHeight = 0;
+                const createResizeHandle = (cursor, positionStyles, resizeCallback) => {
+                    const handle = document.createElement('div');
+                    handle.style.position = 'absolute';
+                    handle.style.width = '10px';
+                    handle.style.height = '10px';
+                    handle.style.background = 'rgba(0, 0, 0, 0.5)';
+                    handle.style.cursor = cursor;
+                    Object.assign(handle.style, positionStyles);
+                    handle.addEventListener('mousedown', (resizeEvent) => {
+                        isResizing = true;
+                        startX = resizeEvent.clientX;
+                        startY = resizeEvent.clientY;
+                        startWidth = img.offsetWidth;
+                        startHeight = img.offsetHeight;
+                        const onMouseMove = (moveEvent) => {
+                            if (isResizing) {
+                                const deltaX = moveEvent.clientX - startX;
+                                const deltaY = moveEvent.clientY - startY;
+                                resizeCallback(deltaX, deltaY);
+                            }
+                        };
+                        const onMouseUp = () => {
+                            isResizing = false;
+                            document.removeEventListener('mousemove', onMouseMove);
+                            document.removeEventListener('mouseup', onMouseUp);
+                        };
+                        document.addEventListener('mousemove', onMouseMove);
+                        document.addEventListener('mouseup', onMouseUp);
+                    });
+                    wrapper.appendChild(handle);
+                };
+                createResizeHandle('nw-resize', { top: '-5px', left: '-5px' }, (deltaX, deltaY) => {
+                    img.style.width = `${startWidth - deltaX}px`;
+                    img.style.height = `${startHeight - deltaY}px`;
+                });
+                createResizeHandle('se-resize', { bottom: '-5px', right: '-5px' }, (deltaX, deltaY) => {
+                    img.style.width = `${startWidth + deltaX}px`;
+                    img.style.height = `${startHeight + deltaY}px`;
+                });
+                editor.appendChild(wrapper);
+                const textNode = document.createTextNode('\u200B');
+                editor.appendChild(textNode);
+                const range = document.createRange();
+                range.setStartAfter(wrapper);
+                range.collapse(true);
+                const selection = window.getSelection();
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    openTableDialog(event) {
+        this.rows = 1;
+        this.cols = 1;
+        const dialogRef = this.dialog.open(this.tableDialog, {
+            position: {
+                top: `${event.clientY}px`,
+                left: `${event.clientX}px`,
+            },
+            panelClass: 'custom-dialog-container'
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.insertTable(result.rows, result.cols);
+            }
+        });
+    }
+    updatePreview(cols, rows) {
+        this.cols = cols;
+        this.rows = rows;
+    }
+    updateSelection(colIndex, rowIndex, dialogRef) {
+        this.cols = colIndex;
+        this.rows = rowIndex;
+        dialogRef.close({ rows: this.rows, cols: this.cols }); // Close dialog with selection
+    }
+    makeFirstRowHeader() {
+        const editor = this.editor.nativeElement;
+        const selection = window.getSelection();
+        // Check if selection is inside the editor
+        if (!this.isSelectionInsideEditor(editor, selection)) {
+            alert('Please place the cursor inside the table to make the first row a header.');
+            return;
+        }
+        // Find the closest table to the selection
+        const range = selection.getRangeAt(0);
+        const selectedNode = range.startContainer;
+        const table = this.findClosestTable(selectedNode);
+        if (!table) {
+            alert('No table found near the cursor.');
+            return;
+        }
+        // Convert the first row cells to header cells
+        const firstRow = table.rows[0];
+        if (firstRow) {
+            for (let i = 0; i < firstRow.cells.length; i++) {
+                const cell = firstRow.cells[i];
+                const th = document.createElement('th');
+                th.innerHTML = cell.innerHTML;
+                th.style.textAlign = 'center';
+                th.style.backgroundColor = '#F1F1F0';
+                th.style.border = '1px solid black';
+                th.style.borderCollapse = 'collapse';
+                th.style.padding = window.getComputedStyle(cell).padding; // Retain padding
+                th.style.width = window.getComputedStyle(cell).width; // Retain width
+                th.style.height = window.getComputedStyle(cell).height;
+                firstRow.replaceChild(th, cell);
+            }
+        }
+        editor.focus();
+    }
+    findClosestTable(node) {
+        while (node && node !== document) {
+            if (node.nodeName === 'TABLE') {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        return null;
+    }
+    insertTable(rows, cols) {
+        const rowCount = parseInt(rows, 10);
+        const colCount = parseInt(cols, 10);
+        if (isNaN(rowCount) || isNaN(colCount) || rowCount < 1 || colCount < 1) {
+            alert('Please enter valid numbers for rows and columns.');
+            return;
+        }
+        const editor = this.editor.nativeElement;
+        const selection = window.getSelection();
+        // Ensure selection is inside the editor
+        if (!this.isSelectionInsideEditor(editor, selection)) {
+            // Append the table at the end if selection is outside editor
+            this.appendTable(editor, rowCount, colCount);
+            return;
+        }
+        // Proceed to insert the table if selection is valid
+        const tableHTML = this.createTableHTML(rowCount, colCount);
+        const range = selection.getRangeAt(0);
+        range.deleteContents(); // Remove any selected content
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = tableHTML;
+        range.insertNode(tempDiv.firstChild); // Insert the table
+        // Move the cursor to the first cell of the new table
+        this.setCursorToFirstCell(tempDiv.firstChild);
+        editor.focus();
+    }
+    // Helper function: Create table HTML
+    createTableHTML(rowCount, colCount) {
+        let tableHTML = '<table border="1" style="border-collapse: collapse; margin:5px">';
+        for (let i = 0; i < rowCount; i++) {
+            tableHTML += '<tr>';
+            for (let j = 0; j < colCount; j++) {
+                tableHTML += `<td style="font-size: 14px; min-width: 1.5em; height: 2em; padding: .4em; border: 1px solid black" 
+                        role="textbox" contenteditable="true"></td>`;
+            }
+            tableHTML += '</tr>';
+        }
+        tableHTML += '</table>';
+        return tableHTML;
+    }
+    // Helper function: Append a table at the end of the editor
+    appendTable(editor, rowCount, colCount) {
+        const tableHTML = this.createTableHTML(rowCount, colCount);
+        editor.innerHTML += tableHTML;
+        // Set cursor inside the first cell of the new table
+        const lastInsertedTable = editor.querySelector('table:last-child');
+        this.setCursorToFirstCell(lastInsertedTable);
+        editor.focus();
+    }
+    // Helper function: Check if selection is inside the editor
+    isSelectionInsideEditor(editor, selection) {
+        if (!selection.rangeCount)
+            return false;
+        let node = selection.getRangeAt(0).commonAncestorContainer;
+        // Traverse up to see if the node belongs to the editor
+        while (node) {
+            if (node === editor)
+                return true;
+            node = node.parentNode;
+        }
+        return false;
+    }
+    // Helper function: Move cursor to the first cell
+    // private setCursorToFirstCell(table: HTMLElement) {
+    //   const firstCell = table.querySelector('tr:first-child td:first-child') as HTMLElement;
+    //   if (firstCell) {
+    //     const newRange = document.createRange();
+    //     newRange.setStart(firstCell, 0); // Start at the beginning of the cell
+    //     newRange.collapse(true);
+    //     const selection = window.getSelection();
+    //     selection!.removeAllRanges();
+    //     selection!.addRange(newRange);
+    //   }
+    // }
+    setCursorToFirstCell(table) {
+        const firstCell = table.querySelector('tr:first-child td:first-child, tr:first-child th:first-child');
+        if (firstCell) {
+            // Ensure the cell is contenteditable
+            firstCell.setAttribute('contenteditable', 'true');
+            // Focus the cell
+            firstCell.focus();
+            // Create a range and place the cursor at the start of the cell
+            const newRange = document.createRange();
+            newRange.selectNodeContents(firstCell); // Select the contents of the cell
+            newRange.collapse(true); // Collapse to the start
+            const selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            }
+        }
+    }
+    insertPageBreak() {
+        const pageBreak = `<div style="page-break-after: always;"><br /></div>`;
+        document.execCommand('insertHTML', false, pageBreak);
+    }
+    submitContent() {
+        const editor = this.editor.nativeElement;
+        const content = editor.innerHTML; // Get the HTML content from the editor
+        const plainTextContent = editor.innerText; // Optionally, get plain text content
+        // For demonstration, you can log it or process it as needed
+        this.onChange(content);
+        // Example: You could send this data to a server or use it elsewhere in your application
+        // this.yourService.submitContent({ content }); // Replace with your service call
+    }
+}
+RapidTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, deps: [{ token: i1.MatDialog }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+RapidTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RapidTextEditorComponent, selector: "rich-text-editor", inputs: { contentCapture: "contentCapture" }, outputs: { contentChange: "contentChange" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => RapidTextEditorComponent),
+            multi: true
+        }
+    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }], ngImport: i0, template: "<div class=\"rich-text-editor\">\r\n    <!-- Toolbar -->\r\n    <div class=\"toolbar\">\r\n        \r\n          <select class=\"select-wrapper\" (change)=\"setHeading($event)\">\r\n            <option value=\"P\">Paragraph</option>\r\n            <option value=\"H1\">H1</option>\r\n            <option value=\"H2\">H2</option>\r\n            <option value=\"H3\">H3</option>\r\n            <option value=\"H4\">H4</option>\r\n            <option value=\"H5\">H5</option>\r\n            <option value=\"H6\">H6</option>\r\n        </select>\r\n          <button  (click)=\"format('bold')\" aria-label=\"Bold\">\r\n            <mat-icon>format_bold</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('italic')\" aria-label=\"Italic\">\r\n            <mat-icon>format_italic</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('underline')\" aria-label=\"Underline\">\r\n            <mat-icon>format_underline</mat-icon>\r\n          </button>\r\n          \r\n          <button  (click)=\"format('strikethrough')\" aria-label=\"Strikethrough\">\r\n            <mat-icon>strikethrough_s</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyLeft')\" aria-label=\"Align Left\">\r\n            <mat-icon>format_align_left</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyCenter')\" aria-label=\"Center\">\r\n            <mat-icon>format_align_center</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyRight')\" aria-label=\"Align Right\">\r\n            <mat-icon>format_align_right</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyFull')\" aria-label=\"Justify\">\r\n            <mat-icon>format_align_justify</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('insertUnorderedList')\" aria-label=\"Unordered List\">\r\n            <mat-icon>format_list_bulleted</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('insertOrderedList')\" aria-label=\"Ordered List\">\r\n            <mat-icon>format_list_numbered</mat-icon>\r\n          </button>\r\n          \r\n      \r\n  \r\n          <button color=\"secondary\" aria-label=\"Insert Image\" style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n            <input\r\n              type=\"file\" \r\n              (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            />\r\n            \r\n            <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n          </button>\r\n          \r\n          \r\n          <button (click)=\"openTableDialog($event)\" color=\"secondary\" aria-label=\"Choose table rows and columns\">\r\n            <mat-icon>border_all</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"makeFirstRowHeader()\" color=\"secondary\" aria-label=\"Make Header\">\r\n            <img style=\"width: 26px; height: 46px; margin-bottom: 3px;\" src=\"../../../assets/H.svg\" alt=\"Apply Header to table\">\r\n          </button>\r\n        \r\n    </div>\r\n  \r\n    <!-- Editable Area -->\r\n     <!-- (keypress)=\"onContentChange()\" need to be included -->\r\n    <div class=\"editor\" contenteditable=\"true\" #editor  (input)=\"submitContent()\" (blur)=\"onBlur()\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\" >\r\n        <!-- Your content goes here --> \r\n    </div>\r\n  \r\n  </div>\r\n  \r\n  <button mat-stroked-button class=\"submit\" (click)=\"submitContent()\">Submit</button>\r\n  \r\n  \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\r\n        *ngFor=\"let cell of grid; let i = index\"\r\n        [ngClass]=\"{\r\n          'grid-item': true,\r\n          'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n        }\"\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)\"\r\n      ></div>\r\n    </div>\r\n    <p>{{ rows }} x {{ cols }} </p>\r\n  </mat-dialog-content>\r\n  </ng-template>\r\n  \r\n  \r\n  <input type=\"file\" (change)=\"insertImage($event)\" accept=\"image/png,image/*\" multiple  />\r\n  \r\n  \r\n  <div class=\"uploaded-images\" *ngIf=\"uploadedImages.length > 0\">\r\n    <div *ngFor=\"let imageUrl of uploadedImages; let i = index\" class=\"image-preview\">\r\n      <img [src]=\"imageUrl\" alt=\"Uploaded Image\" \r\n           draggable=\"true\" \r\n           (dragstart)=\"drag($event, imageUrl)\" />\r\n      \r\n      <button class=\"remove-btn\" (click)=\"removeImage(i)\">Remove</button>\r\n    </div>\r\n  </div>\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  ", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px}.editor{min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}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:150px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;border-radius:5px;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;border-radius:5px;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}button:active{background-color:#0056b3}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}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rich-text-editor', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RapidTextEditorComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"rich-text-editor\">\r\n    <!-- Toolbar -->\r\n    <div class=\"toolbar\">\r\n        \r\n          <select class=\"select-wrapper\" (change)=\"setHeading($event)\">\r\n            <option value=\"P\">Paragraph</option>\r\n            <option value=\"H1\">H1</option>\r\n            <option value=\"H2\">H2</option>\r\n            <option value=\"H3\">H3</option>\r\n            <option value=\"H4\">H4</option>\r\n            <option value=\"H5\">H5</option>\r\n            <option value=\"H6\">H6</option>\r\n        </select>\r\n          <button  (click)=\"format('bold')\" aria-label=\"Bold\">\r\n            <mat-icon>format_bold</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('italic')\" aria-label=\"Italic\">\r\n            <mat-icon>format_italic</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('underline')\" aria-label=\"Underline\">\r\n            <mat-icon>format_underline</mat-icon>\r\n          </button>\r\n          \r\n          <button  (click)=\"format('strikethrough')\" aria-label=\"Strikethrough\">\r\n            <mat-icon>strikethrough_s</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyLeft')\" aria-label=\"Align Left\">\r\n            <mat-icon>format_align_left</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyCenter')\" aria-label=\"Center\">\r\n            <mat-icon>format_align_center</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyRight')\" aria-label=\"Align Right\">\r\n            <mat-icon>format_align_right</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('justifyFull')\" aria-label=\"Justify\">\r\n            <mat-icon>format_align_justify</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('insertUnorderedList')\" aria-label=\"Unordered List\">\r\n            <mat-icon>format_list_bulleted</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"format('insertOrderedList')\" aria-label=\"Ordered List\">\r\n            <mat-icon>format_list_numbered</mat-icon>\r\n          </button>\r\n          \r\n      \r\n  \r\n          <button color=\"secondary\" aria-label=\"Insert Image\" style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n            <input\r\n              type=\"file\" \r\n              (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            />\r\n            \r\n            <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n          </button>\r\n          \r\n          \r\n          <button (click)=\"openTableDialog($event)\" color=\"secondary\" aria-label=\"Choose table rows and columns\">\r\n            <mat-icon>border_all</mat-icon>\r\n          </button>\r\n          \r\n          <button (click)=\"makeFirstRowHeader()\" color=\"secondary\" aria-label=\"Make Header\">\r\n            <img style=\"width: 26px; height: 46px; margin-bottom: 3px;\" src=\"../../../assets/H.svg\" alt=\"Apply Header to table\">\r\n          </button>\r\n        \r\n    </div>\r\n  \r\n    <!-- Editable Area -->\r\n     <!-- (keypress)=\"onContentChange()\" need to be included -->\r\n    <div class=\"editor\" contenteditable=\"true\" #editor  (input)=\"submitContent()\" (blur)=\"onBlur()\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\" >\r\n        <!-- Your content goes here --> \r\n    </div>\r\n  \r\n  </div>\r\n  \r\n  <button mat-stroked-button class=\"submit\" (click)=\"submitContent()\">Submit</button>\r\n  \r\n  \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\r\n        *ngFor=\"let cell of grid; let i = index\"\r\n        [ngClass]=\"{\r\n          'grid-item': true,\r\n          'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n        }\"\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)\"\r\n      ></div>\r\n    </div>\r\n    <p>{{ rows }} x {{ cols }} </p>\r\n  </mat-dialog-content>\r\n  </ng-template>\r\n  \r\n  \r\n  <input type=\"file\" (change)=\"insertImage($event)\" accept=\"image/png,image/*\" multiple  />\r\n  \r\n  \r\n  <div class=\"uploaded-images\" *ngIf=\"uploadedImages.length > 0\">\r\n    <div *ngFor=\"let imageUrl of uploadedImages; let i = index\" class=\"image-preview\">\r\n      <img [src]=\"imageUrl\" alt=\"Uploaded Image\" \r\n           draggable=\"true\" \r\n           (dragstart)=\"drag($event, imageUrl)\" />\r\n      \r\n      <button class=\"remove-btn\" (click)=\"removeImage(i)\">Remove</button>\r\n    </div>\r\n  </div>\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  ", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px}.editor{min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}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:150px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;border-radius:5px;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;border-radius:5px;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}button:active{background-color:#0056b3}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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ElementRef }]; }, propDecorators: { contentCapture: [{
+                type: Input
+            }], contentChange: [{
+                type: Output
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor', { static: true }]
+            }], tableDialog: [{
+                type: ViewChild,
+                args: ['tableDialog']
+            }] } });
+
+class RapidTextEditorModule {
+}
+RapidTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RapidTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, declarations: [RapidTextEditorComponent], imports: [CommonModule,
+        MatDialogModule,
+        MatIconModule,
+        MatDialogModule], exports: [RapidTextEditorComponent] });
+RapidTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, imports: [[
+            CommonModule,
+            MatDialogModule,
+            MatIconModule,
+            MatDialogModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        RapidTextEditorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        MatIconModule,
+                        MatDialogModule
+                    ],
+                    exports: [
+                        RapidTextEditorComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of rapid-text-editor
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RapidTextEditorComponent, RapidTextEditorModule, RapidTextEditorService };
+//# sourceMappingURL=rapid-text-editor.mjs.map