draft-js-mention-plugin
Advanced tools
Comparing version 2.0.0-beta5 to 2.0.0-beta6
@@ -14,4 +14,7 @@ # Change Log | ||
- The config now accepts a new prop `mentionComponent`. If provided the passed component is used to render a Mention. [#271](https://github.com/draft-js-plugins/draft-js-plugins/pull/271). Thanks to @alexkuz | ||
- Introduced the `mentionRegExp` configuration to overwrite the regular expression for initiating the dropdown. By default this supports any alphanumeric character as well as Chinese, Japanese & Korean characters. | ||
- Added support for Chinese words. Thanks to @mzbac | ||
- Added support for Japanese characters (hiragana & katakana). | ||
- Added support for Korean characters (Hangul Syllables & Hangul Compatibility Jamo). Thanks to @FourwingsY | ||
- Added `onAddMention` prop to MentionSuggestions. The first argument of this callback will contain the mention entry. | ||
@@ -25,2 +28,3 @@ ### Fixed | ||
- Fixed race condition where the SuggestionPortal would unregister and not register again when inputting Japanese, etc. | ||
- Fixed bug where `mentionPrefix` does not appear in `editorState`. `mentionPrefix` is no longer passed to `mentionComponent`. | ||
@@ -27,0 +31,0 @@ ## 1.1.2 - 2016-06-26 |
@@ -26,2 +26,6 @@ 'use strict'; | ||
var _defaultRegExp = require('./defaultRegExp'); | ||
var _defaultRegExp2 = _interopRequireDefault(_defaultRegExp); | ||
var _mentionStrategy = require('./mentionStrategy'); | ||
@@ -67,3 +71,3 @@ | ||
var createMentionPlugin = function createMentionPlugin() { | ||
var config = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; | ||
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
@@ -153,2 +157,4 @@ var defaultTheme = { | ||
var mentionTrigger = _config$mentionTrigge === undefined ? '@' : _config$mentionTrigge; | ||
var _config$mentionRegExp = config.mentionRegExp; | ||
var mentionRegExp = _config$mentionRegExp === undefined ? _defaultRegExp2.default : _config$mentionRegExp; | ||
@@ -162,3 +168,4 @@ var mentionSearchProps = { | ||
positionSuggestions: positionSuggestions, | ||
mentionTrigger: mentionTrigger | ||
mentionTrigger: mentionTrigger, | ||
mentionPrefix: mentionPrefix | ||
}; | ||
@@ -169,5 +176,5 @@ return { | ||
strategy: (0, _mentionStrategy2.default)(mentionTrigger), | ||
component: (0, _decorateComponentWithProps2.default)(_Mention2.default, { theme: theme, mentionPrefix: mentionPrefix, mentionComponent: mentionComponent }) | ||
component: (0, _decorateComponentWithProps2.default)(_Mention2.default, { theme: theme, mentionComponent: mentionComponent }) | ||
}, { | ||
strategy: (0, _mentionSuggestionsStrategy2.default)(mentionTrigger), | ||
strategy: (0, _mentionSuggestionsStrategy2.default)(mentionTrigger, mentionRegExp), | ||
component: (0, _decorateComponentWithProps2.default)(_MentionSuggestionsPortal2.default, { store: store }) | ||
@@ -174,0 +181,0 @@ }], |
@@ -23,3 +23,2 @@ 'use strict'; | ||
var mention = _ref.mention; | ||
var mentionPrefix = _ref.mentionPrefix; | ||
var children = _ref.children; | ||
@@ -34,3 +33,2 @@ var className = _ref.className; | ||
}, | ||
mentionPrefix, | ||
children | ||
@@ -41,3 +39,2 @@ ); | ||
var MentionText = function MentionText(_ref2) { | ||
var mentionPrefix = _ref2.mentionPrefix; | ||
var children = _ref2.children; | ||
@@ -51,3 +48,2 @@ var className = _ref2.className; | ||
}, | ||
mentionPrefix, | ||
children | ||
@@ -62,3 +58,2 @@ ); | ||
var mentionComponent = props.mentionComponent; | ||
var mentionPrefix = props.mentionPrefix; | ||
var children = props.children; | ||
@@ -81,3 +76,2 @@ var decoratedText = props.decoratedText; | ||
className: combinedClassName, | ||
mentionPrefix: mentionPrefix, | ||
decoratedText: decoratedText | ||
@@ -84,0 +78,0 @@ }, |
@@ -31,4 +31,4 @@ "use strict"; | ||
if (_this.mouseDown) { | ||
_this.props.onMentionSelect(_this.props.mention); | ||
_this.mouseDown = false; | ||
_this.props.onMentionSelect(_this.props.mention); | ||
} | ||
@@ -85,4 +85,5 @@ }; | ||
entryComponent: _react.PropTypes.any.isRequired, | ||
searchValue: _react.PropTypes.string.isRequired | ||
searchValue: _react.PropTypes.string.isRequired, | ||
onMentionSelect: _react.PropTypes.func | ||
}; | ||
exports.default = Entry; |
@@ -9,3 +9,3 @@ 'use strict'; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
@@ -242,4 +242,9 @@ 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; }; }(); | ||
} | ||
if (_this.props.onAddMention) { | ||
_this.props.onAddMention(mention); | ||
} | ||
_this.closeDropdown(); | ||
var newEditorState = (0, _addMention2.default)(_this.props.store.getEditorState(), mention, _this.props.mentionTrigger, _this.props.entityMutability); | ||
var newEditorState = (0, _addMention2.default)(_this.props.store.getEditorState(), mention, _this.props.mentionPrefix, _this.props.mentionTrigger, _this.props.entityMutability); | ||
_this.props.store.setEditorState(newEditorState); | ||
@@ -255,3 +260,3 @@ }, _this.onMentionFocus = function (index) { | ||
_this.onMentionSelect(_this.props.suggestions.get(_this.state.focusedOptionIndex)); | ||
return true; | ||
return 'handled'; | ||
}, _this.openDropdown = function () { | ||
@@ -325,2 +330,5 @@ // This is a really nasty way of attaching & releasing the key related functions. | ||
var entryComponent = _props.entryComponent; | ||
var onClose = _props.onClose; | ||
var onOpen = _props.onOpen; | ||
var onAddMention = _props.onAddMention; | ||
var onSearchChange = _props.onSearchChange; | ||
@@ -336,4 +344,5 @@ var suggestions = _props.suggestions; | ||
var mentionTrigger = _props.mentionTrigger; | ||
var mentionPrefix = _props.mentionPrefix; | ||
var elementProps = _objectWithoutProperties(_props, ['entryComponent', 'onSearchChange', 'suggestions', 'ariaProps', 'callbacks', 'theme', 'store', 'entityMutability', 'positionSuggestions', 'mentionTrigger']); | ||
var elementProps = _objectWithoutProperties(_props, ['entryComponent', 'onClose', 'onOpen', 'onAddMention', 'onSearchChange', 'suggestions', 'ariaProps', 'callbacks', 'theme', 'store', 'entityMutability', 'positionSuggestions', 'mentionTrigger', 'mentionPrefix']); | ||
@@ -374,5 +383,6 @@ return _react2.default.createElement( | ||
entryComponent: _react.PropTypes.func, | ||
onAddMention: _react.PropTypes.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 new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. should be an instance of immutable list.'); | ||
} | ||
@@ -379,0 +389,0 @@ return undefined; |
@@ -17,9 +17,6 @@ 'use strict'; | ||
exports.default = function (trigger) { | ||
exports.default = function (trigger, regExp) { | ||
return function (contentBlock, callback) { | ||
// common chinese symbols: \u4e00-\u9eff - http://stackoverflow.com/a/1366113/837709 | ||
// hiragana (japanese): \u3040-\u309F - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js | ||
// katakana (japanese): \u30A0-\u30FF - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js | ||
(0, _findWithRegex2.default)(new RegExp('(\\s|^)' + (0, _lodash2.default)(trigger) + '[\\w一-黿-ゟ゠-ヿ]*', 'g'), contentBlock, callback); | ||
(0, _findWithRegex2.default)(new RegExp('(\\s|^)' + (0, _lodash2.default)(trigger) + regExp, 'g'), contentBlock, callback); | ||
}; | ||
}; |
@@ -19,3 +19,3 @@ 'use strict'; | ||
var addMention = function addMention(editorState, mention, mentionTrigger, entityMutability) { | ||
var addMention = function addMention(editorState, mention, mentionPrefix, mentionTrigger, entityMutability) { | ||
var entityKey = _draftJs.Entity.create((0, _getTypeByTrigger2.default)(mentionTrigger), entityMutability, { mention: mention }); | ||
@@ -37,3 +37,3 @@ | ||
var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, mention.get('name'), null, // no inline style needed | ||
var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, '' + mentionPrefix + mention.get('name'), null, // no inline style needed | ||
entityKey); | ||
@@ -40,0 +40,0 @@ |
{ | ||
"name": "draft-js-mention-plugin", | ||
"version": "2.0.0-beta5", | ||
"version": "2.0.0-beta6", | ||
"description": "Mention Plugin for DraftJS", | ||
@@ -35,10 +35,10 @@ "author": { | ||
"decorate-component-with-props": "^1.0.2", | ||
"draft-js": ">=0.8.1", | ||
"draft-js": ">=0.9.1", | ||
"find-with-regex": "^1.0.2", | ||
"immutable": ">=3.8.1", | ||
"lodash.escaperegexp": "^4.1.2", | ||
"react": ">=15.2.1", | ||
"react-dom": ">=15.2.1", | ||
"react": ">=15.3.1", | ||
"react-dom": ">=15.3.1", | ||
"union-class-names": "^1.0.0" | ||
} | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
58156
22
1019
Updateddraft-js@>=0.9.1
Updatedreact@>=15.3.1
Updatedreact-dom@>=15.3.1