Skip to content

Commit

Permalink
Paste from Slack: interpret paragraph markup (#43114)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix @priethor
ellatrix authored and priethor committed Aug 12, 2022
1 parent 73833e5 commit a123fc7
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/blocks/src/api/raw-handling/paste-handler.js
View file
Expand Up @@ -30,6 +30,7 @@ import htmlFormattingRemover from './html-formatting-remover';
import brRemover from './br-remover';
import { deepFilterHTML, isPlain, getBlockContentSchema } from './utils';
import emptyParagraphRemover from './empty-paragraph-remover';
import slackParagraphCorrector from './slack-paragraph-corrector';

/**
* Browser dependencies
Expand Down Expand Up @@ -149,6 +150,9 @@ export function pasteHandler( {
return filterInlineHTML( HTML, preserveWhiteSpace );
}

// Must be run before checking if it's inline content.
HTML = deepFilterHTML( HTML, [ slackParagraphCorrector ] );

// An array of HTML strings and block objects. The blocks replace matched
// shortcodes.
const pieces = shortcodeConverter( HTML );
Expand Down
21 changes: 21 additions & 0 deletions packages/blocks/src/api/raw-handling/slack-paragraph-corrector.js
View file
@@ -0,0 +1,21 @@
/**
* Replaces Slack paragraph markup with a double line break (later converted to
* a proper paragraph).
*
* @param {Element} node Node to check.
*/
export default function slackParagraphCorrector( node ) {
if ( node.nodeName !== 'SPAN' ) {
return;
}

if ( node.getAttribute( 'data-stringify-type' ) !== 'paragraph-break' ) {
return;
}

const { parentNode } = node;

parentNode.insertBefore( node.ownerDocument.createElement( 'br' ), node );
parentNode.insertBefore( node.ownerDocument.createElement( 'br' ), node );
parentNode.removeChild( node );
}
1 change: 1 addition & 0 deletions test/integration/blocks-raw-handling.test.js
View file
Expand Up @@ -346,6 +346,7 @@ describe( 'Blocks raw handling', () => {
'gutenberg',
'shortcode-matching',
'slack-quote',
'slack-paragraphs',
].forEach( ( type ) => {
// eslint-disable-next-line jest/valid-title
it( type, () => {
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/documents/slack-paragraphs-in.html
View file
@@ -0,0 +1 @@
<span style="color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">test with<span> </span></span><a target="_blank" class="c-link" data-stringify-link="http://w.org" delay="150" data-sk="tooltip_parent" href="http://w.org/" rel="noopener noreferrer" tabindex="-1" data-remove-tab-index="true" style="box-sizing: inherit; color: rgba(var(--sk_highlight,18,100,163),1); text-decoration: none; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41);">link</a><br style="box-sizing: inherit; color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">a new line</span><span class="c-mrkdwn__br" data-stringify-type="paragraph-break" style="box-sizing: inherit; display: block; height: 8px; color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></span><span style="color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">a new paragraph</span><br style="box-sizing: inherit; color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">another new line</span><span class="c-mrkdwn__br" data-stringify-type="paragraph-break" style="box-sizing: inherit; display: block; height: 8px; color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></span><span style="color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">another paragraph</span>
11 changes: 11 additions & 0 deletions test/integration/fixtures/documents/slack-paragraphs-out.html
View file
@@ -0,0 +1,11 @@
<!-- wp:paragraph -->
<p>test with&nbsp;<a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a><br>a new line</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>a new paragraph<br>another new line</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>another paragraph</p>
<!-- /wp:paragraph -->

0 comments on commit a123fc7

Please sign in to comment.