@atlaskit/editor-plugin-emoji/dist/esm/nodeviews/emojiNodeSpec.js

Emoji plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
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);

/**
 * Wrapper for ADF emoji node spec to augment toDOM implementation
 * with fallback UI for lazy node view rendering / window virtualization
 * @nodeSpecException:toDOM patch
 * @returns
 */
export var emojiNodeSpec = function emojiNodeSpec() {
  var emojiNode = fg('platform_editor_adf_with_localid') ? emojiWithLocalId : emoji;
  if (isSSR) {
    return emojiNode;
  }
  return _objectSpread(_objectSpread({}, emojiNode), {}, {
    toDOM: function toDOM(node) {
      return emojiToDom(node);
    }
  });
};
export function emojiToDom(node) {
  // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
  var _node$attrs = node.attrs,
    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(_objectSpread(_objectSpread({
      content: "''",
      fill: "var(--ds-background-neutral, #0515240F)"
    }, isEmojiScalingEnabled ? {
      minWidth: '16.25px',
      minHeight: '16.25px'
    } : {
      minWidth: "20px",
      width: "20px",
      height: "20px"
    }), {}, {
      position: 'relative',
      margin: '-1px 0',
      display: 'inline-block',
      background: "var(--ds-background-neutral, #0515240F)",
      borderRadius: "var(--ds-radius-small, 3px)",
      overflow: 'hidden',
      verticalAlign: 'middle',
      whiteSpace: 'nowrap',
      textAlign: 'center'
    })),
    'aria-busy': 'true',
    'aria-label': shortName,
    class: 'emoji-common-placeholder'
  };
  if (fg('platform_editor_adf_with_localid')) {
    attrs['data-local-id'] = node.attrs.localId;
  }
  return ['span', attrs];
}