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

Comparing version 2.0.1 to 3.0.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## 3.0.0
+- Deprecate immutable suggestions (breaking change), use arrays from now on
+- export default theme (in case we want to extend it)
+
+## 2.0.2
+(Much thanks to "dem" aka "Michael Deryugin" - https://github.com/dem)
+- fix suggestions dropdown position in case of line wrap
+- Allow mention popup for styled text
+- Fixed bug where a user typed not existing mention @xxx and cursor is not moved with up/down arrow key
+- Updated dependencies to support react 16
+
 ## To Be Released
@@ -45,2 +56,3 @@
 - Fixed bug where `onSearchChange` didn't fire when a user switched between two different mention autocompletions with the same search value. Now it will trigger `onSearchChange` in such a case.
+- Fixed unrecognized `isFocused` React prop.
 
@@ -47,0 +59,0 @@ ## 1.1.2 - 2016-06-26

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.defaultSuggestionsFilter = exports.MentionSuggestions = undefined;
+exports.defaultSuggestionsFilter = exports.defaultTheme = exports.MentionSuggestions = undefined;
 
@@ -77,17 +77,17 @@ var _MentionSuggestions = require('./MentionSuggestions');
 
+var defaultTheme = exports.defaultTheme = {
+  // CSS class for mention text
+  mention: _mentionStyles2.default.mention,
+  // CSS class for suggestions component
+  mentionSuggestions: _mentionSuggestionsStyles2.default.mentionSuggestions,
+  // CSS classes for an entry in the suggestions component
+  mentionSuggestionsEntry: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntry,
+  mentionSuggestionsEntryFocused: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntryFocused,
+  mentionSuggestionsEntryText: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntryText,
+  mentionSuggestionsEntryAvatar: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntryAvatar
+};
+
 exports.default = function () {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var defaultTheme = {
-    // CSS class for mention text
-    mention: _mentionStyles2.default.mention,
-    // CSS class for suggestions component
-    mentionSuggestions: _mentionSuggestionsStyles2.default.mentionSuggestions,
-    // CSS classes for an entry in the suggestions component
-    mentionSuggestionsEntry: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntry,
-    mentionSuggestionsEntryFocused: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntryFocused,
-    mentionSuggestionsEntryText: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntryText,
-    mentionSuggestionsEntryAvatar: _mentionSuggestionsEntryStyles2.default.mentionSuggestionsEntryAvatar
-  };
-
   var callbacks = {
@@ -94,0 +94,0 @@ keyBindingFn: undefined,

lib/Mention/index.js

@@ -11,4 +11,2 @@ 'use strict';
 
-var _immutable = require('immutable');
-
 var _unionClassNames = require('union-class-names');
@@ -27,3 +25,3 @@
     {
-      href: mention.get('link'),
+      href: mention.link,
       className: className,
@@ -61,5 +59,5 @@ spellCheck: false
   var combinedClassName = (0, _unionClassNames2.default)(theme.mention, className);
-  var mention = (0, _immutable.fromJS)(contentState.getEntity(entityKey).getData().mention);
+  var mention = contentState.getEntity(entityKey).getData().mention;
 
-  var Component = mentionComponent || (mention.has('link') ? MentionLink : MentionText);
+  var Component = mentionComponent || (mention.link ? MentionLink : MentionText);
 
@@ -66,0 +64,0 @@ return _react2.default.createElement(

lib/MentionSuggestions/Entry/Avatar/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
@@ -19,7 +19,7 @@ var _react2 = _interopRequireDefault(_react);
 
-  if (mention.has('avatar')) {
-    return _react2.default.createElement('img', {
-      src: mention.get('avatar'),
+  if (mention.avatar) {
+    return _react2.default.createElement("img", {
+      src: mention.avatar,
       className: theme.mentionSuggestionsEntryAvatar,
-      role: 'presentation'
+      role: "presentation"
     });
@@ -26,0 +26,0 @@ }

lib/MentionSuggestions/Entry/defaultEntryComponent.js

@@ -22,4 +22,5 @@ 'use strict';
       theme = props.theme,
+      isFocused = props.isFocused,
       searchValue = props.searchValue,
-      parentProps = _objectWithoutProperties(props, ['mention', 'theme', 'searchValue']);
+      parentProps = _objectWithoutProperties(props, ['mention', 'theme', 'isFocused', 'searchValue']);
 
@@ -33,3 +34,3 @@ return _react2.default.createElement(
       { className: theme.mentionSuggestionsEntryText },
-      mention.get('name')
+      mention.name
     )
@@ -36,0 +37,0 @@ );

lib/MentionSuggestions/index.js

@@ -8,6 +8,6 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _react = require('react');
@@ -23,4 +23,2 @@
 
-var _immutable = require('immutable');
-
 var _lodash = require('lodash.escaperegexp');
@@ -60,14 +58,2 @@
 
-var suggestionsHoc = function suggestionsHoc(Comp) {
-  return function (props) {
-    if (_immutable.List.isList(props.suggestions)) {
-      console.warn('Immutable.List for the "suggestions" prop will be deprecated in the next major version, please use an array instead'); // eslint-disable-line no-console
-    }
-
-    return _react2.default.createElement(Comp, _extends({}, props, {
-      suggestions: (0, _immutable.fromJS)(props.suggestions)
-    }));
-  };
-};
-
 var MentionSuggestions = exports.MentionSuggestions = function (_Component) {
@@ -95,3 +81,3 @@ _inherits(MentionSuggestions, _Component);
         // not fullfilled anymore.
-        var size = _this.props.suggestions.size;
+        var size = _this.props.suggestions.length;
         if (size > 0 && _this.state.focusedOptionIndex >= size) {
@@ -154,2 +140,3 @@ _this.setState({
       // a leave can be empty when it is removed due e.g. using backspace
+      // do not check leaves, use full decorated portal text
       var leaves = offsetDetails.filter(function (_ref2) {
@@ -160,5 +147,4 @@ var blockKey = _ref2.blockKey;
         var blockKey = _ref3.blockKey,
-            decoratorKey = _ref3.decoratorKey,
-            leafKey = _ref3.leafKey;
-        return editorState.getBlockTree(blockKey).getIn([decoratorKey, 'leaves', leafKey]);
+            decoratorKey = _ref3.decoratorKey;
+        return editorState.getBlockTree(blockKey).getIn([decoratorKey]);
       });
@@ -207,3 +193,3 @@
       // input field and then comes back: the dropdown will show again.
-      if (!_this.state.isActive && !_this.props.store.isEscaped(_this.activeOffsetKey)) {
+      if (!_this.state.isActive && !_this.props.store.isEscaped(_this.activeOffsetKey) && _this.props.suggestions.length > 0) {
         _this.openDropdown();
@@ -236,3 +222,3 @@ }
       var newIndex = _this.state.focusedOptionIndex + 1;
-      _this.onMentionFocus(newIndex >= _this.props.suggestions.size ? 0 : newIndex);
+      _this.onMentionFocus(newIndex >= _this.props.suggestions.length ? 0 : newIndex);
     }, _this.onTab = function (keyboardEvent) {
@@ -243,5 +229,5 @@ keyboardEvent.preventDefault();
       keyboardEvent.preventDefault();
-      if (_this.props.suggestions.size > 0) {
+      if (_this.props.suggestions.length > 0) {
         var newIndex = _this.state.focusedOptionIndex - 1;
-        _this.onMentionFocus(newIndex < 0 ? _this.props.suggestions.size - 1 : newIndex);
+        _this.onMentionFocus(newIndex < 0 ? _this.props.suggestions.length - 1 : newIndex);
       }
@@ -287,3 +273,3 @@ }, _this.onEscape = function (keyboardEvent) {
 
-      _this.onMentionSelect(_this.props.suggestions.get(_this.state.focusedOptionIndex));
+      _this.onMentionSelect(_this.props.suggestions[_this.state.focusedOptionIndex]);
       return 'handled';
@@ -343,5 +329,5 @@ }, _this.openDropdown = function () {
     value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.suggestions.size === 0 && this.state.isActive) {
+      if (nextProps.suggestions.length === 0 && this.state.isActive) {
         this.closeDropdown();
-      } else if (nextProps.suggestions.size > 0 && !nextProps.suggestions.equals(this.props.suggestions) && !this.state.isActive) {
+      } else if (nextProps.suggestions.length > 0 && nextProps.suggestions !== this.props.suggestions && !this.state.isActive) {
         this.openDropdown();
@@ -388,3 +374,3 @@ }
         return _react2.default.createElement(_Entry2.default, {
-          key: mention.has('id') ? mention.get('id') : mention.get('name'),
+          key: mention.id != null ? mention.id : mention.name,
           onMentionSelect: _this2.onMentionSelect,
@@ -400,3 +386,3 @@ onMentionFocus: _this2.onMentionFocus,
         });
-      }).toJS());
+      }));
     }
@@ -412,9 +398,4 @@ }]);
   onAddMention: _propTypes2.default.func,
-  suggestions: function suggestions(props, propName, componentName) {
-    if (!_immutable.List.isList(props[propName])) {
-      return new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. should be an instance of immutable list.');
-    }
-    return undefined;
-  }
+  suggestions: _propTypes2.default.array
 };
-exports.default = suggestionsHoc(MentionSuggestions);
+exports.default = MentionSuggestions;

lib/modifiers/addMention.js

@@ -37,3 +37,3 @@ 'use strict';
 
-  var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, '' + mentionPrefix + mention.get('name'), null, // no inline style needed
+  var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, '' + mentionPrefix + mention.name, null, // no inline style needed
   entityKey);
@@ -40,0 +40,0 @@

lib/utils/defaultSuggestionsFilter.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,16 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 // Get the first 5 suggestions that match
-var size = function size(list) {
-  return list.constructor.name === 'List' ? list.size : list.length;
-};
 
-var get = function get(obj, attr) {
-  return obj.get ? obj.get(attr) : obj[attr];
-};
-
 var defaultSuggestionsFilter = function defaultSuggestionsFilter(searchValue, suggestions) {
   var value = searchValue.toLowerCase();
   var filteredSuggestions = suggestions.filter(function (suggestion) {
-    return !value || get(suggestion, 'name').toLowerCase().indexOf(value) > -1;
+    return !value || suggestion.name.toLowerCase().indexOf(value) > -1;
   });
-  var length = size(filteredSuggestions) < 5 ? size(filteredSuggestions) : 5;
+  var length = filteredSuggestions.length < 5 ? filteredSuggestions.length : 5;
   return filteredSuggestions.slice(0, length);
@@ -23,0 +16,0 @@ };

lib/utils/positionSuggestions.js

@@ -34,3 +34,3 @@ 'use strict';
     relativeRect.left = decoratorRect.left - relativeParentRect.left;
-    relativeRect.top = decoratorRect.top - relativeParentRect.top;
+    relativeRect.top = decoratorRect.bottom - relativeParentRect.top;
   } else {
@@ -40,3 +40,3 @@ relativeRect.scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
-    relativeRect.top = decoratorRect.top;
+    relativeRect.top = decoratorRect.bottom;
     relativeRect.left = decoratorRect.left;
@@ -51,3 +51,3 @@ }
   if (state.isActive) {
-    if (props.suggestions.size > 0) {
+    if (props.suggestions.length > 0) {
       transform = 'scale(1)';
@@ -54,0 +54,0 @@ transition = 'all 0.25s cubic-bezier(.3,1.2,.2,1)';

package.json

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

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

Worsened metrics

Total package byte prevSize

63686

decreased by-1.16%

Number of package files

23

decreased by-4.17%

Lines of code

1062

decreased by-2.03%

No dependency changes