Initial package files.

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/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,60 @@
+---
+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 `'htmlEmbed'` command implemented by {@link module:html-embed/htmlembedcommand~HTMLEmbedCommand}.
+
+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,3 @@
+{
+  "Insert HTML": "Toolbar button tooltip for the HTML embed feature."
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @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.
+ *
+ * @TODO: What does it allow doing?
+ *
+ * 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';
+	}
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @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/htmlembedcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+/**
+ * The HTML embed command.
+ *
+ * The command is registered by {@link module:html-embed/htmlembedediting~HTMLEmbedEditing} as `'htmlEmbed'`.
+ *
+ * To insert a HTML code at the current selection, execute the command:
+ *
+ *		editor.execute( 'htmlEmbed', { html: 'HTML to insert.' } );
+ *
+ * @extends module:core/command~Command
+ */
+export default class HTMLEmbedCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 */
+	execute() {
+	}
+}

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

@@ -0,0 +1,55 @@
+/**
+ * @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/htmlembedediting
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import HTMLEmbedCommand from './htmlembedcommand';
+
+import '../theme/htmlembed.css';
+
+/**
+ * The HTML embed editing feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HTMLEmbedEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'HTMLEmbedEditing';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+
+		schema.register( 'horizontalLine', {
+			isObject: true,
+			allowWhere: '$block'
+		} );
+
+		conversion.for( 'dataDowncast' ).elementToElement( {
+			model: 'rawHtml',
+			view: () => {
+			}
+		} );
+
+		conversion.for( 'editingDowncast' ).elementToElement( {
+			model: 'rawHtml',
+			view: () => {
+			}
+		} );
+
+		editor.commands.add( 'htmlEmbed', new HTMLEmbedCommand( editor ) );
+	}
+}

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

@@ -0,0 +1,46 @@
+/**
+ * @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/htmlembedui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import htmlEmbedIcon from '../theme/icons/htmlembed.svg';
+
+/**
+ * The HTML embed UI plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HTMLEmbedUI extends Plugin {
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add the `htmlEmbed` button to feature components.
+		editor.ui.componentFactory.add( 'htmlEmbed', locale => {
+			const command = editor.commands.get( 'htmlEmbed' );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Insert HTML' ),
+				icon: htmlEmbedIcon,
+				tooltip: true
+			} );
+
+			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+			// Execute the command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( 'htmlEmbed', { html: '' } );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import HTMLEmbed from '../src/htmlembed';
+import HTMLEmbedUI from '../src/htmlembedui';
+import HTMLEmbedEditing from '../src/htmlembedediting';
+
+describe( 'HTMLEMbed', () => {
+	it( 'should require HTMLEmbedEditing and HTMLEmbedUI', () => {
+		expect( HTMLEmbed.requires ).to.deep.equal( [ HTMLEmbedEditing, HTMLEmbedUI ] );
+	} );
+
+	it( 'should be named', () => {
+		expect( HTMLEmbed.pluginName ).to.equal( 'HTMLEmbed' );
+	} );
+} );

packages/ckeditor5-html-embed/tests/manual/htmlembed.html

@@ -0,0 +1,2 @@
+<div id="editor">
+</div>