|
@@ -6,7 +6,7 @@
|
|
|
/* globals document, console */
|
|
/* globals document, console */
|
|
|
|
|
|
|
|
import ViewDocument from '/ckeditor5/engine/view/document.js';
|
|
import ViewDocument from '/ckeditor5/engine/view/document.js';
|
|
|
-import ClickObserver from '/ckeditor5/engine/view/observer/clickobserver.js';
|
|
|
|
|
|
|
+import DomEventObserver from '/ckeditor5/engine/view/observer/domeventobserver.js';
|
|
|
import ViewRange from '/ckeditor5/engine/view/range.js';
|
|
import ViewRange from '/ckeditor5/engine/view/range.js';
|
|
|
import { setData } from '/ckeditor5/engine/dev-utils/view.js';
|
|
import { setData } from '/ckeditor5/engine/dev-utils/view.js';
|
|
|
|
|
|
|
@@ -15,36 +15,57 @@ const domEditable = document.getElementById( 'editor' );
|
|
|
const viewRoot = viewDocument.createRoot( domEditable );
|
|
const viewRoot = viewDocument.createRoot( domEditable );
|
|
|
let viewStrong;
|
|
let viewStrong;
|
|
|
|
|
|
|
|
-viewDocument.addObserver( ClickObserver );
|
|
|
|
|
|
|
+// Add mouseup oberver.
|
|
|
|
|
+viewDocument.addObserver( class extends DomEventObserver {
|
|
|
|
|
+ get domEventType() {
|
|
|
|
|
+ return [ 'mousedown', 'mouseup' ];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ onDomEvent( domEvent ) {
|
|
|
|
|
+ this.fire( domEvent.type, domEvent );
|
|
|
|
|
+ }
|
|
|
|
|
+} );
|
|
|
|
|
|
|
|
viewDocument.on( 'selectionChange', ( evt, data ) => {
|
|
viewDocument.on( 'selectionChange', ( evt, data ) => {
|
|
|
viewDocument.selection.setTo( data.newSelection );
|
|
viewDocument.selection.setTo( data.newSelection );
|
|
|
viewDocument.render();
|
|
viewDocument.render();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
-viewDocument.selection.on( 'change', () => {
|
|
|
|
|
- if ( viewStrong && !viewDocument.selection.isFake ) {
|
|
|
|
|
- viewStrong.removeStyle( 'background-color' );
|
|
|
|
|
- }
|
|
|
|
|
-} );
|
|
|
|
|
-
|
|
|
|
|
-viewDocument.on( 'click', ( evt, data ) => {
|
|
|
|
|
|
|
+viewDocument.on( 'mouseup', ( evt, data ) => {
|
|
|
if ( data.target == viewStrong ) {
|
|
if ( data.target == viewStrong ) {
|
|
|
|
|
+ console.log( 'Making selection around the <strong>.' );
|
|
|
|
|
+
|
|
|
const range = ViewRange.createOn( viewStrong );
|
|
const range = ViewRange.createOn( viewStrong );
|
|
|
viewDocument.selection.setRanges( [ range ] );
|
|
viewDocument.selection.setRanges( [ range ] );
|
|
|
viewDocument.selection.setFake( true, { label: 'fake selection over bar' } );
|
|
viewDocument.selection.setFake( true, { label: 'fake selection over bar' } );
|
|
|
- viewStrong.setStyle( 'background-color', 'yellow' );
|
|
|
|
|
|
|
|
|
|
viewDocument.render();
|
|
viewDocument.render();
|
|
|
|
|
+
|
|
|
|
|
+ data.preventDefault();
|
|
|
|
|
+ }
|
|
|
|
|
+} );
|
|
|
|
|
+
|
|
|
|
|
+viewDocument.selection.on( 'change', () => {
|
|
|
|
|
+ if ( !viewStrong ) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const firstPos = viewDocument.selection.getFirstPosition();
|
|
|
|
|
+ const lastPos = viewDocument.selection.getLastPosition();
|
|
|
|
|
+
|
|
|
|
|
+ if ( firstPos && lastPos && firstPos.nodeAfter == viewStrong && lastPos.nodeBefore == viewStrong ) {
|
|
|
|
|
+ viewStrong.setStyle( 'background-color', 'yellow' );
|
|
|
|
|
+ } else {
|
|
|
|
|
+ viewStrong.removeStyle( 'background-color' );
|
|
|
}
|
|
}
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
viewDocument.on( 'focus', () => {
|
|
viewDocument.on( 'focus', () => {
|
|
|
- console.log( 'The document was focused' );
|
|
|
|
|
|
|
+ console.log( 'The document was focused.' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
viewDocument.on( 'blur', () => {
|
|
viewDocument.on( 'blur', () => {
|
|
|
- console.log( 'The document was blurred' );
|
|
|
|
|
|
|
+ console.log( 'The document was blurred.' );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
setData( viewDocument, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
|
|
setData( viewDocument, '<container:p>{}foo<strong contenteditable="false">bar</strong>baz</container:p>' );
|