@atlaskit/editor-plugin-media 1.9.2 → 1.9.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media
 
+## 1.9.4
+
+### Patch Changes
+
+- [#82153](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82153) [`480761cfea9c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/480761cfea9c) - Make the annotation plugin optional for media plugin.
+- [#81852](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81852) [`555dccbfa979`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/555dccbfa979) - React 18 types for editor-plugin-media
+- [#82076](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82076) [`614af0864121`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/614af0864121) - [ux] Remove seperator between edit and open link buttons on media floating toolbar
+- Updated dependencies
+
+## 1.9.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.9.2
 
 ### Patch Changes

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LinkToolbarAppearance = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -19,12 +18,14 @@ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"))
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _checkMediaType = require("../utils/check-media-type");
 var _currentMediaNode = require("../utils/current-media-node");
-var _templateObject;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// need this wrapper, need to have 4px between items.
-var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+/** @jsx jsx */
+
+var wrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center'
+});
 var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
   var editorState = _ref.editorState,
     mediaLinkingState = _ref.mediaLinkingState,
@@ -61,7 +62,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
     var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
     return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
-      css: wrapper
+      css: wrapperStyles
     }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       onClick: onEditLink,
       title: title,
@@ -70,9 +71,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
         keymap: _keymaps.addLink
       }),
       testId: "edit-link-button"
-    }, title)), (0, _react2.jsx)("div", {
-      css: wrapper
-    }, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    }, title)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -10,12 +10,10 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
 import { currentMediaInlineNode, currentMediaNode } from '../utils/current-media-node';
-// need this wrapper, need to have 4px between items.
-const wrapper = css`
-  display: flex;
-  align-items: center;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-`;
+const wrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center'
+});
 export const LinkToolbarAppearance = ({
   editorState,
   mediaLinkingState,
@@ -50,7 +48,7 @@ export const LinkToolbarAppearance = ({
     const title = intl.formatMessage(linkToolbarMessages.editLink);
     const linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
     return jsx(Fragment, null, jsx("div", {
-      css: wrapper
+      css: wrapperStyles
     }, jsx(ToolbarButton, {
       onClick: onEditLink,
       title: title,
@@ -59,9 +57,7 @@ export const LinkToolbarAppearance = ({
         keymap: addLink
       }),
       testId: "edit-link-button"
-    }, title)), jsx("div", {
-      css: wrapper
-    }, jsx(Separator, null)), jsx(ToolbarButton, {
+    }, title)), jsx(ToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,

package/dist/esm/toolbar/linking-toolbar-appearance.js

@@ -1,6 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { Fragment, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -13,8 +11,10 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
 import { currentMediaInlineNode, currentMediaNode } from '../utils/current-media-node';
-// need this wrapper, need to have 4px between items.
-var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+var wrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center'
+});
 export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
   var editorState = _ref.editorState,
     mediaLinkingState = _ref.mediaLinkingState,
@@ -51,7 +51,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
     var title = intl.formatMessage(linkToolbarMessages.editLink);
     var linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
     return jsx(Fragment, null, jsx("div", {
-      css: wrapper
+      css: wrapperStyles
     }, jsx(ToolbarButton, {
       onClick: onEditLink,
       title: title,
@@ -60,9 +60,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
         keymap: addLink
       }),
       testId: "edit-link-button"
-    }, title)), jsx("div", {
-      css: wrapper
-    }, jsx(Separator, null)), jsx(ToolbarButton, {
+    }, title)), jsx(ToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,

package/dist/types/next-plugin-type.d.ts

@@ -26,7 +26,7 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         EditorDisabledPlugin,
         FocusPlugin,
         SelectionPlugin,
-        AnnotationPlugin
+        OptionalPlugin<AnnotationPlugin>
     ];
     sharedState: MediaPluginState | null;
     actions: {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
@@ -32,7 +32,7 @@ export declare const createMediaNodeUpdater: (props: MediaInlineProps) => MediaN
  */
 export declare const updateMediaNodeAttributes: (props: MediaInlineProps, mediaNodeUpdater: MediaNodeUpdater) => Promise<void>;
 export declare const handleNewNode: (props: MediaInlineProps) => void;
-export declare const MediaInline: React.FC<MediaInlineProps>;
+export declare const MediaInline: (props: MediaInlineProps) => JSX.Element;
 export interface MediaInlineNodeViewProps {
     providerFactory: ProviderFactory;
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;

package/dist/types/toolbar/filePreviewItem.d.ts

@@ -1,9 +1,9 @@
-import type { FC } from 'react';
+/// <reference types="react" />
 import type { IntlShape } from 'react-intl-next';
 import type { MediaPluginState } from '../pm-plugins/types';
 interface FilePreviewProps {
     mediaPluginState: MediaPluginState;
     intl: IntlShape;
 }
-export declare const FilePreviewItem: FC<FilePreviewProps>;
+export declare const FilePreviewItem: ({ mediaPluginState, intl, }: FilePreviewProps) => JSX.Element;
 export {};

package/dist/types/toolbar/linking-toolbar-appearance.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaLinkingState } from '../pm-plugins/linking';
@@ -12,4 +13,4 @@ export interface LinkingToolbarProps {
     onOpenLink: React.MouseEventHandler;
     isInlineNode?: boolean;
 }
-export declare const LinkToolbarAppearance: React.FC<LinkingToolbarProps>;
+export declare const LinkToolbarAppearance: ({ editorState, mediaLinkingState, intl, onAddLink, onEditLink, onOpenLink, isInlineNode, }: LinkingToolbarProps) => jsx.JSX.Element | null;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { PixelEntryProps } from './types';
 export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
-export declare const FullWidthDisplay: React.FC<{
+export declare const FullWidthDisplay: ({ intl: { formatMessage }, }: {
     intl: IntlShape;
-}>;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/next-plugin-type.d.ts

@@ -26,7 +26,7 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
         EditorDisabledPlugin,
         FocusPlugin,
         SelectionPlugin,
-        AnnotationPlugin
+        OptionalPlugin<AnnotationPlugin>
     ];
     sharedState: MediaPluginState | null;
     actions: {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
@@ -32,7 +32,7 @@ export declare const createMediaNodeUpdater: (props: MediaInlineProps) => MediaN
  */
 export declare const updateMediaNodeAttributes: (props: MediaInlineProps, mediaNodeUpdater: MediaNodeUpdater) => Promise<void>;
 export declare const handleNewNode: (props: MediaInlineProps) => void;
-export declare const MediaInline: React.FC<MediaInlineProps>;
+export declare const MediaInline: (props: MediaInlineProps) => JSX.Element;
 export interface MediaInlineNodeViewProps {
     providerFactory: ProviderFactory;
     api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;

package/dist/types-ts4.5/toolbar/filePreviewItem.d.ts

@@ -1,9 +1,9 @@
-import type { FC } from 'react';
+/// <reference types="react" />
 import type { IntlShape } from 'react-intl-next';
 import type { MediaPluginState } from '../pm-plugins/types';
 interface FilePreviewProps {
     mediaPluginState: MediaPluginState;
     intl: IntlShape;
 }
-export declare const FilePreviewItem: FC<FilePreviewProps>;
+export declare const FilePreviewItem: ({ mediaPluginState, intl, }: FilePreviewProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/toolbar/linking-toolbar-appearance.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaLinkingState } from '../pm-plugins/linking';
@@ -12,4 +13,4 @@ export interface LinkingToolbarProps {
     onOpenLink: React.MouseEventHandler;
     isInlineNode?: boolean;
 }
-export declare const LinkToolbarAppearance: React.FC<LinkingToolbarProps>;
+export declare const LinkToolbarAppearance: ({ editorState, mediaLinkingState, intl, onAddLink, onEditLink, onOpenLink, isInlineNode, }: LinkingToolbarProps) => jsx.JSX.Element | null;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { PixelEntryProps } from './types';
 export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
-export declare const FullWidthDisplay: React.FC<{
+export declare const FullWidthDisplay: ({ intl: { formatMessage }, }: {
     intl: IntlShape;
-}>;
+}) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,10 +37,10 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.7.0",
-    "@atlaskit/editor-common": "^78.12.0",
+    "@atlaskit/editor-common": "^78.14.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
-    "@atlaskit/editor-plugin-annotation": "1.3.1",
+    "@atlaskit/editor-plugin-annotation": "1.4.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
     "@atlaskit/editor-plugin-floating-toolbar": "^1.2.0",
@@ -57,7 +57,7 @@
     "@atlaskit/media-card": "^77.10.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
-    "@atlaskit/media-common": "^11.0.0",
+    "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.3.0",
     "@atlaskit/media-ui": "^25.4.0",
@@ -109,11 +109,9 @@
       "ui-components": [
         "lite-mode"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ],
+      "deprecation": "no-deprecated-imports",
       "styling": [
-        "static",
+        "emotion",
         "emotion"
       ],
       "imports": [
@@ -155,4 +153,4 @@
       "checkDevDependencies": true
     }
   }
-}
+}