Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge branch t/ckeditor5-engine/1556
Browse files Browse the repository at this point in the history 
Internal: Align code to the latest changes in conversion helpers API, introduced in engine t/1556.
  • Loading branch information
Piotr Jasiun committed Dec 21, 2018
2 parents 8226829 + 7d76d54 commit 85d6ca2
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 67 deletions.
20 changes: 10 additions & 10 deletions src/highlightstack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
*
* * highlight with highest priority should be applied,
* * if two highlights have same priority - sort by CSS class provided in
* {@link module:engine/conversion/downcast-converters~HighlightDescriptor}.
* {@link module:engine/conversion/downcasthelpers~HighlightDescriptor}.
*
* This way, highlight will be applied with the same rules it is applied on texts.
*/
Expand All @@ -33,7 +33,7 @@ export default class HighlightStack {
* Adds highlight descriptor to the stack.
*
* @fires change:top
* @param {module:engine/conversion/downcast-converters~HighlightDescriptor} descriptor
* @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} descriptor
* @param {module:engine/view/downcastwriter~DowncastWriter} writer
*/
add( descriptor, writer ) {
Expand Down Expand Up @@ -83,7 +83,7 @@ export default class HighlightStack {
* descriptor with same id is already present.
*
* @private
* @param {module:engine/conversion/downcast-converters~HighlightDescriptor} descriptor
* @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} descriptor
*/
_insertDescriptor( descriptor ) {
const stack = this._stack;
Expand Down Expand Up @@ -131,17 +131,17 @@ mix( HighlightStack, EmitterMixin );

// Compares two descriptors by checking their priority and class list.
//
// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} a
// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} b
// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} a
// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} b
// @returns {Boolean} Returns true if both descriptors are defined and have same priority and classes.
function compareDescriptors( a, b ) {
return a && b && a.priority == b.priority && classesToString( a.classes ) == classesToString( b.classes );
}

// Checks whenever first descriptor should be placed in the stack before second one.
//
// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} a
// @param {module:engine/conversion/downcast-converters~HighlightDescriptor} b
// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} a
// @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} b
// @returns {Boolean}
function shouldABeBeforeB( a, b ) {
if ( a.priority > b.priority ) {
Expand All @@ -154,7 +154,7 @@ function shouldABeBeforeB( a, b ) {
return classesToString( a.classes ) > classesToString( b.classes );
}

// Converts CSS classes passed with {@link module:engine/conversion/downcast-converters~HighlightDescriptor} to
// Converts CSS classes passed with {@link module:engine/conversion/downcasthelpers~HighlightDescriptor} to
// sorted string.
//
// @param {String|Array<String>} descriptor
Expand All @@ -168,9 +168,9 @@ function classesToString( classes ) {
*
* @event change:top
* @param {Object} data Additional information about the change.
* @param {module:engine/conversion/downcast-converters~HighlightDescriptor} [data.newDescriptor] New highlight
* @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} [data.newDescriptor] New highlight
* descriptor. It will be `undefined` when last descriptor is removed from the stack.
* @param {module:engine/conversion/downcast-converters~HighlightDescriptor} [data.oldDescriptor] Old highlight
* @param {module:engine/conversion/downcasthelpers~HighlightDescriptor} [data.oldDescriptor] Old highlight
* descriptor. It will be `undefined` when first descriptor is added to the stack.
* @param {module:engine/view/downcastwriter~DowncastWriter} writer View writer that can be used to modify element.
*/
25 changes: 14 additions & 11 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export function isWidget( node ) {
return !!node.getCustomProperty( widgetSymbol );
}

/* eslint-disable max-len */
/**
* Converts the given {@link module:engine/view/element~Element} to a widget in the following way:
*
Expand All @@ -53,30 +54,31 @@ export function isWidget( node ) {
* * adds a custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},
* * implements the {@link ~setHighlightHandling view highlight on widgets}.
*
* This function needs to be used in conjuction with {@link module:engine/conversion/downcast-converters downcast converters}
* like {@link module:engine/conversion/downcast-converters~downcastElementToElement `downcastElementToElement()`}.
* This function needs to be used in conjunction with
* {@link module:engine/conversion/downcasthelpers~DowncastHelpers downcast conversion helpers}
* like {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
* Moreover, typically you will want to use `toWidget()` only for `editingDowncast`, while keeping the `dataDowncast` clean.
*
* For example, in order to convert a `<widget>` model element to `<div class="widget">` in the view, you can define
* such converters:
*
* editor.conversion.for( 'editingDowncast' )
* .add( downcastElementToElement( {
* .elementToElement( {
* model: 'widget',
* view: ( modelItem, writer ) => {
* const div = writer.createContainerElement( 'div', { class: 'widget' } );
*
* return toWidget( div, writer, { label: 'some widget' } );
* }
* } ) );
* } );
*
* editor.conversion.for( 'dataDowncast' )
* .add( downcastElementToElement( {
* .elementToElement( {
* model: 'widget',
* view: ( modelItem, writer ) => {
* return writer.createContainerElement( 'div', { class: 'widget' } );
* }
* } ) );
* } );
*
* See the full source code of the widget (with a nested editable) schema definition and converters in
* [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
Expand All @@ -89,6 +91,7 @@ export function isWidget( node ) {
* @param {Boolean} [options.hasSelectionHandler=false] If `true`, the widget will have a selection handler added.
* @returns {module:engine/view/element~Element} Returns the same element.
*/
/* eslint-enable max-len */
export function toWidget( element, writer, options = {} ) {
// The selection on Edge behaves better when the whole editor contents is in a single contenteditable element.
// https://github.com/ckeditor/ckeditor5/issues/1079
Expand Down Expand Up @@ -187,28 +190,28 @@ export function getLabel( element ) {
* * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
*
* Similarly to {@link ~toWidget `toWidget()`} this function should be used in `dataDowncast` only and it is usually
* used together with {@link module:engine/conversion/downcast-converters~downcastElementToElement `downcastElementToElement()`}.
* used together with {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
*
* For example, in order to convert a `<nested>` model element to `<div class="nested">` in the view, you can define
* such converters:
*
* editor.conversion.for( 'editingDowncast' )
* .add( downcastElementToElement( {
* .elementToElement( {
* model: 'nested',
* view: ( modelItem, writer ) => {
* const div = writer.createEditableElement( 'div', { class: 'nested' } );
*
* return toWidgetEditable( nested, writer );
* }
* } ) );
* } );
*
* editor.conversion.for( 'dataDowncast' )
* .add( downcastElementToElement( {
* .elementToElement( {
* model: 'nested',
* view: ( modelItem, writer ) => {
* return writer.createContainerElement( 'div', { class: 'nested' } );
* }
* } ) );
* } );
*
* See the full source code of the widget (with nested editable) schema definition and converters in
* [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
Expand Down
10 changes: 4 additions & 6 deletions tests/manual/nested-widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ 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';
import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
import { getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
import { getData as getViewData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';

Expand All @@ -24,17 +22,17 @@ function MyPlugin( editor ) {
allowIn: 'div'
} );

editor.conversion.for( 'downcast' ).add( downcastElementToElement( {
editor.conversion.for( 'downcast' ).elementToElement( {
model: 'div',
view: ( modelElement, writer ) => {
return toWidget( writer.createContainerElement( 'div', { class: 'widget' } ), writer );
}
} ) );
} );

editor.conversion.for( 'upcast' ).add( upcastElementToElement( {
editor.conversion.for( 'upcast' ).elementToElement( {
model: 'div',
view: 'div'
} ) );
} );
}

ClassicEditor
Expand Down
27 changes: 12 additions & 15 deletions tests/manual/widget-with-nestededitable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ import Widget from '../../src/widget';

import { toWidget, toWidgetEditable } from '../../src/utils';

import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Widget ],
Expand All @@ -41,52 +38,52 @@ ClassicEditor
} );

editor.conversion.for( 'dataDowncast' )
.add( downcastElementToElement( {
.elementToElement( {
model: 'widget',
view: ( modelItem, writer ) => {
return writer.createContainerElement( 'div', { class: 'widget' } );
}
} ) )
.add( downcastElementToElement( {
} )
.elementToElement( {
model: 'nested',
view: ( modelItem, writer ) => {
return writer.createContainerElement( 'div', { class: 'nested' } );
}
} ) );
} );

editor.conversion.for( 'editingDowncast' )
.add( downcastElementToElement( {
.elementToElement( {
model: 'widget',
view: ( modelItem, writer ) => {
const div = writer.createContainerElement( 'div', { class: 'widget' } );

return toWidget( div, writer, { label: 'widget label' } );
}
} ) )
.add( downcastElementToElement( {
} )
.elementToElement( {
model: 'nested',
view: ( modelItem, writer ) => {
const nested = writer.createEditableElement( 'div', { class: 'nested' } );

return toWidgetEditable( nested, writer );
}
} ) );
} );

editor.conversion.for( 'upcast' )
.add( upcastElementToElement( {
.elementToElement( {
view: {
name: 'div',
class: 'widget'
},
model: 'widget'
} ) )
.add( upcastElementToElement( {
} )
.elementToElement( {
view: {
name: 'div',
class: 'nested'
},
model: 'nested'
} ) );
} );

editor.setData(
'<p>foobar</p>' +
Expand Down
33 changes: 16 additions & 17 deletions tests/widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtest
import Widget from '../src/widget';
import Typing from '@ckeditor/ckeditor5-typing/src/typing';
import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { toWidget } from '../src/utils';
import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
Expand Down Expand Up @@ -76,12 +75,12 @@ describe( 'Widget', () => {
} );

editor.conversion.for( 'downcast' )
.add( downcastElementToElement( { model: 'paragraph', view: 'p' } ) )
.add( downcastElementToElement( { model: 'inline', view: 'figure' } ) )
.add( downcastElementToElement( { model: 'image', view: 'img' } ) )
.add( downcastElementToElement( { model: 'blockQuote', view: 'blockquote' } ) )
.add( downcastElementToElement( { model: 'div', view: 'div' } ) )
.add( downcastElementToElement( {
.elementToElement( { model: 'paragraph', view: 'p' } )
.elementToElement( { model: 'inline', view: 'figure' } )
.elementToElement( { model: 'image', view: 'img' } )
.elementToElement( { model: 'blockQuote', view: 'blockquote' } )
.elementToElement( { model: 'div', view: 'div' } )
.elementToElement( {
model: 'widget',
view: ( modelItem, viewWriter ) => {
const b = viewWriter.createAttributeElement( 'b' );
Expand All @@ -90,15 +89,15 @@ describe( 'Widget', () => {

return toWidget( div, viewWriter, { label: 'element label' } );
}
} ) )
.add( downcastElementToElement( {
} )
.elementToElement( {
model: 'nested',
view: ( modelItem, viewWriter ) => viewWriter.createEditableElement( 'figcaption', { contenteditable: true } )
} ) )
.add( downcastElementToElement( {
} )
.elementToElement( {
model: 'editable',
view: ( modelItem, viewWriter ) => viewWriter.createEditableElement( 'figcaption', { contenteditable: true } )
} ) );
} );
} );
} );

Expand Down Expand Up @@ -1192,19 +1191,19 @@ describe( 'Widget', () => {
} );

editor.conversion.for( 'downcast' )
.add( downcastElementToElement( { model: 'paragraph', view: 'p' } ) )
.add( downcastElementToElement( {
.elementToElement( { model: 'paragraph', view: 'p' } )
.elementToElement( {
model: 'widget',
view: ( modelItem, viewWriter ) => {
const widget = viewWriter.createContainerElement( 'div' );

return toWidget( widget, viewWriter, { hasSelectionHandler: true } );
}
} ) )
.add( downcastElementToElement( {
} )
.elementToElement( {
model: 'nested',
view: ( modelItem, viewWriter ) => viewWriter.createEditableElement( 'figcaption', { contenteditable: true } )
} ) );
} );
} );
} );

Expand Down
14 changes: 6 additions & 8 deletions tests/widgettoolbarrepository.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Widget from '../src/widget';
import WidgetToolbarRepository from '../src/widgettoolbarrepository';
import { isWidget, toWidget } from '../src/utils';
import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import View from '@ckeditor/ckeditor5-ui/src/view';

Expand Down Expand Up @@ -326,30 +324,30 @@ class FakeWidget extends Plugin {

const conversion = editor.conversion;

conversion.for( 'dataDowncast' ).add( downcastElementToElement( {
conversion.for( 'dataDowncast' ).elementToElement( {
model: 'fake-widget',
view: ( modelElement, viewWriter ) => {
return viewWriter.createContainerElement( 'div' );
}
} ) );
} );

conversion.for( 'editingDowncast' ).add( downcastElementToElement( {
conversion.for( 'editingDowncast' ).elementToElement( {
model: 'fake-widget',
view: ( modelElement, viewWriter ) => {
const fakeWidget = viewWriter.createContainerElement( 'div' );
viewWriter.setCustomProperty( fakeWidgetSymbol, true, fakeWidget );

return toWidget( fakeWidget, viewWriter, { label: 'fake-widget' } );
}
} ) );
} );

conversion.for( 'upcast' ).add( upcastElementToElement( {
conversion.for( 'upcast' ).elementToElement( {
view: {
name: 'div'
},
model: ( view, modelWriter ) => {
return modelWriter.createElement( 'fake-widget' );
}
} ) );
} );
}
}

0 comments on commit 85d6ca2

Please sign in to comment.