finalsite · nickdebaisefinalsite · Aug 19, 2022 · Aug 19, 2022 · Aug 19, 2022 · Aug 19, 2022
diff --git a/apps/demo-angular/package.json b/apps/demo-angular/package.json
@@ -9,18 +9,19 @@
 		"@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
 		"@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
 		"@angular/router": "file:../../node_modules/@angular/router",
+		"@finalsite/rich-text-editor": "file:../../dist/packages/rich-text-editor",
 		"@nativescript/angular": "file:../../node_modules/@nativescript/angular",
 		"@nativescript/core": "file:../../node_modules/@nativescript/core",
+		"@nota/nativescript-webview-ext": "^8.0.2",
 		"nativescript-theme-core": "file:../../node_modules/nativescript-theme-core",
 		"reflect-metadata": "file:../../node_modules/reflect-metadata",
 		"rxjs": "file:../../node_modules/rxjs",
-		"zone.js": "file:../../node_modules/zone.js",
-		"@finalsite/rich-text-editor": "file:../../dist/packages/rich-text-editor"
+		"zone.js": "file:../../node_modules/zone.js"
 	},
 	"devDependencies": {
 		"@angular/compiler-cli": "file:../../node_modules/@angular/compiler-cli",
 		"@nativescript/android": "7.0.1",
-		"@nativescript/ios": "7.2.0",
+		"@nativescript/ios": "^8.3.3",
 		"@nativescript/webpack": "~4.1.0",
 		"@ngtools/webpack": "file:../../node_modules/@ngtools/webpack",
 		"typescript": "~4.0.0"

diff --git a/apps/demo-angular/src/app.module.ts b/apps/demo-angular/src/app.module.ts
@@ -1,6 +1,8 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { NativeScriptModule } from '@nativescript/angular';
 
+import {WebViewExtModule} from "@nota/nativescript-webview-ext/angular"
+
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './home.component';
@@ -9,6 +11,6 @@ import { HomeComponent } from './home.component';
 	schemas: [NO_ERRORS_SCHEMA],
 	declarations: [AppComponent, HomeComponent],
 	bootstrap: [AppComponent],
-	imports: [NativeScriptModule, AppRoutingModule],
+	imports: [NativeScriptModule, AppRoutingModule, WebViewExtModule],
 })
 export class AppModule {}
diff --git a/apps/demo-angular/src/assets/html/default.html b/apps/demo-angular/src/assets/html/default.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
+		<base href="/" />
+		<title>CKEditor</title>
+		<style>
+			html,
+			body {
+				margin: 0;
+				padding: 0;
+				min-height: 100%;
+				width: 100%;
+			}
+
+			#editor {
+				margin: 0 10px;
+				padding: 0;
+			}
+
+			.cke_skin_kama span.cke_browser_webkit,
+			.cke_skin_kama span.cke_browser_gecko18 {
+				outline: none !important;
+			}
+
+			.cke_float {
+				display: none !important;
+			}
+
+			[contenteditable]:focus {
+				outline: 2px solid transparent;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="editor" contenteditable="true"></div>
+	</body>
+</html>
diff --git a/apps/demo-angular/src/assets/js/ckeditor4.js b/apps/demo-angular/src/assets/js/ckeditor4.js
@@ -0,0 +1,165 @@
+// bridge interface for a regular content editable div
+let nsWebViewBridge;
+const waitCKEDITOR = setInterval(function () {
+	if (!window.CKEDITOR) return;
+	clearInterval(waitCKEDITOR);
+
+	nsWebViewBridge = window.nsWebViewBridge;
+	if (nsWebViewBridge) {
+		initBridge();
+	} else {
+		window.addEventListener('ns-bridge-ready', function (e) {
+			nsWebViewBridge = e.detail;
+			initBridge();
+		});
+	}
+}, 10);
+
+const insertHeadScript = function (src) {
+	var externalScript = document.createElement('script');
+	externalScript.setAttribute('src', src);
+	document.head.appendChild(externalScript);
+};
+
+const insertHeadCSS = function (src) {
+	var externalCSS = document.createElement('link');
+	externalCSS.setAttribute('rel', 'stylesheet');
+	externalCSS.setAttribute('type', 'text/css');
+	externalCSS.setAttribute('href', src);
+	document.head.appendChild(externalCSS);
+};
+
+let currentSavedSelection;
+const saveSelectionPromise = function () {
+	currentSavedSelection = CKEDITOR.instances.editor.getSelection().createBookmarks();
+	return Promise.resolve();
+};
+
+const restoreSelectionPromise = function () {
+	CKEDITOR.instances.editor.getSelection().selectBookmarks(currentSavedSelection);
+	return Promise.resolve();
+};
+
+const getHtmlPromise = function () {
+	return Promise.resolve(CKEDITOR.instances.editor.getData());
+};
+
+function initBridge() {
+	// android can end up reloading the html a lot and end up in a weird state somehow :/
+	if (CKEDITOR.instances.editor) CKEDITOR.instances.editor.destroy();
+
+	const editorDiv = document.getElementById('editor');
+
+	// disable UI things that we're replacing with native buttons
+	const editorInstance = CKEDITOR.inline('editor', {
+		extraPlugins: 'justify,indentblock,indentlist',
+		removePlugins: 'liststyle,tableselection,tabletools,tableresize,contextmenu,toolbar',
+		allowedContent: true,
+		toolbar: [],
+	});
+
+	nsWebViewBridge.on('sourceChanged', function (data) {
+		editorInstance.setData(data);
+	});
+
+	nsWebViewBridge.on('done', function (data) {
+		editorInstance.focusManager.blur(true);
+		editorInstance.getSelection().removeAllRanges();
+		editorDiv.blur();
+	});
+
+	/*
+	 * handle regular commands that dont take arguments
+	 */
+	const CKE_COMMAND_MAP = {
+		insertorderedlist: 'numberedlist',
+		insertunorderedlist: 'bulletedlist',
+	};
+	const commonListeners = ['undo', 'redo', 'removeFormat', 'bold', 'underline', 'italic', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', 'outdent', 'indent'];
+	commonListeners.forEach((event) => {
+		nsWebViewBridge.on(event, (value) => {
+			value = value || null;
+			event = CKE_COMMAND_MAP[event] || event;
+			editorInstance.execCommand(event, false, value);
+		});
+	});
+
+	/*
+	 * Commands that take an argument are usually just CKEDITOR styles applied to selected text
+	 */
+	const CKE_COMMAND_STYLE_MAP = {
+		formatblock: (value) => new CKEDITOR.style({ element: value }),
+		createLink: (value) => new CKEDITOR.style({ element: 'a', attributes: { href: value }, type: CKEDITOR.STYLE_INLINE }),
+		backcolor: (value) => new CKEDITOR.style({ element: 'span', styles: { 'background-color': value } }),
+		fontname: (value) => {
+			return new CKEDITOR.style({
+				element: 'span',
+				styles: { 'font-family': value },
+				overrides: [
+					{
+						element: 'font',
+						attributes: { face: null },
+					},
+				],
+			});
+		},
+		fontsize: (value) => {
+			return new CKEDITOR.style({
+				element: 'span',
+				styles: { 'font-size': value },
+				overrides: [
+					{
+						element: 'font',
+						attributes: { size: null },
+					},
+				],
+			});
+		},
+		forecolor: (value) => {
+			return new CKEDITOR.style({
+				element: 'span',
+				styles: { color: value },
+				overrides: [
+					{
+						element: 'font',
+						attributes: { color: null },
+					},
+				],
+			});
+		},
+	};
+
+	Object.keys(CKE_COMMAND_STYLE_MAP).forEach((event) => {
+		nsWebViewBridge.on(event, (value) => {
+			if (!value) return;
+			editorInstance.applyStyle(CKE_COMMAND_STYLE_MAP[event](value));
+		});
+	});
+
+	editorInstance.on('instanceReady', () => {
+		editorInstance.on(
+			'doubleclick',
+			function (evt) {
+				// TODO: emit this to the native side maybe?
+				return false;
+			},
+			null,
+			null,
+			1
+		); // last param gives this priority
+
+		editorInstance.on('focus', function (event) {
+			nsWebViewBridge.emit('focus');
+		});
+
+		editorInstance.on('blur', function (event) {
+			nsWebViewBridge.emit('blur');
+		});
+
+		editorInstance.on('change', function (event) {
+			nsWebViewBridge.emit('input', editorInstance.getData());
+		});
+
+		nsWebViewBridge.emit('ready');
+	});
+}