@dhis2/analytics 26.6.14 → 26.7.1

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

@@ -1,12 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 import i18n from '@dhis2/d2-i18n';
-import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text';
-import { Button, Popover, Tooltip, Field, IconAt24, IconFaceAdd24, IconLink24, IconTextBold24, IconTextItalic24, colors } from '@dhis2/ui';
+import { Button, Popover, Tooltip, Help, IconAt24, IconFaceAdd24, IconLink24, IconTextBold24, IconTextItalic24, colors } from '@dhis2/ui';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useRef, useEffect, useState } from 'react';
-import { UserMentionWrapper } from '../UserMention/UserMentionWrapper.js';
+import { UserMentionWrapper } from '../../UserMention/UserMentionWrapper.js';
+import { Parser } from '../Parser/Parser.js';
 import { convertCtrlKey, insertMarkdown, emojis, EMOJI_SMILEY_FACE, EMOJI_SAD_FACE, EMOJI_THUMBS_UP, EMOJI_THUMBS_DOWN, BOLD, ITALIC, LINK, MENTION } from './markdownHandler.js';
-import { mainClasses, toolbarClasses, tooltipAnchorClasses, emojisPopoverClasses } from './styles/RichTextEditor.style.js';
+import { mainClasses, toolbarClasses, tooltipAnchorClasses, emojisPopoverClasses } from './styles/Editor.style.js';
 const EmojisPopover = _ref => {
   let {
     onInsertMarkdown,
@@ -21,16 +22,16 @@ const EmojisPopover = _ref => {
   }, /*#__PURE__*/React.createElement("li", {
     onClick: () => onInsertMarkdown(EMOJI_SMILEY_FACE),
     className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(RichTextParser, null, emojis[EMOJI_SMILEY_FACE])), /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_SMILEY_FACE])), /*#__PURE__*/React.createElement("li", {
     onClick: () => onInsertMarkdown(EMOJI_SAD_FACE),
     className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(RichTextParser, null, emojis[EMOJI_SAD_FACE])), /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_SAD_FACE])), /*#__PURE__*/React.createElement("li", {
     onClick: () => onInsertMarkdown(EMOJI_THUMBS_UP),
     className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(RichTextParser, null, emojis[EMOJI_THUMBS_UP])), /*#__PURE__*/React.createElement("li", {
+  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_THUMBS_UP])), /*#__PURE__*/React.createElement("li", {
     onClick: () => onInsertMarkdown(EMOJI_THUMBS_DOWN),
     className: `jsx-${emojisPopoverClasses.__hash}`
-  }, /*#__PURE__*/React.createElement(RichTextParser, null, emojis[EMOJI_THUMBS_DOWN]))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, /*#__PURE__*/React.createElement(Parser, null, emojis[EMOJI_THUMBS_DOWN]))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: emojisPopoverClasses.__hash
   }, emojisPopoverClasses));
 };
@@ -167,31 +168,45 @@ Toolbar.propTypes = {
   onTogglePreview: PropTypes.func.isRequired,
   disabled: PropTypes.bool
 };
-export const RichTextEditor = /*#__PURE__*/forwardRef((_ref5, externalRef) => {
+export const Editor = /*#__PURE__*/forwardRef((_ref5, externalRef) => {
   let {
     value,
     disabled,
     inputPlaceholder,
     onChange,
     errorText,
-    helpText
+    helpText,
+    initialFocus,
+    resizable
   } = _ref5;
   const [previewMode, setPreviewMode] = useState(false);
   const internalRef = useRef();
   const textareaRef = externalRef || internalRef;
+  const caretPosRef = useRef(undefined);
+  const insertMarkdownCallback = (text, caretPos) => {
+    caretPosRef.current = caretPos;
+    onChange(text);
+    textareaRef.current.focus();
+  };
   useEffect(() => {
-    var _textareaRef$current;
-    return (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 ? void 0 : _textareaRef$current.focus();
-  }, [textareaRef]);
+    if (initialFocus) {
+      var _textareaRef$current;
+      (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 ? void 0 : _textareaRef$current.focus();
+    }
+  }, [initialFocus, textareaRef]);
+  useEffect(() => {
+    if (caretPosRef.current) {
+      var _textareaRef$current2;
+      (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 ? void 0 : _textareaRef$current2.setSelectionRange(caretPosRef.current, caretPosRef.current);
+      caretPosRef.current = undefined;
+    }
+  }, [value, textareaRef]);
   return /*#__PURE__*/React.createElement("div", {
+    "data-test": "@dhis2-analytics-richtexteditor",
     className: `jsx-${mainClasses.__hash}` + " " + "container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
     onInsertMarkdown: markdown => {
-      insertMarkdown(markdown, textareaRef.current, (text, caretPos) => {
-        onChange(text);
-        textareaRef.current.focus();
-        textareaRef.current.selectionEnd = caretPos;
-      });
+      insertMarkdown(markdown, textareaRef.current, insertMarkdownCallback);
       if (markdown === MENTION) {
         textareaRef.current.dispatchEvent(new KeyboardEvent('keydown', {
           key: '@',
@@ -205,10 +220,8 @@ export const RichTextEditor = /*#__PURE__*/forwardRef((_ref5, externalRef) => {
     disabled: disabled
   }), previewMode ? /*#__PURE__*/React.createElement("div", {
     className: `jsx-${mainClasses.__hash}` + " " + "preview"
-  }, /*#__PURE__*/React.createElement(RichTextParser, null, value)) : /*#__PURE__*/React.createElement(Field, {
-    error: !!errorText,
-    validationText: errorText,
-    helpText: helpText
+  }, /*#__PURE__*/React.createElement(Parser, null, value)) : /*#__PURE__*/React.createElement("div", {
+    className: `jsx-${mainClasses.__hash}` + " " + "edit"
   }, /*#__PURE__*/React.createElement(UserMentionWrapper, {
     onUserSelect: onChange,
     inputReference: textareaRef
@@ -218,18 +231,28 @@ export const RichTextEditor = /*#__PURE__*/forwardRef((_ref5, externalRef) => {
     disabled: disabled,
     value: value,
     onChange: event => onChange(event.target.value),
-    onKeyDown: event => convertCtrlKey(event, onChange),
-    className: `jsx-${mainClasses.__hash}` + " " + "textarea"
-  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    onKeyDown: event => convertCtrlKey(event, insertMarkdownCallback),
+    className: `jsx-${mainClasses.__hash}` + " " + (cx('textarea', {
+      resizable
+    }) || "")
+  })), errorText && /*#__PURE__*/React.createElement(Help, {
+    error: !!errorText
+  }, errorText), helpText && /*#__PURE__*/React.createElement(Help, null, helpText)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: mainClasses.__hash
   }, mainClasses));
 });
-RichTextEditor.displayName = 'RichTextEditor';
-RichTextEditor.propTypes = {
+Editor.displayName = 'Editor';
+Editor.defaultProps = {
+  initialFocus: true,
+  resizable: true
+};
+Editor.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
   errorText: PropTypes.string,
   helpText: PropTypes.string,
-  inputPlaceholder: PropTypes.string
+  initialFocus: PropTypes.bool,
+  inputPlaceholder: PropTypes.string,
+  resizable: PropTypes.bool
 };

package/build/es/components/RichText/Editor/__tests__/Editor.spec.js

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { Editor } from '../Editor.js';
+const mockConvertCtrlKey = jest.fn();
+jest.mock('../markdownHandler.js', () => ({
+  convertCtrlKey: () => mockConvertCtrlKey()
+}));
+jest.mock('../../../UserMention/UserMentionWrapper.js', () => ({
+  UserMentionWrapper: jest.fn(props => /*#__PURE__*/React.createElement(React.Fragment, null, props.children))
+}));
+describe('RichText: Editor component', () => {
+  const componentProps = {
+    value: '',
+    onChange: jest.fn()
+  };
+  beforeEach(() => {
+    mockConvertCtrlKey.mockClear();
+  });
+  const renderComponent = props => {
+    return render( /*#__PURE__*/React.createElement(Editor, props));
+  };
+  it('renders a result', () => {
+    renderComponent(componentProps);
+    expect(screen.getByTestId('@dhis2-analytics-richtexteditor')).toBeVisible();
+  });
+  it('calls convertCtrlKey on keydown', () => {
+    renderComponent(componentProps);
+    fireEvent.keyDown(screen.getByRole('textbox'), {
+      key: 'A',
+      code: 'keyA'
+    });
+    expect(mockConvertCtrlKey).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,202 @@
+import { convertCtrlKey } from '../markdownHandler.js';
+describe('convertCtrlKey', () => {
+  it('does not trigger callback if no ctrl key', () => {
+    const cb = jest.fn();
+    const e = {
+      key: 'j',
+      preventDefault: () => {}
+    };
+    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: () => {}
+      };
+      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: () => {}
+      };
+      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: () => {}
+      };
+      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: () => {}
+      };
+      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: () => {}
+      };
+      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: () => {}
+        };
+        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: () => {}
+        };
+        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: () => {}
+        };
+        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: () => {}
+        };
+        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: () => {}
+        };
+        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: () => {}
+      };
+      convertCtrlKey(e, cb);
+      expect(cb).toHaveBeenCalled();
+      expect(cb).toHaveBeenCalledWith('__', 1);
+    });
+  });
+});

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

@@ -77,23 +77,29 @@ export 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/es/components/{Interpretations/common/RichTextEditor/styles/RichTextEditor.style.js → RichText/Editor/styles/Editor.style.js}

@@ -1,6 +1,6 @@
 import { colors, spacers, theme } from '@dhis2/ui';
-export 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:${colors.grey900};}`, `.textarea.jsx-1273817287{width:100%;box-sizing:border-box;padding:${spacers.dp8} ${spacers.dp12};color:${colors.grey900};background-color:${colors.white};border:1px solid ${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:${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 ${theme.focus};width:calc(100% - 3px);}`, `.textarea.jsx-1273817287:disabled{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`];
-mainClasses.__hash = "1273817287";
+export 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:${spacers.dp8} ${spacers.dp12};font-size:14px;line-height:${spacers.dp16};color:${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:${spacers.dp8} 15px;color:${colors.grey900};background-color:${colors.white};border:1px solid ${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:${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 ${theme.focus};width:calc(100% - 6px);height:calc(100% - 3px);padding:${spacers.dp8} ${spacers.dp12};margin-left:3px;}`, `.textarea.jsx-185829738:disabled{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`];
+mainClasses.__hash = "185829738";
 export const toolbarClasses = [`.toolbar.jsx-2267496677{background:${colors.grey050};border-radius:3px;border:1px solid ${colors.grey300};margin-bottom:${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:${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:${spacers.dp4};}`, `.mainActions.jsx-2267496677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp4};margin-top:${spacers.dp2};}`, ".sideActions.jsx-2267496677{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `.previewWrapper.jsx-2267496677{margin:${spacers.dp4};text-align:right;}`];
 toolbarClasses.__hash = "2267496677";
 export const tooltipAnchorClasses = [".tooltip.jsx-2182400256{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"];

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

@@ -0,0 +1,98 @@
+import MarkdownIt from 'markdown-it';
+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;
+};
+export class MdParser {
+  constructor() {
+    // disable all rules, enable autolink for URLs and email addresses
+    const md = new MarkdownIt('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);
+  }
+}

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

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import { MdParser } from './MdParser.js';
+export const Parser = _ref => {
+  let {
+    children,
+    style
+  } = _ref;
+  const MdParserInstance = useMemo(() => new MdParser(), []);
+  return children ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...style
+    },
+    dangerouslySetInnerHTML: {
+      __html: MdParserInstance.render(children)
+    }
+  }) : null;
+};
+Parser.defaultProps = {
+  style: null
+};
+Parser.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  style: PropTypes.object
+};

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

@@ -0,0 +1,40 @@
+import { MdParser } from '../MdParser.js';
+const Parser = new 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/es/components/RichText/Parser/__tests__/Parser.spec.js

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Parser } from '../Parser.js';
+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 shallow( /*#__PURE__*/React.createElement(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/es/components/RichText/index.js

@@ -0,0 +1,3 @@
+export { Editor as RichTextEditor } from './Editor/Editor.js';
+export { Parser as RichTextParser } from './Parser/Parser.js';
+export { MdParser as RichTextMdParser } from './Parser/MdParser.js';