feat(Add UMD, CJS, and ESM support): Add UMD, CJS, and ESM support

Author: hagmic

.eslintrc.json

@@ -32,10 +32,19 @@
         }
     },
     "rules": {
-        "react/require-default-props": 0,
+        "jsx-quotes": ["error","prefer-single"],
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": [
+                    ".storybook/**",
+                    "stories/**"
+                ]
+            }
+        ],
         "max-len": "off",
         "no-useless-return": "off",
-        "jsx-quotes": ["error","prefer-single"],
-        "react/jsx-filename-extension": "off"
+        "react/jsx-filename-extension": "off",
+        "react/require-default-props": 0
     }
 }

babel.config.js

@@ -1,14 +1,12 @@
 module.exports = {
   presets: [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    ["@babel/preset-flow", { "all":  true}]
+    '@babel/preset-env',
+    '@babel/preset-react',
+    ['@babel/preset-flow', { all: true }],
   ],
   env: {
     production: {
-      plugins: [
-        ["react-remove-properties", { "properties": ["data-testid" ]}]
-      ]
-    }
-  }
+      plugins: ['babel-plugin-jsx-remove-data-test-id'],
+    },
+  },
 };

package.json

@@ -2,15 +2,16 @@
   "name": "@lifechurch/react-draftable",
   "version": "0.0.0-development",
   "description": "A simple, customizable rich text editor built on Draft.js",
-  "main": "dist/index.js",
+  "main": "dist/react-draftable.cjs.js",
+  "module": "dist/react-draftable.esm.js",
+  "browser": "dist/react-draftable.umd.js",
   "files": [
     "dist",
-    "LICENSE"
+    "src"
   ],
   "scripts": {
-    "build": "yarn clean && yarn build:parcel && yarn build:flow",
-    "build:parcel": "cross-env NODE_ENV=production parcel build ./src/index.js --out-dir ./dist --out-file index.js --target node",
-    "build:flow": "flow-copy-source src dist",
+    "build": "yarn clean && yarn build:rollup",
+    "build:rollup": "BABEL_ENV=production rollup -c --no-treeshake",
     "clean": "rimraf dist",
     "commit": "git-cz",
     "flow": "flow",
@@ -43,7 +44,7 @@
     "immutable": "^3.8.2"
   },
   "peerDependencies": {
-    "draft-js": "x.10.x",
+    "draft-js": "x.10.x | x.11.X",
     "react": "16.x.x",
     "react-dom": "16.x.x"
   },
@@ -60,9 +61,10 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
-    "babel-plugin-react-remove-properties": "^0.3.0",
+    "babel-plugin-jsx-remove-data-test-id": "^2.0.0",
     "commitizen": "^3.1.1",
     "cross-env": "^5.2.0",
+    "css-loader": "^2.1.1",
     "cz-conventional-changelog": "2.1.0",
     "draft-js": "^0.11.0-beta2",
     "eslint": "^5.16.0",
@@ -72,15 +74,22 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
     "flow-bin": "^0.98.1",
-    "flow-copy-source": "^2.0.6",
     "flow-inlinestyle": "^1.0.9",
     "jest": "^24.8.0",
     "jest-transform-stub": "^2.0.0",
-    "parcel-bundler": "^1.12.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-testing-library": "^7.0.1",
     "rimraf": "^2.6.3",
+    "rollup": "^1.12.5",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-copy": "^2.0.1",
+    "rollup-plugin-css-only": "^1.0.0",
+    "rollup-plugin-multi-entry": "^2.1.0",
+    "rollup-plugin-node-globals": "^1.4.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
     "semantic-release": "^15.13.12",
     "sinon": "^7.3.2"
   },

rollup.config.js

@@ -0,0 +1,46 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import css from 'rollup-plugin-css-only';
+import autoExternal from 'rollup-plugin-auto-external';
+import copy from 'rollup-plugin-copy';
+import pkg from './package.json';
+
+const commonPlugins = [
+  babel(),
+  autoExternal(),
+  resolve(),
+  css({ output: 'dist/react-draftable.css' }),
+  copy({
+    targets: [
+      'src/react-draftable.esm.js.flow',
+    ],
+    outputFolder: 'dist',
+  }),
+];
+
+export default [
+  // browser-friendly UMD build
+  {
+    input: 'src/index.js',
+    output: {
+      name: 'react-draftable',
+      file: pkg.browser,
+      format: 'umd',
+    },
+    plugins: [
+      ...commonPlugins,
+      commonjs(),
+    ],
+  },
+
+  // CommonJS (for Node) and ES module (for bundlers) build.
+  {
+    input: 'src/index.js',
+    output: [
+      { file: pkg.main, format: 'cjs' },
+      { file: pkg.module, format: 'es' },
+    ],
+    plugins: commonPlugins,
+  },
+];

src/index.js

@@ -7,9 +7,12 @@ import {
   Modifier,
   getDefaultKeyBinding,
 } from 'draft-js';
+import './styles.css';
+import './lib/DraftableState';
 import Toolbar, { defaultToolbarConfig, type ToolbarConfigType } from './toolbar';
-import 'draft-js/dist/Draft.css';
 import type { ToolbarButtonType } from './toolbarButton';
+import changeBlockDepth from './lib/changeBlockDepth';
+
 
 type DraftableProps = {
   initialState?: EditorState,
@@ -79,6 +82,18 @@ const Draftable = (
         case 'block':
           setEditorState(RichUtils.toggleBlockType(editorState, item.style));
           return;
+        case 'indent': {
+          const selection = editorState.getSelection();
+          if (selection.isCollapsed()) {
+            const content = editorState.getCurrentContent();
+            const blockKey = selection.getStartKey();
+            const block = content.getBlockForKey(blockKey);
+            const depth = block.getDepth();
+            const newState = changeBlockDepth(editorState, blockKey, depth + (item.style === 'indent' ? 1 : -1));
+            setEditorState(newState);
+          }
+          break;
+        }
         default:
           return;
       }

src/lib/BlockTypes.js

@@ -32,9 +32,9 @@ export const BLOCK_TYPES_LISTS:Array<ToolbarButtonType> = [
 
 export const BLOCK_TYPES_INDENT:Array<ToolbarButtonType> = [
   {
-    label: '->', style: 'indent', Icon: Indent, toggle: 'block', type: 'style',
+    label: '->', style: 'indent', Icon: Indent, toggle: 'indent', type: 'style',
   },
   {
-    label: '<-', style: 'outdent', Icon: Outdent, toggle: 'block', type: 'style',
+    label: '<-', style: 'outdent', Icon: Outdent, toggle: 'indent', type: 'style',
   },
 ];

src/lib/changeBlockDepth.js

@@ -0,0 +1,26 @@
+// @flow
+import { EditorState } from 'draft-js';
+
+export default function changeBlockDepth(
+  editorState: EditorState,
+  blockKey: string,
+  newDepth: number,
+): EditorState {
+  const content = editorState.getCurrentContent();
+  const block = content.getBlockForKey(blockKey);
+  const depth = block.getDepth();
+
+  if (depth === newDepth) {
+    return editorState;
+  }
+
+  const newBlock = block.set('depth', newDepth);
+  const newContent = content.merge({
+    blockMap: content.getBlockMap().set(blockKey, newBlock),
+  });
+  return EditorState.push(
+    editorState,
+    newContent,
+    'adjust-depth',
+  );
+}

src/react-draftable.esm.js.flow

@@ -0,0 +1,2 @@
+// @flow
+import * as Draftable from '../src'; /* eslint-disable-line */

src/styles.css

@@ -0,0 +1,31 @@
+@import '~draft-js/dist/Draft.css';
+
+.public-DraftEditor-content {
+    font-family: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.Toolbar-root {
+    display: flex;
+    margin: 14px 0;
+}
+
+.ToolbarGroup-root {
+    display: flex;
+}
+
+.ToolbarGroup-root:not(:first-of-type):not(:last-of-type) {
+    margin: 0 14px;
+}
+
+.ToolbarButton-root {
+    border: none;
+    background: none;
+    margin: 0 8px;
+    padding: 0;
+}
+
+.ToolbarButton-root:first-of-type {
+    margin-left: 0;
+}

src/toolbar/index.js

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import './styles.css';
 import { EditorState } from 'draft-js';
 import ToolbarGroup, { type ToolbarGroupType } from '../toolbarGroup';
 import type { ToolbarButtonType } from '../toolbarButton';
@@ -34,7 +33,13 @@ export default ({ editorState, toolbarConfig, onChange }:ToolbarProps) => {
     <div data-testid='toolbar' className='Toolbar-root'>
       {
         toolbarConfig.groups.map(group => (
-          <ToolbarGroup key={group.key} items={toolbarConfig[group.key]} onChange={handleToggle} customStyles={group.customStyles} editorState={editorState} />
+          <ToolbarGroup
+            key={group.key}
+            items={toolbarConfig[group.key]}
+            onChange={handleToggle}
+            customStyles={group.customStyles}
+            editorState={editorState}
+          />
         ))
       }
     </div>