Browse Source

Docs: Major changes in how plugins are added loaded in docs snippets.

With previous approach it was impossible to do that due to incomplete `config.removePlugins` implementation, see https://github.com/ckeditor/ckeditor5/issues/6160.
Marek Lewandowski 5 years ago
parent
commit
6b9e054b76

+ 11 - 4
packages/ckeditor5-special-characters/docs/_snippets/features/special-characters-extended-category.js

@@ -3,15 +3,22 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document, console, ClassicEditor */
+/* globals window, document, console, ClassicEditor, SpecialCharactersEssentials */
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
+function SpecialCharactersArrowsExtended( editor ) {
+	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Arrows', [
+		{ title: 'simple arrow left', character: '←' },
+		{ title: 'simple arrow up', character: '↑' },
+		{ title: 'simple arrow right', character: '→' },
+		{ title: 'simple arrow down', character: '↓' }
+	] );
+}
+
 ClassicEditor
 	.create( document.querySelector( '#snippet-special-characters-extended-category' ), {
-		removePlugins: [
-			'SpecialCharactersEmoji'
-		],
+		extraPlugins: [ SpecialCharactersEssentials, SpecialCharactersArrowsExtended ],
 		toolbar: {
 			items: [
 				'heading',

+ 4 - 7
packages/ckeditor5-special-characters/docs/_snippets/features/special-characters-new-category.js

@@ -3,12 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document, console, ClassicEditor */
+/* globals window, document, console, ClassicEditor, SpecialCharactersEssentials */
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
-function ExtraCat( editor ) {
-	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji2', [
+function SpecialCharactersEmoji( editor ) {
+	editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
 		{ title: 'smiley face', character: '😊' },
 		{ title: 'rocket', character: '🚀' },
 		{ title: 'basketball', character: '🏀' },
@@ -19,9 +19,7 @@ function ExtraCat( editor ) {
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-special-characters-new-category' ), {
-		removePlugins: [
-			'SpecialCharactersArrowsExtended'
-		],
+		extraPlugins: [ SpecialCharactersEssentials, SpecialCharactersEmoji ],
 		toolbar: {
 			items: [
 				'heading',
@@ -60,7 +58,6 @@ ClassicEditor
 				'imageTextAlternative'
 			]
 		},
-		extraPlugins: [ ExtraCat ],
 		table: {
 			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		},

+ 7 - 34
packages/ckeditor5-special-characters/docs/_snippets/features/special-characters-source.js

@@ -9,41 +9,14 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
 import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
-
-class SpecialCharactersEmoji extends Plugin {
-	static get pluginName() {
-		return 'SpecialCharactersEmoji';
-	}
-
-	init() {
-		this.editor.plugins.get( 'SpecialCharacters' ).addItems( 'Emoji', [
-			{ title: 'smiley face', character: '😊' },
-			{ title: 'rocket', character: '🚀' },
-			{ title: 'basketball', character: '🏀' },
-			{ title: 'floppy disk', character: '💾' },
-			{ title: 'hearth', character: '❤' }
-		] );
-	}
-}
-
-class SpecialCharactersArrowsExtended extends Plugin {
-	static get pluginName() {
-		return 'SpecialCharactersArrowsExtended';
-	}
-
-	init() {
-		this.editor.plugins.get( 'SpecialCharacters' ).addItems( 'Arrows', [
-			{ title: 'simple arrow left', character: '←' },
-			{ title: 'simple arrow up', character: '↑' },
-			{ title: 'simple arrow right', character: '→' },
-			{ title: 'simple arrow down', character: '↓' }
-		] );
-	}
-}
+import SpecialCharactersCurrency from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersCurrency';
+import SpecialCharactersMathematical from '@ckeditor/ckeditor5-special-characters/src/SpecialCharactersMathematical';
 
 ClassicEditor.builtinPlugins.push( SpecialCharacters );
-ClassicEditor.builtinPlugins.push( SpecialCharactersEssentials );
-ClassicEditor.builtinPlugins.push( SpecialCharactersEmoji );
-ClassicEditor.builtinPlugins.push( SpecialCharactersArrowsExtended );
 
 window.ClassicEditor = ClassicEditor;
+window.SpecialCharacters = SpecialCharacters;
+window.SpecialCharactersCurrency = SpecialCharactersCurrency;
+window.SpecialCharactersMathematical = SpecialCharactersMathematical;
+window.SpecialCharactersEssentials = SpecialCharactersEssentials;
+window.Plugin = Plugin;

+ 2 - 5
packages/ckeditor5-special-characters/docs/_snippets/features/special-characters.js

@@ -3,16 +3,13 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document, console, ClassicEditor */
+/* globals window, document, console, ClassicEditor, SpecialCharactersEssentials */
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-special-characters' ), {
-		removePlugins: [
-			'SpecialCharactersEmoji',
-			'SpecialCharactersArrowsExtended'
-		],
+		extraPlugins: [ SpecialCharactersEssentials ],
 		toolbar: {
 			items: [
 				'heading',

+ 9 - 4
packages/ckeditor5-special-characters/docs/features/special-characters.md

@@ -21,7 +21,7 @@ Use the editor below to see the {@link module:special-characters/specialcharacte
 
 You can define a new special characters category using the {@link module:special-characters/specialcharacters~SpecialCharacters#addItems `SpecialCharacters#addItems()`} function.
 
-For example, the following plugin adds the `Emoji` category in the special characters dropdown.
+For example, the following plugin adds the "Emoji" category in the special characters dropdown.
 
 ```js
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
@@ -51,7 +51,7 @@ After adding the above plugin into the editor, the new special characters catego
 
 #### Custom special characters category demo
 
-Use the special character icon in the editor's toolbar then select `Emoji` in the select dropdown in order to insert a emoji into the editor.
+Use the special character icon in the editor's toolbar then select "Emoji" in the select dropdown in order to insert a emoji into the editor.
 
 {@snippet features/special-characters-new-category}
 
@@ -66,7 +66,6 @@ class SpecialCharactersArrowsExtended extends Plugin {
 	}
 
 	init() {
-		// The `Arrows` category is provided by the `SpecialCharactersArrows` plugin.
 		this.editor.plugins.get( 'SpecialCharacters' ).addItems( 'Arrows', [
 			{ title: 'simple arrow left', character: '←' },
 			{ title: 'simple arrow up', character: '↑' },
@@ -83,7 +82,7 @@ class SpecialCharactersArrowsExtended extends Plugin {
 
 #### Extending existing special characters category category demo
 
-Use the special character icon in the editor's toolbar then select `Arrows` in the select dropdown in order to add new arrows.
+Use the special character icon in the editor's toolbar then select "Arrows" in the select dropdown. You'll see that it contains more arrows than the other instances.
 
 {@snippet features/special-characters-extended-category}
 
@@ -116,6 +115,12 @@ ClassicEditor
 	.catch( ... );
 ```
 
+#### Removing special character categories demo
+
+After clicking special character icon in the editor's toolbar you can see that only few categories are available compared to other instances.
+
+{@snippet features/special-characters-limited-categories}
+
 ## Installation
 
 To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-special-characters`](https://www.npmjs.com/package/@ckeditor/ckeditor5-special-characters) package: