Skip to content

Commit

Permalink
Add line padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix committed Feb 12, 2019
1 parent c466ca7 commit f7573a5
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 0 deletions.
122 changes: 122 additions & 0 deletions packages/rich-text/src/test/__snapshots__/to-dom.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ exports[`recordToDom should create a value with formatting 1`] = `
data-rich-text-format-boundary="true"
>
test
<br
data-rich-text-padding="true"
/>
</em>
</React.Fragment>
Expand All @@ -17,6 +20,9 @@ exports[`recordToDom should create a value with formatting for split tags 1`] =
data-rich-text-format-boundary="true"
>
test
<br
data-rich-text-padding="true"
/>
</em>
</React.Fragment>
Expand All @@ -29,6 +35,9 @@ exports[`recordToDom should create a value with formatting with attributes 1`] =
href="#"
>
test
<br
data-rich-text-padding="true"
/>
</a>
</React.Fragment>
Expand All @@ -40,6 +49,10 @@ exports[`recordToDom should create a value with image object 1`] = `
src=""
/>
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -50,6 +63,9 @@ exports[`recordToDom should create a value with image object and formatting 1`]
src=""
/>
<br
data-rich-text-padding="true"
/>
</em>
</React.Fragment>
Expand All @@ -64,6 +80,10 @@ exports[`recordToDom should create a value with image object and text after 1`]
te
</em>
st
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -76,6 +96,9 @@ exports[`recordToDom should create a value with image object and text before 1`]
src=""
/>
<br
data-rich-text-padding="true"
/>
</em>
</React.Fragment>
Expand All @@ -88,6 +111,9 @@ exports[`recordToDom should create a value with nested formatting 1`] = `
data-rich-text-format-boundary="true"
>
test
<br
data-rich-text-padding="true"
/>
</strong>
</em>
Expand All @@ -97,6 +123,10 @@ exports[`recordToDom should create a value with nested formatting 1`] = `
exports[`recordToDom should create a value without formatting 1`] = `
<React.Fragment>
test
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -118,6 +148,9 @@ exports[`recordToDom should filter format boundary attributes 1`] = `
data-rich-text-format-boundary="true"
>
test
<br
data-rich-text-padding="true"
/>
</strong>
</React.Fragment>
Expand All @@ -128,6 +161,10 @@ exports[`recordToDom should handle br 1`] = `
<br />
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -139,6 +176,9 @@ exports[`recordToDom should handle br with formatting 1`] = `
<br />
<br
data-rich-text-padding="true"
/>
</em>
</React.Fragment>
Expand All @@ -149,6 +189,10 @@ exports[`recordToDom should handle br with text 1`] = `
te
<br />
st
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -159,6 +203,10 @@ exports[`recordToDom should handle double br 1`] = `
<br />
b
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -185,9 +233,17 @@ exports[`recordToDom should handle middle empty list value 1`] = `
</li>
<li>
<br
data-rich-text-padding="true"
/>
</li>
<li>
<br
data-rich-text-padding="true"
/>
</li>
</React.Fragment>
`;
Expand All @@ -196,25 +252,44 @@ exports[`recordToDom should handle multiline list value 1`] = `
<React.Fragment>
<li>
one
<br
data-rich-text-padding="true"
/>
<ul>
<li>
a
<br
data-rich-text-padding="true"
/>
</li>
<li>
b
<br
data-rich-text-padding="true"
/>
<ol>
<li>
1
<br
data-rich-text-padding="true"
/>
</li>
<li>
2
<br
data-rich-text-padding="true"
/>
</li>
</ol>
</li>
</ul>
</li>
<li>
three
<br
data-rich-text-padding="true"
/>
</li>
</React.Fragment>
`;
Expand All @@ -223,9 +298,16 @@ exports[`recordToDom should handle multiline value 1`] = `
<React.Fragment>
<p>
one
<br
data-rich-text-padding="true"
/>
</p>
<p>
two
<br
data-rich-text-padding="true"
/>
</p>
</React.Fragment>
`;
Expand All @@ -234,6 +316,10 @@ exports[`recordToDom should handle multiline value with element selection 1`] =
<React.Fragment>
<li>
one
<br
data-rich-text-padding="true"
/>
</li>
</React.Fragment>
`;
Expand All @@ -242,9 +328,16 @@ exports[`recordToDom should handle multiline value with empty 1`] = `
<React.Fragment>
<p>
one
<br
data-rich-text-padding="true"
/>
</p>
<p>
<br
data-rich-text-padding="true"
/>
</p>
</React.Fragment>
`;
Expand All @@ -255,6 +348,10 @@ exports[`recordToDom should handle nested empty list value 1`] = `
<ul>
<li>
<br
data-rich-text-padding="true"
/>
</li>
</ul>
</li>
Expand All @@ -268,6 +365,10 @@ exports[`recordToDom should handle selection before br 1`] = `
<br />
b
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -276,11 +377,17 @@ exports[`recordToDom should ignore formats at line separator 1`] = `
<p>
<em>
one
<br
data-rich-text-padding="true"
/>
</em>
</p>
<p>
<em>
two
<br
data-rich-text-padding="true"
/>
</em>
</p>
Expand All @@ -290,6 +397,10 @@ exports[`recordToDom should ignore formats at line separator 1`] = `
exports[`recordToDom should preserve emoji 1`] = `
<React.Fragment>
🍒
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -299,6 +410,9 @@ exports[`recordToDom should preserve emoji in formatting 1`] = `
data-rich-text-format-boundary="true"
>
🍒
<br
data-rich-text-padding="true"
/>
</em>
</React.Fragment>
Expand All @@ -307,6 +421,10 @@ exports[`recordToDom should preserve emoji in formatting 1`] = `
exports[`recordToDom should preserve non breaking space 1`] = `
<React.Fragment>
test  test
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;

Expand All @@ -319,5 +437,9 @@ exports[`recordToDom should remove padding 1`] = `
exports[`recordToDom should replace characters to format HTML with space 1`] = `
<React.Fragment>
<br
data-rich-text-padding="true"
/>
</React.Fragment>
`;
26 changes: 26 additions & 0 deletions packages/rich-text/src/to-tree.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,14 @@ function getDeepestActiveFormat( value ) {
return activeFormats[ selectedFormat - 1 ];
}

const padding = {
type: 'br',
attributes: {
'data-rich-text-padding': 'true',
},
object: true,
};

export function toTree( {
value,
multilineTag,
Expand Down Expand Up @@ -116,6 +124,7 @@ export function toTree( {

for ( let i = 0; i < formatsLength; i++ ) {
const character = text.charAt( i );
const nextCharacter = text[ i + 1 ];
let characterFormats = formats[ i ];

// Set multiline tags in queue for building the tree.
Expand Down Expand Up @@ -196,6 +205,15 @@ export function toTree( {

// No need for further processing if the character is a line separator.
if ( character === LINE_SEPARATOR ) {
if (
isEditableTree &&
( nextCharacter === LINE_SEPARATOR || ! nextCharacter )
) {
pointer = append( getParent( pointer ), padding );
// Ensure pointer is text node.
pointer = append( getParent( pointer ), '' );
}

lastCharacterFormats = characterFormats;
lastCharacter = character;
continue;
Expand Down Expand Up @@ -232,6 +250,14 @@ export function toTree( {
onEndIndex( tree, pointer );
}

if (
isEditableTree &&
( nextCharacter === LINE_SEPARATOR || ! nextCharacter ) &&
i !== text.length
) {
append( getParent( pointer ), padding );
}

lastCharacterFormats = characterFormats;
lastCharacter = character;
}
Expand Down

0 comments on commit f7573a5

Please sign in to comment.