Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

draft-js-mention-plugin

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.0.0-beta5 to 2.0.0-beta6

lib/defaultRegExp.js

4

CHANGELOG.md

@@ -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

15

lib/index.js

@@ -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"
}
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc