draft-js-mention-plugin - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

CHANGELOG.md

@@ -8,2 +8,13 @@ # Change Log
 
+## 1.1.2 - 2016-06-26
+
+### Fixed
+
+- Accepts plain JavaScript Objects for mentions from now on. Until now it only accepted an `Immutable.Map`. This change would make it play nicer together with `convertFromRaw` by default. Thanks to @anderslemke [#326](https://github.com/draft-js-plugins/draft-js-plugins/pull/326)
+- `positionSuggestions` now works by default with non-static parents. Thanks to @Zhouzi
+[#309](https://github.com/draft-js-plugins/draft-js-plugins/pull/309)
+[#206](https://github.com/draft-js-plugins/draft-js-plugins/issues/206)
+[#283](https://github.com/draft-js-plugins/draft-js-plugins/issues/283)
+[#289](https://github.com/draft-js-plugins/draft-js-plugins/issues/289)
+
 ## 1.1.1 - 2016-06-05
@@ -10,0 +21,0 @@

lib/Mention/index.js

@@ -13,2 +13,4 @@ 'use strict';
 
+var _immutable = require('immutable');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,7 +23,4 @@
 
-  var _Entity$get$getData = _draftJs.Entity.get(entityKey).getData();
+  var mention = (0, _immutable.fromJS)(_draftJs.Entity.get(entityKey).getData().mention);
 
-  var mention = _Entity$get$getData.mention;
-
-
   if (mention.has('link')) {
@@ -28,0 +27,0 @@ return _react2.default.createElement(

lib/MentionSuggestions/index.js

@@ -77,3 +77,4 @@ 'use strict';
             props: _this.props,
-            state: _this.state
+            state: _this.state,
+            popover: _this.refs.popover
           });
@@ -80,0 +81,0 @@ Object.keys(newStyles).forEach(function (key) {

lib/utils/positionSuggestions.js

@@ -6,33 +6,57 @@ 'use strict';
 });
+var getRelativeParent = function getRelativeParent(element) {
+  if (!element) {
+    return null;
+  }
+
+  var position = window.getComputedStyle(element).getPropertyValue('position');
+  if (position !== 'static') {
+    return element;
+  }
+
+  return getRelativeParent(element.parentElement);
+};
+
 var positionSuggestions = function positionSuggestions(_ref) {
   var decoratorRect = _ref.decoratorRect;
+  var popover = _ref.popover;
   var state = _ref.state;
   var props = _ref.props;
 
-  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-  var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+  var relativeParent = getRelativeParent(popover.parentElement);
+  var relativeRect = {};
 
-  var width = void 0;
-  var left = void 0;
-  var transform = void 0;
-  var transition = void 0;
-  if (window.innerWidth <= 480) {
-    left = '20px';
-    width = window.innerWidth - 40 + 'px';
+  if (relativeParent) {
+    relativeRect.scrollLeft = relativeParent.scrollLeft;
+    relativeRect.scrollTop = relativeParent.scrollTop;
+
+    var relativeParentRect = relativeParent.getBoundingClientRect();
+    relativeRect.left = decoratorRect.left - relativeParentRect.left;
+    relativeRect.top = decoratorRect.top - relativeParentRect.top;
   } else {
-    left = decoratorRect.left + scrollLeft + 'px';
+    relativeRect.scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    relativeRect.scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+    relativeRect.top = decoratorRect.top;
+    relativeRect.left = decoratorRect.left;
   }
 
-  if (state.isActive & props.suggestions.size > 0) {
-    transform = 'scale(1)';
-    transition = 'all 0.25s cubic-bezier(.3,1.2,.2,1)';
-  } else if (state.isActive) {
-    transform = 'scale(0)';
-    transition = 'all 0.35s cubic-bezier(.3,1,.2,1)';
+  var left = relativeRect.left + relativeRect.scrollLeft;
+  var top = relativeRect.top + relativeRect.scrollTop;
+
+  var transform = void 0;
+  var transition = void 0;
+  if (state.isActive) {
+    if (props.suggestions.size > 0) {
+      transform = 'scale(1)';
+      transition = 'all 0.25s cubic-bezier(.3,1.2,.2,1)';
+    } else {
+      transform = 'scale(0)';
+      transition = 'all 0.35s cubic-bezier(.3,1,.2,1)';
+    }
   }
 
   return {
-    width: width,
-    left: left,
-    top: decoratorRect.top + scrollTop + 'px',
+    left: left + 'px',
+    top: top + 'px',
     transform: transform,
@@ -39,0 +63,0 @@ transformOrigin: '1em 0%',

package.json

 {
   "name": "draft-js-mention-plugin",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Mention Plugin for DraftJS",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -5,3 +5,3 @@ # DraftJS Mention Plugin
 
-This plugin allows you to add stickers to your editor!
+This plugin allows you to add mentions to your editor!
 
@@ -22,3 +22,3 @@ Usage:
 ### Webpack Usage
-Follow the steps below to import the css file by using Webpack's `style-loader` and `css-loader`. 
+Follow the steps below to import the css file by using Webpack's `style-loader` and `css-loader`.
 
@@ -25,0 +25,0 @@ 1. Install Webpack loaders: `npm install style-loader css-loader --save-dev`

No alert changes

Improved metrics

Total package byte prevSize

47505

increased by3.26%

Lines of code

861

increased by2.26%

No dependency changes