@atlaskit/editor-plugin-emoji 7.6.6 → 7.6.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-emoji
 
+## 7.6.8
+
+### Patch Changes
+
+- [`8281874c30443`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8281874c30443) -
+  [ux] [EDITOR-2917] scale emoji placeholders in the editor
+- Updated dependencies
+
+## 7.6.7
+
+### Patch Changes
+
+- [`4d676bbdb3ce6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4d676bbdb3ce6) -
+  ts-ignore added temporarily to unblock local consumption for help-center, will be removed once
+  project refs are setup
+- Updated dependencies
+
 ## 7.6.6
 
 ### Patch Changes

package/dist/cjs/emojiPlugin.js

@@ -126,6 +126,8 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
             if (!emojiResult || !emojiResult.emojis) {
               resolve([]);
             } else {
+              // @ts-ignore - Workaround for help-center local consumption
+
               var emojiItems = emojiResult.emojis.map(function (emoji) {
                 return memoizedToItem.call(emoji, emojiProvider);
               });
@@ -135,6 +137,9 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           }
         };
         emojiProvider.subscribe(emojiProviderChangeHandler);
+
+        // @ts-ignore - Workaround for help-center local consumption
+
         emojiProvider.filter(TRIGGER.concat(query), {
           limit: defaultListLimit,
           skinTone: emojiProvider.getSelectedTone(),
@@ -158,7 +163,10 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           emoji: _emoji
         };
       }
-      var matchedItem = isFullShortName(normalizedQuery) ? items.find(function (item) {
+      var matchedItem = isFullShortName(normalizedQuery) ?
+      // @ts-ignore - Workaround for help-center local consumption
+
+      items.find(function (item) {
         return item.title.toLowerCase() === normalizedQuery;
       }) : undefined;
       return matchedItem;
@@ -198,6 +206,8 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
     var emojiNodeType = schema.nodes.emoji;
     if (node.type === emojiNodeType) {
       var newText = node.attrs.text;
+      // @ts-ignore - Workaround for help-center local consumption
+
       var currentPos = tr.mapping.map(pos);
       tr.replaceWith(currentPos, currentPos + node.nodeSize, schema.text(newText, node.marks));
     }
@@ -377,6 +387,8 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           items: function items(node) {
             var _api$annotation2;
             var annotationState = api === null || api === void 0 || (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            // @ts-ignore - Workaround for help-center local consumption
+
             var activeCommentMark = node.marks.find(function (mark) {
               return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
             });
@@ -479,6 +491,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
   return new _safePlugin.SafePlugin({
     key: emojiPluginKey,
     state: {
+      // @ts-ignore - Workaround for help-center local consumption
       init: function init() {
         if (options !== null && options !== void 0 && options.emojiProvider && (0, _experiments.editorExperiment)('platform_editor_prevent_toolbar_layout_shifts', true)) {
           return {
@@ -487,6 +500,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         }
         return {};
       },
+      // @ts-ignore - Workaround for help-center local consumption
       apply: function apply(tr, pluginState) {
         var _ref11 = tr.getMeta(emojiPluginKey) || {
             action: null,
@@ -520,7 +534,11 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
       }
     },
     props: {
+      // @ts-ignore - Workaround for help-center local consumption
+
       nodeViews: {
+        // @ts-ignore - Workaround for help-center local consumption
+
         emoji: function emoji(node) {
           return new _EmojiNodeView.EmojiNodeView(node, {
             intl: pmPluginFactoryParams.getIntl(),
@@ -530,6 +548,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         }
       }
     },
+    // @ts-ignore - Workaround for help-center local consumption
     view: function view(editorView) {
       var providerHandler = function providerHandler(name, providerPromise) {
         switch (name) {
@@ -556,6 +575,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         providerHandler('emojiProvider', options.emojiProvider);
       }
       return {
+        // @ts-ignore - Workaround for help-center local consumption
         destroy: function destroy() {
           if (pmPluginFactoryParams.providerFactory) {
             pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);

package/dist/cjs/nodeviews/emojiNodeSpec.js

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var isSSR = Boolean(process.env.REACT_SSR);
@@ -37,17 +38,23 @@ function emojiToDom(node) {
     shortName = _node$attrs.shortName,
     id = _node$attrs.id,
     text = _node$attrs.text;
+  var isEmojiScalingEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true);
   var attrs = {
     'data-emoji-short-name': shortName,
     'data-emoji-id': id,
     'data-emoji-text': text,
     contenteditable: 'false',
-    style: (0, _lazyNodeView.convertToInlineCss)({
+    style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({
       content: "''",
-      fill: "var(--ds-background-neutral, #0515240F)",
+      fill: "var(--ds-background-neutral, #0515240F)"
+    }, isEmojiScalingEnabled ? {
+      minWidth: '16.25px',
+      minHeight: '16.25px'
+    } : {
       minWidth: "20px",
       width: "20px",
-      height: "20px",
+      height: "20px"
+    }), {}, {
       position: 'relative',
       margin: '-1px 0',
       display: 'inline-block',
@@ -57,7 +64,7 @@ function emojiToDom(node) {
       verticalAlign: 'middle',
       whiteSpace: 'nowrap',
       textAlign: 'center'
-    }),
+    })),
     'aria-busy': 'true',
     'aria-label': shortName,
     class: 'emoji-common-placeholder'

package/dist/es2019/emojiPlugin.js

@@ -105,6 +105,8 @@ export const emojiPlugin = ({
             if (!emojiResult || !emojiResult.emojis) {
               resolve([]);
             } else {
+              // @ts-ignore - Workaround for help-center local consumption
+
               const emojiItems = emojiResult.emojis.map(emoji => memoizedToItem.call(emoji, emojiProvider));
               resolve(emojiItems);
             }
@@ -112,6 +114,9 @@ export const emojiPlugin = ({
           }
         };
         emojiProvider.subscribe(emojiProviderChangeHandler);
+
+        // @ts-ignore - Workaround for help-center local consumption
+
         emojiProvider.filter(TRIGGER.concat(query), {
           limit: defaultListLimit,
           skinTone: emojiProvider.getSelectedTone(),
@@ -137,7 +142,10 @@ export const emojiPlugin = ({
           emoji
         };
       }
-      const matchedItem = isFullShortName(normalizedQuery) ? items.find(item => item.title.toLowerCase() === normalizedQuery) : undefined;
+      const matchedItem = isFullShortName(normalizedQuery) ?
+      // @ts-ignore - Workaround for help-center local consumption
+
+      items.find(item => item.title.toLowerCase() === normalizedQuery) : undefined;
       return matchedItem;
     },
     selectItem(state, item, insert, {
@@ -183,6 +191,8 @@ export const emojiPlugin = ({
     } = schema.nodes;
     if (node.type === emojiNodeType) {
       const newText = node.attrs.text;
+      // @ts-ignore - Workaround for help-center local consumption
+
       const currentPos = tr.mapping.map(pos);
       tr.replaceWith(currentPos, currentPos + node.nodeSize, schema.text(newText, node.marks));
     }
@@ -341,6 +351,8 @@ export const emojiPlugin = ({
           items: node => {
             var _api$annotation2;
             const annotationState = api === null || api === void 0 ? void 0 : (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            // @ts-ignore - Workaround for help-center local consumption
+
             const activeCommentMark = node.marks.find(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false);
             const showAnnotation = annotationState && annotationState.isVisible && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark && isViewMode();
             if (showAnnotation) {
@@ -433,6 +445,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
   return new SafePlugin({
     key: emojiPluginKey,
     state: {
+      // @ts-ignore - Workaround for help-center local consumption
+
       init() {
         if (options !== null && options !== void 0 && options.emojiProvider && editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
           return {
@@ -441,6 +455,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         }
         return {};
       },
+      // @ts-ignore - Workaround for help-center local consumption
+
       apply(tr, pluginState) {
         const {
           action,
@@ -478,7 +494,11 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
       }
     },
     props: {
+      // @ts-ignore - Workaround for help-center local consumption
+
       nodeViews: {
+        // @ts-ignore - Workaround for help-center local consumption
+
         emoji: node => {
           return new EmojiNodeView(node, {
             intl: pmPluginFactoryParams.getIntl(),
@@ -488,6 +508,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         }
       }
     },
+    // @ts-ignore - Workaround for help-center local consumption
+
     view(editorView) {
       const providerHandler = (name, providerPromise) => {
         switch (name) {
@@ -514,6 +536,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         providerHandler('emojiProvider', options.emojiProvider);
       }
       return {
+        // @ts-ignore - Workaround for help-center local consumption
+
         destroy() {
           if (pmPluginFactoryParams.providerFactory) {
             pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);

package/dist/es2019/nodeviews/emojiNodeSpec.js

@@ -1,6 +1,7 @@
 import { emoji, emojiWithLocalId } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const isSSR = Boolean(process.env.REACT_SSR);
 
 /**
@@ -26,6 +27,7 @@ export function emojiToDom(node) {
     id,
     text
   } = node.attrs;
+  const isEmojiScalingEnabled = expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true);
   const attrs = {
     'data-emoji-short-name': shortName,
     'data-emoji-id': id,
@@ -34,9 +36,14 @@ export function emojiToDom(node) {
     style: convertToInlineCss({
       content: "''",
       fill: "var(--ds-background-neutral, #0515240F)",
-      minWidth: `20px`,
-      width: `20px`,
-      height: `20px`,
+      ...(isEmojiScalingEnabled ? {
+        minWidth: '16.25px',
+        minHeight: '16.25px'
+      } : {
+        minWidth: `20px`,
+        width: `20px`,
+        height: `20px`
+      }),
       position: 'relative',
       margin: '-1px 0',
       display: 'inline-block',

package/dist/esm/emojiPlugin.js

@@ -115,6 +115,8 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
             if (!emojiResult || !emojiResult.emojis) {
               resolve([]);
             } else {
+              // @ts-ignore - Workaround for help-center local consumption
+
               var emojiItems = emojiResult.emojis.map(function (emoji) {
                 return memoizedToItem.call(emoji, emojiProvider);
               });
@@ -124,6 +126,9 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           }
         };
         emojiProvider.subscribe(emojiProviderChangeHandler);
+
+        // @ts-ignore - Workaround for help-center local consumption
+
         emojiProvider.filter(TRIGGER.concat(query), {
           limit: defaultListLimit,
           skinTone: emojiProvider.getSelectedTone(),
@@ -147,7 +152,10 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           emoji: _emoji
         };
       }
-      var matchedItem = isFullShortName(normalizedQuery) ? items.find(function (item) {
+      var matchedItem = isFullShortName(normalizedQuery) ?
+      // @ts-ignore - Workaround for help-center local consumption
+
+      items.find(function (item) {
         return item.title.toLowerCase() === normalizedQuery;
       }) : undefined;
       return matchedItem;
@@ -187,6 +195,8 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
     var emojiNodeType = schema.nodes.emoji;
     if (node.type === emojiNodeType) {
       var newText = node.attrs.text;
+      // @ts-ignore - Workaround for help-center local consumption
+
       var currentPos = tr.mapping.map(pos);
       tr.replaceWith(currentPos, currentPos + node.nodeSize, schema.text(newText, node.marks));
     }
@@ -366,6 +376,8 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           items: function items(node) {
             var _api$annotation2;
             var annotationState = api === null || api === void 0 || (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            // @ts-ignore - Workaround for help-center local consumption
+
             var activeCommentMark = node.marks.find(function (mark) {
               return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
             });
@@ -468,6 +480,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
   return new SafePlugin({
     key: emojiPluginKey,
     state: {
+      // @ts-ignore - Workaround for help-center local consumption
       init: function init() {
         if (options !== null && options !== void 0 && options.emojiProvider && editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
           return {
@@ -476,6 +489,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         }
         return {};
       },
+      // @ts-ignore - Workaround for help-center local consumption
       apply: function apply(tr, pluginState) {
         var _ref11 = tr.getMeta(emojiPluginKey) || {
             action: null,
@@ -509,7 +523,11 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
       }
     },
     props: {
+      // @ts-ignore - Workaround for help-center local consumption
+
       nodeViews: {
+        // @ts-ignore - Workaround for help-center local consumption
+
         emoji: function emoji(node) {
           return new EmojiNodeView(node, {
             intl: pmPluginFactoryParams.getIntl(),
@@ -519,6 +537,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         }
       }
     },
+    // @ts-ignore - Workaround for help-center local consumption
     view: function view(editorView) {
       var providerHandler = function providerHandler(name, providerPromise) {
         switch (name) {
@@ -545,6 +564,7 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         providerHandler('emojiProvider', options.emojiProvider);
       }
       return {
+        // @ts-ignore - Workaround for help-center local consumption
         destroy: function destroy() {
           if (pmPluginFactoryParams.providerFactory) {
             pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);

package/dist/esm/nodeviews/emojiNodeSpec.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { emoji, emojiWithLocalId } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var isSSR = Boolean(process.env.REACT_SSR);
 
 /**
@@ -29,17 +30,23 @@ export function emojiToDom(node) {
     shortName = _node$attrs.shortName,
     id = _node$attrs.id,
     text = _node$attrs.text;
+  var isEmojiScalingEnabled = expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true);
   var attrs = {
     'data-emoji-short-name': shortName,
     'data-emoji-id': id,
     'data-emoji-text': text,
     contenteditable: 'false',
-    style: convertToInlineCss({
+    style: convertToInlineCss(_objectSpread(_objectSpread({
       content: "''",
-      fill: "var(--ds-background-neutral, #0515240F)",
+      fill: "var(--ds-background-neutral, #0515240F)"
+    }, isEmojiScalingEnabled ? {
+      minWidth: '16.25px',
+      minHeight: '16.25px'
+    } : {
       minWidth: "20px",
       width: "20px",
-      height: "20px",
+      height: "20px"
+    }), {}, {
       position: 'relative',
       margin: '-1px 0',
       display: 'inline-block',
@@ -49,7 +56,7 @@ export function emojiToDom(node) {
       verticalAlign: 'middle',
       whiteSpace: 'nowrap',
       textAlign: 'center'
-    }),
+    })),
     'aria-busy': 'true',
     'aria-label': shortName,
     class: 'emoji-common-placeholder'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "7.6.6",
+	"version": "7.6.8",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,8 +36,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.6.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.38.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.44.0",
+		"@atlaskit/tokens": "^8.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -45,7 +45,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.32.0",
+		"@atlaskit/editor-common": "^110.35.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},