From 718b4fe10d44ed3c626fa5b2524a79a9b84e8746 Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 23 Jan 2019 10:29:53 +0100 Subject: [PATCH] Avoid flickering by setting boundary class when creating the DOM tree --- packages/rich-text/src/to-tree.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js index be23219851a96..a44cafe1e64bc 100644 --- a/packages/rich-text/src/to-tree.js +++ b/packages/rich-text/src/to-tree.js @@ -3,6 +3,7 @@ */ import { getFormatType } from './get-format-type'; +import { getActiveFormat } from './get-active-format'; import { LINE_SEPARATOR, OBJECT_REPLACEMENT_CHARACTER, @@ -19,7 +20,7 @@ function fromFormat( { type, attributes, unregisteredAttributes, object } ) { const elementAttributes = { ...unregisteredAttributes }; for ( const name in attributes ) { - const key = formatType.attributes[ name ]; + const key = formatType.attributes ? formatType.attributes[ name ] : false; if ( key ) { elementAttributes[ key ] = attributes[ name ]; @@ -146,14 +147,25 @@ export function toTree( { return; } + const { type, attributes = {}, object } = format; + const activeFormat = getActiveFormat( value, type ); + + if ( format === activeFormat ) { + attributes[ 'data-mce-selected' ] = 'inline-boundary'; + } + const parent = getParent( pointer ); - const newNode = append( parent, fromFormat( format ) ); + const newNode = append( parent, fromFormat( { + type, + attributes, + object, + } ) ); if ( isText( pointer ) && getText( pointer ).length === 0 ) { remove( pointer ); } - pointer = append( format.object ? parent : newNode, '' ); + pointer = append( object ? parent : newNode, '' ); } ); }