Format boundaries WIP

WordPress · Nov 14, 2018 · fbeb0e3 · fbeb0e3
1 parent 721dbab
commit fbeb0e3
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -430,7 +430,8 @@ export class RichText extends Component {
 			return;
 		}
 
-		const { start, end, formats } = this.createRecord();
+		const value = this.createRecord();
+		const { start, end, formats } = value;
 
 		if ( start !== this.state.start || end !== this.state.end ) {
 			const isCaretWithinFormattedText = this.props.isCaretWithinFormattedText;
@@ -441,6 +442,7 @@ export class RichText extends Component {
 			}
 
 			this.setState( { start, end } );
+			this.applyRecord( value );
 		}
 	}
 

diff --git a/packages/editor/src/components/rich-text/tinymce.js b/packages/editor/src/components/rich-text/tinymce.js
@@ -187,7 +187,7 @@ export default class TinyMCE extends Component {
 			// already with dangerouslySetInnerHTML, we don't need this to be
 			// verified.
 			verify_html: false,
-			inline_boundaries_selector: 'a[href],code,b,i,strong,em,del,ins,sup,sub',
+			// inline_boundaries_selector: 'a[href],code,b,i,strong,em,del,ins,sup,sub',
 			plugins: [],
 		} );
 

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