draftjs-conductor - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

CHANGELOG.md

@@ -7,2 +7,31 @@ # Changelog
 
+# [2.0.0](https://github.com/thibaudcolas/draftjs-conductor/compare/v1.2.0...v2.0.0) (2020-11-19)
+
+### Features
+
+- **api:** replace list nesting APIs with a single getListNestingStyles ([3703b2f](https://github.com/thibaudcolas/draftjs-conductor/commit/3703b2fae1a5e83946041f72b107f58f3b59038b))
+- **deps:** proactively declare support with Draft.js v0.12.0 ([586b385](https://github.com/thibaudcolas/draftjs-conductor/commit/586b38511fa6ca7a32a16d16340640b3d9fc60fd))
+
+### BREAKING CHANGES
+
+- **api:** The `<ListNestingStyles max={6} />` component has been removed,
+  and the `generateListNestingStyles` method is now deprecated and
+  will be removed in a future release.
+
+Both are replaced with a `getListNestingStyles` method, which works exactly the same as
+`generateListNestingStyles`, but with a different parameter order, and with default values:
+
+```js
+export const getListNestingStyles = (
+  maxDepth: number,
+  minDepth: number = DRAFT_DEFAULT_MAX_DEPTH + 1,
+  selectorPrefix: string = DRAFT_DEFAULT_DEPTH_CLASS,
+) => {
+  return generateListNestingStyles(selectorPrefix, minDepth, maxDepth);
+};
+```
+
+This small breaking change allows us to remove this package’s peerDependency on React,
+making it easier to upgrade to React 17, and other versions in the future.
+
 # [1.2.0](https://github.com/thibaudcolas/draftjs-conductor/compare/v1.1.0...v1.2.0) (2020-11-19)
@@ -9,0 +38,0 @@

dist/draftjs-conductor.cjs.js

@@ -5,3 +5,2 @@ 'use strict';
 
-var React = require('react');
 var getContentStateFragment = require('draft-js/lib/getContentStateFragment');
@@ -15,3 +14,2 @@ var getDraftEditorSelection = require('draft-js/lib/getDraftEditorSelection');
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var getContentStateFragment__default = /*#__PURE__*/_interopDefaultLegacy(getContentStateFragment);
@@ -23,4 +21,4 @@ var getDraftEditorSelection__default = /*#__PURE__*/_interopDefaultLegacy(getDraftEditorSelection);
 // @flow
+
 /*:: import type { BlockNode } from "draft-js/lib/BlockNode";*/
-
 // Default maximum block depth supported by Draft.js CSS.
@@ -32,2 +30,3 @@ var DRAFT_DEFAULT_MAX_DEPTH = 4; // Default depth class prefix from Draft.js CSS.
  * Generates CSS styles for list items, for a given selector pattern.
+ * @deprecated Use getListNestingStyles instead, which has the same signature.
  * @param {string} selectorPrefix
@@ -63,8 +62,12 @@ * @param {number} minDepth
 
-var ListNestingStyles = function ListNestingStyles(props
-/*: { max: number }*/
+var getListNestingStyles = function getListNestingStyles(maxDepth
+/*: number*/
 ) {
-  var max = props.max;
-  var min = DRAFT_DEFAULT_MAX_DEPTH + 1;
-  return max > DRAFT_DEFAULT_MAX_DEPTH ? /*#__PURE__*/React__default['default'].createElement("style", null, generateListNestingStyles(DRAFT_DEFAULT_DEPTH_CLASS, min, max)) : null;
+  var minDepth
+  /*: number*/
+  = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DRAFT_DEFAULT_MAX_DEPTH + 1;
+  var selectorPrefix
+  /*: string*/
+  = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DRAFT_DEFAULT_DEPTH_CLASS;
+  return generateListNestingStyles(selectorPrefix, minDepth, maxDepth);
 };
@@ -305,3 +308,2 @@ /**
 exports.DRAFT_DEFAULT_MAX_DEPTH = DRAFT_DEFAULT_MAX_DEPTH;
-exports.ListNestingStyles = ListNestingStyles;
 exports.blockDepthStyleFn = blockDepthStyleFn;
@@ -311,2 +313,3 @@ exports.createEditorStateFromRaw = createEditorStateFromRaw;
 exports.getDraftEditorPastedContent = getDraftEditorPastedContent;
+exports.getListNestingStyles = getListNestingStyles;
 exports.handleDraftEditorPastedText = handleDraftEditorPastedText;
@@ -313,0 +316,0 @@ exports.onDraftEditorCopy = onDraftEditorCopy;

dist/draftjs-conductor.esm.js

 // @flow
-import React from 'react';
 import getContentStateFragment from 'draft-js/lib/getContentStateFragment';
@@ -10,4 +9,4 @@ import getDraftEditorSelection from 'draft-js/lib/getDraftEditorSelection';
 // @flow
+
 /*:: import type { BlockNode } from "draft-js/lib/BlockNode";*/
-
 // Default maximum block depth supported by Draft.js CSS.
@@ -19,2 +18,3 @@ var DRAFT_DEFAULT_MAX_DEPTH = 4; // Default depth class prefix from Draft.js CSS.
  * Generates CSS styles for list items, for a given selector pattern.
+ * @deprecated Use getListNestingStyles instead, which has the same signature.
  * @param {string} selectorPrefix
@@ -50,8 +50,12 @@ * @param {number} minDepth
 
-var ListNestingStyles = function ListNestingStyles(props
-/*: { max: number }*/
+var getListNestingStyles = function getListNestingStyles(maxDepth
+/*: number*/
 ) {
-  var max = props.max;
-  var min = DRAFT_DEFAULT_MAX_DEPTH + 1;
-  return max > DRAFT_DEFAULT_MAX_DEPTH ? /*#__PURE__*/React.createElement("style", null, generateListNestingStyles(DRAFT_DEFAULT_DEPTH_CLASS, min, max)) : null;
+  var minDepth
+  /*: number*/
+  = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DRAFT_DEFAULT_MAX_DEPTH + 1;
+  var selectorPrefix
+  /*: string*/
+  = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DRAFT_DEFAULT_DEPTH_CLASS;
+  return generateListNestingStyles(selectorPrefix, minDepth, maxDepth);
 };
@@ -290,2 +294,2 @@ /**
 
-export { DRAFT_DEFAULT_DEPTH_CLASS, DRAFT_DEFAULT_MAX_DEPTH, ListNestingStyles, blockDepthStyleFn, createEditorStateFromRaw, generateListNestingStyles, getDraftEditorPastedContent, handleDraftEditorPastedText, onDraftEditorCopy, onDraftEditorCut, registerCopySource, serialiseEditorStateToRaw };
+export { DRAFT_DEFAULT_DEPTH_CLASS, DRAFT_DEFAULT_MAX_DEPTH, blockDepthStyleFn, createEditorStateFromRaw, generateListNestingStyles, getDraftEditorPastedContent, getListNestingStyles, handleDraftEditorPastedText, onDraftEditorCopy, onDraftEditorCut, registerCopySource, serialiseEditorStateToRaw };

package.json

 {
   "name": "draftjs-conductor",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "📝✨ Little Draft.js helpers to make rich text editors “just work”",
@@ -75,4 +75,3 @@ "author": "Thibaud Colas",
   "peerDependencies": {
-    "draft-js": "^0.10.5 || ^0.11.0",
-    "react": "^16.0.0"
+    "draft-js": "^0.10.5 || ^0.11.0 || ^0.12.0"
   },
@@ -79,0 +78,0 @@ "scripts": {

README.md

@@ -23,23 +23,31 @@ # [Draft.js conductor](https://thibaudcolas.github.io/draftjs-conductor/) [<img src="https://raw.githubusercontent.com/thibaudcolas/draftail.org/main/.github/draftail-logo.svg?sanitize=true" width="90" height="90" align="right">](https://www.draftail.org/)
 
-Instead of manually writing and maintaining the list nesting styles, use this little helper:
+Instead of manually writing and maintaining the list nesting styles, use those little helpers:
 
 ```js
-import { ListNestingStyles, blockDepthStyleFn } from "draftjs-conductor";
+import { getListNestingStyles, blockDepthStyleFn } from "draftjs-conductor";
 
+<style>
+  {getListNestingStyles(6)}
+</style>
 <Editor blockStyleFn={blockDepthStyleFn} />
-<ListNestingStyles max={6} />
 ```
 
-`ListNestingStyles` will generate the necessary CSS for your editor’s lists. `blockDepthStyleFn` will then apply classes to blocks based on their depth, so the styles take effect. Voilà!
+`getListNestingStyles` will generate the necessary CSS for your editor’s lists. `blockDepthStyleFn` will then apply classes to blocks based on their depth, so the styles take effect. Voilà!
 
-With React v16.6 and up, you can also leverage [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) to speed up re-renders:
+If your editor’s maximum list nesting depth never changes, pre-render the styles as a fragment for better performance:
 
 ```js
+const listNestingStyles = <style>{getListNestingStyles(6)}</style>;
+```
+
+You can also leverage [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) to speed up re-renders even if `max` was to change:
+
+```js
 const NestingStyles = React.memo(ListNestingStyles);
 
-<NestingStyles max={6} />;
+<style>
+  <NestingStyles max={max} />
+</style>;
 ```
 
-Should you need more flexibility, import `generateListNestingStyles` which will allow you to further specify how the styles are generated.
-
 Relevant Draft.js issues:
@@ -79,3 +87,4 @@
 import {
-  registerCopySource,
+  onDraftEditorCopy,
+  onDraftEditorCut,
   handleDraftEditorPastedText,
@@ -96,6 +105,2 @@ } from "draftjs-conductor";
 
-  componentDidMount() {
-    this.copySource = registerCopySource(this.editorRef);
-  }
-
   onChange(nextState: EditorState) {
@@ -102,0 +107,0 @@ this.setState({ editorState: nextState });

No alert changes

Improved metrics

Total package byte prevSize

57370

increased by3.09%

Dependency count

1

decreased by-50%

Lines of code

510

increased by1.39%

Number of lines in readme file

233

increased by2.19%

No dependency changes