@atlaskit/editor-plugin-media 0.2.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    '@atlaskit/design-system/consistent-css-prop-usage': 'warn',
+  },
+};

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @atlaskit/editor-plugin-media
+
+## 0.2.0
+
+### Minor Changes
+
+- [#40755](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40755) [`c1cd5ba7d38`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1cd5ba7d38) - [ED-16733] Extraction Media Plugin: Add new placeholder package for media types.

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor Plugin Media 
+
+Media plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-media*
+- **npm** - [@atlaskit/editor-plugin-media](https://www.npmjs.com/package/@atlaskit/editor-plugin-media)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-media)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-media/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-media is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin type ahead](https://atlaskit.atlassian.com/packages/editor/editor-plugin-media) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://developer.atlassian.com/cloud/framework/atlassian-frontend/#license) for more licensing information.

package/dist/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,118 @@
+import type { ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
+import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { FileIdentifier } from '@atlaskit/media-client';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { MediaFile, UploadParams } from '@atlaskit/media-picker/types';
+interface PlaceholderTextOptions {
+    allowInserting?: boolean;
+}
+export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | 'error' | 'mobile-upload-end';
+export type MediaSingleWithType = 'pixel' | 'percentage';
+export interface MediaOptions {
+    provider?: Providers['mediaProvider'];
+    allowMediaSingle?: boolean | MediaSingleOptions;
+    allowMediaGroup?: boolean;
+    customDropzoneContainer?: HTMLElement;
+    customMediaPicker?: CustomMediaPicker;
+    allowResizing?: boolean;
+    allowResizingInTables?: boolean;
+    allowLinking?: boolean;
+    allowLazyLoading?: boolean;
+    allowBreakoutSnapPoints?: boolean;
+    allowAdvancedToolBarOptions?: boolean;
+    allowMediaSingleEditable?: boolean;
+    allowRemoteDimensionsFetch?: boolean;
+    allowDropzoneDropLine?: boolean;
+    allowMarkingUploadsAsIncomplete?: boolean;
+    fullWidthEnabled?: boolean;
+    uploadErrorHandler?: (state: MediaState) => void;
+    waitForMediaUpload?: boolean;
+    isCopyPasteEnabled?: boolean;
+    allowAltTextOnImages?: boolean;
+    enableDownloadButton?: boolean;
+    altTextValidator?: (value: string) => string[];
+    useForgePlugins?: boolean;
+    allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
+    alignLeftOnInsert?: boolean;
+    editorSelectionAPI?: EditorSelectionAPI;
+    featureFlags?: MediaFeatureFlags;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    allowCaptions?: boolean;
+}
+export interface MediaSingleOptions {
+    disableLayout?: boolean;
+}
+export interface MediaState {
+    id: string;
+    status?: MediaStateStatus;
+    fileName?: string;
+    fileSize?: number;
+    fileMimeType?: string;
+    collection?: string;
+    dimensions?: {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    scaleFactor?: number;
+    error?: {
+        name: string;
+        description: string;
+    };
+    /** still require to support Mobile */
+    publicId?: string;
+    contextId?: string;
+}
+export type Listener = (data: any) => void;
+export interface CustomMediaPicker {
+    on(event: string, cb: Listener): void;
+    removeAllListeners(event: any): void;
+    emit(event: string, data: any): void;
+    destroy(): void;
+    setUploadParams(uploadParams: UploadParams): void;
+}
+export type MobileUploadEndEventPayload = {
+    readonly file: MediaFile & {
+        readonly collectionName?: string;
+        readonly publicId?: string;
+    };
+};
+export type MediaEditorState = {
+    mediaClientConfig?: MediaClientConfig;
+    editor?: {
+        pos: number;
+        identifier: FileIdentifier;
+    };
+};
+export type MediaToolbarBaseConfig = {
+    title: string;
+    getDomRef?: (view: EditorView) => HTMLElement | undefined;
+    nodeType: NodeType | NodeType[];
+};
+export type MediaFloatingToolbarOptions = {
+    providerFactory?: ProviderFactory;
+    allowResizing?: boolean;
+    allowMediaInline?: boolean;
+    allowLinking?: boolean;
+    allowAdvancedToolBarOptions?: boolean;
+    allowResizingInTables?: boolean;
+    allowAltTextOnImages?: boolean;
+    altTextValidator?: (value: string) => string[];
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    fullWidthEnabled?: boolean;
+};
+export type MediaDecorationSpec = {
+    type: 'media';
+    selected: boolean;
+};
+export type ProsemirrorGetPosHandler = getPosHandlerNode;
+export type getPosHandler = getPosHandlerNode;
+export type getPosHandlerNode = () => number | undefined;
+export interface ReactNodeProps {
+    selected: boolean;
+}
+export type ForwardRef = (node: HTMLElement | null) => void;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,118 @@
+import type { ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
+import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { FileIdentifier } from '@atlaskit/media-client';
+import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { MediaFile, UploadParams } from '@atlaskit/media-picker/types';
+interface PlaceholderTextOptions {
+    allowInserting?: boolean;
+}
+export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | 'error' | 'mobile-upload-end';
+export type MediaSingleWithType = 'pixel' | 'percentage';
+export interface MediaOptions {
+    provider?: Providers['mediaProvider'];
+    allowMediaSingle?: boolean | MediaSingleOptions;
+    allowMediaGroup?: boolean;
+    customDropzoneContainer?: HTMLElement;
+    customMediaPicker?: CustomMediaPicker;
+    allowResizing?: boolean;
+    allowResizingInTables?: boolean;
+    allowLinking?: boolean;
+    allowLazyLoading?: boolean;
+    allowBreakoutSnapPoints?: boolean;
+    allowAdvancedToolBarOptions?: boolean;
+    allowMediaSingleEditable?: boolean;
+    allowRemoteDimensionsFetch?: boolean;
+    allowDropzoneDropLine?: boolean;
+    allowMarkingUploadsAsIncomplete?: boolean;
+    fullWidthEnabled?: boolean;
+    uploadErrorHandler?: (state: MediaState) => void;
+    waitForMediaUpload?: boolean;
+    isCopyPasteEnabled?: boolean;
+    allowAltTextOnImages?: boolean;
+    enableDownloadButton?: boolean;
+    altTextValidator?: (value: string) => string[];
+    useForgePlugins?: boolean;
+    allowTemplatePlaceholders?: boolean | PlaceholderTextOptions;
+    alignLeftOnInsert?: boolean;
+    editorSelectionAPI?: EditorSelectionAPI;
+    featureFlags?: MediaFeatureFlags;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    allowCaptions?: boolean;
+}
+export interface MediaSingleOptions {
+    disableLayout?: boolean;
+}
+export interface MediaState {
+    id: string;
+    status?: MediaStateStatus;
+    fileName?: string;
+    fileSize?: number;
+    fileMimeType?: string;
+    collection?: string;
+    dimensions?: {
+        width: number | undefined;
+        height: number | undefined;
+    };
+    scaleFactor?: number;
+    error?: {
+        name: string;
+        description: string;
+    };
+    /** still require to support Mobile */
+    publicId?: string;
+    contextId?: string;
+}
+export type Listener = (data: any) => void;
+export interface CustomMediaPicker {
+    on(event: string, cb: Listener): void;
+    removeAllListeners(event: any): void;
+    emit(event: string, data: any): void;
+    destroy(): void;
+    setUploadParams(uploadParams: UploadParams): void;
+}
+export type MobileUploadEndEventPayload = {
+    readonly file: MediaFile & {
+        readonly collectionName?: string;
+        readonly publicId?: string;
+    };
+};
+export type MediaEditorState = {
+    mediaClientConfig?: MediaClientConfig;
+    editor?: {
+        pos: number;
+        identifier: FileIdentifier;
+    };
+};
+export type MediaToolbarBaseConfig = {
+    title: string;
+    getDomRef?: (view: EditorView) => HTMLElement | undefined;
+    nodeType: NodeType | NodeType[];
+};
+export type MediaFloatingToolbarOptions = {
+    providerFactory?: ProviderFactory;
+    allowResizing?: boolean;
+    allowMediaInline?: boolean;
+    allowLinking?: boolean;
+    allowAdvancedToolBarOptions?: boolean;
+    allowResizingInTables?: boolean;
+    allowAltTextOnImages?: boolean;
+    altTextValidator?: (value: string) => string[];
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    fullWidthEnabled?: boolean;
+};
+export type MediaDecorationSpec = {
+    type: 'media';
+    selected: boolean;
+};
+export type ProsemirrorGetPosHandler = getPosHandlerNode;
+export type getPosHandler = getPosHandlerNode;
+export type getPosHandlerNode = () => number | undefined;
+export interface ReactNodeProps {
+    selected: boolean;
+}
+export type ForwardRef = (node: HTMLElement | null) => void;
+export {};

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@atlaskit/editor-plugin-media",
+  "version": "0.2.0",
+  "description": "Media plugin for @atlaskit/editor-core",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor: Lego",
+    "releaseModel": "continuous",
+    "singleton": true
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./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-palette": "1.5.1",
+    "@atlaskit/editor-plugin-width": "^0.2.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-filmstrip": "^47.0.0",
+    "@atlaskit/media-test-helpers": "^33.0.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": "*",
+    "@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": {
+    "@atlaskit/media-core": "^34.1.2",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-intl-next": "npm:react-intl@^5.18.1"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,36 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/editor-plugin-media"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "@atlaskit/media-core": "^34.1.2",
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,9 @@
+## API Report File for "@atlaskit/editor-plugin-media"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+// (No @packageDocumentation comment for this package)
+
+```

package/types/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-plugin-media/types",
+  "main": "../dist/cjs/types.js",
+  "module": "../dist/esm/types.js",
+  "module:es2019": "../dist/es2019/types.js",
+  "sideEffects": false,
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/types.d.ts"
+      ]
+    }
+  }
+}