@atlaskit/editor-plugin-media 1.19.6 → 1.19.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 1.19.8
+
+### Patch Changes
+
+-   [#98080](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98080)
+    [`23c03580e38c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/23c03580e38c) -
+    [ux] [ED-23247] Allow floating toolbar copy buttons in live pages view mode.
+
+## 1.19.7
+
+### Patch Changes
+
+-   [#99511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99511)
+    [`85eb87c88183`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85eb87c88183) -
+    Removed unused logic that was creating an empty span element when new portal provider is enabled
+
 ## 1.19.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -27,7 +27,6 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _isType = require("../utils/is-type");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
-var _styles = require("./styles");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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; }
@@ -254,15 +253,6 @@ var MediaInlineNodeView = exports.MediaInlineNodeView = /*#__PURE__*/function (_
       domRef.contentEditable = 'false';
       return domRef;
     }
-  }, {
-    key: "getContentDOM",
-    value: function getContentDOM() {
-      var dom = document.createElement('span');
-      dom.classList.add(_styles.MediaInlineNodeSelector);
-      return {
-        dom: dom
-      };
-    }
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation() {

package/dist/cjs/nodeviews/styles.js

@@ -4,13 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaSingleNodeSelector = exports.MediaInlineNodeSelector = exports.MediaCardWrapper = void 0;
+exports.MediaSingleNodeSelector = exports.MediaCardWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 /** @jsx jsx */
 
-var MediaInlineNodeSelector = exports.MediaInlineNodeSelector = 'media-inline-node';
 var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
 var absoluteDivStyles = (0, _react2.css)({
   position: 'absolute',

package/dist/cjs/toolbar/index.js

@@ -103,13 +103,14 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'separator'
   }, {
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaGroup
-    }, {
-      type: 'separator'
     }]
+  }, {
+    type: 'separator'
   }, {
     id: 'editor.media.delete',
     type: 'button',
@@ -597,16 +598,11 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele2;
-      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
-      return element || mediaPluginState.element;
-    };
     items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele3;
-      var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
+      var _mediaPluginState$ele2;
+      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);

package/dist/cjs/toolbar/mediaInline.js

@@ -67,13 +67,14 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     type: 'separator'
   }, {
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }, {
-      type: 'separator'
     }]
+  }, {
+    type: 'separator'
   }, {
     id: 'editor.media.delete',
     type: 'button',
@@ -281,12 +282,12 @@ var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function g
   }
   inlineImageItems.push({
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }],
-    supportsViewMode: true
+    }]
   });
   inlineImageItems.push({
     type: 'separator'

package/dist/es2019/nodeviews/mediaInline.js

@@ -11,7 +11,6 @@ import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { isImage } from '../utils/is-type';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
-import { MediaInlineNodeSelector } from './styles';
 export const createMediaNodeUpdater = props => {
   const node = props.node;
   return new MediaNodeUpdater({
@@ -179,13 +178,6 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
     domRef.contentEditable = 'false';
     return domRef;
   }
-  getContentDOM() {
-    const dom = document.createElement('span');
-    dom.classList.add(MediaInlineNodeSelector);
-    return {
-      dom
-    };
-  }
   ignoreMutation() {
     return true;
   }

package/dist/es2019/nodeviews/styles.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
-export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
 const absoluteDivStyles = css({
   position: 'absolute',

package/dist/es2019/toolbar/index.js

@@ -14,7 +14,7 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import { messages } from '@atlaskit/media-ui';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { showLinkingToolbar } from '../commands/linking';
-import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
+import { MediaSingleNodeSelector } from '../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../pm-plugins/alt-text';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import { stateKey } from '../pm-plugins/plugin-key';
@@ -91,13 +91,14 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     type: 'separator'
   }, {
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state,
       formatMessage: intl.formatMessage,
       nodeType: mediaGroup
-    }, {
-      type: 'separator'
     }]
+  }, {
+    type: 'separator'
   }, {
     id: 'editor.media.delete',
     type: 'button',
@@ -598,16 +599,11 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    baseToolbar.getDomRef = () => {
-      var _mediaPluginState$ele2;
-      const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
-      return element || mediaPluginState.element;
-    };
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = () => {
-      var _mediaPluginState$ele3;
-      const element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(`.${MediaSingleNodeSelector}`);
+      var _mediaPluginState$ele2;
+      const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaSingleNodeSelector}`);
       return element || mediaPluginState.element;
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);

package/dist/es2019/toolbar/mediaInline.js

@@ -58,13 +58,14 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     type: 'separator'
   }, {
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }, {
-      type: 'separator'
     }]
+  }, {
+    type: 'separator'
   }, {
     id: 'editor.media.delete',
     type: 'button',
@@ -275,12 +276,12 @@ export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverD
   }
   inlineImageItems.push({
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }],
-    supportsViewMode: true
+    }]
   });
   inlineImageItems.push({
     type: 'separator'

package/dist/esm/nodeviews/mediaInline.js

@@ -25,7 +25,6 @@ import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { isImage } from '../utils/is-type';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
-import { MediaInlineNodeSelector } from './styles';
 export var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
   var node = props.node;
   return new MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
@@ -248,15 +247,6 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
       domRef.contentEditable = 'false';
       return domRef;
     }
-  }, {
-    key: "getContentDOM",
-    value: function getContentDOM() {
-      var dom = document.createElement('span');
-      dom.classList.add(MediaInlineNodeSelector);
-      return {
-        dom: dom
-      };
-    }
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation() {

package/dist/esm/nodeviews/styles.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
-export var MediaInlineNodeSelector = 'media-inline-node';
 export var MediaSingleNodeSelector = 'media-single-node';
 var absoluteDivStyles = css({
   position: 'absolute',

package/dist/esm/toolbar/index.js

@@ -18,7 +18,7 @@ import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
 import { messages } from '@atlaskit/media-ui';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { showLinkingToolbar } from '../commands/linking';
-import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
+import { MediaSingleNodeSelector } from '../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../pm-plugins/alt-text';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import { stateKey } from '../pm-plugins/plugin-key';
@@ -93,13 +93,14 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'separator'
   }, {
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaGroup
-    }, {
-      type: 'separator'
     }]
+  }, {
+    type: 'separator'
   }, {
     id: 'editor.media.delete',
     type: 'button',
@@ -587,16 +588,11 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele2;
-      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaInlineNodeSelector));
-      return element || mediaPluginState.element;
-    };
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
     baseToolbar.getDomRef = function () {
-      var _mediaPluginState$ele3;
-      var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(MediaSingleNodeSelector));
+      var _mediaPluginState$ele2;
+      var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);

package/dist/esm/toolbar/mediaInline.js

@@ -57,13 +57,14 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
     type: 'separator'
   }, {
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }, {
-      type: 'separator'
     }]
+  }, {
+    type: 'separator'
   }, {
     id: 'editor.media.delete',
     type: 'button',
@@ -271,12 +272,12 @@ export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(stat
   }
   inlineImageItems.push({
     type: 'copy-button',
+    supportsViewMode: true,
     items: [{
       state: state,
       formatMessage: intl.formatMessage,
       nodeType: mediaInline
-    }],
-    supportsViewMode: true
+    }]
   });
   inlineImageItems.push({
     type: 'separator'

package/dist/types/nodeviews/mediaInline.d.ts

@@ -42,9 +42,6 @@ export interface MediaInlineNodeViewProps {
 }
 export declare class MediaInlineNodeView extends SelectionBasedNodeView<MediaInlineNodeViewProps> {
     createDomRef(): HTMLSpanElement;
-    getContentDOM(): {
-        dom: HTMLSpanElement;
-    };
     ignoreMutation(): boolean;
     viewShouldUpdate(nextNode: PMNode): boolean;
     render(props: MediaInlineNodeViewProps): jsx.JSX.Element;

package/dist/types/nodeviews/styles.d.ts

@@ -2,7 +2,6 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { NumericalCardDimensions } from '@atlaskit/media-card';
-export declare const MediaInlineNodeSelector = "media-inline-node";
 export declare const MediaSingleNodeSelector = "media-single-node";
 type MediaCardWrapperProps = {
     dimensions: NumericalCardDimensions;

package/dist/types-ts4.5/nodeviews/mediaInline.d.ts

@@ -42,9 +42,6 @@ export interface MediaInlineNodeViewProps {
 }
 export declare class MediaInlineNodeView extends SelectionBasedNodeView<MediaInlineNodeViewProps> {
     createDomRef(): HTMLSpanElement;
-    getContentDOM(): {
-        dom: HTMLSpanElement;
-    };
     ignoreMutation(): boolean;
     viewShouldUpdate(nextNode: PMNode): boolean;
     render(props: MediaInlineNodeViewProps): jsx.JSX.Element;

package/dist/types-ts4.5/nodeviews/styles.d.ts

@@ -2,7 +2,6 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { NumericalCardDimensions } from '@atlaskit/media-card';
-export declare const MediaInlineNodeSelector = "media-inline-node";
 export declare const MediaSingleNodeSelector = "media-single-node";
 type MediaCardWrapperProps = {
     dimensions: NumericalCardDimensions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.19.6",
+  "version": "1.19.8",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
-    "@atlaskit/editor-common": "^79.2.0",
+    "@atlaskit/editor-common": "^79.4.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
     "@atlaskit/editor-plugin-annotation": "1.7.3",
@@ -67,7 +67,7 @@
     "@atlaskit/primitives": "^6.1.0",
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/theme": "^12.8.0",
-    "@atlaskit/tokens": "^1.47.0",
+    "@atlaskit/tokens": "^1.48.0",
     "@atlaskit/tooltip": "^18.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",