@atlaskit/editor-plugin-emoji 0.1.1 → 0.2.0

package/dist/cjs/pm-plugins/ascii-input-rules.js

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.inputRulePlugin = inputRulePlugin;
+exports.stateKey = void 0;
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var matcher;
+function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
+  if (schema.nodes.emoji && providerFactory) {
+    initMatcher(providerFactory);
+    var asciiEmojiRule = (0, _prosemirrorInputRules.createRule)(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
+    return (0, _prosemirrorInputRules.createPlugin)('emoji', [asciiEmojiRule]);
+  }
+  return;
+}
+function initMatcher(providerFactory) {
+  var handleProvider = function handleProvider(_name, provider) {
+    if (!provider) {
+      return;
+    }
+    provider.then(function (emojiProvider) {
+      emojiProvider.getAsciiMap().then(function (map) {
+        matcher = new RecordingAsciiEmojiMatcher(emojiProvider, map);
+      });
+    });
+  };
+  providerFactory.subscribe('emojiProvider', handleProvider);
+}
+var inputRuleHandler = function inputRuleHandler(editorAnalyticsAPI) {
+  return function (state, matchParts, start, end) {
+    if (!matcher) {
+      return null;
+    }
+    var match = matcher.match(matchParts);
+    if (match) {
+      var transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI);
+      return transactionCreator.create();
+    }
+    return null;
+  };
+};
+var REGEX_LEADING_CAPTURE_INDEX = 1;
+var REGEX_EMOJI_LEADING_PARENTHESES = 2;
+var REGEX_EMOJI_ASCII_CAPTURE_INDEX = 3;
+var REGEX_TRAILING_CAPTURE_INDEX = 4;
+var getLeadingString = function getLeadingString(match) {
+  var withParenthesis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return match[REGEX_LEADING_CAPTURE_INDEX] + (withParenthesis ? match[REGEX_EMOJI_LEADING_PARENTHESES] : '');
+};
+var getLeadingStringWithoutParentheses = function getLeadingStringWithoutParentheses(match) {
+  return getLeadingString(match, false);
+};
+var getAscii = function getAscii(match) {
+  var withParentheses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return (withParentheses ? match[REGEX_EMOJI_LEADING_PARENTHESES] : '') + match[REGEX_EMOJI_ASCII_CAPTURE_INDEX].trim();
+};
+var getAsciiWithParentheses = function getAsciiWithParentheses(matchParts) {
+  return getAscii(matchParts, true);
+};
+var getTrailingString = function getTrailingString(match) {
+  return match[REGEX_TRAILING_CAPTURE_INDEX] || '';
+};
+var AsciiEmojiMatcher = /*#__PURE__*/function () {
+  function AsciiEmojiMatcher(asciiToEmojiMap) {
+    (0, _classCallCheck2.default)(this, AsciiEmojiMatcher);
+    this.asciiToEmojiMap = asciiToEmojiMap;
+  }
+  (0, _createClass2.default)(AsciiEmojiMatcher, [{
+    key: "match",
+    value: function match(matchParts) {
+      return this.getAsciiEmojiMatch(getLeadingStringWithoutParentheses(matchParts), getAsciiWithParentheses(matchParts), getTrailingString(matchParts)) || this.getAsciiEmojiMatch(getLeadingString(matchParts), getAscii(matchParts), getTrailingString(matchParts));
+    }
+  }, {
+    key: "getAsciiEmojiMatch",
+    value: function getAsciiEmojiMatch(leading, ascii, trailing) {
+      var emoji = this.asciiToEmojiMap.get(ascii);
+      return emoji ? {
+        emoji: emoji,
+        leadingString: leading,
+        trailingString: trailing
+      } : undefined;
+    }
+  }]);
+  return AsciiEmojiMatcher;
+}();
+/**
+ * A matcher that will record ascii matches as usages of the matched emoji.
+ */
+/**
+ * This regex matches 2 scenarios:
+ * 1. an emoticon starting with a colon character (e.g. :D => 😃)
+ * 2. an emoticon not starting with a colon character (e.g. 8-D => 😎)
+ *
+ * Explanation (${leafNodeReplacementCharacter} is replaced with character \ufffc)
+ *
+ *  1st Capturing Group ((?:^|[\s\ufffc])(?:\(*?))
+ *    Non-capturing group (?:^|[\s\ufffc])
+ *      1st Alternative ^
+ *        ^ asserts position at start of the string
+ *      2nd Alternative [\s\ufffc]
+ *        matches a single character present in [\s\ufffc]
+ *    Non-capturing group (?:\(*?)
+ *      matches the character ( literally between zero and unlimited times, as few times as possible, expanding as needed (lazy)
+ *  2nd Capturing Group (\(?)
+ *    matches a single ( if present
+ *  3rd Capturing Group ([^:\s\ufffc\(]\S{1,3}|:\S{1,3}( ))
+ *    1st Alternative [^:\s\ufffc\(]\S{1,3}
+ *      matches a single character not present in [^:\s\ufffc\(] between 1 and 3 times, as many times as possible, giving back as needed (greedy)
+ *    2nd Alternative :\S{1,3}( )
+ *      : matches the character : literally
+ *      \S{1,3} matches any non-whitespace character between 1 and 3 times, as many times as possible, giving back as needed (greedy)
+ *  4th Capturing Group ( )
+ *
+ * See https://regex101.com/r/HRS9O2/4
+ */
+(0, _defineProperty2.default)(AsciiEmojiMatcher, "REGEX", new RegExp("((?:^|[\\s".concat(_prosemirrorInputRules.leafNodeReplacementCharacter, "])(?:\\(*?))(\\(?)([^:\\s").concat(_prosemirrorInputRules.leafNodeReplacementCharacter, "\\(]\\S{1,3}|:\\S{1,3}( ))$")));
+var RecordingAsciiEmojiMatcher = /*#__PURE__*/function (_AsciiEmojiMatcher) {
+  (0, _inherits2.default)(RecordingAsciiEmojiMatcher, _AsciiEmojiMatcher);
+  var _super = _createSuper(RecordingAsciiEmojiMatcher);
+  function RecordingAsciiEmojiMatcher(emojiProvider, asciiToEmojiMap) {
+    var _this;
+    (0, _classCallCheck2.default)(this, RecordingAsciiEmojiMatcher);
+    _this = _super.call(this, asciiToEmojiMap);
+    _this.emojiProvider = emojiProvider;
+    return _this;
+  }
+  (0, _createClass2.default)(RecordingAsciiEmojiMatcher, [{
+    key: "match",
+    value: function match(matchParts) {
+      var match = (0, _get2.default)((0, _getPrototypeOf2.default)(RecordingAsciiEmojiMatcher.prototype), "match", this).call(this, matchParts);
+      if (match && this.emojiProvider.recordSelection) {
+        this.emojiProvider.recordSelection(match.emoji);
+      }
+      return match;
+    }
+  }]);
+  return RecordingAsciiEmojiMatcher;
+}(AsciiEmojiMatcher);
+var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
+  function AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI) {
+    (0, _classCallCheck2.default)(this, AsciiEmojiTransactionCreator);
+    this.state = state;
+    this.match = match;
+    this.start = start;
+    this.end = end;
+    this.editorAnalyticsAPI = editorAnalyticsAPI;
+  }
+  (0, _createClass2.default)(AsciiEmojiTransactionCreator, [{
+    key: "create",
+    value: function create() {
+      var _this$editorAnalytics;
+      var tr = this.state.tr.replaceWith(this.from, this.to, this.createNodes());
+      (_this$editorAnalytics = this.editorAnalyticsAPI) === null || _this$editorAnalytics === void 0 ? void 0 : _this$editorAnalytics.attachAnalyticsEvent({
+        action: _analytics.ACTION.INSERTED,
+        actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
+        attributes: {
+          inputMethod: _analytics.INPUT_METHOD.ASCII
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      })(tr);
+      return tr;
+    }
+  }, {
+    key: "from",
+    get: function get() {
+      return this.start + this.match.leadingString.length;
+    }
+  }, {
+    key: "to",
+    get: function get() {
+      return this.end;
+    }
+  }, {
+    key: "createNodes",
+    value: function createNodes() {
+      var nodes = [this.createEmojiNode()];
+      if (this.trailingTextNodeRequired()) {
+        nodes.push(this.createTrailingTextNode());
+      }
+      return nodes;
+    }
+  }, {
+    key: "createEmojiNode",
+    value: function createEmojiNode() {
+      var emojiTypeNode = this.state.schema.nodes.emoji;
+      return emojiTypeNode.create(this.getEmojiNodeAttrs());
+    }
+  }, {
+    key: "getEmojiNodeAttrs",
+    value: function getEmojiNodeAttrs() {
+      var emoji = this.match.emoji;
+      return {
+        id: emoji.id,
+        shortName: emoji.shortName,
+        text: emoji.fallback || emoji.shortName
+      };
+    }
+  }, {
+    key: "trailingTextNodeRequired",
+    value: function trailingTextNodeRequired() {
+      return this.match.trailingString.length > 0;
+    }
+  }, {
+    key: "createTrailingTextNode",
+    value: function createTrailingTextNode() {
+      return this.state.schema.text(this.match.trailingString);
+    }
+  }]);
+  return AsciiEmojiTransactionCreator;
+}();
+var stateKey = new _state.PluginKey('asciiEmojiPlugin');
+exports.stateKey = stateKey;
+var plugins = function plugins(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
+  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI)].filter(function (plugin) {
+    return !!plugin;
+  });
+};
+var _default = plugins;
+exports.default = _default;

package/dist/cjs/ui/Emoji/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EmojiNode;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _emoji = require("@atlaskit/editor-common/emoji");
+var _templateObject;
+/** @jsx jsx */
+// eslint-disable-next-line
+var clickSelectWrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage\n  user-select: all;\n"])));
+function EmojiNode(props) {
+  return (0, _react.jsx)("span", {
+    css: clickSelectWrapperStyle
+  }, (0, _react.jsx)(_emoji.Emoji, props));
+}

package/dist/es2019/commands/insert-emoji.js

@@ -0,0 +1,40 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+export const insertEmoji = editorAnalyticsAPI => (emojiId, inputMethod) => {
+  return ({
+    tr
+  }) => {
+    const {
+      doc,
+      selection
+    } = tr;
+    const {
+      emoji
+    } = tr.doc.type.schema.nodes;
+    if (emoji && emojiId) {
+      const node = emoji.createChecked({
+        ...emojiId,
+        text: emojiId.fallback || emojiId.shortName
+      });
+      const textNode = doc.type.schema.text(' ');
+      const fragment = Fragment.fromArray([node, textNode]);
+      const newTr = safeInsert(fragment)(tr);
+      if (inputMethod) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
+          attributes: {
+            inputMethod
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(newTr);
+      }
+      newTr.setSelection(Selection.near(newTr.doc.resolve(selection.$from.pos + fragment.size)));
+      return newTr;
+    }
+    return null;
+  };
+};

package/dist/es2019/index.js

@@ -1 +1 @@
-export {};
+export { emojiPlugin } from './plugin';

package/dist/es2019/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  emojiNodeLabel: {
+    id: 'fabric.emoji.label',
+    defaultMessage: 'Emoji',
+    description: 'Label to indicate emoji node to Screen reader users'
+  }
+});

package/dist/es2019/nodeviews/emoji.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../messages';
+import Emoji from '../ui/Emoji';
+const EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(({
+  emojiShortName
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement("span", {
+    className: 'assistive'
+  }, `${intl.formatMessage(messages.emojiNodeLabel)} ${emojiShortName}`);
+});
+export function EmojiNodeView(props) {
+  const {
+    shortName,
+    id,
+    text
+  } = props.node.attrs;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiAssistiveTextComponent, {
+    emojiShortName: shortName
+  }), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Emoji, {
+    providers: props.providerFactory,
+    id: id,
+    shortName: shortName,
+    fallback: text
+  })));
+}