Merge branch 'i/9802'

README.md

@@ -459,6 +459,18 @@ See CKEditor 5 release blog posts [on the CKEditor blog](https://ckeditor.com/bl
 	</td>
 </tr>
 
+<tr>
+	<td>
+		<a href="https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-find-and-replace"><code>@ckeditor/ckeditor5-find-and-replace</code></a>
+	</td>
+	<td>
+		<a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-find-and-replace"><img src="https://img.shields.io/npm/v/@ckeditor/ckeditor5-find-and-replace.svg" alt="@ckeditor/ckeditor5-find-and-replace npm package badge"></a>
+	</td>
+	<td>
+		The find and replace feature.
+	</td>
+</tr>
+
 <tr>
 	<td>
 		<a href="https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-font"><code>@ckeditor/ckeditor5-font</code></a>

package.json

@@ -45,6 +45,7 @@
     "@ckeditor/ckeditor5-engine": "^28.0.0",
     "@ckeditor/ckeditor5-enter": "^28.0.0",
     "@ckeditor/ckeditor5-essentials": "^28.0.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^0.0.1",
     "@ckeditor/ckeditor5-font": "^28.0.0",
     "@ckeditor/ckeditor5-heading": "^28.0.0",
     "@ckeditor/ckeditor5-highlight": "^28.0.0",

packages/ckeditor5-find-and-replace/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-find-and-replace/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Contributing
+========================================
+
+See the [official contributors' guide to CKEditor 5](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html) to learn more.

packages/ckeditor5-find-and-replace/LICENSE.md

@@ -0,0 +1,17 @@
+Software License Agreement
+==========================
+
+**CKEditor 5 Find and Replace Feature**  – https://github.com/ckeditor/ckeditor5-find-and-replace <br>
+Copyright (c) 2003-2021, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.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.

packages/ckeditor5-find-and-replace/README.md

@@ -0,0 +1,8 @@
+CKEditor 5 find and replace feature
+===========================
+
+This package implements the find and replace feature for CKEditor 5.
+
+## License
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

packages/ckeditor5-find-and-replace/ckeditor5-metadata.json

@@ -0,0 +1,18 @@
+{
+	"plugins": [
+		{
+			"name": "Find and replace",
+			"className": "FindAndReplace",
+			"path": "src/findandreplace.js",
+			"description": "This package implements the find and replace function in CKEditor 5.",
+			"docs": "features/find-and-replace.html",
+			"uiComponents": [
+				{
+					"type": "SplitButton",
+					"name": "findAndReplace",
+					"iconPath": "theme/icons/find-replace.svg"
+				}
+			]
+		}
+	]
+}

packages/ckeditor5-find-and-replace/docs/_snippets/features/build-find-and-replace-source.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+
+ClassicEditor.builtinPlugins.push( FindAndReplace, Underline );
+
+window.ClassicEditor = ClassicEditor;

packages/ckeditor5-find-and-replace/docs/_snippets/features/find-and-replace.html

@@ -0,0 +1,12 @@
+<div id="snippet-findandreplace">
+	<h2>Steam locos are really useful!</h2>
+
+	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/diesel_locos.jpg" alt="Steam locomotives waiting at a small freight station.">
+		<figcaption>Steam locomotives waiting at a small freight station.</figcaption>
+	</figure>
+<p>A steam locomotive is one that uses a steam engine as the prime source of power to move and pull the cars.</p>
+<p>Steam locomotives are very popular today and can be seen working on all continents (with the exception of Antarctica maybe, where the railway network is rather scarce). Being powerful and not requiring additional technical infrastructure like their younger siblings &mdash; the electric locomotives &mdash; steam engines are perfect for most types of tasks.</p>
+<p>Steam engines can pull passenger trains, boxcars with goods, tank cars, platform wagons with wood logs... Should the conditions be tough and the load be too heavy for a single steam locomotive, that can be put together in a pair of engines. And sometimes you can even see three of four of them if the job is exceptionally demanding.</p>
+<p>Most national and private railway companies nowadays own or lease a multitude of steam engines, ranging from small, nimble ones used for maneuvering on the station to the bulky, large ones for the cross-continental trail.</p>
+<p>Steam engines also come in all shapes and all colors, making up a happy useful bunch.</p>
+</div>

packages/ckeditor5-find-and-replace/docs/_snippets/features/find-and-replace.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-findandreplace' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'bold',
+				'italic',
+				'underline',
+				'link',
+				'insertTable',
+				'|',
+				'undo',
+				'redo',
+				'|',
+				'findAndReplace'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		window.attachTourBalloon( {
+			target: window.findToolbarItem(
+				editor.ui.view.toolbar,
+				item => item.buttonView && item.buttonView.tooltip && item.buttonView.tooltip === 'Find and replace' ),
+			text: 'Click to find and replace anything you need.',
+			editor
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

packages/ckeditor5-find-and-replace/docs/api/find-and-replace.md

@@ -0,0 +1,34 @@
+---
+category: api-reference
+---
+
+# CKEditor 5 find and replace feature
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-find-and-replace.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-find-and-replace)
+
+This package implements the find and replace feature for CKEditor 5.
+
+## Demo
+
+Check out the {@link features/find-and-replace#demo showcase demo} in the Find and replace feature guide.
+
+## Documentation
+
+See the {@link features/find-and-replace Find and replace feature} guide and the {@link module:find-and-replace/findandreplace~FindAndReplace} plugin documentation.
+
+## Installation
+
+```
+npm install --save @ckeditor/ckeditor5-find-and-replace
+```
+
+## Contribute
+
+The source code of this package is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-find-and-replace.
+
+## External links
+
+* [`@ckeditor/ckeditor5-find-and-replace` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-find-and-replace)
+* [`ckeditor/ckeditor5-find-and-replace` on GitHub](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-find-and-replace)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
+* [Changelog](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md)

packages/ckeditor5-find-and-replace/docs/features/find-and-replace.md

@@ -0,0 +1,78 @@
+---
+title: Find and replace
+category: features
+modified_at: 2021-06-29
+---
+
+{@snippet features/build-find-and-replace-source}
+
+The {@link module:find-and-replace/findandreplace~FindAndReplace} feature allows for finding and replacing any text in the editor easily. It helps the user find words, word parts or phrases matching the case of the searched text, which is especially helpful in lengthy documents and one that may utilize certain words in different contexts. It also lets the editor replace a chosen one or all instances of the searched phrase with a single click, making tedious, repeated changes fast and easy. This may e.g. help ensuring the cohesion of an edited piece of code, while renaming a variable or a function.
+
+## Demo
+
+Use the toolbar "Find and replace" button to find and replace parts of the text you would like to find, and/or replace. Or use the <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>+<kbd>F</kbd> keyboard shortcut to invoke the search and replace panel. For a starter, try replacing "steam" with "diesel" to make the demo content more up to date. Be careful to match the case, for there are different instances of the word present in the document!
+
+{@snippet features/find-and-replace}
+
+## Related features
+
+* {@link features/text-transformation Automatic text transformation} &ndash; Enables automatic turning of snippets such as `(tm)` into `™` and `"foo"` into `“foo”`.
+
+## Installation
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-find-and-replace`](https://www.npmjs.com/package/@ckeditor/ckeditor5-find-and-replace) package:
+
+```
+npm install --save @ckeditor/ckeditor5-find-and-replace
+```
+
+Then add the `FindAndReplace` plugin to your plugin list:
+
+```js
+import FindAndReplace from '@ckeditor/ckeditor5-find-and-replace/src/findandreplace';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ FindAndReplace, ... ],
+		toolbar: [ 'findAndReplace', ... ],
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+<info-box info>
+	Read more about {@link builds/guides/integration/installing-plugins installing plugins}.
+</info-box>
+
+<!-- TODO: Update this with proper description and values, and code snippet for replace / replaceAll -->
+## Common API
+
+The {@link module:find-and-replace/findandreplace~FindAndReplace} plugin registers the `'findAndReplace'` UI button component and the {@link module:find-and-replace/findcommand~FindCommand `'find'`}, {@link module:find-and-replace/findnextcommand~FindNextCommand `'findNext'`}, {@link module:find-and-replace/findpreviouscommand~FindPreviousCommand `'findPrevious'`}, {@link module:find-and-replace/replacecommand~ReplaceCommand `'replace'`} and {@link module:find-and-replace/replaceallcommand~ReplaceAllCommand `'replaceAll'`} commands.
+
+The commands can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
+
+```js
+// Find all occurrences of a given text.
+editor.execute( 'find', 'steam' );
+```
+
+You can also move the highlight through all matched results with the {@link module:find-and-replace/findnextcommand~FindNextCommand `'findNext'`} and {@link module:find-and-replace/findpreviouscommand~FindPreviousCommand `'findPrevious'`} commands:
+
+```js
+// Move the search highlight to the next match.
+editor.execute( 'findNext' );
+```
+
+You can also replace all occurrences of a given text in the editor instance using the {@link module:find-and-replace/replaceallcommand~ReplaceAllCommand `'replaceAll'`} command:
+
+```js
+editor.execute( 'replaceAll', 'diesel', 'steam' );
+```
+
+<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-find-and-replace.

packages/ckeditor5-find-and-replace/lang/contexts.json

@@ -0,0 +1,13 @@
+{
+	"Find and replace": "The tooltip of a find and replace button's in the toolbar.",
+	"Find in text…": "The label for the searched text in the find and replace dropdown.",
+	"Find": "The label for the find action button in the find and replace dropdown.",
+	"Previous result": "The label for the previous result button in the find and replace dropdown.",
+	"Next result": "The label for the previous result button in the find and replace dropdown.",
+	"Replace": "The label for the (single) replace action button in the find and replace dropdown.",
+	"Replace all": "The label for the replace all action button in the find and replace dropdown.",
+	"Match case": "The label for the match case checkbox in the find and replace dropdown.",
+	"Whole words only": "The label for the whole words only checkbox in the find and replace dropdown.",
+	"Replace with…": "The label for the text replacement in the find and replace dropdown.",
+	" of ": "The text between currently highlighted text offset and the count of all matches in the find and replace dropdown."
+}

packages/ckeditor5-find-and-replace/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@ckeditor/ckeditor5-find-and-replace",
+  "version": "0.0.1",
+  "description": "Find and replace feature for CKEditor 5.",
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-feature",
+    "ckeditor5-plugin"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "@ckeditor/ckeditor5-ui": "^28.0.0",
+    "@ckeditor/ckeditor5-utils": "^28.0.0",
+    "ckeditor5": "^28.0.0",
+    "lodash-es": "^4.17.15"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-dev-utils": "^25.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^28.0.0",
+    "@ckeditor/ckeditor5-core": "^28.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "^28.0.0",
+    "@ckeditor/ckeditor5-engine": "^28.0.0",
+    "@ckeditor/ckeditor5-essentials": "^28.0.0",
+    "@ckeditor/ckeditor5-font": "^28.0.0",
+    "@ckeditor/ckeditor5-highlight": "^28.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^28.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^28.0.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=5.7.1"
+  },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://ckeditor.com",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-find-and-replace"
+  },
+  "files": [
+    "lang",
+    "src",
+    "theme",
+    "build"
+  ],
+  "scripts": {
+    "dll:build": "webpack"
+  }
+}