feat: code editor export (#5)

* feat(codeeditor): tree restructuring
- Adding codeEditor structure from ui lib
- Restructuring src to be more comprehensive

* feat(codeeditor): full integration of ui codeeditor
- Added sass support in webpack
- Consolidating utils for shared use
- Porting ui code editor

* chore: lint cleanup

* feat(codeeditor): geeneral polish
- Tweaking linters for new file structure
- Test updates
- Prettyfying

* feat(codeeditor): moving to single configurable export

* feat(editor): adding support for linenumbers in runmode

* feat(editor): beginning conditional line styling"

* style(code editor): matching parent classes

* feat(editor): wrapping lines in divs for styling

* style(code mirror): add remaining styles and highlight styles

* style(code mirror): use proper highlight/overlay classes

* fix: blocking linenumbers from selection

* style(code mirror): preserve highlight on hover

* feat(syntaxhighlighter): line highlighting (#6)

* feat: attempt at line highlighting w comments

* feat: it works and is less ugly now

* fix: blocking linenumbers from selection

* chore: small eslint fix to pass tests

* feat(highlighting): minor refactor
- Updated name schemes
- Reuse components

* feat(highlighting): further refactoring
- Moving standalone function calls outside parent
- Consolidating component declaration

* fix(highlighting): applying overlay to deadspace

* chore(coremirror): remove extra class

* chore: adding variable

Co-authored-by: Gabriel Ratcliff <gaberatcliff@gmail.com>
Co-authored-by: Tony Li <runnabro@users.noreply.github.com>

* chore: tests and docs

* chore: documentation
- Updating readme.md to provide proper use cases and option documentation
- Cleanup per review comments

* chore: documenting editable use case

* fix: canonical named export

* chore: adding homepage

* chore: dev and prod optimization

* chore: webpack externals
- Excluding React and react-dom from webpack built as to avoid conflicts
- Replicating import syntax in test bed
- Cleaning up package.json

* chore: fixing pr comment

* fix: breaking out styled syntax highlighter into seperate function

* chore: removing comment

Co-authored-by: Gabe Ratcliff <gaberatcliff@Meghans-MBP.attlocal.net>
Co-authored-by: Tony Li <runnabro@users.noreply.github.com>
Co-authored-by: Julia Hotaling <42787244+julshotal@users.noreply.github.com>

Author: 4 people

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
+dist/
 __tests__/__fixtures__/**/sample.*

.jsinspectrc

@@ -1,7 +1,7 @@
 {
   "threshold": 30,
   "identifiers": true,
-  "ignore": "test",
+  "ignore": "test|dist|webpack",
   "reporter": "default",
   "suppress": 100
 }

.prettierignore

@@ -1,3 +1,4 @@
 __tests__/__fixtures__/
 __tests__/__snapshots__/
 coverage/
+dist/

README.md

@@ -1,6 +1,6 @@
 # @readme/syntax-highlighter
 
-ReadMe's React-based syntax highlighter
+ReadMe's React-based syntax highlighter based on [CodeMirror](https://github.com/codemirror/CodeMirror) and [react-codemirror2](https://github.com/scniro/react-codemirror2).
 
 [![npm](https://img.shields.io/npm/v/@readme/syntax-highlighter)](https://npm.im/@readme/syntax-highlighter) [![Build](https://github.com/readmeio/syntax-highlighter/workflows/CI/badge.svg)](https://github.com/readmeio/syntax-highlighter)
 
@@ -13,12 +13,50 @@ npm install --save @readme/syntax-highlighter
 ```
 
 ## Usage
+### Read Only Mode
+```js
+const syntaxHighlighter = require('@readme/syntax-highlighter');
+const ele = syntaxHighlighter('console.log("Hello, world!");', 'js');
+```
+
+### Read Only with Line Numbers
+```js
+const syntaxHighlighter = require('@readme/syntax-highlighter');
+const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', { ...opts, highlightMode: true });
+```
 
+### Read Only with Line Numbers and Highlighted Ranges
 ```js
 const syntaxHighlighter = require('@readme/syntax-highlighter');
-console.log(syntaxHighlighter('console.log("Hello, world!");', 'js'));
+const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', {
+  ...opts,
+  highlightMode: true,
+  ranges: [
+    [
+      { ch: 0, line: 0 },
+      { ch: 0, line: 1 },
+    ],
+  ],
+});
 ```
 
+### Full CodeMirror
+Access to a full code Mirror instance. See configuration settings in the [react-codemirror2 library](https://github.com/scniro/react-codemirror2#props)
+
+```js
+const syntaxHighlighter = require('@readme/syntax-highlighter');
+const ele = syntaxHighlighter('console.log("Hello, world!");', 'js', { ...opts, editable: true }, { ...editorProps });
+```
+
+### Available Options
+| Name | Type | Description |
+| :--- | :--- | :--- |
+| dark | boolean | Enable Dark Mode? |
+| highlightMode | boolean | Enable line number display and ability to set highlighted line css |
+| tokenizeVariables | boolean | Apply [Variable Component](https://github.com/readmeio/api-explorer/tree/next/packages/variable) to matched Regex |
+| ranges | array | Ranges of line numbers to apply highlighting to. Requires `highlightMode` enabled |
+| editable | boolean | Enable full CodeMirror Instance |
+
 ## Languages Supported
 
 | Language | Available language mode(s) |

…tests__/__snapshots__/index.test.js.snap …__/__snapshots__/codeMirror.test.js.snap__tests__/__snapshots__/index.test.js.snap renamed to __tests__/__snapshots__/codeMirror.test.js.snap __tests__/__snapshots__/index.test.js.snap renamed to __tests__/__snapshots__/codeMirror.test.js.snap

@@ -0,0 +1,49 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CodeEditor from '../src/codeEditor';
+
+describe('<CodeEditor/>', () => {
+  const getClientRectSpy = jest.fn(() => ({ width: 100 }));
+  Range.prototype.getBoundingClientRect = getClientRectSpy;
+  Range.prototype.getClientRects = getClientRectSpy;
+
+  const node = mount(<CodeEditor code="console.log('Hello, world.');" lang="js" />);
+  const cm = node.find('Controlled');
+
+  it('should display a <CodeEditor> element', () => {
+    expect(node.children('.CodeEditor')).toHaveLength(1);
+  });
+
+  it('should highlight code', () => {
+    expect(cm.html()).toContain('cm-variable');
+  });
+
+  it('should set CodeMirror options', () => {
+    expect('options' in cm.props()).toBe(true);
+  });
+
+  it('should set a sanitized language mode', () => {
+    expect(node.props().lang).toBe('js');
+    expect(cm.props().options.mode).toBe('javascript');
+  });
+
+  it('should set new language via props', () => {
+    node.setProps({ lang: 'kotlin' });
+    expect(node.props().lang).toBe('kotlin');
+
+    setTimeout(() => {
+      expect(cm.props().options.mode).toBe('clike');
+    });
+  });
+
+  it('should take children as a code value', () => {
+    const props = {
+      children: 'const res = true;',
+      lang: 'js',
+    };
+
+    const n2 = mount(<CodeEditor {...props} />);
+    const cm2 = n2.find('Controlled');
+    expect(cm2.prop('value')).toBe('const res = true;');
+  });
+});

__tests__/codeEditor.test.js

@@ -1,11 +1,8 @@
-const { mount, shallow } = require('enzyme');
-const path = require('path');
-const glob = require('glob');
-const fs = require('fs').promises;
-
-const syntaxHighlighter = require('../src');
-const uppercase = require('../src/uppercase');
-const canoncial = require('../src/canonical');
+import { mount, shallow } from 'enzyme';
+import path from 'path';
+import glob from 'glob';
+import { promises as fs } from 'fs';
+import syntaxHighlighter, { uppercase, canonical } from '../src';
 
 const fixtures = glob.sync(path.join(__dirname, '/__fixtures__/*'));
 
@@ -14,7 +11,7 @@ test('should highlight a block of code', () => {
 
   expect(code.hasClass('cm-s-neo')).toBe(true);
   expect(code.html()).toBe(
-    '<span class="cm-s-neo"><span class="cm-keyword">var</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;</span>'
+    '<div class="cm-s-neo"><span class="cm-keyword">var</span> <span class="cm-def">a</span> <span class="cm-operator">=</span> <span class="cm-number">1</span>;</div>'
   );
 });
 
@@ -38,7 +35,7 @@ test('should concat the same style items', () => {
 
 test('should work with modes', () => {
   expect(shallow(syntaxHighlighter('{ "a": 1 }', 'json')).html()).toBe(
-    '<span class="cm-s-neo">{ <span class="cm-property">&quot;a&quot;</span>: <span class="cm-number">1</span> }</span>'
+    '<div class="cm-s-neo">{ <span class="cm-property">&quot;a&quot;</span>: <span class="cm-number">1</span> }</div>'
   );
 });
 
@@ -109,11 +106,11 @@ describe('Supported languages', () => {
 
           if ('canonical' in instructions.mode) {
             it('should have a canonical directive set up', () => {
-              expect(canoncial(alias)).toBe(instructions.mode.canonical);
+              expect(canonical(alias)).toBe(instructions.mode.canonical);
             });
           } else {
             it('should have a canonical directive set up off the primary mode', () => {
-              expect(canoncial(alias)).toBe(instructions.mode.primary);
+              expect(canonical(alias)).toBe(instructions.mode.primary);
             });
           }
         });
@@ -132,3 +129,35 @@ describe('Supported languages', () => {
     }
   });
 });
+
+describe('highlight mode', () => {
+  let node;
+  const code = `curl --request POST
+  --url <<url>>
+  --header 'authorization: Bearer 123'
+  --header 'content-type: application/json'`;
+
+  beforeEach(() => {
+    node = mount(
+      syntaxHighlighter(code, 'curl', {
+        dark: true,
+        highlightMode: true,
+        tokenizeVariables: true,
+        ranges: [
+          [
+            { ch: 0, line: 0 },
+            { ch: 0, line: 1 },
+          ],
+        ],
+      })
+    );
+  });
+
+  it('should return line numbers by default', () => {
+    expect(node.find('p').first().hasClass('cm-lineNumber')).toBe(true);
+  });
+
+  it('should highlight based on range input', () => {
+    expect(node.find('.cm-linerow.cm-highlight')).toHaveLength(4);
+  });
+});

__tests__/index.test.js __tests__/codeMirror.test.js__tests__/index.test.js renamed to __tests__/codeMirror.test.js

@@ -1,4 +1,4 @@
-const { uppercase } = require('../src');
+import { uppercase } from '../src';
 
 test('should uppercase known languages', () => {
   expect(uppercase('http')).toBe('HTTP');

__tests__/uppercase.test.js

@@ -2,14 +2,18 @@ const path = require('path');
 
 module.exports = {
   coveragePathIgnorePatterns: ['<rootDir>/__tests__/__fixtures__/'],
-  collectCoverageFrom: ['src/*.{js,jsx}'],
+  collectCoverageFrom: ['src/**/*.{js,jsx}'],
   setupFiles: [path.join(__dirname, '/lib/enzyme')],
   testPathIgnorePatterns: ['<rootDir>/__tests__/__fixtures__/'],
   transform: {
     '^.+\\.jsx?$': path.join(__dirname, '/lib/babel-jest'),
+    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
   },
   transformIgnorePatterns: [
     // Since `@readme/variable` doesn't ship any transpiled code, we need to transform it as we're running tests.
     '<rootDir>/node_modules/@readme/variable/^.+\\.jsx?$',
   ],
+  moduleNameMapper: {
+    '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
+  },
 };