Merge pull request #8290 from ckeditor/i/8204

Feature (html-embed): Initial implementation. Closes #8204.

Feature (theme-lark): Styles for the HTML embed feature. See #8204.

README.md

@@ -519,6 +519,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 	</td>
 </tr>
 
+<tr>
+	<td>
+		<a href="https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-html-embed"><code>@ckeditor/ckeditor5-html-embed</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-html-embed.svg" alt="@ckeditor/ckeditor5-html-embed npm package badge"></a>
+	</td>
+	<td>
+		The HTML embed feature.
+	</td>
+</tr>
+
 <tr>
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-image"><code>@ckeditor/ckeditor5-image</code></a>

package.json

@@ -50,6 +50,7 @@
     "@ckeditor/ckeditor5-heading": "^23.0.0",
     "@ckeditor/ckeditor5-highlight": "^23.0.0",
     "@ckeditor/ckeditor5-horizontal-line": "^23.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^0.0.1",
     "@ckeditor/ckeditor5-image": "^23.0.0",
     "@ckeditor/ckeditor5-indent": "^23.0.0",
     "@ckeditor/ckeditor5-link": "^23.0.0",

packages/ckeditor5-html-embed/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in the main repository. See: https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

packages/ckeditor5-html-embed/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+========================================
+
+See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html) to learn more.

packages/ckeditor5-html-embed/LICENSE.md

@@ -0,0 +1,17 @@
+Software License Agreement
+==========================
+
+**CKEditor 5 HTML embed feature**  – https://github.com/ckeditor/ckeditor5-html-embed <br>
+Copyright (c) 2003-2020, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource](http://cksource.com) Frederico Knabben. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

packages/ckeditor5-html-embed/README.md

@@ -0,0 +1,20 @@
+CKEditor 5 HTML embed feature
+=============================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-html-embed.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed)
+[![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-html-embed/status.svg)](https://david-dm.org/ckeditor/ckeditor5-html-embed)
+[![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-html-embed/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-html-embed?type=dev)
+
+This package implements the HTML embed feature for CKEditor 5.
+
+## Demo
+
+Check out the demo in the [HTML embed feature](https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html) guide.
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-html-embed` package](https://ckeditor.com/docs/ckeditor5/latest/api/html-embed.html) page as well as the [HTML embed feature guide](https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html) in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+
+## License
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

packages/ckeditor5-html-embed/docs/_snippets/features/html-embed.html

@@ -0,0 +1,2 @@
+<div id="snippet-html-embed">
+</div>

packages/ckeditor5-html-embed/docs/_snippets/features/html-embed.js

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
+
+ClassicEditor.builtinPlugins.push( HtmlEmbed );
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-html-embed' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'bulletedList',
+				'numberedList',
+				'|',
+				'outdent',
+				'indent',
+				'|',
+				'alignment',
+				'|',
+				'horizontalLine',
+				'blockQuote',
+				'link',
+				'imageUpload',
+				'mediaEmbed',
+				'htmlEmbed',
+				'insertTable',
+				'|',
+				'undo',
+				'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			styles: [
+				'full',
+				'alignLeft',
+				'alignRight'
+			],
+			toolbar: [
+				'imageStyle:alignLeft',
+				'imageStyle:full',
+				'imageStyle:alignRight',
+				'|',
+				'imageTextAlternative'
+			]
+		},
+		table: {
+			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-html-embed/docs/api/html-embed.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# HTML embed feature for CKEditor 5
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-html-embed.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed)
+
+This package implements the HTML embed feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/html-embed#demo demo in the HTML embed feature} guide.
+
+## Documentation
+
+See the {@link features/html-embed HTML embed feature} guide and the {@link module:html-embed/htmlembed~HtmlEmbed} plugin documentation.
+
+## Installation
+
+```plaintext
+npm install --save @ckeditor/ckeditor5-html-embed
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-html-embed.
+
+## External links
+
+* [`@ckeditor/ckeditor5-html-embed` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed)
+* [`ckeditor/ckeditor5-html-embed` on GitHub](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-html-embed)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md)

packages/ckeditor5-html-embed/docs/features/html-embed.md

@@ -0,0 +1,61 @@
+---
+category: features
+menu-title: HTML embed
+---
+
+# HTML embed
+
+The {@link module:html-embed/htmlembed~HtmlEmbed} plugin provides the possibility to insert a HTML codeinto the rich-text editor.
+
+## Demo
+
+Use the editor below to see the {@link module:html-embed/htmlembed~HtmlEmbed} plugin in action.
+
+{@snippet features/html-embed}
+
+## Installation
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-html-embed`](https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed) package:
+
+```plaintext
+npm install --save @ckeditor/ckeditor5-html-embed
+```
+
+And add it to your plugin list configuration:
+
+```js
+import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ HtmlEmbed, ... ],
+		toolbar: [ 'htmlEmbed', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+## Common API
+
+The {@link module:html-embed/htmlembed~HtmlEmbed} plugin registers:
+* the UI button component (`'htmlEmbed'`),
+* the `'htmlEmbedUpdate'` command implemented by {@link module:html-embed/htmlembedupdatecommand~HtmlEmbedUpdateCommand}.
+* the `'htmlEmbedInsert'` command implemented by {@link module:html-embed/htmlembedinsertcommand~HtmlEmbedInsertCommand}.
+
+The command can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+editor.execute( 'htmlEmbed', { html: 'HTML to insert.' } );
+```
+
+<info-box>
+	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
+</info-box>
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-html-embed.

packages/ckeditor5-html-embed/lang/contexts.json

@@ -0,0 +1,5 @@
+{
+  "Insert HTML": "Toolbar button tooltip for the HTML embed feature.",
+  "HTML snippet": "The HTML snippet.",
+  "Paste the raw code here.": "A placeholder that will be displayed in the raw HTML textarea field."
+}

packages/ckeditor5-html-embed/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ckeditor/ckeditor5-html-embed",
+  "version": "0.0.1",
+  "description": "HTML embed feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "dependencies": {
+    "@ckeditor/ckeditor5-core": "^23.0.0",
+    "@ckeditor/ckeditor5-engine": "^23.0.0",
+    "@ckeditor/ckeditor5-ui": "^23.0.0",
+    "@ckeditor/ckeditor5-utils": "^23.0.0",
+    "@ckeditor/ckeditor5-widget": "^23.0.0"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^23.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^23.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^23.0.0",
+    "lodash-es": "^4.17.15",
+    "sanitize-html": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=5.7.1"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://ckeditor.com",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-html-embed"
+  },
+  "files": [
+    "lang",
+    "src",
+    "theme"
+  ]
+}

packages/ckeditor5-html-embed/src/htmlembed.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-embed/htmlembed
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import HtmlEmbedEditing from './htmlembedediting';
+import HtmlEmbedUI from './htmlembedui';
+
+/**
+ * The HTML embed feature.
+ *
+ * It allows inserting HTML snippets directly to the editor.
+ *
+ * For a detailed overview, check the {@glink features/html-embed HTML embed feature} documentation.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HtmlEmbed extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ HtmlEmbedEditing, HtmlEmbedUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'HtmlEmbed';
+	}
+}
+
+/**
+ * The configuration of the HTML embed feature.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ * 				htmlEmbed: ... // HTML embed feature options.
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface HtmlEmbedConfig
+ */
+
+/**
+ * TODO
+ *
+ * @member {Boolean} [module:html-embed/htmlembed~HtmlEmbedConfig#previewsInData=false]
+ */
+
+/**
+ * TODO
+ *
+ * @member {Function} [module:html-embed/htmlembed~HtmlEmbedConfig#sanitizeHtml]
+ */