Moved CKEditor to be plugin

README.md

@@ -116,23 +116,23 @@ RainLoop 1.15 vs SnappyMail
 
 |js/*           	|RainLoop 	|Snappy   	|
 |---------------	|--------:	|--------:	|
-|admin.js        	|2.158.025	|  101.796	|
+|admin.js        	|2.158.025	|  100.608	|
-|app.js          	|4.215.733	|  501.679	|
+|app.js          	|4.215.733	|  495.934	|
 |boot.js         	|  672.433	|    4.726	|
 |libs.js         	|  647.679	|  227.974	|
 |polyfills.js    	|  325.908	|        0	|
 |serviceworker.js	|        0	|      285	|
-|TOTAL           	|8.019.778	|  836.460	|
+|TOTAL           	|8.019.778	|  829.355	|
 
 |js/min/*       	|RainLoop 	|Snappy   	|RL gzip	|SM gzip	|RL brotli	|SM brotli	|
 |---------------	|--------:	|--------:	|------:	|------:	|--------:	|--------:	|
-|admin.min.js    	|  255.514	|   51.172	| 73.899	| 15.082	| 60.674 	| 13.491	|
+|admin.min.js    	|  255.514	|   50.607	| 73.899	| 14.944	| 60.674 	| 13.364	|
-|app.min.js      	|  516.000	|  243.404	|140.430	| 71.302	|110.657 	| 60.167	|
+|app.min.js      	|  516.000	|  240.553	|140.430	| 70.291	|110.657 	| 59.309	|
-|boot.min.js     	|   66.456	|    2.525	| 22.553	|  1.391	| 20.043 	|  1.201	|
+|boot.min.js     	|   66.456	|    2.442	| 22.553	|  1.371	| 20.043 	|  1.178	|
 |libs.min.js     	|  574.626	|  115.877	|177.280	| 42.809	|151.855 	| 38.099	|
 |polyfills.min.js	|   32.608	|        0	| 11.315	|      0	| 10.072 	|      0	|
-|TOTAL           	|1.445.204	|  412.978	|425.477	|130.584	|353.301 	|112.958	|
+|TOTAL           	|1.445.204	|  409.479	|425.477	|129.415	|353.301 	|111.950	|
-|TOTAL (no admin)	|1.189.690	|  361.806	|351.061	|115.502	|292.627 	| 99.467	|
+|TOTAL (no admin)	|1.189.690	|  358.872	|351.061	|114.471	|292.627 	| 98.586	|
 
 For a user its around 66% smaller and faster than traditional RainLoop.
 
@@ -166,12 +166,12 @@ For a user its around 66% smaller and faster than traditional RainLoop.
 
 |css/*       	|RainLoop	|Snappy   	|RL gzip	|SM gzip	|SM brotli	|
 |------------	|-------:	|-------:	|------:	|------:	|--------:	|
-|app.css     	| 340.334	| 107.316	| 46,959	| 18.818	| 16.150	|
+|app.css     	| 340.334	| 107.279	| 46,959	| 18.816	| 16.160	|
-|app.min.css 	| 274.791	|  88.449	| 39.618	| 16.838	| 14.830	|
+|app.min.css 	| 274.791	|  88.402	| 39.618	| 16.831	| 14.827	|
 |boot.css    	|       	|   2.066	|       	|    913	|    742	|
 |boot.min.css	|       	|   1.696	|       	|    818	|    664	|
-|admin.css    	|       	|  48.053	|       	|  9.494	|  8.310	|
+|admin.css    	|       	|  46.393	|       	|  9.237	|  8.073	|
-|admin.min.css	|       	|  38.740	|       	|  8.441	|  7.501	|
+|admin.min.css	|       	|  37.306	|       	|  8.191	|  7.282	|
 
 
 ### Squire vs CKEditor
@@ -189,8 +189,7 @@ Still TODO:
 
 CKEditor including the 7 asset requests (css,language,plugins,icons) is 633.46 KB / 180.47 KB (gzip).
 
-To use the old CKEditor, you must enable it in /data/\_data\_/\_default\_/configs/application.ini
+To use the old CKEditor, you must install the plugin.
-in the [labs] section add/edit: `use_ck_html_editor = On`
 
 ### PHP73 branch
 

dev/Common/Html.js

@@ -1,5 +1,3 @@
-import { createCKEditor } from 'External/CKEditor.js';
-
 const
 	htmlre = /[&<>"']/g,
 	htmlmap = {
@@ -180,11 +178,11 @@ class HtmlEditor {
 				this.onReady && this.onReady();
 			};
 
-			if (window.CKEDITOR) {
+			if (rl.createWYSIWYG) {
-				this.editor = createCKEditor(this.element);
+				this.editor = rl.createWYSIWYG(this.element, onReady);
-				this.editor.on('instanceReady', onReady);
+			}
-			} else {
+			if (!this.editor) {
-				this.editor = new SquireUI(this.element, this.editor);
+				this.editor = new SquireUI(this.element);
 				setTimeout(onReady,1);
 			}
 

dev/External/CKEditor.js

@@ -1,79 +0,0 @@
-export function createCKEditor(element)
-{
-	const language = (rl.settings.get('Language') || 'en').toLowerCase(),
-
-		htmlEditorLangsMap = {
-			'ar_sa': 'ar-sa',
-			'pt_br': 'pt-br',
-			'zh_cn': 'zh-cn',
-		};
-
-	const editor = CKEDITOR.appendTo(element, {
-		title: false,
-		stylesSet: false,
-//		customConfig: '',
-//		contentsCss: '',
-		toolbarGroups: [
-			{ name: 'spec' },
-			{ name: 'styles' },
-			{ name: 'basicstyles', groups: ['basicstyles', 'cleanup', 'bidi'] },
-			{ name: 'colors' },
-			{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
-			{ name: 'links' },
-			{ name: 'insert' },
-			{ name: 'document', groups: ['mode', 'document', 'doctools'] },
-			{ name: 'others' }
-		],
-
-		removePlugins: 'liststyle' + (rl.settings.app('allowHtmlEditorBitiButtons') ? '' : ',bidi'),
-		removeButtons: 'Format,Undo,Redo,Cut,Copy,Paste,Anchor,Strike,Subscript,Superscript,Image,SelectAll'
-			+ (rl.settings.app('allowHtmlEditorSourceButton') ? '' : ',Source'),
-		removeDialogTabs: 'link:advanced;link:target;image:advanced;images:advanced',
-
-		extraPlugins: 'plain,signature',
-
-		allowedContent: true,
-		extraAllowedContent: true,
-
-		fillEmptyBlocks: false,
-//		ignoreEmptyParagraph: true,
-		disableNativeSpellChecker: false,
-
-		colorButton_enableAutomatic: false,
-//		colorButton_enableMore: true,
-
-		font_defaultLabel: 'Arial',
-		fontSize_defaultLabel: '13',
-		fontSize_sizes: '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px',
-
-		enterMode: CKEDITOR.ENTER_BR,
-		shiftEnterMode: CKEDITOR.ENTER_P,
-		language: htmlEditorLangsMap[language] || language.substr(0,2)
-	});
-
-	editor.on('key', event => !(event && event.data && 'Tab' == event.data.key));
-
-	editor.on('drop', event => {
-		const dt = event.data.dataTransfer,
-			id = dt.id,
-			file = dt.getFilesCount() ? dt.getFile(0) : 0;
-		if (file && id && file.type && file.type.match(/^image/i)) {
-			const imageId = `[img=${id}]`,
-				reader = new FileReader();
-
-			reader.onloadend = () => {
-				if (reader.result && 'wysiwyg' === editor.mode) {
-					try {
-						editor.setData(editor.getData().replace(imageId, `<img src="${reader.result}"/>`));
-					} catch (e) {} // eslint-disable-line no-empty
-				}
-			};
-
-			reader.readAsDataURL(file);
-
-			dt.setData('text/html', imageId);
-		}
-	});
-
-	return editor;
-}

dev/Styles/@Main.less

@@ -67,6 +67,3 @@
 @import "Animations.less";
 
 @import "_End.less";
-/*
-@import "_CkeFix.less";
-*/

dev/Styles/_CkeFix.less

@@ -1,213 +0,0 @@
-/*.cke_button__sourcedialog_label {
-	display: none !important;
-}*/
-
-.cke_chrome {
-	border: 1px solid #ccc !important;
-}
-
-.cke_toolgroup {
-	padding-right: 0 !important;
-	background: #FBFBFB !important;
-}
-
-.cke_toolgroup, .cke_combo_button {
-	border: 1px solid #A6A6A6 !important;
-}
-
-.cke_top {
-	padding: 2px;
-	box-shadow: none !important;
-	border-bottom: 1px solid #b6b6b6 !important;
-	background: #F0F0F0 !important;
-}
-
-.cke_combo_on a.cke_combo_button,
-.cke_combo_off a.cke_combo_button:hover,
-.cke_combo_off a.cke_combo_button:focus,
-.cke_combo_off a.cke_combo_button:active {
-	padding: 1px !important;
-	margin-left: 0 !important;
-}
-
-.cke_toolgroup a.cke_button:last-child:after,
-.cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after {
-	border: none !important;
-	height: 0 !important;
-	width: 0 !important;
-	margin: 0 !important;
-	padding: 0 !important;
-}
-
-.cke_button_on {
-	background: #ddd !important;
-}
-
-.cke_combo {
-	margin-top: 1px !important;
-}
-
-.cke_combo__fontsize {
-	margin-left: 3px !important;
-	.cke_combo_text {
-		width: 40px !important;
-	}
-}
-
-.cke_combo_text {
-	line-height: 24px !important;
-	padding-left: 8px !important;
-}
-
-.cke_combo_button {
-	background: #FBFBFB !important;
-}
-
-.cke_source {
-	font-family: var(--fontMono) !important;
-	padding: 10px !important;
-	padding-right: 0 !important;
-	box-shadow: none !important;
-}
-
-.cke_plain {
-
-	background-color: #fff;
-	outline: none;
-	overflow: auto;
-	z-index: 1;
-	margin: 0;
-	border: 0;
-
-	padding: 10px;
-	padding-right: 0;
-	white-space: pre-wrap;
-	font-family: var(--fontMono), monospace;
-	font-size: 13px;
-	line-height: 16px;
-	color: #333;
-	resize: none;
-
-	border-radius: 0;
-	box-shadow: none;
-	box-sizing: border-box;
-}
-
-.cke_plain:focus, .cke_source:focus {
-	border: 0;
-}
-
-.b-compose .cke_chrome {
-	border-right: 0;
-	border-left: 0;
-	border-bottom: 0;
-	box-shadow: none;
-}
-
-.cke_wysiwyg_div {
-
-	padding: 10px !important;
-	font-family: var(--fontSans);
-	font-size: 13px;
-	line-height: 16px;
-	color: #333;
-
-	ul {
-		padding-left: 40px;
-		li {
-			list-style-type: disc !important;
-		}
-	}
-
-	ol {
-		padding-left: 40px;
-		li {
-			list-style-type: decimal !important;
-		}
-	}
-
-	pre, code {
-		margin: 0;
-		padding: 0;
-		background: #fff;
-		border: none;
-		border-radius: 0;
-		font-family: var(--fontMono);
-		display: block;
-		word-break: normal;
-		word-wrap: break-word;
-		background-color: #f9f9f9;
-	}
-
-	code {
-		display: inline;
-		padding: 2px 5px;
-	}
-
-	pre {
-		padding: 5px 10px;
-		border-radius: 5px;
-		background-color: #f9f9f9;
-	}
-
-	pre > code {
-		padding: 0;
-	}
-
-	blockquote {
-		border: 0;
-		border-left: solid 2px #444;
-		margin: 5px 0 5px 5px;
-		padding-left: 5px;
-	}
-
-	blockquote p {
-		margin: 0 0 10px;
-		font-size: 14px;
-		line-height: 20px;
-	}
-
-	img {
-		vertical-align: bottom;
-	}
-
-	a {
-		color: blue;
-		text-decoration: underline;
-
-		&:visited {
-			color: #609;
-		}
-		&:active {
-			color: red;
-		}
-	}
-}
-
-.cke_dialog {
-
-	a:hover {
-		text-decoration: none;
-	}
-
-	.cke_dialog_ui_labeled_content {
-		margin-top: 5px;
-		margin-bottom: 5px;
-	}
-
-	.cke_dialog_ui_input_select, .cke_dialog_ui_input_text, .cke_dialog_ui_input_textarea {
-
-		box-shadow: none;
-		border-radius: 2px;
-
-		&:focus {
-			outline: 0;
-			border: 1px solid #999;
-		}
-	}
-
-	.cke_dialog_ui_input_select, .cke_dialog_ui_input_text {
-		height: 25px;
-		line-height: 25px;
-	}
-}

dev/boot.js

@@ -153,12 +153,6 @@ win.rl = {
 			.then(() => Promise.all([loadScript(appData.TemplatesLink), loadScript(appData.LangLink)]))
 			.then(() => loadScript(appData.StaticAppJsLink))
 			.then(() => appData.PluginsLink ? loadScript(appData.PluginsLink) : Promise.resolve())
-			.then(() =>
-				// Enable the old CKEditor?
-				(appData.Auth && appData.StaticEditorJsLink)
-					? loadScript(appData.StaticEditorJsLink)
-					: Promise.resolve()
-			)
 			.then(() => win.__APP_BOOT ? win.__APP_BOOT(showError) : showError())
 			.catch(e => {
 				showError();

plugins/ckeditor/ckeditor.js

@@ -0,0 +1,93 @@
+(rl => {
+	if (rl) {
+		const path = (rl.settings.app('webVersionPath') || 'snappymail/v/' + rl.settings.app('version') + '/'),
+			script = document.createElement('script');
+		script.src = path + 'static/ckeditor/ckeditor.js';
+		document.head.append(script);
+
+		rl.createWYSIWYG = (container, onReady) => {
+			if (!window.CKEDITOR) {
+				return null;
+			}
+
+			const
+				language = (rl.settings.get('Language') || 'en').toLowerCase(),
+				htmlEditorLangsMap = {
+					'ar_sa': 'ar-sa',
+					'pt_br': 'pt-br',
+					'zh_cn': 'zh-cn',
+				},
+				editor = CKEDITOR.appendTo(container, {
+					title: false,
+					stylesSet: false,
+//					customConfig: '',
+//					contentsCss: '',
+					toolbarGroups: [
+						{ name: 'spec' },
+						{ name: 'styles' },
+						{ name: 'basicstyles', groups: ['basicstyles', 'cleanup', 'bidi'] },
+						{ name: 'colors' },
+						{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
+						{ name: 'links' },
+						{ name: 'insert' },
+						{ name: 'document', groups: ['mode', 'document', 'doctools'] },
+						{ name: 'others' }
+					],
+
+					removePlugins: 'liststyle' + (rl.settings.app('allowHtmlEditorBitiButtons') ? '' : ',bidi'),
+					removeButtons: 'Format,Undo,Redo,Cut,Copy,Paste,Anchor,Strike,Subscript,Superscript,Image,SelectAll'
+						+ (rl.settings.app('allowHtmlEditorSourceButton') ? '' : ',Source'),
+					removeDialogTabs: 'link:advanced;link:target;image:advanced;images:advanced',
+
+					extraPlugins: 'plain,signature',
+
+					allowedContent: true,
+					extraAllowedContent: true,
+
+					fillEmptyBlocks: false,
+//					ignoreEmptyParagraph: true,
+					disableNativeSpellChecker: false,
+
+					colorButton_enableAutomatic: false,
+//					colorButton_enableMore: true,
+
+					font_defaultLabel: 'Arial',
+					fontSize_defaultLabel: '13',
+					fontSize_sizes: '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px',
+
+					enterMode: CKEDITOR.ENTER_BR,
+					shiftEnterMode: CKEDITOR.ENTER_P,
+					language: htmlEditorLangsMap[language] || language.substr(0,2)
+				});
+
+			editor.on('key', event => !(event && event.data && 'Tab' == event.data.key));
+
+			editor.on('drop', event => {
+				const dt = event.data.dataTransfer,
+					id = dt.id,
+					file = dt.getFilesCount() ? dt.getFile(0) : 0;
+				if (file && id && file.type && file.type.match(/^image/i)) {
+					const imageId = `[img=${id}]`,
+						reader = new FileReader();
+
+					reader.onloadend = () => {
+						if (reader.result && 'wysiwyg' === editor.mode) {
+							try {
+								editor.setData(editor.getData().replace(imageId, `<img src="${reader.result}"/>`));
+							} catch (e) {} // eslint-disable-line no-empty
+						}
+					};
+
+					reader.readAsDataURL(file);
+
+					dt.setData('text/html', imageId);
+				}
+			});
+
+			editor.on('instanceReady', onReady);
+
+			return editor;
+		}
+	}
+
+})(window.rl);

plugins/ckeditor/index.php

@@ -0,0 +1,38 @@
+<?php
+
+class CKEditorPlugin extends \RainLoop\Plugins\AbstractPlugin
+{
+	const
+		NAME = 'CKEditor',
+		VERSION = '2.0',
+		RELEASE = '2021-03-25',
+		REQUIRED = '2.4.2',
+		DESCRIPTION = 'Use CKEditor instead of Squire as WYSIWYG';
+
+	public function Init() : void
+	{
+		$path = APP_VERSION_ROOT_PATH . 'static/ckeditor';
+
+		// Apache AH00037: Symbolic link not allowed or link target not accessible
+		// That's why we clone the source
+		if (!\is_dir($path)/* && !\is_link($path)*/) {
+			// $active = \symlink(__DIR__ . '/src', $path);
+			\mkdir($path, 0755);
+			$iterator = new \RecursiveIteratorIterator(
+				new \RecursiveDirectoryIterator(__DIR__ . '/src', \RecursiveDirectoryIterator::SKIP_DOTS),
+				\RecursiveIteratorIterator::SELF_FIRST
+			);
+			foreach ($iterator as $item) {
+				if ($item->isDir()) {
+					\mkdir($path . DIRECTORY_SEPARATOR . $iterator->getSubPathName());
+				} else {
+					\copy($item, $path . DIRECTORY_SEPARATOR . $iterator->getSubPathName());
+				}
+			}
+		}
+
+		if (\is_file("{$path}/ckeditor.js")) {
+			$this->addJs('ckeditor.js');
+		}
+	}
+}

plugins/ckeditor/src/build-config.js

@@ -1,4 +1,4 @@
-/**
+/**
  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or http://ckeditor.com/license
  */

plugins/ckeditor/src/ckeditor.js

@@ -1,4 +1,4 @@
-/*
+/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
 */

plugins/ckeditor/src/config.js

@@ -1,4 +1,4 @@
-/**
+/**
  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or http://ckeditor.com/license
  */