draft-js-emoji-mart-plugin - npm Package Compare versions

Comparing version 0.0.6 to 1.0.0-alpha.0

lib/constants.js

@@ -13,2 +13,3 @@ "use strict";
 var unicodeEmojiRegexp = (0, _emojiRegex.default)();
-exports.unicodeEmojiRegexp = unicodeEmojiRegexp;
+exports.unicodeEmojiRegexp = unicodeEmojiRegexp;
+//# sourceMappingURL=constants.js.map

lib/index.js

@@ -6,9 +6,9 @@ "use strict";
 });
-exports.default = _default;
+exports.default = createPlugin;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _nimblePicker = _interopRequireDefault(require("emoji-mart/dist/components/picker/nimble-picker"));
+var _nimblePicker = _interopRequireDefault(require("emoji-mart/dist-es/components/picker/nimble-picker"));
 
-var _nimbleEmoji = _interopRequireDefault(require("emoji-mart/dist/components/emoji/nimble-emoji"));
+var _nimbleEmoji = _interopRequireDefault(require("emoji-mart/dist-es/components/emoji/nimble-emoji"));
 
@@ -29,12 +29,10 @@ var _draftJs = require("draft-js");
 
-function _default() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _onChange = _ref.onChange,
+function createPlugin(_ref) {
+  var _onChange = _ref.onChange,
       data = _ref.data,
       set = _ref.set,
+      _ref$sheetSize = _ref.sheetSize,
+      sheetSize = _ref$sheetSize === void 0 ? 32 : _ref$sheetSize,
       _ref$emojiSize = _ref.emojiSize,
-      emojiSize = _ref$emojiSize === void 0 ? 16 : _ref$emojiSize,
-      _ref$sheetSize = _ref.sheetSize,
-      sheetSize = _ref$sheetSize === void 0 ? emojiSize * 2 : _ref$sheetSize;
-
+      emojiSize = _ref$emojiSize === void 0 ? sheetSize / 2 : _ref$emojiSize;
   var getEmoji = (0, _getEmojiDataFromNative.default)(data, set);
@@ -49,6 +47,31 @@ var store = {
         children = _ref2.children;
-    var foundedEmoji = getEmoji(decoratedText);
+    var foundedEmoji = getEmoji(decoratedText); // Draft for caret position fix
+    // Based on top of https://github.com/missive/emoji-mart#using-with-contenteditable
+    // if (foundedEmoji) {
+    //   let emojiMarkup = Emoji({
+    //     set,
+    //     data,
+    //     sheetSize,
+    //     html: true,
+    //     size: emojiSize,
+    //     emoji: foundedEmoji,
+    //     children: decoratedText,
+    //   });
+    //   // // @ts-expect-error Add draft-js data attrs for element detection
+    //   // emojiMarkup = emojiMarkup.replace('></span>', `data-text="true">${decoratedText}</span>`);
+    //   return (
+    //     <span
+    //       style={{ fontSize: emojiSize }}
+    //       className="emoji-mart-emoji-wrapper"
+    //       data-offset-key={offsetKey}
+    //       contentEditable={false}
+    //       data-text="true"
+    //       // @ts-expect-error Emoji component with html prop return markup string
+    //       dangerouslySetInnerHTML={{ __html: emojiMarkup }}
+    //     />
+    //   );
+    // }
 
     if (foundedEmoji) {
-      return _react.default.createElement(_nimbleEmoji.default, {
+      return /*#__PURE__*/_react.default.createElement(_nimbleEmoji.default, {
         emoji: foundedEmoji,
@@ -62,3 +85,3 @@ size: emojiSize,
 
-    return decoratedText;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, decoratedText);
   });
@@ -71,4 +94,17 @@
 
-    var newEditorState = (0, _addEmoji.default)(store.getEditorState(), emojiSymbol.native);
+    var emoji;
+    var baseEmojiSymbol = emojiSymbol;
+    var customEmojiSymbol = emojiSymbol;
 
+    if (baseEmojiSymbol.native) {
+      emoji = baseEmojiSymbol.native;
+    }
+
+    if (!emoji && customEmojiSymbol.short_names && customEmojiSymbol.short_names.length > 0) {
+      // Custom emoji case
+      emoji = ":".concat(customEmojiSymbol.short_names[0], ":");
+    }
+
+    var newEditorState = (0, _addEmoji.default)(store.getEditorState(), emoji);
+
     if (!store.setEditorState) {
@@ -82,3 +118,3 @@ throw new Error('Emoji-mart plugin: handle emoji fired on unbinded instace.');
   var PickerComponent = _react.default.forwardRef(function (props, ref) {
-    return _react.default.createElement(_nimblePicker.default, _extends({
+    return /*#__PURE__*/_react.default.createElement(_nimblePicker.default, _extends({
       ref: ref,
@@ -99,2 +135,5 @@ set: set,
     Picker: PickerComponent,
+    modifiers: {
+      addEmoji: _addEmoji.default
+    },
     decorators: decorators,
@@ -111,7 +150,5 @@ initialize: function initialize(_ref3) {
     },
-    modifiers: {
-      addEmoji: _addEmoji.default
-    },
     onChange: function onChange(editorState) {
       var newEditorState = (0, _attachImmutableEntitiesToEmojis.default)(editorState);
+      var selection = editorState.getSelection();
 
@@ -123,3 +160,3 @@ if (!newEditorState.getCurrentContent().equals(editorState.getCurrentContent())) {
         // the contenteditable.
-        newEditorState = _draftJs.EditorState.forceSelection(newEditorState, newEditorState.getSelection());
+        newEditorState = _draftJs.EditorState.forceSelection(newEditorState, selection);
       }
@@ -134,2 +171,3 @@
   };
-}
+}
+//# sourceMappingURL=index.js.map

lib/modifiers/addEmoji.js

@@ -6,3 +6,4 @@ "use strict";
 });
-exports.Mode = exports.default = void 0;
+exports.default = addEmoji;
+exports.Mode = void 0;
 
@@ -22,7 +23,6 @@ var _draftJs = require("draft-js");
 
-var addEmoji = function addEmoji(editorState, emoji) {
+function addEmoji(editorState, emoji) {
   var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Mode.INSERT;
   var contentState = editorState.getCurrentContent();
-  var contentStateWithEntity = contentState // $FlowFixMe
-  .createEntity('emoji', 'IMMUTABLE', {
+  var contentStateWithEntity = contentState.createEntity('emoji', 'IMMUTABLE', {
     emojiUnicode: emoji
@@ -33,4 +33,2 @@ });
   var emojiAddedContent;
-  var emojiEndPos = 0;
-  var blockSize = 0;
 
@@ -45,6 +43,3 @@ switch (mode) {
         var targetSelection = afterRemovalContentState.getSelectionAfter();
-        emojiAddedContent = _draftJs.Modifier.insertText(afterRemovalContentState, targetSelection, emoji, null, entityKey);
-        emojiEndPos = targetSelection.getAnchorOffset();
-        var blockKey = targetSelection.getAnchorKey();
-        blockSize = contentState.getBlockForKey(blockKey).getLength();
+        emojiAddedContent = _draftJs.Modifier.insertText(afterRemovalContentState, targetSelection, emoji, undefined, entityKey);
         break;
@@ -55,17 +50,8 @@ }
       throw new Error('Unidentified value of "mode"');
-  } // If the emoji is inserted at the end, a space is appended right after for
-  // a smooth writing experience.
-
-
-  if (emojiEndPos === blockSize) {
-    emojiAddedContent = _draftJs.Modifier.insertText(emojiAddedContent, emojiAddedContent.getSelectionAfter(), ' ');
   }
 
-  var newEditorState = _draftJs.EditorState.push(editorState, emojiAddedContent, // $FlowFixMe
-  'insert-emoji');
+  var newEditorState = _draftJs.EditorState.push(editorState, emojiAddedContent, 'insert-fragment');
 
   return _draftJs.EditorState.forceSelection(newEditorState, emojiAddedContent.getSelectionAfter());
-};
-
-var _default = addEmoji;
-exports.default = _default;
+}
+//# sourceMappingURL=addEmoji.js.map

lib/modifiers/attachImmutableEntitiesToEmojis.js

@@ -7,2 +7,3 @@ "use strict";
 exports.default = attachImmutableEntitiesToEmojis;
+exports.BLOCK_TYPE = void 0;
 
@@ -18,3 +19,3 @@ var _draftJs = require("draft-js");
 // Original: https://github.com/draft-js-plugins/draft-js-plugins/blob/master/draft-js-emoji-plugin/src/modifiers/attachImmutableEntitiesToEmojis.js
-
+var BLOCK_TYPE = 'emoji';
 /*
@@ -26,2 +27,5 @@ * Attaches Immutable DraftJS Entities to the Emoji text.
  */
+
+exports.BLOCK_TYPE = BLOCK_TYPE;
+
 function attachImmutableEntitiesToEmojis(editorState) {
@@ -32,2 +36,6 @@ var contentState = editorState.getCurrentContent();
   blocks.forEach(function (block) {
+    if (!block) {
+      return;
+    }
+
     var plainText = block.getText();
@@ -42,3 +50,3 @@
 
-        if (entity && entity.get('type') === 'emoji') {
+        if (entity && entity.getType() === BLOCK_TYPE) {
           return;
@@ -51,8 +59,7 @@ }
       var emojiText = plainText.substring(start, end);
-      var contentStateWithEntity = newContentState.createEntity( // $FlowFixMe
-      'emoji', 'IMMUTABLE', {
+      var contentStateWithEntity = newContentState.createEntity(BLOCK_TYPE, 'IMMUTABLE', {
         emojiUnicode: emojiText
       });
       var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-      newContentState = _draftJs.Modifier.replaceText(newContentState, selection, emojiText, null, entityKey);
+      newContentState = _draftJs.Modifier.replaceText(newContentState, selection, emojiText, undefined, entityKey);
     };
@@ -64,7 +71,7 @@
   if (!newContentState.equals(contentState)) {
-    return _draftJs.EditorState.push(editorState, newContentState, // $FlowFixMe
-    'convert-to-immutable-emojis');
+    return _draftJs.EditorState.push(editorState, newContentState, 'change-block-data');
   }
 
   return editorState;
-}
+}
+//# sourceMappingURL=attachImmutableEntitiesToEmojis.js.map

lib/strategies/emoji.js

@@ -8,4 +8,2 @@ "use strict";
 
-var _draftJs = require("draft-js");
-
 var _findWithRegex = _interopRequireDefault(require("find-with-regex"));
@@ -17,6 +15,8 @@
 
-var _default = function _default(contentBlock, callback) {
+function emojiStrategy(contentBlock, callback) {
   (0, _findWithRegex.default)(_constants.unicodeEmojiRegexp, contentBlock, callback);
-};
+}
 
-exports.default = _default;
+var _default = emojiStrategy;
+exports.default = _default;
+//# sourceMappingURL=emoji.js.map

lib/utils/convertShortNameToUnicode.js

@@ -43,2 +43,3 @@ "use strict";
   return String.fromCharCode(s);
-}
+}
+//# sourceMappingURL=convertShortNameToUnicode.js.map

lib/utils/getEmojiDataFromNative.js

@@ -8,12 +8,16 @@ "use strict";
 
-var _data = require("emoji-mart/dist/utils/data");
+var _data = require("emoji-mart/dist-es/utils/data");
 
-var _utils = require("emoji-mart/dist/utils");
+var _utils = require("emoji-mart/dist-es/utils");
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
@@ -37,6 +41,4 @@
       }
-    }); // $FlowFixMe
-
-    var emojiData = Object.values(data.emojis).find( // $FlowFixMe
-    function (emoji) {
+    });
+    var emojiData = Object.values(data.emojis).find(function (emoji) {
       return (0, _utils.unifiedToNative)(emoji.unified) === baseNativeString;
@@ -50,4 +52,5 @@ });
     var _emojiData$short_name = _slicedToArray(emojiData.short_names, 1),
-        id = _emojiData$short_name[0];
+        id = _emojiData$short_name[0]; // @ts-expect-error Emoji type don't have id. getSanitizedData typeless.
 
+
     emojiData.id = id;
@@ -59,2 +62,3 @@ return (0, _utils.getSanitizedData)(emojiData, skin, set, data);
 var _default = getEmojiDataFromNative;
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=getEmojiDataFromNative.js.map

package.json

 {
   "name": "draft-js-emoji-mart-plugin",
-  "version": "0.0.6",
+  "version": "1.0.0-alpha.0",
   "description": "Emoji-mart plugin for DraftJS.",
   "browserslist": "> 0.25%, not dead",
   "main": "lib",
+  "types": "lib/index.d.ts",
   "keywords": [
     "emoji",
+    "picker",
     "emoji-mart",
@@ -20,5 +22,10 @@ "editor",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel --out-dir ./lib ./src",
-    "flow": "flow",
-    "lint": "eslint ./src"
+    "type-check": "tsc --noEmit",
+    "watch": "tsc --watch",
+    "build": "npm run build:types && npm run build:js",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --ignore '**/*.d.ts' --source-maps",
+    "lint": "eslint ./src ./stories",
+    "storybook": "start-storybook -p 6006 --no-dll",
+    "build-storybook": "build-storybook --no-dll"
   },
@@ -41,24 +48,40 @@ "repository": {
     "emoji-mart": "^2.9.2",
-    "draft-js": "^0.10.5",
+    "draft-js": "^0.11.0",
+    "draft-js-plugins-editor": "^3.0.0",
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-react-jsx": "^7.12.5",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.1",
+    "@storybook/addon-actions": "^6.0.28",
+    "@storybook/addon-essentials": "^6.0.28",
+    "@storybook/addon-links": "^6.0.28",
+    "@storybook/react": "^6.0.28",
+    "@types/draft-js": "^0.10.44",
+    "@types/emoji-mart": "^3.0.4",
+    "@typescript-eslint/eslint-plugin": "^4.6.1",
+    "@typescript-eslint/parser": "^4.6.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.1.0",
     "babel-runtime": "^6.26.0",
-    "babel-eslint": "^10.0.1",
-    "draft-js": "^0.10.5",
+    "core-js": "^3.7.0",
+    "draft-js": "^0.11.0",
+    "draft-js-plugins-editor": "^3.0.0",
     "emoji-mart": "^2.9.2",
-    "eslint": "^5.3.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
-    "flow-bin": "^0.93.0",
+    "eslint": "^7.13.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react": "^16.8.3",
-    "react-dom": "^16.8.3"
+    "react-dom": "^16.8.3",
+    "react-is": "^16.8.3",
+    "typescript": "^4.0.5"
   }
 }

README.md

@@ -0,1 +1,6 @@
+[![Ci Status](https://github.com/zamarawka/draft-js-emoji-mart-plugin/workflows/CI/badge.svg)](https://github.com/zamarawka/draft-js-emoji-mart-plugin/actions)
+[![Npm version](https://img.shields.io/npm/v/draft-js-emoji-mart-plugin?style=flat&logo=npm)](https://www.npmjs.com/package/draft-js-emoji-mart-plugin)
+[![Draft.js version](https://img.shields.io/npm/dependency-version/draft-js-emoji-mart-plugin/peer/draft-js.svg?style=flat)](https://draftjs.org)
+[![React.js version](https://img.shields.io/npm/dependency-version/draft-js-emoji-mart-plugin/peer/react.svg?style=flat&logo=react)](https://reactjs.org)
+
 # Emoji-mart integration with DraftJS
@@ -5,2 +10,4 @@
 
+Package includes its TypeScript Definition file
+
 ## Install
@@ -62,4 +69,4 @@
 | set | true | `undefined` | Addtional param to Dataset, used by emoji-mart. |
-| emojiSize | false | 16 | [Size](https://github.com/missive/emoji-mart/blob/master/README.md#emoji) wich pass to Emoji component from emoji-mart.  |
-| sheetSize | false | emojiSize * 2 | [Sheet size](https://github.com/missive/emoji-mart#sheet-sizes) wich pass to Emoji component from emoji-mart. By default emojiSize * 2. |
+| sheetSize | false | 32 | [Sheet size](https://github.com/missive/emoji-mart#sheet-sizes) wich pass to Emoji component from emoji-mart. |
+| emojiSize | false | sheetSize / 2 | [Size](https://github.com/missive/emoji-mart/blob/master/README.md#emoji) wich pass to Emoji component from emoji-mart. By default sheetSize / 2. |
 | onChange | false | undefined | Call then DraftJS recieve new state. |
@@ -120,1 +127,21 @@
 ```
+
+## Development
+
+Run development env
+
+```sh
+npm run watch # for build ts on change
+npm run storybook # run sandbox with base example
+```
+
+Local build
+
+```sh
+npm run lint
+npm run build # build ts by babel and generate typings
+```
+
+Active maintenance with care and ❤️.
+
+Feel free to send a PR.

No alert changes

Improved metrics

Total package byte prevSize

50371

160.91%

Number of package files

27

107.69%

Lines of code

371

28.82%

Number of lines in readme file

145

22.88%

Worsened metrics

Dependency count

6

20%

Dev dependency count

32

88.24%

No dependency changes