Przeglądaj źródła

Update manual test description and samples.

Mateusz Samsel 6 lat temu
rodzic
commit
d954893029

+ 11 - 0
packages/ckeditor5-link/tests/manual/linkdecorator.html

@@ -1,3 +1,4 @@
+<h2>Manual decorators</h2>
 <div id="editor">
 	<p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>.</p>
 	<p>This is <a href="//ckeditor.com">CKEditor5</a> as schemaless url.</p>
@@ -6,3 +7,13 @@
 	<p>This is some <a href="mailto:random@user.org">mail</a>.</p>
 	<p>This is some <a href="tel:123456789">phone number</a>.</p>
 </div>
+
+<h2>Automatic decorators</h2>
+<div id="editor2">
+	<p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>.</p>
+	<p>This is <a href="//ckeditor.com">CKEditor5</a> as schemaless url.</p>
+	<p>This is <a href="#anchor">anchor</a> on this page.</p>
+	<p>This is some random <a href="ftp://127.0.0.1">ftp address</a>.</p>
+	<p>This is some <a href="mailto:random@user.org">mail</a>.</p>
+	<p>This is some <a href="tel:123456789">phone number</a>.</p>
+</div>

+ 40 - 5
packages/ckeditor5-link/tests/manual/linkdecorator.js

@@ -12,7 +12,6 @@ import Link from '../../src/link';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
@@ -30,14 +29,14 @@ ClassicEditor
 				},
 				{
 					mode: 'manual',
-					label: 'downloadable',
+					label: 'Downloadable',
 					attributes: {
 						download: 'download'
 					}
 				},
 				{
 					mode: 'manual',
-					label: 'gallery',
+					label: 'Gallery link',
 					attributes: {
 						class: 'gallery'
 					}
@@ -46,9 +45,45 @@ ClassicEditor
 		}
 	} )
 	.then( editor => {
-		window.getModelData = getModelData;
+		if ( !window.editors ) {
+			window.editors = {};
+		}
 		window.editor = editor;
-		window.model = editor.model;
+		window.editors.manualDecorators = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor2' ), {
+		plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
+		toolbar: [ 'link', 'undo', 'redo' ],
+		link: {
+			decorators: [
+				{
+					mode: 'automatic',
+					callback: url => url.startsWith( 'tel:' ),
+					attributes: {
+						class: 'phone'
+					}
+				},
+				{
+					mode: 'automatic',
+					callback: url => url.startsWith( '#' ),
+					attributes: {
+						class: 'internal'
+					}
+				}
+			],
+			targetDecorator: true
+		}
+	} )
+	.then( editor => {
+		if ( !window.editors ) {
+			window.editors = {};
+		}
+		window.editors.autoamticDecorators = editor;
 	} )
 	.catch( err => {
 		console.error( err.stack );

+ 19 - 1
packages/ckeditor5-link/tests/manual/linkdecorator.md

@@ -1 +1,19 @@
-## play with it
+## Link decorators
+
+### Manual decorators (window.editors.manualDecorators):
+1. Should be available for every link.
+2. Should apply changes after accepting changes.
+3. There should be available 3 manual decorators:
+  * Open in new window
+  * Downloadable
+  * Gallery link
+4. State of buttons should reflect state of currently selected link.
+5. Switch buttons should be focused (with tab key) after input. Save and cancel buttons should be focused at the end
+
+### Automatic decorators (window.editors.automaticDecorators).
+1. There should be turned on default automatic decorator, which adds `target="_blank"` and `rel="noopener noreferrer"` attributes to all external links (links started with `http://`, `https://` or `//`);
+2. There should not be any changes in model or view of the editors.
+3. Additional data should be added during downcast ( you need to run `window.editors.automaticDecorators.getData()` to see how it works ).
+4. There are 2 additional decorators:
+  * phone, which detects all links started with `tel:` and adds `phone` class to such link
+  * internal, which adds `internal` class to all links started with `#`