@atlaskit/editor-common 78.9.1 → 78.10.0

package/dist/esm/extensibility/Extension/LozengeComponent.js

@@ -2,6 +2,7 @@ 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; }
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { SimpleTag as Tag } from '@atlaskit/tag';
@@ -17,14 +18,16 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     params = _ref.params,
     renderImage = _ref.renderImage,
     isNodeSelected = _ref.isNodeSelected,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
+    customContainerStyles = _ref.customContainerStyles;
   var capitalizedTitle = capitalizeFirstLetter(title);
   // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
     return jsx("div", {
       className: "extension-title",
       css: lozengeWrapper,
-      "data-testid": "new-lozenge"
+      "data-testid": "new-lozenge",
+      style: customContainerStyles
     }, jsx(Tag, {
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'

package/dist/esm/extensibility/Extension/styles.js

@@ -1,12 +1,65 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { css } from '@emotion/react';
 import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
 import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
-export var wrapperDefault = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
-export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
-export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
-export var placeholderFallbackParams = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(N70, ")"));
-export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));
-export var lozengeWrapper = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: left;\n  width: 100%;\n  margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");
+export var wrapperDefault = css({
+  background: "var(--ds-background-neutral, ".concat(N20, ")"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  position: 'relative',
+  verticalAlign: 'middle',
+  '.ProseMirror-selectednode > span > & > .extension-overlay': {
+    boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-selected, ".concat(B200, ")")),
+    opacity: 1
+  },
+  '&.with-overlay': {
+    '.extension-overlay': {
+      background: "var(--ds-background-neutral-hovered, ".concat(N20A, ")"),
+      color: 'transparent'
+    },
+    '&:hover .extension-overlay': {
+      opacity: 1
+    }
+  }
+});
+export var overlay = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  opacity: 0,
+  pointerEvents: 'none',
+  transition: 'opacity 0.3s'
+});
+export var placeholderFallback = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  '& > img': {
+    margin: "0 ".concat("var(--ds-space-050, 4px)")
+  },
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: 'placeholder-fallback'
+});
+export var placeholderFallbackParams = css({
+  display: 'inline-block',
+  maxWidth: '200px',
+  marginLeft: '5px',
+  color: "var(--ds-text-subtlest, ".concat(N70, ")"),
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden'
+});
+export var styledImage = css({
+  maxHeight: '16px',
+  maxWidth: '16px',
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: 'lozenge-image'
+});
+export var lozengeWrapper = css({
+  display: 'flex',
+  justifyContent: 'left',
+  width: '100%',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginBottom: "var(--ds-space-negative-050, -4px)"
+});

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -1,7 +1,16 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
 import { ZERO_WIDTH_SPACE } from '../utils';
+var styles = css({
+  '&.inline-extension': {
+    display: 'inline-block'
+  }
+});
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
@@ -9,6 +18,13 @@ import { ZERO_WIDTH_SPACE } from '../utils';
  */
 export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
-    nodeType = _ref.nodeType;
-  return /*#__PURE__*/React.createElement("span", null, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
+    nodeType = _ref.nodeType,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  var wrapperClassNames = classnames({
+    'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates
+  });
+  return jsx("span", {
+    className: wrapperClassNames,
+    css: styles
+  }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
 };

package/dist/esm/extensibility/extensionNodeView.js

@@ -47,7 +47,8 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
     value: function render(props, forwardRef) {
       var _props$extensionNodeV;
       return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
-        nodeType: this.node.type.name
+        nodeType: this.node.type.name,
+        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
       }, /*#__PURE__*/React.createElement(Extension, {
         editorView: this.view,
         node: this.node,

package/dist/esm/link/constants.js

@@ -0,0 +1,2 @@
+export var stagingLinkPreferencesUrl = 'https://id.stg.internal.atlassian.com/manage-profile/link-preferences';
+export var productionLinkPreferencesUrl = 'https://id.atlassian.com/manage-profile/link-preferences';

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.9.1";
+var packageVersion = "78.10.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/ui/DropList/index.js

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.9.1";
+var packageVersion = "78.10.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/extensibility/Extension/Lozenge.d.ts

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {
     url: string;

package/dist/types/extensibility/Extension/LozengeComponent.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { LozengeData } from './Lozenge';
 export declare const ICON_SIZE = 24;
@@ -10,6 +11,7 @@ type LozengeComponentProps = {
     renderImage: (lozengeData: LozengeData) => void;
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
+    customContainerStyles?: CSSProperties;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/ExtensionNodeWrapper.d.ts

@@ -1,14 +1,18 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     children: React.ReactNode;
     nodeType: string;
+    showMacroInteractionDesignUpdates?: boolean;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType }: Props) => JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types/link/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const stagingLinkPreferencesUrl = "https://id.stg.internal.atlassian.com/manage-profile/link-preferences";
+export declare const productionLinkPreferencesUrl = "https://id.atlassian.com/manage-profile/link-preferences";

package/dist/types-ts4.5/extensibility/Extension/Lozenge.d.ts

@@ -1,11 +1,13 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {
     url: string;

package/dist/types-ts4.5/extensibility/Extension/LozengeComponent.d.ts

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { LozengeData } from './Lozenge';
 export declare const ICON_SIZE = 24;
@@ -10,6 +11,7 @@ type LozengeComponentProps = {
     renderImage: (lozengeData: LozengeData) => void;
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
+    customContainerStyles?: CSSProperties;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/extensibility/ExtensionNodeWrapper.d.ts

@@ -1,14 +1,18 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     children: React.ReactNode;
     nodeType: string;
+    showMacroInteractionDesignUpdates?: boolean;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType }: Props) => JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/link/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const stagingLinkPreferencesUrl = "https://id.stg.internal.atlassian.com/manage-profile/link-preferences";
+export declare const productionLinkPreferencesUrl = "https://id.atlassian.com/manage-profile/link-preferences";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.9.1",
+  "version": "78.10.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -88,11 +88,12 @@
     "./copy-button": "./src/copy-button/index.ts",
     "./legacy-rank-plugins": "./src/rank.ts",
     "./indentation": "./src/indentation/index.ts",
-    "./annotation": "./src/annotation/index.ts"
+    "./annotation": "./src/annotation/index.ts",
+    "./constants": "./src/link/constants.ts"
   },
   "dependencies": {
     "@atlaskit/activity-provider": "^2.4.0",
-    "@atlaskit/adf-schema": "^35.5.1",
+    "@atlaskit/adf-schema": "^35.5.2",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/analytics-listeners": "^8.9.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
@@ -101,7 +102,7 @@
     "@atlaskit/button": "^17.6.0",
     "@atlaskit/code": "^15.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/custom-steps": "^0.0.13",
+    "@atlaskit/custom-steps": "^0.0.14",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "3.0.0",
@@ -120,7 +121,7 @@
     "@atlaskit/media-file-preview": "^0.5.0",
     "@atlaskit/media-picker": "^66.3.0",
     "@atlaskit/media-ui": "^25.3.0",
-    "@atlaskit/media-viewer": "48.3.0",
+    "@atlaskit/media-viewer": "48.3.2",
     "@atlaskit/mention": "^23.0.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
@@ -132,7 +133,7 @@
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/tokens": "^1.39.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/width-detector": "^4.1.0",