Fix the plugins & configuration of documentation snippets.

ckeditor · Jul 22, 2019 · a0a8e6e · a0a8e6e
1 parent 63834d8
commit a0a8e6e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 30 deletions.
diff --git a/docs/_snippets/framework/build-extending-content-source.js b/docs/_snippets/framework/build-extending-content-source.js
@@ -7,7 +7,9 @@
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import Font from '@ckeditor/ckeditor5-font/src/font';
 
 ClassicEditor.builtinPlugins.push( Code );
+ClassicEditor.builtinPlugins.push( Font );
 
 window.ClassicEditor = ClassicEditor;
diff --git a/docs/_snippets/framework/extending-content-arbitrary-attribute-values.js b/docs/_snippets/framework/extending-content-arbitrary-attribute-values.js
@@ -6,7 +6,6 @@
 /* globals ClassicEditor, console, window, document */
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
-import Font from '@ckeditor/ckeditor5-font/src/font';
 
 function HandleFontSizeValue( editor ) {
 	// Add special catch-all converter for font-size feature.
@@ -51,7 +50,7 @@ function HandleFontSizeValue( editor ) {
 ClassicEditor
 	.create( document.querySelector( '#snippet-arbitrary-attribute-values' ), {
 		cloudServices: CS_CONFIG,
-		extraPlugins: [ Font, HandleFontSizeValue ],
+		extraPlugins: [ HandleFontSizeValue ],
 		toolbar: {
 			items: [ 'heading', '|', 'bold', 'italic', '|', 'fontSize' ],
 			viewportTopOffset: window.getViewportTopOffsetConfig()

diff --git a/docs/_snippets/framework/extending-content-custom-figure-attributes.js b/docs/_snippets/framework/extending-content-custom-figure-attributes.js
@@ -6,25 +6,20 @@
 /* globals ClassicEditor, console, window, document */
 
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 /**
  * Plugin that converts custom attributes for elements that are wrapped in <figure> in the view.
  */
-class CustomFigureAttributes extends Plugin {
-	init() {
-		const editor = this.editor;
+function CustomFigureAttributes( editor ) {
+	// Define on which elements the css classes should be preserved:
+	setupCustomClassConversion( 'img', 'image', editor );
+	setupCustomClassConversion( 'table', 'table', editor );
 
-		// Define on wchich elements the css classes should be preserved:
-		setupCustomClassConversion( 'img', 'image', editor );
-		setupCustomClassConversion( 'table', 'table', editor );
+	editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
 
-		editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
-
-		// Define custom attributes that should be preserved.
-		setupCustomAttributeConversion( 'img', 'image', 'id', editor );
-		setupCustomAttributeConversion( 'table', 'table', 'id', editor );
-	}
+	// Define custom attributes that should be preserved.
+	setupCustomAttributeConversion( 'img', 'image', 'id', editor );
+	setupCustomAttributeConversion( 'table', 'table', 'id', editor );
 }
 
 /**

diff --git a/docs/framework/guides/deep-dive/extending-content.md b/docs/framework/guides/deep-dive/extending-content.md
@@ -722,15 +722,13 @@ function HandleFontSizeValue( editor ) {
 Activate the plugin in the editor:
 
 ```js
-import Font from '@ckeditor/ckeditor5-font/src/font';
-
 ClassicEditor
 	.create( ..., {
 		items: [ 'heading', '|', 'bold', 'italic', '|', 'fontSize' ],
 		fontsize: {
 			options: [ 10, 12, 14, 'default', 18, 20, 22 ]
 		},
-		extraPlugins: [ Font, HandleFontSizeValue ],
+		extraPlugins: [ HandleFontSizeValue ],
 	} )
 	.then( editor => {
 		// ...
@@ -756,20 +754,16 @@ The sample below is extensible - to add own attributes to preserve just add anot
 /**
  * Plugin that converts custom attributes for elements that are wrapped in <figure> in the view.
  */
-class CustomFigureAttributes extends Plugin {
-	init() {
-		const editor = this.editor;
-
-		// Define on wchich elements the css classes should be preserved:
-		setupCustomClassConversion( 'img', 'image', editor );
-		setupCustomClassConversion( 'table', 'table', editor );
+function CustomFigureAttributes( editor ) {
+	// Define on which elements the css classes should be preserved:
+	setupCustomClassConversion( 'img', 'image', editor );
+	setupCustomClassConversion( 'table', 'table', editor );
 
-		editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
+	editor.conversion.for( 'upcast' ).add( upcastCustomClasses( 'figure' ), { priority: 'low' } );
 
-		// Define custom attributes that should be preserved.
-		setupCustomAttributeConversion( 'img', 'image', 'id', editor );
-		setupCustomAttributeConversion( 'table', 'table', 'id', editor );
-	}
+	// Define custom attributes that should be preserved.
+	setupCustomAttributeConversion( 'img', 'image', 'id', editor );
+	setupCustomAttributeConversion( 'table', 'table', 'id', editor );
 }
 
 /**