Jelajahi Sumber

Heading buttons WIP.

Szymon Kupś 7 tahun lalu
induk
melakukan
b3796094bf

+ 56 - 0
packages/ckeditor5-heading/src/headingbuttonsui.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module heading/headingbuttonsui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import { getLocalizedOptions } from './utils';
+import iconHeading1 from '../theme/icons/heading1.svg';
+import iconHeading2 from '../theme/icons/heading2.svg';
+
+const defaultIcons = {
+	heading1: iconHeading1,
+	heading2: iconHeading2
+};
+
+/**
+ * TODO: description
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HeadingButtonsUI extends Plugin {
+	init() {
+		const options = getLocalizedOptions( this.editor );
+
+		options
+			.filter( item => item.model !== 'paragraph' )
+			.map( item => this._createButton( item ) );
+	}
+
+	_createButton( option ) {
+		const editor = this.editor;
+
+		editor.ui.componentFactory.add( option.model, locale => {
+			const view = new ButtonView( locale );
+			const command = editor.commands.get( 'heading' );
+
+			view.label = option.title;
+			view.icon = option.icon || defaultIcons[ option.model ];
+			view.tooltip = true;
+			view.bind( 'isEnabled' ).to( command );
+			view.bind( 'isOn' ).to( command, 'value', value => value == option.model );
+
+			view.on( 'execute', () => {
+				editor.execute( 'heading', { value: option.model } );
+			} );
+
+			return view;
+		} );
+	}
+}

+ 2 - 34
packages/ckeditor5-heading/src/headingui.js

@@ -11,6 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
 
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import { getLocalizedOptions } from './utils';
 
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
@@ -28,7 +29,7 @@ export default class HeadingUI extends Plugin {
 	init() {
 		const editor = this.editor;
 		const t = editor.t;
-		const options = this._getLocalizedOptions();
+		const options = getLocalizedOptions( editor );
 		const defaultTitle = t( 'Choose heading' );
 		const dropdownTooltip = t( 'Heading' );
 
@@ -102,37 +103,4 @@ export default class HeadingUI extends Plugin {
 			return dropdownView;
 		} );
 	}
-
-	/**
-	 * Returns heading options as defined in `config.heading.options` but processed to consider
-	 * editor localization, i.e. to display {@link module:heading/heading~HeadingOption}
-	 * in the correct language.
-	 *
-	 * Note: The reason behind this method is that there's no way to use {@link module:utils/locale~Locale#t}
-	 * when the user config is defined because the editor does not exist yet.
-	 *
-	 * @private
-	 * @returns {Array.<module:heading/heading~HeadingOption>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-		const localizedTitles = {
-			Paragraph: t( 'Paragraph' ),
-			'Heading 1': t( 'Heading 1' ),
-			'Heading 2': t( 'Heading 2' ),
-			'Heading 3': t( 'Heading 3' )
-		};
-
-		return editor.config.get( 'heading.options' ).map( option => {
-			const title = localizedTitles[ option.title ];
-
-			if ( title && title != option.title ) {
-				// Clone the option to avoid altering the original `config.heading.options`.
-				option = Object.assign( {}, option, { title } );
-			}
-
-			return option;
-		} );
-	}
 }

+ 31 - 0
packages/ckeditor5-heading/src/utils.js

@@ -0,0 +1,31 @@
+/**
+ * Returns heading options as defined in `config.heading.options` but processed to consider
+ * editor localization, i.e. to display {@link module:heading/heading~HeadingOption}
+ * in the correct language.
+ *
+ * Note: The reason behind this method is that there's no way to use {@link module:utils/locale~Locale#t}
+ * when the user config is defined because the editor does not exist yet.
+ *
+ * @private
+ * @returns {Array.<module:heading/heading~HeadingOption>}.
+ */
+export function getLocalizedOptions( editor ) {
+	const t = editor.t;
+	const localizedTitles = {
+		Paragraph: t( 'Paragraph' ),
+		'Heading 1': t( 'Heading 1' ),
+		'Heading 2': t( 'Heading 2' ),
+		'Heading 3': t( 'Heading 3' )
+	};
+
+	return editor.config.get( 'heading.options' ).map( option => {
+		const title = localizedTitles[ option.title ];
+
+		if ( title && title != option.title ) {
+			// Clone the option to avoid altering the original `config.heading.options`.
+			option = Object.assign( {}, option, { title } );
+		}
+
+		return option;
+	} );
+}

+ 3 - 2
packages/ckeditor5-heading/tests/manual/heading.js

@@ -9,13 +9,14 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
 import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import Heading from '../../src/heading';
+import HeadingButtonsUI from '../../src/headingbuttonsui';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Undo, Heading, Paragraph ],
-		toolbar: [ 'heading', '|', 'undo', 'redo' ]
+		plugins: [ Enter, Typing, Undo, Heading, Paragraph, HeadingButtonsUI ],
+		toolbar: [ 'heading', '|', 'undo', 'redo', '|', 'heading1', 'heading2', 'heading3' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 1 - 0
packages/ckeditor5-heading/theme/icons/heading1.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#000"><path d="M1.3 17c-1 0-1.3-.3-1.3-1V4c0-.7.4-1 1.3-1 .8 0 1.2.3 1.2 1v4.4c0 .1 0 .2.2.2h5V4s0-1 1.3-1 1.3 1 1.3 1v12c0 .6-.4 1-1.3 1-.8 0-1.2-.4-1.2-1v-5.2l-.2-.1h-5V16c0 .7-.5 1-1.4 1zm12.4-7c-.2.2-.3.2-.5.1a.4.4 0 0 1-.2-.4v-.6c0-.5.2-1 .7-1.4l1.6-1.2c.4-.3 1-.5 1.5-.5h.5c.2 0 .4 0 .6.3l.2.6v9.3c0 .5-.3.8-1 .8-1.1 0-1.1-.8-1.1-.8V8.3l-2.3 1.8z"/></g></g></svg>

+ 1 - 0
packages/ckeditor5-heading/theme/icons/heading2.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#000"><path d="M20 9.2c0 .9-.3 1.8-1 2.6a19.8 19.8 0 0 1-3.4 3.5 234.8 234.8 0 0 0 4.1.3c.2.1.3.3.3.6 0 .2 0 .4-.3.5-.1.2-.3.3-.5.3h-5.5c-.2 0-.4 0-.6-.3a.8.8 0 0 1-.2-.5c0-.6.2-1 .6-1.4 1.7-1.4 2.9-2.4 3.5-3.2.5-.8.8-1.5.8-2.2 0-1.1-.6-1.7-1.7-1.7-.6 0-1.4.2-2.2.5h-.6a.5.5 0 0 1-.2-.5v-.2c0-.3 0-.5.2-.7.1-.2.3-.4.6-.4.8-.3 1.6-.4 2.5-.4a4 4 0 0 1 2.6.8 3 3 0 0 1 1 2.4zM1 17a1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.8V4.1c0-.3.1-.6.3-.8.2-.2.5-.3.8-.3h.3c.3 0 .6.1.8.3.2.2.3.5.3.8v4.3c0 .1 0 .2.2.2h5V4.1c0-.3.2-.6.4-.8.2-.2.5-.3.8-.3h.3c.3 0 .6.1.8.3.2.2.3.5.3.8v11.8c0 .3-.1.6-.3.8a1 1 0 0 1-.8.3h-.3a1 1 0 0 1-.8-.3 1 1 0 0 1-.3-.8v-5c0-.2 0-.2-.2-.2h-5v5.2c0 .3-.2.6-.4.8a1 1 0 0 1-.8.3h-.3z"/></g></g></svg>