` element.)\n //\n // If the child is similar to the given attribute element, unwrap it - it will be completely removed.\n //\n // abcxyz
--> abcxyz
\n //\n if (child.isSimilar(unwrapElement)) {\n const unwrapped = child.getChildren();\n const count = child.childCount;\n // Replace wrapper element with its children\n child._remove();\n parent._insertChild(i, unwrapped);\n this._removeFromClonedElementsGroup(child);\n // Save start and end position of moved items.\n unwrapPositions.push(new Position(parent, i), new Position(parent, i + count));\n // Skip elements that were unwrapped. Assuming there won't be another element to unwrap in child elements.\n i += count;\n endOffset += count - 1;\n continue;\n }\n //\n // If the child is not similar but is an attribute element, try partial unwrapping - remove the same attributes/styles/classes.\n // Partial unwrapping will happen only if the elements have the same name.\n //\n // abcxyz
--> abcxyz
\n // abcxyz
--> abcxyz
\n //\n if (this._unwrapAttributeElement(unwrapElement, child)) {\n unwrapPositions.push(new Position(parent, i), new Position(parent, i + 1));\n i++;\n continue;\n }\n //\n // If other nested attribute is found, look through it's children for elements to unwrap.\n //\n // abc
-->
abc
\n //\n this._unwrapChildren(child, 0, child.childCount, unwrapElement);\n i++;\n }\n // Merge at each unwrap.\n let offsetChange = 0;\n for (const position of unwrapPositions) {\n position.offset -= offsetChange;\n // Do not merge with elements outside selected children.\n if (position.offset == startOffset || position.offset == endOffset) {\n continue;\n }\n const newPosition = this.mergeAttributes(position);\n // If nodes were merged - other merge offsets will change.\n if (!newPosition.isEqual(position)) {\n offsetChange++;\n endOffset--;\n }\n }\n return Range._createFromParentsAndOffsets(parent, startOffset, parent, endOffset);\n }\n /**\n * Helper function for `view.writer.wrap`. Wraps range with provided attribute element.\n * This method will also merge newly added attribute element with its siblings whenever possible.\n *\n * Throws {@link module:utils/ckeditorerror~CKEditorError} `view-writer-wrap-invalid-attribute` when passed attribute element is not\n * an instance of {@link module:engine/view/attributeelement~AttributeElement AttributeElement}.\n *\n * @returns New range after wrapping, spanning over wrapping attribute element.\n */\n _wrapRange(range, attribute) {\n // Break attributes at range start and end.\n const { start: breakStart, end: breakEnd } = this._breakAttributesRange(range, true);\n const parentContainer = breakStart.parent;\n // Wrap all children with attribute.\n const newRange = this._wrapChildren(parentContainer, breakStart.offset, breakEnd.offset, attribute);\n // Merge attributes at the both ends and return a new range.\n const start = this.mergeAttributes(newRange.start);\n // If start position was merged - move end position back.\n if (!start.isEqual(newRange.start)) {\n newRange.end.offset--;\n }\n const end = this.mergeAttributes(newRange.end);\n return new Range(start, end);\n }\n /**\n * Helper function for {@link #wrap}. Wraps position with provided attribute element.\n * This method will also merge newly added attribute element with its siblings whenever possible.\n *\n * Throws {@link module:utils/ckeditorerror~CKEditorError} `view-writer-wrap-invalid-attribute` when passed attribute element is not\n * an instance of {@link module:engine/view/attributeelement~AttributeElement AttributeElement}.\n *\n * @returns New position after wrapping.\n */\n _wrapPosition(position, attribute) {\n // Return same position when trying to wrap with attribute similar to position parent.\n if (attribute.isSimilar(position.parent)) {\n return movePositionToTextNode(position.clone());\n }\n // When position is inside text node - break it and place new position between two text nodes.\n if (position.parent.is('$text')) {\n position = breakTextNode(position);\n }\n // Create fake element that will represent position, and will not be merged with other attributes.\n const fakeElement = this.createAttributeElement('_wrapPosition-fake-element');\n fakeElement._priority = Number.POSITIVE_INFINITY;\n fakeElement.isSimilar = () => false;\n // Insert fake element in position location.\n position.parent._insertChild(position.offset, fakeElement);\n // Range around inserted fake attribute element.\n const wrapRange = new Range(position, position.getShiftedBy(1));\n // Wrap fake element with attribute (it will also merge if possible).\n this.wrap(wrapRange, attribute);\n // Remove fake element and place new position there.\n const newPosition = new Position(fakeElement.parent, fakeElement.index);\n fakeElement._remove();\n // If position is placed between text nodes - merge them and return position inside.\n const nodeBefore = newPosition.nodeBefore;\n const nodeAfter = newPosition.nodeAfter;\n if (nodeBefore instanceof Text && nodeAfter instanceof Text) {\n return mergeTextNodes(nodeBefore, nodeAfter);\n }\n // If position is next to text node - move position inside.\n return movePositionToTextNode(newPosition);\n }\n /**\n * Wraps one {@link module:engine/view/attributeelement~AttributeElement AttributeElement} into another by\n * merging them if possible. When merging is possible - all attributes, styles and classes are moved from wrapper\n * element to element being wrapped.\n *\n * @param wrapper Wrapper AttributeElement.\n * @param toWrap AttributeElement to wrap using wrapper element.\n * @returns Returns `true` if elements are merged.\n */\n _wrapAttributeElement(wrapper, toWrap) {\n if (!canBeJoined(wrapper, toWrap)) {\n return false;\n }\n // Can't merge if name or priority differs.\n if (wrapper.name !== toWrap.name || wrapper.priority !== toWrap.priority) {\n return false;\n }\n // Check if attributes can be merged.\n for (const key of wrapper.getAttributeKeys()) {\n // Classes and styles should be checked separately.\n if (key === 'class' || key === 'style') {\n continue;\n }\n // If some attributes are different we cannot wrap.\n if (toWrap.hasAttribute(key) && toWrap.getAttribute(key) !== wrapper.getAttribute(key)) {\n return false;\n }\n }\n // Check if styles can be merged.\n for (const key of wrapper.getStyleNames()) {\n if (toWrap.hasStyle(key) && toWrap.getStyle(key) !== wrapper.getStyle(key)) {\n return false;\n }\n }\n // Move all attributes/classes/styles from wrapper to wrapped AttributeElement.\n for (const key of wrapper.getAttributeKeys()) {\n // Classes and styles should be checked separately.\n if (key === 'class' || key === 'style') {\n continue;\n }\n // Move only these attributes that are not present - other are similar.\n if (!toWrap.hasAttribute(key)) {\n this.setAttribute(key, wrapper.getAttribute(key), toWrap);\n }\n }\n for (const key of wrapper.getStyleNames()) {\n if (!toWrap.hasStyle(key)) {\n this.setStyle(key, wrapper.getStyle(key), toWrap);\n }\n }\n for (const key of wrapper.getClassNames()) {\n if (!toWrap.hasClass(key)) {\n this.addClass(key, toWrap);\n }\n }\n return true;\n }\n /**\n * Unwraps {@link module:engine/view/attributeelement~AttributeElement AttributeElement} from another by removing\n * corresponding attributes, classes and styles. All attributes, classes and styles from wrapper should be present\n * inside element being unwrapped.\n *\n * @param wrapper Wrapper AttributeElement.\n * @param toUnwrap AttributeElement to unwrap using wrapper element.\n * @returns Returns `true` if elements are unwrapped.\n **/\n _unwrapAttributeElement(wrapper, toUnwrap) {\n if (!canBeJoined(wrapper, toUnwrap)) {\n return false;\n }\n // Can't unwrap if name or priority differs.\n if (wrapper.name !== toUnwrap.name || wrapper.priority !== toUnwrap.priority) {\n return false;\n }\n // Check if AttributeElement has all wrapper attributes.\n for (const key of wrapper.getAttributeKeys()) {\n // Classes and styles should be checked separately.\n if (key === 'class' || key === 'style') {\n continue;\n }\n // If some attributes are missing or different we cannot unwrap.\n if (!toUnwrap.hasAttribute(key) || toUnwrap.getAttribute(key) !== wrapper.getAttribute(key)) {\n return false;\n }\n }\n // Check if AttributeElement has all wrapper classes.\n if (!toUnwrap.hasClass(...wrapper.getClassNames())) {\n return false;\n }\n // Check if AttributeElement has all wrapper styles.\n for (const key of wrapper.getStyleNames()) {\n // If some styles are missing or different we cannot unwrap.\n if (!toUnwrap.hasStyle(key) || toUnwrap.getStyle(key) !== wrapper.getStyle(key)) {\n return false;\n }\n }\n // Remove all wrapper's attributes from unwrapped element.\n for (const key of wrapper.getAttributeKeys()) {\n // Classes and styles should be checked separately.\n if (key === 'class' || key === 'style') {\n continue;\n }\n this.removeAttribute(key, toUnwrap);\n }\n // Remove all wrapper's classes from unwrapped element.\n this.removeClass(Array.from(wrapper.getClassNames()), toUnwrap);\n // Remove all wrapper's styles from unwrapped element.\n this.removeStyle(Array.from(wrapper.getStyleNames()), toUnwrap);\n return true;\n }\n /**\n * Helper function used by other `DowncastWriter` methods. Breaks attribute elements at the boundaries of given range.\n *\n * @param range Range which `start` and `end` positions will be used to break attributes.\n * @param forceSplitText If set to `true`, will break text nodes even if they are directly in container element.\n * This behavior will result in incorrect view state, but is needed by other view writing methods which then fixes view state.\n * @returns New range with located at break positions.\n */\n _breakAttributesRange(range, forceSplitText = false) {\n const rangeStart = range.start;\n const rangeEnd = range.end;\n validateRangeContainer(range, this.document);\n // Break at the collapsed position. Return new collapsed range.\n if (range.isCollapsed) {\n const position = this._breakAttributes(range.start, forceSplitText);\n return new Range(position, position);\n }\n const breakEnd = this._breakAttributes(rangeEnd, forceSplitText);\n const count = breakEnd.parent.childCount;\n const breakStart = this._breakAttributes(rangeStart, forceSplitText);\n // Calculate new break end offset.\n breakEnd.offset += breakEnd.parent.childCount - count;\n return new Range(breakStart, breakEnd);\n }\n /**\n * Helper function used by other `DowncastWriter` methods. Breaks attribute elements at given position.\n *\n * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-writer-cannot-break-empty-element` when break position\n * is placed inside {@link module:engine/view/emptyelement~EmptyElement EmptyElement}.\n *\n * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-writer-cannot-break-ui-element` when break position\n * is placed inside {@link module:engine/view/uielement~UIElement UIElement}.\n *\n * @param position Position where to break attributes.\n * @param forceSplitText If set to `true`, will break text nodes even if they are directly in container element.\n * This behavior will result in incorrect view state, but is needed by other view writing methods which then fixes view state.\n * @returns New position after breaking the attributes.\n */\n _breakAttributes(position, forceSplitText = false) {\n const positionOffset = position.offset;\n const positionParent = position.parent;\n // If position is placed inside EmptyElement - throw an exception as we cannot break inside.\n if (position.parent.is('emptyElement')) {\n /**\n * Cannot break an `EmptyElement` instance.\n *\n * This error is thrown if\n * {@link module:engine/view/downcastwriter~DowncastWriter#breakAttributes `DowncastWriter#breakAttributes()`}\n * was executed in an incorrect position.\n *\n * @error view-writer-cannot-break-empty-element\n */\n throw new CKEditorError('view-writer-cannot-break-empty-element', this.document);\n }\n // If position is placed inside UIElement - throw an exception as we cannot break inside.\n if (position.parent.is('uiElement')) {\n /**\n * Cannot break a `UIElement` instance.\n *\n * This error is thrown if\n * {@link module:engine/view/downcastwriter~DowncastWriter#breakAttributes `DowncastWriter#breakAttributes()`}\n * was executed in an incorrect position.\n *\n * @error view-writer-cannot-break-ui-element\n */\n throw new CKEditorError('view-writer-cannot-break-ui-element', this.document);\n }\n // If position is placed inside RawElement - throw an exception as we cannot break inside.\n if (position.parent.is('rawElement')) {\n /**\n * Cannot break a `RawElement` instance.\n *\n * This error is thrown if\n * {@link module:engine/view/downcastwriter~DowncastWriter#breakAttributes `DowncastWriter#breakAttributes()`}\n * was executed in an incorrect position.\n *\n * @error view-writer-cannot-break-raw-element\n */\n throw new CKEditorError('view-writer-cannot-break-raw-element', this.document);\n }\n // There are no attributes to break and text nodes breaking is not forced.\n if (!forceSplitText && positionParent.is('$text') && isContainerOrFragment(positionParent.parent)) {\n return position.clone();\n }\n // Position's parent is container, so no attributes to break.\n if (isContainerOrFragment(positionParent)) {\n return position.clone();\n }\n // Break text and start again in new position.\n if (positionParent.is('$text')) {\n return this._breakAttributes(breakTextNode(position), forceSplitText);\n }\n const length = positionParent.childCount;\n //
foobar{}
\n // foobar[]
\n // foobar[]
\n if (positionOffset == length) {\n const newPosition = new Position(positionParent.parent, positionParent.index + 1);\n return this._breakAttributes(newPosition, forceSplitText);\n }\n else {\n // foo{}bar
\n // foo[]bar
\n // foo{}bar
\n if (positionOffset === 0) {\n const newPosition = new Position(positionParent.parent, positionParent.index);\n return this._breakAttributes(newPosition, forceSplitText);\n }\n // foob{}ar
\n // foob[]ar
\n // foob[]ar
\n // foob[]ar
\n else {\n const offsetAfter = positionParent.index + 1;\n // Break element.\n const clonedNode = positionParent._clone();\n // Insert cloned node to position's parent node.\n positionParent.parent._insertChild(offsetAfter, clonedNode);\n this._addToClonedElementsGroup(clonedNode);\n // Get nodes to move.\n const count = positionParent.childCount - positionOffset;\n const nodesToMove = positionParent._removeChildren(positionOffset, count);\n // Move nodes to cloned node.\n clonedNode._appendChild(nodesToMove);\n // Create new position to work on.\n const newPosition = new Position(positionParent.parent, offsetAfter);\n return this._breakAttributes(newPosition, forceSplitText);\n }\n }\n }\n /**\n * Stores the information that an {@link module:engine/view/attributeelement~AttributeElement attribute element} was\n * added to the tree. Saves the reference to the group in the given element and updates the group, so other elements\n * from the group now keep a reference to the given attribute element.\n *\n * The clones group can be obtained using {@link module:engine/view/attributeelement~AttributeElement#getElementsWithSameId}.\n *\n * Does nothing if added element has no {@link module:engine/view/attributeelement~AttributeElement#id id}.\n *\n * @param element Attribute element to save.\n */\n _addToClonedElementsGroup(element) {\n // Add only if the element is in document tree.\n if (!element.root.is('rootElement')) {\n return;\n }\n // Traverse the element's children recursively to find other attribute elements that also might got inserted.\n // The loop is at the beginning so we can make fast returns later in the code.\n if (element.is('element')) {\n for (const child of element.getChildren()) {\n this._addToClonedElementsGroup(child);\n }\n }\n const id = element.id;\n if (!id) {\n return;\n }\n let group = this._cloneGroups.get(id);\n if (!group) {\n group = new Set();\n this._cloneGroups.set(id, group);\n }\n group.add(element);\n element._clonesGroup = group;\n }\n /**\n * Removes all the information about the given {@link module:engine/view/attributeelement~AttributeElement attribute element}\n * from its clones group.\n *\n * Keep in mind, that the element will still keep a reference to the group (but the group will not keep a reference to it).\n * This allows to reference the whole group even if the element was already removed from the tree.\n *\n * Does nothing if the element has no {@link module:engine/view/attributeelement~AttributeElement#id id}.\n *\n * @param element Attribute element to remove.\n */\n _removeFromClonedElementsGroup(element) {\n // Traverse the element's children recursively to find other attribute elements that also got removed.\n // The loop is at the beginning so we can make fast returns later in the code.\n if (element.is('element')) {\n for (const child of element.getChildren()) {\n this._removeFromClonedElementsGroup(child);\n }\n }\n const id = element.id;\n if (!id) {\n return;\n }\n const group = this._cloneGroups.get(id);\n if (!group) {\n return;\n }\n group.delete(element);\n // Not removing group from element on purpose!\n // If other parts of code have reference to this element, they will be able to get references to other elements from the group.\n }\n}\n// Helper function for `view.writer.wrap`. Checks if given element has any children that are not ui elements.\nfunction _hasNonUiChildren(parent) {\n return Array.from(parent.getChildren()).some(child => !child.is('uiElement'));\n}\n/**\n * The `attribute` passed to {@link module:engine/view/downcastwriter~DowncastWriter#wrap `DowncastWriter#wrap()`}\n * must be an instance of {@link module:engine/view/attributeelement~AttributeElement `AttributeElement`}.\n *\n * @error view-writer-wrap-invalid-attribute\n */\n/**\n * Returns first parent container of specified {@link module:engine/view/position~Position Position}.\n * Position's parent node is checked as first, then next parents are checked.\n * Note that {@link module:engine/view/documentfragment~DocumentFragment DocumentFragment} is treated like a container.\n *\n * @param position Position used as a start point to locate parent container.\n * @returns Parent container element or `undefined` if container is not found.\n */\nfunction getParentContainer(position) {\n let parent = position.parent;\n while (!isContainerOrFragment(parent)) {\n if (!parent) {\n return undefined;\n }\n parent = parent.parent;\n }\n return parent;\n}\n/**\n * Checks if first {@link module:engine/view/attributeelement~AttributeElement AttributeElement} provided to the function\n * can be wrapped outside second element. It is done by comparing elements'\n * {@link module:engine/view/attributeelement~AttributeElement#priority priorities}, if both have same priority\n * {@link module:engine/view/element~Element#getIdentity identities} are compared.\n */\nfunction shouldABeOutsideB(a, b) {\n if (a.priority < b.priority) {\n return true;\n }\n else if (a.priority > b.priority) {\n return false;\n }\n // When priorities are equal and names are different - use identities.\n return a.getIdentity() < b.getIdentity();\n}\n/**\n * Returns new position that is moved to near text node. Returns same position if there is no text node before of after\n * specified position.\n *\n * ```html\n * foo[]
-> foo{}
\n * []foo
-> {}foo
\n * ```\n *\n * @returns Position located inside text node or same position if there is no text nodes\n * before or after position location.\n */\nfunction movePositionToTextNode(position) {\n const nodeBefore = position.nodeBefore;\n if (nodeBefore && nodeBefore.is('$text')) {\n return new Position(nodeBefore, nodeBefore.data.length);\n }\n const nodeAfter = position.nodeAfter;\n if (nodeAfter && nodeAfter.is('$text')) {\n return new Position(nodeAfter, 0);\n }\n return position;\n}\n/**\n * Breaks text node into two text nodes when possible.\n *\n * ```html\n * foo{}bar
-> foo[]bar
\n * {}foobar
-> []foobar
\n * foobar{}
-> foobar[]
\n * ```\n *\n * @param position Position that need to be placed inside text node.\n * @returns New position after breaking text node.\n */\nfunction breakTextNode(position) {\n if (position.offset == position.parent.data.length) {\n return new Position(position.parent.parent, position.parent.index + 1);\n }\n if (position.offset === 0) {\n return new Position(position.parent.parent, position.parent.index);\n }\n // Get part of the text that need to be moved.\n const textToMove = position.parent.data.slice(position.offset);\n // Leave rest of the text in position's parent.\n position.parent._data = position.parent.data.slice(0, position.offset);\n // Insert new text node after position's parent text node.\n position.parent.parent._insertChild(position.parent.index + 1, new Text(position.root.document, textToMove));\n // Return new position between two newly created text nodes.\n return new Position(position.parent.parent, position.parent.index + 1);\n}\n/**\n * Merges two text nodes into first node. Removes second node and returns merge position.\n *\n * @param t1 First text node to merge. Data from second text node will be moved at the end of this text node.\n * @param t2 Second text node to merge. This node will be removed after merging.\n * @returns Position after merging text nodes.\n */\nfunction mergeTextNodes(t1, t2) {\n // Merge text data into first text node and remove second one.\n const nodeBeforeLength = t1.data.length;\n t1._data += t2.data;\n t2._remove();\n return new Position(t1, nodeBeforeLength);\n}\nconst validNodesToInsert = [Text, AttributeElement, ContainerElement, EmptyElement, RawElement, UIElement];\n/**\n * Checks if provided nodes are valid to insert.\n *\n * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-writer-insert-invalid-node` when nodes to insert\n * contains instances that are not supported ones (see error description for valid ones.\n */\nfunction validateNodesToInsert(nodes, errorContext) {\n for (const node of nodes) {\n if (!validNodesToInsert.some((validNode => node instanceof validNode))) { // eslint-disable-line no-use-before-define\n /**\n * One of the nodes to be inserted is of an invalid type.\n *\n * Nodes to be inserted with {@link module:engine/view/downcastwriter~DowncastWriter#insert `DowncastWriter#insert()`} should be\n * of the following types:\n *\n * * {@link module:engine/view/attributeelement~AttributeElement AttributeElement},\n * * {@link module:engine/view/containerelement~ContainerElement ContainerElement},\n * * {@link module:engine/view/emptyelement~EmptyElement EmptyElement},\n * * {@link module:engine/view/uielement~UIElement UIElement},\n * * {@link module:engine/view/rawelement~RawElement RawElement},\n * * {@link module:engine/view/text~Text Text}.\n *\n * @error view-writer-insert-invalid-node-type\n */\n throw new CKEditorError('view-writer-insert-invalid-node-type', errorContext);\n }\n if (!node.is('$text')) {\n validateNodesToInsert(node.getChildren(), errorContext);\n }\n }\n}\n/**\n * Checks if node is ContainerElement or DocumentFragment, because in most cases they should be treated the same way.\n *\n * @returns Returns `true` if node is instance of ContainerElement or DocumentFragment.\n */\nfunction isContainerOrFragment(node) {\n return node && (node.is('containerElement') || node.is('documentFragment'));\n}\n/**\n * Checks if {@link module:engine/view/range~Range#start range start} and {@link module:engine/view/range~Range#end range end} are placed\n * inside same {@link module:engine/view/containerelement~ContainerElement container element}.\n * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-writer-invalid-range-container` when validation fails.\n */\nfunction validateRangeContainer(range, errorContext) {\n const startContainer = getParentContainer(range.start);\n const endContainer = getParentContainer(range.end);\n if (!startContainer || !endContainer || startContainer !== endContainer) {\n /**\n * The container of the given range is invalid.\n *\n * This may happen if {@link module:engine/view/range~Range#start range start} and\n * {@link module:engine/view/range~Range#end range end} positions are not placed inside the same container element or\n * a parent container for these positions cannot be found.\n *\n * Methods like {@link module:engine/view/downcastwriter~DowncastWriter#wrap `DowncastWriter#remove()`},\n * {@link module:engine/view/downcastwriter~DowncastWriter#wrap `DowncastWriter#clean()`},\n * {@link module:engine/view/downcastwriter~DowncastWriter#wrap `DowncastWriter#wrap()`},\n * {@link module:engine/view/downcastwriter~DowncastWriter#wrap `DowncastWriter#unwrap()`} need to be called\n * on a range that has its start and end positions located in the same container element. Both positions can be\n * nested within other elements (e.g. an attribute element) but the closest container ancestor must be the same.\n *\n * @error view-writer-invalid-range-container\n */\n throw new CKEditorError('view-writer-invalid-range-container', errorContext);\n }\n}\n/**\n * Checks if two attribute elements can be joined together. Elements can be joined together if, and only if\n * they do not have ids specified.\n */\nfunction canBeJoined(a, b) {\n return a.id === null && b.id === null;\n}\n","/**\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\nimport { keyCodes, isText } from '@ckeditor/ckeditor5-utils';\n/**\n * Set of utilities related to handling block and inline fillers.\n *\n * Browsers do not allow to put caret in elements which does not have height. Because of it, we need to fill all\n * empty elements which should be selectable with elements or characters called \"fillers\". Unfortunately there is no one\n * universal filler, this is why two types are uses:\n *\n * * Block filler is an element which fill block elements, like ``. CKEditor uses `
` as a block filler during the editing,\n * as browsers do natively. So instead of an empty `
` there will be `
`. The advantage of block filler is that\n * it is transparent for the selection, so when the caret is before the `
` and user presses right arrow he will be\n * moved to the next paragraph, not after the `
`. The disadvantage is that it breaks a block, so it can not be used\n * in the middle of a line of text. The {@link module:engine/view/filler~BR_FILLER `
` filler} can be replaced with any other\n * character in the data output, for instance {@link module:engine/view/filler~NBSP_FILLER non-breaking space} or\n * {@link module:engine/view/filler~MARKED_NBSP_FILLER marked non-breaking space}.\n *\n * * Inline filler is a filler which does not break a line of text, so it can be used inside the text, for instance in the empty\n * `` surrendered by text: `foobar`, if we want to put the caret there. CKEditor uses a sequence of the zero-width\n * spaces as an {@link module:engine/view/filler~INLINE_FILLER inline filler} having the predetermined\n * {@link module:engine/view/filler~INLINE_FILLER_LENGTH length}. A sequence is used, instead of a single character to\n * avoid treating random zero-width spaces as the inline filler. Disadvantage of the inline filler is that it is not\n * transparent for the selection. The arrow key moves the caret between zero-width spaces characters, so the additional\n * code is needed to handle the caret.\n *\n * Both inline and block fillers are handled by the {@link module:engine/view/renderer~Renderer renderer} and are not present in the\n * view.\n *\n * @module engine/view/filler\n */\n/**\n * Non-breaking space filler creator. This function creates the ` ` text node.\n * It defines how the filler is created.\n *\n * @see module:engine/view/filler~MARKED_NBSP_FILLER\n * @see module:engine/view/filler~BR_FILLER\n */\nexport const NBSP_FILLER = (domDocument) => domDocument.createTextNode('\\u00A0');\n/**\n * Marked non-breaking space filler creator. This function creates the ` ` element.\n * It defines how the filler is created.\n *\n * @see module:engine/view/filler~NBSP_FILLER\n * @see module:engine/view/filler~BR_FILLER\n */\nexport const MARKED_NBSP_FILLER = (domDocument) => {\n const span = domDocument.createElement('span');\n span.dataset.ckeFiller = 'true';\n span.innerText = '\\u00A0';\n return span;\n};\n/**\n * `
` filler creator. This function creates the `
` element.\n * It defines how the filler is created.\n *\n * @see module:engine/view/filler~NBSP_FILLER\n * @see module:engine/view/filler~MARKED_NBSP_FILLER\n */\nexport const BR_FILLER = (domDocument) => {\n const fillerBr = domDocument.createElement('br');\n fillerBr.dataset.ckeFiller = 'true';\n return fillerBr;\n};\n/**\n * Length of the {@link module:engine/view/filler~INLINE_FILLER INLINE_FILLER}.\n */\nexport const INLINE_FILLER_LENGTH = 7;\n/**\n * Inline filler which is a sequence of the word joiners.\n */\nexport const INLINE_FILLER = '\\u2060'.repeat(INLINE_FILLER_LENGTH);\n/**\n * Checks if the node is a text node which starts with the {@link module:engine/view/filler~INLINE_FILLER inline filler}.\n *\n * ```ts\n * startsWithFiller( document.createTextNode( INLINE_FILLER ) ); // true\n * startsWithFiller( document.createTextNode( INLINE_FILLER + 'foo' ) ); // true\n * startsWithFiller( document.createTextNode( 'foo' ) ); // false\n * startsWithFiller( document.createElement( 'p' ) ); // false\n * ```\n *\n * @param domNode DOM node.\n * @returns True if the text node starts with the {@link module:engine/view/filler~INLINE_FILLER inline filler}.\n */\nexport function startsWithFiller(domNode) {\n return isText(domNode) && (domNode.data.substr(0, INLINE_FILLER_LENGTH) === INLINE_FILLER);\n}\n/**\n * Checks if the text node contains only the {@link module:engine/view/filler~INLINE_FILLER inline filler}.\n *\n * ```ts\n * isInlineFiller( document.createTextNode( INLINE_FILLER ) ); // true\n * isInlineFiller( document.createTextNode( INLINE_FILLER + 'foo' ) ); // false\n * ```\n *\n * @param domText DOM text node.\n * @returns True if the text node contains only the {@link module:engine/view/filler~INLINE_FILLER inline filler}.\n */\nexport function isInlineFiller(domText) {\n return domText.data.length == INLINE_FILLER_LENGTH && startsWithFiller(domText);\n}\n/**\n * Get string data from the text node, removing an {@link module:engine/view/filler~INLINE_FILLER inline filler} from it,\n * if text node contains it.\n *\n * ```ts\n * getDataWithoutFiller( document.createTextNode( INLINE_FILLER + 'foo' ) ) == 'foo' // true\n * getDataWithoutFiller( document.createTextNode( 'foo' ) ) == 'foo' // true\n * ```\n *\n * @param domText DOM text node, possible with inline filler.\n * @returns Data without filler.\n */\nexport function getDataWithoutFiller(domText) {\n if (startsWithFiller(domText)) {\n return domText.data.slice(INLINE_FILLER_LENGTH);\n }\n else {\n return domText.data;\n }\n}\n/**\n * Assign key observer which move cursor from the end of the inline filler to the beginning of it when\n * the left arrow is pressed, so the filler does not break navigation.\n *\n * @param view View controller instance we should inject quirks handling on.\n */\nexport function injectQuirksHandling(view) {\n view.document.on('arrowKey', jumpOverInlineFiller, { priority: 'low' });\n}\n/**\n * Move cursor from the end of the inline filler to the beginning of it when, so the filler does not break navigation.\n */\nfunction jumpOverInlineFiller(evt, data) {\n if (data.keyCode == keyCodes.arrowleft) {\n const domSelection = data.domTarget.ownerDocument.defaultView.getSelection();\n if (domSelection.rangeCount == 1 && domSelection.getRangeAt(0).collapsed) {\n const domParent = domSelection.getRangeAt(0).startContainer;\n const domOffset = domSelection.getRangeAt(0).startOffset;\n if (startsWithFiller(domParent) && domOffset <= INLINE_FILLER_LENGTH) {\n domSelection.collapse(domParent, 0);\n }\n }\n }\n}\n","import api from \"!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import content from \"!!../../../css-loader/dist/cjs.js!../../../postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./renderer.css\";\n\nvar options = {\"injectType\":\"singletonStyleTag\",\"attributes\":{\"data-cke\":true}};\n\noptions.insert = \"head\";\noptions.singleton = true;\n\nvar update = api(content, options);\n\n\n\nexport default content.locals || {};","/**\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n/**\n * @module engine/view/renderer\n */\nimport ViewText from './text';\nimport ViewPosition from './position';\nimport { INLINE_FILLER, INLINE_FILLER_LENGTH, startsWithFiller, isInlineFiller } from './filler';\nimport { CKEditorError, ObservableMixin, diff, env, fastDiff, insertAt, isComment, isNode, isText, remove } from '@ckeditor/ckeditor5-utils';\nimport '../../theme/renderer.css';\n/**\n * Renderer is responsible for updating the DOM structure and the DOM selection based on\n * the {@link module:engine/view/renderer~Renderer#markToSync information about updated view nodes}.\n * In other words, it renders the view to the DOM.\n *\n * Its main responsibility is to make only the necessary, minimal changes to the DOM. However, unlike in many\n * virtual DOM implementations, the primary reason for doing minimal changes is not the performance but ensuring\n * that native editing features such as text composition, autocompletion, spell checking, selection's x-index are\n * affected as little as possible.\n *\n * Renderer uses {@link module:engine/view/domconverter~DomConverter} to transform view nodes and positions\n * to and from the DOM.\n */\nexport default class Renderer extends ObservableMixin() {\n /**\n * Creates a renderer instance.\n *\n * @param domConverter Converter instance.\n * @param selection View selection.\n */\n constructor(domConverter, selection) {\n super();\n /**\n * Set of DOM Documents instances.\n */\n this.domDocuments = new Set();\n /**\n * Set of nodes which attributes changed and may need to be rendered.\n */\n this.markedAttributes = new Set();\n /**\n * Set of elements which child lists changed and may need to be rendered.\n */\n this.markedChildren = new Set();\n /**\n * Set of text nodes which text data changed and may need to be rendered.\n */\n this.markedTexts = new Set();\n /**\n * The text node in which the inline filler was rendered.\n */\n this._inlineFiller = null;\n /**\n * DOM element containing fake selection.\n */\n this._fakeSelectionContainer = null;\n this.domConverter = domConverter;\n this.selection = selection;\n this.set('isFocused', false);\n this.set('isSelecting', false);\n // Rendering the selection and inline filler manipulation should be postponed in (non-Android) Blink until the user finishes\n // creating the selection in DOM to avoid accidental selection collapsing\n // (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).\n // When the user stops selecting, all pending changes should be rendered ASAP, though.\n if (env.isBlink && !env.isAndroid) {\n this.on('change:isSelecting', () => {\n if (!this.isSelecting) {\n this.render();\n }\n });\n }\n this.set('isComposing', false);\n this.on('change:isComposing', () => {\n if (!this.isComposing) {\n this.render();\n }\n });\n }\n /**\n * Marks a view node to be updated in the DOM by {@link #render `render()`}.\n *\n * Note that only view nodes whose parents have corresponding DOM elements need to be marked to be synchronized.\n *\n * @see #markedAttributes\n * @see #markedChildren\n * @see #markedTexts\n *\n * @param type Type of the change.\n * @param node ViewNode to be marked.\n */\n markToSync(type, node) {\n if (type === 'text') {\n if (this.domConverter.mapViewToDom(node.parent)) {\n this.markedTexts.add(node);\n }\n }\n else {\n // If the node has no DOM element it is not rendered yet,\n // its children/attributes do not need to be marked to be sync.\n if (!this.domConverter.mapViewToDom(node)) {\n return;\n }\n if (type === 'attributes') {\n this.markedAttributes.add(node);\n }\n else if (type === 'children') {\n this.markedChildren.add(node);\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const unreachable = type;\n /**\n * Unknown type passed to Renderer.markToSync.\n *\n * @error view-renderer-unknown-type\n */\n throw new CKEditorError('view-renderer-unknown-type', this);\n }\n }\n }\n /**\n * Renders all buffered changes ({@link #markedAttributes}, {@link #markedChildren} and {@link #markedTexts}) and\n * the current view selection (if needed) to the DOM by applying a minimal set of changes to it.\n *\n * Renderer tries not to break the text composition (e.g. IME) and x-index of the selection,\n * so it does as little as it is needed to update the DOM.\n *\n * Renderer also handles {@link module:engine/view/filler fillers}. Especially, it checks if the inline filler is needed\n * at the selection position and adds or removes it. To prevent breaking text composition inline filler will not be\n * removed as long as the selection is in the text node which needed it at first.\n */\n render() {\n // Ignore rendering while in the composition mode. Composition events are not cancellable and browser will modify the DOM tree.\n // All marked elements, attributes, etc. will wait until next render after the composition ends.\n // On Android composition events are immediately applied to the model, so we don't need to skip rendering,\n // and we should not do it because the difference between view and DOM could lead to position mapping problems.\n if (this.isComposing && !env.isAndroid) {\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.info( '%c[Renderer]%c Rendering aborted while isComposing',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', ''\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n return;\n }\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.group( '%c[Renderer]%c Rendering',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', ''\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n let inlineFillerPosition = null;\n const isInlineFillerRenderingPossible = env.isBlink && !env.isAndroid ? !this.isSelecting : true;\n // Refresh mappings.\n for (const element of this.markedChildren) {\n this._updateChildrenMappings(element);\n }\n // Don't manipulate inline fillers while the selection is being made in (non-Android) Blink to prevent accidental\n // DOM selection collapsing\n // (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).\n if (isInlineFillerRenderingPossible) {\n // There was inline filler rendered in the DOM but it's not\n // at the selection position any more, so we can remove it\n // (cause even if it's needed, it must be placed in another location).\n if (this._inlineFiller && !this._isSelectionInInlineFiller()) {\n this._removeInlineFiller();\n }\n // If we've got the filler, let's try to guess its position in the view.\n if (this._inlineFiller) {\n inlineFillerPosition = this._getInlineFillerPosition();\n }\n // Otherwise, if it's needed, create it at the selection position.\n else if (this._needsInlineFillerAtSelection()) {\n inlineFillerPosition = this.selection.getFirstPosition();\n // Do not use `markToSync` so it will be added even if the parent is already added.\n this.markedChildren.add(inlineFillerPosition.parent);\n }\n }\n // Make sure the inline filler has any parent, so it can be mapped to view position by DomConverter.\n else if (this._inlineFiller && this._inlineFiller.parentNode) {\n // While the user is making selection, preserve the inline filler at its original position.\n inlineFillerPosition = this.domConverter.domPositionToView(this._inlineFiller);\n // While down-casting the document selection attributes, all existing empty\n // attribute elements (for selection position) are removed from the view and DOM,\n // so make sure that we were able to map filler position.\n // https://github.com/ckeditor/ckeditor5/issues/12026\n if (inlineFillerPosition && inlineFillerPosition.parent.is('$text')) {\n // The inline filler position is expected to be before the text node.\n inlineFillerPosition = ViewPosition._createBefore(inlineFillerPosition.parent);\n }\n }\n for (const element of this.markedAttributes) {\n this._updateAttrs(element);\n }\n for (const element of this.markedChildren) {\n this._updateChildren(element, { inlineFillerPosition });\n }\n for (const node of this.markedTexts) {\n if (!this.markedChildren.has(node.parent) && this.domConverter.mapViewToDom(node.parent)) {\n this._updateText(node, { inlineFillerPosition });\n }\n }\n // * Check whether the inline filler is required and where it really is in the DOM.\n // At this point in most cases it will be in the DOM, but there are exceptions.\n // For example, if the inline filler was deep in the created DOM structure, it will not be created.\n // Similarly, if it was removed at the beginning of this function and then neither text nor children were updated,\n // it will not be present. Fix those and similar scenarios.\n // * Don't manipulate inline fillers while the selection is being made in (non-Android) Blink to prevent accidental\n // DOM selection collapsing\n // (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).\n if (isInlineFillerRenderingPossible) {\n if (inlineFillerPosition) {\n const fillerDomPosition = this.domConverter.viewPositionToDom(inlineFillerPosition);\n const domDocument = fillerDomPosition.parent.ownerDocument;\n if (!startsWithFiller(fillerDomPosition.parent)) {\n // Filler has not been created at filler position. Create it now.\n this._inlineFiller = addInlineFiller(domDocument, fillerDomPosition.parent, fillerDomPosition.offset);\n }\n else {\n // Filler has been found, save it.\n this._inlineFiller = fillerDomPosition.parent;\n }\n }\n else {\n // There is no filler needed.\n this._inlineFiller = null;\n }\n }\n // First focus the new editing host, then update the selection.\n // Otherwise, FF may throw an error (https://github.com/ckeditor/ckeditor5/issues/721).\n this._updateFocus();\n this._updateSelection();\n this.markedTexts.clear();\n this.markedAttributes.clear();\n this.markedChildren.clear();\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.groupEnd();\n // @if CK_DEBUG_TYPING // }\n }\n /**\n * Updates mappings of view element's children.\n *\n * Children that were replaced in the view structure by similar elements (same tag name) are treated as 'replaced'.\n * This means that their mappings can be updated so the new view elements are mapped to the existing DOM elements.\n * Thanks to that these elements do not need to be re-rendered completely.\n *\n * @param viewElement The view element whose children mappings will be updated.\n */\n _updateChildrenMappings(viewElement) {\n const domElement = this.domConverter.mapViewToDom(viewElement);\n if (!domElement) {\n // If there is no `domElement` it means that it was already removed from DOM and there is no need to process it.\n return;\n }\n // Removing nodes from the DOM as we iterate can cause `actualDomChildren`\n // (which is a live-updating `NodeList`) to get out of sync with the\n // indices that we compute as we iterate over `actions`.\n // This would produce incorrect element mappings.\n //\n // Converting live list to an array to make the list static.\n const actualDomChildren = Array.from(this.domConverter.mapViewToDom(viewElement).childNodes);\n const expectedDomChildren = Array.from(this.domConverter.viewChildrenToDom(viewElement, { withChildren: false }));\n const diff = this._diffNodeLists(actualDomChildren, expectedDomChildren);\n const actions = this._findUpdateActions(diff, actualDomChildren, expectedDomChildren, areSimilarElements);\n if (actions.indexOf('update') !== -1) {\n const counter = { equal: 0, insert: 0, delete: 0 };\n for (const action of actions) {\n if (action === 'update') {\n const insertIndex = counter.equal + counter.insert;\n const deleteIndex = counter.equal + counter.delete;\n const viewChild = viewElement.getChild(insertIndex);\n // UIElement and RawElement are special cases. Their children are not stored in a view (#799)\n // so we cannot use them with replacing flow (since they use view children during rendering\n // which will always result in rendering empty elements).\n if (viewChild && !(viewChild.is('uiElement') || viewChild.is('rawElement'))) {\n this._updateElementMappings(viewChild, actualDomChildren[deleteIndex]);\n }\n remove(expectedDomChildren[insertIndex]);\n counter.equal++;\n }\n else {\n counter[action]++;\n }\n }\n }\n }\n /**\n * Updates mappings of a given view element.\n *\n * @param viewElement The view element whose mappings will be updated.\n * @param domElement The DOM element representing the given view element.\n */\n _updateElementMappings(viewElement, domElement) {\n // Remap 'DomConverter' bindings.\n this.domConverter.unbindDomElement(domElement);\n this.domConverter.bindElements(domElement, viewElement);\n // View element may have children which needs to be updated, but are not marked, mark them to update.\n this.markedChildren.add(viewElement);\n // Because we replace new view element mapping with the existing one, the corresponding DOM element\n // will not be rerendered. The new view element may have different attributes than the previous one.\n // Since its corresponding DOM element will not be rerendered, new attributes will not be added\n // to the DOM, so we need to mark it here to make sure its attributes gets updated. See #1427 for more\n // detailed case study.\n // Also there are cases where replaced element is removed from the view structure and then has\n // its attributes changed or removed. In such cases the element will not be present in `markedAttributes`\n // and also may be the same (`element.isSimilar()`) as the reused element not having its attributes updated.\n // To prevent such situations we always mark reused element to have its attributes rerenderd (#1560).\n this.markedAttributes.add(viewElement);\n }\n /**\n * Gets the position of the inline filler based on the current selection.\n * Here, we assume that we know that the filler is needed and\n * {@link #_isSelectionInInlineFiller is at the selection position}, and, since it is needed,\n * it is somewhere at the selection position.\n *\n * Note: The filler position cannot be restored based on the filler's DOM text node, because\n * when this method is called (before rendering), the bindings will often be broken. View-to-DOM\n * bindings are only dependable after rendering.\n */\n _getInlineFillerPosition() {\n const firstPos = this.selection.getFirstPosition();\n if (firstPos.parent.is('$text')) {\n return ViewPosition._createBefore(firstPos.parent);\n }\n else {\n return firstPos;\n }\n }\n /**\n * Returns `true` if the selection has not left the inline filler's text node.\n * If it is `true`, it means that the filler had been added for a reason and the selection did not\n * leave the filler's text node. For example, the user can be in the middle of a composition so it should not be touched.\n *\n * @returns `true` if the inline filler and selection are in the same place.\n */\n _isSelectionInInlineFiller() {\n if (this.selection.rangeCount != 1 || !this.selection.isCollapsed) {\n return false;\n }\n // Note, we can't check if selection's position equals position of the\n // this._inlineFiller node, because of #663. We may not be able to calculate\n // the filler's position in the view at this stage.\n // Instead, we check it the other way – whether selection is anchored in\n // that text node or next to it.\n // Possible options are:\n // \"FILLER{}\"\n // \"FILLERadded-text{}\"\n const selectionPosition = this.selection.getFirstPosition();\n const position = this.domConverter.viewPositionToDom(selectionPosition);\n if (position && isText(position.parent) && startsWithFiller(position.parent)) {\n return true;\n }\n return false;\n }\n /**\n * Removes the inline filler.\n */\n _removeInlineFiller() {\n const domFillerNode = this._inlineFiller;\n // Something weird happened and the stored node doesn't contain the filler's text.\n if (!startsWithFiller(domFillerNode)) {\n /**\n * The inline filler node was lost. Most likely, something overwrote the filler text node\n * in the DOM.\n *\n * @error view-renderer-filler-was-lost\n */\n throw new CKEditorError('view-renderer-filler-was-lost', this);\n }\n if (isInlineFiller(domFillerNode)) {\n domFillerNode.remove();\n }\n else {\n domFillerNode.data = domFillerNode.data.substr(INLINE_FILLER_LENGTH);\n }\n this._inlineFiller = null;\n }\n /**\n * Checks if the inline {@link module:engine/view/filler filler} should be added.\n *\n * @returns `true` if the inline filler should be added.\n */\n _needsInlineFillerAtSelection() {\n if (this.selection.rangeCount != 1 || !this.selection.isCollapsed) {\n return false;\n }\n const selectionPosition = this.selection.getFirstPosition();\n const selectionParent = selectionPosition.parent;\n const selectionOffset = selectionPosition.offset;\n // If there is no DOM root we do not care about fillers.\n if (!this.domConverter.mapViewToDom(selectionParent.root)) {\n return false;\n }\n if (!(selectionParent.is('element'))) {\n return false;\n }\n // Prevent adding inline filler inside elements with contenteditable=false.\n // https://github.com/ckeditor/ckeditor5-engine/issues/1170\n if (!isEditable(selectionParent)) {\n return false;\n }\n // We have block filler, we do not need inline one.\n if (selectionOffset === selectionParent.getFillerOffset()) {\n return false;\n }\n const nodeBefore = selectionPosition.nodeBefore;\n const nodeAfter = selectionPosition.nodeAfter;\n if (nodeBefore instanceof ViewText || nodeAfter instanceof ViewText) {\n return false;\n }\n // Do not use inline filler while typing outside inline elements on Android.\n // The deleteContentBackward would remove part of the inline filler instead of removing last letter in a link.\n if (env.isAndroid && (nodeBefore || nodeAfter)) {\n return false;\n }\n return true;\n }\n /**\n * Checks if text needs to be updated and possibly updates it.\n *\n * @param viewText View text to update.\n * @param options.inlineFillerPosition The position where the inline filler should be rendered.\n */\n _updateText(viewText, options) {\n const domText = this.domConverter.findCorrespondingDomText(viewText);\n const newDomText = this.domConverter.viewToDom(viewText);\n let expectedText = newDomText.data;\n const filler = options.inlineFillerPosition;\n if (filler && filler.parent == viewText.parent && filler.offset == viewText.index) {\n expectedText = INLINE_FILLER + expectedText;\n }\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.group( '%c[Renderer]%c Update text',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', ''\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n updateTextNode(domText, expectedText);\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.groupEnd();\n // @if CK_DEBUG_TYPING // }\n }\n /**\n * Checks if attribute list needs to be updated and possibly updates it.\n *\n * @param viewElement The view element to update.\n */\n _updateAttrs(viewElement) {\n const domElement = this.domConverter.mapViewToDom(viewElement);\n if (!domElement) {\n // If there is no `domElement` it means that 'viewElement' is outdated as its mapping was updated\n // in 'this._updateChildrenMappings()'. There is no need to process it as new view element which\n // replaced old 'viewElement' mapping was also added to 'this.markedAttributes'\n // in 'this._updateChildrenMappings()' so it will be processed separately.\n return;\n }\n const domAttrKeys = Array.from(domElement.attributes).map(attr => attr.name);\n const viewAttrKeys = viewElement.getAttributeKeys();\n // Add or overwrite attributes.\n for (const key of viewAttrKeys) {\n this.domConverter.setDomElementAttribute(domElement, key, viewElement.getAttribute(key), viewElement);\n }\n // Remove from DOM attributes which do not exists in the view.\n for (const key of domAttrKeys) {\n // All other attributes not present in the DOM should be removed.\n if (!viewElement.hasAttribute(key)) {\n this.domConverter.removeDomElementAttribute(domElement, key);\n }\n }\n }\n /**\n * Checks if elements child list needs to be updated and possibly updates it.\n *\n * Note that on Android, to reduce the risk of composition breaks, it tries to update data of an existing\n * child text nodes instead of replacing them completely.\n *\n * @param viewElement View element to update.\n * @param options.inlineFillerPosition The position where the inline filler should be rendered.\n */\n _updateChildren(viewElement, options) {\n const domElement = this.domConverter.mapViewToDom(viewElement);\n if (!domElement) {\n // If there is no `domElement` it means that it was already removed from DOM.\n // There is no need to process it. It will be processed when re-inserted.\n return;\n }\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.group( '%c[Renderer]%c Update children',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', ''\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n // IME on Android inserts a new text node while typing after a link\n // instead of updating an existing text node that follows the link.\n // We must normalize those text nodes so the diff won't get confused.\n // https://github.com/ckeditor/ckeditor5/issues/12574.\n if (env.isAndroid) {\n let previousDomNode = null;\n for (const domNode of Array.from(domElement.childNodes)) {\n if (previousDomNode && isText(previousDomNode) && isText(domNode)) {\n domElement.normalize();\n break;\n }\n previousDomNode = domNode;\n }\n }\n const inlineFillerPosition = options.inlineFillerPosition;\n const actualDomChildren = domElement.childNodes;\n const expectedDomChildren = Array.from(this.domConverter.viewChildrenToDom(viewElement, { bind: true }));\n // Inline filler element has to be created as it is present in the DOM, but not in the view. It is required\n // during diffing so text nodes could be compared correctly and also during rendering to maintain\n // proper order and indexes while updating the DOM.\n if (inlineFillerPosition && inlineFillerPosition.parent === viewElement) {\n addInlineFiller(domElement.ownerDocument, expectedDomChildren, inlineFillerPosition.offset);\n }\n const diff = this._diffNodeLists(actualDomChildren, expectedDomChildren);\n // We need to make sure that we update the existing text node and not replace it with another one.\n // The composition and different \"language\" browser extensions are fragile to text node being completely replaced.\n const actions = this._findUpdateActions(diff, actualDomChildren, expectedDomChildren, areTextNodes);\n let i = 0;\n const nodesToUnbind = new Set();\n // Handle deletions first.\n // This is to prevent a situation where an element that already exists in `actualDomChildren` is inserted at a different\n // index in `actualDomChildren`. Since `actualDomChildren` is a `NodeList`, this works like move, not like an insert,\n // and it disrupts the whole algorithm. See https://github.com/ckeditor/ckeditor5/issues/6367.\n //\n // It doesn't matter in what order we remove or add nodes, as long as we remove and add correct nodes at correct indexes.\n for (const action of actions) {\n if (action === 'delete') {\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.info( '%c[Renderer]%c Remove node',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', '', actualDomChildren[ i ]\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n nodesToUnbind.add(actualDomChildren[i]);\n remove(actualDomChildren[i]);\n }\n else if (action === 'equal' || action === 'update') {\n i++;\n }\n }\n i = 0;\n for (const action of actions) {\n if (action === 'insert') {\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.info( '%c[Renderer]%c Insert node',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', '', expectedDomChildren[ i ]\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n insertAt(domElement, i, expectedDomChildren[i]);\n i++;\n }\n // Update the existing text node data. Note that replace action is generated only for Android for now.\n else if (action === 'update') {\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.group( '%c[Renderer]%c Update text node',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', ''\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n updateTextNode(actualDomChildren[i], expectedDomChildren[i].data);\n i++;\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.groupEnd();\n // @if CK_DEBUG_TYPING // }\n }\n else if (action === 'equal') {\n // Force updating text nodes inside elements which did not change and do not need to be re-rendered (#1125).\n // Do it here (not in the loop above) because only after insertions the `i` index is correct.\n this._markDescendantTextToSync(this.domConverter.domToView(expectedDomChildren[i]));\n i++;\n }\n }\n // Unbind removed nodes. When node does not have a parent it means that it was removed from DOM tree during\n // comparison with the expected DOM. We don't need to check child nodes, because if child node was reinserted,\n // it was moved to DOM tree out of the removed node.\n for (const node of nodesToUnbind) {\n if (!node.parentNode) {\n this.domConverter.unbindDomElement(node);\n }\n }\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.groupEnd();\n // @if CK_DEBUG_TYPING // }\n }\n /**\n * Shorthand for diffing two arrays or node lists of DOM nodes.\n *\n * @param actualDomChildren Actual DOM children\n * @param expectedDomChildren Expected DOM children.\n * @returns The list of actions based on the {@link module:utils/diff~diff} function.\n */\n _diffNodeLists(actualDomChildren, expectedDomChildren) {\n actualDomChildren = filterOutFakeSelectionContainer(actualDomChildren, this._fakeSelectionContainer);\n return diff(actualDomChildren, expectedDomChildren, sameNodes.bind(null, this.domConverter));\n }\n /**\n * Finds DOM nodes that were replaced with the similar nodes (same tag name) in the view. All nodes are compared\n * within one `insert`/`delete` action group, for example:\n *\n * ```\n * Actual DOM:\t\tFooBarBazBax
\n * Expected DOM:\tBar123Baz456
\n * Input actions:\t[ insert, insert, delete, delete, equal, insert, delete ]\n * Output actions:\t[ insert, replace, delete, equal, replace ]\n * ```\n *\n * @param actions Actions array which is a result of the {@link module:utils/diff~diff} function.\n * @param actualDom Actual DOM children\n * @param expectedDom Expected DOM children.\n * @param comparator A comparator function that should return `true` if the given node should be reused\n * (either by the update of a text node data or an element children list for similar elements).\n * @returns Actions array modified with the `update` actions.\n */\n _findUpdateActions(actions, actualDom, expectedDom, comparator) {\n // If there is no both 'insert' and 'delete' actions, no need to check for replaced elements.\n if (actions.indexOf('insert') === -1 || actions.indexOf('delete') === -1) {\n return actions;\n }\n let newActions = [];\n let actualSlice = [];\n let expectedSlice = [];\n const counter = { equal: 0, insert: 0, delete: 0 };\n for (const action of actions) {\n if (action === 'insert') {\n expectedSlice.push(expectedDom[counter.equal + counter.insert]);\n }\n else if (action === 'delete') {\n actualSlice.push(actualDom[counter.equal + counter.delete]);\n }\n else { // equal\n newActions = newActions.concat(diff(actualSlice, expectedSlice, comparator)\n .map(action => action === 'equal' ? 'update' : action));\n newActions.push('equal');\n // Reset stored elements on 'equal'.\n actualSlice = [];\n expectedSlice = [];\n }\n counter[action]++;\n }\n return newActions.concat(diff(actualSlice, expectedSlice, comparator)\n .map(action => action === 'equal' ? 'update' : action));\n }\n /**\n * Marks text nodes to be synchronized.\n *\n * If a text node is passed, it will be marked. If an element is passed, all descendant text nodes inside it will be marked.\n *\n * @param viewNode View node to sync.\n */\n _markDescendantTextToSync(viewNode) {\n if (!viewNode) {\n return;\n }\n if (viewNode.is('$text')) {\n this.markedTexts.add(viewNode);\n }\n else if (viewNode.is('element')) {\n for (const child of viewNode.getChildren()) {\n this._markDescendantTextToSync(child);\n }\n }\n }\n /**\n * Checks if the selection needs to be updated and possibly updates it.\n */\n _updateSelection() {\n // Block updating DOM selection in (non-Android) Blink while the user is selecting to prevent accidental selection collapsing.\n // Note: Structural changes in DOM must trigger selection rendering, though. Nodes the selection was anchored\n // to, may disappear in DOM which would break the selection (e.g. in real-time collaboration scenarios).\n // https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723\n if (env.isBlink && !env.isAndroid && this.isSelecting && !this.markedChildren.size) {\n return;\n }\n // If there is no selection - remove DOM and fake selections.\n if (this.selection.rangeCount === 0) {\n this._removeDomSelection();\n this._removeFakeSelection();\n return;\n }\n const domRoot = this.domConverter.mapViewToDom(this.selection.editableElement);\n // Do nothing if there is no focus, or there is no DOM element corresponding to selection's editable element.\n if (!this.isFocused || !domRoot) {\n return;\n }\n // Render fake selection - create the fake selection container (if needed) and move DOM selection to it.\n if (this.selection.isFake) {\n this._updateFakeSelection(domRoot);\n }\n // There was a fake selection so remove it and update the DOM selection.\n // This is especially important on Android because otherwise IME will try to compose over the fake selection container.\n else if (this._fakeSelectionContainer && this._fakeSelectionContainer.isConnected) {\n this._removeFakeSelection();\n this._updateDomSelection(domRoot);\n }\n // Update the DOM selection in case of a plain selection change (no fake selection is involved).\n // On non-Android the whole rendering is disabled in composition mode (including DOM selection update),\n // but updating DOM selection should be also disabled on Android if in the middle of the composition\n // (to not interrupt it).\n else if (!(this.isComposing && env.isAndroid)) {\n this._updateDomSelection(domRoot);\n }\n }\n /**\n * Updates the fake selection.\n *\n * @param domRoot A valid DOM root where the fake selection container should be added.\n */\n _updateFakeSelection(domRoot) {\n const domDocument = domRoot.ownerDocument;\n if (!this._fakeSelectionContainer) {\n this._fakeSelectionContainer = createFakeSelectionContainer(domDocument);\n }\n const container = this._fakeSelectionContainer;\n // Bind fake selection container with the current selection *position*.\n this.domConverter.bindFakeSelection(container, this.selection);\n if (!this._fakeSelectionNeedsUpdate(domRoot)) {\n return;\n }\n if (!container.parentElement || container.parentElement != domRoot) {\n domRoot.appendChild(container);\n }\n container.textContent = this.selection.fakeSelectionLabel || '\\u00A0';\n const domSelection = domDocument.getSelection();\n const domRange = domDocument.createRange();\n domSelection.removeAllRanges();\n domRange.selectNodeContents(container);\n domSelection.addRange(domRange);\n }\n /**\n * Updates the DOM selection.\n *\n * @param domRoot A valid DOM root where the DOM selection should be rendered.\n */\n _updateDomSelection(domRoot) {\n const domSelection = domRoot.ownerDocument.defaultView.getSelection();\n // Let's check whether DOM selection needs updating at all.\n if (!this._domSelectionNeedsUpdate(domSelection)) {\n return;\n }\n // Multi-range selection is not available in most browsers, and, at least in Chrome, trying to\n // set such selection, that is not continuous, throws an error. Because of that, we will just use anchor\n // and focus of view selection.\n // Since we are not supporting multi-range selection, we also do not need to check if proper editable is\n // selected. If there is any editable selected, it is okay (editable is taken from selection anchor).\n const anchor = this.domConverter.viewPositionToDom(this.selection.anchor);\n const focus = this.domConverter.viewPositionToDom(this.selection.focus);\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.info( '%c[Renderer]%c Update DOM selection:',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', '', anchor, focus\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n domSelection.collapse(anchor.parent, anchor.offset);\n domSelection.extend(focus.parent, focus.offset);\n // Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).\n if (env.isGecko) {\n fixGeckoSelectionAfterBr(focus, domSelection);\n }\n }\n /**\n * Checks whether a given DOM selection needs to be updated.\n *\n * @param domSelection The DOM selection to check.\n */\n _domSelectionNeedsUpdate(domSelection) {\n if (!this.domConverter.isDomSelectionCorrect(domSelection)) {\n // Current DOM selection is in incorrect position. We need to update it.\n return true;\n }\n const oldViewSelection = domSelection && this.domConverter.domSelectionToView(domSelection);\n if (oldViewSelection && this.selection.isEqual(oldViewSelection)) {\n return false;\n }\n // If selection is not collapsed, it does not need to be updated if it is similar.\n if (!this.selection.isCollapsed && this.selection.isSimilar(oldViewSelection)) {\n // Selection did not changed and is correct, do not update.\n return false;\n }\n // Selections are not similar.\n return true;\n }\n /**\n * Checks whether the fake selection needs to be updated.\n *\n * @param domRoot A valid DOM root where a new fake selection container should be added.\n */\n _fakeSelectionNeedsUpdate(domRoot) {\n const container = this._fakeSelectionContainer;\n const domSelection = domRoot.ownerDocument.getSelection();\n // Fake selection needs to be updated if there's no fake selection container, or the container currently sits\n // in a different root.\n if (!container || container.parentElement !== domRoot) {\n return true;\n }\n // Make sure that the selection actually is within the fake selection.\n if (domSelection.anchorNode !== container && !container.contains(domSelection.anchorNode)) {\n return true;\n }\n return container.textContent !== this.selection.fakeSelectionLabel;\n }\n /**\n * Removes the DOM selection.\n */\n _removeDomSelection() {\n for (const doc of this.domDocuments) {\n const domSelection = doc.getSelection();\n if (domSelection.rangeCount) {\n const activeDomElement = doc.activeElement;\n const viewElement = this.domConverter.mapDomToView(activeDomElement);\n if (activeDomElement && viewElement) {\n domSelection.removeAllRanges();\n }\n }\n }\n }\n /**\n * Removes the fake selection.\n */\n _removeFakeSelection() {\n const container = this._fakeSelectionContainer;\n if (container) {\n container.remove();\n }\n }\n /**\n * Checks if focus needs to be updated and possibly updates it.\n */\n _updateFocus() {\n if (this.isFocused) {\n const editable = this.selection.editableElement;\n if (editable) {\n this.domConverter.focus(editable);\n }\n }\n }\n}\n/**\n * Checks if provided element is editable.\n */\nfunction isEditable(element) {\n if (element.getAttribute('contenteditable') == 'false') {\n return false;\n }\n const parent = element.findAncestor(element => element.hasAttribute('contenteditable'));\n return !parent || parent.getAttribute('contenteditable') == 'true';\n}\n/**\n * Adds inline filler at a given position.\n *\n * The position can be given as an array of DOM nodes and an offset in that array,\n * or a DOM parent element and an offset in that element.\n *\n * @returns The DOM text node that contains an inline filler.\n */\nfunction addInlineFiller(domDocument, domParentOrArray, offset) {\n const childNodes = domParentOrArray instanceof Array ? domParentOrArray : domParentOrArray.childNodes;\n const nodeAfterFiller = childNodes[offset];\n if (isText(nodeAfterFiller)) {\n nodeAfterFiller.data = INLINE_FILLER + nodeAfterFiller.data;\n return nodeAfterFiller;\n }\n else {\n const fillerNode = domDocument.createTextNode(INLINE_FILLER);\n if (Array.isArray(domParentOrArray)) {\n childNodes.splice(offset, 0, fillerNode);\n }\n else {\n insertAt(domParentOrArray, offset, fillerNode);\n }\n return fillerNode;\n }\n}\n/**\n * Whether two DOM nodes should be considered as similar.\n * Nodes are considered similar if they have the same tag name.\n */\nfunction areSimilarElements(node1, node2) {\n return isNode(node1) && isNode(node2) &&\n !isText(node1) && !isText(node2) &&\n !isComment(node1) && !isComment(node2) &&\n node1.tagName.toLowerCase() === node2.tagName.toLowerCase();\n}\n/**\n * Whether two DOM nodes are text nodes.\n */\nfunction areTextNodes(node1, node2) {\n return isNode(node1) && isNode(node2) &&\n isText(node1) && isText(node2);\n}\n/**\n * Whether two dom nodes should be considered as the same.\n * Two nodes which are considered the same are:\n *\n * * Text nodes with the same text.\n * * Element nodes represented by the same object.\n * * Two block filler elements.\n *\n * @param blockFillerMode Block filler mode, see {@link module:engine/view/domconverter~DomConverter#blockFillerMode}.\n */\nfunction sameNodes(domConverter, actualDomChild, expectedDomChild) {\n // Elements.\n if (actualDomChild === expectedDomChild) {\n return true;\n }\n // Texts.\n else if (isText(actualDomChild) && isText(expectedDomChild)) {\n return actualDomChild.data === expectedDomChild.data;\n }\n // Block fillers.\n else if (domConverter.isBlockFiller(actualDomChild) &&\n domConverter.isBlockFiller(expectedDomChild)) {\n return true;\n }\n // Not matching types.\n return false;\n}\n/**\n * The following is a Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).\n * When the native DOM selection is at the end of the block and preceded by
e.g.\n *\n * ```html\n * foo
[]
\n * ```\n *\n * which happens a lot when using the soft line break, the browser fails to (visually) move the\n * caret to the new line. A quick fix is as simple as force–refreshing the selection with the same range.\n */\nfunction fixGeckoSelectionAfterBr(focus, domSelection) {\n const parent = focus.parent;\n // This fix works only when the focus point is at the very end of an element.\n // There is no point in running it in cases unrelated to the browser bug.\n if (parent.nodeType != Node.ELEMENT_NODE || focus.offset != parent.childNodes.length - 1) {\n return;\n }\n const childAtOffset = parent.childNodes[focus.offset];\n // To stay on the safe side, the fix being as specific as possible, it targets only the\n // selection which is at the very end of the element and preceded by
.\n if (childAtOffset && childAtOffset.tagName == 'BR') {\n domSelection.addRange(domSelection.getRangeAt(0));\n }\n}\nfunction filterOutFakeSelectionContainer(domChildList, fakeSelectionContainer) {\n const childList = Array.from(domChildList);\n if (childList.length == 0 || !fakeSelectionContainer) {\n return childList;\n }\n const last = childList[childList.length - 1];\n if (last == fakeSelectionContainer) {\n childList.pop();\n }\n return childList;\n}\n/**\n * Creates a fake selection container for a given document.\n */\nfunction createFakeSelectionContainer(domDocument) {\n const container = domDocument.createElement('div');\n container.className = 'ck-fake-selection-container';\n Object.assign(container.style, {\n position: 'fixed',\n top: 0,\n left: '-9999px',\n // See https://github.com/ckeditor/ckeditor5/issues/752.\n width: '42px'\n });\n // Fill it with a text node so we can update it later.\n container.textContent = '\\u00A0';\n return container;\n}\n/**\n * Checks if text needs to be updated and possibly updates it by removing and inserting only parts\n * of the data from the existing text node to reduce impact on the IME composition.\n *\n * @param domText DOM text node to update.\n * @param expectedText The expected data of a text node.\n */\nfunction updateTextNode(domText, expectedText) {\n const actualText = domText.data;\n if (actualText == expectedText) {\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.info( '%c[Renderer]%c Text node does not need update:',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', '',\n // @if CK_DEBUG_TYPING // \t\t`\"${ domText.data }\" (${ domText.data.length })`\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n return;\n }\n // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {\n // @if CK_DEBUG_TYPING // \tconsole.info( '%c[Renderer]%c Update text node:',\n // @if CK_DEBUG_TYPING // \t\t'color: green;font-weight: bold', '',\n // @if CK_DEBUG_TYPING // \t\t`\"${ domText.data }\" (${ domText.data.length }) -> \"${ expectedText }\" (${ expectedText.length })`\n // @if CK_DEBUG_TYPING // \t);\n // @if CK_DEBUG_TYPING // }\n const actions = fastDiff(actualText, expectedText);\n for (const action of actions) {\n if (action.type === 'insert') {\n domText.insertData(action.index, action.values.join(''));\n }\n else { // 'delete'\n domText.deleteData(action.index, action.howMany);\n }\n }\n}\n","/**\n * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n/**\n * @module engine/view/domconverter\n */\n/* globals Node, NodeFilter, DOMParser, Text */\nimport ViewText from './text';\nimport ViewElement from './element';\nimport ViewUIElement from './uielement';\nimport ViewPosition from './position';\nimport ViewRange from './range';\nimport ViewSelection from './selection';\nimport ViewDocumentFragment from './documentfragment';\nimport ViewTreeWalker from './treewalker';\nimport { default as Matcher } from './matcher';\nimport { BR_FILLER, INLINE_FILLER_LENGTH, NBSP_FILLER, MARKED_NBSP_FILLER, getDataWithoutFiller, isInlineFiller, startsWithFiller } from './filler';\nimport { global, logWarning, indexOf, getAncestors, isText, isComment, isValidAttributeName, first } from '@ckeditor/ckeditor5-utils';\nconst BR_FILLER_REF = BR_FILLER(global.document); // eslint-disable-line new-cap\nconst NBSP_FILLER_REF = NBSP_FILLER(global.document); // eslint-disable-line new-cap\nconst MARKED_NBSP_FILLER_REF = MARKED_NBSP_FILLER(global.document); // eslint-disable-line new-cap\nconst UNSAFE_ATTRIBUTE_NAME_PREFIX = 'data-ck-unsafe-attribute-';\nconst UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';\n/**\n * `DomConverter` is a set of tools to do transformations between DOM nodes and view nodes. It also handles\n * {@link module:engine/view/domconverter~DomConverter#bindElements bindings} between these nodes.\n *\n * An instance of the DOM converter is available under\n * {@link module:engine/view/view~View#domConverter `editor.editing.view.domConverter`}.\n *\n * The DOM converter does not check which nodes should be rendered (use {@link module:engine/view/renderer~Renderer}), does not keep the\n * state of a tree nor keeps the synchronization between the tree view and the DOM tree (use {@link module:engine/view/document~Document}).\n *\n * The DOM converter keeps DOM elements to view element bindings, so when the converter gets destroyed, the bindings are lost.\n * Two converters will keep separate binding maps, so one tree view can be bound with two DOM trees.\n */\nexport default class DomConverter {\n /**\n * Creates a DOM converter.\n *\n * @param document The view document instance.\n * @param options An object with configuration options.\n * @param options.blockFillerMode The type of the block filler to use.\n * Default value depends on the options.renderingMode:\n * 'nbsp' when options.renderingMode == 'data',\n * 'br' when options.renderingMode == 'editing'.\n * @param options.renderingMode Whether to leave the View-to-DOM conversion result unchanged\n * or improve editing experience by filtering out interactive data.\n */\n constructor(document, { blockFillerMode, renderingMode = 'editing' } = {}) {\n /**\n * The DOM-to-view mapping.\n */\n this._domToViewMapping = new WeakMap();\n /**\n * The view-to-DOM mapping.\n */\n this._viewToDomMapping = new WeakMap();\n /**\n * Holds the mapping between fake selection containers and corresponding view selections.\n */\n this._fakeSelectionMapping = new WeakMap();\n /**\n * Matcher for view elements whose content should be treated as raw data\n * and not processed during the conversion from DOM nodes to view elements.\n */\n this._rawContentElementMatcher = new Matcher();\n /**\n * A set of encountered raw content DOM nodes. It is used for preventing left trimming of the following text node.\n */\n this._encounteredRawContentDomNodes = new WeakSet();\n this.document = document;\n this.renderingMode = renderingMode;\n this.blockFillerMode = blockFillerMode || (renderingMode === 'editing' ? 'br' : 'nbsp');\n this.preElements = ['pre'];\n this.blockElements = [\n 'address', 'article', 'aside', 'blockquote', 'caption', 'center', 'dd', 'details', 'dir', 'div',\n 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header',\n 'hgroup', 'legend', 'li', 'main', 'menu', 'nav', 'ol', 'p', 'pre', 'section', 'summary', 'table', 'tbody',\n 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'\n ];\n this.inlineObjectElements = [\n 'object', 'iframe', 'input', 'button', 'textarea', 'select', 'option', 'video', 'embed', 'audio', 'img', 'canvas'\n ];\n this.unsafeElements = ['script', 'style'];\n this._domDocument = this.renderingMode === 'editing' ? global.document : global.document.implementation.createHTMLDocument('');\n }\n /**\n * Binds a given DOM element that represents fake selection to a **position** of a\n * {@link module:engine/view/documentselection~DocumentSelection document selection}.\n * Document selection copy is stored and can be retrieved by the\n * {@link module:engine/view/domconverter~DomConverter#fakeSelectionToView} method.\n */\n bindFakeSelection(domElement, viewDocumentSelection) {\n this._fakeSelectionMapping.set(domElement, new ViewSelection(viewDocumentSelection));\n }\n /**\n * Returns a {@link module:engine/view/selection~Selection view selection} instance corresponding to a given\n * DOM element that represents fake selection. Returns `undefined` if binding to the given DOM element does not exist.\n */\n fakeSelectionToView(domElement) {\n return this._fakeSelectionMapping.get(domElement);\n }\n /**\n * Binds DOM and view elements, so it will be possible to get corresponding elements using\n * {@link module:engine/view/domconverter~DomConverter#mapDomToView} and\n * {@link module:engine/view/domconverter~DomConverter#mapViewToDom}.\n *\n * @param domElement The DOM element to bind.\n * @param viewElement The view element to bind.\n */\n bindElements(domElement, viewElement) {\n this._domToViewMapping.set(domElement, viewElement);\n this._viewToDomMapping.set(viewElement, domElement);\n }\n /**\n * Unbinds a given DOM element from the view element it was bound to. Unbinding is deep, meaning that all children of\n * the DOM element will be unbound too.\n *\n * @param domElement The DOM element to unbind.\n */\n unbindDomElement(domElement) {\n const viewElement = this._domToViewMapping.get(domElement);\n if (viewElement) {\n this._domToViewMapping.delete(domElement);\n this._viewToDomMapping.delete(viewElement);\n for (const child of Array.from(domElement.children)) {\n this.unbindDomElement(child);\n }\n }\n }\n /**\n * Binds DOM and view document fragments, so it will be possible to get corresponding document fragments using\n * {@link module:engine/view/domconverter~DomConverter#mapDomToView} and\n * {@link module:engine/view/domconverter~DomConverter#mapViewToDom}.\n *\n * @param domFragment The DOM document fragment to bind.\n * @param viewFragment The view document fragment to bind.\n */\n bindDocumentFragments(domFragment, viewFragment) {\n this._domToViewMapping.set(domFragment, viewFragment);\n this._viewToDomMapping.set(viewFragment, domFragment);\n }\n /**\n * Decides whether a given pair of attribute key and value should be passed further down the pipeline.\n *\n * @param elementName Element name in lower case.\n */\n shouldRenderAttribute(attributeKey, attributeValue, elementName) {\n if (this.renderingMode === 'data') {\n return true;\n }\n attributeKey = attributeKey.toLowerCase();\n if (attributeKey.startsWith('on')) {\n return false;\n }\n if (attributeKey === 'srcdoc' &&\n attributeValue.match(/\\bon\\S+\\s*=|javascript:|<\\s*\\/*script/i)) {\n return false;\n }\n if (elementName === 'img' &&\n (attributeKey === 'src' || attributeKey === 'srcset')) {\n return true;\n }\n if (elementName === 'source' && attributeKey === 'srcset') {\n return true;\n }\n if (attributeValue.match(/^\\s*(javascript:|data:(image\\/svg|text\\/x?html))/i)) {\n return false;\n }\n return true;\n }\n /**\n * Set `domElement`'s content using provided `html` argument. Apply necessary filtering for the editing pipeline.\n *\n * @param domElement DOM element that should have `html` set as its content.\n * @param html Textual representation of the HTML that will be set on `domElement`.\n */\n setContentOf(domElement, html) {\n // For data pipeline we pass the HTML as-is.\n if (this.renderingMode === 'data') {\n domElement.innerHTML = html;\n return;\n }\n const document = new DOMParser().parseFromString(html, 'text/html');\n const fragment = document.createDocumentFragment();\n const bodyChildNodes = document.body.childNodes;\n while (bodyChildNodes.length > 0) {\n fragment.appendChild(bodyChildNodes[0]);\n }\n const treeWalker = document.createTreeWalker(fragment, NodeFilter.SHOW_ELEMENT);\n const nodes = [];\n let currentNode;\n // eslint-disable-next-line no-cond-assign\n while (currentNode = treeWalker.nextNode()) {\n nodes.push(currentNode);\n }\n for (const currentNode of nodes) {\n // Go through nodes to remove those that are prohibited in editing pipeline.\n for (const attributeName of currentNode.getAttributeNames()) {\n this.setDomElementAttribute(currentNode, attributeName, currentNode.getAttribute(attributeName));\n }\n const elementName = currentNode.tagName.toLowerCase();\n // There are certain nodes, that should be renamed to in editing pipeline.\n if (this._shouldRenameElement(elementName)) {\n _logUnsafeElement(elementName);\n currentNode.replaceWith(this._createReplacementDomElement(elementName, currentNode));\n }\n }\n // Empty the target element.\n while (domElement.firstChild) {\n domElement.firstChild.remove();\n }\n domElement.append(fragment);\n }\n /**\n * Converts the view to the DOM. For all text nodes, not bound elements and document fragments new items will\n * be created. For bound elements and document fragments the method will return corresponding items.\n *\n * @param viewNode View node or document fragment to transform.\n * @param options Conversion options.\n * @param options.bind Determines whether new elements will be bound.\n * @param options.withChildren If `false`, node's and document fragment's children will not be converted.\n * @returns Converted node or DocumentFragment.\n */\n viewToDom(viewNode, options = {}) {\n if (viewNode.is('$text')) {\n const textData = this._processDataFromViewText(viewNode);\n return this._domDocument.createTextNode(textData);\n }\n else {\n if (this.mapViewToDom(viewNode)) {\n return this.mapViewToDom(viewNode);\n }\n let domElement;\n if (viewNode.is('documentFragment')) {\n // Create DOM document fragment.\n domElement = this._domDocument.createDocumentFragment();\n if (options.bind) {\n this.bindDocumentFragments(domElement, viewNode);\n }\n }\n else if (viewNode.is('uiElement')) {\n if (viewNode.name === '$comment') {\n domElement = this._domDocument.createComment(viewNode.getCustomProperty('$rawContent'));\n }\n else {\n // UIElement has its own render() method (see #799).\n domElement = viewNode.render(this._domDocument, this);\n }\n if (options.bind) {\n this.bindElements(domElement, viewNode);\n }\n return domElement;\n }\n else {\n // Create DOM element.\n if (this._shouldRenameElement(viewNode.name)) {\n _logUnsafeElement(viewNode.name);\n domElement = this._createReplacementDomElement(viewNode.name);\n }\n else if (viewNode.hasAttribute('xmlns')) {\n domElement = this._domDocument.createElementNS(viewNode.getAttribute('xmlns'), viewNode.name);\n }\n else {\n domElement = this._domDocument.createElement(viewNode.name);\n }\n // RawElement take care of their children in RawElement#render() method which can be customized\n // (see https://github.com/ckeditor/ckeditor5/issues/4469).\n if (viewNode.is('rawElement')) {\n viewNode.render(domElement, this);\n }\n if (options.bind) {\n this.bindElements(domElement, viewNode);\n }\n // Copy element's attributes.\n for (const key of viewNode.getAttributeKeys()) {\n this.setDomElementAttribute(domElement, key, viewNode.getAttribute(key), viewNode);\n }\n }\n if (options.withChildren !== false) {\n for (const child of this.viewChildrenToDom(viewNode, options)) {\n domElement.appendChild(child);\n }\n }\n return domElement;\n }\n }\n /**\n * Sets the attribute on a DOM element.\n *\n * **Note**: To remove the attribute, use {@link #removeDomElementAttribute}.\n *\n * @param domElement The DOM element the attribute should be set on.\n * @param key The name of the attribute.\n * @param value The value of the attribute.\n * @param relatedViewElement The view element related to the `domElement` (if there is any).\n * It helps decide whether the attribute set is unsafe. For instance, view elements created via the\n * {@link module:engine/view/downcastwriter~DowncastWriter} methods can allow certain attributes that would normally be filtered out.\n */\n setDomElementAttribute(domElement, key, value, relatedViewElement) {\n const shouldRenderAttribute = this.shouldRenderAttribute(key, value, domElement.tagName.toLowerCase()) ||\n relatedViewElement && relatedViewElement.shouldRenderUnsafeAttribute(key);\n if (!shouldRenderAttribute) {\n logWarning('domconverter-unsafe-attribute-detected', { domElement, key, value });\n }\n if (!isValidAttributeName(key)) {\n /**\n * Invalid attribute name was ignored during rendering.\n *\n * @error domconverter-invalid-attribute-detected\n */\n logWarning('domconverter-invalid-attribute-detected', { domElement, key, value });\n return;\n }\n // The old value was safe but the new value is unsafe.\n if (domElement.hasAttribute(key) && !shouldRenderAttribute) {\n domElement.removeAttribute(key);\n }\n // The old value was unsafe (but prefixed) but the new value will be safe (will be unprefixed).\n else if (domElement.hasAttribute(UNSAFE_ATTRIBUTE_NAME_PREFIX + key) && shouldRenderAttribute) {\n domElement.removeAttribute(UNSAFE_ATTRIBUTE_NAME_PREFIX + key);\n }\n // If the attribute should not be rendered, rename it (instead of removing) to give developers some idea of what\n // is going on (https://github.com/ckeditor/ckeditor5/issues/10801).\n domElement.setAttribute(shouldRenderAttribute ? key : UNSAFE_ATTRIBUTE_NAME_PREFIX + key, value);\n }\n /**\n * Removes an attribute from a DOM element.\n *\n * **Note**: To set the attribute, use {@link #setDomElementAttribute}.\n *\n * @param domElement The DOM element the attribute should be removed from.\n * @param key The name of the attribute.\n */\n removeDomElementAttribute(domElement, key) {\n // See #_createReplacementDomElement() to learn what this is.\n if (key == UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE) {\n return;\n }\n domElement.removeAttribute(key);\n // See setDomElementAttribute() to learn what this is.\n domElement.removeAttribute(UNSAFE_ATTRIBUTE_NAME_PREFIX + key);\n }\n /**\n * Converts children of the view element to DOM using the\n * {@link module:engine/view/domconverter~DomConverter#viewToDom} method.\n * Additionally, this method adds block {@link module:engine/view/filler filler} to the list of children, if needed.\n *\n * @param viewElement Parent view element.\n * @param options See {@link module:engine/view/domconverter~DomConverter#viewToDom} options parameter.\n * @returns DOM nodes.\n */\n *viewChildrenToDom(viewElement, options = {}) {\n const fillerPositionOffset = viewElement.getFillerOffset && viewElement.getFillerOffset();\n let offset = 0;\n for (const childView of viewElement.getChildren()) {\n if (fillerPositionOffset === offset) {\n yield this._getBlockFiller();\n }\n const transparentRendering = childView.is('element') &&\n !!childView.getCustomProperty('dataPipeline:transparentRendering') &&\n !first(childView.getAttributes());\n if (transparentRendering && this.renderingMode == 'data') {\n yield* this.viewChildrenToDom(childView, options);\n }\n else {\n if (transparentRendering) {\n /**\n * The `dataPipeline:transparentRendering` flag is supported only in the data pipeline.\n *\n * @error domconverter-transparent-rendering-unsupported-in-editing-pipeline\n */\n logWarning('domconverter-transparent-rendering-unsupported-in-editing-pipeline', { viewElement: childView });\n }\n yield this.viewToDom(childView, options);\n }\n offset++;\n }\n if (fillerPositionOffset === offset) {\n yield this._getBlockFiller();\n }\n }\n /**\n * Converts view {@link module:engine/view/range~Range} to DOM range.\n * Inline and block {@link module:engine/view/filler fillers} are handled during the conversion.\n *\n * @param viewRange View range.\n * @returns DOM range.\n */\n viewRangeToDom(viewRange) {\n const domStart = this.viewPositionToDom(viewRange.start);\n const domEnd = this.viewPositionToDom(viewRange.end);\n const domRange = this._domDocument.createRange();\n domRange.setStart(domStart.parent, domStart.offset);\n domRange.setEnd(domEnd.parent, domEnd.offset);\n return domRange;\n }\n /**\n * Converts view {@link module:engine/view/position~Position} to DOM parent and offset.\n *\n * Inline and block {@link module:engine/view/filler fillers} are handled during the conversion.\n * If the converted position is directly before inline filler it is moved inside the filler.\n *\n * @param viewPosition View position.\n * @returns DOM position or `null` if view position could not be converted to DOM.\n * DOM position has two properties:\n * * `parent` - DOM position parent.\n * * `offset` - DOM position offset.\n */\n viewPositionToDom(viewPosition) {\n const viewParent = viewPosition.parent;\n if (viewParent.is('$text')) {\n const domParent = this.findCorrespondingDomText(viewParent);\n if (!domParent) {\n // Position is in a view text node that has not been rendered to DOM yet.\n return null;\n }\n let offset = viewPosition.offset;\n if (startsWithFiller(domParent)) {\n offset += INLINE_FILLER_LENGTH;\n }\n return { parent: domParent, offset };\n }\n else {\n // viewParent is instance of ViewElement.\n let domParent, domBefore, domAfter;\n if (viewPosition.offset === 0) {\n domParent = this.mapViewToDom(viewParent);\n if (!domParent) {\n // Position is in a view element that has not been rendered to DOM yet.\n return null;\n }\n domAfter = domParent.childNodes[0];\n }\n else {\n const nodeBefore = viewPosition.nodeBefore;\n domBefore = nodeBefore.is('$text') ?\n this.findCorrespondingDomText(nodeBefore) :\n this.mapViewToDom(nodeBefore);\n if (!domBefore) {\n // Position is after a view element that has not been rendered to DOM yet.\n return null;\n }\n domParent = domBefore.parentNode;\n domAfter = domBefore.nextSibling;\n }\n // If there is an inline filler at position return position inside the filler. We should never return\n // the position before the inline filler.\n if (isText(domAfter) && startsWithFiller(domAfter)) {\n return { parent: domAfter, offset: INLINE_FILLER_LENGTH };\n }\n const offset = domBefore ? indexOf(domBefore) + 1 : 0;\n return { parent: domParent, offset };\n }\n }\n /**\n * Converts DOM to view. For all text nodes, not bound elements and document fragments new items will\n * be created. For bound elements and document fragments function will return corresponding items. For\n * {@link module:engine/view/filler fillers} `null` will be returned.\n * For all DOM elements rendered by {@link module:engine/view/uielement~UIElement} that UIElement will be returned.\n *\n * @param domNode DOM node or document fragment to transform.\n * @param options Conversion options.\n * @param options.bind Determines whether new elements will be bound. False by default.\n * @param options.withChildren If `true`, node's and document fragment's children will be converted too. True by default.\n * @param options.keepOriginalCase If `false`, node's tag name will be converted to lower case. False by default.\n * @param options.skipComments If `false`, comment nodes will be converted to `$comment`\n * {@link module:engine/view/uielement~UIElement view UI elements}. False by default.\n * @returns Converted node or document fragment or `null` if DOM node is a {@link module:engine/view/filler filler}\n * or the given node is an empty text node.\n */\n domToView(domNode, options = {}) {\n if (this.isBlockFiller(domNode)) {\n return null;\n }\n // When node is inside a UIElement or a RawElement return that parent as it's view representation.\n const hostElement = this.getHostViewElement(domNode);\n if (hostElement) {\n return hostElement;\n }\n if (isComment(domNode) && options.skipComments) {\n return null;\n }\n if (isText(domNode)) {\n if (isInlineFiller(domNode)) {\n return null;\n }\n else {\n const textData = this._processDataFromDomText(domNode);\n return textData === '' ? null : new ViewText(this.document, textData);\n }\n }\n else {\n if (this.mapDomToView(domNode)) {\n return this.mapDomToView(domNode);\n }\n let viewElement;\n if (this.isDocumentFragment(domNode)) {\n // Create view document fragment.\n viewElement = new ViewDocumentFragment(this.document);\n if (options.bind) {\n this.bindDocumentFragments(domNode, viewElement);\n }\n }\n else {\n // Create view element.\n viewElement = this._createViewElement(domNode, options);\n if (options.bind) {\n this.bindElements(domNode, viewElement);\n }\n // Copy element's attributes.\n const attrs = domNode.attributes;\n if (attrs) {\n for (let l = attrs.length, i = 0; i < l; i++) {\n viewElement._setAttribute(attrs[i].name, attrs[i].value);\n }\n }\n // Treat this element's content as a raw data if it was registered as such.\n // Comment node is also treated as an element with raw data.\n if (this._isViewElementWithRawContent(viewElement, options) || isComment(domNode)) {\n const rawContent = isComment(domNode) ? domNode.data : domNode.innerHTML;\n viewElement._setCustomProperty('$rawContent', rawContent);\n // Store a DOM node to prevent left trimming of the following text node.\n this._encounteredRawContentDomNodes.add(domNode);\n return viewElement;\n }\n }\n if (options.withChildren !== false) {\n for (const child of this.domChildrenToView(domNode, options)) {\n viewElement._appendChild(child);\n }\n }\n return viewElement;\n }\n }\n /**\n * Converts children of the DOM element to view nodes using\n * the {@link module:engine/view/domconverter~DomConverter#domToView} method.\n * Additionally this method omits block {@link module:engine/view/filler filler}, if it exists in the DOM parent.\n *\n * @param domElement Parent DOM element.\n * @param options See {@link module:engine/view/domconverter~DomConverter#domToView} options parameter.\n * @returns View nodes.\n */\n *domChildrenToView(domElement, options) {\n for (let i = 0; i < domElement.childNodes.length; i++) {\n const domChild = domElement.childNodes[i];\n const viewChild = this.domToView(domChild, options);\n if (viewChild !== null) {\n yield viewChild;\n }\n }\n }\n /**\n * Converts DOM selection to view {@link module:engine/view/selection~Selection}.\n * Ranges which cannot be converted will be omitted.\n *\n * @param domSelection DOM selection.\n * @returns View selection.\n */\n domSelectionToView(domSelection) {\n // DOM selection might be placed in fake selection container.\n // If container contains fake selection - return corresponding view selection.\n if (domSelection.rangeCount === 1) {\n let container = domSelection.getRangeAt(0).startContainer;\n // The DOM selection might be moved to the text node inside the fake selection container.\n if (isText(container)) {\n container = container.parentNode;\n }\n const viewSelection = this.fakeSelectionToView(container);\n if (viewSelection) {\n return viewSelection;\n }\n }\n const isBackward = this.isDomSelectionBackward(domSelection);\n const viewRanges = [];\n for (let i = 0; i < domSelection.rangeCount; i++) {\n // DOM Range have correct start and end, no matter what is the DOM Selection direction. So we don't have to fix anything.\n const domRange = domSelection.getRangeAt(i);\n const viewRange = this.domRangeToView(domRange);\n if (viewRange) {\n viewRanges.push(viewRange);\n }\n }\n return new ViewSelection(viewRanges, { backward: isBackward });\n }\n /**\n * Converts DOM Range to view {@link module:engine/view/range~Range}.\n * If the start or end position can not be converted `null` is returned.\n *\n * @param domRange DOM range.\n * @returns View range.\n */\n domRangeToView(domRange) {\n const viewStart = this.domPositionToView(domRange.startContainer, domRange.startOffset);\n const viewEnd = this.domPositionToView(domRange.endContainer, domRange.endOffset);\n if (viewStart && viewEnd) {\n return new ViewRange(viewStart, viewEnd);\n }\n return null;\n }\n /**\n * Converts DOM parent and offset to view {@link module:engine/view/position~Position}.\n *\n * If the position is inside a {@link module:engine/view/filler filler} which has no corresponding view node,\n * position of the filler will be converted and returned.\n *\n * If the position is inside DOM element rendered by {@link module:engine/view/uielement~UIElement}\n * that position will be converted to view position before that UIElement.\n *\n * If structures are too different and it is not possible to find corresponding position then `null` will be returned.\n *\n * @param domParent DOM position parent.\n * @param domOffset DOM position offset. You can skip it when converting the inline filler node.\n * @returns View position.\n */\n domPositionToView(domParent, domOffset = 0) {\n if (this.isBlockFiller(domParent)) {\n return this.domPositionToView(domParent.parentNode, indexOf(domParent));\n }\n // If position is somewhere inside UIElement or a RawElement - return position before that element.\n const viewElement = this.mapDomToView(domParent);\n if (viewElement && (viewElement.is('uiElement') || viewElement.is('rawElement'))) {\n return ViewPosition._createBefore(viewElement);\n }\n if (isText(domParent)) {\n if (isInlineFiller(domParent)) {\n return this.domPositionToView(domParent.parentNode, indexOf(domParent));\n }\n const viewParent = this.findCorrespondingViewText(domParent);\n let offset = domOffset;\n if (!viewParent) {\n return null;\n }\n if (startsWithFiller(domParent)) {\n offset -= INLINE_FILLER_LENGTH;\n offset = offset < 0 ? 0 : offset;\n }\n return new ViewPosition(viewParent, offset);\n }\n // domParent instanceof HTMLElement.\n else {\n if (domOffset === 0) {\n const viewParent = this.mapDomToView(domParent);\n if (viewParent) {\n return new ViewPosition(viewParent, 0);\n }\n }\n else {\n const domBefore = domParent.childNodes[domOffset - 1];\n // Jump over an inline filler (and also on Firefox jump over a block filler while pressing backspace in an empty paragraph).\n if (isText(domBefore) && isInlineFiller(domBefore) || domBefore && this.isBlockFiller(domBefore)) {\n return this.domPositionToView(domBefore.parentNode, indexOf(domBefore));\n }\n const viewBefore = isText(domBefore) ?\n this.findCorrespondingViewText(domBefore) :\n this.mapDomToView(domBefore);\n // TODO #663\n if (viewBefore && viewBefore.parent) {\n return new ViewPosition(viewBefore.parent, viewBefore.index + 1);\n }\n }\n return null;\n }\n }\n /**\n * Returns corresponding view {@link module:engine/view/element~Element Element} or\n * {@link module:engine/view/documentfragment~DocumentFragment} for provided DOM element or\n * document fragment. If there is no view item {@link module:engine/view/domconverter~DomConverter#bindElements bound}\n * to the given DOM - `undefined` is returned.\n *\n * For all DOM elements rendered by a {@link module:engine/view/uielement~UIElement} or\n * a {@link module:engine/view/rawelement~RawElement}, the parent `UIElement` or `RawElement` will be returned.\n *\n * @param domElementOrDocumentFragment DOM element or document fragment.\n * @returns Corresponding view element, document fragment or `undefined` if no element was bound.\n */\n mapDomToView(domElementOrDocumentFragment) {\n const hostElement = this.getHostViewElement(domElementOrDocumentFragment);\n return hostElement || this._domToViewMapping.get(domElementOrDocumentFragment);\n }\n /**\n * Finds corresponding text node. Text nodes are not {@link module:engine/view/domconverter~DomConverter#bindElements bound},\n * corresponding text node is returned based on the sibling or parent.\n *\n * If the directly previous sibling is a {@link module:engine/view/domconverter~DomConverter#bindElements bound} element, it is used\n * to find the corresponding text node.\n *\n * If this is a first child in the parent and the parent is a {@link module:engine/view/domconverter~DomConverter#bindElements bound}\n * element, it is used to find the corresponding text node.\n *\n * For all text nodes rendered by a {@link module:engine/view/uielement~UIElement} or\n * a {@link module:engine/view/rawelement~RawElement}, the parent `UIElement` or `RawElement` will be returned.\n *\n * Otherwise `null` is returned.\n *\n * Note that for the block or inline {@link module:engine/view/filler filler} this method returns `null`.\n *\n * @param domText DOM text node.\n * @returns Corresponding view text node or `null`, if it was not possible to find a corresponding node.\n */\n findCorrespondingViewText(domText) {\n if (isInlineFiller(domText)) {\n return null;\n }\n // If DOM text was rendered by a UIElement or a RawElement - return this parent element.\n const hostElement = this.getHostViewElement(domText);\n if (hostElement) {\n return hostElement;\n }\n const previousSibling = domText.previousSibling;\n // Try to use previous sibling to find the corresponding text node.\n if (previousSibling) {\n if (!(this.isElement(previousSibling))) {\n // The previous is text or comment.\n return null;\n }\n const viewElement = this.mapDomToView(previousSibling);\n if (viewElement) {\n const nextSibling = viewElement.nextSibling;\n // It might be filler which has no corresponding view node.\n if (nextSibling instanceof ViewText) {\n return nextSibling;\n }\n else {\n return null;\n }\n }\n }\n // Try to use parent to find the corresponding text node.\n else {\n const viewElement = this.mapDomToView(domText.parentNode);\n if (viewElement) {\n const firstChild = viewElement.getChild(0);\n // It might be filler which has no corresponding view node.\n if (firstChild instanceof ViewText) {\n return firstChild;\n }\n else {\n return null;\n }\n }\n }\n return null;\n }\n mapViewToDom(documentFragmentOrElement) {\n return this._viewToDomMapping.get(documentFragmentOrElement);\n }\n /**\n * Finds corresponding text node. Text nodes are not {@link module:engine/view/domconverter~DomConverter#bindElements bound},\n * corresponding text node is returned based on the sibling or parent.\n *\n * If the directly previous sibling is a {@link module:engine/view/domconverter~DomConverter#bindElements bound} element, it is used\n * to find the corresponding text node.\n *\n * If this is a first child in the parent and the parent is a {@link module:engine/view/domconverter~DomConverter#bindElements bound}\n * element, it is used to find the corresponding text node.\n *\n * Otherwise `null` is returned.\n *\n * @param viewText View text node.\n * @returns Corresponding DOM text node or `null`, if it was not possible to find a corresponding node.\n */\n findCorrespondingDomText(viewText) {\n const previousSibling = viewText.previousSibling;\n // Try to use previous sibling to find the corresponding text node.\n if (previousSibling && this.mapViewToDom(previousSibling)) {\n return this.mapViewToDom(previousSibling).nextSibling;\n }\n // If this is a first node, try to use parent to find the corresponding text node.\n if (!previousSibling && viewText.parent && this.mapViewToDom(viewText.parent)) {\n return this.mapViewToDom(viewText.parent).childNodes[0];\n }\n return null;\n }\n /**\n * Focuses DOM editable that is corresponding to provided {@link module:engine/view/editableelement~EditableElement}.\n */\n focus(viewEditable) {\n const domEditable = this.mapViewToDom(viewEditable);\n if (domEditable && domEditable.ownerDocument.activeElement !== domEditable) {\n // Save the scrollX and scrollY positions before the focus.\n const { scrollX, scrollY } = global.window;\n const scrollPositions = [];\n // Save all scrollLeft and scrollTop values starting from domEditable up to\n // document#documentElement.\n forEachDomElementAncestor(domEditable, node => {\n const { scrollLeft, scrollTop } = node;\n scrollPositions.push([scrollLeft, scrollTop]);\n });\n domEditable.focus();\n // Restore scrollLeft and scrollTop values starting from domEditable up to\n // document#documentElement.\n // https://github.com/ckeditor/ckeditor5-engine/issues/951\n // https://github.com/ckeditor/ckeditor5-engine/issues/957\n forEachDomElementAncestor(domEditable, node => {\n const [scrollLeft, scrollTop] = scrollPositions.shift();\n node.scrollLeft = scrollLeft;\n node.scrollTop = scrollTop;\n });\n // Restore the scrollX and scrollY positions after the focus.\n // https://github.com/ckeditor/ckeditor5-engine/issues/951\n global.window.scrollTo(scrollX, scrollY);\n }\n }\n /**\n * Returns `true` when `node.nodeType` equals `Node.ELEMENT_NODE`.\n *\n * @param node Node to check.\n */\n isElement(node) {\n return node && node.nodeType == Node.ELEMENT_NODE;\n }\n /**\n * Returns `true` when `node.nodeType` equals `Node.DOCUMENT_FRAGMENT_NODE`.\n *\n * @param node Node to check.\n */\n isDocumentFragment(node) {\n return node && node.nodeType == Node.DOCUMENT_FRAGMENT_NODE;\n }\n /**\n * Checks if the node is an instance of the block filler for this DOM converter.\n *\n * ```ts\n * const converter = new DomConverter( viewDocument, { blockFillerMode: 'br' } );\n *\n * converter.isBlockFiller( BR_FILLER( document ) ); // true\n * converter.isBlockFiller( NBSP_FILLER( document ) ); // false\n * ```\n *\n * **Note:**: For the `'nbsp'` mode the method also checks context of a node so it cannot be a detached node.\n *\n * **Note:** A special case in the `'nbsp'` mode exists where the `
` in `
` is treated as a block filler.\n *\n * @param domNode DOM node to check.\n * @returns True if a node is considered a block filler for given mode.\n */\n isBlockFiller(domNode) {\n if (this.blockFillerMode == 'br') {\n return domNode.isEqualNode(BR_FILLER_REF);\n }\n // Special case for
in which
should be treated as filler even when we are not in the 'br' mode. See ckeditor5#5564.\n if (domNode.tagName === 'BR' &&\n hasBlockParent(domNode, this.blockElements) &&\n domNode.parentNode.childNodes.length === 1) {\n return true;\n }\n // If not in 'br' mode, try recognizing both marked and regular nbsp block fillers.\n return domNode.isEqualNode(MARKED_NBSP_FILLER_REF) || isNbspBlockFiller(domNode, this.blockElements);\n }\n /**\n * Returns `true` if given selection is a backward selection, that is, if it's `focus` is before `anchor`.\n *\n * @param DOM Selection instance to check.\n */\n isDomSelectionBackward(selection) {\n if (selection.isCollapsed) {\n return false;\n }\n // Since it takes multiple lines of code to check whether a \"DOM Position\" is before/after another \"DOM Position\",\n // we will use the fact that range will collapse if it's end is before it's start.\n const range = this._domDocument.createRange();\n try {\n range.setStart(selection.anchorNode, selection.anchorOffset);\n range.setEnd(selection.focusNode, selection.focusOffset);\n }\n catch (e) {\n // Safari sometimes gives us a selection that makes Range.set{Start,End} throw.\n // See https://github.com/ckeditor/ckeditor5/issues/12375.\n return false;\n }\n const backward = range.collapsed;\n range.detach();\n return backward;\n }\n /**\n * Returns a parent {@link module:engine/view/uielement~UIElement} or {@link module:engine/view/rawelement~RawElement}\n * that hosts the provided DOM node. Returns `null` if there is no such parent.\n */\n getHostViewElement(domNode) {\n const ancestors = getAncestors(domNode);\n // Remove domNode from the list.\n ancestors.pop();\n while (ancestors.length) {\n const domNode = ancestors.pop();\n const viewNode = this._domToViewMapping.get(domNode);\n if (viewNode && (viewNode.is('uiElement') || viewNode.is('rawElement'))) {\n return viewNode;\n }\n }\n return null;\n }\n /**\n * Checks if the given selection's boundaries are at correct places.\n *\n * The following places are considered as incorrect for selection boundaries:\n *\n * * before or in the middle of an inline filler sequence,\n * * inside a DOM element which represents {@link module:engine/view/uielement~UIElement a view UI element},\n * * inside a DOM element which represents {@link module:engine/view/rawelement~RawElement a view raw element}.\n *\n * @param domSelection The DOM selection object to be checked.\n * @returns `true` if the given selection is at a correct place, `false` otherwise.\n */\n isDomSelectionCorrect(domSelection) {\n return this._isDomSelectionPositionCorrect(domSelection.anchorNode, domSelection.anchorOffset) &&\n this._isDomSelectionPositionCorrect(domSelection.focusNode, domSelection.focusOffset);\n }\n /**\n * Registers a {@link module:engine/view/matcher~MatcherPattern} for view elements whose content should be treated as raw data\n * and not processed during the conversion from DOM nodes to view elements.\n *\n * This is affecting how {@link module:engine/view/domconverter~DomConverter#domToView} and\n * {@link module:engine/view/domconverter~DomConverter#domChildrenToView} process DOM nodes.\n *\n * The raw data can be later accessed by a\n * {@link module:engine/view/element~Element#getCustomProperty custom property of a view element} called `\"$rawContent\"`.\n *\n * @param pattern Pattern matching a view element whose content should\n * be treated as raw data.\n */\n registerRawContentMatcher(pattern) {\n this._rawContentElementMatcher.add(pattern);\n }\n /**\n * Returns the block {@link module:engine/view/filler filler} node based on the current {@link #blockFillerMode} setting.\n */\n _getBlockFiller() {\n switch (this.blockFillerMode) {\n case 'nbsp':\n return NBSP_FILLER(this._domDocument); // eslint-disable-line new-cap\n case 'markedNbsp':\n return MARKED_NBSP_FILLER(this._domDocument); // eslint-disable-line new-cap\n case 'br':\n return BR_FILLER(this._domDocument); // eslint-disable-line new-cap\n }\n }\n /**\n * Checks if the given DOM position is a correct place for selection boundary. See {@link #isDomSelectionCorrect}.\n *\n * @param domParent Position parent.\n * @param offset Position offset.\n * @returns `true` if given position is at a correct place for selection boundary, `false` otherwise.\n */\n _isDomSelectionPositionCorrect(domParent, offset) {\n // If selection is before or in the middle of inline filler string, it is incorrect.\n if (isText(domParent) && startsWithFiller(domParent) && offset < INLINE_FILLER_LENGTH) {\n // Selection in a text node, at wrong position (before or in the middle of filler).\n return false;\n }\n if (this.isElement(domParent) && startsWithFiller(domParent.childNodes[offset])) {\n // Selection in an element node, before filler text node.\n return false;\n }\n const viewParent = this.mapDomToView(domParent);\n // The position is incorrect when anchored inside a UIElement or a RawElement.\n // Note: In case of UIElement and RawElement, mapDomToView() returns a parent element for any DOM child\n // so there's no need to perform any additional checks.\n if (viewParent && (viewParent.is('uiElement') || viewParent.is('rawElement'))) {\n return false;\n }\n return true;\n }\n /**\n * Takes text data from a given {@link module:engine/view/text~Text#data} and processes it so\n * it is correctly displayed in the DOM.\n *\n * Following changes are done:\n *\n * * a space at the beginning is changed to ` ` if this is the first text node in its container\n * element or if a previous text node ends with a space character,\n * * space at the end of the text node is changed to ` ` if there are two spaces at the end of a node or if next node\n * starts with a space or if it is the last text node in its container,\n * * remaining spaces are replaced to a chain of spaces and ` ` (e.g. `'x x'` becomes `'x x'`).\n *\n * Content of {@link #preElements} is not processed.\n *\n * @param node View text node to process.\n * @returns Processed text data.\n */\n _processDataFromViewText(node) {\n let data = node.data;\n // If any of node ancestors has a name which is in `preElements` array, then currently processed\n // view text node is (will be) in preformatted element. We should not change whitespaces then.\n if (node.getAncestors().some(parent => this.preElements.includes(parent.name))) {\n return data;\n }\n // 1. Replace the first space with a nbsp if the previous node ends with a space or there is no previous node\n // (container element boundary).\n if (data.charAt(0) == ' ') {\n const prevNode = this._getTouchingInlineViewNode(node, false);\n const prevEndsWithSpace = prevNode && prevNode.is('$textProxy') && this._nodeEndsWithSpace(prevNode);\n if (prevEndsWithSpace || !prevNode) {\n data = '\\u00A0' + data.substr(1);\n }\n }\n // 2. Replace the last space with nbsp if there are two spaces at the end or if the next node starts with space or there is no\n // next node (container element boundary).\n //\n // Keep in mind that Firefox prefers $nbsp; before tag, not inside it:\n //\n // Foo bar <-- bad.\n // Foo bar <-- good.\n //\n // More here: https://github.com/ckeditor/ckeditor5-engine/issues/1747.\n if (data.charAt(data.length - 1) == ' ') {\n const nextNode = this._getTouchingInlineViewNode(node, true);\n const nextStartsWithSpace = nextNode && nextNode.is('$textProxy') && nextNode.data.charAt(0) == ' ';\n if (data.charAt(data.length - 2) == ' ' || !nextNode || nextStartsWithSpace) {\n data = data.substr(0, data.length - 1) + '\\u00A0';\n }\n }\n // 3. Create space+nbsp pairs.\n return data.replace(/ {2}/g, ' \\u00A0');\n }\n /**\n * Checks whether given node ends with a space character after changing appropriate space characters to ` `s.\n *\n * @param node Node to check.\n * @returns `true` if given `node` ends with space, `false` otherwise.\n */\n _nodeEndsWithSpace(node) {\n if (node.getAncestors().some(parent => this.preElements.includes(parent.name))) {\n return false;\n }\n const data = this._processDataFromViewText(node);\n return data.charAt(data.length - 1) == ' ';\n }\n /**\n * Takes text data from native `Text` node and processes it to a correct {@link module:engine/view/text~Text view text node} data.\n *\n * Following changes are done:\n *\n * * multiple whitespaces are replaced to a single space,\n * * space at the beginning of a text node is removed if it is the first text node in its container\n * element or if the previous text node ends with a space character,\n * * space at the end of the text node is removed if there are two spaces at the end of a node or if next node\n * starts with a space or if it is the last text node in its container\n * * nbsps are converted to spaces.\n *\n * @param node DOM text node to process.\n * @returns Processed data.\n */\n _processDataFromDomText(node) {\n let data = node.data;\n if (_hasDomParentOfType(node, this.preElements)) {\n return getDataWithoutFiller(node);\n }\n // Change all consecutive whitespace characters (from the [ \\n\\t\\r] set –\n // see https://github.com/ckeditor/ckeditor5-engine/issues/822#issuecomment-311670249) to a single space character.\n // That's how multiple whitespaces are treated when rendered, so we normalize those whitespaces.\n // We're replacing 1+ (and not 2+) to also normalize singular \\n\\t\\r characters (#822).\n data = data.replace(/[ \\n\\t\\r]{1,}/g, ' ');\n const prevNode = this._getTouchingInlineDomNode(node, false);\n const nextNode = this._getTouchingInlineDomNode(node, true);\n const shouldLeftTrim = this._checkShouldLeftTrimDomText(node, prevNode);\n const shouldRightTrim = this._checkShouldRightTrimDomText(node, nextNode);\n // If the previous dom text node does not exist or it ends by whitespace character, remove space character from the beginning\n // of this text node. Such space character is treated as a whitespace.\n if (shouldLeftTrim) {\n data = data.replace(/^ /, '');\n }\n // If the next text node does not exist remove space character from the end of this text node.\n if (shouldRightTrim) {\n data = data.replace(/ $/, '');\n }\n // At the beginning and end of a block element, Firefox inserts normal space +
instead of non-breaking space.\n // This means that the text node starts/end with normal space instead of non-breaking space.\n // This causes a problem because the normal space would be removed in `.replace` calls above. To prevent that,\n // the inline filler is removed only after the data is initially processed (by the `.replace` above). See ckeditor5#692.\n data = getDataWithoutFiller(new Text(data));\n // At this point we should have removed all whitespaces from DOM text data.\n //\n // Now, We will reverse the process that happens in `_processDataFromViewText`.\n //\n // We have to change chars, that were in DOM text data because of rendering reasons, to spaces.\n // First, change all ` \\u00A0` pairs (space + ) to two spaces. DOM converter changes two spaces from model/view to\n // ` \\u00A0` to ensure proper rendering. Since here we convert back, we recognize those pairs and change them back to ` `.\n data = data.replace(/ \\u00A0/g, ' ');\n const isNextNodeInlineObjectElement = nextNode && this.isElement(nextNode) && nextNode.tagName != 'BR';\n const isNextNodeStartingWithSpace = nextNode && isText(nextNode) && nextNode.data.charAt(0) == ' ';\n // Then, let's change the last nbsp to a space.\n if (/( |\\u00A0)\\u00A0$/.test(data) || !nextNode || isNextNodeInlineObjectElement || isNextNodeStartingWithSpace) {\n data = data.replace(/\\u00A0$/, ' ');\n }\n // Then, change character that is at the beginning of the text node to space character.\n // We do that replacement only if this is the first node or the previous node ends on whitespace character.\n if (shouldLeftTrim || prevNode && this.isElement(prevNode) && prevNode.tagName != 'BR') {\n data = data.replace(/^\\u00A0/, ' ');\n }\n // At this point, all whitespaces should be removed and all created for rendering reasons should be\n // changed to normal space. All left are inserted intentionally.\n return data;\n }\n /**\n * Helper function which checks if a DOM text node, preceded by the given `prevNode` should\n * be trimmed from the left side.\n *\n * @param prevNode Either DOM text or `
` or one of `#inlineObjectElements`.\n */\n _checkShouldLeftTrimDomText(node, prevNode) {\n if (!prevNode) {\n return true;\n }\n if (this.isElement(prevNode)) {\n return prevNode.tagName === 'BR';\n }\n // Shouldn't left trim if previous node is a node that was encountered as a raw content node.\n if (this._encounteredRawContentDomNodes.has(node.previousSibling)) {\n return false;\n }\n return /[^\\S\\u00A0]/.test(prevNode.data.charAt(prevNode.data.length - 1));\n }\n /**\n * Helper function which checks if a DOM text node, succeeded by the given `nextNode` should\n * be trimmed from the right side.\n *\n * @param nextNode Either DOM text or `
` or one of `#inlineObjectElements`.\n */\n _checkShouldRightTrimDomText(node, nextNode) {\n if (nextNode) {\n return false;\n }\n return !startsWithFiller(node);\n }\n /**\n * Helper function. For given {@link module:engine/view/text~Text view text node}, it finds previous or next sibling\n * that is contained in the same container element. If there is no such sibling, `null` is returned.\n *\n * @param node Reference node.\n * @returns Touching text node, an inline object\n * or `null` if there is no next or previous touching text node.\n */\n _getTouchingInlineViewNode(node, getNext) {\n const treeWalker = new ViewTreeWalker({\n startPosition: getNext ? ViewPosition._createAfter(node) : ViewPosition._createBefore(node),\n direction: getNext ? 'forward' : 'backward'\n });\n for (const value of treeWalker) {\n // Found an inline object (for example an image).\n if (value.item.is('element') && this.inlineObjectElements.includes(value.item.name)) {\n return value.item;\n }\n // ViewContainerElement is found on a way to next ViewText node, so given `node` was first/last\n // text node in its container element.\n else if (value.item.is('containerElement')) {\n return null;\n }\n //
found – it works like a block boundary, so do not scan further.\n else if (value.item.is('element', 'br')) {\n return null;\n }\n // Found a text node in the same container element.\n else if (value.item.is('$textProxy')) {\n return value.item;\n }\n }\n return null;\n }\n /**\n * Helper function. For the given text node, it finds the closest touching node which is either\n * a text, `
` or an {@link #inlineObjectElements inline object}.\n *\n * If no such node is found, `null` is returned.\n *\n * For instance, in the following DOM structure:\n *\n * ```html\n * foobar
bom
\n * ```\n *\n * * `foo` doesn't have its previous touching inline node (`null` is returned),\n * * `foo`'s next touching inline node is `bar`\n * * `bar`'s next touching inline node is `
`\n *\n * This method returns text nodes and `
` elements because these types of nodes affect how\n * spaces in the given text node need to be converted.\n */\n _getTouchingInlineDomNode(node, getNext) {\n if (!node.parentNode) {\n return null;\n }\n const stepInto = getNext ? 'firstChild' : 'lastChild';\n const stepOver = getNext ? 'nextSibling' : 'previousSibling';\n let skipChildren = true;\n let returnNode = node;\n do {\n if (!skipChildren && returnNode[stepInto]) {\n returnNode = returnNode[stepInto];\n }\n else if (returnNode[stepOver]) {\n returnNode = returnNode[stepOver];\n skipChildren = false;\n }\n else {\n returnNode = returnNode.parentNode;\n skipChildren = true;\n }\n if (!returnNode || this._isBlockElement(returnNode)) {\n return null;\n }\n } while (!(isText(returnNode) || returnNode.tagName == 'BR' || this._isInlineObjectElement(returnNode)));\n return returnNode;\n }\n /**\n * Returns `true` if a DOM node belongs to {@link #blockElements}. `false` otherwise.\n */\n _isBlockElement(node) {\n return this.isElement(node) && this.blockElements.includes(node.tagName.toLowerCase());\n }\n /**\n * Returns `true` if a DOM node belongs to {@link #inlineObjectElements}. `false` otherwise.\n */\n _isInlineObjectElement(node) {\n return this.isElement(node) && this.inlineObjectElements.includes(node.tagName.toLowerCase());\n }\n /**\n * Creates view element basing on the node type.\n *\n * @param node DOM node to check.\n * @param options Conversion options. See {@link module:engine/view/domconverter~DomConverter#domToView} options parameter.\n */\n _createViewElement(node, options) {\n if (isComment(node)) {\n return new ViewUIElement(this.document, '$comment');\n }\n const viewName = options.keepOriginalCase ? node.tagName : node.tagName.toLowerCase();\n return new ViewElement(this.document, viewName);\n }\n /**\n * Checks if view element's content should be treated as a raw data.\n *\n * @param viewElement View element to check.\n * @param options Conversion options. See {@link module:engine/view/domconverter~DomConverter#domToView} options parameter.\n */\n _isViewElementWithRawContent(viewElement, options) {\n return options.withChildren !== false && !!this._rawContentElementMatcher.match(viewElement);\n }\n /**\n * Checks whether a given element name should be renamed in a current rendering mode.\n *\n * @param elementName The name of view element.\n */\n _shouldRenameElement(elementName) {\n const name = elementName.toLowerCase();\n return this.renderingMode === 'editing' && this.unsafeElements.includes(name);\n }\n /**\n * Return a element with a special attribute holding the name of the original element.\n * Optionally, copy all the attributes of the original element if that element is provided.\n *\n * @param elementName The name of view element.\n * @param originalDomElement The original DOM element to copy attributes and content from.\n */\n _createReplacementDomElement(elementName, originalDomElement) {\n const newDomElement = this._domDocument.createElement('span');\n // Mark the span replacing a script as hidden.\n newDomElement.setAttribute(UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE, elementName);\n if (originalDomElement) {\n while (originalDomElement.firstChild) {\n newDomElement.appendChild(originalDomElement.firstChild);\n }\n for (const attributeName of originalDomElement.getAttributeNames()) {\n newDomElement.setAttribute(attributeName, originalDomElement.getAttribute(attributeName));\n }\n }\n return newDomElement;\n }\n}\n/**\n * Helper function.\n * Used to check if given native `Element` or `Text` node has parent with tag name from `types` array.\n *\n * @returns`true` if such parent exists or `false` if it does not.\n */\nfunction _hasDomParentOfType(node, types) {\n const parents = getAncestors(node);\n return parents.some(parent => parent.tagName && types.includes(parent.tagName.toLowerCase()));\n}\n/**\n * A helper that executes given callback for each DOM node's ancestor, starting from the given node\n * and ending in document#documentElement.\n *\n * @param callback A callback to be executed for each ancestor.\n */\nfunction forEachDomElementAncestor(element, callback) {\n let node = element;\n while (node) {\n callback(node);\n node = node.parentElement;\n }\n}\n/**\n * Checks if given node is a nbsp block filler.\n *\n * A is a block filler only if it is a single child of a block element.\n *\n * @param domNode DOM node.\n */\nfunction isNbspBlockFiller(domNode, blockElements) {\n const isNBSP = domNode.isEqualNode(NBSP_FILLER_REF);\n return isNBSP && hasBlockParent(domNode, blockElements) && domNode.parentNode.childNodes.length === 1;\n}\n/**\n * Checks if domNode has block parent.\n *\n * @param domNode DOM node.\n */\nfunction hasBlockParent(domNode, blockElements) {\n const parent = domNode.parentNode;\n return !!parent && !!parent.tagName && blockElements.includes(parent.tagName.toLowerCase());\n}\n/**\n * Log to console the information about element that was replaced.\n * Check UNSAFE_ELEMENTS for all recognized unsafe elements.\n *\n * @param elementName The name of the view element.\n */\nfunction _logUnsafeElement(elementName) {\n if (elementName === 'script') {\n logWarning('domconverter-unsafe-script-element-detected');\n }\n if (elementName === 'style') {\n logWarning('domconverter-unsafe-style-element-detected');\n }\n}\n/**\n * While rendering the editor content, the {@link module:engine/view/domconverter~DomConverter} detected a `
+