How to use the @ckeditor/ckeditor5-utils/src/mix function in @ckeditor/ckeditor5-utils

// @private
// @param {module:engine/model/operation/operation~Operation} operation Executed operation.
function transform( operation ) {
	const result = this.getTransformedByOperation( operation );

	if ( !this.isEqual( result ) ) {
		const oldPosition = this.toPosition();

		this.path = result.path;
		this.root = result.root;

		this.fire( 'change', oldPosition );
	}
}

mix( LivePosition, EmitterMixin );

// @if CK_DEBUG_ENGINE // this.model.document.on( 'change', () => {
		// @if CK_DEBUG_ENGINE //	dumpTrees( this.view.document, this.model.document.version );
		// @if CK_DEBUG_ENGINE // }, { priority: 'lowest' } );
	}

	/**
	 * Removes all event listeners attached to the `EditingController`. Destroys all objects created
	 * by `EditingController` that need to be destroyed.
	 */
	destroy() {
		this.view.destroy();
		this.stopListening();
	}
}

mix( EditingController, ObservableMixin );

* or by changes done to {@link module:engine/model/document~Document model document}
	 * using {@link module:engine/model/batch~Batch Batch} API (`false`).
	 */

	/**
	 * Fired whenever selection attributes are changed.
	 *
	 * @event change:attribute
	 * @param {Boolean} directChange Specifies whether the attributes changed by direct usage of the Selection API (`true`)
	 * or by changes done to the {@link module:engine/model/document~Document model document}
	 * using the {@link module:engine/model/batch~Batch Batch} API (`false`).
	 * @param {Array.} attributeKeys Array containing keys of attributes that changed.
	 */
}

mix( Selection, EmitterMixin );

// Checks whether the given element extends $block in the schema and has a parent (is not a root).
// Marks it as already visited.
function isUnvisitedBlockContainer( element, visited ) {
	if ( visited.has( element ) ) {
		return false;
	}

	visited.add( element );

	// TODO https://github.com/ckeditor/ckeditor5-engine/issues/532#issuecomment-278900072.
	// This should not be a `$block` check.
	return element.document.schema.itemExtends( element.name, '$block' ) && element.parent;
}

// Finds the lowest element in position's ancestors which is a block.

}
			break;
	}

	if ( !this.isEqual( transformed ) ) {
		const oldPosition = Position.createFromPosition( this );

		this.path = transformed.path;
		this.root = transformed.root;

		this.fire( 'change', oldPosition );
	}
	/* eslint-enable no-case-declarations */
}

mix( LivePosition, EmitterMixin );

/**
 * Enum representing how position is "sticking" with their neighbour nodes.
 * Possible values: `'sticksToNext'`, `'sticksToPrevious'`.
 *
 * @typedef {String} module:engine/model/position~PositionStickiness
 */

it( 'should return true when given mixin is mixed to target class', () => {
			mix( CustomClass, mixin );

			expect( testUtils.isMixed( CustomClass, mixin ) ).to.true;
		} );

}

	/**
	 * Fired whenever the UI (all related components) should be refreshed.
	 *
	 * **Note:**: The event is fired after each {@link module:engine/view/document~Document#event:layoutChanged}.
	 * It can also be fired manually via the {@link module:core/editor/editorui~EditorUI#update} method.
	 *
	 * **Note:**: Successive `update` events will throttled (5ms) to improve the performance of the UI
	 * and the overall responsiveness of the editor.
	 *
	 * @event update
	 */
}

mix( EditorUI, EmitterMixin );

/**
	 * @inheritDoc
	 */
	destroy() {
		this.stopListening();
	}

	/**
	 * @inheritDoc
	 */
	static get isContextPlugin() {
		return true;
	}
}

mix( ContextPlugin, ObservableMixin );

yield new Range( start, end );
				}

				start = Position._createAfter( item );
			}

			end = Position._createAfter( item );
		}

		if ( !start.isEqual( end ) ) {
			yield new Range( start, end );
		}
	}
}

mix( Schema, ObservableMixin );

/**
 * Event fired when the {@link #checkChild} method is called. It allows plugging in
 * additional behavior – e.g. implementing rules which cannot be defined using the declarative
 * {@link module:engine/model/schema~SchemaItemDefinition} interface.
 *
 * **Note:** The {@link #addChildCheck} method is a more handy way to register callbacks. Internally,
 * it registers a listener to this event but comes with a simpler API and it is the recommended choice
 * in most of the cases.
 *
 * The {@link #checkChild} method fires an event because it is
 * {@link module:utils/observablemixin~ObservableMixin#decorate decorated} with it. Thanks to that you can
 * use this event in a various way, but the most important use case is overriding standard behaviour of the
 * `checkChild()` method. Let's see a typical listener template:
 *
 *		schema.on( 'checkChild', ( evt, args ) => {

{ addedRange: range, intersectingRange: storedRange }
				);
			}
		}

		this._ranges.push( new Range( range.start, range.end ) );
	}

	/**
	 * Fired whenever selection ranges are changed through {@link ~Selection Selection API}.
	 *
	 * @event change
	 */
}

mix( Selection, EmitterMixin );

/**
 * An entity that is used to set selection.
 *
 * See also {@link module:engine/view/selection~Selection#setTo}
 *
 * @typedef {
 *    module:engine/view/selection~Selection|
 *    module:engine/view/documentselection~DocumentSelection|
 *    module:engine/view/position~Position|
 *    Iterable.|
 *    module:engine/view/range~Range|
 *    module:engine/view/item~Item|
 *    null
 * } module:engine/view/selection~Selectable
 */

if ( removed ) {
			this.add( name, newLiveRange );
		}

		return removed;
	}

	/**
	 * Destroys markers collection.
	 */
	destroy() {
		this.stopListening();
	}
}

mix( MarkersCollection, EmitterMixin );