draft-js - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

CHANGELOG.md

@@ -7,2 +7,19 @@ # Changelog
 
+## 0.5.0 (April 12, 2016)
+
+### Fixed
+
+* <kbd>option</kbd>+<kbd>spacebar</kbd> no longer incorrectly scrolls browser in Chrome OSX
+* Cursor behavior when adding soft newlines
+
+### Added
+
+* `AtomicBlockUtils`, a utility module to simplify adding `atomic` blocks to
+an `EditorState`
+
+### Changed
+
+* The `media` block type is now `atomic`, to better represent that this type
+is not just intended for photos and videos
+
 ## 0.4.0 (April 6, 2016)
@@ -9,0 +26,0 @@

lib/Draft.js

@@ -14,2 +14,3 @@ /**
 
+var AtomicBlockUtils = require('./AtomicBlockUtils');
 var BlockMapBuilder = require('./BlockMapBuilder');
@@ -52,2 +53,3 @@ var CharacterMetadata = require('./CharacterMetadata');
 
+  AtomicBlockUtils: AtomicBlockUtils,
   KeyBindingUtil: KeyBindingUtil,
@@ -54,0 +56,0 @@ Modifier: DraftModifier,

lib/editOnKeyDown.js

@@ -13,10 +13,10 @@ /**
 
-/**
- * Map a `DraftEditorCommand` command value to a corresponding function.
- */
 'use strict';
 
+var DraftModifier = require('./DraftModifier');
 var EditorState = require('./EditorState');
+var KeyBindingUtil = require('./KeyBindingUtil');
 var Keys = require('fbjs/lib/Keys');
 var SecondaryClipboard = require('./SecondaryClipboard');
+var UserAgent = require('fbjs/lib/UserAgent');
 
@@ -34,2 +34,9 @@ var keyCommandBackspaceToStartOfLine = require('./keyCommandBackspaceToStartOfLine');
 
+var isOptionKeyCommand = KeyBindingUtil.isOptionKeyCommand;
+
+var isChrome = UserAgent.isBrowser('Chrome');
+
+/**
+ * Map a `DraftEditorCommand` command value to a corresponding function.
+ */
 function onKeyCommand(command, editorState) {
@@ -101,2 +108,11 @@ switch (command) {
       return;
+    case Keys.SPACE:
+      // Handling for OSX where option + space scrolls.
+      if (isChrome && isOptionKeyCommand(e)) {
+        e.preventDefault();
+        // Insert a nbsp into the editor.
+        var contentState = DraftModifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), ' ');
+        this.update(EditorState.push(editorState, contentState, 'insert-characters'));
+        return;
+      }
   }
@@ -103,0 +119,0 @@

lib/EditorState.js

@@ -119,2 +119,4 @@ /**
     }
+  }, {
+    key: 'getCurrentInlineStyle',
 
@@ -126,4 +128,2 @@ /**
      */
-  }, {
-    key: 'getCurrentInlineStyle',
     value: function getCurrentInlineStyle() {
@@ -249,2 +249,7 @@ var override = this.getInlineStyleOverride();
   }, {
+    key: 'setInlineStyleOverride',
+    value: function setInlineStyleOverride(editorState, inlineStyleOverride) {
+      return EditorState.set(editorState, { inlineStyleOverride: inlineStyleOverride });
+    }
+  }, {
     key: 'acceptSelection',
@@ -251,0 +256,0 @@ value: function acceptSelection(editorState, selection) {

lib/getElementForBlockType.js

@@ -34,3 +34,3 @@ /**
       return 'blockquote';
-    case 'media':
+    case 'atomic':
       return 'figure';
@@ -37,0 +37,0 @@ default:

lib/getSampleStateForTesting.js

@@ -20,2 +20,3 @@ /**
 var ContentState = require('./ContentState');
+var EditorState = require('./EditorState');
 var Immutable = require('immutable');
@@ -63,6 +64,9 @@ var SampleDraftInlineStyle = require('./SampleDraftInlineStyle');
 
+var editorState = EditorState.createWithContent(contentState);
+editorState = EditorState.forceSelection(editorState, selectionState);
+
 function getSampleStateForTesting() {
-  return { contentState: contentState, selectionState: selectionState };
+  return { editorState: editorState, contentState: contentState, selectionState: selectionState };
 }
 
 module.exports = getSampleStateForTesting;

lib/KeyBindingUtil.js

@@ -30,2 +30,6 @@ /**
 
+  isOptionKeyCommand: function isOptionKeyCommand(e) {
+    return isOSX && e.altKey;
+  },
+
   hasCommandModifier: function hasCommandModifier(e) {
@@ -32,0 +36,0 @@ return isOSX ? !!e.metaKey && !e.altKey : KeyBindingUtil.isCtrlKeyCommand(e);

lib/RichTextEditorUtil.js

@@ -67,3 +67,5 @@ /**
 
-    return EditorState.push(editorState, contentState, 'insert-characters');
+    var newEditorState = EditorState.push(editorState, contentState, 'insert-characters');
+
+    return EditorState.forceSelection(newEditorState, contentState.getSelectionAfter());
   },
@@ -81,3 +83,3 @@
 
-    // First, try to remove a preceding media block.
+    // First, try to remove a preceding atomic block.
     var content = editorState.getCurrentContent();
@@ -94,11 +96,11 @@ var startKey = selection.getStartKey();
 
-    if (blockBefore && blockBefore.getType() === 'media') {
-      var mediaBlockTarget = selection.merge({
+    if (blockBefore && blockBefore.getType() === 'atomic') {
+      var atomicBlockTarget = selection.merge({
         anchorKey: blockBefore.getKey(),
         anchorOffset: 0
       });
-      var asCurrentStyle = DraftModifier.setBlockType(content, mediaBlockTarget, content.getBlockForKey(startKey).getType());
-      var withoutMedia = DraftModifier.removeRange(asCurrentStyle, mediaBlockTarget, 'backward');
-      if (withoutMedia !== content) {
-        return EditorState.push(editorState, withoutMedia, 'remove-range');
+      var asCurrentStyle = DraftModifier.setBlockType(content, atomicBlockTarget, content.getBlockForKey(startKey).getType());
+      var withoutAtomicBlock = DraftModifier.removeRange(asCurrentStyle, atomicBlockTarget, 'backward');
+      if (withoutAtomicBlock !== content) {
+        return EditorState.push(editorState, withoutAtomicBlock, 'remove-range');
       }
@@ -135,3 +137,3 @@ }
 
-    if (!blockAfter || blockAfter.getType() !== 'media') {
+    if (!blockAfter || blockAfter.getType() !== 'atomic') {
       return null;
@@ -149,9 +151,9 @@ }
 
-      var preserveMedia = DraftModifier.setBlockType(withoutEmptyBlock, withoutEmptyBlock.getSelectionAfter(), 'media');
+      var preserveAtomicBlock = DraftModifier.setBlockType(withoutEmptyBlock, withoutEmptyBlock.getSelectionAfter(), 'atomic');
 
-      return EditorState.push(editorState, preserveMedia, 'remove-range');
+      return EditorState.push(editorState, preserveAtomicBlock, 'remove-range');
     }
 
-    // Otherwise, delete the media block.
-    var mediaBlockTarget = selection.merge({
+    // Otherwise, delete the atomic block.
+    var atomicBlockTarget = selection.merge({
       focusKey: blockAfter.getKey(),
@@ -161,6 +163,6 @@ focusOffset: blockAfter.getLength()
 
-    var withoutMedia = DraftModifier.removeRange(content, mediaBlockTarget, 'forward');
+    var withoutAtomicBlock = DraftModifier.removeRange(content, atomicBlockTarget, 'forward');
 
-    if (withoutMedia !== content) {
-      return EditorState.push(editorState, withoutMedia, 'remove-range');
+    if (withoutAtomicBlock !== content) {
+      return EditorState.push(editorState, withoutAtomicBlock, 'remove-range');
     }
@@ -234,3 +236,3 @@
 
-    var hasMedia = content.getBlockMap().skipWhile(function (_, k) {
+    var hasAtomicBlock = content.getBlockMap().skipWhile(function (_, k) {
       return k !== startKey;
@@ -240,6 +242,6 @@ }).takeWhile(function (_, k) {
     }).some(function (v) {
-      return v.getType() === 'media';
+      return v.getType() === 'atomic';
     });
 
-    if (hasMedia) {
+    if (hasAtomicBlock) {
       return editorState;
@@ -279,5 +281,3 @@ }
     if (selection.isCollapsed()) {
-      return EditorState.set(editorState, {
-        inlineStyleOverride: currentStyle.has(inlineStyle) ? currentStyle.remove(inlineStyle) : currentStyle.add(inlineStyle)
-      });
+      return EditorState.setInlineStyleOverride(editorState, currentStyle.has(inlineStyle) ? currentStyle.remove(inlineStyle) : currentStyle.add(inlineStyle));
     }
@@ -284,0 +284,0 @@

package.json

 {
   "name": "draft-js",
   "description": "A React framework for building text editors.",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "keywords": [
@@ -6,0 +6,0 @@ "draftjs",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

891968

increased by0.99%

Number of package files

139

increased by0.72%

Lines of code

19282

increased by0.82%

No dependency changes