Merge pull request #3731 from Keraito/notes-md-table

Remove linebreaks in notes text when it are html elements

addons/notes/src/register.js

@@ -45,7 +45,12 @@ export class Notes extends React.Component {
 
   render() {
     const { text } = this.state;
-    const textAfterFormatted = text ? text.trim().replace(/\n/g, '<br />') : '';
+    const textAfterFormatted = text
+      ? text
+          .trim()
+          .replace(/(<\S+.*>)\n/g, '$1')
+          .replace(/\n/g, '<br />')
+      : '';
 
     return (
       <Panel

examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot

@@ -12,6 +12,12 @@ exports[`Storyshots Addons|Notes using decorator arguments, withNotes 1`] = `
 </button>
 `;
 
+exports[`Storyshots Addons|Notes with a markdown table 1`] = `
+<button>
+  Button with notes - check the notes panel for details
+</button>
+`;
+
 exports[`Storyshots Addons|Notes withNotes 1`] = `
 <button>
   Button with notes - check the notes panel for details

examples/official-storybook/stories/addon-notes.stories.js

@@ -26,6 +26,15 @@ storiesOf('Addons|Notes', module)
 ~~~
     `;
 
+const markdownTable = `
+| Column1 | Column2 | Column3 |
+|---------|---------|---------|
+| Row1.1  | Row1.2  | Row1.3  |
+| Row2.1  | Row2.2  | Row2.3  |
+| Row3.1  | Row3.2  | Row3.3  |
+| Row4.1  | Row4.2  | Row4.3  |
+`;
+
 storiesOf('Addons|Notes', module)
   .addDecorator(withNotes)
   .add('withNotes', baseStory, {
@@ -39,7 +48,7 @@ storiesOf('Addons|Notes', module)
     notes: { markdown: markdownString },
   })
   .add('using decorator arguments, withNotes', withNotes('Notes into withNotes')(baseStory))
-  .add(
-    'using decorator arguments, withMarkdownNotes',
-    withMarkdownNotes(markdownString)(baseStory)
-  );
+  .add('using decorator arguments, withMarkdownNotes', withMarkdownNotes(markdownString)(baseStory))
+  .add('with a markdown table', baseStory, {
+    notes: { markdown: markdownTable },
+  });