@atlaskit/editor-common 74.50.2 → 74.50.4

package/dist/esm/quick-insert/assets/heading3.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconHeading3() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,24 +13,36 @@ export default function IconHeading3() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 31,
     width: 20,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 28,
     width: 28,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 25,
     width: 28,
@@ -36,7 +50,10 @@ export default function IconHeading3() {
     rx: 0.5
   }), /*#__PURE__*/React.createElement("path", {
     d: "M13.224 9.488h1.92V20h-1.92v-4.352H8.296V20h-1.92V9.488h1.92v4.416h4.928V9.488zM20.8 20.16c-1.712 0-2.736-.32-3.536-.88v-1.776c1.152.736 2.416.896 3.52.896 1.232 0 1.984-.432 1.984-1.504 0-1.104-.752-1.408-2.112-1.408H19.44v-1.472h1.232c1.216 0 1.92-.384 1.92-1.424 0-1.024-.688-1.52-1.92-1.52-.944 0-2.128.208-3.168.768v-1.744c.736-.416 1.776-.768 3.296-.768 2.544 0 3.696 1.296 3.696 2.816 0 1.424-.544 2.32-2.064 2.64 1.68.256 2.24 1.2 2.24 2.384 0 1.616-1.184 2.992-3.872 2.992z",
-    fill: "#172B4D",
+    fill: iconThemed({
+      light: '#172B4D',
+      dark: '#8696A7'
+    }),
     fillRule: "nonzero"
   })));
 }

package/dist/esm/quick-insert/assets/heading4.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconHeading4() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,24 +13,36 @@ export default function IconHeading4() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 30,
     width: 20,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 27,
     width: 28,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 24,
     width: 28,
@@ -36,7 +50,10 @@ export default function IconHeading4() {
     rx: 0.5
   }), /*#__PURE__*/React.createElement("path", {
     d: "M11.804 9.802h2.254V19h-2.254v-3.57H8.206V19H5.952V9.802h2.254v3.654h3.598V9.802zm6.188 4.186l-1.246 1.68a33.67 33.67 0 012.646-.098v-3.78c-.476.812-.994 1.638-1.4 2.198zM21.52 19h-2.24v-1.666h-4.116v-1.946l4.116-5.586h2.24v5.768h1.05v1.764h-1.05V19z",
-    fill: "#172B4D",
+    fill: iconThemed({
+      light: '#172B4D',
+      dark: '#8696A7'
+    }),
     fillRule: "nonzero"
   })));
 }

package/dist/esm/quick-insert/assets/heading5.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconHeading5() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,24 +13,36 @@ export default function IconHeading5() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 30,
     width: 20,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 27,
     width: 28,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 24,
     width: 28,
@@ -36,7 +50,10 @@ export default function IconHeading5() {
     rx: 0.5
   }), /*#__PURE__*/React.createElement("path", {
     d: "M10.832 11.116h1.932V19h-1.932v-3.06H7.748V19H5.816v-7.884h1.932v3.132h3.084v-3.132zm6.024 8.016c-1.152 0-2.124-.252-2.796-.684v-1.716a5.307 5.307 0 002.676.744c.852 0 1.308-.288 1.308-.984 0-.744-.456-.984-1.2-.984-.396 0-.816.096-1.176.24l-1.308-.504v-4.128h5.124v1.644h-3.48v1.896c.372-.168.852-.288 1.452-.288 1.656 0 2.4.9 2.4 2.304 0 1.476-.924 2.46-3 2.46z",
-    fill: "#172B4D",
+    fill: iconThemed({
+      light: '#172B4D',
+      dark: '#8696A7'
+    }),
     fillRule: "nonzero"
   })));
 }

package/dist/esm/quick-insert/assets/heading6.js

@@ -1,7 +1,9 @@
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { useIconThemed } from '../use-icon-themed';
 export default function IconHeading6() {
+  var _useIconThemed = useIconThemed(),
+    iconThemed = _useIconThemed.iconThemed;
   return /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
     "aria-hidden": true,
@@ -11,24 +13,36 @@ export default function IconHeading6() {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: "#FFF",
+    fill: iconThemed({
+      light: '#FFF',
+      dark: '#161A1D'
+    }),
     d: "M0 0h40v40H0z"
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 30,
     width: 20,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 27,
     width: 28,
     height: 1,
     rx: 0.5
   }), /*#__PURE__*/React.createElement("rect", {
-    fill: "#C1C7D0",
+    fill: iconThemed({
+      light: '#C1C7D0',
+      dark: '#454F59'
+    }),
     x: 6,
     y: 24,
     width: 28,
@@ -36,7 +50,10 @@ export default function IconHeading6() {
     rx: 0.5
   }), /*#__PURE__*/React.createElement("path", {
     d: "M12.675 19h-1.622v-3.239H7.562V19H5.94v-7.75h1.622v3.125h3.491V11.25h1.622V19zm4.878.199c-1.122 0-2.025-.494-2.556-1.402-.43-.66-.65-1.552-.65-2.616 0-2.573 1.213-4.13 3.233-4.13 1.472 0 2.616.87 2.836 2.164H18.81c-.15-.51-.634-.832-1.24-.832-1.064 0-1.709 1.026-1.677 2.632h.097c.355-.73 1.074-1.144 1.977-1.144 1.471 0 2.551 1.09 2.551 2.572 0 1.612-1.23 2.756-2.965 2.756zm-.016-1.332c.795 0 1.407-.596 1.407-1.375 0-.79-.59-1.37-1.402-1.37-.81 0-1.407.58-1.407 1.354 0 .79.607 1.39 1.402 1.39z",
-    fill: "#97A0AF",
+    fill: iconThemed({
+      light: '#97A0AF',
+      dark: '#5A6977'
+    }),
     fillRule: "nonzero"
   })));
 }

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.50.2";
+var packageVersion = "74.50.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -4,6 +4,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
+
 import React, { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
@@ -90,7 +91,7 @@ var containerStyles = function containerStyles(styleProps) {
 };
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8 if important to highlight 8*4 - 8/2, or directly replace with 28px\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
   };
 };
 var titleInputStyles = function titleInputStyles(props) {

package/dist/types/media-single/index.d.ts

@@ -1,2 +1,2 @@
 export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, } from './constants';
-export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, } from './utils';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, } from './utils';

package/dist/types/media-single/utils.d.ts

@@ -1,4 +1,6 @@
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
+import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 /**
  * Convert media node width to pixel
  *
@@ -54,3 +56,16 @@ export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLay
  * @return {number} the rounded number
  */
 export declare const roundToNearest: (value: number, interval?: number) => number;
+/**
+ * Get parent width for a nested media single node
+ * @param view Editor view
+ * @param pos node position
+ */
+export declare const getMaxWidthForNestedNode: (view: EditorView, pos: number | undefined) => number | null;
+/**
+ * Get parent width for a nested media single node for new experience
+ * @param view Editor view
+ * @param pos node position
+ */
+export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined) => number | null;
+export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/dist/types/ui/Expand/index.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const messages: {
     collapseNode: {
         id: string;

package/dist/types-ts4.5/media-single/index.d.ts

@@ -1,2 +1,2 @@
 export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, } from './constants';
-export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, } from './utils';
+export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, } from './utils';

package/dist/types-ts4.5/media-single/utils.d.ts

@@ -1,4 +1,6 @@
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
+import type { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 /**
  * Convert media node width to pixel
  *
@@ -54,3 +56,16 @@ export declare function calculateOffsetLeft(insideInlineLike: boolean, insideLay
  * @return {number} the rounded number
  */
 export declare const roundToNearest: (value: number, interval?: number) => number;
+/**
+ * Get parent width for a nested media single node
+ * @param view Editor view
+ * @param pos node position
+ */
+export declare const getMaxWidthForNestedNode: (view: EditorView, pos: number | undefined) => number | null;
+/**
+ * Get parent width for a nested media single node for new experience
+ * @param view Editor view
+ * @param pos node position
+ */
+export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined) => number | null;
+export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/dist/types-ts4.5/ui/Expand/index.d.ts

@@ -1,7 +1,6 @@
-/** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { ThemeProps } from '@atlaskit/theme/types';
+import type { ThemeProps } from '@atlaskit/theme/types';
 export declare const messages: {
     collapseNode: {
         id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.50.2",
+  "version": "74.50.4",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"