frayerjj-frontend 0.8.13 → 0.8.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
@@ -22,10 +22,10 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
-    "ckeditor5": "^47.6.1",
     "cropperjs": "^2.1.0",
     "flag-icons": "^7.5.0",
     "libphonenumber-js": "^1.12.39",
-    "patch-package": "^8.0.1"
+    "patch-package": "^8.0.1",
+    "quill": "^2.0.3"
   }
 }

package/src/init.js

@@ -1,8 +1,7 @@
 import * as bootstrap from 'bootstrap';
-import { ClassicEditor } from 'ckeditor5';
 import { createPopper } from '@popperjs/core';
 import { avatarCropper } from './avatarCropper';
-import { ckeupload } from './ckeupload';
+import { quillUpload } from './quillupload';
 import { fileUpload } from './fileUpload';
 import { hasMany } from './hasMany';
 import { loading } from './loading';
@@ -25,14 +24,13 @@ export const init = (args) => {
     window.loading = loading;
     window.wizard = wizard;
     window.autocomplete = autocomplete;
-    window.ClassicEditor = ClassicEditor;
     loading.init(args?.loadingAnimationStyle ?? 'default');
 
     window.addEventListener('load', () => {
 
         msg.verbose('Page Loaded, Initializing');
         avatarCropper.init();
-        ckeupload.init();
+        quillUpload.init();
         fileUpload.init();
         hasMany.init();
         modal.ajax.init();

package/src/loading.js

@@ -150,7 +150,7 @@ export const loading = {
         let opacity = 9;
         let fade = setInterval(() => {
             el.style.opacity = '.' + opacity--;
-            if (opacity == 0) {
+            if (opacity <= 0) {
                 clearInterval(fade);
                 loading.clear();
             }

package/src/quillupload.js

@@ -0,0 +1,73 @@
+import Quill from 'quill';
+import { msg } from "./msg";
+
+export const quillUpload = {
+    init: () => {
+        const uri = document.querySelector('meta[name="asset-upload"]').getAttribute('content');
+        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+        const selectLocalImage = (quillInstance) => {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'file');
+            input.setAttribute('accept', 'image/*');
+            input.click();
+            input.onchange = () => {
+                const file = input.files[0];
+                if (/^image\//.test(file.type)) {
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    const xhr = new XMLHttpRequest();
+                    xhr.open('POST', uri, true);
+                    xhr.setRequestHeader('X-CSRFToken', token);
+                    xhr.responseType = 'json';
+                    xhr.onload = () => {
+                        if (xhr.status === 200) {
+                            const response = xhr.response;
+                            if (response && response.url) {
+                                const range = quillInstance.getSelection();
+                                quillInstance.insertEmbed(range.index, 'image', response.url);
+                                quillInstance.setSelection(range.index + 1);
+                            } else console.error('Upload failed: No URL returned.');
+                        } else console.error(`Upload failed: ${xhr.statusText}`);
+                    };
+                    xhr.onerror = () => {
+                        console.error('Upload failed: An error occurred during the upload.');
+                    };
+                    xhr.send(formData);
+                } else console.error('Please select an image file.');
+            };
+        };
+        window.editors = {};
+        document.querySelectorAll('.wysiwyg').forEach(editor => {
+            if (editor.getAttribute('data-bs-toggle') === 'tooltip') {
+                const placement = editor.getAttribute('data-bs-placement') || 'top';
+                const title = editor.getAttribute('title') || 'Click to edit';
+                editor.parentElement.setAttribute('data-bs-toggle', 'tooltip');
+                editor.parentElement.setAttribute('data-bs-placement', placement);
+                editor.parentElement.setAttribute('title', title);
+            }
+            const quill = new Quill(editor, {
+                theme: 'snow',
+                modules: {
+                    toolbar: {
+                        container: [[{ 'header': [1, 2, 3, false] }],
+                            ['bold', 'italic', 'link'],
+                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                            ['blockquote', 'code-block'],
+                            ['image'],
+                            ['clean']
+                        ],
+                        handlers: {
+                            'image': () => selectLocalImage(quill)
+                        }
+                    }
+                }
+            });
+            if (editor.tagName.toLowerCase() === 'textarea' && !quill.root.innerHTML.trim()) quill.root.innerHTML = editor.value;
+            quill.on('text-change', () => {
+                editor.value = quill.root.innerHTML;
+            });
+            if (editor.id) window.editors[editor.id] = quill;
+            msg.verbose('Quill Initialized');
+        });
+    }
+};

package/src/scss/styles.scss

@@ -1,6 +1,6 @@
 @import 'bootstrap/scss/bootstrap';
 @import 'flag-icons/css/flag-icons.min.css';
-@import 'ckeditor5/ckeditor5.css';
+@import 'quill/dist/quill.snow.css';
 @import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);
 @import url(//use.typekit.net/oox8pkj.css);
 @import 'fonts';

package/src/ckeupload.js

@@ -1,127 +0,0 @@
-import { 
-    ClassicEditor,
-    Essentials,
-    Autoformat,
-    Bold,
-    Italic,
-    BlockQuote,
-    GeneralHtmlSupport,
-    Heading,
-    Image,
-    ImageUpload,
-    List,
-    Paragraph,
-    Table,
-    TableToolbar,
-    Link,
-    Undo
-} from 'ckeditor5';
-
-import { msg } from "./msg";
-
-export const ckeupload = {
-    init: () => {
-        class CkeUploadAdapter {
-            constructor(loader, uri, token) {
-                this.loader = loader;
-                this.uri = uri;
-                this.token = token;
-            }
-            upload() {
-                return this.loader.file.then(file => new Promise((resolve, reject) => {
-                    this._initRequest();
-                    this._initListeners(resolve, reject, file);
-                    this._sendRequest(file);
-                }));
-            }
-            abort() {
-                if (this.xhr) this.xhr.abort();
-            }
-            _initRequest() {
-                const xhr = this.xhr = new XMLHttpRequest();
-                xhr.open('POST', this.uri, true);
-                xhr.setRequestHeader('X-CSRFToken', this.token);
-                xhr.responseType = 'json';
-            }
-            _initListeners(resolve, reject, file) {
-                const xhr = this.xhr;
-                const loader = this.loader;
-                const genericErrorText = `Couldn't upload file: ${ file.name }.`;
-                xhr.addEventListener( 'error', () => reject(genericErrorText) );
-                xhr.addEventListener( 'abort', () => reject() );
-                xhr.addEventListener( 'load', () => {
-                    const response = xhr.response;
-                    if (!response || response.error)
-                        return reject(response && response.error ? response.error.message : genericErrorText);
-                    resolve({ default: response.url });
-                });
-                if (xhr.upload) {
-                    xhr.upload.addEventListener('progress', evt => {
-                        if (evt.lengthComputable) {
-                            loader.uploadTotal = evt.total;
-                            loader.uploaded = evt.loaded;
-                        }
-                    });
-                }
-            }
-            _sendRequest(file) {
-                const data = new FormData();
-                data.append('file', file);
-                this.xhr.send(data);
-            }
-        };
-
-        function CustomUploadAdapterPlugin(editor) {
-            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
-                const uri = document.querySelector('meta[name="asset-upload"]').getAttribute('content');
-                const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-                return new CkeUploadAdapter(loader, uri, token);
-            };
-        }
-
-        const ckeLicenseKey = document.querySelector('meta[name="cke-license-key"]')?.getAttribute('content') || 'GPL';
-
-        window.editors = [];
-
-        document.querySelectorAll('.wysiwyg').forEach(el => {
-            if (el.getAttribute('data-bs-toggle') === 'tooltip') {
-                let placement = el.getAttribute('data-bs-placement'),
-                    title = el.getAttribute('title');
-                el.parentElement.setAttribute('data-bs-toggle', 'tooltip');
-                el.parentElement.setAttribute('data-bs-placement', placement);
-                el.parentElement.setAttribute('title', title);
-                el.removeAttribute('data-bs-toggle');
-                el.removeAttribute('data-bs-placement');
-                el.removeAttribute('title');
-            }
-            ClassicEditor.create(el, {
-                plugins: [
-                    Essentials, Autoformat, Bold, Italic, BlockQuote, Heading, Image, 
-                    ImageUpload, List, Paragraph, Table, TableToolbar, Link, Undo,
-                    GeneralHtmlSupport, CustomUploadAdapterPlugin
-                ],
-                toolbar: [
-                    'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 
-                    '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo'
-                ],
-                table: {
-                    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
-                },
-                licenseKey: ckeLicenseKey,
-                htmlSupport: {
-                    allow: [{
-                        name: /.*/,
-                        attributes: true,
-                        classes: true,
-                        styles: true
-                    }]
-                }
-            }).then(editor => {
-                window.editors[el.id] = editor;
-                msg.verbose('CKEditor Initialized');
-            }).catch( error => {
-                console.error( 'There was a problem initializing the editor.', error );
-            });
-        }); 
-    }
-}