fix(react): apply CommonMark flanking rules to composer emphasis

packages/react/babel.config.js

@@ -1,14 +1,20 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-        bugfixes: true,
-        targets: { browsers: '> 0.25%, ie 11, not op_mini all, not dead' },
-      },
+module.exports = (api) => {
+  // Jest needs CommonJS; the rollup build must keep native ES modules.
+  const isTest = api.env('test');
+  api.cache.using(() => isTest);
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: isTest ? 'commonjs' : false,
+          bugfixes: true,
+          targets: { browsers: '> 0.25%, ie 11, not op_mini all, not dead' },
+        },
+      ],
+      '@babel/preset-react',
+      '@emotion/babel-preset-css-prop',
     ],
-    '@babel/preset-react',
-    '@emotion/babel-preset-css-prop',
-  ],
+  };
 };

packages/react/package.json

@@ -22,7 +22,8 @@
     "lint:fix": "eslint 'src/**/*.js' --fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build-icons": "node tools/icons-generator.js"
+    "build-icons": "node tools/icons-generator.js",
+    "test": "jest --env=jsdom"
   },
   "author": "",
   "license": "ISC",

packages/react/src/lib/contentEditableComposer.js

@@ -44,6 +44,41 @@ const findLink = (text, start) => {
   };
 };
 
+const EMPHASIS_MARKERS = new Set(['*', '**', '_', '__']);
+
+const isWhitespace = (character) =>
+  character === undefined || /\s/.test(character);
+
+const isWordCharacter = (character) =>
+  character !== undefined && /[\p{L}\p{N}]/u.test(character);
+
+// CommonMark only lets a delimiter run open emphasis when it is left-flanking
+// and close it when it is right-flanking, and never lets `_` do either inside a
+// word. Without these checks `my_file_name.js` and `2 * 3 * 4` become emphasis.
+const canOpenEmphasis = (text, start, marker) => {
+  if (!EMPHASIS_MARKERS.has(marker)) return true;
+  if (isWhitespace(text[start + marker.length])) return false;
+  if (marker[0] === '_' && isWordCharacter(text[start - 1])) return false;
+  return true;
+};
+
+const canCloseEmphasis = (text, end, marker) => {
+  if (!EMPHASIS_MARKERS.has(marker)) return true;
+  if (isWhitespace(text[end - 1])) return false;
+  if (marker[0] === '_' && isWordCharacter(text[end + marker.length])) {
+    return false;
+  }
+  return true;
+};
+
+const findClosingMarker = (text, from, marker) => {
+  let end = text.indexOf(marker, from);
+  while (end !== -1 && !canCloseEmphasis(text, end, marker)) {
+    end = text.indexOf(marker, end + marker.length);
+  }
+  return end;
+};
+
 const appendMarkdown = (parent, text) => {
   const tokens = [
     ['**', 'strong'],
@@ -89,9 +124,13 @@ const appendMarkdown = (parent, text) => {
         }
       }
 
+      if (token && !canOpenEmphasis(text, index, token[0])) {
+        token = undefined;
+      }
+
       if (token) {
         const [marker, tagName] = token;
-        const end = text.indexOf(marker, index + marker.length);
+        const end = findClosingMarker(text, index + marker.length, marker);
         if (end > index + marker.length) {
           flush();
           const formatted = document.createElement(tagName);

packages/react/src/lib/contentEditableComposer.test.js

@@ -0,0 +1,24 @@
+import { renderComposerMarkdown } from './contentEditableComposer';
+
+describe('renderComposerMarkdown', () => {
+  const render = (markdown) => {
+    const element = document.createElement('div');
+    renderComposerMarkdown(element, markdown);
+    return element.innerHTML;
+  };
+
+  test('does not treat underscores inside a word as emphasis', () => {
+    expect(render('my_file_name.js')).toBe('my_file_name.js');
+    expect(render('call foo_bar_baz() now')).toBe('call foo_bar_baz() now');
+  });
+
+  test('does not open emphasis on a marker followed by whitespace', () => {
+    expect(render('2 * 3 * 4 = 24')).toBe('2 * 3 * 4 = 24');
+  });
+
+  test('still renders emphasis at word boundaries', () => {
+    expect(render('__init__')).toBe('<strong>init</strong>');
+    expect(render('**bold**')).toBe('<strong>bold</strong>');
+    expect(render('*italic*')).toBe('<em>italic</em>');
+  });
+});