diff --git a/tests/manual/selection-handler.html b/tests/manual/selection-handler.html new file mode 100644 index 00000000..9e23c3f7 --- /dev/null +++ b/tests/manual/selection-handler.html @@ -0,0 +1,31 @@ + + + + +

LTR UI

+ +
+

Heading 1

+

Paragraph

+
+

Paragraph

+
+ +

RTL UI

+ +
+

Heading 1

+

Paragraph

+
+

Paragraph

+
diff --git a/tests/manual/selection-handler.js b/tests/manual/selection-handler.js new file mode 100644 index 00000000..098eb179 --- /dev/null +++ b/tests/manual/selection-handler.js @@ -0,0 +1,82 @@ +/** + * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +/* globals console, window, document */ + +import Widget from '../../src/widget'; +import { toWidget } from '../../src/utils'; +import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; +import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset'; + +function MyPlugin( editor ) { + editor.model.schema.register( 'div', { + allowIn: [ '$root' ], + isObject: true + } ); + + editor.conversion.for( 'downcast' ).elementToElement( { + model: 'div', + view: ( modelElement, writer ) => { + return toWidget( writer.createContainerElement( 'div', { + class: 'widget' + } ), + writer, + { hasSelectionHandler: true } ); + } + } ); + + editor.conversion.for( 'upcast' ).elementToElement( { + model: 'div', + view: 'div' + } ); +} + +const config = { + plugins: [ ArticlePluginSet, Widget, MyPlugin ], + toolbar: [ + 'heading', + '|', + 'bold', + 'italic', + 'link', + 'bulletedList', + 'numberedList', + 'blockQuote', + 'insertTable', + 'mediaEmbed', + 'undo', + 'redo' + ], + image: { + toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ] + }, + table: { + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells' + ] + } +}; + +ClassicEditor + .create( document.querySelector( '#editor-ltr' ), config ) + .then( editor => { + window.editorLtr = editor; + } ) + .catch( err => { + console.error( err.stack ); + } ); + +ClassicEditor + .create( document.querySelector( '#editor-rtl' ), Object.assign( {}, config, { + language: 'ar' + } ) ) + .then( editor => { + window.editorRtl = editor; + } ) + .catch( err => { + console.error( err.stack ); + } ); diff --git a/tests/manual/selection-handler.md b/tests/manual/selection-handler.md new file mode 100644 index 00000000..8fe1b955 --- /dev/null +++ b/tests/manual/selection-handler.md @@ -0,0 +1,17 @@ +# Widget selection handler + +**Note**: For the best testing, run manual tests adding Arabic to [additional languages configuration](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/testing-environment.html#running-manual-tests). + +--- + +1. Focus the widget. +1. The outline of the widget and the selection handler should be continuous. +1. The selection handler should be attached to the top of the widget. + +## LTR + +1. The selection handler should be displayed on the **left** side of the widget. + +## RTL + +1. The selection handler should be displayed on the **right** side of the widget.