Improve functionality of sourcemaps in RTE

In rich text editor, enhance the sourcemap extension and service to
include source positions of elements as attributes with the element itself.

app/assets/javascripts/content_editor/extensions/bullet_list.js

@@ -18,7 +18,7 @@ export default BulletList.extend({
       bullet: {
         default: '*',
         parseHTML(element) {
-          const bullet = getMarkdownSource(element)?.charAt(0);
+          const bullet = getMarkdownSource(element)?.trim().charAt(0);
 
           return '*+-'.includes(bullet) ? bullet : '*';
         },

app/assets/javascripts/content_editor/extensions/ordered_list.js

@@ -17,7 +17,7 @@ export default OrderedList.extend({
 
       parens: {
         default: false,
-        parseHTML: (element) => /^[0-9]+\)/.test(getMarkdownSource(element)),
+        parseHTML: (element) => /^[0-9]+\)/.test(getMarkdownSource(element)?.trim()),
       },
     };
   },

app/assets/javascripts/content_editor/extensions/sourcemap.js

 import { Extension } from '@tiptap/core';
+import { getMarkdownSource, docHasSourceMap } from '../services/markdown_sourcemap';
 import Audio from './audio';
 import Blockquote from './blockquote';
 import Bold from './bold';
@@ -34,6 +35,8 @@ export default Extension.create({
   name: 'sourcemap',
 
   addGlobalAttributes() {
+    const preserveMarkdown = () => gon.features?.preserveMarkdown;
+
     return [
       {
         types: [
@@ -77,10 +80,18 @@ export default Extension.create({
            */
           sourceMarkdown: {
             default: null,
+            parseHTML: (element) => preserveMarkdown() && getMarkdownSource(element),
             renderHTML: () => '',
           },
           sourceMapKey: {
             default: null,
+            parseHTML: (element) => preserveMarkdown() && element.dataset.sourcepos,
+            renderHTML: () => '',
+          },
+          sourceTagName: {
+            default: null,
+            parseHTML: (element) =>
+              preserveMarkdown() && docHasSourceMap(element) && element.tagName.toLowerCase(),
             renderHTML: () => '',
           },
         },

app/assets/javascripts/content_editor/extensions/task_list.js

@@ -30,7 +30,7 @@ export default TaskList.extend({
       bullet: {
         default: '*',
         parseHTML(element) {
-          const bullet = getMarkdownSource(element)?.charAt(0);
+          const bullet = getMarkdownSource(element)?.trim().charAt(0);
           return '*+-'.includes(bullet) ? bullet : '*';
         },
       },

app/assets/javascripts/content_editor/services/markdown_sourcemap.js

 import { isString } from 'lodash';
 
+export const docHasSourceMap = (element) => {
+  const commentNode = element.ownerDocument.body.lastChild;
+  return Boolean(commentNode?.nodeName === '#comment' && isString(commentNode.textContent));
+};
+
 export const getFullSource = (element) => {
   const commentNode = element.ownerDocument.body.lastChild;
 
@@ -32,14 +37,26 @@ export const getMarkdownSource = (element) => {
     if (!source.length) return undefined;
 
     for (let i = range.start.row; i <= range.end.row; i += 1) {
-      if (i === range.start.row) {
-        elSource += source[i].substring(range.start.col);
+      if (i === range.start.row && i === range.end.row) {
+        // include leading whitespace in the sourcemap
+        if (!source[i]?.substring(0, range.start.col).trim()) {
+          range.start.col = 0;
+        }
+        elSource += source[i].substring(range.start.col, range.end.col + 1);
+      } else if (i === range.start.row) {
+        // include leading whitespace in the sourcemap
+        if (!source[i]?.substring(0, range.start.col).trim()) {
+          range.start.col = 0;
+        }
+        elSource += source[i]?.substring(range.start.col) || '';
+      } else if (i === range.end.row) {
+        elSource += `\n${source[i]?.substring(0, range.end.col + 1) || ''}`;
       } else {
         elSource += `\n${source[i]}` || '';
       }
     }
 
-    return elSource.trim();
+    return elSource;
   } catch {
     return undefined;
   }

app/assets/javascripts/content_editor/services/serialization_helpers.js

@@ -5,7 +5,7 @@ const defaultAttrs = {
   th: { colspan: 1, rowspan: 1, colwidth: null, align: 'left' },
 };
 
-const defaultIgnoreAttrs = ['sourceMarkdown', 'sourceMapKey'];
+const defaultIgnoreAttrs = ['sourceMarkdown', 'sourceMapKey', 'sourceTagName'];
 
 const ignoreAttrs = {
   dd: ['isTerm'],

app/controllers/concerns/wiki_actions.rb

@@ -32,6 +32,10 @@ module WikiActions
     before_action :page, only: [:show, :edit, :update, :history, :destroy, :diff]
     before_action :load_sidebar, except: [:pages]
 
+    before_action do
+      push_frontend_feature_flag(:preserve_markdown, container)
+    end
+
     before_action only: [:show, :edit, :update] do
       @valid_encoding = valid_encoding?
     end

app/controllers/projects/issues_controller.rb

@@ -44,6 +44,7 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :authorize_read_code!, only: [:related_branches]
 
   before_action do
+    push_frontend_feature_flag(:preserve_markdown, project)
     push_frontend_feature_flag(:issues_grid_view)
     push_frontend_feature_flag(:service_desk_ticket)
     push_frontend_feature_flag(:issues_list_drawer, project)

config/feature_flags/development/preserve_markdown.yml

+---
+name: preserve_markdown
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160709
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/474407
+milestone: '17.3'
+type: development
+group: group::knowledge
+default_enabled: false

ee/app/controllers/groups/epics_controller.rb

@@ -18,6 +18,7 @@ class Groups::EpicsController < Groups::ApplicationController
   after_action :log_epic_show, only: :show
 
   before_action do
+    push_frontend_feature_flag(:preserve_markdown, @group)
     push_frontend_feature_flag(:notifications_todos_buttons, current_user)
     push_frontend_feature_flag(:namespace_level_work_items, @group)
     push_force_frontend_feature_flag(:namespace_level_work_items, epic_work_items_enabled?)

spec/frontend/content_editor/services/markdown_sourcemap_spec.js

 import { builders } from 'prosemirror-test-builder';
-import { Extension } from '@tiptap/core';
+import Bold from '~/content_editor/extensions/bold';
 import BulletList from '~/content_editor/extensions/bullet_list';
+import Code from '~/content_editor/extensions/code';
+import Italic from '~/content_editor/extensions/italic';
 import ListItem from '~/content_editor/extensions/list_item';
 import TaskList from '~/content_editor/extensions/task_list';
 import TaskItem from '~/content_editor/extensions/task_item';
-import Paragraph from '~/content_editor/extensions/paragraph';
+import Sourcemap from '~/content_editor/extensions/sourcemap';
+import Strike from '~/content_editor/extensions/strike';
 import markdownDeserializer from '~/content_editor/services/gl_api_markdown_deserializer';
-import { getMarkdownSource, getFullSource } from '~/content_editor/services/markdown_sourcemap';
+import { getFullSource } from '~/content_editor/services/markdown_sourcemap';
 import { createTestEditor } from '../test_utils';
-
-const BULLET_LIST_MARKDOWN = `+ list item 1
-+ list item 2
-  - embedded list item 3`;
-const BULLET_LIST_HTML = `<ul data-sourcepos="1:1-3:24" dir="auto">
-  <li data-sourcepos="1:1-1:13">list item 1</li>
-  <li data-sourcepos="2:1-3:24">list item 2
-    <ul data-sourcepos="3:3-3:24">
-      <li data-sourcepos="3:3-3:24">embedded list item 3</li>
-    </ul>
-  </li>
-</ul>`;
-
-const MALFORMED_BULLET_LIST_HTML =
-  `<ul data-sourcepos="1:1-3:24" dir="auto">
-  <li data-sourcepos="1:1-1:13">list item 1</li>` +
-  // below line has malformed sourcepos
-  `<li data-sourcepos="5:1-5:24">list item 2
-    <ul data-sourcepos="3:3-3:24">
-      <li data-sourcepos="3:3-3:24">embedded list item 3</li>
-    </ul>
-  </li>
-</ul>`;
-
-const BULLET_TASK_LIST_MARKDOWN = `- [ ] list item 1
-+ [x] checked list item 2
-  + [ ] embedded list item 1
-  - [x] checked embedded list item 2`;
-const BULLET_TASK_LIST_HTML = `<ul data-sourcepos="1:1-4:36" class="task-list" dir="auto">
-  <li data-sourcepos="1:1-1:17" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> list item 1</li>
-  <li data-sourcepos="2:1-4:36" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> checked list item 2
-    <ul data-sourcepos="3:3-4:36" class="task-list">
-      <li data-sourcepos="3:3-3:28" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> embedded list item 1</li>
-      <li data-sourcepos="4:3-4:36" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> checked embedded list item 2</li>
-    </ul>
-  </li>
-</ul>`;
-
-const SourcemapExtension = Extension.create({
-  // lets add `source` attribute to every element using `getMarkdownSource`
-  addGlobalAttributes() {
-    return [
-      {
-        types: [Paragraph.name, BulletList.name, ListItem.name],
-        attributes: {
-          source: {
-            parseHTML: (element) => {
-              const source = getMarkdownSource(element);
-              return source;
-            },
-          },
-        },
-      },
-    ];
-  },
-});
+import {
+  BULLET_LIST_MARKDOWN,
+  BULLET_LIST_HTML,
+  MALFORMED_BULLET_LIST_HTML,
+  BULLET_TASK_LIST_MARKDOWN,
+  BULLET_TASK_LIST_HTML,
+  PARAGRAPHS_MARKDOWN,
+  PARAGRAPHS_HTML,
+} from '../test_constants';
 
 const tiptapEditor = createTestEditor({
-  extensions: [BulletList, ListItem, TaskList, TaskItem, SourcemapExtension],
+  extensions: [BulletList, ListItem, TaskList, TaskItem, Sourcemap, Bold, Italic, Strike, Code],
 });
 
-const { doc, bulletList, listItem, taskList, taskItem, paragraph } = builders(tiptapEditor.schema);
+const { doc, bulletList, listItem, taskList, taskItem, paragraph, bold, italic, strike, code } =
+  builders(tiptapEditor.schema);
+
+const text = (val) => tiptapEditor.state.schema.text(val);
+
+const sourceAttrs = jest.fn().mockImplementation((sourceTagName, sourceMapKey, sourceMarkdown) => ({
+  sourceTagName,
+  sourceMapKey,
+  sourceMarkdown,
+}));
 
 const bulletListDoc = () =>
   doc(
     bulletList(
-      { bullet: '+', source: '+ list item 1\n+ list item 2\n  - embedded list item 3' },
-      listItem({ source: '+ list item 1' }, paragraph('list item 1')),
+      { bullet: '+', ...sourceAttrs('ul', '1:1-3:24', BULLET_LIST_MARKDOWN) },
+      listItem(sourceAttrs('li', '1:1-1:13', '+ list item 1'), paragraph('list item 1')),
       listItem(
-        { source: '+ list item 2\n  - embedded list item 3' },
+        sourceAttrs('li', '2:1-3:24', '+ list item 2\n  - embedded list item 3'),
         paragraph('list item 2'),
         bulletList(
-          { bullet: '-', source: '- embedded list item 3' },
-          listItem({ source: '- embedded list item 3' }, paragraph('embedded list item 3')),
+          { bullet: '-', ...sourceAttrs('ul', '3:3-3:24', '  - embedded list item 3') },
+          listItem(
+            sourceAttrs('li', '3:3-3:24', '  - embedded list item 3'),
+            paragraph('embedded list item 3'),
+          ),
         ),
       ),
     ),
@@ -90,13 +58,18 @@ const bulletListDoc = () =>
 const bulletListDocWithMalformedSourcepos = () =>
   doc(
     bulletList(
-      { bullet: '+', source: '+ list item 1\n+ list item 2\n  - embedded list item 3' },
-      listItem({ source: '+ list item 1' }, paragraph('list item 1')),
+      { bullet: '+', ...sourceAttrs('ul', '1:1-3:24', BULLET_LIST_MARKDOWN) },
+      listItem(sourceAttrs('li', '1:1-1:13', '+ list item 1'), paragraph('list item 1')),
       listItem(
+        // source not included for out of bounds list item here
+        sourceAttrs('li', '5:1-5:24'),
         paragraph('list item 2'),
         bulletList(
-          { bullet: '-', source: '- embedded list item 3' },
-          listItem({ source: '- embedded list item 3' }, paragraph('embedded list item 3')),
+          { bullet: '-', ...sourceAttrs('ul', '3:3-3:24', '  - embedded list item 3') },
+          listItem(
+            sourceAttrs('li', '3:3-3:24', '  - embedded list item 3'),
+            paragraph('embedded list item 3'),
+          ),
         ),
       ),
     ),
@@ -105,27 +78,36 @@ const bulletListDocWithMalformedSourcepos = () =>
 const bulletTaskListDoc = () =>
   doc(
     taskList(
-      {
-        bullet: '-',
-        source:
-          '- [ ] list item 1\n+ [x] checked list item 2\n  + [ ] embedded list item 1\n  - [x] checked embedded list item 2',
-      },
-      taskItem({ source: '- [ ] list item 1' }, paragraph('list item 1')),
+      { bullet: '-', ...sourceAttrs('ul', '1:1-4:36', BULLET_TASK_LIST_MARKDOWN) },
+      taskItem(sourceAttrs('li', '1:1-1:17', '- [ ] list item 1'), paragraph('list item 1')),
       taskItem(
         {
-          source:
+          ...sourceAttrs(
+            'li',
+            '2:1-4:36',
             '+ [x] checked list item 2\n  + [ ] embedded list item 1\n  - [x] checked embedded list item 2',
+          ),
           checked: true,
         },
         paragraph('checked list item 2'),
         taskList(
           {
             bullet: '+',
-            source: '+ [ ] embedded list item 1\n  - [x] checked embedded list item 2',
+            ...sourceAttrs(
+              'ul',
+              '3:3-4:36',
+              '  + [ ] embedded list item 1\n  - [x] checked embedded list item 2',
+            ),
           },
-          taskItem({ source: '+ [ ] embedded list item 1' }, paragraph('embedded list item 1')),
           taskItem(
-            { source: '- [x] checked embedded list item 2', checked: true },
+            sourceAttrs('li', '3:3-3:28', '  + [ ] embedded list item 1'),
+            paragraph('embedded list item 1'),
+          ),
+          taskItem(
+            {
+              ...sourceAttrs('li', '4:3-4:36', '  - [x] checked embedded list item 2'),
+              checked: true,
+            },
             paragraph('checked embedded list item 2'),
           ),
         ),
@@ -133,6 +115,62 @@ const bulletTaskListDoc = () =>
     ),
   );
 
+const paragraphsDoc = () =>
+  doc(
+    paragraph(
+      sourceAttrs(
+        'p',
+        '1:1-1:233',
+        'You could bold with **asterisks** or you could bold with __underscores__. You could even bold with <strong>strong</strong> or <b>b</b> html tags. You could add newlines in your paragraph, or `code` tags with `` nested `backticks` ``.',
+      ),
+      text('You could bold with '),
+      bold(sourceAttrs('strong', '1:21-1:33', '**asterisks**'), 'asterisks'),
+      text(' or you could bold with '),
+      bold(sourceAttrs('strong', '1:58-1:72', '__underscores__'), 'underscores'),
+      text('. You could even bold with '),
+      bold(sourceAttrs('strong'), 'strong'),
+      text(' or '),
+      bold(sourceAttrs('b'), 'b'),
+      text(' html tags. You could add newlines in your paragraph, or '),
+      code(sourceAttrs('code', '1:193-1:196', 'code'), 'code'),
+      text(' tags with '),
+      code(sourceAttrs('code', '1:211-1:230', ' nested `backticks` '), 'nested `backticks`'),
+      text('.'),
+    ),
+    paragraph(
+      sourceAttrs(
+        'p',
+        '3:1-3:144',
+        'You could italicise with *asterisks* or you could italicise with _underscores_. You could even italicise with <em>em</em> or <i>i</i> html tags.',
+      ),
+      text('You could italicise with '),
+      italic(sourceAttrs('em', '3:26-3:36', '*asterisks*'), 'asterisks'),
+      text(' or you could italicise with '),
+      italic(sourceAttrs('em', '3:66-3:78', '_underscores_'), 'underscores'),
+      text('. You could even italicise with '),
+      italic(sourceAttrs('em'), 'em'),
+      text(' or '),
+      italic(sourceAttrs('i'), 'i'),
+      text(' html tags.'),
+    ),
+    paragraph(
+      sourceAttrs(
+        'p',
+        '5:1-5:154',
+        "As long as you don't touch a paragraph, it will ~~discard~~ <s>destroy</s> <del>delete</del> <strike>remove</strike> preserve the original markdown style.",
+      ),
+      text("As long as you don't touch a paragraph, it will "),
+      strike(sourceAttrs('del', '5:49-5:59', '~~discard~~'), 'discard'),
+      text(' '),
+      strike({ ...sourceAttrs('s'), htmlTag: 's' }, 'destroy'),
+      text(' '),
+      strike(sourceAttrs('del'), 'delete'),
+      text(' '),
+      strike({ ...sourceAttrs('strike'), htmlTag: 'strike' }, 'remove'),
+      text(' preserve the original markdown style.'),
+    ),
+  );
+
 describe('content_editor/services/markdown_sourcemap', () => {
   describe('getFullSource', () => {
     it.each`
@@ -154,24 +192,63 @@ describe('content_editor/services/markdown_sourcemap', () => {
     });
   });
 
-  it.each`
-    description                               | sourceMarkdown               | sourceHTML                    | expectedDoc
-    ${'bullet list'}                          | ${BULLET_LIST_MARKDOWN}      | ${BULLET_LIST_HTML}           | ${bulletListDoc}
-    ${'bullet list with malformed sourcepos'} | ${BULLET_LIST_MARKDOWN}      | ${MALFORMED_BULLET_LIST_HTML} | ${bulletListDocWithMalformedSourcepos}
-    ${'bullet task list'}                     | ${BULLET_TASK_LIST_MARKDOWN} | ${BULLET_TASK_LIST_HTML}      | ${bulletTaskListDoc}
-  `(
-    'gets markdown source for a rendered $description',
-    async ({ sourceMarkdown, sourceHTML, expectedDoc }) => {
-      const { document } = await markdownDeserializer({
-        render: () => ({
-          body: sourceHTML,
-        }),
-      }).deserialize({
-        schema: tiptapEditor.schema,
-        markdown: sourceMarkdown,
-      });
-
-      expect(document.toJSON()).toEqual(expectedDoc().toJSON());
-    },
-  );
+  describe('when preserveMarkdown feature is enabled', () => {
+    beforeEach(() => {
+      gon.features = { preserveMarkdown: true };
+    });
+
+    afterEach(() => {
+      gon.features = {};
+    });
+
+    it.each`
+      description                               | sourceMarkdown               | sourceHTML                    | expectedDoc
+      ${'bullet list'}                          | ${BULLET_LIST_MARKDOWN}      | ${BULLET_LIST_HTML}           | ${bulletListDoc}
+      ${'bullet list with malformed sourcepos'} | ${BULLET_LIST_MARKDOWN}      | ${MALFORMED_BULLET_LIST_HTML} | ${bulletListDocWithMalformedSourcepos}
+      ${'bullet task list'}                     | ${BULLET_TASK_LIST_MARKDOWN} | ${BULLET_TASK_LIST_HTML}      | ${bulletTaskListDoc}
+      ${'paragraphs with inline elements'}      | ${PARAGRAPHS_MARKDOWN}       | ${PARAGRAPHS_HTML}            | ${paragraphsDoc}
+    `(
+      'gets markdown source for a rendered $description',
+      async ({ sourceMarkdown, sourceHTML, expectedDoc }) => {
+        const { document } = await markdownDeserializer({
+          render: () => ({
+            body: sourceHTML,
+          }),
+        }).deserialize({
+          schema: tiptapEditor.schema,
+          markdown: sourceMarkdown,
+        });
+
+        expect(document.content.toJSON()).toEqual(expectedDoc().content.toJSON());
+      },
+    );
+  });
+
+  describe('when preserveMarkdown feature is disabled', () => {
+    beforeEach(() => {
+      sourceAttrs.mockImplementation(() => ({}));
+    });
+
+    it.each`
+      description                               | sourceMarkdown               | sourceHTML                    | expectedDoc
+      ${'bullet list'}                          | ${BULLET_LIST_MARKDOWN}      | ${BULLET_LIST_HTML}           | ${bulletListDoc}
+      ${'bullet list with malformed sourcepos'} | ${BULLET_LIST_MARKDOWN}      | ${MALFORMED_BULLET_LIST_HTML} | ${bulletListDocWithMalformedSourcepos}
+      ${'bullet task list'}                     | ${BULLET_TASK_LIST_MARKDOWN} | ${BULLET_TASK_LIST_HTML}      | ${bulletTaskListDoc}
+      ${'paragraphs with inline elements'}      | ${PARAGRAPHS_MARKDOWN}       | ${PARAGRAPHS_HTML}            | ${paragraphsDoc}
+    `(
+      'does not include any source information for $description',
+      async ({ sourceMarkdown, sourceHTML, expectedDoc }) => {
+        const { document } = await markdownDeserializer({
+          render: () => ({
+            body: sourceHTML,
+          }),
+        }).deserialize({
+          schema: tiptapEditor.schema,
+          markdown: sourceMarkdown,
+        });
+
+        expect(document.content.toJSON()).toEqual(expectedDoc().content.toJSON());
+      },
+    );
+  });
 });

spec/frontend/content_editor/test_constants.js

@@ -59,3 +59,66 @@ export const RESOLVED_USER_HTML =
 
 export const RESOLVED_VULNERABILITY_HTML =
   '<p data-sourcepos="1:1-1:56" dir="auto"><a href="/gitlab-org/gitlab-shell/-/security/vulnerabilities/1" data-reference-type="vulnerability" data-original="[vulnerability:1]" data-link="false" data-link-reference="false" data-project="2" data-vulnerability="1" data-container="body" data-placement="top" title="oh no!" class="gfm gfm-vulnerability has-tooltip">[vulnerability:1]</a> <a href="/gitlab-org/gitlab-shell/-/security/vulnerabilities/1" data-reference-type="vulnerability" data-original="[vulnerability:1]" data-link="false" data-link-reference="false" data-project="2" data-vulnerability="1" data-container="body" data-placement="top" title="oh no!" class="gfm gfm-vulnerability has-tooltip">[vulnerability:1]</a>+ <a href="/gitlab-org/gitlab-shell/-/security/vulnerabilities/1" data-reference-type="vulnerability" data-original="[vulnerability:1]" data-link="false" data-link-reference="false" data-project="2" data-vulnerability="1" data-container="body" data-placement="top" title="oh no!" class="gfm gfm-vulnerability has-tooltip">[vulnerability:1]</a>+s</p>';
+
+export const BULLET_LIST_MARKDOWN = `+ list item 1
++ list item 2
+  - embedded list item 3`;
+
+export const BULLET_LIST_HTML = `<ul data-sourcepos="1:1-3:24" dir="auto">
+  <li data-sourcepos="1:1-1:13">list item 1</li>
+  <li data-sourcepos="2:1-3:24">list item 2
+    <ul data-sourcepos="3:3-3:24">
+      <li data-sourcepos="3:3-3:24">embedded list item 3</li>
+    </ul>
+  </li>
+</ul>`;
+
+export const MALFORMED_BULLET_LIST_HTML =
+  `<ul data-sourcepos="1:1-3:24" dir="auto">
+  <li data-sourcepos="1:1-1:13">list item 1</li>` +
+  // below line has malformed sourcepos
+  `<li data-sourcepos="5:1-5:24">list item 2
+    <ul data-sourcepos="3:3-3:24">
+      <li data-sourcepos="3:3-3:24">embedded list item 3</li>
+    </ul>
+  </li>
+</ul>`;
+
+export const BULLET_TASK_LIST_MARKDOWN = `- [ ] list item 1
++ [x] checked list item 2
+  + [ ] embedded list item 1
+  - [x] checked embedded list item 2`;
+
+export const BULLET_TASK_LIST_HTML = `<ul data-sourcepos="1:1-4:36" class="task-list" dir="auto">
+  <li data-sourcepos="1:1-1:17" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> list item 1</li>
+  <li data-sourcepos="2:1-4:36" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> checked list item 2
+    <ul data-sourcepos="3:3-4:36" class="task-list">
+      <li data-sourcepos="3:3-3:28" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> embedded list item 1</li>
+      <li data-sourcepos="4:3-4:36" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> checked embedded list item 2</li>
+    </ul>
+  </li>
+</ul>`;
+
+export const PARAGRAPHS_MARKDOWN = `You could bold with **asterisks** or you could bold with __underscores__. You could even bold with <strong>strong</strong> or <b>b</b> html tags. You could add newlines in your paragraph, or \`code\` tags with \`\` nested \`backticks\` \`\`.
+
+You could italicise with *asterisks* or you could italicise with _underscores_. You could even italicise with <em>em</em> or <i>i</i> html tags.
+
+As long as you don't touch a paragraph, it will ~~discard~~ <s>destroy</s> <del>delete</del> <strike>remove</strike> preserve the original markdown style.`;
+
+export const PARAGRAPHS_HTML = `<p data-sourcepos="1:1-1:233" dir="auto">
+  You could bold with <strong data-sourcepos="1:21-1:33">asterisks</strong> or you could bold with
+  <strong data-sourcepos="1:58-1:72">underscores</strong>. You could even bold with
+  <strong>strong</strong> or <b>b</b> html tags. You could add newlines in your paragraph,
+  or <code data-sourcepos="1:193-1:196">code</code> tags with
+  <code data-sourcepos="1:211-1:230">nested \`backticks\`</code>.
+</p>
+<p data-sourcepos="3:1-3:144" dir="auto">
+  You could italicise with <em data-sourcepos="3:26-3:36">asterisks</em> or
+  you could italicise with <em data-sourcepos="3:66-3:78">underscores</em>.
+  You could even italicise with <em>em</em> or <i>i</i> html tags.
+</p>
+<p data-sourcepos="5:1-5:154" dir="auto">
+  As long as you don't touch a paragraph, it will
+  <del data-sourcepos="5:49-5:59">discard</del> <s>destroy</s> <del>delete</del>
+  <strike>remove</strike> preserve the original markdown style.
+</p>`;