@webhandle/ckeditor-4 1.0.0

package/initialize-webhandle-component.mjs

@@ -0,0 +1,173 @@
+import createInitializeWebhandleComponent from "@webhandle/initialize-webhandle-component/create-initialize-webhandle-component.mjs"
+import ComponentManager from "@webhandle/initialize-webhandle-component/component-manager.mjs"
+import path from "node:path"
+
+const initializeWebhandleComponent = createInitializeWebhandleComponent()
+
+initializeWebhandleComponent.componentName = '@webhandle/ckeditor-4'
+initializeWebhandleComponent.componentDir = import.meta.dirname
+initializeWebhandleComponent.defaultConfig = {
+	"publicFilesPrefix": '/' + initializeWebhandleComponent.componentName + "/files"
+	, "alwaysProvideResources": false
+}
+initializeWebhandleComponent.staticFilePath = 'public'
+initializeWebhandleComponent.templatePath = 'views'
+
+
+initializeWebhandleComponent.setup = async function(webhandle, config) {
+	let manager = new ComponentManager()
+	manager.config = config
+	
+	let base = webhandle.projectRoot
+	try {
+		let info = webhandle.sinks.project.getFullFileInfo('node_modules/ckeditor4')
+	}
+	catch(e) {
+		base = initializeWebhandleComponent.componentDir
+	}
+	manager.staticPaths.push(
+		webhandle.addStaticDir(
+			path.join(base, 'node_modules/ckeditor4')
+		, {
+			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+			, fixedSetOfFiles: true
+		})
+	)
+	manager.staticPaths.push(
+		webhandle.addStaticDir(
+			path.join(base, 'node_modules/@webhandle/ckeditor-multi-widget-panel/public/ckeditor')
+		, {
+			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+			, fixedSetOfFiles: true
+		})
+	)
+	manager.staticPaths.push(
+		webhandle.addStaticDir(
+			path.join(base, 'node_modules/@dankolz/picture-ckeditor-plugin/public/ckeditor')
+		, {
+			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+			, fixedSetOfFiles: true
+		})
+	)
+	manager.staticPaths.push(
+		webhandle.addStaticDir(
+			path.join(base, 'node_modules/@dankolz/template-ckeditor-plugin/public/ckeditor')
+		, {
+			urlPrefix: '/@webhandle/ckeditor-4/ck-files'
+			, fixedSetOfFiles: true
+		})
+	)
+
+	manager.staticPaths.push(
+		webhandle.addStaticDir(
+			path.join(initializeWebhandleComponent.componentDir, 'public')
+		, {
+			urlPrefix: '/@webhandle/ckeditor-4/files'
+			, fixedSetOfFiles: true
+		})
+	)
+
+	manager.addExternalResources = function(externalResourceManager) {
+		externalResourceManager.provideResource({
+			mimeType: 'application/javascript'
+			, url: '/@webhandle/ckeditor-4/ck-files/ckeditor.js'
+			, name: 'ckeditor4'
+			, resourceType: 'module'
+		})
+		externalResourceManager.includeResource({
+			mimeType: 'application/javascript'
+			, url: '/@webhandle/ckeditor-4/files/js/variables.mjs'
+			, resourceType: 'module'
+		})
+		externalResourceManager.includeResource({
+			mimeType: 'application/javascript'
+			, url: '/@webhandle/ckeditor-4/files/js/load.mjs'
+			, resourceType: 'module'
+		})
+		// externalResourceManager.includeResource({
+		// 	mimeType: 'text/css'
+		// 	, url: '/@webhandle/ckeditor-4/files/styles.css'
+		// })
+	}
+
+	webhandle.addTemplate(initializeWebhandleComponent.componentName + '/addExternalResources', (data) => {
+		try {
+			let externalResourceManager = initializeWebhandleComponent.getExternalResourceManager(data)
+			manager.addExternalResources(externalResourceManager)
+			let resources =  externalResourceManager.render()
+			return resources
+		}
+		catch(e) {
+			console.log(e)
+		}
+		return ""
+	})
+	
+	// webhandle.routers.preDynamic.use((req, res, next) => {
+	// 	if(config.alwaysProvideResources || !initializeWebhandleComponent.supportsMultipleImportMaps(req)) {
+	// 		manager.addExternalResources(res.locals.externalResourceManager)
+	// 	}
+	// 	next()
+	// })
+	
+	// manager.addExternalResources = (externalResourceManager, options) => {
+	// 	externalResourceManager.includeResource({
+	// 		mimeType: 'text/css'
+	// 		, url: config.publicFilesPrefix + '/css/styles.css'
+	// 	})
+
+	// 	externalResourceManager.provideResource({
+	// 		url: config.publicFilesPrefix + '/js/functionality.mjs'
+	// 		, mimeType: 'application/javascript'
+	// 		, resourceType: 'module'
+	// 		, name: initializeWebhandleComponent.componentName
+	// 	})
+	// }
+
+	// webhandle.addTemplate(initializeWebhandleComponent.componentName + '/addExternalResources', (data) => {
+	// 	let externalResourceManager = initializeWebhandleComponent.getExternalResourceManager(data)
+	// 	manager.addExternalResources(externalResourceManager)
+	// })
+
+	// webhandle.addTemplate(initializeWebhandleComponent.componentName + '/doTheThing', (data) => {
+	// 	try {
+	// 		let externalResourceManager = initializeWebhandleComponent.getExternalResourceManager(data)
+	// 		manager.addExternalResources(externalResourceManager)
+
+	// 		let resources = externalResourceManager.render()
+	// 		let action = `
+	// <script type="module">
+	// 		import { component } from "${initializeWebhandleComponent.componentName}"
+	// 		component()
+	// </script>`
+
+	// 		return resources + action
+	// 	}
+	// 	catch(e) {
+	// 		console.error(e)
+	// 	}
+	// })
+
+	// // Allow access to the component and style code
+	// let filePath = path.join(initializeWebhandleComponent.componentDir, initializeWebhandleComponent.staticFilePath)
+	// manager.staticPaths.push(
+	// 	webhandle.addStaticDir(
+	// 		filePath,
+	// 		{
+	// 			urlPrefix: config.publicFilesPrefix
+	// 			, fixedSetOfFiles: true
+	// 		}
+	// 	)
+	// )
+	
+	// webhandle.addTemplateDir(
+	// 	path.join(initializeWebhandleComponent.componentDir, initializeWebhandleComponent.templatePath)
+	// 	, {
+	// 		immutable: true
+	// 	}
+	// )
+
+	return manager
+}
+
+export default initializeWebhandleComponent

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@webhandle/ckeditor-4",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "run-webhandle ./test.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/EmergentIdeas/webhandle-ckeditor-4.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "bugs": {
+    "url": "https://github.com/EmergentIdeas/webhandle-ckeditor-4/issues"
+  },
+  "homepage": "https://github.com/EmergentIdeas/webhandle-ckeditor-4#readme",
+  "dependencies": {
+    "@dankolz/picture-ckeditor-plugin": "^1.0.7",
+    "@dankolz/template-ckeditor-plugin": "^1.0.1",
+    "@webhandle/ckeditor-multi-widget-panel": "^1.0.2",
+    "@webhandle/initialize-webhandle-component": "^1.0.4",
+    "ckeditor4": "4.22"
+  }
+}

package/pages/index.tri

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	__externalResourceManager.render()__
+
+
+</head>
+
+<body>
+
+	__externalResourceManager::@webhandle/ckeditor-4/addExternalResources__
+	<div id="editor" style="height: 500px; border: solid 1px black;">
+
+	</div>
+	<textarea class="ckeditor" id="teditor"></textarea>
+
+	<script type="module">
+		let id = 'editor'
+		
+		let editorEl = document.querySelector('#' + id)
+		editorEl.setAttribute('contenteditable', 'true')
+		editorEl.classList.add('page-editor-editable')
+		
+		let editorOptions = {
+			on: {
+				change: function(event) {
+					console.log('change')
+				},
+				blur: function( event ) {
+					console.log('blur')
+				}
+			}
+			, customConfig: '/@webhandle/ckeditor-4/files/conf/std-config.js'
+		}
+		CKEDITOR.inline(id, editorOptions) 
+		
+		id = 'teditor'
+		editorEl = document.querySelector('#' + id)
+		editorOptions = {
+			on: {
+				change: function(event) {
+					// console.log(event)
+					// console.log(event.editor.getData())
+					document.querySelector('#' + id).value = event.editor.getData()
+				},
+				blur: function( event ) {
+					console.log(event)
+				}
+			}
+			, customConfig: '/@webhandle/ckeditor-4/files/conf/std-config.js'
+		}
+		CKEDITOR.replace(id, editorOptions) 
+	</script>
+
+
+
+
+
+	__externalResourceManager.render()__
+</body>
+
+
+</html>

package/public/conf/std-config.js

@@ -0,0 +1,69 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+CKEDITOR.editorConfig = function( config ) {
+	// Define changes to default configuration here.
+	// For complete reference see:
+	// http://docs.ckeditor.com/#!/api/CKEDITOR.config
+
+	// The toolbar groups arrangement, optimized for two toolbar rows.
+	config.toolbarGroups = [
+		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
+		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
+		{ name: 'links' },
+		{ name: 'insert' },
+		{ name: 'forms' },
+		{ name: 'tools' },
+		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
+		{ name: 'others' },
+		'/',
+		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
+		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
+		{ name: 'styles' },
+		{ name: 'colors' }
+	];
+
+	// Remove some buttons provided by the standard plugins, which are
+	// not needed in the Standard(s) toolbar.
+	config.removeButtons = 'Underline,Subscript,Superscript';
+
+	config.removePlugins = 'image';
+
+	// Set the most common block elements.
+	config.format_tags = 'p;h1;h2;h3;pre';
+
+	// Simplify the dialog windows.
+	// config.removeDialogTabs = 'image:advanced;link:advanced';
+	
+	config.disableNativeSpellChecker = false;
+	config.filebrowserBrowseUrl = '/webhandle-page-editor/files/browse/type/all'
+	config.filebrowserImageBrowseUrl = '/webhandle-page-editor/files/browse/type/image'
+	config.filebrowserUploadUrl = '/webhandle-page-editor/files/upload-file?action=upload'
+	config.allowedContent = "small h5 h6 sup sub strong em table tr td th tbody dl dt dd br hr ul ol li pre u[class](*); img[*](*){*}; a[*](*); iframe[*](*); span[*](*); div[*](*); h1[*](*); h2[*](*){*}; h3[*](*){*}; h4[*](*); p{*}[*](*); section[*](*); picture[*](*){*}; figure[*](*){*}; figcaption[*](*){*}; script[*](*){*}"
+	config.disallowedContent = 'img{width, height}[width, height]'
+
+	config.extraPlugins = (config.extraPlugins ? config.extraPlugins + ',' : '') + 'sourcedialog,flex-picture,template-replacement,multi-widget-panel'
+	// config.extraPlugins = (config.extraPlugins ? config.extraPlugins + ',' : '') + 'sourcedialog'
+
+	config.sourceAreaTabSize = 4;
+	config.versionCheck = false
+};
+
+CKEDITOR.on( 'instanceReady', function( ev ) {
+	function makeBlockStyleFormat(tag) {
+		ev.editor.dataProcessor.writer.setRules( tag, {
+			indent: true,
+			breakBeforeOpen: true,
+			breakAfterOpen: true,
+			breakBeforeClose: true,
+			breakAfterClose: true
+		})
+	}
+    ev.editor.dataProcessor.writer.selfClosingEnd = '/>';
+    ev.editor.dataProcessor.writer.indentationChars = '\t';
+	for(let tag of ['div', 'section', 'p', 'h1', 'h2', 'h3', 'h4', 'h5']) {
+		makeBlockStyleFormat(tag)
+	}
+});

package/public/js/load.mjs

@@ -0,0 +1,2 @@
+import "ckeditor4"
+CKEDITOR.disableAutoInline = true

package/public/js/variables.mjs

@@ -0,0 +1 @@
+window.CKEDITOR_BASEPATH = '/@webhandle/ckeditor-4/ck-files/'

package/test.mjs

@@ -0,0 +1,11 @@
+import setupCKEditor from "./initialize-webhandle-component.mjs";
+export default async function test(webhandle) {
+	webhandle.development = true
+
+	let ckManager = await setupCKEditor(webhandle)
+
+	// webhandle.routers.primary.use((req, res, next) => {
+	// 	ckManager.addExternalResources(res.locals.externalResourceManager)
+	// 	next()
+	// })
+}