Bladeren bron

Add manual test for link protocol.

panr 5 jaren geleden
bovenliggende
commit
7778ddc292

+ 52 - 0
packages/ckeditor5-link/tests/manual/protocol.html

@@ -0,0 +1,52 @@
+<style>
+	code {
+		background: hsl(0, 0%, 90%);
+	}
+
+	sup {
+		position: relative;
+	}
+
+	.ck-editor__editable sup:after {
+		content: '';
+		display: inline-block;
+		position: absolute;
+		width: 14px;
+		height: 14px;
+		left: 1px;
+    top: 1px;
+		background: hsla(207, 87%, 55%, 0.5);
+		border-radius: 50px;
+		animation: pulse 2s linear infinite;
+	}
+
+	@keyframes pulse {
+		0% {
+			transform: scale(1);
+		}
+
+		50% {
+			transform: scale(2);
+		}
+
+		100% {
+			transform: scale(1);
+		}
+	}
+</style>
+
+<h2>The default configuration for the link protocol has been set to <code id="default-protocol"></code>.</h2>
+
+<h3>...but you can change it:</h3>
+<form id="protocol-settings" style="margin: 20px 0;">
+	<label for="http"><input type="radio" name="option" id="http" value="http://" />HTTP</label>
+	<label for="https"><input type="radio" name="option" id="https" value="https://" />HTTPS</label>
+	<label for="mailto"><input type="radio" name="option" id="mailto" value="mailto:" />MAILTO</label>
+	<label for="file"><input type="radio" name="option" id="file" value="file://" />FILE</label>
+</form>
+
+<div id="editor">
+	<p>This is <a href="http://ckeditor.com">CKEditor5</a> from <a href="http://cksource.com">CKSource</a>. If you need more information please contact us at support@example.com <sup class="indicator">[1]</sup>.</p>
+</div>
+
+<p><sup>[1]</sup> Copy the email address and create a link with it (<code>mailto:</code> protocol will be added automatically).</p>

+ 49 - 0
packages/ckeditor5-link/tests/manual/protocol.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals console:false, window, document */
+
+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 Link from '../../src/link';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Link, Typing, Paragraph, Undo, Enter, Superscript ],
+		toolbar: [ 'link', 'undo', 'redo' ],
+		link: {
+			addTargetToExternalLinks: true,
+			defaultProtocol: 'http://'
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		const LinkUIPlugin = editor.plugins.get( 'LinkUI' );
+		const formView = LinkUIPlugin.formView;
+		const defaultProtocol = editor.config.get( 'link.defaultProtocol' );
+
+		document.getElementById( 'default-protocol' ).innerText = defaultProtocol;
+
+		document.querySelectorAll( '#protocol-settings input[type="radio"]' ).forEach( radio => {
+			radio.checked = radio.value === defaultProtocol;
+
+			radio.addEventListener( 'click', ( {
+				target: { value: protocol }
+			} ) => {
+				editor.config.set( 'link.defaultProtocol', protocol );
+
+				// Change input placeholder just for manual test's case to provide more dynamic behavior.
+				formView.urlInputView.fieldView.placeholder = protocol + 'example.com';
+			} );
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 8 - 0
packages/ckeditor5-link/tests/manual/protocol.md

@@ -0,0 +1,8 @@
+## Link protocol
+
+This test checks whether:
+- `config.link.defaultProtocol` applies.
+- user is able to dynamically change the link protocol (just as an extended example of usage).
+- the plugin dynamically change link protocol to `mailto:` when email address was detected.
+
+When you dynamically change the value of the link protocol, the form input placeholder should change as well.