Implementation of the core feature

.editorconfig

@@ -3,11 +3,13 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
+end_of_line = lf
 
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
+

LICENSE.md

@@ -0,0 +1,27 @@
+Software License Agreement
+==========================
+
+**CKEditor 4 component for Angular** – /~https://github.com/ckeditor/ckeditor4-angular <br>
+Copyright (c) 2003-2019, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+
+Licensed under the terms of any of the following licenses at your
+choice:
+
+- GNU General Public License Version 2 or later (the "GPL")
+  http://www.gnu.org/licenses/gpl.html
+
+- GNU Lesser General Public License Version 2.1 or later (the "LGPL")
+  http://www.gnu.org/licenses/lgpl.html
+
+- Mozilla Public License Version 1.1 or later (the "MPL")
+  http://www.mozilla.org/MPL/MPL-1.1.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.

README.md

@@ -1,27 +1,43 @@
-# CKEditor4Angular
+# CKEditor 4 WYSIWYG editor Angular component
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.5.
+Official [CKeditor 4](https://ckeditor.com/ckeditor-4/) WYSIWYG editor Angular component for Angular 2+
 
-## Development server
+## Documentation
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+See [CKEditor 4 Angular component](https://ckeditor.com/docs/ckeditor4/latest/guide/index.html) article.
+
+## Contributing
+
+Once you have cloned the repository install dependecies:
+
+```bash
+npm install
+```
 
-## Code scaffolding
+### The structure of the repository
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+This repository contains the following code:
+
+* `./src/ckeditor` contains the CKEditor component,
+* `./src/app` is a demo application using the component.
+
+### Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-## Build
+### Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
-## Running unit tests
+### Running unit tests
 
 Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running end-to-end tests
+### Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
-## Further help
+### License
+Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license

e2e/src/app.e2e-spec.ts

@@ -1,14 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
 import { AppPage } from './app.po';
+import { protractor, WebElement } from 'protractor';
+
+describe( 'workspace-project App', () => {
+	let page: AppPage,
+		editables: WebElement[];
+
+	beforeEach( () => {
+		page = new AppPage;
+	} );
+
+	describe( 'simple-usage', () => {
+		beforeEach( () => {
+			page.navigateTo( 'simple-usage' );
+		} );
+
+		beforeEach( async () => {
+			editables = [ await page.getEditable(), await page.getInlineEditable() ];
+		} );
+
+		it( 'should display welcome message', () => {
+			expect( page.getParagraphText() ).toEqual( 'CKEditor integration with Angular 2+' );
+		} );
+
+		it( 'should display editor with initial content', async () => {
+			editables.forEach( editable => expect( page.getHtmlString( editable ) )
+				.toBe( '<p>Getting used to an entirely different culture can be challeng' +
+					'ing. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural d' +
+					'iversity in person. You learn to appreciate each and every single one of the differences while you become more cultura' +
+					'lly fluid.</p>' )
+			);
+		} );
+
+		describe( 'typing', () => {
+			it( `in editor1 should update editors content`, testTyping( editables, 0 ) );
+			it( `in editor2 should update editors content`, testTyping( editables, 1 ) );
+		} );
+	} );
+
+	describe( 'demo-forms', () => {
+		beforeEach( () => {
+			page.navigateTo( 'forms' );
+		} );
+
+		beforeEach( async () => {
+			editables = [ await page.getEditable() ];
+		} );
+
+		it( 'should display editor with initial content', async () => {
+			expect( page.getHtmlString( editables[ 0 ] ) )
+				.toBe( '<p>A <strong>really</strong> nice fellow.</p>' );
+		} );
+
+		it( `typing should update editor content`, testTyping( editables, 0 ) );
+	} );
 
-describe('workspace-project App', () => {
-  let page: AppPage;
+	function testTyping( elements, elementIndex: number ) {
+		return async function() {
+			const keys = [
+				'Foo! ',
+				protractor.Key.chord( protractor.Key.CONTROL, 'b' ),
+				'Bar?'
+			];
 
-  beforeEach(() => {
-    page = new AppPage();
-  });
+			await page.updateValue( editables[ elementIndex ], keys );
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to ckeditor4-angular!');
-  });
-});
+			editables.forEach( item => {
+				expect( page.getHtmlString( item ) )
+					.toBe( '<p>Foo!&nbsp;<strong>Bar?</strong></p>' );
+			} );
+		};
+	}
+} );

e2e/src/app.po.ts

@@ -1,11 +1,48 @@
-import { browser, by, element } from 'protractor';
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { protractor, browser, by, element, WebElement, ElementFinder } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
+	navigateTo( target: string = '' ) {
+		return browser.get( `/${target}` );
+	}
+
+	getParagraphText() {
+		return element( by.css( 'app-root h1' ) ).getText();
+	}
+
+	waitForElement( el: ElementFinder ) {
+		return browser.wait( protractor.ExpectedConditions.presenceOf( el ) ).then( () => el );
+	}
+
+	async getEditable() {
+		return this.getElementByCss( '.cke_editable:not(.cke_editable_inline)' );
+	}
+
+	getInlineEditable() {
+		return this.getElementByCss( '.cke_editable_inline' );
+	}
+
+	async getElementByCss( query ) {
+		const el = await element( by.css( query ) );
+		await this.waitForElement( el );
+		return el;
+	}
+
+	getHtmlString( el: WebElement ) {
+		return el.getAttribute( 'innerHTML' ).then( str => str.replace( /\u200B/g, '' ) );
+	}
+
+	async updateValue( el: WebElement, keys: string[] ) {
+		await el.click();
+		await this.selectAll();
+		await el.sendKeys( ...keys );
+	}
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
+	selectAll() {
+		return browser.executeScript( 'document.execCommand( "selectAll", false, null )' );
+	}
 }