@studysync/draft-js-modifiers 0.3.0 → 0.3.1

package/README.md

@@ -34,6 +34,18 @@ import { insertText } from 'draft-js-modifiers'
 
 ## Methods
 
+### `addBlock`
+
+```js
+addBlock(
+  editorState: EditorState,
+  selection,
+  type: string,
+  data: { [id: string]: any },
+  entityType: string,
+  text?: ?string = ' '
+```
+
 ### `adjustBlockDepth`
 
 ```js

package/addBlock.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _draftJs = require("draft-js");
+
+var _immutable = require("immutable");
+
+var addBlock = function addBlock(editorState, selection, type, data, entityType) {
+  var text = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ' ';
+  var currentContentState = editorState.getCurrentContent();
+  var currentSelectionState = selection; // in case text is selected it is removed and then the block is appended
+
+  var afterRemovalContentState = _draftJs.Modifier.removeRange(currentContentState, currentSelectionState, 'backward'); // deciding on the position to split the text
+
+
+  var targetSelection = afterRemovalContentState.getSelectionAfter();
+  var blockKeyForTarget = targetSelection.get('focusKey');
+  var block = currentContentState.getBlockForKey(blockKeyForTarget);
+  var insertionTargetSelection;
+  var insertionTargetBlock; // In case there are no characters or entity or the selection is at the start it
+  // is safe to insert the block in the current block.
+  // Otherwise a new block is created (the block is always its own block)
+
+  var isEmptyBlock = block.getLength() === 0 && block.getEntityAt(0) === null;
+  var selectedFromStart = currentSelectionState.getStartOffset() === 0;
+
+  if (isEmptyBlock || selectedFromStart) {
+    insertionTargetSelection = targetSelection;
+    insertionTargetBlock = afterRemovalContentState;
+  } else {
+    // the only way to insert a new seems to be by splitting an existing in to two
+    insertionTargetBlock = _draftJs.Modifier.splitBlock(afterRemovalContentState, targetSelection); // the position to insert our blocks
+
+    insertionTargetSelection = insertionTargetBlock.getSelectionAfter();
+  } // TODO not sure why we need it …
+
+
+  var newContentStateAfterSplit = _draftJs.Modifier.setBlockType(insertionTargetBlock, insertionTargetSelection, type); // creating a new ContentBlock including the entity with data
+  // Entity will be created with a specific type, if defined, else will fall back to the ContentBlock type
+
+
+  var contentStateWithEntity = newContentStateAfterSplit.createEntity(entityType || type, 'IMMUTABLE', data);
+  var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+  var charData = _draftJs.CharacterMetadata.create({
+    entity: entityKey
+  });
+
+  var fragmentArray = [new _draftJs.ContentBlock({
+    key: (0, _draftJs.genKey)(),
+    type: type,
+    text: text,
+    characterList: (0, _immutable.List)((0, _immutable.Repeat)(charData, text.length || 1)) // eslint-disable-line new-cap
+
+  }), // new contentblock so we can continue wrting right away after inserting the block
+  new _draftJs.ContentBlock({
+    key: (0, _draftJs.genKey)(),
+    type: 'unstyled',
+    text: '',
+    characterList: (0, _immutable.List)() // eslint-disable-line new-cap
+
+  })]; // create fragment containing the two content blocks
+
+  var fragment = _draftJs.BlockMapBuilder.createFromArray(fragmentArray); // replace the contentblock we reserved for our insert
+
+
+  return _draftJs.Modifier.replaceWithFragment(newContentStateAfterSplit, insertionTargetSelection, fragment);
+};
+
+var _default = addBlock;
+exports.default = _default;

package/es/addBlock.js

@@ -0,0 +1,65 @@
+import { Modifier } from "draft-js";
+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';
+
+var addBlock = function addBlock(editorState, selection, type, data, entityType) {
+  var text = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ' ';
+  var currentContentState = editorState.getCurrentContent();
+  var currentSelectionState = selection; // in case text is selected it is removed and then the block is appended
+
+  var afterRemovalContentState = Modifier.removeRange(currentContentState, currentSelectionState, 'backward'); // deciding on the position to split the text
+
+  var targetSelection = afterRemovalContentState.getSelectionAfter();
+  var blockKeyForTarget = targetSelection.get('focusKey');
+  var block = currentContentState.getBlockForKey(blockKeyForTarget);
+  var insertionTargetSelection;
+  var insertionTargetBlock; // In case there are no characters or entity or the selection is at the start it
+  // is safe to insert the block in the current block.
+  // Otherwise a new block is created (the block is always its own block)
+
+  var isEmptyBlock = block.getLength() === 0 && block.getEntityAt(0) === null;
+  var selectedFromStart = currentSelectionState.getStartOffset() === 0;
+
+  if (isEmptyBlock || selectedFromStart) {
+    insertionTargetSelection = targetSelection;
+    insertionTargetBlock = afterRemovalContentState;
+  } else {
+    // the only way to insert a new seems to be by splitting an existing in to two
+    insertionTargetBlock = Modifier.splitBlock(afterRemovalContentState, targetSelection); // the position to insert our blocks
+
+    insertionTargetSelection = insertionTargetBlock.getSelectionAfter();
+  } // TODO not sure why we need it …
+
+
+  var newContentStateAfterSplit = Modifier.setBlockType(insertionTargetBlock, insertionTargetSelection, type); // creating a new ContentBlock including the entity with data
+  // Entity will be created with a specific type, if defined, else will fall back to the ContentBlock type
+
+  var contentStateWithEntity = newContentStateAfterSplit.createEntity(entityType || type, 'IMMUTABLE', data);
+  var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+  var charData = CharacterMetadata.create({
+    entity: entityKey
+  });
+  var fragmentArray = [new ContentBlock({
+    key: genKey(),
+    type: type,
+    text: text,
+    characterList: List(Repeat(charData, text.length || 1)) // eslint-disable-line new-cap
+
+  }), // new contentblock so we can continue wrting right away after inserting the block
+  new ContentBlock({
+    key: genKey(),
+    type: 'unstyled',
+    text: '',
+    characterList: List() // eslint-disable-line new-cap
+
+  })]; // create fragment containing the two content blocks
+
+  var fragment = BlockMapBuilder.createFromArray(fragmentArray); // replace the contentblock we reserved for our insert
+
+  return Modifier.replaceWithFragment(newContentStateAfterSplit, insertionTargetSelection, fragment);
+};
+
+export default addBlock;

package/es/index.js

@@ -1,3 +1,4 @@
+export { default as addBlock } from './addBlock';
 export { default as adjustBlockDepth } from './adjustBlockDepth';
 export { default as insertAtomicBlock } from './insertAtomicBlock';
 export { default as insertEmptyBlock } from './insertEmptyBlock';

package/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "addBlock", {
+  enumerable: true,
+  get: function get() {
+    return _addBlock.default;
+  }
+});
 Object.defineProperty(exports, "adjustBlockDepth", {
   enumerable: true,
   get: function get() {
@@ -100,6 +106,8 @@ Object.defineProperty(exports, "toggleInlineStyle", {
   }
 });
 
+var _addBlock = _interopRequireDefault(require("./addBlock"));
+
 var _adjustBlockDepth = _interopRequireDefault(require("./adjustBlockDepth"));
 
 var _insertAtomicBlock = _interopRequireDefault(require("./insertAtomicBlock"));

package/package.json

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