Piotrek Koszuliński před 6 roky
rodič
revize
1c16dfab3a

+ 11 - 2
docs/_snippets/framework/development-tools/inspector.html

@@ -1,7 +1,16 @@
 <div id="snippet-classic-editor">
-	<h2>CKEditor 5 Inspector demo</h2>
+	<h2>CKEditor 5 inspector demo</h2>
 
-	<p>Click the button below to enable the <a href="https://github.com/ckeditor/ckeditor5-inspector">CKEditor 5 Inspector</a> for this editor instance.</p>
+	<p>Click the button below to enable the <a href="https://github.com/ckeditor/ckeditor5-inspector">CKEditor 5 inspector</a> for this editor instance.</p>
+
+	<p>Once you do this, you can:</p>
+
+	<ul>
+		<li>Browse and inspect the model and view structures.</li>
+		<li>Observe the selection position.</li>
+		<li>Check the list of commands and their state.</li>
+		<li>More feature comming soon!</li>
+	</ul>
 </div>
 
 <button type="button" id="snippet-inspect-button">Inspect editor</button>

+ 1 - 1
docs/framework/guides/architecture/core-editor-architecture.md

@@ -71,7 +71,7 @@ You can see how to implement a simple plugin in the {@link framework/guides/quic
 A command is a combination of an action (a callback) and a state (a set of properties). For instance, the `bold` command applies or removes the bold attribute from the selected text. If the text in which the selection is placed has bold applied already, the value of the command is `true`, `false` otherwise. If the `bold` command can be executed on the current selection, it is enabled. If not (because, for example, bold is not allowed in this place), it is disabled.
 
 <info-box>
-	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector instance 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.
+	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>
 
 All commands need to inherit from the {@link module:core/command~Command} class. Commands need to be added to the editor's {@link module:core/editor/editor~Editor#commands command collection} so they can be executed by using the {@link module:core/editor/editor~Editor#execute `Editor#execute()`} method.

+ 1 - 1
docs/framework/guides/architecture/editing-engine.md

@@ -8,7 +8,7 @@ order: 30
 The [`@ckeditor/ckeditor5-engine`](https://www.npmjs.com/package/@ckeditor/ckeditor5-engine) package is by far the biggest package of all. Therefore, this guide will only scratch the surface here by introducing the main architecture layers and concepts. More detailed guides will follow.
 
 <info-box>
-	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector instance 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.
+	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>
 
 ## Overview

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

@@ -118,7 +118,7 @@ ClassicEditor
 </info-box>
 
 <info-box>
-	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector instance 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.
+	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>
 
 ## Test suite and CI

+ 1 - 1
docs/framework/guides/creating-simple-plugin.md

@@ -16,7 +16,7 @@ CKEditor plugins need to implement the {@link module:core/plugin~PluginInterface
 The plugin that you will write will use a part of the {@link features/image image feature} and will add a simple UI to it &mdash; an "Insert image" button that will open a prompt window asking for the image URL when clicked. Submitting the URL will result in inserting the image into the content and selecting it.
 
 <info-box>
-	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector instance 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.
+	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>
 
 ## Step 1. Installing dependencies

+ 9 - 4
docs/framework/guides/development-tools.md

@@ -9,7 +9,7 @@ In this guide you will learn about developer tools that will help you develop an
 
 ## CKEditor 5 inspector
 
-The official [editor instance inspector](https://github.com/ckeditor/ckeditor5-inspector) provides rich debugging tools for editor internals like {@link framework/guides/architecture/editing-engine#model model}, {@link framework/guides/architecture/editing-engine#view view}, and  {@link framework/guides/architecture/core-editor-architecture#commands commands}.
+The official [CKEditor 5 inspector](https://github.com/ckeditor/ckeditor5-inspector) provides rich debugging tools for editor internals like {@link framework/guides/architecture/editing-engine#model model}, {@link framework/guides/architecture/editing-engine#view view}, and  {@link framework/guides/architecture/core-editor-architecture#commands commands}.
 
 It allows observing changes to the data structures and the selection live in the editor which is particularly helpful when developing new editor features or getting to understand the existing ones.
 
@@ -20,7 +20,7 @@ It allows observing changes to the data structures and the selection live in the
 You can import the inspector as an [`@ckeditor/ckeditor5-inspector`](https://www.npmjs.com/package/@ckeditor/ckeditor5-inspector) package into your project:
 
 ```
-yarn add --dev @ckeditor/ckeditor5-inspector
+npm install --save-dev @ckeditor/ckeditor5-inspector
 ```
 
 and then either import it as a module:
@@ -68,10 +68,14 @@ The editor switcher is in the upper–right corner of the inspector panel.
 
 ### Demo
 
-Click the <b>"Inspect editor"</b> button below to attache the inspector to the editor:
+Click the <b>"Inspect editor"</b> button below to attach the inspector to the editor:
 
 {@snippet framework/development-tools/inspector}
 
+### Contributing to the inspector
+
+The source code of CKEditor 5 inspector and its issue tracker is available on GitHub in https://github.com/ckeditor/ckeditor5-inspector.
+
 ## Testing helpers
 
 The `getData()` and `setData()` functions exposed by {@link module:engine/dev-utils/model model dev utils} and {@link module:engine/dev-utils/view view dev utils} are useful development helpers.
@@ -92,8 +96,9 @@ import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 ClassicEditor
 	.create( '<p>Hello <b>world</b>!</p>' )
 	.then( editor => {
-		// '<paragraph>[]Hello <$text bold="true">world</$text>!</paragraph>'
 		console.log( getData( editor.model ) );
+
+		// -> '<paragraph>[]Hello <$text bold="true">world</$text>!</paragraph>'
 	} );
 ```
 

+ 1 - 1
docs/framework/guides/quick-start.md

@@ -219,7 +219,7 @@ Open this page in your browser and you should see the editor up and running. Mak
 {@img assets/img/framework-quick-start-classic-editor.png 976 Screenshot of a classic editor with bold and italic features.}
 
 <info-box>
-	We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector instance 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.
+	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>
 
 ## What's next?

+ 3 - 3
docs/framework/guides/tutorials/implementing-a-block-widget.md

@@ -487,7 +487,7 @@ The HTML that you have added to the `index.html` file is your editor's data. Thi
 
 However, what's in the model?
 
-To learn that, we recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector instance inspector}. Once {@link framework/guides/development-tools#ckeditor-5-inspector#installing-the-inspector installed}, you need to load it in the `app.js` file:
+To learn that, we recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector}. Once {@link framework/guides/development-tools#ckeditor-5-inspector#installing-the-inspector installed}, you need to load it in the `app.js` file:
 
 ```js
 // app.js
@@ -526,7 +526,7 @@ ClassicEditor
 
 After rebuilding your project and refreshing the page you will see the inspector:
 
-{@img assets/img/tutorial-implementing-a-widget-4b.png Screenshot of a the simple box widget's structure displayed by CKEditor 5 Inspector.}
+{@img assets/img/tutorial-implementing-a-widget-4b.png Screenshot of a the simple box widget's structure displayed by CKEditor 5 inspector.}
 
 You will see the following HTML-like string:
 
@@ -816,7 +816,7 @@ Should result in:
 
 {@img assets/img/tutorial-implementing-a-widget-6.png Screenshot of a simple box instance inserted at the beginning of the editor content.}
 
-You can also try inspecting the `isEnabled` property value (or just checking it in CKEditor 5 Inspector):
+You can also try inspecting the `isEnabled` property value (or just checking it in CKEditor 5 inspector):
 
 ```js
 console.log( editor.commands.get( 'insertSimpleBox' ).isEnabled );