Sfoglia il codice sorgente

Merge branch 'master' into t/ckeditor5-dev/289

Piotrek Koszuliński 8 anni fa
parent
commit
be5cba9d0b

+ 0 - 4
.gitignore

@@ -1,7 +1,3 @@
-# These files will be ignored by Git and by our linting tools:
-#	gulp lint
-#	gulp lint-staged
-
 node_modules/
 build/
 coverage/

+ 11 - 11
README.md

@@ -12,7 +12,7 @@ CKEditor 5 – development repository
 
 Read more about the status of the project in the [CKEditor 5 v1.0.0-alpha.1 release blog post](https://github.com/ckeditor/ckeditor5-design/issues/181).
 
-The first alpha version will be followed by a several releases before it reaches v1.0.0. See the [roadmap to 1.0.0 and beyond](https://github.com/ckeditor/ckeditor5-design/issues/172).
+The first alpha version will be followed by several releases before it reaches v1.0.0. See the [roadmap to 1.0.0 and beyond](https://github.com/ckeditor/ckeditor5-design/issues/172).
 
 ## Demos
 
@@ -27,12 +27,12 @@ You can also find out more examples (such as [Markdown output](https://docs.cked
 
 ## Documentation
 
-For high-level overview of the project see:
+For a high-level overview of the project see:
 
 * [CKEditor 5 Builds](https://ckeditor.com/ckeditor-5-builds/) website
 * [CKEditor 5 Framework](https://ckeditor.com/ckeditor-5-framework/) website.
 
-To find out more see the following [CKEditor 5 documentation](https://ckeditor5.github.io/docs/nightly/ckeditor5/latest) sections:
+To find out more see the following [CKEditor 5 documentation](https://docs.ckeditor.com/ckeditor5/latest/index.html) sections:
 
 * [API documentation](https://docs.ckeditor.com/ckeditor5/latest/api/index.html)
 * [CKEditor 5 Framework documentation](https://docs.ckeditor.com/ckeditor5/latest/framework/index.html)
@@ -118,7 +118,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-utils"><code>@ckeditor/ckeditor5-utils</code></a>
 		<br>
-		The editor utils library.
+		The editor utilities library.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-utils"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-utils.svg" alt="ckeditor5-utils npm package badge"></a>
@@ -131,7 +131,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-upload"><code>@ckeditor/ckeditor5-upload</code></a>
 		<br>
-		Introduces the file upload utils.
+		Introduces the file upload utilities.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-upload"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-upload.svg" alt="ckeditor5-upload npm package badge"></a>
@@ -224,7 +224,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-adapter-ckfinder"><code>@ckeditor/ckeditor5-adapter-ckfinder</code></a>
 		<br>
-		Introduces the <a href="https://cksource.com/ckfinder">CKFinder</a> adapter for features which require the upload capabilities.
+		Introduces the <a href="https://ckeditor.com/ckeditor-4/ckfinder/">CKFinder</a> adapter for features which require upload capabilities.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-adapter-ckfinder"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-adapter-ckfinder.svg" alt="ckeditor5-adapter-ckfinder npm package badge"></a>
@@ -237,7 +237,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-autoformat"><code>@ckeditor/ckeditor5-autoformat</code></a>
 		<br>
-		Introduces the autoformatting feature. Replaces predefined characters with corresponding format (e.g. <code>**foo**</code> becomes bolded <code>&lt;strong&gt;foo&lt;/strong&gt;</code>).
+		Introduces the autoformatting feature. Replaces predefined characters with a corresponding format (e.g. <code>**foo**</code> becomes bolded <code>&lt;strong&gt;foo&lt;/strong&gt;</code>).
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-autoformat"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-autoformat.svg" alt="ckeditor5-autoformat npm package badge"></a>
@@ -250,7 +250,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-basic-styles"><code>@ckeditor/ckeditor5-basic-styles</code></a>
 		<br>
-		Introduces the bold and italic features.
+		Introduces the bold, italic, underline and code features.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-basic-styles.svg" alt="ckeditor5-basic-styles npm package badge"></a>
@@ -289,7 +289,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-enter"><code>@ckeditor/ckeditor5-enter</code></a>
 		<br>
-		Introduces the enter key feature.
+		Introduces the Enter key feature.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-enter"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-enter.svg" alt="ckeditor5-enter npm package badge"></a>
@@ -367,7 +367,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-markdown-gfm"><code>@ckeditor/ckeditor5-markdown-gfm</code></a>
 		<br>
-		Introduces GitHub flavored Markdown data processor.
+		Introduces GitHub-flavored Markdown data processor.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-markdown-gfm"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-markdown-gfm.svg" alt="ckeditor5-markdown-gfm npm package badge"></a>
@@ -433,7 +433,7 @@ Read more in the [Support](https://docs.ckeditor.com/ckeditor5/latest/framework/
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5-theme-lark"><code>@ckeditor/ckeditor5-theme-lark</code></a>
 		<br>
-		The lark theme.
+		The Lark theme.
 	</td>
 	<td>
 		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-theme-lark"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-theme-lark.svg" alt="ckeditor5-theme-lark npm package badge"></a>

BIN
docs/assets/img/easy-image.png


BIN
docs/assets/img/framework-architecture-toolbar.png


+ 1 - 1
docs/builds/guides/whats-new.md

@@ -28,7 +28,7 @@ The outdated concept of image alignment was dropped in favor of {@link features/
 
 When integrated with {@link features/image-upload#Easy-Image Easy Image}, uploading, resizing and producing different image sizes for responsive design is all automated.
 
-<!-- [ TODO Animated GIF of image being inserted and how it looks like in a smartphone and desktop ] -->
+{@img assets/img/easy-image.png 1440 Responsive images with Easy Image.}
 
 ### Simple linking
 

+ 153 - 1
docs/framework/guides/architecture/intro.md

@@ -138,7 +138,7 @@ These events make it possible to control the command from the outside. For insta
 const command = editor.commands.get( 'someCommand' );
 
 command.on( 'change:isEnabled', forceDisable, { priority: 'lowest' } );
-command.isEanabled = false;
+command.isEnabled = false;
 
 function forceDisabled() {
 	this.isEnabled = false;
@@ -592,4 +592,156 @@ EditorUIView
 
 ### Using the existing components
 
+The framework provides a number of common {@link api/ui components} like {@link module:ui/button/buttonview~ButtonView `ButtonView`} or {@link module:ui/toolbar/toolbarview~ToolbarView `ToolbarView`} that can be helpful when developing a new user interface.
+
+For example, to create a toolbar with a few buttons inside, `ToolbarView` and `ButtonView` classes need to be imported first:
+
+```js
+import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+```
+
+Create the toolbar and a couple of buttons with labels first. Then append the buttons to the toolbar:
+
+```js
+const toolbar = new ToolbarView();
+const buttonFoo = new ButtonView();
+const buttonBar = new ButtonView();
+
+buttonFoo.set( {
+	label: 'Foo',
+	withText: true
+} );
+
+buttonBar.set( {
+	label: 'Bar',
+	withText: true
+} );
+
+toolbar.items.add( buttonFoo );
+toolbar.items.add( buttonBar );
+```
+
+The toolbar can now join the [UI tree](##View-collections-and-the-UI-tree) or it can be injected straight into DOM. To keep the example simple, proceed with the latter scenario:
+
+```js
+toolbar.init();
+
+document.body.appendChild( toolbar.element );
+```
+
+The result should look like this:
+
+{@img assets/img/framework-architecture-toolbar.png 442 A simple toolbar created using existing components.}
+
+The toolbar renders correctly but it does not do much. To execute an action when the button is clicked, a listener must be defined. To shorten the code and instead of two listeners define just one, the buttons can {@link module:utils/emittermixin~EmitterMixin#delegate delegate} the {@link module:ui/button/buttonview~ButtonView#execute `execute`} event to their parent:
+
+```js
+buttonFoo.delegate( 'execute' ).to( toolbar );
+buttonBar.delegate( 'execute' ).to( toolbar );
+
+toolbar.on( 'execute', evt => {
+	console.log( `The "${ evt.source.label }" button was clicked!` );
+} );
+```
+
 ### Keystrokes and focus management
+
+<<<<<<< HEAD
+_Coming soon..._
+=======
+The framework offers built–in classes that help manage keystrokes and focus in the UI. They are particularly useful when it comes to bringing accessibility features to the application.
+
+#### Focus tracker
+
+The {@link module:utils/focustracker~FocusTracker `FocusTracker`} class can observe a number of HTML elements and determine if one of them is focused: either by the user (clicking, typing) or using the `HTMLElement.focus()` DOM method.
+
+```js
+import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+
+// ...
+
+const focusTracker = new FocusTracker();
+```
+
+To register elements in the tracker, use the {@link module:utils/focustracker~FocusTracker#add `add()`} method:
+
+```js
+focusTracker.add( document.querySelector( '.some-element' ) );
+focusTracker.add( viewInstance.element );
+```
+
+Observing focus tracker's {@link module:utils/focustracker~FocusTracker#isFocused `isFocused`} attribute allows to determine whether one of the registered elements is currently focused:
+
+```js
+focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
+	if ( isFocused ) {
+		console.log( 'The', focusTracker.focusedElement, 'is focused now.' );
+	} else {
+		console.log( 'The elements are blurred.' );
+	}
+} );
+```
+
+This information is useful when implementing a certain type of UI which behavior depends on the focus, e.g. contextual panels and floating balloons containing forms should hide when the user decides to abandon them.
+
+#### Keystroke handler
+
+The {@link module:utils/keystrokehandler~KeystrokeHandler `KeystrokeHandler`} listens to the keystroke events fired by an HTML element or any of its descendants and executes pre–defined actions when the keystroke is pressed. Usually, each [view](#Views) creates own keystroke handler instance which takes care of the keystrokes fired by the elements the view has rendered.
+
+```js
+import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+
+// ...
+
+const keystrokeHandler = new KeystrokeHandler();
+```
+
+To define the scope of the keystroke handler in DOM, use the {@link module:utils/keystrokehandler~KeystrokeHandler#listenTo `listenTo()`} method:
+
+```js
+keystrokeHandler.listenTo( document.querySelector( '.some-element' ) );
+keystrokeHandler.listenTo( viewInstance.element );
+```
+
+<info-box>
+	Check out the list of {@link module:utils/keyboard#keyCodes known key names} supported by the keystroke handler.
+</info-box>
+
+Keystroke action callbacks are functions. To prevent the default action of the keystroke and stop further propagation, use the `cancel()` function provided in the callback.
+
+```js
+keystrokeHandler.set( 'Tab', ( keyEvtData, cancel ) => {
+	console.log( 'Tab was pressed!' );
+
+	// This keystroke has been handled and can be canceled.
+	cancel();
+} );
+```
+
+<info-box>
+	There is also an {@link module:core/editingkeystrokehandler~EditingKeystrokeHandler `EditingKeystrokeHandler`} class which has the same API as `KeystrokeHandler` but it offers direct keystroke bindings to editor commands.
+
+	Usually, the editor provides such keystroke handler under the {@link module:core/editor/standardeditor~StandardEditor#keystrokes `editor.keystrokes`} property so any plugin can register keystrokes associated with editor commands, e.g. the {@link module:undo/undo~Undo `Undo`} plugin registers `editor.keystrokes.set( 'Ctrl+Z', 'undo' );` to execute its "undo" command.
+</info-box>
+
+When multiple callbacks are assigned to the same keystroke, priorities can be used to decide which one should be handled first and whether other callbacks should be executed at all:
+
+```js
+keystrokeHandler.set( 'Ctrl+A', ( keyEvtData ) => {
+	console.log( 'A normal priority listener.' );
+} );
+
+keystrokeHandler.set( 'Ctrl+A', ( keyEvtData ) => {
+	console.log( 'A high priority listener.' );
+
+	// The normal priority listener will not be executed.
+	cancel();
+}, { priority: 'high' } );
+```
+
+Pressing <kbd>Ctrl</kbd>+<kbd>A</kbd> will only log:
+
+```
+"A high priority listener."
+```

+ 1 - 1
docs/framework/guides/contributing/development-environment.md

@@ -96,7 +96,7 @@ total 16
 drwxr-xr-x    5 p  staff   170 31 Jan 10:37 .
 drwxr-xr-x  292 p  staff  9928 20 Jan 00:20 ..
 lrwxr-xr-x    1 p  staff    23 31 Jan 10:37 ckeditor5-core -> ../../../ckeditor5-core
-drwxr-xr-x    7 p  staff   238 20 Jan 00:20 ckeditor5-dev-lint
+drwxr-xr-x    7 p  staff   238 20 Jan 00:20 ckeditor5-dev-docs
 lrwxr-xr-x    1 p  staff    25 31 Jan 10:37 ckeditor5-engine -> ../../../ckeditor5-engine
 ```
 

+ 7 - 1
docs/umberto.json

@@ -3,13 +3,19 @@
 	"slug": "ckeditor5",
 	"hexo-config": "docs/hexo-custom-config.json",
 	"path": "docs",
+	"observablesdocs": "module:utils/observablemixin~ObservableMixin",
 	"scripts": {
 		"snippet-adapter": "../scripts/docs/snippet-adapter/snippetadapter",
 		"import-path": "../scripts/docs/getrealimportpath"
 	},
 	"docsearch": {
 		"apiKey": "fc463c26455365ad403d5ec51796cd73",
-		"indexName": "ckeditor_nightly"
+		"indexName": "ckeditor_nightly",
+		"importants": [
+			"module:editor-balloon/ballooneditor~BalloonEditor.create",
+			"module:editor-classic/classiceditor~ClassicEditor.create",
+			"module:editor-inline/inlineeditor~InlineEditor.create"
+		]
 	},
 	"googleanalytics": {
 		"domains": [ "ckeditor5.github.io" ],

+ 0 - 8
gulpfile.js

@@ -10,14 +10,6 @@
 const path = require( 'path' );
 const gulp = require( 'gulp' );
 
-// Lint tasks. ---------------------------------------------------------------
-
-const ckeditor5Lint = require( '@ckeditor/ckeditor5-dev-lint' );
-
-gulp.task( 'lint', () => ckeditor5Lint.lint() );
-gulp.task( 'lint-staged', () => ckeditor5Lint.lintStaged() );
-gulp.task( 'pre-commit', [ 'lint-staged' ] );
-
 // Tests. ---------------------------------------------------------------------
 
 gulp.task( 'test', () => {

+ 1 - 1
lerna.json

@@ -5,7 +5,7 @@
     "."
   ],
   "hoist": true,
-  "nohoist": "guppy-pre-commit",
+  "nohoist": "husky",
   "commands": {
     "bootstrap": {
       "concurrency": 1

+ 16 - 3
package.json

@@ -45,11 +45,12 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-dev-docs": "^7.4.1",
-    "@ckeditor/ckeditor5-dev-lint": "^3.1.4",
     "@ckeditor/ckeditor5-dev-tests": "^8.2.2",
+    "eslint": "^4.8.0",
     "eslint-config-ckeditor5": "^1.0.6",
     "gulp": "^3.9.1",
-    "guppy-pre-commit": "^0.4.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^4.2.3",
     "lerna": "^2.2.0",
     "mgit2": "^0.7.2"
   },
@@ -66,9 +67,21 @@
     "url": "https://github.com/ckeditor/ckeditor5.git"
   },
   "scripts": {
+    "lint": "eslint --quiet '**/*.js'",
+    "precommit": "lint-staged",
     "test": "node --max_old_space_size=4096 ./node_modules/.bin/ckeditor5-dev-tests --reporter=dots",
     "install-optional-dependencies": "./scripts/install-optional-dependencies.sh",
     "switch-to-dev-dev": "./scripts/switch-to-dev-dev.sh",
     "build-and-publish-docs": "./scripts/docs/build-and-publish.js"
-  }
+  },
+  "lint-staged": {
+    "**/*.js": [
+      "eslint --quiet"
+    ]
+  },
+  "eslintIgnore": [
+	  "build/**",
+	  "coverage/**",
+	  "packages/**"
+  ]
 }

+ 0 - 5
scripts/switch-to-dev-dev.sh

@@ -23,11 +23,6 @@ echo "Linking ckeditor5-dev-env..."
 rm -rf node_modules/@ckeditor/ckeditor5-dev-env
 ln -s ../../../ckeditor5-dev/packages/ckeditor5-dev-env node_modules/@ckeditor
 
-echo "Linking ckeditor5-dev-lint..."
-
-rm -rf node_modules/@ckeditor/ckeditor5-dev-lint
-ln -s ../../../ckeditor5-dev/packages/ckeditor5-dev-lint node_modules/@ckeditor
-
 echo "Linking ckeditor5-dev-tests..."
 
 rm -rf node_modules/@ckeditor/ckeditor5-dev-tests