Browse Source

Added example for ticket #475

Oskar Wrobel 9 years ago
parent
commit
18163db99e

+ 67 - 0
packages/ckeditor5-engine/src/t-475/autolinker.js

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Feature from '../feature.js';
+import TreeWalker from '../engine/model/treewalker.js';
+import Position from '../engine/model/position.js';
+import Range from '../engine/model/range.js';
+import LivePosition from '../engine/model/liveposition.js';
+
+const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+
+/**
+ * Auto linking PoC.
+ *
+ * @extends ckeditor5.Feature
+ */
+export default class AutoLinker extends Feature {
+	/**
+	 * @inheritdoc
+	 */
+	init() {
+		this.editor.document.on( 'change', ( event, type, changes, batch ) => {
+			if ( type != 'insert' ) {
+				return;
+			}
+
+			for ( let value of changes.range.getItems( { singleCharacters: true } ) ) {
+				const walker = new TreeWalker( {
+					direction: 'BACKWARD',
+					startPosition: Position.createAfter( value )
+				} );
+
+				const currentValue = walker.next().value;
+				const text = currentValue.item.text;
+
+				if ( !text ) {
+					return;
+				}
+
+				let matchedUrl = urlRegex.exec( text );
+
+				if ( !matchedUrl ) {
+					return;
+				}
+
+				const doc = this.editor.document;
+				const url = matchedUrl[ 0 ];
+				const offset = _getLastPathPart( currentValue.nextPosition.path ) + matchedUrl.index;
+				const livePos = LivePosition.createFromParentAndOffset( currentValue.item.commonParent, offset  );
+
+				doc.enqueueChanges( () => {
+					const urlRange = Range.createFromPositionAndShift( livePos, url.length );
+					batch.setAttr( 'link', url, urlRange );
+				} );
+			}
+		} );
+	}
+}
+
+function _getLastPathPart( path ) {
+	return path[ path.length - 1 ];
+}
+

+ 32 - 0
packages/ckeditor5-engine/src/t-475/link.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import Feature from '../feature.js';
+import BuildModelConverterFor from '../engine/conversion/model-converter-builder.js';
+import BuildViewConverterFor from '../engine/conversion/view-converter-builder.js';
+import AttributeElement from '../engine/view/attributeelement.js';
+
+export default class Bold extends Feature {
+	init() {
+		const editor = this.editor;
+		const data = editor.data;
+		const editing = editor.editing;
+
+		// Allow bold attribute on all inline nodes.
+		editor.document.schema.allow( { name: '$inline', attributes: [ 'link' ] } );
+
+		// Build converter from model to view for data and editing pipelines.
+		BuildModelConverterFor( data.modelToView, editing.modelToView )
+			.fromAttribute( 'link' )
+			.toElement( ( href ) => new AttributeElement( 'a', { href } ) );
+
+		// Build converter from view to model for data pipeline.
+		BuildViewConverterFor( data.viewToModel )
+			.fromElement( 'a' )
+			.toAttribute( ( viewElement ) => ( { key: 'link', value: viewElement.getAttribute( 'href' ) } ) );
+	}
+}

+ 8 - 0
packages/ckeditor5-engine/tests/manual/t-475.html

@@ -0,0 +1,8 @@
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="%APPS_DIR%ckeditor/build/amd/theme/ckeditor.css">
+</head>
+
+<div id="editor">
+	<p>ckeditor from http://www.cksource.com is awesome! :)</p>
+</div>

+ 16 - 0
packages/ckeditor5-engine/tests/manual/t-475.js

@@ -0,0 +1,16 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import ClassicEditor from '/ckeditor5/creator-classic/classic.js';
+import Link from '/ckeditor5/hackathon/link.js';
+import TextTransformator from '/ckeditor5/hackathon/texttransformator.js';
+import AutoLinker from '/ckeditor5/hackathon/autolinker.js';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	features: [ 'delete', 'enter', 'typing', 'paragraph', 'undo', Link, TextTransformator, AutoLinker ],
+	toolbar: [ 'undo', 'redo' ]
+} );

+ 5 - 0
packages/ckeditor5-engine/tests/manual/t-475.md

@@ -0,0 +1,5 @@
+@bender-ui: collapsed
+
+# Converting model to AttributeElement issue
+
+[ckeditor5-engine#475](https://github.com/ckeditor/ckeditor5-engine/issues/475)