Browse Source

Internal: Added manual test and basic UI implementation.

Note that UI icon relies on core being checkout to t/ckeditor5/1457 branch (fb1b08c7b3a06b56f0bc8d4c76f8060c07ab5572 commit).
Marek Lewandowski 6 years ago
parent
commit
ae47818f9d

+ 3 - 2
packages/ckeditor5-remove-format/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@ckeditor/ckeditor5-core": "^12.0.0",
     "@ckeditor/ckeditor5-ui": "^12.0.0",
-    "@ckeditor/ckeditor5-utils": "^12.0.0"
+    "@ckeditor/ckeditor5-utils": "^12.0.0",
+    "eslint-plugin-ckeditor5-rules": "^0.0.2"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "^11.0.0",
@@ -24,7 +25,7 @@
     "@ckeditor/ckeditor5-link": "^11.0.0",
     "@ckeditor/ckeditor5-typing": "^12.0.0",
     "@ckeditor/ckeditor5-undo": "^11.0.0",
-    "eslint": "^5.5.0",
+    "eslint": "^5.15.3",
     "eslint-config-ckeditor5": "^1.0.11",
     "husky": "^1.3.1",
     "lint-staged": "^7.0.0"

+ 37 - 0
packages/ckeditor5-remove-format/src/removeformat.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module highlight/highlight
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import RemoveFormatUI from './removeformatui';
+
+/**
+ * The remove format plugin.
+ *
+ * For a detailed overview, check the {@glink features/removeformat Remove Format feature} documentation.
+ *
+ * This is a "glue" plugin which loads logic and UI of the remove format plugin.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class RemoveFormat extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ RemoveFormatUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'RemoveFormat';
+	}
+}

+ 53 - 0
packages/ckeditor5-remove-format/src/removeformatui.js

@@ -0,0 +1,53 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module highlight/removeformatui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import eraseIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
+
+const REMOVE_FORMAT = 'removeformat';
+
+/**
+ * The default remove format UI plugin.
+ *
+ * See the {@link module:removeformat/removeformat~RemoveFormatConfig#options configuration} to learn more
+ * about the defaults.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class RemoveFormatUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'RemoveFormatUI';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( REMOVE_FORMAT, locale => {
+			// const command = editor.commands.get( BOLD );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Remove format' ),
+				icon: eraseIcon,
+				tooltip: true
+			} );
+
+			return view;
+		} );
+	}
+}

+ 15 - 0
packages/ckeditor5-remove-format/tests/manual/removeformat.html

@@ -0,0 +1,15 @@
+<div id="editor">
+	<p>
+		Paragraph with
+		<strong>bold</strong>
+		,
+		<em>emphasize</em>
+		and some
+		<mark class="pen-red">text marked red</mark>
+		.
+	</p>
+
+	<p>
+		What about content that should not be removed? Say <a href="#">Links for example</a>?
+	</p>
+</div>

+ 34 - 0
packages/ckeditor5-remove-format/tests/manual/removeformat.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console, window */
+
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
+import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
+import RemoveFormat from '../../src/removeformat';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+
+ClassicEditor
+	.create( global.document.querySelector( '#editor' ), {
+		plugins: [ Bold, Clipboard, Enter, Highlight, Italic, Link, Paragraph, RemoveFormat, ShiftEnter, Typing, Underline, Undo ],
+		toolbar: [ 'removeformat', 'italic', 'bold', 'link', 'underline', 'highlight', '|', 'undo', 'redo' ]
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 3 - 0
packages/ckeditor5-remove-format/tests/manual/removeformat.md

@@ -0,0 +1,3 @@
+# Remove Format
+
+Basic manual test for the remove format feature.