@ckeditor/ckeditor5-engine 41.4.0-alpha.0 → 41.4.0

package/dist/index.js

@@ -8059,7 +8059,11 @@ class DomConverter {
             }
             if (options.withChildren !== false) {
                 for (const child of this.viewChildrenToDom(viewElementOrFragment, options)){
-                    domElement.appendChild(child);
+                    if (domElement instanceof HTMLTemplateElement) {
+                        domElement.content.appendChild(child);
+                    } else {
+                        domElement.appendChild(child);
+                    }
                 }
             }
             return domElement;
@@ -8278,8 +8282,19 @@ class DomConverter {
      * @param inlineNodes An array that will be populated with inline nodes. It's used internally for whitespace processing.
      * @returns View nodes.
      */ *domChildrenToView(domElement, options = {}, inlineNodes = []) {
-        for(let i = 0; i < domElement.childNodes.length; i++){
-            const domChild = domElement.childNodes[i];
+        // Get child nodes from content document fragment if element is template
+        let childNodes = [];
+        if (domElement instanceof HTMLTemplateElement) {
+            childNodes = [
+                ...domElement.content.childNodes
+            ];
+        } else {
+            childNodes = [
+                ...domElement.childNodes
+            ];
+        }
+        for(let i = 0; i < childNodes.length; i++){
+            const domChild = childNodes[i];
             const generator = this._domToView(domChild, options, inlineNodes);
             // Get the first yielded value or a returned value.
             const viewChild = generator.next().value;
@@ -19132,7 +19147,7 @@ class UpcastHelpers extends ConversionHelpers {
  * @returns Universal converter for view {@link module:engine/view/documentfragment~DocumentFragment fragments} and
  * {@link module:engine/view/element~Element elements} that returns
  * {@link module:engine/model/documentfragment~DocumentFragment model fragment} with children of converted view item.
- */ function convertToModelFragment() {
+ */ function convertToModelFragment$1() {
     return (evt, data, conversionApi)=>{
         // Second argument in `consumable.consume` is discarded for ViewDocumentFragment but is needed for ViewElement.
         if (!data.modelRange && conversionApi.consumable.consume(data.viewItem, {
@@ -22591,10 +22606,10 @@ class DataController extends EmitterMixin() {
         this.upcastDispatcher.on('text', convertText(), {
             priority: 'lowest'
         });
-        this.upcastDispatcher.on('element', convertToModelFragment(), {
+        this.upcastDispatcher.on('element', convertToModelFragment$1(), {
             priority: 'lowest'
         });
-        this.upcastDispatcher.on('documentFragment', convertToModelFragment(), {
+        this.upcastDispatcher.on('documentFragment', convertToModelFragment$1(), {
             priority: 'lowest'
         });
         ObservableMixin().prototype.decorate.call(this, 'init');
@@ -33969,5 +33984,1387 @@ function getBorderPositionReducer(which) {
     ]);
 }
 
-export { AttributeElement, AttributeOperation, BubblingEventInfo, ClickObserver, Conversion, DataController, DataTransfer, DocumentFragment, DocumentSelection, DomConverter, DomEventData, DomEventObserver, DowncastWriter, EditingController, View as EditingView, Element, FocusObserver, History, HtmlDataProcessor, InsertOperation, LivePosition, LiveRange, MarkerOperation, Matcher, MergeOperation, Model, MouseObserver, MoveOperation, NoOperation, Observer, OperationFactory, Position, Range, RenameOperation, Renderer, RootAttributeOperation, RootOperation, SplitOperation, StylesMap, StylesProcessor, TabObserver, Text, TextProxy, TreeWalker, UpcastWriter, AttributeElement as ViewAttributeElement, ContainerElement as ViewContainerElement, Document$1 as ViewDocument, DocumentFragment$1 as ViewDocumentFragment, EditableElement as ViewEditableElement, Element$1 as ViewElement, EmptyElement as ViewEmptyElement, RawElement as ViewRawElement, RootEditableElement as ViewRootEditableElement, Text$1 as ViewText, TreeWalker$1 as ViewTreeWalker, UIElement as ViewUIElement, addBackgroundRules, addBorderRules, addMarginRules, addPaddingRules, disablePlaceholder, enablePlaceholder, getBoxSidesShorthandValue, getBoxSidesValueReducer, getBoxSidesValues, getFillerOffset$4 as getFillerOffset, getPositionShorthandNormalizer, getShorthandValues, hidePlaceholder, isAttachment, isColor, isLength, isLineStyle, isPercentage, isPosition, isRepeat, isURL, needsPlaceholder, showPlaceholder, transformSets };
+class XmlDataProcessor {
+    /**
+     * Converts the provided {@link module:engine/view/documentfragment~DocumentFragment document fragment}
+     * to data format &ndash; in this case an XML string.
+     *
+     * @returns An XML string.
+     */ toData(viewFragment) {
+        // Convert view DocumentFragment to DOM DocumentFragment.
+        const domFragment = this.domConverter.viewToDom(viewFragment);
+        // Convert DOM DocumentFragment to XML output.
+        // There is no need to use dedicated for XML serializing method because BasicHtmlWriter works well in this case.
+        return this.htmlWriter.getHtml(domFragment);
+    }
+    /**
+     * Converts the provided XML string to a view tree.
+     *
+     * @param data An XML string.
+     * @returns A converted view element.
+     */ toView(data) {
+        // Convert input XML data to DOM DocumentFragment.
+        const domFragment = this._toDom(data);
+        // Convert DOM DocumentFragment to view DocumentFragment.
+        return this.domConverter.domToView(domFragment, {
+            keepOriginalCase: true,
+            skipComments: this.skipComments
+        });
+    }
+    /**
+     * Registers a {@link module:engine/view/matcher~MatcherPattern} for view elements whose content should be treated as raw data
+     * and not processed during the conversion from XML to view elements.
+     *
+     * The raw data can be later accessed by a
+     * {@link module:engine/view/element~Element#getCustomProperty custom property of a view element} called `"$rawContent"`.
+     *
+     * @param pattern Pattern matching all view elements whose content should be treated as raw data.
+     */ registerRawContentMatcher(pattern) {
+        this.domConverter.registerRawContentMatcher(pattern);
+    }
+    /**
+     * If the processor is set to use marked fillers, it will insert `&nbsp;` fillers wrapped in `<span>` elements
+     * (`<span data-cke-filler="true">&nbsp;</span>`) instead of regular `&nbsp;` characters.
+     *
+     * This mode allows for a more precise handling of block fillers (so they do not leak into editor content) but
+     * bloats the editor data with additional markup.
+     *
+     * This mode may be required by some features and will be turned on by them automatically.
+     *
+     * @param type Whether to use the default or the marked `&nbsp;` block fillers.
+     */ useFillerType(type) {
+        this.domConverter.blockFillerMode = type == 'marked' ? 'markedNbsp' : 'nbsp';
+    }
+    /**
+     * Converts an XML string to its DOM representation. Returns a document fragment containing nodes parsed from
+     * the provided data.
+     */ _toDom(data) {
+        // Stringify namespaces.
+        const namespaces = this.namespaces.map((nsp)=>`xmlns:${nsp}="nsp"`).join(' ');
+        // Wrap data into root element with optional namespace definitions.
+        data = `<xml ${namespaces}>${data}</xml>`;
+        const parsedDocument = this.domParser.parseFromString(data, 'text/xml');
+        // Parse validation.
+        const parserError = parsedDocument.querySelector('parsererror');
+        if (parserError) {
+            throw new Error('Parse error - ' + parserError.textContent);
+        }
+        const fragment = parsedDocument.createDocumentFragment();
+        const nodes = parsedDocument.documentElement.childNodes;
+        while(nodes.length > 0){
+            fragment.appendChild(nodes[0]);
+        }
+        return fragment;
+    }
+    /**
+     * Creates a new instance of the XML data processor class.
+     *
+     * @param document The view document instance.
+     * @param options Configuration options.
+     * @param options.namespaces A list of namespaces allowed to use in the XML input.
+     */ constructor(document, options = {}){
+        this.skipComments = true;
+        this.namespaces = options.namespaces || [];
+        this.domParser = new DOMParser();
+        this.domConverter = new DomConverter(document, {
+            renderingMode: 'data'
+        });
+        this.htmlWriter = new BasicHtmlWriter();
+    }
+}
+
+const ELEMENT_RANGE_START_TOKEN = '[';
+const ELEMENT_RANGE_END_TOKEN = ']';
+const TEXT_RANGE_START_TOKEN = '{';
+const TEXT_RANGE_END_TOKEN = '}';
+const allowedTypes = {
+    'container': ContainerElement,
+    'attribute': AttributeElement,
+    'empty': EmptyElement,
+    'ui': UIElement,
+    'raw': RawElement
+};
+// Returns simplified implementation of {@link module:engine/view/domconverter~DomConverter#setContentOf DomConverter.setContentOf} method.
+// Used to render UIElement and RawElement.
+const domConverterStub = {
+    setContentOf: (node, html)=>{
+        node.innerHTML = html;
+    }
+};
+/**
+ * Writes the content of the {@link module:engine/view/document~Document document} to an HTML-like string.
+ *
+ * @param options.withoutSelection Whether to write the selection. When set to `true`, the selection will
+ * not be included in the returned string.
+ * @param options.rootName The name of the root from which the data should be stringified. If not provided,
+ * the default `main` name will be used.
+ * @param options.showType When set to `true`, the type of elements will be printed (`<container:p>`
+ * instead of `<p>`, `<attribute:b>` instead of `<b>` and `<empty:img>` instead of `<img>`).
+ * @param options.showPriority When set to `true`, the attribute element's priority will be printed
+ * (`<span view-priority="12">`, `<b view-priority="10">`).
+ * @param options.showAttributeElementId When set to `true`, the attribute element's ID will be printed
+ * (`<span id="marker:foo">`).
+ * @param options.renderUIElements When set to `true`, the inner content of each
+ * {@link module:engine/view/uielement~UIElement} will be printed.
+ * @param options.renderRawElements When set to `true`, the inner content of each
+ * {@link module:engine/view/rawelement~RawElement} will be printed.
+ * @param options.domConverter When set to an actual {@link module:engine/view/domconverter~DomConverter DomConverter}
+ * instance, it lets the conversion go through exactly the same flow the editing view is going through,
+ * i.e. with view data filtering. Otherwise the simple stub is used.
+ * @returns The stringified data.
+ */ function getData$1(view, options = {}) {
+    if (!(view instanceof View)) {
+        throw new TypeError('View needs to be an instance of module:engine/view/view~View.');
+    }
+    const document1 = view.document;
+    const withoutSelection = !!options.withoutSelection;
+    const rootName = options.rootName || 'main';
+    const root = document1.getRoot(rootName);
+    const stringifyOptions = {
+        showType: options.showType,
+        showPriority: options.showPriority,
+        renderUIElements: options.renderUIElements,
+        renderRawElements: options.renderRawElements,
+        ignoreRoot: true,
+        domConverter: options.domConverter
+    };
+    return withoutSelection ? getData$1._stringify(root, null, stringifyOptions) : getData$1._stringify(root, document1.selection, stringifyOptions);
+}
+// Set stringify as getData private method - needed for testing/spying.
+getData$1._stringify = stringify$1;
+/**
+ * Sets the content of a view {@link module:engine/view/document~Document document} provided as an HTML-like string.
+ *
+ * @param data An HTML-like string to write into the document.
+ * @param options.rootName The root name where parsed data will be stored. If not provided,
+ * the default `main` name will be used.
+ */ function setData$1(view, data, options = {}) {
+    if (!(view instanceof View)) {
+        throw new TypeError('View needs to be an instance of module:engine/view/view~View.');
+    }
+    const document1 = view.document;
+    const rootName = options.rootName || 'main';
+    const root = document1.getRoot(rootName);
+    view.change((writer)=>{
+        const result = setData$1._parse(data, {
+            rootElement: root
+        });
+        if (result.view && result.selection) {
+            writer.setSelection(result.selection);
+        }
+    });
+}
+// Set parse as setData private method - needed for testing/spying.
+setData$1._parse = parse$1;
+/**
+ * Converts view elements to HTML-like string representation.
+ *
+ * A root element can be provided as {@link module:engine/view/text~Text text}:
+ *
+ * ```ts
+ * const text = downcastWriter.createText( 'foobar' );
+ * stringify( text ); // 'foobar'
+ * ```
+ *
+ * or as an {@link module:engine/view/element~Element element}:
+ *
+ * ```ts
+ * 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}:
+ *
+ * ```ts
+ * 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 the output data.
+ * If a range position is placed inside the element node, it will be represented with `[` and `]`:
+ *
+ * ```ts
+ * 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 `}`:
+ *
+ * ```ts
+ * 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>'
+ * ```
+ *
+ * ** Note: **
+ * It is possible to unify selection markers to `[` and `]` for both (inside and outside text)
+ * by setting the `sameSelectionCharacters=true` option. It is mainly used when the view stringify option is used by
+ * model utilities.
+ *
+ * Multiple ranges are supported:
+ *
+ * ```ts
+ * 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'
+ * ```
+ *
+ * A {@link module:engine/view/range~Range range} or {@link module:engine/view/position~Position position} instance can be provided
+ * instead of the {@link module:engine/view/documentselection~DocumentSelection selection} instance. If a range instance
+ * 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.
+ *
+ * ```ts
+ * 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'
+ * ```
+ *
+ * An additional `options` object can be provided.
+ * If `options.showType` is set to `true`, element's types will be
+ * presented for {@link module:engine/view/attributeelement~AttributeElement attribute elements},
+ * {@link module:engine/view/containerelement~ContainerElement container elements}
+ * {@link module:engine/view/emptyelement~EmptyElement empty elements}
+ * and {@link module:engine/view/uielement~UIElement UI elements}:
+ *
+ * ```ts
+ * 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>'
+ * getData( ui, null, { showType: true } ); // '<ui:span></ui:span>'
+ * ```
+ *
+ * If `options.showPriority` is set to `true`, a priority will be displayed for all
+ * {@link module:engine/view/attributeelement~AttributeElement attribute elements}.
+ *
+ * ```ts
+ * 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.
+ *
+ * ```ts
+ * const attribute = downcastWriter.createAttributeElement( 'span' );
+ * attribute._id = 'marker:foo';
+ * getData( attribute, null, { showAttributeElementId: true } ); // <span view-id="marker:foo"></span>
+ * ```
+ *
+ * @param node The node to stringify.
+ * @param selectionOrPositionOrRange A selection instance whose ranges will be included in the returned string data.
+ * If a range instance 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.
+ * @param options An object with additional options.
+ * @param options.showType When set to `true`, the type of elements will be printed (`<container:p>`
+ * instead of `<p>`, `<attribute:b>` instead of `<b>` and `<empty:img>` instead of `<img>`).
+ * @param options.showPriority When set to `true`,  the attribute element's priority will be printed
+ * (`<span view-priority="12">`, `<b view-priority="10">`).
+ * @param options.showAttributeElementId When set to `true`, attribute element's id will be printed
+ * (`<span id="marker:foo">`).
+ * @param options.ignoreRoot When set to `true`, the root's element opening and closing will not be printed.
+ * Mainly used by the `getData` function to ignore the {@link module:engine/view/document~Document document's} root element.
+ * @param options.sameSelectionCharacters When set to `true`, the selection inside the text will be marked as
+ *  `{` and `}` and the selection outside the text as `[` and `]`. When set to `false`, both will be marked as `[` and `]` only.
+ * @param options.renderUIElements When set to `true`, the inner content of each
+ * {@link module:engine/view/uielement~UIElement} will be printed.
+ * @param options.renderRawElements When set to `true`, the inner content of each
+ * {@link module:engine/view/rawelement~RawElement} will be printed.
+ * @param options.domConverter When set to an actual {@link module:engine/view/domconverter~DomConverter DomConverter}
+ * instance, it lets the conversion go through exactly the same flow the editing view is going through,
+ * i.e. with view data filtering. Otherwise the simple stub is used.
+ * @returns An HTML-like string representing the view.
+ */ function stringify$1(node, selectionOrPositionOrRange = null, options = {}) {
+    let selection;
+    if (selectionOrPositionOrRange instanceof Position$1 || selectionOrPositionOrRange instanceof Range$1) {
+        selection = new DocumentSelection$1(selectionOrPositionOrRange);
+    } else {
+        selection = selectionOrPositionOrRange;
+    }
+    const viewStringify = new ViewStringify(node, selection, options);
+    return viewStringify.stringify();
+}
+/**
+ * Parses an HTML-like string and returns a view tree.
+ * A simple string will be converted to a {@link module:engine/view/text~Text text} node:
+ *
+ * ```ts
+ * parse( 'foobar' ); // Returns an instance of text.
+ * ```
+ *
+ * {@link module:engine/view/element~Element Elements} will be parsed with attributes as children:
+ *
+ * ```ts
+ * parse( '<b name="baz">foobar</b>' ); // Returns an instance of element with the `baz` attribute and a text child node.
+ * ```
+ *
+ * Multiple nodes provided on root level will be converted to a
+ * {@link module:engine/view/documentfragment~DocumentFragment document fragment}:
+ *
+ * ```ts
+ * parse( '<b>foo</b><i>bar</i>' ); // Returns a document fragment with two child elements.
+ * ```
+ *
+ * The method can parse multiple {@link module:engine/view/range~Range ranges} provided in string data and return a
+ * {@link module:engine/view/documentselection~DocumentSelection selection} instance containing these ranges. Ranges placed inside
+ * {@link module:engine/view/text~Text text} nodes should be marked using `{` and `}` brackets:
+ *
+ * ```ts
+ * const { text, selection } = parse( 'f{ooba}r' );
+ * ```
+ *
+ * Ranges placed outside text nodes should be marked using `[` and `]` brackets:
+ *
+ * ```ts
+ * const { root, selection } = parse( '<p>[<b>foobar</b>]</p>' );
+ * ```
+ *
+ * ** Note: **
+ * It is possible to unify selection markers to `[` and `]` for both (inside and outside text)
+ * by setting `sameSelectionCharacters=true` option. It is mainly used when the view parse option is used by model utilities.
+ *
+ * Sometimes there is a need for defining the order of ranges inside the created selection. This can be achieved by providing
+ * the range order array as an additional parameter:
+ *
+ * ```ts
+ * const { root, selection } = parse( '{fo}ob{ar}{ba}z', { order: [ 2, 3, 1 ] } );
+ * ```
+ *
+ * In the example above, the first range (`{fo}`) will be added to the selection as the second one, the second range (`{ar}`) will be
+ * added as the third and the third range (`{ba}`) will be added as the first one.
+ *
+ * If the selection's last range should be added as a backward one
+ * (so the {@link module:engine/view/documentselection~DocumentSelection#anchor selection anchor} is represented
+ * by the `end` position and {@link module:engine/view/documentselection~DocumentSelection#focus selection focus} is
+ * represented by the `start` position), use the `lastRangeBackward` flag:
+ *
+ * ```ts
+ * const { root, selection } = parse( `{foo}bar{baz}`, { lastRangeBackward: true } );
+ * ```
+ *
+ * Some more examples and edge cases:
+ *
+ * ```ts
+ * // Returns an empty document fragment.
+ * parse( '' );
+ *
+ * // Returns an empty document fragment and a collapsed selection.
+ * const { root, selection } = parse( '[]' );
+ *
+ * // Returns an element and a selection that is placed inside the document fragment containing that element.
+ * const { root, selection } = parse( '[<a></a>]' );
+ * ```
+ *
+ * @param data An HTML-like string to be parsed.
+ * @param options.order An array with the order of parsed ranges added to the returned
+ * {@link module:engine/view/documentselection~DocumentSelection Selection} instance. Each element should represent the
+ * desired position of each range in the selection instance. For example: `[2, 3, 1]` means that the first range will be
+ * placed as the second, the second as the third and the third as the first.
+ * @param options.lastRangeBackward If set to `true`, the last range will be added as backward to the returned
+ * {@link module:engine/view/documentselection~DocumentSelection selection} instance.
+ * @param options.rootElement The default root to use when parsing elements.
+ * When set to `null`, the root element will be created automatically. If set to
+ * {@link module:engine/view/element~Element Element} or {@link module:engine/view/documentfragment~DocumentFragment DocumentFragment},
+ * this node will be used as the root for all parsed nodes.
+ * @param options.sameSelectionCharacters When set to `false`, the selection inside the text should be marked using
+ * `{` and `}` and the selection outside the ext using `[` and `]`. When set to `true`, both should be marked with `[` and `]` only.
+ * @param options.stylesProcessor Styles processor.
+ * @returns Returns the parsed view node or an object with two fields: `view` and `selection` when selection ranges were included in the
+ * data to parse.
+ */ function parse$1(data, options = {}) {
+    const viewDocument = new Document$1(new StylesProcessor());
+    options.order = options.order || [];
+    const rangeParser = new RangeParser({
+        sameSelectionCharacters: options.sameSelectionCharacters
+    });
+    const processor = new XmlDataProcessor(viewDocument, {
+        namespaces: Object.keys(allowedTypes)
+    });
+    // Convert data to view.
+    let view = processor.toView(data);
+    // At this point we have a view tree with Elements that could have names like `attribute:b:1`. In the next step
+    // we need to parse Element's names and convert them to AttributeElements and ContainerElements.
+    view = _convertViewElements(view);
+    // If custom root is provided - move all nodes there.
+    if (options.rootElement) {
+        const root = options.rootElement;
+        const nodes = view._removeChildren(0, view.childCount);
+        root._removeChildren(0, root.childCount);
+        root._appendChild(nodes);
+        view = root;
+    }
+    // Parse ranges included in view text nodes.
+    const ranges = rangeParser.parse(view, options.order);
+    // If only one element is returned inside DocumentFragment - return that element.
+    if (view.is('documentFragment') && view.childCount === 1) {
+        view = view.getChild(0);
+    }
+    // When ranges are present - return object containing view, and selection.
+    if (ranges.length) {
+        const selection = new DocumentSelection$1(ranges, {
+            backward: !!options.lastRangeBackward
+        });
+        return {
+            view,
+            selection
+        };
+    }
+    // If single element is returned without selection - remove it from parent and return detached element.
+    if (view.parent) {
+        view._remove();
+    }
+    return view;
+}
+/**
+ * Private helper class used for converting ranges represented as text inside view {@link module:engine/view/text~Text text nodes}.
+ */ class RangeParser {
+    /**
+     * Parses the view and returns ranges represented inside {@link module:engine/view/text~Text text nodes}.
+     * The method will remove all occurrences of `{`, `}`, `[` and `]` from found text nodes. If a text node is empty after
+     * the process, it will be removed, too.
+     *
+     * @param node The starting node.
+     * @param order The order of ranges. Each element should represent the desired position of the range after
+     * sorting. For example: `[2, 3, 1]` means that the first range will be placed as the second, the second as the third and the third
+     * as the first.
+     * @returns An array with ranges found.
+     */ parse(node, order) {
+        this._positions = [];
+        // Remove all range brackets from view nodes and save their positions.
+        this._getPositions(node);
+        // Create ranges using gathered positions.
+        let ranges = this._createRanges();
+        // Sort ranges if needed.
+        if (order.length) {
+            if (order.length != ranges.length) {
+                throw new Error(`Parse error - there are ${ranges.length} ranges found, but ranges order array contains ${order.length} elements.`);
+            }
+            ranges = this._sortRanges(ranges, order);
+        }
+        return ranges;
+    }
+    /**
+     * Gathers positions of brackets inside the view tree starting from the provided node. The method will remove all occurrences of
+     * `{`, `}`, `[` and `]` from found text nodes. If a text node is empty after the process, it will be removed, too.
+     *
+     * @param node Staring node.
+     */ _getPositions(node) {
+        if (node.is('documentFragment') || node.is('element')) {
+            // Copy elements into the array, when nodes will be removed from parent node this array will still have all the
+            // items needed for iteration.
+            const children = [
+                ...node.getChildren()
+            ];
+            for (const child of children){
+                this._getPositions(child);
+            }
+        }
+        if (node.is('$text')) {
+            const regexp = new RegExp(`[${TEXT_RANGE_START_TOKEN}${TEXT_RANGE_END_TOKEN}\\${ELEMENT_RANGE_END_TOKEN}\\${ELEMENT_RANGE_START_TOKEN}]`, 'g');
+            let text = node.data;
+            let match;
+            let offset = 0;
+            const brackets = [];
+            // Remove brackets from text and store info about offset inside text node.
+            while(match = regexp.exec(text)){
+                const index = match.index;
+                const bracket = match[0];
+                brackets.push({
+                    bracket,
+                    textOffset: index - offset
+                });
+                offset++;
+            }
+            text = text.replace(regexp, '');
+            node._data = text;
+            const index = node.index;
+            const parent = node.parent;
+            // Remove empty text nodes.
+            if (!text) {
+                node._remove();
+            }
+            for (const item of brackets){
+                // Non-empty text node.
+                if (text) {
+                    if (this.sameSelectionCharacters || !this.sameSelectionCharacters && (item.bracket == TEXT_RANGE_START_TOKEN || item.bracket == TEXT_RANGE_END_TOKEN)) {
+                        // Store information about text range delimiter.
+                        this._positions.push({
+                            bracket: item.bracket,
+                            position: new Position$1(node, item.textOffset)
+                        });
+                    } else {
+                        // Check if element range delimiter is not placed inside text node.
+                        if (!this.sameSelectionCharacters && item.textOffset !== 0 && item.textOffset !== text.length) {
+                            throw new Error(`Parse error - range delimiter '${item.bracket}' is placed inside text node.`);
+                        }
+                        // If bracket is placed at the end of the text node - it should be positioned after it.
+                        const offset = item.textOffset === 0 ? index : index + 1;
+                        // Store information about element range delimiter.
+                        this._positions.push({
+                            bracket: item.bracket,
+                            position: new Position$1(parent, offset)
+                        });
+                    }
+                } else {
+                    if (!this.sameSelectionCharacters && item.bracket == TEXT_RANGE_START_TOKEN || item.bracket == TEXT_RANGE_END_TOKEN) {
+                        throw new Error(`Parse error - text range delimiter '${item.bracket}' is placed inside empty text node. `);
+                    }
+                    // Store information about element range delimiter.
+                    this._positions.push({
+                        bracket: item.bracket,
+                        position: new Position$1(parent, index)
+                    });
+                }
+            }
+        }
+    }
+    /**
+     * Sorts ranges in a given order. Range order should be an array and each element should represent the desired position
+     * of the range after sorting.
+     * For example: `[2, 3, 1]` means that the first range will be placed as the second, the second as the third and the third
+     * as the first.
+     *
+     * @param ranges Ranges to sort.
+     * @param rangesOrder An array with new range order.
+     * @returns Sorted ranges array.
+     */ _sortRanges(ranges, rangesOrder) {
+        const sortedRanges = [];
+        let index = 0;
+        for (const newPosition of rangesOrder){
+            if (ranges[newPosition - 1] === undefined) {
+                throw new Error('Parse error - provided ranges order is invalid.');
+            }
+            sortedRanges[newPosition - 1] = ranges[index];
+            index++;
+        }
+        return sortedRanges;
+    }
+    /**
+     * Uses all found bracket positions to create ranges from them.
+     */ _createRanges() {
+        const ranges = [];
+        let range = null;
+        for (const item of this._positions){
+            // When end of range is found without opening.
+            if (!range && (item.bracket == ELEMENT_RANGE_END_TOKEN || item.bracket == TEXT_RANGE_END_TOKEN)) {
+                throw new Error(`Parse error - end of range was found '${item.bracket}' but range was not started before.`);
+            }
+            // When second start of range is found when one is already opened - selection does not allow intersecting
+            // ranges.
+            if (range && (item.bracket == ELEMENT_RANGE_START_TOKEN || item.bracket == TEXT_RANGE_START_TOKEN)) {
+                throw new Error(`Parse error - start of range was found '${item.bracket}' but one range is already started.`);
+            }
+            if (item.bracket == ELEMENT_RANGE_START_TOKEN || item.bracket == TEXT_RANGE_START_TOKEN) {
+                range = new Range$1(item.position, item.position);
+            } else {
+                range.end = item.position;
+                ranges.push(range);
+                range = null;
+            }
+        }
+        // Check if all ranges have proper ending.
+        if (range !== null) {
+            throw new Error('Parse error - range was started but no end delimiter was found.');
+        }
+        return ranges;
+    }
+    /**
+     * Creates a range parser instance.
+     *
+     * @param options The range parser configuration.
+     * @param options.sameSelectionCharacters When set to `true`, the selection inside the text is marked as
+     * `{` and `}` and the selection outside the text as `[` and `]`. When set to `false`, both are marked as `[` and `]`.
+     */ constructor(options){
+        this.sameSelectionCharacters = !!options.sameSelectionCharacters;
+    }
+}
+/**
+ * Private helper class used for converting the view tree to a string.
+ */ class ViewStringify {
+    /**
+     * Converts the view to a string.
+     *
+     * @returns String representation of the view elements.
+     */ stringify() {
+        let result = '';
+        this._walkView(this.root, (chunk)=>{
+            result += chunk;
+        });
+        return result;
+    }
+    /**
+     * Executes a simple walker that iterates over all elements in the view tree starting from the root element.
+     * Calls the `callback` with parsed chunks of string data.
+     */ _walkView(root, callback) {
+        const ignore = this.ignoreRoot && this.root === root;
+        if (root.is('element') || root.is('documentFragment')) {
+            if (root.is('element') && !ignore) {
+                callback(this._stringifyElementOpen(root));
+            }
+            if (this.renderUIElements && root.is('uiElement')) {
+                callback(root.render(document, this.domConverter).innerHTML);
+            } else if (this.renderRawElements && root.is('rawElement')) {
+                // There's no DOM element for "root" to pass to render(). Creating
+                // a surrogate container to render the children instead.
+                const rawContentContainer = document.createElement('div');
+                root.render(rawContentContainer, this.domConverter);
+                callback(rawContentContainer.innerHTML);
+            } else {
+                let offset = 0;
+                callback(this._stringifyElementRanges(root, offset));
+                for (const child of root.getChildren()){
+                    this._walkView(child, callback);
+                    offset++;
+                    callback(this._stringifyElementRanges(root, offset));
+                }
+            }
+            if (root.is('element') && !ignore) {
+                callback(this._stringifyElementClose(root));
+            }
+        }
+        if (root.is('$text')) {
+            callback(this._stringifyTextRanges(root));
+        }
+    }
+    /**
+     * Checks if a given {@link module:engine/view/element~Element element} has a {@link module:engine/view/range~Range#start range start}
+     * or a {@link module:engine/view/range~Range#start range end} placed at a given offset and returns its string representation.
+     */ _stringifyElementRanges(element, offset) {
+        let start = '';
+        let end = '';
+        let collapsed = '';
+        for (const range of this.ranges){
+            if (range.start.parent == element && range.start.offset === offset) {
+                if (range.isCollapsed) {
+                    collapsed += ELEMENT_RANGE_START_TOKEN + ELEMENT_RANGE_END_TOKEN;
+                } else {
+                    start += ELEMENT_RANGE_START_TOKEN;
+                }
+            }
+            if (range.end.parent === element && range.end.offset === offset && !range.isCollapsed) {
+                end += ELEMENT_RANGE_END_TOKEN;
+            }
+        }
+        return end + collapsed + start;
+    }
+    /**
+     * Checks if a given {@link module:engine/view/element~Element Text node} has a
+     * {@link module:engine/view/range~Range#start range start} or a
+     * {@link module:engine/view/range~Range#start range end} placed somewhere inside. Returns a string representation of text
+     * with range delimiters placed inside.
+     */ _stringifyTextRanges(node) {
+        const length = node.data.length;
+        const data = node.data.split('');
+        let rangeStartToken, rangeEndToken;
+        if (this.sameSelectionCharacters) {
+            rangeStartToken = ELEMENT_RANGE_START_TOKEN;
+            rangeEndToken = ELEMENT_RANGE_END_TOKEN;
+        } else {
+            rangeStartToken = TEXT_RANGE_START_TOKEN;
+            rangeEndToken = TEXT_RANGE_END_TOKEN;
+        }
+        // Add one more element for ranges ending after last character in text.
+        data[length] = '';
+        // Represent each letter as object with information about opening/closing ranges at each offset.
+        const result = data.map((letter)=>{
+            return {
+                letter,
+                start: '',
+                end: '',
+                collapsed: ''
+            };
+        });
+        for (const range of this.ranges){
+            const start = range.start;
+            const end = range.end;
+            if (start.parent == node && start.offset >= 0 && start.offset <= length) {
+                if (range.isCollapsed) {
+                    result[end.offset].collapsed += rangeStartToken + rangeEndToken;
+                } else {
+                    result[start.offset].start += rangeStartToken;
+                }
+            }
+            if (end.parent == node && end.offset >= 0 && end.offset <= length && !range.isCollapsed) {
+                result[end.offset].end += rangeEndToken;
+            }
+        }
+        return result.map((item)=>item.end + item.collapsed + item.start + item.letter).join('');
+    }
+    /**
+     * Converts the passed {@link module:engine/view/element~Element element} to an opening tag.
+     *
+     * Depending on the current configuration, the opening tag can be simple (`<a>`), contain a type prefix (`<container:p>`,
+     * `<attribute:a>` or `<empty:img>`), contain priority information ( `<attribute:a view-priority="20">` ),
+     * or contain element id ( `<attribute:span view-id="foo">` ). Element attributes will also be included
+     * (`<a href="https://ckeditor.com" name="foobar">`).
+     */ _stringifyElementOpen(element) {
+        const priority = this._stringifyElementPriority(element);
+        const id = this._stringifyElementId(element);
+        const type = this._stringifyElementType(element);
+        const name = [
+            type,
+            element.name
+        ].filter((i)=>i !== '').join(':');
+        const attributes = this._stringifyElementAttributes(element);
+        const parts = [
+            name,
+            priority,
+            id,
+            attributes
+        ];
+        return `<${parts.filter((i)=>i !== '').join(' ')}>`;
+    }
+    /**
+     * Converts the passed {@link module:engine/view/element~Element element} to a closing tag.
+     * Depending on the current configuration, the closing tag can be simple (`</a>`) or contain a type prefix (`</container:p>`,
+     * `</attribute:a>` or `</empty:img>`).
+     */ _stringifyElementClose(element) {
+        const type = this._stringifyElementType(element);
+        const name = [
+            type,
+            element.name
+        ].filter((i)=>i !== '').join(':');
+        return `</${name}>`;
+    }
+    /**
+     * Converts the passed {@link module:engine/view/element~Element element's} type to its string representation
+     *
+     * Returns:
+     * * 'attribute' for {@link module:engine/view/attributeelement~AttributeElement attribute elements},
+     * * 'container' for {@link module:engine/view/containerelement~ContainerElement container elements},
+     * * 'empty' for {@link module:engine/view/emptyelement~EmptyElement empty elements},
+     * * 'ui' for {@link module:engine/view/uielement~UIElement UI elements},
+     * * 'raw' for {@link module:engine/view/rawelement~RawElement raw elements},
+     * * an empty string when the current configuration is preventing showing elements' types.
+     */ _stringifyElementType(element) {
+        if (this.showType) {
+            for(const type in allowedTypes){
+                if (element instanceof allowedTypes[type]) {
+                    return type;
+                }
+            }
+        }
+        return '';
+    }
+    /**
+     * Converts the passed {@link module:engine/view/element~Element element} to its priority representation.
+     *
+     * The priority string representation will be returned when the passed element is an instance of
+     * {@link module:engine/view/attributeelement~AttributeElement attribute element} and the current configuration allows to show the
+     * priority. Otherwise returns an empty string.
+     */ _stringifyElementPriority(element) {
+        if (this.showPriority && element.is('attributeElement')) {
+            return `view-priority="${element.priority}"`;
+        }
+        return '';
+    }
+    /**
+     * Converts the passed {@link module:engine/view/element~Element element} to its id representation.
+     *
+     * The id string representation will be returned when the passed element is an instance of
+     * {@link module:engine/view/attributeelement~AttributeElement attribute element}, the element has an id
+     * and the current configuration allows to show the id. Otherwise returns an empty string.
+     */ _stringifyElementId(element) {
+        if (this.showAttributeElementId && element.is('attributeElement') && element.id) {
+            return `view-id="${element.id}"`;
+        }
+        return '';
+    }
+    /**
+     * Converts the passed {@link module:engine/view/element~Element element} attributes to their string representation.
+     * If an element has no attributes, an empty string is returned.
+     */ _stringifyElementAttributes(element) {
+        const attributes = [];
+        const keys = [
+            ...element.getAttributeKeys()
+        ].sort();
+        for (const attribute of keys){
+            let attributeValue;
+            if (attribute === 'class') {
+                attributeValue = [
+                    ...element.getClassNames()
+                ].sort().join(' ');
+            } else if (attribute === 'style') {
+                attributeValue = [
+                    ...element.getStyleNames()
+                ].sort().map((style)=>`${style}:${element.getStyle(style).replace(/"/g, '&quot;')}`).join(';');
+            } else {
+                attributeValue = element.getAttribute(attribute);
+            }
+            attributes.push(`${attribute}="${attributeValue}"`);
+        }
+        return attributes.join(' ');
+    }
+    /**
+     * Creates a view stringify instance.
+     *
+     * @param selection A selection whose ranges should also be converted to a string.
+     * @param options An options object.
+     * @param options.showType When set to `true`, the type of elements will be printed (`<container:p>`
+     * instead of `<p>`, `<attribute:b>` instead of `<b>` and `<empty:img>` instead of `<img>`).
+     * @param options.showPriority When set to `true`, the attribute element's priority will be printed.
+     * @param options.ignoreRoot When set to `true`, the root's element opening and closing tag will not
+     * be outputted.
+     * @param options.sameSelectionCharacters When set to `true`, the selection inside the text is marked as
+     * `{` and `}` and the selection outside the text as `[` and `]`. When set to `false`, both are marked as `[` and `]`.
+     * @param options.renderUIElements When set to `true`, the inner content of each
+     * {@link module:engine/view/uielement~UIElement} will be printed.
+     * @param options.renderRawElements When set to `true`, the inner content of each
+     * @param options.domConverter When set to an actual {@link module:engine/view/domconverter~DomConverter DomConverter}
+     * instance, it lets the conversion go through exactly the same flow the editing view is going through,
+     * i.e. with view data filtering. Otherwise the simple stub is used.
+     * {@link module:engine/view/rawelement~RawElement} will be printed.
+     */ constructor(root, selection, options){
+        this.root = root;
+        this.selection = selection;
+        this.ranges = [];
+        if (selection) {
+            this.ranges = [
+                ...selection.getRanges()
+            ];
+        }
+        this.showType = !!options.showType;
+        this.showPriority = !!options.showPriority;
+        this.showAttributeElementId = !!options.showAttributeElementId;
+        this.ignoreRoot = !!options.ignoreRoot;
+        this.sameSelectionCharacters = !!options.sameSelectionCharacters;
+        this.renderUIElements = !!options.renderUIElements;
+        this.renderRawElements = !!options.renderRawElements;
+        this.domConverter = options.domConverter || domConverterStub;
+    }
+}
+/**
+ * Converts {@link module:engine/view/element~Element elements} to
+ * {@link module:engine/view/attributeelement~AttributeElement attribute elements},
+ * {@link module:engine/view/containerelement~ContainerElement container elements},
+ * {@link module:engine/view/emptyelement~EmptyElement empty elements} or
+ * {@link module:engine/view/uielement~UIElement UI elements}.
+ * It converts the whole tree starting from the `rootNode`. The conversion is based on element names.
+ * See the `_convertElement` method for more details.
+ *
+ * @param rootNode The root node to convert.
+ * @returns The root node of converted elements.
+ */ function _convertViewElements(rootNode) {
+    if (rootNode.is('element') || rootNode.is('documentFragment')) {
+        // Convert element or leave document fragment.
+        const convertedElement = rootNode.is('documentFragment') ? new DocumentFragment$1(rootNode.document) : _convertElement(rootNode.document, rootNode);
+        // Convert all child nodes.
+        // Cache the nodes in array. Otherwise, we would skip some nodes because during iteration we move nodes
+        // from `rootNode` to `convertedElement`. This would interfere with iteration.
+        for (const child of [
+            ...rootNode.getChildren()
+        ]){
+            if (convertedElement.is('emptyElement')) {
+                throw new Error('Parse error - cannot parse inside EmptyElement.');
+            } else if (convertedElement.is('uiElement')) {
+                throw new Error('Parse error - cannot parse inside UIElement.');
+            } else if (convertedElement.is('rawElement')) {
+                throw new Error('Parse error - cannot parse inside RawElement.');
+            }
+            convertedElement._appendChild(_convertViewElements(child));
+        }
+        return convertedElement;
+    }
+    return rootNode;
+}
+/**
+ * Converts an {@link module:engine/view/element~Element element} to
+ * {@link module:engine/view/attributeelement~AttributeElement attribute element},
+ * {@link module:engine/view/containerelement~ContainerElement container element},
+ * {@link module:engine/view/emptyelement~EmptyElement empty element} or
+ * {@link module:engine/view/uielement~UIElement UI element}.
+ * If the element's name is in the format of `attribute:b`, it will be converted to
+ * an {@link module:engine/view/attributeelement~AttributeElement attribute element} with a priority of 11.
+ * Additionally, attribute elements may have specified priority (for example `view-priority="11"`) and/or
+ * id (for example `view-id="foo"`).
+ * If the element's name is in the format of `container:p`, it will be converted to
+ * a {@link module:engine/view/containerelement~ContainerElement container element}.
+ * If the element's name is in the format of `empty:img`, it will be converted to
+ * an {@link module:engine/view/emptyelement~EmptyElement empty element}.
+ * If the element's name is in the format of `ui:span`, it will be converted to
+ * a {@link module:engine/view/uielement~UIElement UI element}.
+ * If the element's name does not contain any additional information, a {@link module:engine/view/element~Element view Element} will be
+ * returned.
+ *
+ * @param viewElement A view element to convert.
+ * @returns A tree view element converted according to its name.
+ */ function _convertElement(viewDocument, viewElement) {
+    const info = _convertElementNameAndInfo(viewElement);
+    const ElementConstructor = allowedTypes[info.type];
+    const newElement = ElementConstructor ? new ElementConstructor(viewDocument, info.name) : new Element$1(viewDocument, info.name);
+    if (newElement.is('attributeElement')) {
+        if (info.priority !== null) {
+            newElement._priority = info.priority;
+        }
+        if (info.id !== null) {
+            newElement._id = info.id;
+        }
+    }
+    // Move attributes.
+    for (const attributeKey of viewElement.getAttributeKeys()){
+        newElement._setAttribute(attributeKey, viewElement.getAttribute(attributeKey));
+    }
+    return newElement;
+}
+/**
+ * Converts the `view-priority` attribute and the {@link module:engine/view/element~Element#name element's name} information needed for
+ * creating {@link module:engine/view/attributeelement~AttributeElement attribute element},
+ * {@link module:engine/view/containerelement~ContainerElement container element},
+ * {@link module:engine/view/emptyelement~EmptyElement empty element} or
+ * {@link module:engine/view/uielement~UIElement UI element}.
+ * The name can be provided in two formats: as a simple element's name (`div`), or as a type and name (`container:div`,
+ * `attribute:span`, `empty:img`, `ui:span`);
+ *
+ * @param viewElement The element whose name should be converted.
+ * @returns An object with parsed information:
+ * * `name` The parsed name of the element.
+ * * `type` The parsed type of the element. It can be `attribute`, `container` or `empty`.
+ * * `priority` The parsed priority of the element.
+ */ function _convertElementNameAndInfo(viewElement) {
+    const parts = viewElement.name.split(':');
+    const priority = _convertPriority(viewElement.getAttribute('view-priority'));
+    const id = viewElement.hasAttribute('view-id') ? viewElement.getAttribute('view-id') : null;
+    viewElement._removeAttribute('view-priority');
+    viewElement._removeAttribute('view-id');
+    if (parts.length == 1) {
+        return {
+            name: parts[0],
+            type: priority !== null ? 'attribute' : null,
+            priority,
+            id
+        };
+    }
+    // Check if type and name: container:div.
+    const type = _convertType(parts[0]);
+    if (type) {
+        return {
+            name: parts[1],
+            type,
+            priority,
+            id
+        };
+    }
+    throw new Error(`Parse error - cannot parse element's name: ${viewElement.name}.`);
+}
+/**
+ * Checks if the element's type is allowed. Returns `attribute`, `container`, `empty` or `null`.
+ */ function _convertType(type) {
+    return type in allowedTypes ? type : null;
+}
+/**
+ * Checks if a given priority is allowed. Returns null if the priority cannot be converted.
+ */ function _convertPriority(priorityString) {
+    const priority = parseInt(priorityString, 10);
+    if (!isNaN(priority)) {
+        return priority;
+    }
+    return null;
+}
+
+/**
+ * Writes the content of a model {@link module:engine/model/document~Document document} to an HTML-like string.
+ *
+ * ```ts
+ * getData( editor.model ); // -> '<paragraph>Foo![]</paragraph>'
+ * ```
+ *
+ * **Note:** A {@link module:engine/model/text~Text text} node that contains attributes will be represented as:
+ *
+ * ```xml
+ * <$text attribute="value">Text data</$text>
+ * ```
+ *
+ * **Note:** Using this tool in production-grade code is not recommended. It was designed for development, prototyping,
+ * debugging and testing.
+ *
+ * @param options.withoutSelection Whether to write the selection. When set to `true`, the selection will
+ * not be included in the returned string.
+ * @param options.rootName The name of the root from which the data should be stringified. If not provided,
+ * the default `main` name will be used.
+ * @param options.convertMarkers Whether to include markers in the returned string.
+ * @returns The stringified data.
+ */ function getData(model, options = {}) {
+    if (!(model instanceof Model)) {
+        throw new TypeError('Model needs to be an instance of module:engine/model/model~Model.');
+    }
+    const rootName = options.rootName || 'main';
+    const root = model.document.getRoot(rootName);
+    return getData._stringify(root, options.withoutSelection ? null : model.document.selection, options.convertMarkers ? model.markers : null);
+}
+// Set stringify as getData private method - needed for testing/spying.
+getData._stringify = stringify;
+/**
+ * Sets the content of a model {@link module:engine/model/document~Document document} provided as an HTML-like string.
+ *
+ * ```ts
+ * setData( editor.model, '<paragraph>Foo![]</paragraph>' );
+ * ```
+ *
+ * **Note:** Remember to register elements in the {@link module:engine/model/model~Model#schema model's schema} before
+ * trying to use them.
+ *
+ * **Note:** To create a {@link module:engine/model/text~Text text} node that contains attributes use:
+ *
+ * ```xml
+ * <$text attribute="value">Text data</$text>
+ * ```
+ *
+ * **Note:** Using this tool in production-grade code is not recommended. It was designed for development, prototyping,
+ * debugging and testing.
+ *
+ * @param data HTML-like string to write into the document.
+ * @param options.rootName Root name where parsed data will be stored. If not provided, the default `main`
+ * name will be used.
+ * @param options.selectionAttributes A list of attributes which will be passed to the selection.
+ * @param options.lastRangeBackward If set to `true`, the last range will be added as backward.
+ * @param options.batchType Batch type used for inserting elements. See {@link module:engine/model/batch~Batch#constructor}.
+ * See {@link module:engine/model/batch~Batch#type}.
+ */ function setData(model, data, options = {}) {
+    if (!(model instanceof Model)) {
+        throw new TypeError('Model needs to be an instance of module:engine/model/model~Model.');
+    }
+    let modelDocumentFragment;
+    let selection = null;
+    const modelRoot = model.document.getRoot(options.rootName || 'main');
+    // Parse data string to model.
+    const parsedResult = setData._parse(data, model.schema, {
+        lastRangeBackward: options.lastRangeBackward,
+        selectionAttributes: options.selectionAttributes,
+        context: [
+            modelRoot.name
+        ]
+    });
+    // Retrieve DocumentFragment and Selection from parsed model.
+    if ('model' in parsedResult) {
+        modelDocumentFragment = parsedResult.model;
+        selection = parsedResult.selection;
+    } else {
+        modelDocumentFragment = parsedResult;
+    }
+    if (options.batchType !== undefined) {
+        model.enqueueChange(options.batchType, writeToModel);
+    } else {
+        model.change(writeToModel);
+    }
+    function writeToModel(writer) {
+        // Replace existing model in document by new one.
+        writer.remove(writer.createRangeIn(modelRoot));
+        writer.insert(modelDocumentFragment, modelRoot);
+        // Clean up previous document selection.
+        writer.setSelection(null);
+        writer.removeSelectionAttribute(model.document.selection.getAttributeKeys());
+        // Update document selection if specified.
+        if (selection) {
+            const ranges = [];
+            for (const range of selection.getRanges()){
+                const start = new Position(modelRoot, range.start.path);
+                const end = new Position(modelRoot, range.end.path);
+                ranges.push(new Range(start, end));
+            }
+            writer.setSelection(ranges, {
+                backward: selection.isBackward
+            });
+            if (options.selectionAttributes) {
+                writer.setSelectionAttribute(selection.getAttributes());
+            }
+        }
+    }
+}
+// Set parse as setData private method - needed for testing/spying.
+setData._parse = parse;
+/**
+ * Converts model nodes to HTML-like string representation.
+ *
+ * **Note:** A {@link module:engine/model/text~Text text} node that contains attributes will be represented as:
+ *
+ * ```xml
+ * <$text attribute="value">Text data</$text>
+ * ```
+ *
+ * @param node A node to stringify.
+ * @param selectionOrPositionOrRange A selection instance whose ranges will be included in the returned string data.
+ * If a range instance 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.
+ * @param markers Markers to include.
+ * @returns An HTML-like string representing the model.
+ */ function stringify(node, selectionOrPositionOrRange = null, markers = null) {
+    const model = new Model();
+    const mapper = new Mapper();
+    let selection = null;
+    let range;
+    // Create a range witch wraps passed node.
+    if (node instanceof RootElement || node instanceof DocumentFragment) {
+        range = model.createRangeIn(node);
+    } else {
+        // Node is detached - create new document fragment.
+        if (!node.parent) {
+            const fragment = new DocumentFragment(node);
+            range = model.createRangeIn(fragment);
+        } else {
+            range = new Range(model.createPositionBefore(node), model.createPositionAfter(node));
+        }
+    }
+    // Get selection from passed selection or position or range if at least one is specified.
+    if (selectionOrPositionOrRange instanceof Selection) {
+        selection = selectionOrPositionOrRange;
+    } else if (selectionOrPositionOrRange instanceof DocumentSelection) {
+        selection = selectionOrPositionOrRange;
+    } else if (selectionOrPositionOrRange instanceof Range) {
+        selection = new Selection(selectionOrPositionOrRange);
+    } else if (selectionOrPositionOrRange instanceof Position) {
+        selection = new Selection(selectionOrPositionOrRange);
+    }
+    // Set up conversion.
+    // Create a temporary view controller.
+    const stylesProcessor = new StylesProcessor();
+    const view = new View(stylesProcessor);
+    const viewDocument = view.document;
+    const viewRoot = new RootEditableElement(viewDocument, 'div');
+    // Create a temporary root element in view document.
+    viewRoot.rootName = 'main';
+    viewDocument.roots.add(viewRoot);
+    // Create and setup downcast dispatcher.
+    const downcastDispatcher = new DowncastDispatcher({
+        mapper,
+        schema: model.schema
+    });
+    // Bind root elements.
+    mapper.bindElements(node.root, viewRoot);
+    downcastDispatcher.on('insert:$text', insertText());
+    downcastDispatcher.on('insert', insertAttributesAndChildren(), {
+        priority: 'lowest'
+    });
+    downcastDispatcher.on('attribute', (evt, data, conversionApi)=>{
+        if (data.item instanceof Selection || data.item instanceof DocumentSelection || data.item.is('$textProxy')) {
+            const converter = wrap((modelAttributeValue, { writer })=>{
+                return writer.createAttributeElement('model-text-with-attributes', {
+                    [data.attributeKey]: stringifyAttributeValue(modelAttributeValue)
+                });
+            });
+            converter(evt, data, conversionApi);
+        }
+    });
+    downcastDispatcher.on('insert', insertElement((modelItem)=>{
+        // Stringify object types values for properly display as an output string.
+        const attributes = convertAttributes(modelItem.getAttributes(), stringifyAttributeValue);
+        return new ContainerElement(viewDocument, modelItem.name, attributes);
+    }));
+    downcastDispatcher.on('selection', convertRangeSelection());
+    downcastDispatcher.on('selection', convertCollapsedSelection());
+    downcastDispatcher.on('addMarker', insertUIElement((data, { writer })=>{
+        const name = data.markerName + ':' + (data.isOpening ? 'start' : 'end');
+        return writer.createUIElement(name);
+    }));
+    const markersMap = new Map();
+    if (markers) {
+        // To provide stable results, sort markers by name.
+        for (const marker of Array.from(markers).sort((a, b)=>a.name < b.name ? 1 : -1)){
+            markersMap.set(marker.name, marker.getRange());
+        }
+    }
+    // Convert model to view.
+    const writer = view._writer;
+    downcastDispatcher.convert(range, markersMap, writer);
+    // Convert model selection to view selection.
+    if (selection) {
+        downcastDispatcher.convertSelection(selection, markers || model.markers, writer);
+    }
+    // Parse view to data string.
+    let data = stringify$1(viewRoot, viewDocument.selection, {
+        sameSelectionCharacters: true
+    });
+    // Removing unnecessary <div> and </div> added because `viewRoot` was also stringified alongside input data.
+    data = data.substr(5, data.length - 11);
+    view.destroy();
+    // Replace valid XML `model-text-with-attributes` element name to `$text`.
+    return data.replace(new RegExp('model-text-with-attributes', 'g'), '$text');
+}
+/**
+ * Parses an HTML-like string and returns the model {@link module:engine/model/rootelement~RootElement rootElement}.
+ *
+ * **Note:** To create a {@link module:engine/model/text~Text text} node that contains attributes use:
+ *
+ * ```xml
+ * <$text attribute="value">Text data</$text>
+ * ```
+ *
+ * @param data HTML-like string to be parsed.
+ * @param schema A schema instance used by converters for element validation.
+ * @param options Additional configuration.
+ * @param options.selectionAttributes A list of attributes which will be passed to the selection.
+ * @param options.lastRangeBackward If set to `true`, the last range will be added as backward.
+ * @param options.context The conversion context. If not provided, the default `'$root'` will be used.
+ * @returns Returns the parsed model node or an object with two fields: `model` and `selection`,
+ * when selection ranges were included in the data to parse.
+ */ function parse(data, schema, options = {}) {
+    const mapper = new Mapper();
+    // Replace not accepted by XML `$text` tag name by valid one `model-text-with-attributes`.
+    data = data.replace(new RegExp('\\$text', 'g'), 'model-text-with-attributes');
+    // Parse data to view using view utils.
+    const parsedResult = parse$1(data, {
+        sameSelectionCharacters: true,
+        lastRangeBackward: !!options.lastRangeBackward
+    });
+    // Retrieve DocumentFragment and Selection from parsed view.
+    let viewDocumentFragment;
+    let viewSelection = null;
+    let selection = null;
+    if ('view' in parsedResult && 'selection' in parsedResult) {
+        viewDocumentFragment = parsedResult.view;
+        viewSelection = parsedResult.selection;
+    } else {
+        viewDocumentFragment = parsedResult;
+    }
+    // Set up upcast dispatcher.
+    const modelController = new Model();
+    const upcastDispatcher = new UpcastDispatcher({
+        schema
+    });
+    upcastDispatcher.on('documentFragment', convertToModelFragment(mapper));
+    upcastDispatcher.on('element:model-text-with-attributes', convertToModelText());
+    upcastDispatcher.on('element', convertToModelElement(mapper));
+    upcastDispatcher.on('text', convertToModelText());
+    // Convert view to model.
+    let model = modelController.change((writer)=>upcastDispatcher.convert(viewDocumentFragment.root, writer, options.context || '$root'));
+    mapper.bindElements(model, viewDocumentFragment.root);
+    // If root DocumentFragment contains only one element - return that element.
+    if (model.childCount == 1) {
+        model = model.getChild(0);
+    }
+    // Convert view selection to model selection.
+    if (viewSelection) {
+        const ranges = [];
+        // Convert ranges.
+        for (const viewRange of viewSelection.getRanges()){
+            ranges.push(mapper.toModelRange(viewRange));
+        }
+        // Create new selection.
+        selection = new Selection(ranges, {
+            backward: viewSelection.isBackward
+        });
+        // Set attributes to selection if specified.
+        for (const [key, value] of toMap(options.selectionAttributes || [])){
+            selection.setAttribute(key, value);
+        }
+    }
+    // Return model end selection when selection was specified.
+    if (selection) {
+        return {
+            model,
+            selection
+        };
+    }
+    // Otherwise return model only.
+    return model;
+}
+// -- Converters view -> model -----------------------------------------------------
+function convertToModelFragment(mapper) {
+    return (evt, data, conversionApi)=>{
+        const childrenResult = conversionApi.convertChildren(data.viewItem, data.modelCursor);
+        mapper.bindElements(data.modelCursor.parent, data.viewItem);
+        data = Object.assign(data, childrenResult);
+        evt.stop();
+    };
+}
+function convertToModelElement(mapper) {
+    return (evt, data, conversionApi)=>{
+        const elementName = data.viewItem.name;
+        if (!conversionApi.schema.checkChild(data.modelCursor, elementName)) {
+            throw new Error(`Element '${elementName}' was not allowed in given position.`);
+        }
+        // View attribute value is a string so we want to typecast it to the original type.
+        // E.g. `bold="true"` - value will be parsed from string `"true"` to boolean `true`.
+        const attributes = convertAttributes(data.viewItem.getAttributes(), parseAttributeValue);
+        const element = conversionApi.writer.createElement(data.viewItem.name, attributes);
+        conversionApi.writer.insert(element, data.modelCursor);
+        mapper.bindElements(element, data.viewItem);
+        conversionApi.convertChildren(data.viewItem, element);
+        data.modelRange = Range._createOn(element);
+        data.modelCursor = data.modelRange.end;
+        evt.stop();
+    };
+}
+function convertToModelText() {
+    return (evt, data, conversionApi)=>{
+        if (!conversionApi.schema.checkChild(data.modelCursor, '$text')) {
+            throw new Error('Text was not allowed in given position.');
+        }
+        let node;
+        if (data.viewItem.is('element')) {
+            // View attribute value is a string so we want to typecast it to the original type.
+            // E.g. `bold="true"` - value will be parsed from string `"true"` to boolean `true`.
+            const attributes = convertAttributes(data.viewItem.getAttributes(), parseAttributeValue);
+            const viewText = data.viewItem.getChild(0);
+            node = conversionApi.writer.createText(viewText.data, attributes);
+        } else {
+            node = conversionApi.writer.createText(data.viewItem.data);
+        }
+        conversionApi.writer.insert(node, data.modelCursor);
+        data.modelRange = Range._createFromPositionAndShift(data.modelCursor, node.offsetSize);
+        data.modelCursor = data.modelRange.end;
+        evt.stop();
+    };
+}
+// Tries to get original type of attribute value using JSON parsing:
+//
+//		`'true'` => `true`
+//		`'1'` => `1`
+//		`'{"x":1,"y":2}'` => `{ x: 1, y: 2 }`
+//
+// Parse error means that value should be a string:
+//
+//		`'foobar'` => `'foobar'`
+function parseAttributeValue(attribute) {
+    try {
+        return JSON.parse(attribute);
+    } catch (e) {
+        return attribute;
+    }
+}
+// When value is an Object stringify it.
+function stringifyAttributeValue(data) {
+    if (isPlainObject(data)) {
+        return JSON.stringify(data);
+    }
+    return data;
+}
+// Loop trough attributes map and converts each value by passed converter.
+function* convertAttributes(attributes, converter) {
+    for (const [key, value] of attributes){
+        yield [
+            key,
+            converter(value)
+        ];
+    }
+}
+
+export { AttributeElement, AttributeOperation, BubblingEventInfo, ClickObserver, Conversion, DataController, DataTransfer, DocumentFragment, DocumentSelection, DomConverter, DomEventData, DomEventObserver, DowncastWriter, EditingController, View as EditingView, Element, FocusObserver, History, HtmlDataProcessor, InsertOperation, LivePosition, LiveRange, MarkerOperation, Matcher, MergeOperation, Model, MouseObserver, MoveOperation, NoOperation, Observer, OperationFactory, Position, Range, RenameOperation, Renderer, RootAttributeOperation, RootOperation, SplitOperation, StylesMap, StylesProcessor, TabObserver, Text, TextProxy, TreeWalker, UpcastWriter, AttributeElement as ViewAttributeElement, ContainerElement as ViewContainerElement, Document$1 as ViewDocument, DocumentFragment$1 as ViewDocumentFragment, EditableElement as ViewEditableElement, Element$1 as ViewElement, EmptyElement as ViewEmptyElement, RawElement as ViewRawElement, RootEditableElement as ViewRootEditableElement, Text$1 as ViewText, TreeWalker$1 as ViewTreeWalker, UIElement as ViewUIElement, getData as _getModelData, getData$1 as _getViewData, parse as _parseModel, parse$1 as _parseView, setData as _setModelData, setData$1 as _setViewData, stringify as _stringifyModel, stringify$1 as _stringifyView, addBackgroundRules, addBorderRules, addMarginRules, addPaddingRules, disablePlaceholder, enablePlaceholder, getBoxSidesShorthandValue, getBoxSidesValueReducer, getBoxSidesValues, getFillerOffset$4 as getFillerOffset, getPositionShorthandNormalizer, getShorthandValues, hidePlaceholder, isAttachment, isColor, isLength, isLineStyle, isPercentage, isPosition, isRepeat, isURL, needsPlaceholder, showPlaceholder, transformSets };
 //# sourceMappingURL=index.js.map