Merge 9bc00da into c698683

docs/_snippets/framework/build-extending-content-source.js

@@ -0,0 +1,15 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+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;

docs/_snippets/framework/extending-content-add-external-link-target.html

@@ -0,0 +1,11 @@
+<style>
+	#snippet-link-external + .ck-editor .ck-content a[target="_blank"]::after {
+		content: '\29C9';
+	}
+</style>
+
+<div id="snippet-link-external">
+	<p>External links in this <a href="https://ckeditor.com">editor</a> have a <code>target="_blank"</code>
+	<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">attribute</a> and will open in a new
+	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a>.</p>
+</div>

docs/_snippets/framework/extending-content-add-external-link-target.js

@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+function AddTargetToExternalLinks( editor ) {
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+			const viewSelection = viewWriter.document.selection;
+			const viewElement = viewWriter.createAttributeElement( 'a', {
+				target: '_blank'
+			}, {
+				priority: 5
+			} );
+
+			if ( data.attributeNewValue.match( /ckeditor\.com/ ) ) {
+				viewWriter.unwrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+			} else {
+				if ( data.item.is( 'selection' ) ) {
+					viewWriter.wrap( viewSelection.getFirstRange(), viewElement );
+				} else {
+					viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+				}
+			}
+		}, { priority: 'low' } );
+	} );
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-link-external' ), {
+		cloudServices: CS_CONFIG,
+		extraPlugins: [ AddTargetToExternalLinks ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/framework/extending-content-add-heading-class.html

@@ -0,0 +1,14 @@
+<style>
+	.ck-content h2.my-heading {
+		font-family: Georgia, Times, Times New Roman, serif;
+		border-left: 6px solid #fd0000;
+		padding-left: .8em;
+		padding: .1em .8em;
+	}
+</style>
+
+<div id="snippet-heading-class">
+	<h2>Heading with <code>.my-heading</code> class</h2>
+	<h3>Regular heading</h3>
+	<p>Some content.</p>
+</div>

docs/_snippets/framework/extending-content-add-heading-class.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+function AddClassToAllHeading1( editor ) {
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		dispatcher.on( 'insert:heading1', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+
+			viewWriter.addClass( 'my-heading', conversionApi.mapper.toViewElement( data.item ) );
+		}, { priority: 'low' } );
+	} );
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-heading-class' ), {
+		cloudServices: CS_CONFIG,
+		extraPlugins: [ AddClassToAllHeading1 ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/framework/extending-content-add-link-class.html

@@ -0,0 +1,14 @@
+<style>
+	.my-green-link {
+		color: #209a25;
+		border: 1px solid #209a25;
+		border-radius: 2px;
+		padding: 0 3px;
+		box-shadow: 1px 1px 0 0 #209a25;
+	}
+</style>
+
+<div id="snippet-link-classes">
+	<p>All links in this <a href="https://ckeditor.com">editor</a> have a custom <code>.my-green-link</code>
+	CSS <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> attribute.</p>
+</div>

docs/_snippets/framework/extending-content-add-link-class.js

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+function AddClassToAllLinks( editor ) {
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+			const viewSelection = viewWriter.document.selection;
+			const viewElement = viewWriter.createAttributeElement( 'a', {
+				class: 'my-green-link'
+			}, {
+				priority: 5
+			} );
+
+			if ( data.item.is( 'selection' ) ) {
+				viewWriter.wrap( viewSelection.getFirstRange(), viewElement );
+			} else {
+				viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+			}
+		}, { priority: 'low' } );
+	} );
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-link-classes' ), {
+		cloudServices: CS_CONFIG,
+		extraPlugins: [ AddClassToAllLinks ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/framework/extending-content-add-unsafe-link-class.html

@@ -0,0 +1,12 @@
+<style>
+	.unsafe-link {
+		padding: 0 2px;
+		outline: 2px dashed red;
+		background: #ffff00;
+	}
+</style>
+
+<div id="snippet-link-unsafe-classes">
+	<p>All links in this <a href="https://ckeditor.com">editor</a> that do not use the <a href="http://developer.mozilla.org/en-US/docs/Glossary/https">HTTPS</a> protocol
+	have a custom <code>.unsafe-link</code> CSS <a href="http://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> that marks them red.</p>
+</div>

docs/_snippets/framework/extending-content-add-unsafe-link-class.js

@@ -0,0 +1,43 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+function AddClassToUnsafeLinks( editor ) {
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		dispatcher.on( 'attribute:linkHref', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+			const viewSelection = viewWriter.document.selection;
+			const viewElement = viewWriter.createAttributeElement( 'a', { class: 'unsafe-link' }, { priority: 5 } );
+
+			if ( data.attributeNewValue.match( /http:\/\// ) ) {
+				if ( data.item.is( 'selection' ) ) {
+					viewWriter.wrap( viewSelection.getFirstRange(), viewElement );
+				} else {
+					viewWriter.wrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+				}
+			} else {
+				viewWriter.unwrap( conversionApi.mapper.toViewRange( data.range ), viewElement );
+			}
+		}, { priority: 'low' } );
+	} );
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-link-unsafe-classes' ), {
+		cloudServices: CS_CONFIG,
+		extraPlugins: [ AddClassToUnsafeLinks ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/framework/extending-content-allow-div-attributes.html

@@ -0,0 +1,12 @@
+<div id="snippet-div-attributes">
+	<div id="special-section-a" style="background: #eafbd7;padding:.8em .8em 0;margin-bottom:.8em;border:1px solid #8bc34a;">
+		<p><strong>Special section A</strong>: it has set "style" and "id" attributes.</p>
+	</div>
+
+	<p>Regular content of the editor.</p>
+
+	<div id="special-section-b" style="background: #ffeed0;padding:.8em .8em 0;margin-bottom:.8em;border:1px solid #ff8f00;" spellcheck="false">
+		<p><strong>Special section B</strong>: it has set "style", "id" and spellcheck="false" attributes.</p>
+		<p>This section disables native browser spellchecker.</p>
+	</div>
+</div>

docs/_snippets/framework/extending-content-allow-div-attributes.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+function ConvertDivAttributes( editor ) {
+	// Allow divs in the model.
+	editor.model.schema.register( 'div', {
+		allowWhere: '$block',
+		allowContentOf: '$root'
+	} );
+
+	// Allow divs in the model to have all attributes.
+	editor.model.schema.addAttributeCheck( context => {
+		if ( context.endsWith( 'div' ) ) {
+			return true;
+		}
+	} );
+
+	// View-to-model converter converting a view div with all its attributes to the model.
+	editor.conversion.for( 'upcast' ).elementToElement( {
+		view: 'div',
+		model: ( viewElement, modelWriter ) => {
+			return modelWriter.createElement( 'div', viewElement.getAttributes() );
+		}
+	} );
+
+	// Model-to-view convert for the div element (attrbiutes are converted separately).
+	editor.conversion.for( 'downcast' ).elementToElement( {
+		model: 'div',
+		view: 'div'
+	} );
+
+	// Model-to-view converter for div attributes.
+	// Note that we use a lower-level, event-based API here.
+	editor.conversion.for( 'downcast' ).add( dispatcher => {
+		dispatcher.on( 'attribute', ( evt, data, conversionApi ) => {
+			// Convert div attributes only.
+			if ( data.item.name != 'div' ) {
+				return;
+			}
+
+			const viewWriter = conversionApi.writer;
+			const viewDiv = conversionApi.mapper.toViewElement( data.item );
+
+			// In the model-to-view conversion we convert changes. An attribute can be added or removed or changed.
+			// The below code handles all 3 cases.
+			if ( data.attributeNewValue ) {
+				viewWriter.setAttribute( data.attributeKey, data.attributeNewValue, viewDiv );
+			} else {
+				viewWriter.removeAttribute( data.attributeKey, viewDiv );
+			}
+		} );
+	} );
+}
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-div-attributes' ), {
+		cloudServices: CS_CONFIG,
+		extraPlugins: [ ConvertDivAttributes ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

docs/_snippets/framework/extending-content-allow-link-target.html

@@ -0,0 +1,33 @@
+<style>
+	#snippet-link-target + .ck-editor .ck-content a[target]::after {
+		content: "target=\"" attr(target) "\"";
+		font-size: 0.6em;
+		position: relative;
+		left: 0em;
+		top: -1em;
+		background: #00ffa6;
+		color: #000;
+		padding: 1px 3px;
+		border-radius: 10px;
+	}
+
+	#snippet-link-target-content {
+		width: 100%;
+		height: 8em;
+		font-family: monospace;
+	}
+</style>
+
+<div id="snippet-link-target">
+	<p>This <a href="https://ckeditor.com" target="_blank">editor</a> allows <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_parent">links</a> with a <code>target</code> attribute to be loaded into the content.</p>
+</div>
+
+<p><b>Note</b>: You can play with the content to see that different link <code>target</code> values are also handled.</p>
+
+<textarea id="snippet-link-target-content">
+&lt;p&gt;A couple of links with different targets:&lt;/p&gt;&#10;&lt;ul&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://ckeditor.com&quot; target=&quot;_blank&quot;&gt;CKEditor&lt;/a&gt;&lt;/li&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://ckeditor.com/ckfinder/&quot;&gt;CKFinder&lt;/a&gt;&lt;/li&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://cksource.com&quot; target=&quot;_parent&quot;&gt;CKSource&lt;/a&gt;&lt;/li&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://cksource.com/team/&quot; target=&quot;_top&quot;&gt;Team&lt;/a&gt;&lt;/li&gt;&#10;&lt;/ul&gt;
+</textarea>
+
+<p>
+	<button type="button" id="snippet-link-target-content-update">Set editor data</button>
+</p>