Merge branch 'master' into t/ckeditor5/488

Author: scofalik

src/highlightstack.js

@@ -34,8 +34,9 @@ export default class HighlightStack {
 	 *
 	 * @fires change:top
 	 * @param {module:engine/conversion/downcast-converters~HighlightDescriptor} descriptor
+	 * @param {module:engine/view/writer~Writer} writer
 	 */
-	add( descriptor ) {
+	add( descriptor, writer ) {
 		const stack = this._stack;
 
 		// Save top descriptor and insert new one. If top is changed - fire event.
@@ -47,7 +48,8 @@ export default class HighlightStack {
 		if ( oldTop !== newTop && !compareDescriptors( oldTop, newTop ) ) {
 			this.fire( 'change:top', {
 				oldDescriptor: oldTop,
-				newDescriptor: newTop
+				newDescriptor: newTop,
+				writer
 			} );
 		}
 	}
@@ -57,8 +59,9 @@ export default class HighlightStack {
 	 *
 	 * @fires change:top
 	 * @param {String} id Id of the descriptor to remove.
+	 * @param {module:engine/view/writer~Writer} writer
 	 */
-	remove( id ) {
+	remove( id, writer ) {
 		const stack = this._stack;
 
 		const oldTop = stack[ 0 ];
@@ -69,7 +72,8 @@ export default class HighlightStack {
 		if ( oldTop !== newTop && !compareDescriptors( oldTop, newTop ) ) {
 			this.fire( 'change:top', {
 				oldDescriptor: oldTop,
-				newDescriptor: newTop
+				newDescriptor: newTop,
+				writer
 			} );
 		}
 	}
@@ -168,4 +172,5 @@ function classesToString( classes ) {
  * descriptor. It will be `undefined` when last descriptor is removed from the stack.
  * @param {module:engine/conversion/downcast-converters~HighlightDescriptor} [data.oldDescriptor] Old highlight
  * descriptor. It will be `undefined` when first descriptor is added to the stack.
+ * @param {module:engine/view/writer~Writer} writer View writer that can be used to modify element.
  */

src/utils.js

@@ -45,25 +45,27 @@ export function isWidget( element ) {
  * * implements `addHighlight` and `removeHighlight` custom properties to handle view highlight on widgets.
  *
  * @param {module:engine/view/element~Element} element
+ * @param {module:engine/view/writer~Writer} writer
  * @param {Object} [options={}]
  * @param {String|Function} [options.label] Element's label provided to {@link ~setLabel} function. It can be passed as
  * a plain string or a function returning a string.
  * @returns {module:engine/view/element~Element} Returns same element.
  */
-export function toWidget( element, options = {} ) {
-	element.setAttribute( 'contenteditable', 'false' );
+export function toWidget( element, writer, options = {} ) {
+	writer.setAttribute( 'contenteditable', 'false', element );
+	writer.addClass( WIDGET_CLASS_NAME, element );
+	writer.setCustomProperty( widgetSymbol, true, element );
 	element.getFillerOffset = getFillerOffset;
-	element.addClass( WIDGET_CLASS_NAME );
-	element.setCustomProperty( widgetSymbol, true );
 
 	if ( options.label ) {
-		setLabel( element, options.label );
+		setLabel( element, options.label, writer );
 	}
 
 	setHighlightHandling(
 		element,
-		( element, descriptor ) => element.addClass( ...normalizeToArray( descriptor.class ) ),
-		( element, descriptor ) => element.removeClass( ...normalizeToArray( descriptor.class ) )
+		writer,
+		( element, descriptor, writer ) => writer.addClass( normalizeToArray( descriptor.class ), element ),
+		( element, descriptor, writer ) => writer.removeClass( normalizeToArray( descriptor.class ), element )
 	);
 
 	return element;
@@ -79,24 +81,25 @@ export function toWidget( element, options = {} ) {
  * properly determine which highlight descriptor should be used at given time.
  *
  * @param {module:engine/view/element~Element} element
+ * @param {module:engine/view/writer~Writer} writer
  * @param {Function} add
  * @param {Function} remove
  */
-export function setHighlightHandling( element, add, remove ) {
+export function setHighlightHandling( element, writer, add, remove ) {
 	const stack = new HighlightStack();
 
 	stack.on( 'change:top', ( evt, data ) => {
 		if ( data.oldDescriptor ) {
-			remove( element, data.oldDescriptor );
+			remove( element, data.oldDescriptor, data.writer );
 		}
 
 		if ( data.newDescriptor ) {
-			add( element, data.newDescriptor );
+			add( element, data.newDescriptor, data.writer );
 		}
 	} );
 
-	element.setCustomProperty( 'addHighlight', ( element, descriptor ) => stack.add( descriptor ) );
-	element.setCustomProperty( 'removeHighlight', ( element, id ) => stack.remove( id ) );
+	writer.setCustomProperty( 'addHighlight', ( element, descriptor, writer ) => stack.add( descriptor, writer ), element );
+	writer.setCustomProperty( 'removeHighlight', ( element, id, writer ) => stack.remove( id, writer ), element );
 }
 
 /**
@@ -106,9 +109,10 @@ export function setHighlightHandling( element, add, remove ) {
  *
  * @param {module:engine/view/element~Element} element
  * @param {String|Function} labelOrCreator
+ *  * @param {module:engine/view/writer~Writer} writer
  */
-export function setLabel( element, labelOrCreator ) {
-	element.setCustomProperty( labelSymbol, labelOrCreator );
+export function setLabel( element, labelOrCreator, writer ) {
+	writer.setCustomProperty( labelSymbol, labelOrCreator, element );
 }
 
 /**
@@ -137,22 +141,22 @@ export function getLabel( element ) {
  * @param {module:engine/view/editableelement~EditableElement} editable
  * @returns {module:engine/view/editableelement~EditableElement} Returns same element that was provided in `editable` param.
  */
-export function toWidgetEditable( editable ) {
-	editable.addClass( 'ck-editable' );
+export function toWidgetEditable( editable, writer ) {
+	writer.addClass( 'ck-editable', editable );
 
 	// Set initial contenteditable value.
-	editable.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true' );
+	writer.setAttribute( 'contenteditable', editable.isReadOnly ? 'false' : 'true', editable );
 
 	// Bind contenteditable property to element#isReadOnly.
 	editable.on( 'change:isReadOnly', ( evt, property, is ) => {
-		editable.setAttribute( 'contenteditable', is ? 'false' : 'true' );
+		writer.setAttribute( 'contenteditable', is ? 'false' : 'true', editable );
 	} );
 
 	editable.on( 'change:isFocused', ( evt, property, is ) => {
 		if ( is ) {
-			editable.addClass( 'ck-editable_focused' );
+			writer.addClass( 'ck-editable_focused', editable );
 		} else {
-			editable.removeClass( 'ck-editable_focused' );
+			writer.removeClass( 'ck-editable_focused', editable );
 		}
 	} );
 

src/widget.js

@@ -42,7 +42,8 @@ export default class Widget extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		const viewDocument = this.editor.editing.view;
+		const view = this.editor.editing.view;
+		const viewDocument = view.document;
 
 		/**
 		 * Holds previously selected widgets.
@@ -54,32 +55,33 @@ export default class Widget extends Plugin {
 
 		// Model to view selection converter.
 		// Converts selection placed over widget element to fake selection
-		this.editor.editing.downcastDispatcher.on( 'selection', ( evt, data, consumable, conversionApi ) => {
+		this.editor.editing.downcastDispatcher.on( 'selection', ( evt, data, conversionApi ) => {
 			// Remove selected class from previously selected widgets.
-			this._clearPreviouslySelectedWidgets();
+			this._clearPreviouslySelectedWidgets( conversionApi.writer );
 
-			const viewSelection = conversionApi.viewSelection;
+			const viewWriter = conversionApi.writer;
+			const viewSelection = viewWriter.document.selection;
 			const selectedElement = viewSelection.getSelectedElement();
 
 			for ( const range of viewSelection.getRanges() ) {
 				for ( const value of range ) {
 					const node = value.item;
 
 					if ( node.is( 'element' ) && isWidget( node ) ) {
-						node.addClass( WIDGET_SELECTED_CLASS_NAME );
+						viewWriter.addClass( WIDGET_SELECTED_CLASS_NAME, node );
 						this._previouslySelected.add( node );
 
 						// Check if widget is a single element selected.
 						if ( node == selectedElement ) {
-							viewSelection.setFake( true, { label: getLabel( selectedElement ) } );
+							viewWriter.setFakeSelection( true, { label: getLabel( selectedElement ) } );
 						}
 					}
 				}
 			}
 		}, { priority: 'low' } );
 
 		// If mouse down is pressed on widget - create selection over whole widget.
-		viewDocument.addObserver( MouseObserver );
+		view.addObserver( MouseObserver );
 		this.listenTo( viewDocument, 'mousedown', ( ...args ) => this._onMousedown( ...args ) );
 
 		// Handle custom keydown behaviour.
@@ -103,7 +105,8 @@ export default class Widget extends Plugin {
 	 */
 	_onMousedown( eventInfo, domEventData ) {
 		const editor = this.editor;
-		const viewDocument = editor.editing.view;
+		const view = editor.editing.view;
+		const viewDocument = view.document;
 		let element = domEventData.target;
 
 		// Do nothing if inside nested editable.
@@ -124,7 +127,7 @@ export default class Widget extends Plugin {
 
 		// Focus editor if is not focused already.
 		if ( !viewDocument.isFocused ) {
-			viewDocument.focus();
+			view.focus();
 		}
 
 		// Create model selection over widget.
@@ -280,7 +283,8 @@ export default class Widget extends Plugin {
 	_selectAllContent() {
 		const model = this.editor.model;
 		const editing = this.editor.editing;
-		const viewDocument = editing.view;
+		const view = editing.view;
+		const viewDocument = view.document;
 		const viewSelection = viewDocument.selection;
 
 		const selectedElement = viewSelection.getSelectedElement();
@@ -341,11 +345,13 @@ export default class Widget extends Plugin {
 
 	/**
 	 * Removes CSS class from previously selected widgets.
+	 *
 	 * @private
+	 * @param {module:engine/view/writer~Writer} writer
 	 */
-	_clearPreviouslySelectedWidgets() {
+	_clearPreviouslySelectedWidgets( writer ) {
 		for ( const widget of this._previouslySelected ) {
-			widget.removeClass( WIDGET_SELECTED_CLASS_NAME );
+			writer.removeClass( WIDGET_SELECTED_CLASS_NAME, widget );
 		}
 
 		this._previouslySelected.clear();