frayerjj-frontend 0.1.48 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.1.48",
+  "version": "0.1.59",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
@@ -14,8 +14,7 @@
   "author": "Joshua Frayer",
   "license": "MIT",
   "dependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^44.3.0",
-    "@ckeditor/ckeditor5-editor-inline": "^44.3.0",
+    "@ckeditor/ckeditor5-build-classic": "^44.3.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3"
   }

package/src/ckeupload.js

@@ -1,56 +1,47 @@
-import { message } from './message';
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+import { message } from "./message";
 
 export const ckeupload = {
+    adapter: editor => {
+        editor.plugins.get('FileRepository').createUploadAdapter = loader => {
+            return new CkeUploadAdapter(loader, editor.config._config.extraParams.uri, editor.config._config.extraParams.token);
+        };
+    },
     init: () => {
-        // Ensure ClassicEditor is available
-        if (typeof window.ClassicEditor === 'undefined') {
-            message.warn('CKEditor not loaded.');
-            return;
-        }
-
         class CkeUploadAdapter {
             constructor(loader, uri, token) {
                 this.loader = loader;
                 this.uri = uri;
                 this.token = token;
-                message.verbose('CKEditor Upload Adapter Initialized');
             }
-
             upload() {
-                return this.loader.file
-                    .then(file => new Promise((resolve, reject) => {
-                        this._initRequest();
-                        this._initListeners(resolve, reject, file);
-                        this._sendRequest(file);
-                    }));
+                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 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) {
+                    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) {
@@ -60,44 +51,35 @@ export const ckeupload = {
                     });
                 }
             }
-
             _sendRequest(file) {
                 const data = new FormData();
                 data.append('file', file);
                 this.xhr.send(data);
             }
-        }
-
-        // Register the upload adapter plugin
-        window.CkeUploadAdapterPlugin = function (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);
-            };
         };
-
-        // Initialize editors
+        window.editors = [];
         document.querySelectorAll('.wysiwyg').forEach(el => {
             ClassicEditor.create(el, {
                 licenseKey: 'GPL',
                 htmlSupport: {
-                    allow: [
-                        {
-                            name: /.*/,
-                            attributes: true,
-                            classes: true,
-                            styles: true
-                        }
-                    ]
+                    allow: [{
+                        name: /.*/,
+                        attributes: true,
+                        classes: true,
+                        styles: true
+                    }]
+                },
+                extraParams: {
+                    uri: document.querySelector('meta[name="asset-upload"]').getAttribute('content'), 
+                    token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                 },
-                extraPlugins: [window.CkeUploadAdapterPlugin]
+                extraPlugins: [ CkeUploadAdapter ]
             }).then(editor => {
-                if (!window.editors) window.editors = [];
                 window.editors[el.id] = editor;
-            }).catch(error => {
-                console.error('There was a problem initializing the editor.', error);
+                message.verbose('CKEditor Initialized');
+            }).catch( error => {
+                console.error( 'There was a problem initializing the editor.', error );
             });
-        });
+        }); 
     }
-};
+}

package/src/index.js

@@ -1,24 +1,3 @@
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import { ajax } from './ajax';
 import { init } from './init';
-import { loading } from './loading';
-import { message } from './message';
-import { modal } from './modal';
-import { session } from './session';
-import { validate } from './validate';
-import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import InlineEditorBase from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
 
-class ClassicEditor extends ClassicEditorBase {}
-class InlineEditor extends InlineEditorBase {}
-
-const plugins = [];
-const config = {};
-
-ClassicEditor.builtinPlugins = plugins;
-ClassicEditor.defaultConfig = config;
-
-InlineEditor.builtinPlugins = plugins;
-InlineEditor.defaultConfig = config;
-
-export { ClassicEditor, InlineEditor, ajax, init, loading, message, modal, session, validate };
+export { init };

package/src/init.js

@@ -6,6 +6,8 @@ import { validate } from './validate';
 import { loading } from './loading';
 import { ajax } from './ajax';
 import { session } from './session';
+import { ckeupload } from './ckeupload';
+import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';
 
 export const init = () => {
 
@@ -17,6 +19,7 @@ export const init = () => {
     window.session = session;
     window.validate = validate;
     window.loading = loading;
+    window.ClassicEditor = ClassicEditor;
     loading.init();
     
     window.addEventListener('load', () => {
@@ -24,6 +27,7 @@ export const init = () => {
         message.verbose('Page Loaded, Initializing');
         validate.init();
         modal.ajax.init();
+        ckeupload.init();
         
         // Updates the id in the form action inside a modal. Used for delete confirm and edit modals.
         document.querySelectorAll('.modal-uuid-update').forEach(el => {