Trilium Frontend API
    Preparing search index...

    Class ViewDowncastWriter

    View downcast writer.

    It provides a set of methods used to manipulate view nodes.

    Do not create an instance of this writer manually. To modify a view structure, use the module:engine/view/view~EditingView#change View#change() block.

    The ViewDowncastWriter is designed to work with semantic views which are the views that were/are being downcasted from the model. To work with ordinary views (e.g. parsed from a pasted content) use the module:engine/view/upcastwriter~ViewUpcastWriter upcast writer.

    Read more about changing the view in the {@glink framework/architecture/editing-engine#changing-the-view Changing the view} section of the {@glink framework/architecture/editing-engine Editing engine architecture} guide.

    Index

    Constructors

    Properties

    document: ViewDocument

    The view document instance in which this writer operates.

    Methods

    • Internal

      Clears the registered slot factory.

      Returns void

    • Adds specified class to the element.

      writer.addClass( 'foo', linkElement );
      writer.addClass( [ 'foo', 'bar' ], linkElement );

      Parameters

      Returns void

    • Breaks attribute elements at the provided position or at the boundaries of a provided range. It breaks attribute elements up to their first ancestor that is a container element.

      In following examples <p> is a container, <b> and <u> are attribute elements:

      <p>foo<b><u>bar{}</u></b></p> -> <p>foo<b><u>bar</u></b>[]</p>
      <p>foo<b><u>{}bar</u></b></p> -> <p>foo{}<b><u>bar</u></b></p>
      <p>foo<b><u>b{}ar</u></b></p> -> <p>foo<b><u>b</u></b>[]<b><u>ar</u></b></p>
      <p><b>fo{o</b><u>ba}r</u></p> -> <p><b>fo</b><b>o</b><u>ba</u><u>r</u></b></p>

      Note: module:engine/view/documentfragment~ViewDocumentFragment DocumentFragment is treated like a container.

      Note: The difference between module:engine/view/downcastwriter~ViewDowncastWriter#breakAttributes breakAttributes() and module:engine/view/downcastwriter~ViewDowncastWriter#breakContainer breakContainer() is that breakAttributes() breaks all module:engine/view/attributeelement~ViewAttributeElement attribute elements that are ancestors of a given position, up to the first encountered module:engine/view/containerelement~ViewContainerElement container element. breakContainer() assumes that a given position is directly in the container element and breaks that container element.

      Throws the view-writer-invalid-range-container module:utils/ckeditorerror~CKEditorError CKEditorError when the module:engine/view/range~ViewRange#start start and module:engine/view/range~ViewRange#end end positions of a passed range are not placed inside same parent container.

      Throws the view-writer-cannot-break-empty-element module:utils/ckeditorerror~CKEditorError CKEditorError when trying to break attributes inside an module:engine/view/emptyelement~ViewEmptyElement ViewEmptyElement.

      Throws the view-writer-cannot-break-ui-element module:utils/ckeditorerror~CKEditorError CKEditorError when trying to break attributes inside a module:engine/view/uielement~ViewUIElement UIElement.

      Parameters

      Returns ViewRange | ViewPosition

      The new position or range, after breaking the attribute elements.

      • module:engine/view/attributeelement~ViewAttributeElement
      • module:engine/view/containerelement~ViewContainerElement
      • module:engine/view/downcastwriter~ViewDowncastWriter#breakContainer
    • Breaks a module:engine/view/containerelement~ViewContainerElement container view element into two, at the given position. The position has to be directly inside the container element and cannot be in the root. It does not break the conrainer view element if the position is at the beginning or at the end of its parent element.

      <p>foo^bar</p> -> <p>foo</p><p>bar</p>
      <div><p>foo</p>^<p>bar</p></div> -> <div><p>foo</p></div><div><p>bar</p></div>
      <p>^foobar</p> -> ^<p>foobar</p>
      <p>foobar^</p> -> <p>foobar</p>^

      Note: The difference between module:engine/view/downcastwriter~ViewDowncastWriter#breakAttributes breakAttributes() and module:engine/view/downcastwriter~ViewDowncastWriter#breakContainer breakContainer() is that breakAttributes() breaks all module:engine/view/attributeelement~ViewAttributeElement attribute elements that are ancestors of a given position, up to the first encountered module:engine/view/containerelement~ViewContainerElement container element. breakContainer() assumes that the given position is directly in the container element and breaks that container element.

      Parameters

      • position: ViewPosition

        The position where to break the element.

      Returns ViewPosition

      The position between broken elements. If an element has not been broken, the returned position is placed either before or after it.

      • module:engine/view/attributeelement~ViewAttributeElement
      • module:engine/view/containerelement~ViewContainerElement
      • module:engine/view/downcastwriter~ViewDowncastWriter#breakAttributes
    • Removes matching elements from given range.

      Throws module:utils/ckeditorerror~CKEditorError CKEditorError view-writer-invalid-range-container when module:engine/view/range~ViewRange#start start and module:engine/view/range~ViewRange#end end positions are not placed inside same parent container.

      Parameters

      Returns void

    • Cleans up memory by removing obsolete cloned elements group from the writer.

      Should be used whenever all module:engine/view/attributeelement~ViewAttributeElement attribute elements with the same module:engine/view/attributeelement~ViewAttributeElement#id id are going to be removed from the view and the group will no longer be needed.

      Cloned elements group are not removed automatically in case if the group is still needed after all its elements were removed from the view.

      Keep in mind that group names are equal to the id property of the attribute element.

      Parameters

      • groupName: string

        Name of the group to clear.

      Returns void

    • Creates a new module:engine/view/attributeelement~ViewAttributeElement.

      writer.createAttributeElement( 'strong' );
      writer.createAttributeElement( 'a', { href: 'foo.bar' } );

      // Make `<a>` element contain other attributes element so the `<a>` 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: 'my-marker' }, { id: 'marker:my' } );

      Parameters

      • name: string

        Name of the element.

      • Optionalattributes: ViewElementAttributes

        Element's attributes.

      • Optionaloptions: { id?: string | number; priority?: number; renderUnsafeAttributes?: string[] }

        Element's options.

        • Optionalid?: string | number

          Element's module:engine/view/attributeelement~ViewAttributeElement#id id.

        • Optionalpriority?: number

          Element's module:engine/view/attributeelement~ViewAttributeElement#priority priority.

        • OptionalrenderUnsafeAttributes?: string[]

          A list of attribute names that should be rendered in the editing pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.

      Returns ViewAttributeElement

      Created element.

    • Creates a new module:engine/view/containerelement~ViewContainerElement.

      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' } );

      // Create element with specific options.
      writer.createContainerElement( 'span', { class: 'placeholder' }, { renderUnsafeAttributes: [ 'foo' ] } );

      Parameters

      • name: string

        Name of the element.

      • Optionalattributes: ViewElementAttributes

        Elements attributes.

      • Optionaloptions: { renderUnsafeAttributes?: string[] }

        Element's options.

        • OptionalrenderUnsafeAttributes?: string[]

          A list of attribute names that should be rendered in the editing pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.

      Returns ViewContainerElement

      Created element.

      WITHOUT_CHILDREN

    • Creates a new module:engine/view/containerelement~ViewContainerElement with children.

      // Create element with children.
      writer.createContainerElement( 'figure', { class: 'image' }, [
      writer.createEmptyElement( 'img' ),
      writer.createContainerElement( 'figcaption' )
      ] );

      // Create element with specific options.
      writer.createContainerElement( 'figure', { class: 'image' }, [
      writer.createEmptyElement( 'img' ),
      writer.createContainerElement( 'figcaption' )
      ], { renderUnsafeAttributes: [ 'foo' ] } );

      Parameters

      • name: string

        Name of the element.

      • attributes: ViewElementAttributes

        Elements attributes.

      • children: ViewNode | Iterable<ViewNode, any, any>

        A node or a list of nodes to be inserted into the created element. If no children were specified, element's options can be passed in this argument.

      • Optionaloptions: { renderUnsafeAttributes?: string[] }

        Element's options.

        • OptionalrenderUnsafeAttributes?: string[]

          A list of attribute names that should be rendered in the editing pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.

      Returns ViewContainerElement

      Created element.

      WITH_CHILDREN

    • Creates a new module:engine/view/documentfragment~ViewDocumentFragment instance.

      Parameters

      • Optionalchildren: ViewNode | Iterable<ViewNode, any, any>

        A list of nodes to be inserted into the created document fragment.

      Returns ViewDocumentFragment

      The created document fragment.

    • Creates a new module:engine/view/editableelement~ViewEditableElement.

      writer.createEditableElement( 'div' );
      writer.createEditableElement( 'div', { id: 'foo-1234' } );

      Note: The editable element is to be used in the editing pipeline. Usually, together with module:widget/utils~toWidgetEditable toWidgetEditable().

      Parameters

      • name: string

        Name of the element.

      • Optionalattributes: ViewElementAttributes

        Elements attributes.

      • Optionaloptions: { renderUnsafeAttributes?: string[] }

        Element's options.

        • OptionalrenderUnsafeAttributes?: string[]

          A list of attribute names that should be rendered in the editing pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.

      Returns ViewEditableElement

      Created element.

    • Creates a new module:engine/view/emptyelement~ViewEmptyElement.

      writer.createEmptyElement( 'img' );
      writer.createEmptyElement( 'img', { id: 'foo-1234' } );

      Parameters

      • name: string

        Name of the element.

      • Optionalattributes: ViewElementAttributes

        Elements attributes.

      • Optionaloptions: { renderUnsafeAttributes?: string[] }

        Element's options.

        • OptionalrenderUnsafeAttributes?: string[]

          A list of attribute names that should be rendered in the editing pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.

      Returns ViewEmptyElement

      Created element.

    • Creates a new position after given view item.

      Parameters

      • item: ViewItem

        View item after which the position should be located.

      Returns ViewPosition

    • Creates position at the given location. The location can be specified as:

      • a module:engine/view/position~ViewPosition position,
      • parent element and offset (offset defaults to 0),
      • parent element and 'end' (sets position at the end of that element),
      • module:engine/view/item~ViewItem view item and 'before' or 'after' (sets position before or after given view item).

      This method is a shortcut to other constructors such as:

      • #createPositionBefore,
      • #createPositionAfter,

      Parameters

      Returns ViewPosition

    • Creates a new position before given view item.

      Parameters

      • item: ViewItem

        View item before which the position should be located.

      Returns ViewPosition

    • Creates a range spanning from start position to end position.

      Note: This factory method creates its own module:engine/view/position~ViewPosition instances basing on passed values.

      Parameters

      • start: ViewPosition

        Start position.

      • Optionalend: ViewPosition

        End position. If not set, range will be collapsed at start position.

      Returns ViewRange

    • Creates a range inside an module:engine/view/element~ViewElement element which starts before the first child of that element and ends after the last child of that element.

      Parameters

      Returns ViewRange

    • Creates a range that starts before given module:engine/view/item~ViewItem view item and ends after it.

      Parameters

      Returns ViewRange

    • Creates a new module:engine/view/rawelement~ViewRawElement.

      writer.createRawElement( 'span', { id: 'foo-1234' }, function( domElement ) {
      domElement.innerHTML = '<b>This is the raw content of the raw element.</b>';
      } );

      Raw elements work as data containers ("wrappers", "sandboxes") but their children are not managed or even recognized by the editor. This encapsulation allows integrations to maintain custom DOM structures in the editor content without, for instance, worrying about compatibility with other editor features. Raw elements are a perfect tool for integration with external frameworks and data sources.

      Unlike #createUIElement UI elements, raw elements act like "real" editor content (similar to module:engine/view/containerelement~ViewContainerElement or module:engine/view/emptyelement~ViewEmptyElement), and they are considered by the editor selection.

      You should not use raw elements to render the UI in the editor content. Check out #createUIElement #createUIElement() instead.

      Parameters

      • name: string

        The name of the element.

      • Optionalattributes: ViewElementAttributes

        Element attributes.

      • OptionalrenderFunction: (domElement: HTMLElement, domConverter: ViewDomConverter) => void

        A custom render function.

      • Optionaloptions: { renderUnsafeAttributes?: string[] }

        Element's options.

        • OptionalrenderUnsafeAttributes?: string[]

          A list of attribute names that should be rendered in the editing pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.

      Returns ViewRawElement

      The created element.

    • Creates new module:engine/view/selection~ViewSelection instance.

      // Creates collapsed selection at the position of given item and offset.
      const paragraph = writer.createContainerElement( 'p' );
      const selection = writer.createSelection( paragraph, offset );

      // Creates a range inside an {@link module:engine/view/element~ViewElement element} which starts before the
      // first child of that element and ends after the last child of that element.
      const selection = writer.createSelection( paragraph, 'in' );

      // Creates a range on an {@link module:engine/view/item~ViewItem item} which starts before the item and ends
      // just after the item.
      const selection = writer.createSelection( paragraph, 'on' );

      Selection's constructor allow passing additional options (backward, fake and label) as the last argument.

      // Creates backward selection.
      const selection = writer.createSelection( element, 'in', { backward: true } );

      Fake selection does not render as browser native selection over selected elements and is hidden to the user. This way, no native selection UI artifacts are displayed to the user and selection over elements can be represented in other way, for example by applying proper CSS class.

      Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM (and be properly handled by screen readers).

      // Creates fake selection with label.
      const selection = writer.createSelection( element, 'in', { fake: true, label: 'foo' } );

      See also: #createSelection:SELECTABLE createSelection( selectable, options ).

      Parameters

      Returns ViewSelection

      NODE_OFFSET

    • Creates new module:engine/view/selection~ViewSelection instance.

      // Creates empty selection without ranges.
      const selection = writer.createSelection();

      // Creates selection at the given range.
      const range = writer.createRange( start, end );
      const selection = writer.createSelection( range );

      // Creates selection at the given ranges
      const ranges = [ writer.createRange( start1, end2 ), writer.createRange( star2, end2 ) ];
      const selection = writer.createSelection( ranges );

      // Creates selection from the other selection.
      const otherSelection = writer.createSelection();
      const selection = writer.createSelection( otherSelection );

      // Creates selection from the document selection.
      const selection = writer.createSelection( editor.editing.view.document.selection );

      // Creates selection at the given position.
      const position = writer.createPositionFromPath( root, path );
      const selection = writer.createSelection( position );

      Selection's constructor allow passing additional options (backward, fake and label) as the last argument.

      // Creates backward selection.
      const selection = writer.createSelection( range, { backward: true } );

      Fake selection does not render as browser native selection over selected elements and is hidden to the user. This way, no native selection UI artifacts are displayed to the user and selection over elements can be represented in other way, for example by applying proper CSS class.

      Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM (and be properly handled by screen readers).

      // Creates fake selection with label.
      const selection = writer.createSelection( range, { fake: true, label: 'foo' } );

      See also: #createSelection:NODE_OFFSET createSelection( node, placeOrOffset, options ).

      Parameters

      Returns ViewSelection

      SELECTABLE

    • Creates placeholders for child elements of the module:engine/conversion/downcasthelpers~DowncastHelpers#elementToStructure elementToStructure() conversion helper.

      const viewSlot = conversionApi.writer.createSlot();
      const viewPosition = conversionApi.writer.createPositionAt( viewElement, 0 );

      conversionApi.writer.insert( viewPosition, viewSlot );

      It could be filtered down to a specific subset of children (only <foo> model elements in this case):

      const viewSlot = conversionApi.writer.createSlot( node => node.is( 'element', 'foo' ) );
      const viewPosition = conversionApi.writer.createPositionAt( viewElement, 0 );

      conversionApi.writer.insert( viewPosition, viewSlot );

      While providing a filtered slot, make sure to provide slots for all child nodes. A single node cannot be downcasted into multiple slots.

      Note: You should not change the order of nodes. View elements should be in the same order as model nodes.

      Parameters

      Returns ViewElement

      The slot element to be placed in to the view structure while processing module:engine/conversion/downcasthelpers~DowncastHelpers#elementToStructure elementToStructure().

    • Creates a new module:engine/view/text~ViewText text node.

      writer.createText( 'foo' );
      

      Parameters

      • data: string

        The text's data.

      Returns ViewText

      The created text node.

    • Creates a new module:engine/view/uielement~ViewUIElement.

      writer.createUIElement( 'span' );
      writer.createUIElement( 'span', { id: 'foo-1234' } );

      A custom render function can be provided as the third parameter:

      writer.createUIElement( 'span', null, function( domDocument ) {
      const domElement = this.toDomElement( domDocument );
      domElement.innerHTML = '<b>this is ui element</b>';

      return domElement;
      } );

      Unlike #createRawElement raw elements, UI elements are by no means editor content, for instance, they are ignored by the editor selection system.

      You should not use UI elements as data containers. Check out #createRawElement instead.

      Parameters

      Returns ViewUIElement

      The created element.

    • Inserts a node or nodes at specified position. Takes care about breaking attributes before insertion and merging them afterwards.

      Throws module:utils/ckeditorerror~CKEditorError CKEditorError view-writer-insert-invalid-node when nodes to insert contains instances that are not module:engine/view/text~ViewText Texts, module:engine/view/attributeelement~ViewAttributeElement ViewAttributeElements, module:engine/view/containerelement~ViewContainerElement ViewContainerElements, module:engine/view/emptyelement~ViewEmptyElement ViewEmptyElements, module:engine/view/rawelement~ViewRawElement RawElements or module:engine/view/uielement~ViewUIElement UIElements.

      Parameters

      Returns ViewRange

      Range around inserted nodes.

    • Merges module:engine/view/attributeelement~ViewAttributeElement attribute elements. It also merges text nodes if needed. Only module:engine/view/attributeelement~ViewAttributeElement#isSimilar similar attribute elements can be merged.

      In following examples <p> is a container and <b> is an attribute element:

      <p>foo[]bar</p> -> <p>foo{}bar</p>
      <p><b>foo</b>[]<b>bar</b></p> -> <p><b>foo{}bar</b></p>
      <p><b foo="bar">a</b>[]<b foo="baz">b</b></p> -> <p><b foo="bar">a</b>[]<b foo="baz">b</b></p>

      It will also take care about empty attributes when merging:

      <p><b>[]</b></p> -> <p>[]</p>
      <p><b>foo</b><i>[]</i><b>bar</b></p> -> <p><b>foo{}bar</b></p>

      Note: Difference between module:engine/view/downcastwriter~ViewDowncastWriter#mergeAttributes mergeAttributes and module:engine/view/downcastwriter~ViewDowncastWriter#mergeContainers mergeContainers is that mergeAttributes merges two module:engine/view/attributeelement~ViewAttributeElement attribute elements or module:engine/view/text~ViewText text nodes while mergeContainer merges two module:engine/view/containerelement~ViewContainerElement container elements.

      Parameters

      Returns ViewPosition

      Position after merge.

      • module:engine/view/attributeelement~ViewAttributeElement
      • module:engine/view/containerelement~ViewContainerElement
      • module:engine/view/downcastwriter~ViewDowncastWriter#mergeContainers
    • Merges two module:engine/view/containerelement~ViewContainerElement 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.

      <p>foo</p>^<p>bar</p> -> <p>foo^bar</p>
      <div>foo</div>^<p>bar</p> -> <div>foo^bar</div>

      Note: Difference between module:engine/view/downcastwriter~ViewDowncastWriter#mergeAttributes mergeAttributes and module:engine/view/downcastwriter~ViewDowncastWriter#mergeContainers mergeContainers is that mergeAttributes merges two module:engine/view/attributeelement~ViewAttributeElement attribute elements or module:engine/view/text~ViewText text nodes while mergeContainer merges two module:engine/view/containerelement~ViewContainerElement container elements.

      Parameters

      Returns ViewPosition

      Position after merge.

      • module:engine/view/attributeelement~ViewAttributeElement
      • module:engine/view/containerelement~ViewContainerElement
      • module:engine/view/downcastwriter~ViewDowncastWriter#mergeAttributes
    • Moves nodes from provided range to target position.

      Throws module:utils/ckeditorerror~CKEditorError CKEditorError view-writer-invalid-range-container when module:engine/view/range~ViewRange#start start and module:engine/view/range~ViewRange#end end positions are not placed inside same parent container.

      Parameters

      Returns ViewRange

      Range in target container. Inserted nodes are placed between module:engine/view/range~ViewRange#start start and module:engine/view/range~ViewRange#end end positions.

    • Removes provided range from the container.

      Throws module:utils/ckeditorerror~CKEditorError CKEditorError view-writer-invalid-range-container when module:engine/view/range~ViewRange#start start and module:engine/view/range~ViewRange#end end positions are not placed inside same parent container.

      Parameters

      • rangeOrItem: ViewRange | ViewItem

        Range to remove from container or an module:engine/view/item~ViewItem item to remove. If range is provided, after removing, it will be updated to a collapsed range showing the new position.

      Returns ViewDocumentFragment

      Document fragment containing removed nodes.

    • Removes attribute from the element.

      writer.removeAttribute( 'href', linkElement );
      

      Parameters

      • key: string

        Attribute key.

      • element: ViewElement

        The element to remove an attribute of.

      Returns void

    • Removes specified tokens from an attribute value (for example class names, style properties). If resulting attribute become empty, the whole attribute is removed.

      writer.removeAttribute( 'class', 'foo', linkElement );
      

      Parameters

      • key: string

        Attribute key.

      • tokens: ArrayOrItem<string>

        Tokens to partly remove from attribute value. For example class names or style property names.

      • element: ViewElement

        The element to remove an attribute of.

      Returns void

    • Removes specified class from the element.

      writer.removeClass( 'foo', linkElement );
      writer.removeClass( [ 'foo', 'bar' ], linkElement );

      Parameters

      Returns void

    • Removes a custom property stored under the given key.

      Parameters

      Returns boolean

      Returns true if property was removed.

    • Removes specified style from the element.

      writer.removeStyle( 'color', element ); // Removes 'color' style.
      writer.removeStyle( [ 'color', 'border-top' ], element ); // Removes both 'color' and 'border-top' styles.

      Note: This method can work with normalized style names if module:engine/controller/datacontroller~DataController#addStyleProcessorRules a particular style processor rule is enabled. See module:engine/view/stylesmap~StylesMap#remove StylesMap#remove() for details.

      Parameters

      Returns void

    • Renames element by creating a copy of renamed element but with changed name and then moving contents of the old element to the new one. Keep in mind that this will invalidate all module:engine/view/position~ViewPosition positions which has renamed element as module:engine/view/position~ViewPosition#parent a parent.

      New element has to be created because Element#tagName property in DOM is readonly.

      Since this function creates a new element and removes the given one, the new element is returned to keep reference.

      Parameters

      Returns ViewContainerElement

      Element created due to rename.

    • Adds or overwrites the element's attribute with a specified key and value.

      writer.setAttribute( 'href', 'http://ckeditor.com', linkElement );
      

      Parameters

      • key: string

        The attribute key.

      • value: unknown

        The attribute value.

      • element: ViewElement

        The element to set an attribute on.

      Returns void

    • Adds or overwrites the element's attribute with a specified key and value. Note that for tokenized attributes it allows the reset parameter to specify if the previous attribute value should be overwritten or a new token (class name, style property) should be added.

      writer.setAttribute( 'href', 'http://ckeditor.com', linkElement );
      writer.setAttribute( 'class', 'foo', false, element );

      Parameters

      • key: string

        The attribute key.

      • value: unknown

        The attribute value.

      • overwrite: boolean

        Whether tokenized attribute should overwrite the attribute value or just add a token.

      • element: ViewElement

        The element to set an attribute on.

      Returns void

    • Sets a custom property on element. Unlike attributes, custom properties are not rendered to the DOM, so they can be used to add special data to elements.

      Parameters

      Returns void

    • Sets module:engine/view/documentselection~ViewDocumentSelection selection's ranges and direction to the specified location based on the given module:engine/view/selection~ViewSelectable selectable.

      Usage:

      // Sets collapsed selection at the position of given item and offset.
      const paragraph = writer.createContainerElement( 'p' );
      writer.setSelection( paragraph, offset );

      Creates a range inside an module:engine/view/element~ViewElement element which starts before the first child of that element and ends after the last child of that element.

      writer.setSelection( paragraph, 'in' );
      

      Creates a range on the module:engine/view/item~ViewItem item which starts before the item and ends just after the item.

      writer.setSelection( paragraph, 'on' );
      

      ViewDowncastWriter#setSelection() allow passing additional options (backward, fake and label) as the last argument.

      // Sets selection as backward.
      writer.setSelection( element, 'in', { backward: true } );

      // Sets selection as fake.
      // Fake selection does not render as browser native selection over selected elements and is hidden to the user.
      // This way, no native selection UI artifacts are displayed to the user and selection over elements can be
      // represented in other way, for example by applying proper CSS class.
      writer.setSelection( element, 'in', { fake: true } );

      // Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM
      // (and be properly handled by screen readers).
      writer.setSelection( element, 'in', { fake: true, label: 'foo' } );

      See also: #setSelection:SELECTABLE setSelection( selectable, options ).

      Parameters

      Returns void

      NODE_OFFSET

    • Sets module:engine/view/documentselection~ViewDocumentSelection selection's ranges and direction to the specified location based on the given module:engine/view/selection~ViewSelectable selectable.

      Usage:

      // Sets selection to the given range.
      const range = writer.createRange( start, end );
      writer.setSelection( range );

      // Sets backward selection to the given range.
      const range = writer.createRange( start, end );
      writer.setSelection( range );

      // Sets selection to given ranges.
      const ranges = [ writer.createRange( start1, end2 ), writer.createRange( start2, end2 ) ];
      writer.setSelection( range );

      // Sets selection to the other selection.
      const otherSelection = writer.createSelection();
      writer.setSelection( otherSelection );

      // Sets collapsed selection at the given position.
      const position = writer.createPositionFromPath( root, path );
      writer.setSelection( position );

      // Removes all ranges.
      writer.setSelection( null );

      ViewDowncastWriter#setSelection() allow passing additional options (backward, fake and label) as the last argument.

      // Sets selection as backward.
      writer.setSelection( range, { backward: true } );

      // Sets selection as fake.
      // Fake selection does not render as browser native selection over selected elements and is hidden to the user.
      // This way, no native selection UI artifacts are displayed to the user and selection over elements can be
      // represented in other way, for example by applying proper CSS class.
      writer.setSelection( range, { fake: true } );

      // Additionally fake's selection label can be provided. It will be used to describe fake selection in DOM
      // (and be properly handled by screen readers).
      writer.setSelection( range, { fake: true, label: 'foo' } );

      See also: #setSelection:NODE_OFFSET setSelection( node, placeOrOffset, options ).

      Parameters

      Returns void

      SELECTABLE

    • Moves module:engine/view/documentselection~ViewDocumentSelection#focus selection's focus to the specified location.

      The location can be specified in the same form as module:engine/view/view~EditingView#createPositionAt view.createPositionAt() parameters.

      Parameters

      Returns void

    • Adds style to the element.

      writer.setStyle( 'color', 'red', element );
      

      Note: The passed style can be normalized if module:engine/controller/datacontroller~DataController#addStyleProcessorRules a particular style processor rule is enabled. See module:engine/view/stylesmap~StylesMap#set StylesMap#set() for details.

      Parameters

      • property: string

        Property name.

      • value: string

        Value to set.

      • element: ViewElement

        Element to set styles on.

      Returns void

      KEY_VALUE

    • Adds many styles to the element.

      writer.setStyle( {
      color: 'red',
      position: 'fixed'
      }, element );

      Note: The passed style can be normalized if module:engine/controller/datacontroller~DataController#addStyleProcessorRules a particular style processor rule is enabled. See module:engine/view/stylesmap~StylesMap#set StylesMap#set() for details.

      Parameters

      • property: Record<string, string>

        Object with key - value pairs.

      • element: ViewElement

        Element to set styles on.

      Returns void

      OBJECT

    • Unwraps nodes within provided range from attribute element.

      Throws module:utils/ckeditorerror~CKEditorError CKEditorError view-writer-invalid-range-container when module:engine/view/range~ViewRange#start start and module:engine/view/range~ViewRange#end end positions are not placed inside same parent container.

      Parameters

      Returns ViewRange

    • Wraps elements within range with provided module:engine/view/attributeelement~ViewAttributeElement ViewAttributeElement. If a collapsed range is provided, it will be wrapped only if it is equal to view selection.

      If a collapsed range was passed and is same as selection, the selection will be moved to the inside of the wrapped attribute element.

      Throws module:utils/ckeditorerror~CKEditorError view-writer-invalid-range-container when module:engine/view/range~ViewRange#start and module:engine/view/range~ViewRange#end positions are not placed inside same parent container.

      Throws module:utils/ckeditorerror~CKEditorError view-writer-wrap-invalid-attribute when passed attribute element is not an instance of module:engine/view/attributeelement~ViewAttributeElement ViewAttributeElement.

      Throws module:utils/ckeditorerror~CKEditorError view-writer-wrap-nonselection-collapsed-range when passed range is collapsed and different than view selection.

      Parameters

      Returns ViewRange

      range Range after wrapping, spanning over wrapping attribute element.