@atlaskit/editor-plugin-media 0.2.0 → 0.3.0

package/dist/esm/pm-plugins/media-editor-plugin-factory.js

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

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

@@ -0,0 +1,94 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+export var MediaTaskManager = /*#__PURE__*/_createClass(function MediaTaskManager() {
+  var _this = this;
+  _classCallCheck(this, MediaTaskManager);
+  _defineProperty(this, "pendingTask", Promise.resolve(null));
+  _defineProperty(this, "taskMap", new Map());
+  _defineProperty(this, "cancelPendingTask", function (id) {
+    var task = _this.taskMap.get(id);
+    if (task && !task.cancelController.signal.aborted) {
+      task.cancelController.abort();
+    }
+  });
+  _defineProperty(this, "waitForPendingTasks", /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(timeout, lastTask) {
+      var chainedPromise, rejectTimeout, timeoutPromise;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(lastTask && _this.pendingTask === lastTask)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", lastTask);
+          case 2:
+            chainedPromise = _this.pendingTask.then(function () {
+              return (
+                // 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) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return", chainedPromise);
+          case 5:
+            timeoutPromise = new Promise(function (_resolve, reject) {
+              rejectTimeout = window.setTimeout(function () {
+                return reject(new Error("Media operations did not finish in ".concat(timeout, " ms")));
+              }, timeout);
+            });
+            return _context.abrupt("return", Promise.race([timeoutPromise, chainedPromise.then(function (value) {
+              clearTimeout(rejectTimeout);
+              return value;
+            })]));
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }());
+  _defineProperty(this, "resumePendingTask", function (id) {
+    var mediaTask = _this.taskMap.get(id);
+    if (mediaTask && mediaTask.cancelController.signal.aborted) {
+      _this.addPendingTask(mediaTask.task, id);
+    }
+  });
+  _defineProperty(this, "addPendingTask", function (task, id) {
+    var currentTask = task;
+    if (id) {
+      var cancelController = new AbortController();
+      var signal = cancelController.signal;
+      _this.taskMap.set(id, {
+        task: task,
+        cancelController: cancelController
+      });
+      currentTask = new Promise(function (resolve) {
+        task.then(resolve, resolve).finally(function () {
+          _this.taskMap.delete(id);
+        });
+        signal.onabort = function () {
+          resolve(null);
+        };
+      });
+    }
+
+    // Chain the previous promise with a new one for this media item
+    var currentPendingTask = _this.pendingTask;
+    var pendingPromise = function pendingPromise() {
+      return currentPendingTask;
+    };
+    _this.pendingTask = currentTask.then(pendingPromise, pendingPromise);
+    return _this.pendingTask;
+  });
+});

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

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

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

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

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

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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';
+var testId = 'alt-text-edit-button';
+export var altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
+  var mediaNode = getMediaNodeFromSelection(state);
+  var message = mediaNode && mediaNode.attrs.alt ? messages.editAltText : messages.altText;
+  var title = intl.formatMessage(message);
+  return {
+    title: title,
+    id: 'editor.media.altText',
+    type: 'button',
+    onClick: openMediaAltTextMenu(editorAnalyticsAPI),
+    showTitle: true,
+    testId: testId,
+    tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: title,
+      keymap: addAltText
+    })
+  };
+};
+export var altTextEditComponent = function altTextEditComponent(options) {
+  return {
+    type: 'custom',
+    fallback: [],
+    disableArrowNavigation: true,
+    render: function render(view, idx) {
+      if (!view) {
+        return null;
+      }
+      var 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.
+       */
+      var handleEsc = function handleEsc() {
+        var _options$forceFocusSe;
+        var tr = view.state.tr,
+          dispatch = view.dispatch;
+        var newTr = options === null || options === void 0 || (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, "[data-testid=\"".concat(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 var getAltTextToolbar = function getAltTextToolbar(toolbarBaseConfig, options) {
+  return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
+    width: CONTAINER_WIDTH_IN_PX,
+    className: ClassNames.FLOATING_TOOLBAR_COMPONENT,
+    items: [altTextEditComponent(options)]
+  });
+};

package/dist/esm/toolbar/commands.js

@@ -0,0 +1,229 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 var DEFAULT_BORDER_COLOR = '#091e4224';
+export var DEFAULT_BORDER_SIZE = 2;
+export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var _state$schema$nodes = state.schema.nodes,
+      media = _state$schema$nodes.media,
+      mediaInline = _state$schema$nodes.mediaInline,
+      mediaGroup = _state$schema$nodes.mediaGroup;
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+    if (!selectedNode) {
+      return false;
+    }
+    var _selectedNode$attrs = selectedNode.attrs,
+      id = _selectedNode$attrs.id,
+      type = _selectedNode$attrs.type,
+      collection = _selectedNode$attrs.collection;
+    var mediaNode = media.createChecked({
+      id: id,
+      type: type,
+      collection: collection
+    });
+    var group = mediaGroup.createChecked({}, mediaNode);
+    var nodePos = state.tr.doc.resolve(state.selection.from).end();
+    var tr = state.tr;
+    tr = removeSelectedNode(tr);
+    tr = safeInsert(group, nodePos, true)(tr);
+    if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === 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 var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var _state$schema$nodes2 = state.schema.nodes,
+      media = _state$schema$nodes2.media,
+      mediaInline = _state$schema$nodes2.mediaInline,
+      paragraph = _state$schema$nodes2.paragraph;
+    var 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;
+    }
+    var mediaInlineNode = mediaInline.create({
+      id: selectedNode.attrs.id,
+      collection: selectedNode.attrs.collection
+    });
+    var space = state.schema.text(' ');
+    var content = Fragment.from([mediaInlineNode, space]);
+    var node = paragraph.createChecked({}, content);
+    var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
+    var tr = removeMediaGroupNode(state);
+    tr = safeInsert(node, nodePos, false)(tr);
+    if (dispatch) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === 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 var removeInlineCard = function removeInlineCard(state, dispatch) {
+  if (isNodeSelection(state.selection)) {
+    if (dispatch) {
+      dispatch(removeSelectedNode(state.tr));
+    }
+    return true;
+  }
+  return false;
+};
+export var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var nodeWithPos = currentMediaNodeWithPos(state);
+    if (!nodeWithPos) {
+      return false;
+    }
+    var node = nodeWithPos.node,
+      pos = nodeWithPos.pos;
+    var borderMark = node.marks.find(function (m) {
+      return m.type.name === 'border';
+    });
+    var marks = node.marks.filter(function (m) {
+      return m.type.name !== 'border';
+    }).concat(borderMark ? [] : state.schema.marks.border.create({
+      color: DEFAULT_BORDER_COLOR,
+      size: DEFAULT_BORDER_SIZE
+    }));
+    var 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 || 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 || 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 var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
+  return function (attrs) {
+    return function (state, dispatch) {
+      var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
+      var nodeWithPos = currentMediaNodeWithPos(state);
+      if (!nodeWithPos) {
+        return false;
+      }
+      var node = nodeWithPos.node,
+        pos = nodeWithPos.pos;
+      var borderMark = (_node$marks$find = node.marks.find(function (m) {
+        return m.type.name === 'border';
+      })) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
+      var 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;
+      var 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;
+      var marks = node.marks.filter(function (m) {
+        return m.type.name !== 'border';
+      }).concat(state.schema.marks.border.create({
+        color: color,
+        size: size
+      }));
+      var 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 || 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 var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
+  return function (width, validation, layout) {
+    return function (state, dispatch) {
+      var selectedMediaSingleNode = getSelectedMediaSingle(state);
+      if (!selectedMediaSingleNode) {
+        return false;
+      }
+      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+        width: width,
+        widthType: 'pixel',
+        layout: layout
+      }));
+      tr.setMeta('scrollIntoView', false);
+      tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+      var parentNodeType = $pos ? $pos.parent.type.name : undefined;
+      var payload = getMediaInputResizeAnalyticsEvent('mediaSingle', {
+        width: width,
+        layout: layout,
+        validation: validation,
+        parentNode: parentNodeType
+      });
+      if (payload) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      }
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};

package/dist/esm/toolbar/filePreviewItem.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 var FilePreviewItem = function FilePreviewItem(_ref) {
+  var mediaPluginState = _ref.mediaPluginState,
+    intl = _ref.intl;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMediaViewerVisible = _useState2[0],
+    setMediaViewerVisible = _useState2[1];
+  var openMediaViewer = function openMediaViewer() {
+    setMediaViewerVisible(true);
+  };
+  var onMediaViewerClose = function onMediaViewerClose() {
+    setMediaViewerVisible(false);
+  };
+  var renderMediaViewer = function renderMediaViewer() {
+    if (isMediaViewerVisible) {
+      var selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
+      if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
+        var id = selectedNodeAttrs.id,
+          _selectedNodeAttrs$co = selectedNodeAttrs.collection,
+          collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
+        var identifier = {
+          id: 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;
+  };
+  var mediaViewer = renderMediaViewer();
+  var 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/esm/toolbar/imageBorder.js

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