Parcourir la source

Added a fake icon and introduced a command that adds the horizontal rule to the editor.

Kamil Piechaczek il y a 6 ans
Parent
commit
e18ec481d5

+ 3 - 0
packages/ckeditor5-horizontal-line/lang/contexts.json

@@ -0,0 +1,3 @@
+{
+	"Horizontal rule": "Horizontal rule"
+}

+ 1 - 0
packages/ckeditor5-horizontal-line/package.json

@@ -11,6 +11,7 @@
   ],
   "dependencies": {
     "@ckeditor/ckeditor5-core": "^12.2.1",
+    "@ckeditor/ckeditor5-ui": "^14.0.0",
     "@ckeditor/ckeditor5-widget": "^11.0.4"
   },
   "devDependencies": {

+ 37 - 0
packages/ckeditor5-horizontal-line/src/horizontalrulecommand.js

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module horizontal-rule/horizontalrulecommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
+
+export default class HorizontalRuleCommand extends Command {
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		this.isEnabled = true;
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 */
+	execute() {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		model.change( writer => {
+			const modelElement = writer.createElement( 'horizontalRule' );
+			const insertPosition = findOptimalInsertionPosition( selection, model );
+
+			model.insertContent( modelElement, insertPosition );
+		} );
+	}
+}

+ 3 - 0
packages/ckeditor5-horizontal-line/src/horizontalruleediting.js

@@ -9,6 +9,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import HorizontalRuleCommand from './horizontalrulecommand';
 
 import '../theme/horizontalrule.css';
 
@@ -61,5 +62,7 @@ export default class HorizontalRuleEditing extends Plugin {
 					return modelWriter.createElement( 'horizontalRule' );
 				}
 			} );
+
+		editor.commands.add( 'horizontalRule', new HorizontalRuleCommand( editor ) );
 	}
 }

+ 26 - 0
packages/ckeditor5-horizontal-line/src/horizontalruleui.js

@@ -8,9 +8,35 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import horizontalRuleIcon from '../theme/icons/horizontalrule.svg';
 
 /**
  * @extends module:core/plugin~Plugin
  */
 export default class HorizontalRuleUI extends Plugin {
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		// Add horizontalRule button to feature components.
+		editor.ui.componentFactory.add( 'horizontalRule', locale => {
+			const command = editor.commands.get( 'horizontalRule' );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Horizontal rule' ),
+				icon: horizontalRuleIcon,
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => editor.execute( 'horizontalRule' ) );
+
+			return view;
+		} );
+	}
 }

+ 1 - 1
packages/ckeditor5-horizontal-line/tests/manual/horizontalrule.js

@@ -13,7 +13,7 @@ ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [ ArticlePluginSet, HorizontalRule ],
 		toolbar: [
-			'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'undo', 'redo'
+			'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'undo', 'redo', 'horizontalRule'
 		]
 	} )
 	.then( editor => {

+ 1 - 0
packages/ckeditor5-horizontal-line/theme/icons/horizontalrule.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.187 17H5.773c-.637 0-1.092-.138-1.364-.415-.273-.277-.409-.718-.409-1.323V4.738c0-.617.14-1.062.419-1.332.279-.27.73-.406 1.354-.406h4.68c.69 0 1.288.041 1.793.124.506.083.96.242 1.36.478.341.197.644.447.906.75a3.262 3.262 0 0 1 .808 2.162c0 1.401-.722 2.426-2.167 3.075C15.05 10.175 16 11.315 16 13.01a3.756 3.756 0 0 1-2.296 3.504 6.1 6.1 0 0 1-1.517.377c-.571.073-1.238.11-2 .11zm-.217-6.217H7v4.087h3.069c1.977 0 2.965-.69 2.965-2.072 0-.707-.256-1.22-.768-1.537-.512-.319-1.277-.478-2.296-.478zM7 5.13v3.619h2.606c.729 0 1.292-.067 1.69-.2a1.6 1.6 0 0 0 .91-.765c.165-.267.247-.566.247-.897 0-.707-.26-1.176-.778-1.409-.519-.232-1.31-.348-2.375-.348H7z"/></svg>