@atlaskit/editor-plugin-media 8.4.16 → 8.4.18

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media
 
+## 8.4.18
+
+### Patch Changes
+
+- [`840338033507a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/840338033507a) -
+  Migrating custom icons behind feature flag.
+
+## 8.4.17
+
+### Patch Changes
+
+- [`1083b6f1f8eb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1083b6f1f8eb2) -
+  [ux] Fix issues where media is selected when a parent node is selected
+- Updated dependencies
+
 ## 8.4.16
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -936,7 +936,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
           doc = state.doc;
 
         // Find any media nodes in the current selection
-        if (state.selection instanceof _state2.TextSelection || state.selection instanceof _state2.AllSelection || state.selection instanceof _state2.NodeSelection || state.selection instanceof _cellSelection.CellSelection) {
+        if (state.selection instanceof _state2.TextSelection || state.selection instanceof _state2.AllSelection || !(0, _expValEquals.expValEquals)('platform_editor_nested_media_selection_fix', 'isEnabled', true) && state.selection instanceof _state2.NodeSelection || state.selection instanceof _cellSelection.CellSelection) {
           doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
             if (node.type === schema.nodes.media) {
               mediaNodes.push(_view2.Decoration.node(pos, pos + node.nodeSize, {}, {
@@ -947,6 +947,22 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
             }
             return true;
           });
+        } else if ((0, _expValEquals.expValEquals)('platform_editor_nested_media_selection_fix', 'isEnabled', true) && state.selection instanceof _state2.NodeSelection) {
+          var _state$selection = state.selection,
+            node = _state$selection.node,
+            $from = _state$selection.$from;
+          if (node.type === schema.nodes.mediaSingle || node.type === schema.nodes.mediaGroup) {
+            doc.nodesBetween($from.pos, $from.pos + node.nodeSize, function (mediaNode, mediaPos) {
+              if (mediaNode.type === schema.nodes.media) {
+                mediaNodes.push(_view2.Decoration.node(mediaPos, mediaPos + mediaNode.nodeSize, {}, {
+                  type: 'media',
+                  selected: true
+                }));
+                return false;
+              }
+              return true;
+            });
+          }
         }
         var pluginState = getMediaPluginState(state);
         if (!pluginState.showDropzone) {
@@ -955,8 +971,8 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
 
         // When a media is already selected
         if (state.selection instanceof _state2.NodeSelection) {
-          var node = state.selection.node;
-          if (node.type === schema.nodes.mediaSingle) {
+          var _node = state.selection.node;
+          if (_node.type === schema.nodes.mediaSingle) {
             var deco = _view2.Decoration.node(state.selection.from, state.selection.to, {
               class: 'richMedia-selected'
             });

package/dist/es2019/pm-plugins/main.js

@@ -824,7 +824,7 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         } = state;
 
         // Find any media nodes in the current selection
-        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
+        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || !expValEquals('platform_editor_nested_media_selection_fix', 'isEnabled', true) && state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
           doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
             if (node.type === schema.nodes.media) {
               mediaNodes.push(Decoration.node(pos, pos + node.nodeSize, {}, {
@@ -835,6 +835,23 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
             }
             return true;
           });
+        } else if (expValEquals('platform_editor_nested_media_selection_fix', 'isEnabled', true) && state.selection instanceof NodeSelection) {
+          const {
+            node,
+            $from
+          } = state.selection;
+          if (node.type === schema.nodes.mediaSingle || node.type === schema.nodes.mediaGroup) {
+            doc.nodesBetween($from.pos, $from.pos + node.nodeSize, (mediaNode, mediaPos) => {
+              if (mediaNode.type === schema.nodes.media) {
+                mediaNodes.push(Decoration.node(mediaPos, mediaPos + mediaNode.nodeSize, {}, {
+                  type: 'media',
+                  selected: true
+                }));
+                return false;
+              }
+              return true;
+            });
+          }
         }
         const pluginState = getMediaPluginState(state);
         if (!pluginState.showDropzone) {

package/dist/esm/pm-plugins/main.js

@@ -928,7 +928,7 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
           doc = state.doc;
 
         // Find any media nodes in the current selection
-        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
+        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection || !expValEquals('platform_editor_nested_media_selection_fix', 'isEnabled', true) && state.selection instanceof NodeSelection || state.selection instanceof CellSelection) {
           doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
             if (node.type === schema.nodes.media) {
               mediaNodes.push(Decoration.node(pos, pos + node.nodeSize, {}, {
@@ -939,6 +939,22 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
             }
             return true;
           });
+        } else if (expValEquals('platform_editor_nested_media_selection_fix', 'isEnabled', true) && state.selection instanceof NodeSelection) {
+          var _state$selection = state.selection,
+            node = _state$selection.node,
+            $from = _state$selection.$from;
+          if (node.type === schema.nodes.mediaSingle || node.type === schema.nodes.mediaGroup) {
+            doc.nodesBetween($from.pos, $from.pos + node.nodeSize, function (mediaNode, mediaPos) {
+              if (mediaNode.type === schema.nodes.media) {
+                mediaNodes.push(Decoration.node(mediaPos, mediaPos + mediaNode.nodeSize, {}, {
+                  type: 'media',
+                  selected: true
+                }));
+                return false;
+              }
+              return true;
+            });
+          }
         }
         var pluginState = getMediaPluginState(state);
         if (!pluginState.showDropzone) {
@@ -947,8 +963,8 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
 
         // When a media is already selected
         if (state.selection instanceof NodeSelection) {
-          var node = state.selection.node;
-          if (node.type === schema.nodes.mediaSingle) {
+          var _node = state.selection.node;
+          if (_node.type === schema.nodes.mediaSingle) {
             var deco = Decoration.node(state.selection.from, state.selection.to, {
               class: 'richMedia-selected'
             });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.4.16",
+	"version": "8.4.18",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/textfield": "^8.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^14.5.0",
+		"@atlaskit/tmp-editor-statsig": "^14.6.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.10.0",
 		"@babel/runtime": "^7.0.0",

package/dist/cjs/ui/toolbar/assets/commentWithDotIcon.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CommentWithDotIcon = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _icon = _interopRequireDefault(require("@atlaskit/icon"));
-var _colors = require("@atlaskit/theme/colors");
-var IconCommentConfluenceTypeWithDotGlyph = function IconCommentConfluenceTypeWithDotGlyph() {
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("rect", {
-    x: "13",
-    y: "1",
-    width: "8",
-    height: "8",
-    rx: "4",
-    stroke: "var(--ds-border-inverse, ".concat(_colors.N0, ")"),
-    strokeWidth: 2,
-    fill: "var(--ds-icon-brand, #0052CC)"
-  }));
-};
-var CommentWithDotIcon = exports.CommentWithDotIcon = function CommentWithDotIcon(props) {
-  return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
-    glyph: IconCommentConfluenceTypeWithDotGlyph
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props));
-};

package/dist/es2019/ui/toolbar/assets/commentWithDotIcon.js

@@ -1,40 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import Icon from '@atlaskit/icon';
-import { N0 } from '@atlaskit/theme/colors';
-const IconCommentConfluenceTypeWithDotGlyph = () => {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "13",
-    y: "1",
-    width: "8",
-    height: "8",
-    rx: "4",
-    stroke: `var(--ds-border-inverse, ${N0})`,
-    strokeWidth: 2,
-    fill: "var(--ds-icon-brand, #0052CC)"
-  }));
-};
-export const CommentWithDotIcon = props => {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: IconCommentConfluenceTypeWithDotGlyph
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props));
-};

package/dist/esm/ui/toolbar/assets/commentWithDotIcon.js

@@ -1,40 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import Icon from '@atlaskit/icon';
-import { N0 } from '@atlaskit/theme/colors';
-var IconCommentConfluenceTypeWithDotGlyph = function IconCommentConfluenceTypeWithDotGlyph() {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "13",
-    y: "1",
-    width: "8",
-    height: "8",
-    rx: "4",
-    stroke: "var(--ds-border-inverse, ".concat(N0, ")"),
-    strokeWidth: 2,
-    fill: "var(--ds-icon-brand, #0052CC)"
-  }));
-};
-export var CommentWithDotIcon = function CommentWithDotIcon(props) {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: IconCommentConfluenceTypeWithDotGlyph
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props));
-};

package/dist/types/ui/toolbar/assets/commentWithDotIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { GlyphProps } from '@atlaskit/icon/types';
-export declare const CommentWithDotIcon: (props: GlyphProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/toolbar/assets/commentWithDotIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { GlyphProps } from '@atlaskit/icon/types';
-export declare const CommentWithDotIcon: (props: GlyphProps) => React.JSX.Element;