@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,58 @@
+import type { IntlShape } from 'react-intl-next';
+export type PixelEntryProps = {
+    /**
+     * IntlShape passed in for translations
+     */
+    intl: IntlShape;
+    /**
+     * The current pixel width
+     */
+    width: number;
+    /**
+     * The original media width used to calculate the height
+     */
+    mediaWidth: number;
+    /**
+     * The original media height used to calculate the width
+     */
+    mediaHeight: number;
+    /**
+     * The minimum acceptable width input
+     */
+    minWidth: number;
+    /**
+     * The maximum acceptable width input
+     */
+    maxWidth: number;
+    /**
+     *
+     * Handler for valid input
+     */
+    onChange?: (valid: boolean) => void;
+    /**
+     * show migration button to convert to pixels for legacy image resize experience
+     */
+    showMigration?: boolean;
+    /**
+     * The submit function that is called when the form is valid and the submit key is pressed
+     */
+    onSubmit?: (value: PixelEntryFormData) => void;
+    /**
+     * An optional validate function that is called before onSubmit is called.
+     * The value passed through the validator currently comes from the width input only.
+     */
+    validate?: (value: number | '') => boolean;
+    /**
+     * Migration handler called when the CTA button is clicked
+     */
+    onMigrate?: () => void;
+};
+export type PixelEntryFormValues = {
+    inputWidth: number | '';
+    inputHeight: number | '';
+};
+export type PixelEntryValidation = 'valid' | 'greater-than-max' | 'less-than-min';
+export type PixelEntryFormData = {
+    width: number;
+    validation: PixelEntryValidation;
+};

package/dist/types/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const ResizableMediaMigrationNotification: () => jsx.JSX.Element;

package/dist/types/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -0,0 +1,59 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { GuidelineConfig, GuidelineSnapsReference, RelativeGuides } from '@atlaskit/editor-common/guideline';
+import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { Props } from './types';
+type State = {
+    isVideoFile: boolean;
+    isResizing: boolean;
+    size: Dimensions;
+    snaps: Snap;
+    relativeGuides: RelativeGuides;
+    guidelines: GuidelineConfig[];
+};
+export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
+type ResizableMediaSingleNextProps = Props & {
+    showLegacyNotification?: boolean;
+};
+declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
+    private lastSnappedGuidelineKeys;
+    constructor(props: ResizableMediaSingleNextProps);
+    componentDidUpdate(prevProps: Props): boolean;
+    componentDidMount(): Promise<void>;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    get wrappedLayout(): boolean;
+    get pos(): number | null;
+    get $pos(): import("prosemirror-model").ResolvedPos | null;
+    get aspectRatio(): number;
+    get insideInlineLike(): boolean;
+    get insideLayout(): boolean;
+    get isGuidelineEnabled(): boolean;
+    isNestedNode(): boolean;
+    private getDefaultGuidelines;
+    private updateGuidelines;
+    checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
+    calcNewLayout: (newWidth: number, stop: boolean) => MediaSingleLayout;
+    calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
+    calcPxHeight: (newWidth: number) => number;
+    private displayGuideline;
+    private setIsResizing;
+    private updateSizeInPluginState;
+    private calcMaxWidth;
+    private calcMinWidth;
+    private getRelativeGuides;
+    updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
+    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
+        width: number;
+        height: number;
+        layout: MediaSingleLayout;
+    };
+    selectCurrentMediaNode: () => void;
+    handleResizeStart: HandleResizeStart;
+    handleResize: HandleResize;
+    handleResizeStop: HandleResize;
+    render(): jsx.JSX.Element;
+}
+export default ResizableMediaSingleNext;

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

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { Props } from './types';
+type State = {
+    offsetLeft: number;
+    isVideoFile: boolean;
+    resizedPctWidth?: number;
+};
+export default class ResizableMediaSingle extends React.Component<Props, State> {
+    state: State;
+    componentDidUpdate(prevProps: Props): boolean;
+    private displayGrid;
+    get wrappedLayout(): boolean;
+    isNestedInTable(): boolean;
+    componentDidMount(): Promise<void>;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
+    /**
+     * When returning to center layout from a wrapped/aligned layout, it might actually
+     * be wide or full-width
+     */
+    checkLayout(oldLayout: MediaSingleLayout, newLayout: MediaSingleLayout): void;
+    calcNewSize: (newWidth: number, stop: boolean) => {
+        width: number | null;
+        layout: MediaSingleLayout;
+    };
+    calcUnwrappedLayout: (pct: number, width: number) => 'center' | 'wide' | 'full-width';
+    get $pos(): import("prosemirror-model").ResolvedPos | null;
+    /**
+     * The maxmimum number of grid columns this node can resize to.
+     */
+    get gridWidth(): number;
+    calcColumnLeftOffset: () => number;
+    wrapper?: HTMLElement;
+    calcPxWidth: (useLayout?: MediaSingleLayout) => number;
+    get insideInlineLike(): boolean;
+    get insideLayout(): boolean;
+    highlights: (newWidth: number, snapPoints: number[]) => string[] | number[];
+    private saveWrapper;
+    render(): jsx.JSX.Element;
+}
+export {};

package/dist/types/ui/ResizableMediaSingle/styled.d.ts

@@ -0,0 +1,2 @@
+import type { MediaSingleDimensionHelperProps } from '@atlaskit/editor-common/ui';
+export declare const wrapperStyle: (props: MediaSingleDimensionHelperProps) => import("@emotion/react").SerializedStyles;

package/dist/types/ui/ResizableMediaSingle/styles.d.ts

@@ -0,0 +1 @@
+export declare const resizableMediaMigrationNotificationStyle: import("@emotion/react").SerializedStyles;

package/dist/types/ui/ResizableMediaSingle/types.d.ts

@@ -0,0 +1,27 @@
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MediaSingleProps } from '@atlaskit/editor-common/ui';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { MediaNextEditorPluginType } from '../../next-plugin-type';
+import type { getPosHandler } from '../../types';
+export type EnabledHandles = {
+    left?: boolean;
+    right?: boolean;
+};
+export type Props = MediaSingleProps & {
+    updateSize: (width: number | null, layout: MediaSingleLayout) => void;
+    getPos: getPosHandler;
+    view: EditorView;
+    lineLength: number;
+    gridSize: number;
+    containerWidth: number;
+    allowBreakoutSnapPoints?: boolean;
+    selected: boolean;
+    viewMediaClientConfig?: MediaClientConfig;
+    fullWidthMode?: boolean;
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    mediaSingleWidth?: number;
+    pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MediaNextEditorPluginType } from '../../next-plugin-type';
+export interface Props {
+    isDisabled?: boolean;
+    isReducedSpacing?: boolean;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/ui/ToolbarMedia/toolbar-media-messages.d.ts

@@ -0,0 +1,7 @@
+export declare const toolbarMediaMessages: {
+    toolbarMediaTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/ui/media-linking-toolbar-messages.d.ts

@@ -0,0 +1,7 @@
+export declare const mediaLinkToolbarMessages: {
+    backLink: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/utils/analytics.d.ts

@@ -0,0 +1,3 @@
+import type { MediaEventPayload, MediaInputResizeTrackAction, MediaResizeTrackAction } from '@atlaskit/editor-common/analytics';
+export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
+export declare const getMediaInputResizeAnalyticsEvent: <T extends MediaInputResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;

package/dist/types/utils/check-media-type.d.ts

@@ -0,0 +1,4 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { MediaType } from '@atlaskit/media-client';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+export declare const checkMediaType: (mediaNode: PMNode, mediaClientConfig: MediaClientConfig) => Promise<MediaType | 'external' | undefined>;

package/dist/types/utils/current-media-node.d.ts

@@ -0,0 +1,9 @@
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const currentMediaNodeWithPos: (editorState: EditorState) => {
+    node: PMNode;
+    pos: number;
+} | undefined;
+export declare const currentMediaNode: (editorState: EditorState) => PMNode | undefined;
+export declare const currentMediaNodeBorderMark: (editorState: EditorState) => BorderMarkAttributes | undefined;

package/dist/types/utils/is-image.d.ts

@@ -0,0 +1 @@
+export declare const isImage: (fileType?: string) => boolean;

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

@@ -0,0 +1,20 @@
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
+import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaState, getPosHandler as ProsemirrorGetPosHandler } from '../types';
+export declare const isMediaBlobUrlFromAttrs: (attrs: MediaADFAttrs) => boolean;
+export declare const posOfMediaGroupNearby: (state: EditorState) => number | undefined;
+export declare const isSelectionNonMediaBlockNode: (state: EditorState) => boolean;
+export declare const isSelectionMediaSingleNode: (state: EditorState) => boolean;
+export declare const posOfPrecedingMediaGroup: (state: EditorState) => number | undefined;
+/**
+ * Determine whether the cursor is inside empty paragraph
+ * or the selection is the entire paragraph
+ */
+export declare const isInsidePotentialEmptyParagraph: (state: EditorState) => boolean;
+export declare const posOfParentMediaGroup: (state: EditorState, $pos?: ResolvedPos, prepend?: boolean) => number | undefined;
+export declare const removeMediaNode: (view: EditorView, node: PMNode, getPos: ProsemirrorGetPosHandler) => void;
+export declare const splitMediaGroup: (view: EditorView) => boolean;
+export declare const copyOptionalAttrsFromMediaState: (mediaState: MediaState, node: PMNode) => void;
+export declare const getMediaNodeFromSelection: (state: EditorState) => PMNode | null;

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

@@ -0,0 +1,30 @@
+import type { EditorAnalyticsAPI, InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaState } from '../types';
+export interface Range {
+    start: number;
+    end: number;
+}
+export declare const canInsertMediaInline: (state: EditorState) => boolean;
+/**
+ * Create a new media inline to insert the new media.
+ * @param view Editor view
+ * @param mediaState Media file to be added to the editor
+ * @param collection Collection for the media to be added
+ */
+export declare const insertMediaInlineNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (view: EditorView, mediaState: MediaState, collection: string, inputMethod?: InputMethodInsertMedia) => boolean;
+/**
+ * Insert a media into an existing media group
+ * or create a new media group to insert the new media.
+ * @param view Editor view
+ * @param mediaStates Media files to be added to the editor
+ * @param collection Collection for the media to be added
+ */
+export declare const insertMediaGroupNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (view: EditorView, mediaStates: MediaState[], collection: string, inputMethod?: InputMethodInsertMedia) => void;
+/**
+ * Return position of media to be inserted, if it is inside a list
+ * @param content Content to be inserted
+ * @param state Editor State
+ */
+export declare const getPosInList: (state: EditorState) => number | undefined;

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

@@ -0,0 +1,20 @@
+import type { EditorAnalyticsAPI, InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
+import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { MediaState } from '../types';
+export interface MediaSingleState extends MediaState {
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    scaleFactor?: number;
+    contextId?: string;
+}
+export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
+export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia) => boolean;
+export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => boolean;
+export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
+export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
+export declare function isCaptionNode(editorView: EditorView): boolean;
+export declare const isVideo: (fileType?: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,7 +8,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
-    "team": "Editor: Lego",
+    "team": "Editor: Media Experience Porygon",
     "releaseModel": "continuous",
     "singleton": true
   },
@@ -32,49 +32,56 @@
     "./types": "./src/types.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^76.1.5",
-    "@atlaskit/editor-prosemirror": "1.1.0",
-    "@atlaskit/media-client": "^24.0.0",
-    "@atlaskit/media-common": "^9.0.0",
-    "@atlaskit/media-picker": "^66.2.0",
-    "@babel/runtime": "^7.0.0"
-  },
-  "devDependencies": {
-    "@af/visual-regression": "*",
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
+    "@atlaskit/editor-common": "^76.8.0",
     "@atlaskit/editor-palette": "1.5.1",
+    "@atlaskit/editor-plugin-analytics": "^0.2.0",
+    "@atlaskit/editor-plugin-decorations": "^0.2.0",
+    "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
+    "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
+    "@atlaskit/editor-plugin-floating-toolbar": "^0.6.0",
+    "@atlaskit/editor-plugin-focus": "^0.2.0",
+    "@atlaskit/editor-plugin-grid": "^0.3.0",
+    "@atlaskit/editor-plugin-guideline": "^0.5.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
+    "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/media-card": "^77.0.0",
+    "@atlaskit/media-card": "^77.1.0",
+    "@atlaskit/media-client": "^24.0.0",
+    "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
-    "@atlaskit/media-test-helpers": "^33.0.0",
+    "@atlaskit/media-picker": "^66.2.0",
     "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
-    "@atlaskit/visual-regression": "*",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1",
+    "classnames": "^2.2.5",
+    "lodash": "^4.17.21",
+    "memoize-one": "^6.0.0",
+    "uuid": "^3.1.0"
+  },
+  "devDependencies": {
+    "@af/visual-regression": "*",
+    "@atlaskit/media-test-helpers": "^33.0.0",
+    "@atlaskit/util-data-test": "^17.8.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "^0.1.1",
-    "@emotion/react": "^11.7.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
-    "classnames": "^2.2.5",
     "enzyme": "^3.10.0",
-    "lodash": "^4.17.21",
-    "memoize-one": "^6.0.0",
     "react-dom": "^16.8.0",
     "typescript": "~4.9.5",
-    "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },
   "peerDependencies": {
@@ -118,5 +125,10 @@
       ]
     }
   },
+  "platform-feature-flags": {
+    "platform.editor.media.extended-resize-experience": {
+      "type": "boolean"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }