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

Commit

Permalink
Docs: Adjusted code samples to utilize writers.
Browse files Browse the repository at this point in the history
  • Loading branch information
f1ames committed Nov 7, 2018
1 parent ef2978c commit b0aa93b
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 44 deletions.
58 changes: 30 additions & 28 deletions src/dev-utils/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -113,42 +113,44 @@ setData._parse = parse;
* Converts view elements to HTML-like string representation.
* A root element can be provided as {@link module:engine/view/text~Text text}:
*
* const text = new Text( 'foobar' );
* const text = downcastWriter.createText( 'foobar' );
* stringify( text ); // 'foobar'
*
* or as an {@link module:engine/view/element~Element element}:
*
* const element = new Element( 'p', null, new Text( 'foobar' ) );
* const element = downcastWriter.createElement( 'p', null, downcastWriter.createText( 'foobar' ) );
* stringify( element ); // '<p>foobar</p>'
*
* or as a {@link module:engine/view/documentfragment~DocumentFragment document fragment}:
*
* const text = new Text( 'foobar' );
* const b = new Element( 'b', { name: 'test' }, text );
* const p = new Element( 'p', { style: 'color:red;' } );
* const fragment = new DocumentFragment( [ p, b ] );
* const text = downcastWriter.createText( 'foobar' );
* const b = downcastWriter.createElement( 'b', { name: 'test' }, text );
* const p = downcastWriter.createElement( 'p', { style: 'color:red;' } );
* const fragment = downcastWriter.createDocumentFragment( [ p, b ] );
*
* stringify( fragment ); // '<p style="color:red;"></p><b name="test">foobar</b>'
*
* Additionally, a {@link module:engine/view/documentselection~DocumentSelection selection} instance can be provided.
* Ranges from the selection will then be included in output data.
* If a range position is placed inside the element node, it will be represented with `[` and `]`:
*
* const text = new Text( 'foobar' );
* const b = new Element( 'b', null, text );
* const p = new Element( 'p', null, b );
* const selection = new Selection(
* Range._createFromParentsAndOffsets( p, 0, p, 1 )
* const text = downcastWriter.createText( 'foobar' );
* const b = downcastWriter.createElement( 'b', null, text );
* const p = downcastWriter.createElement( 'p', null, b );
* const selection = downcastWriter.createSelection(
* downcastWriter.createRangeIn( p )
* );
*
* stringify( p, selection ); // '<p>[<b>foobar</b>]</p>'
*
* If a range is placed inside the text node, it will be represented with `{` and `}`:
*
* const text = new Text( 'foobar' );
* const b = new Element( 'b', null, text );
* const p = new Element( 'p', null, b );
* const selection = new Selection( Range._createFromParentsAndOffsets( text, 1, text, 5 ) );
* const text = downcastWriter.createText( 'foobar' );
* const b = downcastWriter.createElement( 'b', null, text );
* const p = downcastWriter.createElement( 'p', null, b );
* const selection = downcastWriter.createSelection(
* downcastWriter.createRange( downcastWriter.createPositionAt( text, 1 ), downcastWriter.createPositionAt( text, 5 ) )
* );
*
* stringify( p, selection ); // '<p><b>f{ooba}r</b></p>'
*
Expand All @@ -159,10 +161,10 @@ setData._parse = parse;
*
* Multiple ranges are supported:
*
* const text = new Text( 'foobar' );
* const selection = new Selection( [
* Range._createFromParentsAndOffsets( text, 0, text, 1 ) ),
* Range._createFromParentsAndOffsets( text, 3, text, 5 ) )
* const text = downcastWriter.createText( 'foobar' );
* const selection = downcastWriter.createSelection( [
* downcastWriter.createRange( downcastWriter.createPositionAt( text, 0 ), downcastWriter.createPositionAt( text, 1 ) ),
* downcastWriter.createRange( downcastWriter.createPositionAt( text, 3 ), downcastWriter.createPositionAt( text, 5 ) )
* ] );
*
* stringify( text, selection ); // '{f}oo{ba}r'
Expand All @@ -172,9 +174,9 @@ setData._parse = parse;
* is provided, it will be converted to a selection containing this range. If a position instance is provided, it will
* be converted to a selection containing one range collapsed at this position.
*
* const text = new Text( 'foobar' );
* const range = Range._createFromParentsAndOffsets( text, 0, text, 1 );
* const position = new Position( text, 3 );
* const text = downcastWriter.createText( 'foobar' );
* const range = downcastWriter.createRange( downcastWriter.createPositionAt( text, 0 ), downcastWriter.createPositionAt( text, 1 ) );
* const position = downcastWriter.createPositionAt( text, 3 );
*
* stringify( text, range ); // '{f}oobar'
* stringify( text, position ); // 'foo{}bar'
Expand All @@ -186,10 +188,10 @@ setData._parse = parse;
* {@link module:engine/view/emptyelement~EmptyElement empty elements}
* and {@link module:engine/view/uielement~UIElement UI elements}:
*
* const attribute = new AttributeElement( 'b' );
* const container = new ContainerElement( 'p' );
* const empty = new EmptyElement( 'img' );
* const ui = new UIElement( 'span' );
* const attribute = downcastWriter.createAttributeElement( 'b' );
* const container = downcastWriter.createContainerElement( 'p' );
* const empty = downcastWriter.createEmptyElement( 'img' );
* const ui = downcastWriter.createUIElement( 'span' );
* getData( attribute, null, { showType: true } ); // '<attribute:b></attribute:b>'
* getData( container, null, { showType: true } ); // '<container:p></container:p>'
* getData( empty, null, { showType: true } ); // '<empty:img></empty:img>'
Expand All @@ -198,14 +200,14 @@ setData._parse = parse;
* If `options.showPriority` is set to `true`, a priority will be displayed for all
* {@link module:engine/view/attributeelement~AttributeElement attribute elements}.
*
* const attribute = new AttributeElement( 'b' );
* const attribute = downcastWriter.createAttributeElement( 'b' );
* attribute._priority = 20;
* getData( attribute, null, { showPriority: true } ); // <b view-priority="20"></b>
*
* If `options.showAttributeElementId` is set to `true`, the attribute element's id will be displayed for all
* {@link module:engine/view/attributeelement~AttributeElement attribute elements} that have it set.
*
* const attribute = new AttributeElement( 'span' );
* const attribute = downcastWriter.createAttributeElement( 'span' );
* attribute._id = 'marker:foo';
* getData( attribute, null, { showAttributeElementId: true } ); // <span view-id="marker:foo"></span>
*
Expand Down
10 changes: 5 additions & 5 deletions src/view/node.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,11 @@ export default class Node {
* Gets a path to the node. The path is an array containing indices of consecutive ancestors of this node,
* beginning from {@link module:engine/view/node~Node#root root}, down to this node's index.
*
* const abc = new Text( 'abc' );
* const foo = new Text( 'foo' );
* const h1 = new Element( 'h1', null, new Text( 'header' ) );
* const p = new Element( 'p', null, [ abc, foo ] );
* const div = new Element( 'div', null, [ h1, p ] );
* const abc = downcastWriter.createText( 'abc' );
* const foo = downcastWriter.createText( 'foo' );
* const h1 = downcastWriter.createElement( 'h1', null, downcastWriter.createText( 'header' ) );
* const p = downcastWriter.createElement( 'p', null, [ abc, foo ] );
* const div = downcastWriter.createElement( 'div', null, [ h1, p ] );
* foo.getPath(); // Returns [ 1, 3 ]. `foo` is in `p` which is in `div`. `p` starts at offset 1, while `foo` at 3.
* h1.getPath(); // Returns [ 0 ].
* div.getPath(); // Returns [].
Expand Down
16 changes: 8 additions & 8 deletions src/view/range.js
Original file line number Diff line number Diff line change
Expand Up @@ -205,10 +205,10 @@ export default class Range {
*
* Examples:
*
* let foo = new Text( 'foo' );
* let img = new ContainerElement( 'img' );
* let bar = new Text( 'bar' );
* let p = new ContainerElement( 'p', null, [ foo, img, bar ] );
* let foo = downcastWriter.createText( 'foo' );
* let img = downcastWriter.createContainerElement( 'img' );
* let bar = downcastWriter.createText( 'bar' );
* let p = downcastWriter.createContainerElement( 'p', null, [ foo, img, bar ] );
*
* let range = view.createRange( view.createPositionAt( foo, 2 ), view.createPositionAt( bar, 1 ); // "o", img, "b" are in range.
* let otherRange = view.createRange( // "oo", img, "ba" are in range.
Expand Down Expand Up @@ -260,10 +260,10 @@ export default class Range {
*
* Examples:
*
* let foo = new Text( 'foo' );
* let img = new ContainerElement( 'img' );
* let bar = new Text( 'bar' );
* let p = new ContainerElement( 'p', null, [ foo, img, bar ] );
* let foo = downcastWriter.createText( 'foo' );
* let img = downcastWriter.createContainerElement( 'img' );
* let bar = downcastWriter.createText( 'bar' );
* let p = downcastWriter.createContainerElement( 'p', null, [ foo, img, bar ] );
*
* let range = view.createRange( view.createPositionAt( foo, 2 ), view.createPositionAt( bar, 1 ); // "o", img, "b" are in range.
* let otherRange = view.createRange( view.createPositionAt( foo, 1 ), view.createPositionAt( p, 2 ); // "oo", img are in range.
Expand Down
4 changes: 2 additions & 2 deletions src/view/text.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@ export default class Text extends Node {
/**
* This getter is required when using the addition assignment operator on protected property:
*
* const foo = new Text( 'foo' );
* const bar = new Text( 'bar' );
* const foo = downcastWriter.createText( 'foo' );
* const bar = downcastWriter.createText( 'bar' );
*
* foo._data += bar.data; // executes: `foo._data = foo._data + bar.data`
* console.log( foo.data ); // prints: 'foobar'
Expand Down
2 changes: 1 addition & 1 deletion src/view/uielement.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default class UIElement extends Element {
* {@link module:engine/view/domconverter~DomConverter}.
* Do not use inheritance to create custom rendering method, replace `render()` method instead:
*
* const myUIElement = new UIElement( 'span' );
* const myUIElement = downcastWriter.createUIElement( 'span' );
* myUIElement.render = function( domDocument ) {
* const domElement = this.toDomElement( domDocument );
* domElement.innerHTML = '<b>this is ui element</b>';
Expand Down

0 comments on commit b0aa93b

Please sign in to comment.