diff --git a/src/view/downcastwriter.js b/src/view/downcastwriter.js index 7561e12df..bb688d091 100644 --- a/src/view/downcastwriter.js +++ b/src/view/downcastwriter.js @@ -81,7 +81,7 @@ export default class DowncastWriter { * writer.setSelection( position ); * * // Sets collapsed selection at the position of given item and offset. - * const paragraph = writer.createContainerElement( 'paragraph' ); + * const paragraph = writer.createContainerElement( 'p' ); * writer.setSelection( paragraph, offset ); * * Creates a range inside an {@link module:engine/view/element~Element element} which starts before the first child of @@ -152,13 +152,13 @@ export default class DowncastWriter { * Creates new {@link module:engine/view/attributeelement~AttributeElement}. * * writer.createAttributeElement( 'strong' ); - * writer.createAttributeElement( 'strong', { alignment: 'center' } ); + * writer.createAttributeElement( 'a', { href: 'foo.bar' } ); * * // Make `` element contain other attributes element so the `` element is not broken. * writer.createAttributeElement( 'a', { href: 'foo.bar' }, { priority: 5 } ); * * // Set `id` of a marker element so it is not joined or merged with "normal" elements. - * writer.createAttributeElement( 'span', { class: 'myMarker' }, { id: 'marker:my' } ); + * writer.createAttributeElement( 'span', { class: 'my-marker' }, { id: 'marker:my' } ); * * @param {String} name Name of the element. * @param {Object} [attributes] Element's attributes. @@ -184,8 +184,16 @@ export default class DowncastWriter { /** * Creates new {@link module:engine/view/containerelement~ContainerElement}. * - * writer.createContainerElement( 'paragraph' ); - * writer.createContainerElement( 'paragraph', { alignment: 'center' } ); + * writer.createContainerElement( 'p' ); + * + * // Create element with custom attributes. + * writer.createContainerElement( 'div', { id: 'foo-bar', 'data-baz': '123' } ); + * + * // Create element with custom styles. + * writer.createContainerElement( 'p', { style: 'font-weight: bold; padding-bottom: 10px' } ); + * + * // Create element with custom classes. + * writer.createContainerElement( 'p', { class: 'foo bar baz' } ); * * @param {String} name Name of the element. * @param {Object} [attributes] Elements attributes. @@ -199,7 +207,7 @@ export default class DowncastWriter { * Creates new {@link module:engine/view/editableelement~EditableElement}. * * writer.createEditableElement( 'div' ); - * writer.createEditableElement( 'div', { alignment: 'center' } ); + * writer.createEditableElement( 'div', { id: 'foo-1234' } ); * * @param {String} name Name of the element. * @param {Object} [attributes] Elements attributes. @@ -216,7 +224,7 @@ export default class DowncastWriter { * Creates new {@link module:engine/view/emptyelement~EmptyElement}. * * writer.createEmptyElement( 'img' ); - * writer.createEmptyElement( 'img', { alignment: 'center' } ); + * writer.createEmptyElement( 'img', { id: 'foo-1234' } ); * * @param {String} name Name of the element. * @param {Object} [attributes] Elements attributes. @@ -230,7 +238,7 @@ export default class DowncastWriter { * Creates new {@link module:engine/view/uielement~UIElement}. * * writer.createUIElement( 'span' ); - * writer.createUIElement( 'span', { alignment: 'center' } ); + * writer.createUIElement( 'span', { id: 'foo-1234' } ); * * Custom render function can be provided as third parameter: * @@ -370,10 +378,10 @@ export default class DowncastWriter { * * In following examples `

` is a container, `` and `` are attribute nodes: * - *

foobar{}

->

foobar[]

- *

foo{}bar

->

foo{}bar

- *

foob{}ar

->

foob[]ar

- *

fo{oba}r

->

foobar

+ *

foobar{}

->

foobar[]

+ *

foo{}bar

->

foo{}bar

+ *

foob{}ar

->

foob[]ar

+ *

fo{oba}r

->

foobar

* * **Note:** {@link module:engine/view/documentfragment~DocumentFragment DocumentFragment} is treated like a container. * @@ -416,10 +424,10 @@ export default class DowncastWriter { * has to be directly inside container element and cannot be in root. Does not break if position is at the beginning * or at the end of it's parent element. * - *

foo^bar

->

foo

bar

- *

foo

^

bar

->

foo

bar

- *

^foobar

-> ^

foobar

- *

foobar^

->

foobar

^ + *

foo^bar

->

foo

bar

+ *

foo

^

bar

->

foo

bar

+ *

^foobar

-> ^

foobar

+ *

foobar^

->

foobar

^ * * **Note:** Difference between {@link module:engine/view/downcastwriter~DowncastWriter#breakAttributes breakAttributes} and * {@link module:engine/view/downcastwriter~DowncastWriter#breakContainer breakContainer} is that `breakAttributes` breaks all @@ -480,14 +488,14 @@ export default class DowncastWriter { * * In following examples `

` is a container and `` is an attribute element: * - *

foo[]bar

->

foo{}bar

- *

foo[]bar

->

foo{}bar

- *

a[]b

->

a[]b

+ *

foo[]bar

->

foo{}bar

+ *

foo[]bar

->

foo{}bar

+ *

a[]b

->

a[]b

* * It will also take care about empty attributes when merging: * - *

[]

->

[]

- *

foo[]bar

->

foo{}bar

+ *

[]

->

[]

+ *

foo[]bar

->

foo{}bar

* * **Note:** Difference between {@link module:engine/view/downcastwriter~DowncastWriter#mergeAttributes mergeAttributes} and * {@link module:engine/view/downcastwriter~DowncastWriter#mergeContainers mergeContainers} is that `mergeAttributes` merges two @@ -553,8 +561,8 @@ export default class DowncastWriter { * Merges two {@link module:engine/view/containerelement~ContainerElement container elements} that are before and after given position. * Precisely, the element after the position is removed and it's contents are moved to element before the position. * - *

foo

^

bar

->

foo^bar

- *
foo
^

bar

->
foo^bar
+ *

foo

^

bar

->

foo^bar

+ *
foo
^

bar

->
foo^bar
* * **Note:** Difference between {@link module:engine/view/downcastwriter~DowncastWriter#mergeAttributes mergeAttributes} and * {@link module:engine/view/downcastwriter~DowncastWriter#mergeContainers mergeContainers} is that `mergeAttributes` merges two @@ -1026,7 +1034,7 @@ export default class DowncastWriter { * const selection = writer.createSelection( position ); * * // Creates collapsed selection at the position of given item and offset. - * const paragraph = writer.createContainerElement( 'paragraph' ); + * const paragraph = writer.createContainerElement( 'p' ); * const selection = writer.createSelection( paragraph, offset ); * * // Creates a range inside an {@link module:engine/view/element~Element element} which starts before the