Refactor the sample APP so it uses DLL.

ckeditor · Nov 23, 2020 · 582fbe1 · 582fbe1
1 parent 697e80d
commit 582fbe1
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 123 deletions.
diff --git a/dll/dll-build/src/index.js b/dll/dll-build/src/index.js
@@ -3,4 +3,30 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-export * from './utils';
+import uid from '@ckeditor/ckeditor5-utils/src/uid';
+import first from '@ckeditor/ckeditor5-utils/src/first';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import HtmlEmbedEditing from '@ckeditor/ckeditor5-html-embed/src/htmlembedediting';
+import HtmlEmbedUI from '@ckeditor/ckeditor5-html-embed/src/htmlembedui';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
+import Command from '@ckeditor/ckeditor5-core/src/command';
+import { findOptimalInsertionPosition, toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
+
+export default ClassicEditor;
+
+export {
+	uid,
+	first,
+	Plugin,
+	ClassicEditor,
+	HtmlEmbedEditing,
+	HtmlEmbedUI,
+	ButtonView,
+	createElement,
+	toWidgetEditable,
+	toWidget,
+	findOptimalInsertionPosition,
+	Command
+};
diff --git a/dll/dll-build/src/utils.js b/dll/dll-build/src/utils.js
diff --git a/dll/dll-build/webpack.config.js b/dll/dll-build/webpack.config.js
@@ -11,18 +11,20 @@ const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 
 module.exports = {
 	mode: 'development',
-	entry: {
-		CKEditor: [ './src/index' ]
+	entry: [ './src' ],
+	optimization: {
+		minimize: false,
+		moduleIds: 'named'
 	},
 	output: {
 		path: path.resolve( __dirname, 'build' ),
 		filename: 'ckeditor.dll.js',
-		library: 'CKEditor',
+		library: 'CKEditor5DLL',
 		libraryTarget: 'umd'
 	},
 	plugins: [
 		new webpack.DllPlugin( {
-			name: 'CKEditor',
+			name: 'CKEditor5DLL',
 			context: 'src',
 			path: path.resolve( __dirname, 'build/ckeditor-manifest.json' ),
 			format: true,

diff --git a/dll/dll-plugin/index.html b/dll/dll-plugin/index.html
@@ -124,6 +124,28 @@ <h2>Sample</h2>
 <script src="../dll-build/build/ckeditor.dll.js"></script>
 <script src="./build/app.js"></script>
 <script>
+	// Sudo import.
+	const {
+		ClassicEditor, HtmlEmbedEditing, HtmlEmbedUI
+	} = window.CKEditor5DLL( './src/index.js' );
+
+	const config = Object.assign( {}, ClassicEditor.defaultConfig, {
+		extraPlugins: [
+			HtmlEmbedEditing,
+			HtmlEmbedUI,
+			ComplexBox // exposed by the app.js
+		],
+		htmlEmbed: {
+			showPreviews: false
+		}
+	} );
+
+	config.toolbar.items.push( 'htmlEmbed' );
+
+	ClassicEditor.create( document.querySelector( '#editor' ), config )
+		.then( editor => {
+			window.editor = editor;
+		} );
 </script>
 </body>
 </html>
diff --git a/dll/dll-plugin/src/index.js b/dll/dll-plugin/src/index.js
@@ -3,15 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals console, document, window, prompt */
+/* globals prompt */
 
-import sanitizeHtml from 'sanitize-html';
-import { clone } from 'lodash-es';
 import {
 	Plugin,
-	ClassicEditor,
-	HtmlEmbedEditing,
-	HtmlEmbedUI,
 	ButtonView,
 	createElement,
 	toWidgetEditable,
@@ -338,85 +333,5 @@ class ComplexBox extends Plugin {
 	}
 }
 
-class MahPlugin extends Plugin {
-	init() {
-		console.log( 'MahPlugin: works.' );
-	}
-}
-
-class CustomHtmlEmbed extends Plugin {
-	static get requires() {
-		return [ HtmlEmbedEditing, HtmlEmbedUI ];
-	}
-
-	init() {
-		console.log( 'CustomHtmlEmbed: works.' );
-	}
-}
-
-const config = Object.assign( {}, ClassicEditor.defaultConfig, {
-	extraPlugins: [ MahPlugin, ComplexBox, CustomHtmlEmbed ],
-	htmlEmbed: {
-		showPreviews: true,
-		sanitizeHtml( rawHtml ) {
-			const config = getSanitizeHtmlConfig( sanitizeHtml.defaults );
-			const cleanHtml = sanitizeHtml( rawHtml, config );
-
-			return {
-				html: cleanHtml,
-				hasChanged: rawHtml !== cleanHtml
-			};
-		}
-	}
-} );
-
-config.toolbar.items.push( 'htmlEmbed' );
-
-ClassicEditor.create( document.querySelector( '#editor' ), config )
-	.then( editor => {
-		window.editor = editor;
-	} );
+export default ComplexBox;
 
-function getSanitizeHtmlConfig( defaultConfig ) {
-	const config = clone( defaultConfig );
-
-	config.allowedTags.push(
-		// Allows embedding iframes.
-		'iframe',
-
-		// Allows embedding media.
-		'audio',
-		'video',
-		'picture',
-		'source',
-		'img'
-	);
-
-	config.selfClosing.push( 'source' );
-
-	// Remove duplicates.
-	config.allowedTags = [ ...new Set( config.allowedTags ) ];
-
-	config.allowedSchemesAppliedToAttributes.push(
-		// Responsive images.
-		'srcset'
-	);
-
-	for ( const htmlTag of config.allowedTags ) {
-		if ( !Array.isArray( config.allowedAttributes[ htmlTag ] ) ) {
-			config.allowedAttributes[ htmlTag ] = [];
-		}
-
-		// Allow inlining styles for all elements.
-		config.allowedAttributes[ htmlTag ].push( 'style' );
-	}
-
-	config.allowedAttributes.audio.push( 'controls' );
-	config.allowedAttributes.video.push( 'width', 'height', 'controls' );
-
-	config.allowedAttributes.iframe.push( 'src' );
-	config.allowedAttributes.img.push( 'srcset', 'sizes', 'src' );
-	config.allowedAttributes.source.push( 'src', 'srcset', 'media', 'sizes', 'type' );
-
-	return config;
-}
diff --git a/dll/dll-plugin/webpack.config.js b/dll/dll-plugin/webpack.config.js
@@ -11,12 +11,15 @@ const webpack = require( 'webpack' );
 module.exports = {
 	mode: 'development',
 	optimization: {
+		minimize: false,
 		moduleIds: 'named'
 	},
 	output: {
 		path: path.resolve( __dirname, 'build' ),
 		filename: 'app.js',
-		libraryTarget: 'umd'
+		library: 'ComplexBox',
+		libraryTarget: 'umd',
+		libraryExport: 'default'
 	},
 	plugins: [
 		new webpack.DllReferencePlugin( {