Merge pull request #5 from ckeditor/t/4

Feature: The initial font feature implementation. Closes #2. Closes #3. Closes #4.

.eslintrc.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
 

.travis.yml

@@ -1,24 +1,24 @@
 sudo: required
 dist: trusty
 addons:
+  firefox: "latest"
   apt:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
-      - google-chrome-stable
+    - google-chrome-stable
 language: node_js
 node_js:
-  - "6"
+- '6'
 cache:
-  - node_modules
+- node_modules
 before_install:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 install:
-  - npm install @ckeditor/ckeditor5-dev-tests
-  - ckeditor5-dev-tests-install-dependencies
+- npm install @ckeditor/ckeditor5-dev-tests
+- ckeditor5-dev-tests-install-dependencies
 script:
-  - ckeditor5-dev-tests-travis
+- ckeditor5-dev-tests-travis
 after_success:
-  - codeclimate-test-reporter < coverage/lcov.info
-  - ckeditor5-dev-tests-save-revision
+- ckeditor5-dev-tests-save-revision

LICENSE.md

@@ -2,7 +2,7 @@ Software License Agreement
 ==========================
 
 **CKEditor 5 Font Feature** – https://github.com/ckeditor/ckeditor5-font <br>
-Copyright (c) 2003-2017, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2018, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
 Licensed under the terms of any of the following licenses at your choice:
 

docs/_snippets/features/build-font-source.html

@@ -0,0 +1,17 @@
+<style>
+	.text-tiny {
+		font-size: 0.7em;
+	}
+
+	.text-small {
+		font-size: 0.85em;
+	}
+
+	.text-big {
+		font-size: 1.4em;
+	}
+
+	.text-huge {
+		font-size: 1.8em;
+	}
+</style>

docs/_snippets/features/build-font-source.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import Font from '@ckeditor/ckeditor5-font/src/font';
+
+ClassicEditor.build.plugins.push( Font );
+
+window.ClassicEditor = ClassicEditor;

docs/_snippets/features/custom-font-family-options.html

@@ -0,0 +1,13 @@
+<link href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono" rel="stylesheet">
+
+<div id="snippet-custom-font-family-options">
+	<h2>Font Family feature sample.</h2>
+
+	<p>
+		<span style="font-family: Ubuntu, Arial, sans-serif;">This text has "Ubuntu, Arial, Helvetica, sans-serif" font family set.</span>
+	</p>
+
+	<p>
+		<span style="font-family: 'Ubuntu Mono', 'Courier New', Courier, monospace;">This text has "Ubuntu Mono, Courier New, Courier, monospace" font family set.</span>
+	</p>
+</div>

docs/_snippets/features/custom-font-family-options.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-family-options' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'fontFamily', 'bulletedList', 'numberedList', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		fontFamily: {
+			options: [
+				'default',
+				'Ubuntu, Arial, sans-serif',
+				'Ubuntu Mono, Courier New, Courier, monospace'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/features/custom-font-size-named-options.html

@@ -0,0 +1,9 @@
+<div id="snippet-custom-font-size-named-options">
+	<h2>Font Size named options sample.</h2>
+
+	<p>
+		This is a mixed text with different sizes of text:
+		<span class="text-small">small</span> and
+		<span class="text-big">big</span>
+	</p>
+</div>

docs/_snippets/features/custom-font-size-named-options.js

@@ -0,0 +1,28 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-size-named-options' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'fontSize', 'bulletedList', 'numberedList', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		fontSize: {
+			options: [
+				'small',
+				'normal',
+				'big'
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/features/custom-font-size-numeric-options.html

@@ -0,0 +1,11 @@
+<div id="snippet-custom-font-size-numeric-options">
+	<h2>Font Size feature numerical options sample.</h2>
+
+	<p><span style="font-size: 9px">9px</span></p>
+	<p><span style="font-size: 11px">11px</span></p>
+	<p><span style="font-size: 13px">13px</span></p>
+	<p>Normal</p>
+	<p><span style="font-size: 17px">17px</span></p>
+	<p><span style="font-size: 19px">19px</span></p>
+	<p><span style="font-size: 21px">21px</span></p>
+</div>

docs/_snippets/features/custom-font-size-numeric-options.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+ClassicEditor
+	.create( document.querySelector( '#snippet-custom-font-size-numeric-options' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'fontSize', 'bulletedList', 'numberedList', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		},
+		fontSize: {
+			options: [
+				9,
+				11,
+				13,
+				'normal',
+				17,
+				19,
+				21
+			]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/features/font.html

@@ -0,0 +1,20 @@
+<div id="snippet-font">
+	<h2>Font feature sample.</h2>
+
+	<p>
+		This is a mixed text with different sizes of text:
+		<span class="text-tiny">tiny</span>,
+		<span class="text-small">small</span>,
+		<span class="text-big">big</span> and
+		<span class="text-huge">huge</span>.
+	</p>
+
+	<p>
+		<span style="font-family: Arial, Helvetica, sans-serif;">This text has "Arial, Helvetica, sans-serif" family set.</span>
+	</p>
+
+	<p>
+		<span style="font-family: 'Courier New', Courier, monospace;">This text has "Courier New, Courier, monospace" family set.</span>
+	</p>
+
+</div>

docs/_snippets/features/font.js

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-font' ), {
+		toolbar: {
+			items: [
+				'headings', '|', 'fontSize', 'fontFamily', '|', 'bulletedList', 'numberedList', 'undo', 'redo'
+			],
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/api/font.md

@@ -0,0 +1,31 @@
+---
+category: api-reference
+---
+
+# CKEditor 5 font feature
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-font.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-font)
+
+This package implements the font family and font size features for CKEditor 5.
+
+## Documentation
+
+See the {@link features/font Font feature} guide 
+with corresponding {@link module:font/fontfamily~FontFamily} and {@link module:font/fontsize~FontSize} plugin documentation.
+
+## Installation
+
+```bash
+npm install --save @ckeditor/ckeditor5-font
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5-font.
+
+## External links
+
+* [`@ckeditor/ckeditor5-font` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-font)
+* [`ckeditor/ckeditor5-font` on GitHub](https://github.com/ckeditor/ckeditor5-font)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5-font/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5-font/blob/master/CHANGELOG.md)