@dhis2/analytics 26.6.14 → 26.7.1

package/build/cjs/components/RichText/Editor/__tests__/convertCtrlKey.spec.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _markdownHandler = require("../markdownHandler.js");
+describe('convertCtrlKey', () => {
+  it('does not trigger callback if no ctrl key', () => {
+    const cb = jest.fn();
+    const e = {
+      key: 'j',
+      preventDefault: () => {}
+    };
+    (0, _markdownHandler.convertCtrlKey)(e, cb);
+    expect(cb).not.toHaveBeenCalled();
+  });
+  describe('when ctrl key + "b" pressed', () => {
+    it('triggers callback with open/close markers and caret pos in between', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        ctrlKey: true,
+        target: {
+          selectionStart: 0,
+          selectionEnd: 0,
+          value: 'rainbow dash'
+        },
+        preventDefault: () => {}
+      };
+      (0, _markdownHandler.convertCtrlKey)(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('** rainbow dash', 1);
+    });
+    it('triggers callback with open/close markers and caret pos in between (end of text)', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        ctrlKey: true,
+        target: {
+          selectionStart: 22,
+          selectionEnd: 22,
+          value: 'rainbow dash is purple'
+        },
+        preventDefault: () => {}
+      };
+      (0, _markdownHandler.convertCtrlKey)(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('rainbow dash is purple **', 24);
+    });
+    it('triggers callback with open/close markers mid-text with surrounding spaces (1)', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        metaKey: true,
+        target: {
+          selectionStart: 4,
+          // caret located just before "quick"
+          selectionEnd: 4,
+          value: 'the quick brown fox'
+        },
+        preventDefault: () => {}
+      };
+      (0, _markdownHandler.convertCtrlKey)(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('the ** quick brown fox', 5);
+    });
+    it('triggers callback with open/close markers mid-text with surrounding spaces (2)', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        metaKey: true,
+        target: {
+          selectionStart: 3,
+          // caret located just after "the"
+          selectionEnd: 3,
+          value: 'the quick brown fox'
+        },
+        preventDefault: () => {}
+      };
+      (0, _markdownHandler.convertCtrlKey)(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('the ** quick brown fox', 5);
+    });
+    it('triggers callback with correct double markers and padding', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'b',
+        metaKey: true,
+        target: {
+          selectionStart: 9,
+          // between the underscores
+          selectionEnd: 9,
+          value: 'rainbow __'
+        },
+        preventDefault: () => {}
+      };
+      (0, _markdownHandler.convertCtrlKey)(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('rainbow _**_', 10);
+    });
+    describe('selected text', () => {
+      it('triggers callback with open/close markers around text and caret pos after closing marker', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 5,
+            // "ow da" is selected
+            selectionEnd: 10,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        (0, _markdownHandler.convertCtrlKey)(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainb *ow da* sh is purple', 13);
+      });
+      it('triggers callback with open/close markers around text when starting at beginning of line', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 0,
+            // "rainbow" is selected
+            selectionEnd: 7,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        (0, _markdownHandler.convertCtrlKey)(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('*rainbow* dash is purple', 9);
+      });
+      it('triggers callback with open/close markers around text when ending at end of line', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 16,
+            // "purple" is selected
+            selectionEnd: 22,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        (0, _markdownHandler.convertCtrlKey)(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainbow dash is *purple*', 24);
+      });
+      it('triggers callback with open/close markers around word', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 8,
+            // "dash" is selected
+            selectionEnd: 12,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        (0, _markdownHandler.convertCtrlKey)(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainbow *dash* is purple', 14);
+      });
+      it('triggers callback with leading/trailing spaces trimmed from selection', () => {
+        const cb = jest.fn();
+        const e = {
+          key: 'b',
+          metaKey: true,
+          target: {
+            selectionStart: 8,
+            // " dash " is selected (note leading and trailing space)
+            selectionEnd: 13,
+            value: 'rainbow dash is purple'
+          },
+          preventDefault: () => {}
+        };
+        (0, _markdownHandler.convertCtrlKey)(e, cb);
+        expect(cb).toHaveBeenCalled();
+        expect(cb).toHaveBeenCalledWith('rainbow *dash* is purple', 14);
+      });
+    });
+  });
+  describe('when ctrl key + "i" pressed', () => {
+    it('triggers callback with open/close italics markers and caret pos in between', () => {
+      const cb = jest.fn();
+      const e = {
+        key: 'i',
+        ctrlKey: true,
+        target: {
+          selectionStart: 0,
+          selectionEnd: 0,
+          value: ''
+        },
+        preventDefault: () => {}
+      };
+      (0, _markdownHandler.convertCtrlKey)(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('__', 1);
+    });
+  });
+});

package/build/cjs/components/{Interpretations/common/RichTextEditor → RichText/Editor}/markdownHandler.js

@@ -92,23 +92,29 @@ const insertMarkdown = (markdown, target, cb) => {
   if (start === end) {
     //no text
     const valueArr = value.split('');
-    let markdown = marker.prefix;
+    let markdownString = marker.prefix;
     if (marker.postfix) {
-      markdown += marker.postfix;
+      markdownString += marker.postfix;
     }
-    valueArr.splice(start, 0, padMarkers(markdown));
+    valueArr.splice(start, 0, padMarkers(markdownString));
     newValue = valueArr.join('');
+
+    // for smileys, put the caret after a space
+    if (Object.keys(emojis).includes(markdown)) {
+      newValue += ' ';
+      caretPos = caretPos + newValue.length - 1;
+    }
   } else {
     const text = value.slice(start, end);
     const trimmedText = trim(text); // TODO really needed?
 
     // adjust caretPos based on trimmed text selection
     caretPos = caretPos - (text.length - trimmedText.length) + 1;
-    let markdown = `${marker.prefix}${trimmedText}`;
+    let markdownString = `${marker.prefix}${trimmedText}`;
     if (marker.postfix) {
-      markdown += marker.postfix;
+      markdownString += marker.postfix;
     }
-    newValue = [value.slice(0, start), padMarkers(markdown), value.slice(end)].join('');
+    newValue = [value.slice(0, start), padMarkers(markdownString), value.slice(end)].join('');
   }
   cb(newValue, caretPos);
 };

package/build/cjs/components/{Interpretations/common/RichTextEditor/styles/RichTextEditor.style.js → RichText/Editor/styles/Editor.style.js}

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tooltipAnchorClasses = exports.toolbarClasses = exports.mainClasses = exports.emojisPopoverClasses = void 0;
 var _ui = require("@dhis2/ui");
-const mainClasses = [".container.jsx-1273817287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}", `.preview.jsx-1273817287{font-size:14px;line-height:19px;color:${_ui.colors.grey900};}`, `.textarea.jsx-1273817287{width:100%;box-sizing:border-box;padding:${_ui.spacers.dp8} ${_ui.spacers.dp12};color:${_ui.colors.grey900};background-color:${_ui.colors.white};border:1px solid ${_ui.colors.grey500};border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:${_ui.spacers.dp16};-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, `.textarea.jsx-1273817287:focus{outline:none;box-shadow:0 0 0 3px ${_ui.theme.focus};width:calc(100% - 3px);}`, `.textarea.jsx-1273817287:disabled{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey500};color:${_ui.theme.disabled};cursor:not-allowed;}`];
+const mainClasses = [".container.jsx-185829738{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;}", `.preview.jsx-185829738{padding:${_ui.spacers.dp8} ${_ui.spacers.dp12};font-size:14px;line-height:${_ui.spacers.dp16};color:${_ui.colors.grey900};overflow-y:auto;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}`, ".edit.jsx-185829738{width:100%;height:100%;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}", `.textarea.jsx-185829738{width:100%;height:100%;box-sizing:border-box;padding:${_ui.spacers.dp8} 15px;color:${_ui.colors.grey900};background-color:${_ui.colors.white};border:1px solid ${_ui.colors.grey500};border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:${_ui.spacers.dp16};-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;resize:none;}`, ".textarea.resizable.jsx-185829738{resize:vertical;}", `.textarea.jsx-185829738:focus{outline:none;box-shadow:0 0 0 3px ${_ui.theme.focus};width:calc(100% - 6px);height:calc(100% - 3px);padding:${_ui.spacers.dp8} ${_ui.spacers.dp12};margin-left:3px;}`, `.textarea.jsx-185829738:disabled{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey500};color:${_ui.theme.disabled};cursor:not-allowed;}`];
 exports.mainClasses = mainClasses;
-mainClasses.__hash = "1273817287";
+mainClasses.__hash = "185829738";
 const toolbarClasses = [`.toolbar.jsx-2267496677{background:${_ui.colors.grey050};border-radius:3px;border:1px solid ${_ui.colors.grey300};margin-bottom:${_ui.spacers.dp4};}`, `.actionsWrapper.jsx-2267496677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:${_ui.spacers.dp4};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:${_ui.spacers.dp4};}`, `.mainActions.jsx-2267496677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_ui.spacers.dp4};margin-top:${_ui.spacers.dp2};}`, ".sideActions.jsx-2267496677{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `.previewWrapper.jsx-2267496677{margin:${_ui.spacers.dp4};text-align:right;}`];
 exports.toolbarClasses = toolbarClasses;
 toolbarClasses.__hash = "2267496677";

package/build/cjs/components/RichText/Parser/MdParser.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MdParser = void 0;
+var _markdownIt = _interopRequireDefault(require("markdown-it"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const emojiDb = {
+  ':-)': '\u{1F642}',
+  ':)': '\u{1F642}',
+  ':-(': '\u{1F641}',
+  ':(': '\u{1F641}',
+  ':+1': '\u{1F44D}',
+  ':-1': '\u{1F44E}'
+};
+const codes = {
+  bold: {
+    name: 'bold',
+    char: '*',
+    domEl: 'strong',
+    encodedChar: 0x2a,
+    // see https://regex101.com/r/evswdV/8 for explanation of regexp
+    regexString: '\\B\\*((?!\\s)[^*]+(?:\\b|[^*\\s]))\\*\\B',
+    contentFn: val => val
+  },
+  italic: {
+    name: 'italic',
+    char: '_',
+    domEl: 'em',
+    encodedChar: 0x5f,
+    // see https://regex101.com/r/p6LpjK/6 for explanation of regexp
+    regexString: '\\b_((?!\\s)[^_]+(?:\\B|[^_\\s]))_\\b',
+    contentFn: val => val
+  },
+  emoji: {
+    name: 'emoji',
+    char: ':',
+    domEl: 'span',
+    encodedChar: 0x3a,
+    regexString: '^(:-\\)|:\\)|:\\(|:-\\(|:\\+1|:-1)',
+    contentFn: val => emojiDb[val]
+  }
+};
+let linksInText;
+const markerIsInLinkText = pos => linksInText.some(link => pos >= link.index && pos <= link.lastIndex);
+const parse = code => (state, silent) => {
+  if (silent) {
+    return false;
+  }
+  const start = state.pos;
+
+  // skip parsing emphasis if marker is within a link
+  if (markerIsInLinkText(start)) {
+    return false;
+  }
+  const marker = state.src.charCodeAt(start);
+
+  // marker character: "_", "*", ":"
+  if (marker !== codes[code].encodedChar) {
+    return false;
+  }
+  const MARKER_REGEX = new RegExp(codes[code].regexString);
+  const token = state.src.slice(start);
+  if (MARKER_REGEX.test(token)) {
+    const markerMatch = token.match(MARKER_REGEX);
+
+    // skip parsing sections where the marker is not at the start of the token
+    if (markerMatch.index !== 0) {
+      return false;
+    }
+    const text = markerMatch[1];
+    state.push(`${codes[code].domEl}_open`, codes[code].domEl, 1);
+    const t = state.push('text', '', 0);
+    t.content = codes[code].contentFn(text);
+    state.push(`${codes.bold.domEl}_close`, codes[code].domEl, -1);
+    state.pos += markerMatch[0].length;
+    return true;
+  }
+  return false;
+};
+class MdParser {
+  constructor() {
+    // disable all rules, enable autolink for URLs and email addresses
+    const md = new _markdownIt.default('zero', {
+      linkify: true,
+      breaks: true
+    });
+
+    // *bold* -> <strong>bold</strong>
+    md.inline.ruler.push('strong', parse(codes.bold.name));
+
+    // _italic_ -> <em>italic</em>
+    md.inline.ruler.push('italic', parse(codes.italic.name));
+
+    // :-) :) :-( :( :+1 :-1 -> <span>[unicode]</span>
+    md.inline.ruler.push('emoji', parse(codes.emoji.name));
+    md.enable(['heading', 'link', 'linkify', 'list', 'newline', 'strong', 'italic', 'emoji']);
+    this.md = md;
+  }
+  render(text) {
+    linksInText = this.md.linkify.match(text) || [];
+    return this.md.render(text);
+  }
+}
+exports.MdParser = MdParser;

package/build/cjs/components/RichText/Parser/Parser.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Parser = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _MdParser = require("./MdParser.js");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Parser = _ref => {
+  let {
+    children,
+    style
+  } = _ref;
+  const MdParserInstance = (0, _react.useMemo)(() => new _MdParser.MdParser(), []);
+  return children ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      ...style
+    },
+    dangerouslySetInnerHTML: {
+      __html: MdParserInstance.render(children)
+    }
+  }) : null;
+};
+exports.Parser = Parser;
+Parser.defaultProps = {
+  style: null
+};
+Parser.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
+  style: _propTypes.default.object
+};

package/build/cjs/components/RichText/Parser/__tests__/MdParser.spec.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _MdParser = require("../MdParser.js");
+const Parser = new _MdParser.MdParser();
+describe('MdParser class', () => {
+  it('converts text into HTML', () => {
+    const inlineTests = [['_italic_', '<em>italic</em>'], ['*bold*', '<strong>bold</strong>'], ['_ not italic because there is a space _', '_ not italic because there is a space _'], [':-)', '<span>\u{1F642}</span>'], [':)', '<span>\u{1F642}</span>'], [':-(', '<span>\u{1F641}</span>'], [':(', '<span>\u{1F641}</span>'], [':+1', '<span>\u{1F44D}</span>'], [':-1', '<span>\u{1F44E}</span>'], ['mixed _italic_ *bold* and :+1', 'mixed <em>italic</em> <strong>bold</strong> and <span>\u{1F44D}</span>'], ['_italic with * inside_', '<em>italic with * inside</em>'], ['*bold with _ inside*', '<strong>bold with _ inside</strong>'],
+    // italic marker followed by : should work
+    ['_italic_:', '<em>italic</em>:'], ['_italic_: some text, *bold*: some other text', '<em>italic</em>: some text, <strong>bold</strong>: some other text'],
+    // bold marker followed by : should work
+    ['*bold*:', '<strong>bold</strong>:'], ['*bold*: some text, _italic_: some other text', '<strong>bold</strong>: some text, <em>italic</em>: some other text'],
+    // italic marker inside an italic string not allowed
+    ['_italic with _ inside_', '_italic with _ inside_'],
+    // bold marker inside a bold string not allowed
+    ['*bold with * inside*', '*bold with * inside*'], ['_multiple_ italic in the _same line_', '<em>multiple</em> italic in the <em>same line</em>'],
+    // nested italic/bold combinations not allowed
+    ['_italic with *bold* inside_', '<em>italic with *bold* inside</em>'], ['*bold with _italic_ inside*', '<strong>bold with _italic_ inside</strong>'], ['text with : and :)', 'text with : and <span>\u{1F642}</span>'], ['(parenthesis and :))', '(parenthesis and <span>\u{1F642}</span>)'], [':((parenthesis:))', '<span>\u{1F641}</span>(parenthesis<span>\u{1F642}</span>)'], [':+1+1', '<span>\u{1F44D}</span>+1'], ['-1:-1', '-1<span>\u{1F44E}</span>'],
+    // links
+    ['example.com/path', '<a href="http://example.com/path">example.com/path</a>'],
+    // not recognized links with italic marker inside not converted
+    ['example_with_underscore.com/path', 'example_with_underscore.com/path'], ['example_with_underscore.com/path_with_underscore', 'example_with_underscore.com/path_with_underscore'],
+    // markers around non-recognized links
+    ['link example_with_underscore.com/path should _not_ be converted', 'link example_with_underscore.com/path should <em>not</em> be converted'], ['link example_with_underscore.com/path should *not* be converted', 'link example_with_underscore.com/path should <strong>not</strong> be converted'],
+    // italic marker inside links not converted
+    ['example.com/path_with_underscore', '<a href="http://example.com/path_with_underscore">example.com/path_with_underscore</a>'], ['_italic_ and *bold* with a example.com/link_with_underscore', '<em>italic</em> and <strong>bold</strong> with a <a href="http://example.com/link_with_underscore">example.com/link_with_underscore</a>'], ['example.com/path with *bold* after :)', '<a href="http://example.com/path">example.com/path</a> with <strong>bold</strong> after <span>\u{1F642}</span>'], ['_before_ example.com/path_with_underscore *after* :)', '<em>before</em> <a href="http://example.com/path_with_underscore">example.com/path_with_underscore</a> <strong>after</strong> <span>\u{1F642}</span>'],
+    // italic/bold markers right after non-word characters
+    ['_If % of ART retention rate after 12 months >90(%)_: Sustain the efforts.', '<em>If % of ART retention rate after 12 months &gt;90(%)</em>: Sustain the efforts.'], ['*If % of ART retention rate after 12 months >90(%)*: Sustain the efforts.', '<strong>If % of ART retention rate after 12 months &gt;90(%)</strong>: Sustain the efforts.']];
+    inlineTests.forEach(test => {
+      const renderedText = Parser.render(test[0]);
+      expect(renderedText).toEqual(`<p>${test[1]}</p>\n`);
+    });
+    const blockTests = [
+    // heading
+    ['# Heading 1', '<h1>Heading 1</h1>'], ['## Heading 2', '<h2>Heading 2</h2>'], ['### Heading 3', '<h3>Heading 3</h3>'], ['#### Heading 4', '<h4>Heading 4</h4>'], ['##### Heading 5', '<h5>Heading 5</h5>'], ['###### Heading 6', '<h6>Heading 6</h6>'], ['# *Bold head*', '<h1><strong>Bold head</strong></h1>'], ['## _Italic title_', '<h2><em>Italic title</em></h2>'], ['### *Bold* and _italic_ title', '<h3><strong>Bold</strong> and <em>italic</em> title</h3>'],
+    // lists
+    ['* first\n* second\n* third', '<ul>\n<li>first</li>\n<li>second</li>\n<li>third</li>\n</ul>'], ['1. one\n1. two\n1. three\n', '<ol>\n<li>one</li>\n<li>two</li>\n<li>three</li>\n</ol>'], ['* *first*\n* second\n* _third_', '<ul>\n<li><strong>first</strong></li>\n<li>second</li>\n<li><em>third</em></li>\n</ul>']];
+    blockTests.forEach(test => {
+      const renderedText = Parser.render(test[0]);
+      expect(renderedText).toEqual(`${test[1]}\n`);
+    });
+  });
+});

package/build/cjs/components/RichText/Parser/__tests__/Parser.spec.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _enzyme = require("enzyme");
+var _react = _interopRequireDefault(require("react"));
+var _Parser = require("../Parser.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+jest.mock('../MdParser.js', () => ({
+  MdParser: jest.fn().mockImplementation(() => {
+    return {
+      render: () => 'converted text'
+    };
+  })
+}));
+describe('RichText: Parser component', () => {
+  let richTextParser;
+  const defaultProps = {
+    style: {
+      color: 'blue',
+      whiteSpace: 'pre-line'
+    }
+  };
+  const renderComponent = (props, text) => {
+    return (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_Parser.Parser, props, text));
+  };
+  it('should have rendered a result', () => {
+    richTextParser = renderComponent({}, 'test');
+    expect(richTextParser).toHaveLength(1);
+  });
+  it('should have rendered a result with the style prop', () => {
+    richTextParser = renderComponent(defaultProps, 'test prop');
+    expect(richTextParser.props().style).toEqual(defaultProps.style);
+  });
+  it('should have rendered content', () => {
+    richTextParser = renderComponent({}, 'plain text');
+    expect(richTextParser.html()).toEqual('<div>converted text</div>');
+  });
+  it('should return null if no children is passed', () => {
+    richTextParser = renderComponent({}, undefined);
+    expect(richTextParser.html()).toBe(null);
+  });
+});

package/build/cjs/components/RichText/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RichTextEditor", {
+  enumerable: true,
+  get: function () {
+    return _Editor.Editor;
+  }
+});
+Object.defineProperty(exports, "RichTextMdParser", {
+  enumerable: true,
+  get: function () {
+    return _MdParser.MdParser;
+  }
+});
+Object.defineProperty(exports, "RichTextParser", {
+  enumerable: true,
+  get: function () {
+    return _Parser.Parser;
+  }
+});
+var _Editor = require("./Editor/Editor.js");
+var _Parser = require("./Parser/Parser.js");
+var _MdParser = require("./Parser/MdParser.js");

package/build/cjs/components/{Interpretations/common/UserMention → UserMention}/UserMentionWrapper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.UserMentionWrapper = void 0;
+exports.UserMentionWrapper = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
@@ -38,6 +38,7 @@ const UserMentionWrapper = _ref => {
     inputReference,
     onUserSelect
   } = _ref;
+  const [listIsOpen, setListIsOpen] = (0, _react.useState)(false);
   const [captureText, setCaptureText] = (0, _react.useState)(false);
   const [capturedText, setCapturedText] = (0, _react.useState)('');
   const [cloneText, setCloneText] = (0, _react.useState)('');
@@ -53,6 +54,7 @@ const UserMentionWrapper = _ref => {
     searchText: capturedText
   });
   const reset = () => {
+    setListIsOpen(false);
     setCaptureText(false);
     setCapturedText('');
     setCloneText('');
@@ -61,6 +63,12 @@ const UserMentionWrapper = _ref => {
     clear();
   };
 
+  // focus the input/textarea when the user list is closed by clicking above the input/textarea
+  const onClick = () => inputReference.current.focus();
+
+  // close the user list when clicking in the input/textarea or outside of it (input/textarea blur)
+  const onUserListClose = () => reset();
+
   // event bubbles up from the input/textarea
   const onInput = _ref2 => {
     let {
@@ -73,7 +81,7 @@ const UserMentionWrapper = _ref => {
     if (captureText) {
       clear();
       const spacePosition = value.indexOf(' ', captureStartPosition - 1);
-      const filterValue = value.substring(captureStartPosition, spacePosition > 0 ? spacePosition : selectionEnd + 1);
+      const filterValue = value.substring(captureStartPosition, spacePosition > 0 ? spacePosition : selectionEnd + 1).replace(/\n+/, '');
       if (filterValue !== capturedText) {
         setCapturedText(filterValue);
       } else if (filterValue.length === 0) {
@@ -93,6 +101,7 @@ const UserMentionWrapper = _ref => {
       selectionStart
     } = target;
     if (!captureText && key === '@') {
+      setListIsOpen(true);
       setCaptureText(true);
       setCaptureStartPosition(selectionStart + 1);
       setCloneText(target.value.substring(0, selectionStart) + '@');
@@ -144,17 +153,20 @@ const UserMentionWrapper = _ref => {
     // position the cursor at the end
     requestAnimationFrame(() => inputReference.current.setSelectionRange(-1, -1), 0);
   };
-  const onClick = user => () => onSelect(user);
+  const onUserClick = user => () => onSelect(user);
   return /*#__PURE__*/_react.default.createElement("div", {
     onKeyDown: onKeyDown,
     onInput: onInput,
+    onClick: onClick,
     className: `jsx-${_UserMentionWrapperStyle.userMentionWrapperClasses.__hash}` + " " + "wrapper"
   }, children, /*#__PURE__*/_react.default.createElement("div", {
     className: `jsx-${_UserMentionWrapperStyle.userMentionWrapperClasses.__hash}` + " " + "clone"
-  }, /*#__PURE__*/_react.default.createElement("pre", {
+  }, /*#__PURE__*/_react.default.createElement("p", {
     ref: cloneRef,
     className: `jsx-${_UserMentionWrapperStyle.userMentionWrapperClasses.__hash}`
-  }, cloneText)), captureText && /*#__PURE__*/_react.default.createElement(_ui.Portal, null, /*#__PURE__*/_react.default.createElement(_ui.Popper, {
+  }, cloneText)), listIsOpen && /*#__PURE__*/_react.default.createElement(_ui.Layer, {
+    onBackdropClick: onUserListClose
+  }, /*#__PURE__*/_react.default.createElement(_ui.Popper, {
     reference: getVirtualPopperReference(cloneRef),
     placement: "top-start"
   }, /*#__PURE__*/_react.default.createElement(_ui.Card, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -175,7 +187,7 @@ const UserMentionWrapper = _ref => {
   }), !fetching && users.length > 0 && /*#__PURE__*/_react.default.createElement(_UserList.UserList, {
     users: users,
     selectedUserIndex: selectedUserIndex,
-    onUserClick: onClick,
+    onUserClick: onUserClick,
     pager: pager
   }), capturedText && !fetching && users.length === 0 && /*#__PURE__*/_react.default.createElement(_ui.MenuItem, {
     dense: true,
@@ -193,6 +205,4 @@ UserMentionWrapper.propTypes = {
   inputReference: _propTypes.default.object.isRequired,
   onUserSelect: _propTypes.default.func.isRequired,
   children: _propTypes.default.node
-};
-var _default = UserMentionWrapper;
-exports.default = _default;
+};

package/build/cjs/components/{Interpretations/common/UserMention → UserMention}/styles/UserMentionWrapper.style.js

@@ -13,9 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * to emulate the styles of the textarea. If we decide to make
  * changes there, they should be refelcted here too.
  */
-const userMentionWrapperClasses = [".wrapper.jsx-1289989717{position:relative;}", `.clone.jsx-1289989717{position:absolute;visibility:hidden;inset:0;box-sizing:border-box;padding:${_ui.spacers.dp8} ${_ui.spacers.dp12};border:1px solid ${_ui.colors.grey500};font-size:14px;line-height:${_ui.spacers.dp16};z-index:1;pointer-events:none;}`, ".clone.jsx-1289989717>pre.jsx-1289989717{display:inline;word-wrap:break-word;overflow-wrap:break-word;font:inherit;margin:0;}", `.container.jsx-1289989717{background-color:${_ui.colors.white};max-height:180px;overflow:auto;}`];
+const userMentionWrapperClasses = [".wrapper.jsx-2386066169{width:100%;height:100%;position:relative;}", `.clone.jsx-2386066169{position:absolute;visibility:hidden;inset:0;box-sizing:border-box;padding:${_ui.spacers.dp8} 15px;border:1px solid ${_ui.colors.grey500};font-size:14px;line-height:${_ui.spacers.dp16};z-index:1;pointer-events:none;}`, ".clone.jsx-2386066169>p.jsx-2386066169{display:inline;word-wrap:break-word;overflow-wrap:break-word;font:inherit;margin:0;white-space:break-spaces;}", `.container.jsx-2386066169{background-color:${_ui.colors.white};max-height:180px;overflow:auto;}`];
 exports.userMentionWrapperClasses = userMentionWrapperClasses;
-userMentionWrapperClasses.__hash = "1289989717";
+userMentionWrapperClasses.__hash = "2386066169";
 const resolvedHeaderStyle = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "4275958396"

package/build/cjs/components/{Interpretations/common/UserMention → UserMention}/useUserSearchResults.js

@@ -53,10 +53,10 @@ const useUserSearchResults = _ref2 => {
     return () => debouncedRefetch.cancel();
   }, [searchText, debouncedRefetch]);
   (0, _react.useEffect)(() => {
-    if (data) {
+    if (fetching === false && data) {
       setData(data.users);
     }
-  }, [data]);
+  }, [data, fetching]);
   return {
     users,
     pager,