@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/es2019/nodeviews/styles.js

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+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';
+export const figureWrapper = css`
+  margin: 0;
+`;
+const absoluteDiv = css`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+const forcedDimensions = css`
+  width: 100%;
+  position: relative;
+`;
+export const MediaCardWrapper = ({
+  dimensions,
+  children,
+  selected,
+  borderWidth = 0,
+  onContextMenu
+}) => {
+  const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
+  return jsx("div", {
+    "data-testid": "media-card-wrapper",
+    style: {
+      borderColor: `var(--custom-palette-color)`,
+      borderWidth: `${calculatedBorderWidth}px`,
+      borderStyle: 'solid',
+      borderRadius: `${calculatedBorderWidth * 2}px`
+    }
+  }, jsx("div", {
+    css: forcedDimensions,
+    style: {
+      paddingBottom: `${dimensions.height / dimensions.width * 100}%`
+    },
+    onContextMenuCapture: onContextMenu
+  }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
+    borderColor: `var(--custom-palette-color)`
+  }), jsx("div", {
+    css: absoluteDiv
+  }, children)));
+};

package/dist/es2019/nodeviews/types.js

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

package/dist/es2019/picker-facade.js

@@ -0,0 +1,146 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isImagePreview } from '@atlaskit/media-picker';
+export default class PickerFacade {
+  constructor(pickerType, config, pickerConfig, analyticsName) {
+    _defineProperty(this, "onDragListeners", []);
+    _defineProperty(this, "onStartListeners", []);
+    _defineProperty(this, "eventListeners", {});
+    _defineProperty(this, "handleUploadPreviewUpdate", event => {
+      const {
+        file,
+        preview
+      } = event;
+
+      //check if upload-error was called before upload-preview-update
+      const isErroredFile = this.erroredFiles.has(file.id);
+      const {
+        dimensions,
+        scaleFactor
+      } = isImagePreview(preview) ? preview : {
+        dimensions: undefined,
+        scaleFactor: undefined
+      };
+      const state = {
+        id: file.id,
+        fileName: file.name,
+        fileSize: file.size,
+        fileMimeType: file.type,
+        collection: file.collectionName,
+        dimensions,
+        scaleFactor,
+        status: isErroredFile ? 'error' : undefined
+      };
+      this.eventListeners[file.id] = [];
+      this.onStartListeners.forEach(cb => cb(state, evt => this.subscribeStateChanged(file, evt), this.analyticsName || this.pickerType));
+    });
+    _defineProperty(this, "subscribeStateChanged", (file, onStateChanged) => {
+      const subscribers = this.eventListeners[file.id];
+      if (!subscribers) {
+        return;
+      }
+      subscribers.push(onStateChanged);
+    });
+    _defineProperty(this, "handleUploadError", ({
+      error,
+      fileId
+    }) => {
+      const listeners = this.eventListeners[fileId];
+      this.erroredFiles.add(fileId);
+      if (!listeners) {
+        return;
+      }
+      listeners.forEach(cb => cb({
+        id: fileId,
+        status: 'error',
+        error: error && {
+          description: error.description,
+          name: error.name
+        }
+      }));
+
+      // remove listeners
+      delete this.eventListeners[fileId];
+    });
+    _defineProperty(this, "handleMobileUploadEnd", event => {
+      const {
+        file
+      } = event;
+      const listeners = this.eventListeners[file.id];
+      if (!listeners) {
+        return;
+      }
+      listeners.forEach(cb => cb({
+        id: file.id,
+        status: 'mobile-upload-end',
+        fileMimeType: file.type,
+        collection: file.collectionName,
+        publicId: file.publicId
+      }));
+    });
+    _defineProperty(this, "handleReady", event => {
+      const {
+        file
+      } = event;
+      const listeners = this.eventListeners[file.id];
+      if (!listeners) {
+        return;
+      }
+      listeners.forEach(cb => cb({
+        id: file.id,
+        status: 'ready'
+      }));
+
+      // remove listeners
+      delete this.eventListeners[file.id];
+    });
+    this.config = config;
+    this.pickerConfig = pickerConfig;
+    this.pickerType = pickerType;
+    this.analyticsName = analyticsName;
+    this.erroredFiles = new Set();
+  }
+  async init() {
+    let picker;
+    if (this.pickerType === 'customMediaPicker') {
+      picker = this.picker = this.pickerConfig;
+    }
+    if (!picker) {
+      return this;
+    }
+    picker.on('upload-preview-update', this.handleUploadPreviewUpdate);
+    picker.on('upload-end', this.handleReady);
+    picker.on('upload-error', this.handleUploadError);
+    picker.on('mobile-upload-end', this.handleMobileUploadEnd);
+    return this;
+  }
+  get type() {
+    return this.pickerType;
+  }
+  get mediaPicker() {
+    return this.picker;
+  }
+  destroy() {
+    const {
+      picker
+    } = this;
+    if (!picker) {
+      return;
+    }
+    picker.removeAllListeners('upload-preview-update');
+    picker.removeAllListeners('upload-end');
+    picker.removeAllListeners('upload-error');
+    this.onStartListeners = [];
+    this.onDragListeners = [];
+  }
+  setUploadParams(params) {
+    if (this.picker) {
+      this.picker.setUploadParams(params);
+    }
+  }
+  onNewMedia(cb) {
+    this.onStartListeners.push(cb);
+  }
+  onDrag(cb) {
+    this.onDragListeners.push(cb);
+  }
+}

package/dist/es2019/plugin.js

@@ -0,0 +1,284 @@
+import React from 'react';
+import { media, mediaGroup, mediaInline, mediaSingleSpec } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconImages } from '@atlaskit/editor-common/quick-insert';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { ReactMediaGroupNode } from './nodeviews/mediaGroup';
+import { ReactMediaInlineNode } from './nodeviews/mediaInline';
+import { ReactMediaNode } from './nodeviews/mediaNodeView';
+import { ReactMediaSingleNode } from './nodeviews/mediaSingle';
+import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
+import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
+import keymapPlugin from './pm-plugins/keymap';
+import keymapMediaSinglePlugin from './pm-plugins/keymap-media-single';
+import linkingPlugin from './pm-plugins/linking';
+import keymapLinkingPlugin from './pm-plugins/linking/keymap';
+import { stateKey } from './pm-plugins/main';
+import { createPlugin, stateKey as pluginKey } from './pm-plugins/main';
+import { floatingToolbar } from './toolbar';
+import { MediaPickerComponents } from './ui/MediaPicker';
+import ToolbarMedia from './ui/ToolbarMedia';
+import { insertMediaAsMediaSingle } from './utils/media-single';
+export { insertMediaSingleNode } from './utils/media-single';
+const MediaPickerFunctionalComponent = ({
+  api,
+  editorDomElement,
+  appearance
+}) => {
+  const {
+    mediaState
+  } = useSharedPluginState(api, ['media']);
+  if (!mediaState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MediaPickerComponents, {
+    editorDomElement: editorDomElement,
+    mediaState: mediaState,
+    appearance: appearance,
+    api: api
+  });
+};
+export const mediaPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$featureFlags;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'media',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return stateKey.getState(editorState) || null;
+    },
+    actions: {
+      insertMediaAsMediaSingle: (view, node, inputMethod) => {
+        var _api$analytics;
+        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    },
+    nodes() {
+      const {
+        allowMediaGroup = true,
+        allowMediaSingle = false,
+        allowCaptions,
+        featureFlags: mediaFeatureFlags
+      } = options || {};
+      const allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
+      const withCaption = getMediaFeatureFlag('captions', mediaFeatureFlags);
+
+      // temporary mapping - we will support captions feature flag until
+      // confluence removes the feature flag support in their code base and
+      // utilizes allowCaptions media prop instead
+      const mappedAllowCaptions = allowCaptions ? allowCaptions : withCaption;
+      const mediaSingleOption = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+        withCaption: mappedAllowCaptions,
+        withExtendedWidthTypes: true
+      } : {
+        withCaption: mappedAllowCaptions,
+        withExtendedWidthTypes: false
+      };
+      const mediaSingleNode = mediaSingleSpec(mediaSingleOption);
+      return [{
+        name: 'mediaGroup',
+        node: mediaGroup
+      }, {
+        name: 'mediaSingle',
+        node: mediaSingleNode
+      }, {
+        name: 'media',
+        node: media
+      }, {
+        name: 'mediaInline',
+        node: mediaInline
+      }].filter(node => {
+        if (node.name === 'mediaGroup') {
+          return allowMediaGroup;
+        }
+        if (node.name === 'mediaSingle') {
+          return allowMediaSingle;
+        }
+        if (node.name === 'mediaInline') {
+          return allowMediaInline;
+        }
+        return true;
+      });
+    },
+    pmPlugins() {
+      const pmPlugins = [{
+        name: 'media',
+        plugin: ({
+          schema,
+          dispatch,
+          getIntl,
+          eventDispatcher,
+          providerFactory,
+          errorReporter,
+          portalProviderAPI,
+          reactContext,
+          dispatchAnalyticsEvent
+        }) => {
+          return createPlugin(schema, {
+            providerFactory,
+            nodeViews: {
+              mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options),
+              media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api),
+              mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory, api)
+            },
+            errorReporter,
+            uploadErrorHandler: options && options.uploadErrorHandler,
+            waitForMediaUpload: options && options.waitForMediaUpload,
+            customDropzoneContainer: options && options.customDropzoneContainer,
+            customMediaPicker: options && options.customMediaPicker,
+            allowResizing: !!(options && options.allowResizing)
+          }, reactContext, getIntl, api, dispatch, options, featureFlags.newInsertionBehaviour);
+        }
+      }, {
+        name: 'mediaKeymap',
+        plugin: () => {
+          var _api$analytics2;
+          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
+        }
+      }];
+      if (options && options.allowMediaSingle) {
+        pmPlugins.push({
+          name: 'mediaSingleKeymap',
+          plugin: ({
+            schema
+          }) => keymapMediaSinglePlugin(schema)
+        });
+      }
+      if (options && options.allowAltTextOnImages) {
+        pmPlugins.push({
+          name: 'mediaAltText',
+          plugin: createMediaAltTextPlugin
+        });
+        pmPlugins.push({
+          name: 'mediaAltTextKeymap',
+          plugin: ({
+            schema
+          }) => {
+            var _api$analytics3;
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
+          }
+        });
+      }
+      if (options && options.allowLinking) {
+        pmPlugins.push({
+          name: 'mediaLinking',
+          plugin: ({
+            dispatch
+          }) => linkingPlugin(dispatch)
+        });
+        pmPlugins.push({
+          name: 'mediaLinkingKeymap',
+          plugin: ({
+            schema
+          }) => keymapLinkingPlugin(schema)
+        });
+      }
+      pmPlugins.push({
+        name: 'mediaSelectionHandler',
+        plugin: () => {
+          const mediaSelectionHandlerPlugin = new SafePlugin({
+            key: new PluginKey('mediaSelectionHandlerPlugin'),
+            props: {
+              handleScrollToSelection: view => {
+                const {
+                  state: {
+                    selection
+                  }
+                } = view;
+                if (!(selection instanceof NodeSelection) || selection.node.type.name !== 'media') {
+                  return false;
+                }
+                const {
+                  node,
+                  offset
+                } = view.domAtPos(selection.from);
+                if (
+                // Is the media element mounted already?
+                offset === node.childNodes.length) {
+                  // Media is not ready, so stop the scroll request
+                  return true;
+                }
+
+                // Media is ready, keep the scrolling request
+                return false;
+              }
+            }
+          });
+          return mediaSelectionHandlerPlugin;
+        }
+      });
+      return pmPlugins;
+    },
+    contentComponent({
+      editorView,
+      appearance
+    }) {
+      return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
+        editorDomElement: editorView.dom,
+        appearance: appearance,
+        api: api
+      });
+    },
+    secondaryToolbarComponent({
+      editorView,
+      eventDispatcher,
+      disabled
+    }) {
+      return /*#__PURE__*/React.createElement(ToolbarMedia, {
+        isDisabled: disabled,
+        isReducedSpacing: true,
+        api: api
+      });
+    },
+    pluginsOptions: {
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'media',
+        title: formatMessage(messages.mediaFiles),
+        description: formatMessage(messages.mediaFilesDescription),
+        priority: 400,
+        keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
+        icon: () => /*#__PURE__*/React.createElement(IconImages, null),
+        action(insert, state) {
+          var _api$analytics4;
+          const pluginState = pluginKey.getState(state);
+          pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
+          const tr = insert('');
+          api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.attachAnalyticsEvent({
+            action: ACTION.OPENED,
+            actionSubject: ACTION_SUBJECT.PICKER,
+            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: EVENT_TYPE.UI
+          })(tr);
+          return tr;
+        }
+      }],
+      floatingToolbar: (state, intl, providerFactory) => floatingToolbar(state, intl, {
+        providerFactory,
+        allowMediaInline: options && getMediaFeatureFlag('mediaInline', options.featureFlags),
+        allowResizing: options && options.allowResizing,
+        allowResizingInTables: options && options.allowResizingInTables,
+        allowLinking: options && options.allowLinking,
+        allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
+        allowAltTextOnImages: options && options.allowAltTextOnImages,
+        altTextValidator: options && options.altTextValidator,
+        fullWidthEnabled: options && options.fullWidthEnabled
+      }, api)
+    }
+  };
+};

package/dist/es2019/pm-plugins/alt-text/actions.js

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

package/dist/es2019/pm-plugins/alt-text/commands.js

@@ -0,0 +1,42 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { getMediaNodeFromSelection, isSelectionMediaSingleNode } from '../../utils/media-common';
+import { createCommand } from './index';
+const createCommandWithAnalytics = (actionType, action, transform) => {
+  return editorAnalyticsAPI => withAnalytics(editorAnalyticsAPI, {
+    action: actionType,
+    actionSubject: ACTION_SUBJECT.MEDIA,
+    actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
+    eventType: EVENT_TYPE.TRACK
+  })(createCommand(action, transform));
+};
+export const closeMediaAltTextMenu = createCommand(state => {
+  if (isSelectionMediaSingleNode(state)) {
+    return {
+      type: 'closeMediaAltTextMenu'
+    };
+  }
+  return false;
+});
+export const openMediaAltTextMenu = createCommandWithAnalytics(ACTION.OPENED, state => {
+  if (isSelectionMediaSingleNode(state)) {
+    return {
+      type: 'openMediaAltTextMenu'
+    };
+  }
+  return false;
+}, tr => tr.setMeta('scrollIntoView', false));
+export const updateAltText = newAltText => createCommand(state => isSelectionMediaSingleNode(state) ? {
+  type: 'updateAltText'
+} : false, (tr, state) => {
+  const mediaNode = getMediaNodeFromSelection(state);
+  const pos = tr.selection.from + 1;
+  if (mediaNode) {
+    tr.setMeta('scrollIntoView', false);
+    tr.setNodeMarkup(pos, undefined, {
+      ...mediaNode.attrs,
+      alt: newAltText
+    });
+  }
+  return tr;
+});

package/dist/es2019/pm-plugins/alt-text/index.js

@@ -0,0 +1,33 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
+export const pluginKey = new PluginKey('mediaAltTextPlugin');
+const {
+  createPluginState,
+  createCommand,
+  getPluginState
+} = pluginFactory(pluginKey, reducer, {
+  onSelectionChanged: (tr, newState) => {
+    // dont close alt text for undo/redo transactions (if it comes from prosemirror-history)
+    if (tr.getMeta(pmHistoryPluginKey)) {
+      return newState;
+    }
+    return {
+      isAltTextEditorOpen: false
+    };
+  }
+});
+export const createPlugin = ({
+  dispatch,
+  providerFactory
+}) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      isAltTextEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};
+export { createCommand, getPluginState };

package/dist/es2019/pm-plugins/alt-text/keymap.js

@@ -0,0 +1,9 @@
+import { addAltText, bindKeymapWithCommand, escape } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { closeMediaAltTextMenu, openMediaAltTextMenu } from './commands';
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
+  const list = {};
+  bindKeymapWithCommand(addAltText.common, openMediaAltTextMenu(editorAnalyticsAPI), list);
+  bindKeymapWithCommand(escape.common, closeMediaAltTextMenu, list);
+  return keymap(list);
+}

package/dist/es2019/pm-plugins/alt-text/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  altText: {
+    id: 'fabric.editor.addAltText',
+    defaultMessage: 'Alt text',
+    description: 'Add an alt text for this image'
+  },
+  editAltText: {
+    id: 'fabric.editor.editAltText',
+    defaultMessage: 'Edit alt text',
+    description: 'Edit an alt text for this image'
+  },
+  back: {
+    id: 'fabric.editor.closeAltTextEdit',
+    defaultMessage: 'Back',
+    description: 'Back to toolbar'
+  },
+  clear: {
+    id: 'fabric.editor.clearAltTextEdit',
+    defaultMessage: 'Clear alt text',
+    description: 'Clear alt text'
+  },
+  placeholder: {
+    id: 'fabric.editor.placeholderAltText',
+    defaultMessage: 'Describe this image with alt text',
+    description: 'Describe this image with alt text'
+  },
+  supportText: {
+    id: 'fabric.editor.supportAltText',
+    defaultMessage: 'Alt text is useful for people using screen readers because of visual limitations.',
+    description: 'Alt text is useful for people using screen readers because of visual limitations.'
+  },
+  validationMessage: {
+    id: 'fabric.editor.alttext.validation',
+    defaultMessage: 'Please remove any special characters in alt text.',
+    description: 'Please remove any special characters in alt text. '
+  }
+});

package/dist/es2019/pm-plugins/alt-text/reducer.js

@@ -0,0 +1,26 @@
+export default ((state, action) => {
+  switch (action.type) {
+    case 'updateAltText':
+      {
+        return {
+          ...state
+        };
+      }
+    case 'openMediaAltTextMenu':
+      {
+        return {
+          ...state,
+          isAltTextEditorOpen: true
+        };
+      }
+    case 'closeMediaAltTextMenu':
+      {
+        return {
+          ...state,
+          isAltTextEditorOpen: false
+        };
+      }
+    default:
+      return state;
+  }
+});

package/dist/es2019/pm-plugins/alt-text/types.js

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