ソースを参照

Improved RTL manual tests. Fixes #543.

Piotrek Koszuliński 9 年 前
コミット
84f7885680

+ 37 - 10
packages/ckeditor5-typing/tests/manual/rtl.html

@@ -2,18 +2,45 @@
 	<link rel="stylesheet" href="%APPS_DIR%ckeditor/build/modules/amd/theme/ckeditor.css">
 </head>
 
-<h1>Editor 1: [dir=rtl]</h1>
+<div style="float: left; width: 50%; padding: 10px; box-sizing: border-box">
+	<h1>Editor 1: [dir=rtl]</h1>
+
+	<p>(Note: The editable gets dir=rtl attribute.)</p>
+
+	<div id="editor1">
+		<h2>ش ز ذ ي ث ب</h2>
+		<h3>ل ا ه ت ن</h3>
+		<p><em>م و ر خ</em> ح ض ق س <strong>ف ع ص</strong> ط غ ظ.</p>
+	</div>
+
+	<h1>Editor 2: [dir=ltr], mixed content</h1>
+
+	<div id="editor2">
+		<h2>Heading 1</h2>
+		<h3>ل ا ه ت ن</h3>
+		<p><em>This</em> ح ض an <strong>ف ع ص</strong> ط غ ظ.</p>
+	</div>
 
-<div id="editor1" dir="rtl">
-	<h2>شششش</h2>
-	<h3>ززززز</h3>
-	<p><em>ئئئئ</em> يي يي <strong>ثثثث</strong> ببببب.</p>
 </div>
 
-<h1>Editor 2: [dir=ltr], mixed content</h1>
+<div style="float: right; width: 50%; padding: 10px; box-sizing: border-box">
+
+	<h1>Native 1: [dir=rtl]</h1>
+
+	<p>(Note: The editable has dir=rtl attribute.)</p>
+
+	<div id="native1" contenteditable="true" dir="rtl" style="border: solid 1px grey">
+		<h2>ش ز ذ ي ث ب</h2>
+		<h3>ل ا ه ت ن</h3>
+		<p><em>م و ر خ</em> ح ض ق س <strong>ف ع ص</strong> ط غ ظ.</p>
+	</div>
+
+	<h1>Native 2: [dir=ltr], mixed content</h1>
+
+	<div id="native2" contenteditable="true" style="border: solid 1px grey">
+		<h2>Heading 1</h2>
+		<h3>ل ا ه ت ن</h3>
+		<p><em>This</em> ح ض an <strong>ف ع ص</strong> ط غ ظ.</p>
+	</div>
 
-<div id="editor2">
-	<h2>Heading 1</h2>
-	<h3>ششششششششش</h3>
-	<p><em>This</em> يي an <strong>زززززز</strong> instance.</p>
 </div>

+ 63 - 2
packages/ckeditor5-typing/tests/manual/rtl.js

@@ -14,18 +14,79 @@ const config = {
 };
 
 window.setInterval( function() {
+	const doc1 = window.editor1.document;
+	const doc2 = window.editor2.document;
+
 	if ( window.editor1.editing.view.isFocused ) {
-		console.log( 'editor 1', getData( window.editor1.document ) );
+		console.log( 'editor 1', getData( doc1 ) );
+
+		const modelSel = doc1.selection;
+
+		console.log(
+			'editor 1 – model selection',
+			'anchor: ' + modelSel.anchor.offset,
+			'focus: ' + modelSel.focus.offset,
+			'backward: ' + modelSel.isBackward
+		);
+
+		const nativeSel = document.getSelection();
+
+		console.log(
+			'editor 1 – native selection',
+			'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
+			'focus: ', nativeSel.focusNode, nativeSel.focusOffset
+		);
 	}
 
 	if ( window.editor2.editing.view.isFocused ) {
-		console.log( 'editor 2', getData( window.editor2.document ) );
+		console.log( 'editor 2', getData( doc2 ) );
+
+		const modelSel = doc2.selection;
+
+		console.log(
+			'editor 2 – model selection',
+			'anchor: ' + modelSel.anchor.offset,
+			'focus: ' + modelSel.focus.offset,
+			'backward: ' + modelSel.isBackward
+		);
+
+		const nativeSel = document.getSelection();
+
+		console.log(
+			'editor 2 – native selection',
+			'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
+			'focus: ', nativeSel.focusNode, nativeSel.focusOffset
+		);
+	}
+
+	if ( document.activeElement == document.getElementById( 'native1' ) ) {
+		const nativeSel = document.getSelection();
+
+		console.log(
+			'native 1 – native selection',
+			'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
+			'focus: ', nativeSel.focusNode, nativeSel.focusOffset
+		);
+	}
+
+	if ( document.activeElement == document.getElementById( 'native2' ) ) {
+		const nativeSel = document.getSelection();
+
+		console.log(
+			'native 2 – native selection',
+			'anchor: ', nativeSel.anchorNode, nativeSel.anchorOffset,
+			'focus: ', nativeSel.focusNode, nativeSel.focusOffset
+		);
 	}
 }, 3000 );
 
 ClassicEditor.create( document.querySelector( '#editor1' ), config )
 .then( editor => {
 	window.editor1 = editor;
+
+	// Editable doesn't automatically get this attribute right now.
+	// https://github.com/ckeditor/ckeditor5-editor-classic/issues/32
+	editor.editing.view.getDomRoot().setAttribute( 'dir', 'rtl' );
 } )
 .catch( err => {
 	console.error( err.stack );

+ 6 - 0
packages/ckeditor5-typing/tests/manual/rtl.md

@@ -3,3 +3,9 @@
 ## Typing feature – RTL support
 
 Check whathever comes to your mind. It should not blow up.
+
+**Note:**
+
+* Switch keyboard layout to some RTL language (e.g. Arabic).
+* Mixed content behaves super weird and its usually browser's issue.
+* When in doubt, compare results between CKEditor and native contentEditable.