@studysync/draft-js-modifiers 0.3.1 → 0.3.2

package/README.md

@@ -52,6 +52,12 @@ addBlock(
 adjustBlockDepth(editorState: EditorState, adjustment: number, maxDepth: number)
 ```
 
+### `getCurrentBlock`
+
+```js
+getCurrentBlock(editorState): EditorState
+```
+
 ### `insertAtomicBlock`
 
 ```js
@@ -117,6 +123,18 @@ modifyBlock(editorState: EditorState, blockData: ContentBlock)
 modifyBlockByKey(editorState: EditorState, blockKey: string, blockData: ContentBlock)
 ```
 
+### `moveCaretAfterBlock`
+
+```js
+moveCaretAfterBlock(editorState: EditorState, block: ContentBlock)
+```
+
+### `removeBlock`
+
+```js
+removeBlock(contentState, blockKey)
+```
+
 ### `removeBlockStyle`
 
 ```js
@@ -135,6 +153,18 @@ removeInlineStyles(editorState: EditorState, inlineStyles: Array<string> = [])
 resetBlock(editorState: EditorState, block: ContentBlock)
 ```
 
+### `selectBlockByKey`
+
+```js
+selectBlockByKey(editorState: EditorState, key: string)
+```
+
+### `toggleBlockStyle`
+
+```js
+toggleBlockStyle(editorState, { type: blockStyle, data })
+```
+
 ### `toggleBlockType`
 
 ```js

package/addBlock.js

@@ -9,6 +9,7 @@ var _draftJs = require("draft-js");
 
 var _immutable = require("immutable");
 
+// from draft-js-plugins/draft-js-plugins/packages/drag-n-drop/src/modifiers/addBlock.ts
 var addBlock = function addBlock(editorState, selection, type, data, entityType) {
   var text = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ' ';
   var currentContentState = editorState.getCurrentContent();

package/es/addBlock.js

@@ -3,7 +3,7 @@ import { ContentBlock } from "draft-js";
 import { genKey } from "draft-js";
 import { CharacterMetadata } from "draft-js";
 import { BlockMapBuilder } from "draft-js";
-import { List, Repeat } from 'immutable';
+import { List, Repeat } from 'immutable'; // from draft-js-plugins/draft-js-plugins/packages/drag-n-drop/src/modifiers/addBlock.ts
 
 var addBlock = function addBlock(editorState, selection, type, data, entityType) {
   var text = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ' ';

package/es/getCurrentBlock.js

@@ -0,0 +1,6 @@
+var getCurrentBlock = function getCurrentBlock(editorState) {
+  var currentKey = editorState.getSelection().getAnchorKey();
+  return editorState.getCurrentContent().getBlockForKey(currentKey);
+};
+
+export default getCurrentBlock;

package/es/index.js

@@ -1,5 +1,6 @@
 export { default as addBlock } from './addBlock';
 export { default as adjustBlockDepth } from './adjustBlockDepth';
+export { default as getCurrentBlock } from './getCurrentBlock';
 export { default as insertAtomicBlock } from './insertAtomicBlock';
 export { default as insertEmptyBlock } from './insertEmptyBlock';
 export { default as insertNewBlock } from './insertNewBlock';
@@ -9,9 +10,14 @@ export { default as mergeBlockDataByKey } from './mergeBlockDataByKey';
 export { default as mergeEntityData } from './mergeEntityData';
 export { default as modifyBlock } from './modifyBlock';
 export { default as modifyBlockByKey } from './modifyBlockByKey';
+export { default as moveCaretAfterBlock } from './moveCaretAfterBlock';
+export { default as removeBlock } from './removeBlock';
 export { default as removeBlockStyle } from './removeBlockStyle';
 export { default as removeInlineStyles } from './removeInlineStyles';
 export { default as resetBlock } from './resetBlock';
+export { default as selectBlockByKey } from './selectBlockByKey';
+export { default as toggleBlockStyle } from './toggleBlockStyle';
 export { default as toggleBlockType } from './toggleBlockType';
 export { default as toggleEntity } from './toggleEntity';
-export { default as toggleInlineStyle } from './toggleInlineStyle';
+export { default as toggleInlineStyle } from './toggleInlineStyle';
+export var DRAFTJS_BLOCK_KEY = 'DRAFTJS_BLOCK_KEY';

package/es/moveCaretAfterBlock.js

@@ -0,0 +1,23 @@
+import { EditorState } from "draft-js";
+import { SelectionState } from "draft-js";
+
+var moveCaretAfterBlock = function moveCaretAfterBlock(editorState, block) {
+  var content = editorState.getCurrentContent();
+  var nextBlock = content.getBlockAfter(block.getKey());
+  var key = nextBlock ? nextBlock.getKey() : undefined;
+
+  if (key) {
+    var selectionState = SelectionState.createEmpty();
+    var newSelectionState = selectionState.merge({
+      anchorKey: key,
+      anchorOffset: 0,
+      focusKey: key,
+      focusOffset: 0
+    });
+    return EditorState.forceSelection(editorState, newSelectionState);
+  }
+
+  return editorState;
+};
+
+export default moveCaretAfterBlock;

package/es/removeBlock.js

@@ -0,0 +1,32 @@
+import { SelectionState } from "draft-js";
+import { Modifier } from "draft-js"; // from draft-js-plugins/draft-js-plugins/packages/drag-n-drop/src/modifiers/addBlock.ts
+
+var removeBlock = function removeBlock(contentState, blockKey) {
+  var afterKey = contentState.getKeyAfter(blockKey);
+  var afterBlock = contentState.getBlockForKey(afterKey);
+  var targetRange; // Only if the following block the last with no text then the whole block
+  // should be removed. Otherwise the block should be reduced to an unstyled block
+  // without any characters.
+
+  if (afterBlock && afterBlock.getType() === 'unstyled' && afterBlock.getLength() === 0 && afterBlock === contentState.getBlockMap().last()) {
+    targetRange = new SelectionState({
+      anchorKey: blockKey,
+      anchorOffset: 0,
+      focusKey: afterKey,
+      focusOffset: 0
+    });
+  } else {
+    targetRange = new SelectionState({
+      anchorKey: blockKey,
+      anchorOffset: 0,
+      focusKey: blockKey,
+      focusOffset: 1
+    });
+  } // change the blocktype and remove the characterList entry with the block
+
+
+  var newContentState = Modifier.setBlockType(contentState, targetRange, 'unstyled');
+  return Modifier.removeRange(newContentState, targetRange, 'backward');
+};
+
+export default removeBlock;

package/es/selectBlockByKey.js

@@ -0,0 +1,16 @@
+import { SelectionState } from "draft-js";
+import { EditorState } from "draft-js";
+
+var selectBlockByKey = function selectBlockByKey(editorState, key) {
+  var currentBlock = editorState.getCurrentContent().getBlockForKey(key);
+  var selectionState = SelectionState.createEmpty();
+  var entireBlockSelectionState = selectionState.merge({
+    anchorKey: key,
+    anchorOffset: 0,
+    focusKey: key,
+    focusOffset: currentBlock.getText().length
+  });
+  return EditorState.forceSelection(editorState, entireBlockSelectionState);
+};
+
+export default selectBlockByKey;

package/es/toggleBlockStyle.js

@@ -0,0 +1,25 @@
+import { RichUtils } from "draft-js";
+import { EditorState } from "draft-js";
+import { Modifier } from "draft-js";
+import { Map } from 'immutable';
+
+var toggleBlockStyle = function toggleBlockStyle(editorState, _ref) {
+  var blockStyle = _ref.type,
+      data = _ref.data;
+
+  /* istanbul ignore else */
+  if (data) {
+    var selection = editorState.getSelection();
+    var newContentState = Modifier.mergeBlockData(editorState.getCurrentContent(), selection, Map(data));
+    var newEditorState = EditorState.push(editorState, newContentState, 'change-block-data');
+    return RichUtils.toggleBlockType(newEditorState, blockStyle);
+  } // We currently always have data, but just in case we add new types in the
+  // future, the default action is to just blindly toggle it.
+
+  /* istanbul ignore next */
+
+
+  return RichUtils.toggleBlockType(editorState, blockStyle);
+};
+
+export default toggleBlockStyle;

package/getCurrentBlock.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var getCurrentBlock = function getCurrentBlock(editorState) {
+  var currentKey = editorState.getSelection().getAnchorKey();
+  return editorState.getCurrentContent().getBlockForKey(currentKey);
+};
+
+var _default = getCurrentBlock;
+exports.default = _default;

package/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "adjustBlockDepth", {
     return _adjustBlockDepth.default;
   }
 });
+Object.defineProperty(exports, "getCurrentBlock", {
+  enumerable: true,
+  get: function get() {
+    return _getCurrentBlock.default;
+  }
+});
 Object.defineProperty(exports, "insertAtomicBlock", {
   enumerable: true,
   get: function get() {
@@ -69,6 +75,18 @@ Object.defineProperty(exports, "modifyBlockByKey", {
     return _modifyBlockByKey.default;
   }
 });
+Object.defineProperty(exports, "moveCaretAfterBlock", {
+  enumerable: true,
+  get: function get() {
+    return _moveCaretAfterBlock.default;
+  }
+});
+Object.defineProperty(exports, "removeBlock", {
+  enumerable: true,
+  get: function get() {
+    return _removeBlock.default;
+  }
+});
 Object.defineProperty(exports, "removeBlockStyle", {
   enumerable: true,
   get: function get() {
@@ -87,6 +105,18 @@ Object.defineProperty(exports, "resetBlock", {
     return _resetBlock.default;
   }
 });
+Object.defineProperty(exports, "selectBlockByKey", {
+  enumerable: true,
+  get: function get() {
+    return _selectBlockByKey.default;
+  }
+});
+Object.defineProperty(exports, "toggleBlockStyle", {
+  enumerable: true,
+  get: function get() {
+    return _toggleBlockStyle.default;
+  }
+});
 Object.defineProperty(exports, "toggleBlockType", {
   enumerable: true,
   get: function get() {
@@ -105,11 +135,14 @@ Object.defineProperty(exports, "toggleInlineStyle", {
     return _toggleInlineStyle.default;
   }
 });
+exports.DRAFTJS_BLOCK_KEY = void 0;
 
 var _addBlock = _interopRequireDefault(require("./addBlock"));
 
 var _adjustBlockDepth = _interopRequireDefault(require("./adjustBlockDepth"));
 
+var _getCurrentBlock = _interopRequireDefault(require("./getCurrentBlock"));
+
 var _insertAtomicBlock = _interopRequireDefault(require("./insertAtomicBlock"));
 
 var _insertEmptyBlock = _interopRequireDefault(require("./insertEmptyBlock"));
@@ -128,16 +161,27 @@ var _modifyBlock = _interopRequireDefault(require("./modifyBlock"));
 
 var _modifyBlockByKey = _interopRequireDefault(require("./modifyBlockByKey"));
 
+var _moveCaretAfterBlock = _interopRequireDefault(require("./moveCaretAfterBlock"));
+
+var _removeBlock = _interopRequireDefault(require("./removeBlock"));
+
 var _removeBlockStyle = _interopRequireDefault(require("./removeBlockStyle"));
 
 var _removeInlineStyles = _interopRequireDefault(require("./removeInlineStyles"));
 
 var _resetBlock = _interopRequireDefault(require("./resetBlock"));
 
+var _selectBlockByKey = _interopRequireDefault(require("./selectBlockByKey"));
+
+var _toggleBlockStyle = _interopRequireDefault(require("./toggleBlockStyle"));
+
 var _toggleBlockType = _interopRequireDefault(require("./toggleBlockType"));
 
 var _toggleEntity = _interopRequireDefault(require("./toggleEntity"));
 
 var _toggleInlineStyle = _interopRequireDefault(require("./toggleInlineStyle"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DRAFTJS_BLOCK_KEY = 'DRAFTJS_BLOCK_KEY';
+exports.DRAFTJS_BLOCK_KEY = DRAFTJS_BLOCK_KEY;

package/moveCaretAfterBlock.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var moveCaretAfterBlock = function moveCaretAfterBlock(editorState, block) {
+  var content = editorState.getCurrentContent();
+  var nextBlock = content.getBlockAfter(block.getKey());
+  var key = nextBlock ? nextBlock.getKey() : undefined;
+
+  if (key) {
+    var selectionState = _draftJs.SelectionState.createEmpty();
+
+    var newSelectionState = selectionState.merge({
+      anchorKey: key,
+      anchorOffset: 0,
+      focusKey: key,
+      focusOffset: 0
+    });
+    return _draftJs.EditorState.forceSelection(editorState, newSelectionState);
+  }
+
+  return editorState;
+};
+
+var _default = moveCaretAfterBlock;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studysync/draft-js-modifiers",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Modular state modifiers for Draft.js",
   "main": "index.js",
   "module": "es/index.js",

package/removeBlock.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+// from draft-js-plugins/draft-js-plugins/packages/drag-n-drop/src/modifiers/addBlock.ts
+var removeBlock = function removeBlock(contentState, blockKey) {
+  var afterKey = contentState.getKeyAfter(blockKey);
+  var afterBlock = contentState.getBlockForKey(afterKey);
+  var targetRange; // Only if the following block the last with no text then the whole block
+  // should be removed. Otherwise the block should be reduced to an unstyled block
+  // without any characters.
+
+  if (afterBlock && afterBlock.getType() === 'unstyled' && afterBlock.getLength() === 0 && afterBlock === contentState.getBlockMap().last()) {
+    targetRange = new _draftJs.SelectionState({
+      anchorKey: blockKey,
+      anchorOffset: 0,
+      focusKey: afterKey,
+      focusOffset: 0
+    });
+  } else {
+    targetRange = new _draftJs.SelectionState({
+      anchorKey: blockKey,
+      anchorOffset: 0,
+      focusKey: blockKey,
+      focusOffset: 1
+    });
+  } // change the blocktype and remove the characterList entry with the block
+
+
+  var newContentState = _draftJs.Modifier.setBlockType(contentState, targetRange, 'unstyled');
+
+  return _draftJs.Modifier.removeRange(newContentState, targetRange, 'backward');
+};
+
+var _default = removeBlock;
+exports.default = _default;

package/selectBlockByKey.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var selectBlockByKey = function selectBlockByKey(editorState, key) {
+  var currentBlock = editorState.getCurrentContent().getBlockForKey(key);
+
+  var selectionState = _draftJs.SelectionState.createEmpty();
+
+  var entireBlockSelectionState = selectionState.merge({
+    anchorKey: key,
+    anchorOffset: 0,
+    focusKey: key,
+    focusOffset: currentBlock.getText().length
+  });
+  return _draftJs.EditorState.forceSelection(editorState, entireBlockSelectionState);
+};
+
+var _default = selectBlockByKey;
+exports.default = _default;

package/toggleBlockStyle.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var _immutable = require("immutable");
+
+var toggleBlockStyle = function toggleBlockStyle(editorState, _ref) {
+  var blockStyle = _ref.type,
+      data = _ref.data;
+
+  /* istanbul ignore else */
+  if (data) {
+    var selection = editorState.getSelection();
+
+    var newContentState = _draftJs.Modifier.mergeBlockData(editorState.getCurrentContent(), selection, (0, _immutable.Map)(data));
+
+    var newEditorState = _draftJs.EditorState.push(editorState, newContentState, 'change-block-data');
+
+    return _draftJs.RichUtils.toggleBlockType(newEditorState, blockStyle);
+  } // We currently always have data, but just in case we add new types in the
+  // future, the default action is to just blindly toggle it.
+
+  /* istanbul ignore next */
+
+
+  return _draftJs.RichUtils.toggleBlockType(editorState, blockStyle);
+};
+
+var _default = toggleBlockStyle;
+exports.default = _default;