@atlaskit/editor-core 150.0.3 → 151.1.2

package/dist/es2019/plugins/media/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { media, mediaGroup, mediaSingle, mediaSingleWithCaption } from '@atlaskit/adf-schema';
+import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { createPlugin as createMediaEditorPlugin } from './pm-plugins/media-editor';
@@ -21,6 +21,7 @@ import MediaEditor from './ui/MediaEditor';
 import { MediaPickerComponents } from './ui/MediaPicker';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { ReactMediaNode } from './nodeviews/mediaNodeView';
+import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 export { insertMediaSingleNode } from './utils/media-single';
 
 const mediaPlugin = options => ({
@@ -30,6 +31,7 @@ const mediaPlugin = options => ({
     const {
       allowMediaGroup = true,
       allowMediaSingle = false,
+      allowMediaInline = false,
       featureFlags
     } = options || {};
     const captions = getMediaFeatureFlag('captions', featureFlags);
@@ -43,6 +45,9 @@ const mediaPlugin = options => ({
     }, {
       name: 'media',
       node: media
+    }, {
+      name: 'mediaInline',
+      node: mediaInline
     }].filter(node => {
       if (node.name === 'mediaGroup') {
         return allowMediaGroup;
@@ -52,6 +57,10 @@ const mediaPlugin = options => ({
         return allowMediaSingle;
       }
 
+      if (node.name === 'mediaInline') {
+        return allowMediaInline;
+      }
+
       return true;
     });
   },
@@ -73,7 +82,8 @@ const mediaPlugin = options => ({
         nodeViews: {
           mediaGroup: ReactMediaGroupNode(portalProviderAPI, eventDispatcher, providerFactory, options),
           mediaSingle: ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, dispatchAnalyticsEvent, options),
-          media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options)
+          media: ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options),
+          mediaInline: ReactMediaInlineNode(portalProviderAPI, eventDispatcher, providerFactory)
         },
         errorReporter,
         uploadErrorHandler: options && options.uploadErrorHandler,
@@ -197,8 +207,7 @@ const mediaPlugin = options => ({
       action(insert, state) {
         const pluginState = pluginKey.getState(state);
         pluginState.showMediaPicker();
-        const tr = insert('');
-        return addAnalytics(state, tr, {
+        return addAnalytics(state, insert(''), {
           action: ACTION.OPENED,
           actionSubject: ACTION_SUBJECT.PICKER,
           actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,

package/dist/es2019/plugins/media/nodeviews/mediaGroup.js

@@ -111,6 +111,21 @@ export default class MediaGroup extends React.Component {
         // We declared this to get a fresh position every time
         const getNodePos = () => {
           return getPos() + idx + 1;
+        }; // Media Inline creates a floating toolbar with the same options, excludes these options if enabled
+
+
+        const mediaInlineOptions = (allowMediaInline = false) => {
+          if (!allowMediaInline) {
+            return {
+              shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
+              actions: [{
+                handler: disabled ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
+                icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
+                  label: "delete"
+                })
+              }]
+            };
+          }
         };
 
         return {
@@ -120,13 +135,7 @@ export default class MediaGroup extends React.Component {
           onClick: () => {
             setNodeSelection(this.props.view, getNodePos());
           },
-          shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
-          actions: [{
-            handler: disabled ? () => {} : this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-            icon: /*#__PURE__*/React.createElement(EditorCloseIcon, {
-              label: "delete"
-            })
-          }]
+          ...mediaInlineOptions(mediaOptions.allowMediaInline)
         };
       });
       return /*#__PURE__*/React.createElement(Filmstrip, {

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { ReactNodeView } from '../../../nodeviews/';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export const MediaInline = props => {
+  const [viewMediaClientConfig, setViewMediaClientConfig] = useState({});
+  useEffect(() => {
+    updateViewMediaClientConfig(props);
+  }, [props]);
+
+  const updateViewMediaClientConfig = async props => {
+    const mediaProvider = await props.mediaProvider;
+
+    if (mediaProvider) {
+      const viewMediaClientConfig = mediaProvider.viewMediaClientConfig;
+      setViewMediaClientConfig(viewMediaClientConfig);
+    }
+  };
+
+  const {
+    id,
+    collection
+  } = props.node.attrs;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: identifier,
+    mediaClientConfig: viewMediaClientConfig
+  });
+};
+export class MediaInlineNodeView extends ReactNodeView {
+  createDomRef() {
+    const domRef = document.createElement('span');
+    domRef.contentEditable = 'false';
+    return domRef;
+  }
+
+  getContentDOM() {
+    const dom = document.createElement('span');
+    return {
+      dom
+    };
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  viewShouldUpdate(nextNode) {
+    if (this.node.attrs !== nextNode.attrs) {
+      return true;
+    }
+
+    return false;
+  }
+
+  render(props) {
+    const {
+      providerFactory
+    } = props;
+    return /*#__PURE__*/React.createElement(WithProviders, {
+      providers: ['mediaProvider'],
+      providerFactory: providerFactory,
+      renderNode: ({
+        mediaProvider
+      }) => {
+        if (!mediaProvider) {
+          return null;
+        }
+
+        return /*#__PURE__*/React.createElement(MediaInline, {
+          identifier: this.node.attrs.id,
+          mediaProvider: mediaProvider,
+          node: this.node
+        });
+      }
+    });
+  }
+
+}
+export const ReactMediaInlineNode = (portalProviderAPI, eventDispatcher, providerFactory) => (node, view, getPos) => {
+  return new MediaInlineNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
+    providerFactory
+  }).init();
+};

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -9,14 +9,15 @@ import assert from 'assert';
 import { findDomRefAtPos, isNodeSelection } from 'prosemirror-utils';
 import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
 import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { insertMediaGroupNode } from '../utils/media-files';
-import { removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { insertMediaGroupNode, insertMediaInlineNode, canInsertMediaInline } from '../utils/media-files';
+import { isInsidePotentialEmptyParagraph, removeMediaNode, splitMediaGroup } from '../utils/media-common';
 import * as helpers from '../commands/helpers';
 import { updateMediaNodeAttrs } from '../commands/helpers';
 import { stateKey } from './plugin-key';
 import PickerFacade from '../picker-facade';
 import { INPUT_METHOD } from '../../analytics/types';
 import { isImage } from '../utils/is-image';
+import { isInEmptyLine } from '../../../utils/document';
 export { stateKey } from './plugin-key';
 
 const createDropPlaceholder = allowDropLine => {
@@ -60,7 +61,7 @@ export class MediaPluginStateImplementation {
 
     _defineProperty(this, "removeOnCloseListener", () => {});
 
-    _defineProperty(this, "onPopupToogleCallback", () => {});
+    _defineProperty(this, "onPopupToggleCallback", () => {});
 
     _defineProperty(this, "pickers", []);
 
@@ -151,12 +152,13 @@ export class MediaPluginStateImplementation {
       var _this$mediaOptions;
 
       const {
+        mediaInline,
         mediaSingle,
         media
       } = this.view.state.schema.nodes;
 
       if ((_this$mediaOptions = this.mediaOptions) !== null && _this$mediaOptions !== void 0 && _this$mediaOptions.allowMediaInline) {
-        return type === mediaSingle || type === media;
+        return type === mediaSingle || type === media || type === mediaInline;
       }
 
       return type === mediaSingle;
@@ -165,6 +167,11 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "hasUserAuthProvider", () => !!this.uploadMediaClientConfig && !!this.uploadMediaClientConfig.userAuthProvider);
 
     _defineProperty(this, "insertFile", (mediaState, onMediaStateChanged, pickerType) => {
+      var _this$mediaOptions2;
+
+      const {
+        state
+      } = this.view;
       const mediaStateWithContext = { ...mediaState,
         contextId: this.contextIdentifierProvider ? this.contextIdentifierProvider.objectId : undefined
       };
@@ -185,8 +192,10 @@ export class MediaPluginStateImplementation {
         });
       }
 
-      if (isMediaSingle(this.view.state.schema, mediaStateWithContext.fileMimeType)) {
+      if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
         insertMediaSingleNode(this.view, mediaStateWithContext, this.getInputMethod(pickerType), collection, this.mediaOptions && this.mediaOptions.alignLeftOnInsert);
+      } else if ((_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline && !isInEmptyLine(state) && !isInsidePotentialEmptyParagraph(state) && canInsertMediaInline(state)) {
+        insertMediaInlineNode(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
       } else {
         insertMediaGroupNode(this.view, [mediaStateWithContext], collection, this.getInputMethod(pickerType));
       } // do events when media state changes
@@ -234,7 +243,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "splitMediaGroup", () => splitMediaGroup(this.view));
 
     _defineProperty(this, "onPopupPickerClose", () => {
-      this.onPopupToogleCallback(false);
+      this.onPopupToggleCallback(false);
     });
 
     _defineProperty(this, "shouldUseMediaPickerPopup", () => {
@@ -255,15 +264,15 @@ export class MediaPluginStateImplementation {
       }
 
       this.popupPicker.show();
-      this.onPopupToogleCallback(true);
+      this.onPopupToggleCallback(true);
     });
 
     _defineProperty(this, "setBrowseFn", browseFn => {
       this.openMediaPickerBrowser = browseFn;
     });
 
-    _defineProperty(this, "onPopupToggle", onPopupToogleCallback => {
-      this.onPopupToogleCallback = onPopupToogleCallback;
+    _defineProperty(this, "onPopupToggle", onPopupToggleCallback => {
+      this.onPopupToggleCallback = onPopupToggleCallback;
     });
 
     _defineProperty(this, "waitForPendingTasks", (timeout, lastTask) => {
@@ -482,7 +491,7 @@ export class MediaPluginStateImplementation {
   }
 
   getDomElement(domAtPos) {
-    var _this$mediaOptions2;
+    var _this$mediaOptions3;
 
     const {
       selection
@@ -496,7 +505,7 @@ export class MediaPluginStateImplementation {
       return;
     }
 
-    const position = (_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInline ? selection.from + 1 : selection.from;
+    const position = (_this$mediaOptions3 = this.mediaOptions) !== null && _this$mediaOptions3 !== void 0 && _this$mediaOptions3.allowMediaInline ? selection.from + 1 : selection.from;
     const node = findDomRefAtPos(position, domAtPos);
 
     if (node) {

package/dist/es2019/plugins/media/toolbar/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { findParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
+import { NodeSelection } from 'prosemirror-state';
+import { findParentNodeOfType, removeSelectedNode, safeInsert } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -18,7 +19,8 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE } f
 import { messages } from '@atlaskit/media-ui';
 import { messages as cardMessages } from '../../card/messages';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia } from './utils';
+import { downloadMedia, removeMediaGroupNode } from './utils';
+import { Fragment } from 'prosemirror-model';
 
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -28,13 +30,43 @@ const remove = (state, dispatch) => {
   return true;
 };
 
-const removeMediaCard = (state, mediaPluginState) => {
-  const getPos = () => {
-    const mediaOffset = state.selection.$from.parentOffset + 1;
-    return mediaOffset;
-  };
+const handleRemoveMediaGroup = (state, dispatch) => {
+  const tr = removeMediaGroupNode(state);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return true;
+};
+
+const changeMediaCardToInline = (state, dispatch) => {
+  const {
+    media,
+    mediaInline,
+    paragraph
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
+
+  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, true)(tr);
+
+  if (dispatch) {
+    dispatch(tr);
+  }
 
-  mediaPluginState.handleMediaNodeRemoval(undefined, getPos);
   return true;
 };
 
@@ -48,9 +80,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     options: [{
       title: intl.formatMessage(cardMessages.inline),
       selected: false,
-      onClick: () => {
-        return true;
-      },
+      onClick: changeMediaCardToInline,
       testId: 'inline-appearance'
     }, {
       title: intl.formatMessage(messages.displayThumbnail),
@@ -94,9 +124,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState) => {
     onFocus: hoverDecoration(mediaGroup, true),
     onBlur: hoverDecoration(mediaGroup, false),
     title: intl.formatMessage(commonMessages.remove),
-    onClick: state => {
-      return removeMediaCard(state, mediaPluginState);
-    },
+    onClick: handleRemoveMediaGroup,
     testId: 'media-toolbar-remove-button'
   }];
   return items;
@@ -210,6 +238,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
 export const floatingToolbar = (state, intl, options = {}) => {
   const {
     media,
+    mediaInline,
     mediaSingle,
     mediaGroup
   } = state.schema.nodes;
@@ -227,7 +256,7 @@ export const floatingToolbar = (state, intl, options = {}) => {
     return;
   }
 
-  const nodeType = allowMediaInline ? [mediaSingle, media] : [mediaSingle];
+  const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
   const baseToolbar = {
     title: 'Media floating controls',
     nodeType,

package/dist/es2019/plugins/media/toolbar/utils.js

@@ -1,4 +1,5 @@
 import { getMediaClient } from '@atlaskit/media-client';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from 'prosemirror-utils';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
 
@@ -29,4 +30,19 @@ export const downloadMedia = async mediaPluginState => {
   } catch (err) {
     return false;
   }
+};
+export const removeMediaGroupNode = state => {
+  const {
+    mediaGroup
+  } = state.schema.nodes;
+  const mediaGroupParent = findParentNodeOfType(mediaGroup)(state.selection);
+  let tr = state.tr; // If it is the last media group in filmstrip, remove the entire filmstrip
+
+  if (mediaGroupParent && mediaGroupParent.node.childCount === 1) {
+    tr = removeParentNodeOfType(mediaGroup)(tr);
+  } else {
+    tr = removeSelectedNode(tr);
+  }
+
+  return tr;
 };

package/dist/es2019/plugins/media/utils/media-files.js

@@ -1,10 +1,14 @@
 import { Fragment } from 'prosemirror-model';
 import { setNodeSelection, setTextSelection, insideTableCell, isInListItem, findFarthestParentNode, isInLayoutColumn } from '../../../utils';
 import { posOfPrecedingMediaGroup, posOfMediaGroupNearby, posOfParentMediaGroup, isSelectionNonMediaBlockNode, isInsidePotentialEmptyParagraph, copyOptionalAttrsFromMediaState } from './media-common';
-import { safeInsert, hasParentNode } from 'prosemirror-utils';
+import { canInsert, safeInsert, hasParentNode } from 'prosemirror-utils';
 import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '../../../utils/prosemirror/position';
 import { isSupportedInParent } from '../../../utils/nodes';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, addAnalytics } from '../../analytics';
+export const canInsertMediaInline = state => {
+  const node = state.schema.nodes.mediaInline.create({});
+  return canInsert(state.selection.$to, Fragment.from(node));
+};
 
 const getInsertMediaGroupAnalytics = (mediaState, inputMethod) => {
   let media = '';
@@ -27,6 +31,21 @@ const getInsertMediaGroupAnalytics = (mediaState, inputMethod) => {
     eventType: EVENT_TYPE.TRACK
   };
 };
+
+const getInsertMediaInlineAnalytics = (mediaState, inputMethod) => {
+  const media = mediaState.fileMimeType || 'unknown';
+  return {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
+    attributes: {
+      type: ACTION_SUBJECT_ID.MEDIA_INLINE,
+      inputMethod,
+      fileExtension: media
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
@@ -59,6 +78,54 @@ function shouldAppendParagraph(state, node) {
   const wasMediaNode = node && node.type === media;
   return (insideTableCell(state) || isInListItem(state) || isInLayoutColumn(state) || atTheEndOfDoc(state) && (!posOfPrecedingMediaGroup(state) || isSelectionNonMediaBlockNode(state))) && !wasMediaNode;
 }
+/**
+ * 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 const insertMediaInlineNode = (view, mediaState, collection, inputMethod) => {
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    schema,
+    tr
+  } = state;
+  const {
+    mediaInline
+  } = schema.nodes; // Do nothing if no media found
+
+  if (!mediaInline || !mediaState || collection === undefined) {
+    return false;
+  }
+
+  const {
+    id
+  } = mediaState;
+  const mediaInlineNode = mediaInline.create({
+    id,
+    collection
+  });
+  const space = state.schema.text(' ');
+  const pos = state.selection.$to.pos;
+  let content = Fragment.from([mediaInlineNode, space]); // Delete the selection if a selection is made
+
+  const deleteRange = findDeleteRange(state);
+
+  if (!deleteRange) {
+    tr.insert(pos, content);
+  } else {
+    tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
+  }
+
+  addAnalytics(state, tr, getInsertMediaInlineAnalytics(mediaState, inputMethod));
+  dispatch(tr);
+  return true;
+};
 /**
  * Insert a media into an existing media group
  * or create a new media group to insert the new media.
@@ -67,7 +134,6 @@ function shouldAppendParagraph(state, node) {
  * @param collection Collection for the media to be added
  */
 
-
 export const insertMediaGroupNode = (view, mediaStates, collection, inputMethod) => {
   const {
     state,

package/dist/es2019/plugins/panel/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { panel, customPanel, PanelType } from '@atlaskit/adf-schema';
+import { customPanel, PanelType } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
@@ -34,8 +34,7 @@ const panelPlugin = (options = {}) => ({
   name: 'panel',
 
   nodes() {
-    //TODO: ED-10445 remove this check after emoji panels moved to full schema
-    const panelNode = options.UNSAFE_allowCustomPanel ? customPanel : panel;
+    const panelNode = customPanel(!!options.UNSAFE_allowCustomPanel);
     return [{
       name: 'panel',
       node: panelNode
@@ -128,7 +127,7 @@ const panelPlugin = (options = {}) => ({
 
       }];
 
-      if (options.UNSAFE_allowCustomPanel) {
+      if (options.UNSAFE_allowCustomPanelEdit && options.UNSAFE_allowCustomPanel) {
         quickInsertOptions.push({
           id: 'custompanel',
           title: formatMessage(messages.customPanel),

package/dist/es2019/plugins/panel/message.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl';
+export const messages = defineMessages({
+  info: {
+    id: 'fabric.editor.info',
+    defaultMessage: 'Info',
+    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
+  },
+  note: {
+    id: 'fabric.editor.note',
+    defaultMessage: 'Note',
+    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
+  },
+  success: {
+    id: 'fabric.editor.success',
+    defaultMessage: 'Success',
+    description: 'Panels provide a way to highlight text. The success panel has a green background.'
+  },
+  warning: {
+    id: 'fabric.editor.warning',
+    defaultMessage: 'Warning',
+    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
+  },
+  error: {
+    id: 'fabric.editor.error',
+    defaultMessage: 'Error',
+    description: 'Panels provide a way to highlight text. The error panel has a red background.'
+  },
+  emoji: {
+    id: 'fabric.editor.panel.emoji',
+    defaultMessage: 'Add emoji',
+    description: 'Select the panel icon'
+  },
+  backgroundColor: {
+    id: 'fabric.editor.panel.backgroundColor',
+    defaultMessage: 'Background color',
+    description: 'Select the panel background color.'
+  }
+});