@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

package/dist/es2019/pm-plugins/mediaTaskManager.js

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class MediaTaskManager {
+  constructor() {
+    _defineProperty(this, "pendingTask", Promise.resolve(null));
+    _defineProperty(this, "taskMap", new Map());
+    _defineProperty(this, "cancelPendingTask", id => {
+      const task = this.taskMap.get(id);
+      if (task && !task.cancelController.signal.aborted) {
+        task.cancelController.abort();
+      }
+    });
+    _defineProperty(this, "waitForPendingTasks", async (timeout, lastTask) => {
+      if (lastTask && this.pendingTask === lastTask) {
+        return lastTask;
+      }
+      const chainedPromise = this.pendingTask.then(() =>
+      // Call ourselves to make sure that no new pending tasks have been
+      // added before the current promise has resolved.
+      this.waitForPendingTasks(undefined, this.pendingTask));
+      if (!timeout) {
+        return chainedPromise;
+      }
+      let rejectTimeout;
+      const timeoutPromise = new Promise((_resolve, reject) => {
+        rejectTimeout = window.setTimeout(() => reject(new Error(`Media operations did not finish in ${timeout} ms`)), timeout);
+      });
+      return Promise.race([timeoutPromise, chainedPromise.then(value => {
+        clearTimeout(rejectTimeout);
+        return value;
+      })]);
+    });
+    _defineProperty(this, "resumePendingTask", id => {
+      const mediaTask = this.taskMap.get(id);
+      if (mediaTask && mediaTask.cancelController.signal.aborted) {
+        this.addPendingTask(mediaTask.task, id);
+      }
+    });
+    _defineProperty(this, "addPendingTask", (task, id) => {
+      let currentTask = task;
+      if (id) {
+        const cancelController = new AbortController();
+        const signal = cancelController.signal;
+        this.taskMap.set(id, {
+          task,
+          cancelController
+        });
+        currentTask = new Promise(resolve => {
+          task.then(resolve, resolve).finally(() => {
+            this.taskMap.delete(id);
+          });
+          signal.onabort = () => {
+            resolve(null);
+          };
+        });
+      }
+
+      // Chain the previous promise with a new one for this media item
+      const currentPendingTask = this.pendingTask;
+      const pendingPromise = () => currentPendingTask;
+      this.pendingTask = currentTask.then(pendingPromise, pendingPromise);
+      return this.pendingTask;
+    });
+  }
+}

package/dist/es2019/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const stateKey = new PluginKey('mediaPlugin');

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

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

package/dist/es2019/toolbar/alt-text.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { addAltText, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/styles';
+import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
+import { messages } from '../pm-plugins/alt-text/messages';
+import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
+import { getMediaNodeFromSelection } from '../utils/media-common';
+const testId = 'alt-text-edit-button';
+export const altTextButton = (intl, state, editorAnalyticsAPI) => {
+  const mediaNode = getMediaNodeFromSelection(state);
+  const message = mediaNode && mediaNode.attrs.alt ? messages.editAltText : messages.altText;
+  const title = intl.formatMessage(message);
+  return {
+    title,
+    id: 'editor.media.altText',
+    type: 'button',
+    onClick: openMediaAltTextMenu(editorAnalyticsAPI),
+    showTitle: true,
+    testId,
+    tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: title,
+      keymap: addAltText
+    })
+  };
+};
+export const altTextEditComponent = options => {
+  return {
+    type: 'custom',
+    fallback: [],
+    disableArrowNavigation: true,
+    render: (view, idx) => {
+      if (!view) {
+        return null;
+      }
+      const mediaNode = getMediaNodeFromSelection(view.state);
+      if (!mediaNode) {
+        return null;
+      }
+      /** Focus should move to the 'Alt text' button when the toolbar closes
+       * and not close the floating toolbar.
+       */
+      const handleEsc = () => {
+        var _options$forceFocusSe;
+        const {
+          state: {
+            tr
+          },
+          dispatch
+        } = view;
+        const newTr = options === null || options === void 0 ? void 0 : (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, `[data-testid="${testId}"]`)(tr);
+        if (newTr) {
+          dispatch(newTr);
+        }
+      };
+      return /*#__PURE__*/React.createElement(AltTextEdit, {
+        view: view,
+        key: idx,
+        value: mediaNode.attrs.alt,
+        altTextValidator: options && options.altTextValidator,
+        onEscape: handleEsc
+      });
+    }
+  };
+};
+export const getAltTextToolbar = (toolbarBaseConfig, options) => {
+  return {
+    ...toolbarBaseConfig,
+    width: CONTAINER_WIDTH_IN_PX,
+    className: ClassNames.FLOATING_TOOLBAR_COMPONENT,
+    items: [altTextEditComponent(options)]
+  };
+};

package/dist/es2019/toolbar/commands.js

@@ -0,0 +1,212 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
+import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+export const DEFAULT_BORDER_COLOR = '#091e4224';
+export const DEFAULT_BORDER_SIZE = 2;
+export const changeInlineToMediaCard = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    mediaGroup
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+  if (!selectedNode) {
+    return false;
+  }
+  const {
+    id,
+    type,
+    collection
+  } = selectedNode.attrs;
+  const mediaNode = media.createChecked({
+    id,
+    type,
+    collection
+  });
+  const group = mediaGroup.createChecked({}, mediaNode);
+  const nodePos = state.tr.doc.resolve(state.selection.from).end();
+  let tr = state.tr;
+  tr = removeSelectedNode(tr);
+  tr = safeInsert(group, nodePos, true)(tr);
+  if (dispatch) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: ACTION_SUBJECT_ID.MEDIA_GROUP,
+        previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
+      }
+    })(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const changeMediaCardToInline = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    paragraph
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  // @ts-ignore - [unblock prosemirror bump] redundant check comparing boolean to media
+  if (!selectedNode || !selectedNode.type === media) {
+    return false;
+  }
+  const mediaInlineNode = mediaInline.create({
+    id: selectedNode.attrs.id,
+    collection: selectedNode.attrs.collection
+  });
+  const space = state.schema.text(' ');
+  let content = Fragment.from([mediaInlineNode, space]);
+  const node = paragraph.createChecked({}, content);
+  const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+  let tr = removeMediaGroupNode(state);
+  tr = safeInsert(node, nodePos, false)(tr);
+  if (dispatch) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.CHANGED_TYPE,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        newType: ACTION_SUBJECT_ID.MEDIA_INLINE,
+        previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
+      }
+    })(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const removeInlineCard = (state, dispatch) => {
+  if (isNodeSelection(state.selection)) {
+    if (dispatch) {
+      dispatch(removeSelectedNode(state.tr));
+    }
+    return true;
+  }
+  return false;
+};
+export const toggleBorderMark = editorAnalyticsAPI => (state, dispatch) => {
+  const nodeWithPos = currentMediaNodeWithPos(state);
+  if (!nodeWithPos) {
+    return false;
+  }
+  const {
+    node,
+    pos
+  } = nodeWithPos;
+  const borderMark = node.marks.find(m => m.type.name === 'border');
+  const marks = node.marks.filter(m => m.type.name !== 'border').concat(borderMark ? [] : state.schema.marks.border.create({
+    color: DEFAULT_BORDER_COLOR,
+    size: DEFAULT_BORDER_SIZE
+  }));
+  const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+  tr.setMeta('scrollIntoView', false);
+  if (state.selection instanceof NodeSelection) {
+    if (state.selection.$anchor.pos === state.selection.from) {
+      tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    }
+  }
+  if (dispatch) {
+    if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.DELETED,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: ACTION_SUBJECT_ID.BORDER,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          previousColor: borderMark.attrs.color,
+          previousSize: borderMark.attrs.size
+        }
+      })(tr);
+    } else {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.ADDED,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: ACTION_SUBJECT_ID.BORDER,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          color: DEFAULT_BORDER_COLOR,
+          size: DEFAULT_BORDER_SIZE
+        }
+      })(tr);
+    }
+    dispatch(tr);
+  }
+  return true;
+};
+export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) => {
+  var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
+  const nodeWithPos = currentMediaNodeWithPos(state);
+  if (!nodeWithPos) {
+    return false;
+  }
+  const {
+    node,
+    pos
+  } = nodeWithPos;
+  const borderMark = (_node$marks$find = node.marks.find(m => m.type.name === 'border')) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
+  const color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
+  const size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
+  const marks = node.marks.filter(m => m.type.name !== 'border').concat(state.schema.marks.border.create({
+    color,
+    size
+  }));
+  const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
+  tr.setMeta('scrollIntoView', false);
+  if (state.selection instanceof NodeSelection) {
+    if (state.selection.$anchor.pos === state.selection.from) {
+      tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    }
+  }
+  if (dispatch) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.UPDATED,
+      actionSubject: ACTION_SUBJECT.MEDIA,
+      actionSubjectId: ACTION_SUBJECT_ID.BORDER,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
+        previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
+        newColor: color,
+        newSize: size
+      }
+    })(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, layout) => (state, dispatch) => {
+  const selectedMediaSingleNode = getSelectedMediaSingle(state);
+  if (!selectedMediaSingleNode) {
+    return false;
+  }
+  const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+    ...selectedMediaSingleNode.node.attrs,
+    width,
+    widthType: 'pixel',
+    layout
+  });
+  tr.setMeta('scrollIntoView', false);
+  tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+  const $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+  const parentNodeType = $pos ? $pos.parent.type.name : undefined;
+  const payload = getMediaInputResizeAnalyticsEvent('mediaSingle', {
+    width,
+    layout,
+    validation,
+    parentNode: parentNodeType
+  });
+  if (payload) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+  }
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};

package/dist/es2019/toolbar/filePreviewItem.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import { messages } from '@atlaskit/media-ui';
+import { MediaViewer } from '@atlaskit/media-viewer';
+import { getSelectedMediaContainerNodeAttrs } from './utils';
+export const FilePreviewItem = ({
+  mediaPluginState,
+  intl
+}) => {
+  const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
+  const openMediaViewer = () => {
+    setMediaViewerVisible(true);
+  };
+  const onMediaViewerClose = () => {
+    setMediaViewerVisible(false);
+  };
+  const renderMediaViewer = () => {
+    if (isMediaViewerVisible) {
+      const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+        const {
+          id,
+          collection = ''
+        } = selectedNodeAttrs;
+        const identifier = {
+          id,
+          mediaItemType: 'file',
+          collectionName: collection
+        };
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
+          collectionName: collection,
+          items: [],
+          mediaClientConfig: mediaPluginState.mediaClientConfig,
+          selectedItem: identifier,
+          onClose: onMediaViewerClose
+        }), document.body);
+      }
+    }
+    return null;
+  };
+  const mediaViewer = renderMediaViewer();
+  const tooltipContent = intl.formatMessage(messages.preview);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
+    testId: "file-preview-toolbar-button",
+    key: "editor.media.card.preview",
+    onClick: openMediaViewer,
+    icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
+      label: "file preview"
+    }),
+    tooltipContent: tooltipContent
+  }), mediaViewer);
+};

package/dist/es2019/toolbar/imageBorder.js

@@ -0,0 +1,15 @@
+import { currentMediaNodeWithPos } from '../utils/current-media-node';
+export function shouldShowImageBorder(editorState) {
+  const border = editorState.schema.marks.border;
+  if (!border) {
+    return false;
+  }
+  const nodeWithPos = currentMediaNodeWithPos(editorState);
+  if (!nodeWithPos) {
+    return false;
+  }
+  let {
+    parent
+  } = editorState.doc.resolve(nodeWithPos.pos);
+  return parent && parent.type.allowsMarkType(border);
+}