@atlaskit/editor-core 161.0.0 → 163.0.0

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

@@ -1,43 +0,0 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { setMediaClientConfig } from '../commands/media-editor';
-import { createPluginState, pluginKey } from './media-editor-plugin-factory'; // handle mapping changes to providers -> plugin state
-
-const pluginView = providerFactory => view => {
-  const updateMediaProvider = async (name, provider) => {
-    if (name !== 'mediaProvider') {
-      return;
-    }
-
-    const resolvedProvider = await provider;
-
-    if (!resolvedProvider) {
-      return;
-    }
-
-    const resolvedMediaClientConfig = (await resolvedProvider.uploadMediaClientConfig) || (await resolvedProvider.viewMediaClientConfig);
-    const {
-      dispatch,
-      state
-    } = view;
-    setMediaClientConfig(resolvedMediaClientConfig)(state, dispatch, view);
-  };
-
-  providerFactory.subscribe('mediaProvider', updateMediaProvider);
-  return {
-    destroy() {
-      providerFactory.unsubscribe('mediaProvider', updateMediaProvider);
-    }
-
-  };
-};
-
-export const createPlugin = ({
-  dispatch,
-  providerFactory
-}) => {
-  return new SafePlugin({
-    state: createPluginState(dispatch, {}),
-    key: pluginKey,
-    view: pluginView(providerFactory)
-  });
-};

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

@@ -1,136 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import AnnotateIcon from '@atlaskit/icon/glyph/media-services/annotate';
-import { getMediaClient } from '@atlaskit/media-client';
-import Button from '../../floating-toolbar/ui/Button';
-import Separator from '../../floating-toolbar/ui/Separator';
-import { stateKey } from '../pm-plugins/plugin-key';
-import { openMediaEditor } from '../commands/media-editor';
-import { withAnalytics, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION, EVENT_TYPE } from '../../../plugins/analytics';
-import { toolbarMessages } from './toolbar-messages';
-
-const annotate = (state, dispatch) => {
-  const pluginState = stateKey.getState(state);
-
-  if (!pluginState) {
-    return false;
-  }
-
-  const {
-    mediaSingle
-  } = state.schema.nodes;
-  const selected = pluginState.selectedMediaContainerNode();
-
-  if (!selected || selected.type !== mediaSingle) {
-    return false;
-  }
-
-  const {
-    id,
-    collection: collectionName,
-    occurrenceKey
-  } = selected.firstChild.attrs;
-  return withAnalytics({
-    action: ACTION.CLICKED,
-    actionSubject: ACTION_SUBJECT.MEDIA,
-    actionSubjectId: ACTION_SUBJECT_ID.ANNOTATE_BUTTON,
-    eventType: EVENT_TYPE.UI
-  })(openMediaEditor(state.selection.from + 1, {
-    id,
-    collectionName,
-    mediaItemType: 'file',
-    occurrenceKey
-  }))(state, dispatch);
-};
-
-export class AnnotationToolbar extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      isImage: false
-    });
-
-    _defineProperty(this, "onClickAnnotation", () => {
-      const {
-        view
-      } = this.props;
-
-      if (view) {
-        annotate(view.state, view.dispatch);
-      }
-    });
-  }
-
-  async componentDidMount() {
-    await this.checkIsImage();
-  }
-
-  async checkIsImage() {
-    const mediaClient = getMediaClient(this.props.viewMediaClientConfig);
-
-    if (!this.props.id) {
-      return;
-    }
-
-    try {
-      const state = await mediaClient.file.getCurrentState(this.props.id, {
-        collectionName: this.props.collection
-      });
-
-      if (state && state.status !== 'error' && state.mediaType === 'image') {
-        this.setState({
-          isImage: true
-        });
-      }
-    } catch (err) {// do nothing in case of media-client error
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.id !== this.props.id) {
-      this.setState({
-        isImage: false
-      }, () => {
-        this.checkIsImage();
-      });
-    }
-  }
-
-  render() {
-    if (!this.state.isImage) {
-      return null;
-    }
-
-    const {
-      intl
-    } = this.props;
-    const title = intl.formatMessage(toolbarMessages.annotate);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Button, {
-      title: title,
-      icon: /*#__PURE__*/React.createElement(AnnotateIcon, {
-        label: title
-      }),
-      onClick: this.onClickAnnotation
-    }));
-  }
-
-}
-export const renderAnnotationButton = (pluginState, intl) => {
-  return (view, idx) => {
-    const selectedContainer = pluginState.selectedMediaContainerNode();
-
-    if (!selectedContainer || !pluginState.mediaClientConfig) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(AnnotationToolbar, {
-      key: idx,
-      viewMediaClientConfig: pluginState.mediaClientConfig,
-      id: selectedContainer.firstChild.attrs.id,
-      collection: selectedContainer.firstChild.attrs.collection,
-      view: view,
-      intl: intl
-    });
-  };
-};

package/dist/es2019/plugins/media/ui/MediaEditor.js

@@ -1,51 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { SmartMediaEditor } from '@atlaskit/media-editor';
-import { uploadAnnotation, closeMediaEditor } from '../commands/media-editor';
-export default class MediaEditor extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "onUploadStart", (newFileIdentifier, dimensions) => {
-      const {
-        state,
-        dispatch
-      } = this.props.view;
-      uploadAnnotation(newFileIdentifier, dimensions)(state, dispatch);
-    });
-
-    _defineProperty(this, "onClose", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.view;
-      closeMediaEditor()(state, dispatch);
-    });
-  }
-
-  render() {
-    const {
-      mediaEditorState: {
-        editor,
-        mediaClientConfig
-      }
-    } = this.props;
-
-    if (!editor || !mediaClientConfig) {
-      return null;
-    }
-
-    const {
-      identifier
-    } = editor;
-    return /*#__PURE__*/React.createElement(SmartMediaEditor, {
-      identifier: identifier,
-      mediaClientConfig: mediaClientConfig,
-      onUploadStart: this.onUploadStart,
-      onClose: this.onClose
-    });
-  }
-
-}
-
-_defineProperty(MediaEditor, "displayName", 'MediaEditor');

package/dist/es2019/utils/compare.js

@@ -1,99 +0,0 @@
-import React from 'react';
-export const getKeys = Object.keys;
-export const getKeysAddedRemovedCommon = (object1, object2) => {
-  const oldKeys = object1 !== null ? getKeys(object1) : [];
-  const newKeys = object2 !== null ? getKeys(object2) : [];
-  const removed = oldKeys.filter(key => !newKeys.includes(key));
-  const added = newKeys.filter(key => !oldKeys.includes(key));
-  const common = oldKeys.filter(key => newKeys.includes(key));
-  return {
-    added,
-    common,
-    removed
-  };
-};
-export const serializeValue = value => {
-  const valueType = typeof value;
-
-  if (value === null) {
-    return 'null';
-  } else if (value === undefined) {
-    return 'undefined';
-  } else if (valueType === 'string' || valueType === 'number') {
-    return value;
-  } else if (valueType === 'symbol') {
-    return value.toString();
-  } // Calling toString of function returns whole function text with body.
-  // So, just return function with name.
-  else if (valueType === 'function') {
-    return `function:${value.name}`;
-  } else if (valueType === 'object') {
-    return {
-      type: 'object',
-      keys: Object.keys(value)
-    };
-  }
-};
-export const getPropsDifference = (object1, object2, curDepth = 0, maxDepth = 2, keysToIgnore = []) => {
-  const {
-    added,
-    common,
-    removed
-  } = getKeysAddedRemovedCommon(object1, object2);
-  const changed = [];
-  common.forEach(key => {
-    const value1 = object1[key];
-    const value2 = object2[key];
-    const value1Type = typeof value1;
-    const value2Type = typeof value2; // Do comparision only if values doesn't match (or reference to same object in memory).
-    // Or if key does not exist in keys to ignore.
-
-    if (value1 !== value2 && keysToIgnore.indexOf(key) === -1) {
-      // if both key value are objects and not referencing same object in memory.
-      //  then get recursive difference.
-      if ( /*#__PURE__*/React.isValidElement(value1) || /*#__PURE__*/React.isValidElement(value2)) {
-        changed.push({
-          key,
-          reactElementChanged: true
-        });
-      } else if (value1Type === 'object' && value2Type === 'object') {
-        if (curDepth <= maxDepth) {
-          const difference = getPropsDifference(value1, value2, curDepth + 1, maxDepth);
-          changed.push({
-            key,
-            difference
-          });
-        } else {
-          changed.push({
-            key,
-            maxDepthReached: true
-          });
-        }
-      } else {
-        changed.push({
-          key,
-          oldValue: serializeValue(value1),
-          newValue: serializeValue(value2)
-        });
-      }
-    }
-  });
-  return {
-    added,
-    changed,
-    removed
-  };
-};
-export const getShallowPropsDifference = (object1, object2) => {
-  const {
-    added,
-    common,
-    removed
-  } = getKeysAddedRemovedCommon(object1, object2);
-  const changed = common.filter(key => object1[key] !== object2[key]);
-  return {
-    added,
-    changed,
-    removed
-  };
-};

package/dist/es2019/utils/react-hooks/use-component-renderer-tracking/index.js

@@ -1,66 +0,0 @@
-import { useMemo, useEffect, useRef } from 'react';
-import debounce from 'lodash/debounce';
-import { getShallowPropsDifference, getPropsDifference } from '../../compare';
-import { EVENT_TYPE } from '../../../plugins/analytics';
-export function useComponentRenderTracking({
-  onRender,
-  propsDiffingOptions,
-  zeroBasedCount = true
-}) {
-  const propsRef = useRef();
-  const renderCountRef = useRef(zeroBasedCount ? 0 : 1);
-  useEffect(() => {
-    const lastProps = propsRef.current;
-    const renderCount = renderCountRef.current;
-    let propsDifference;
-
-    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
-      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? getShallowPropsDifference(lastProps, propsDiffingOptions.props) : getPropsDifference(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
-    }
-
-    const result = {
-      renderCount,
-      propsDifference
-    };
-    onRender(result);
-
-    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled) {
-      propsRef.current = propsDiffingOptions.props;
-    }
-
-    renderCountRef.current = renderCountRef.current + 1;
-  }); // No dependencies run on each render
-}
-export function RenderTracking(props) {
-  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
-  useComponentRenderTracking({
-    onRender: ({
-      renderCount,
-      propsDifference
-    }) => {
-      if (!renderCount) {
-        return;
-      }
-
-      debouncedHandleAnalyticsEvent({
-        payload: {
-          action: props.action,
-          actionSubject: props.actionSubject,
-          attributes: {
-            count: renderCount,
-            propsDifference: propsDifference
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        }
-      });
-    },
-    propsDiffingOptions: {
-      enabled: true,
-      props: props.componentProps,
-      propsToIgnore: props.propsToIgnore,
-      useShallow: props.useShallow
-    },
-    zeroBasedCount: true
-  });
-  return null;
-}

package/dist/esm/plugins/media/commands/media-editor.js

@@ -1,59 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import { createCommand, getPluginState } from '../pm-plugins/media-editor-plugin-factory';
-export var openMediaEditor = function openMediaEditor(pos, identifier) {
-  return createCommand({
-    type: 'open',
-    identifier: identifier,
-    pos: pos
-  });
-};
-export var closeMediaEditor = function closeMediaEditor() {
-  return createCommand({
-    type: 'close'
-  });
-};
-export var setMediaClientConfig = function setMediaClientConfig(mediaClientConfig) {
-  return createCommand({
-    type: 'setMediaClientConfig',
-    mediaClientConfig: mediaClientConfig
-  });
-};
-export var uploadAnnotation = function uploadAnnotation(newIdentifier, newDimensions) {
-  return createCommand({
-    type: 'upload',
-    newIdentifier: newIdentifier
-  }, function (tr, state) {
-    var editingMedia = getPluginState(state).editor;
-
-    if (!editingMedia) {
-      return tr;
-    } // remap pos across transactions being applied
-
-
-    var pos = tr.mapping.map(editingMedia.pos); // get the old media node to copy attributes; ensure it's still media
-
-    var oldMediaNode = tr.doc.nodeAt(pos);
-    var media = state.schema.nodes.media;
-
-    if (!oldMediaNode || oldMediaNode.type !== media) {
-      return tr;
-    } // update attributes
-
-
-    var attrs = _objectSpread(_objectSpread({}, oldMediaNode.attrs), {}, {
-      // @atlaskit/media-editor always gives id as string (better types would be nice...)
-      id: newIdentifier.id,
-      collection: newIdentifier.collectionName || oldMediaNode.attrs.collection,
-      occurrenceKey: newIdentifier.occurrenceKey,
-      width: newDimensions.width,
-      height: newDimensions.height
-    });
-
-    return tr.setNodeMarkup(pos, undefined, attrs);
-  });
-};

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

@@ -1,90 +0,0 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { setMediaClientConfig } from '../commands/media-editor';
-import { createPluginState, pluginKey } from './media-editor-plugin-factory'; // handle mapping changes to providers -> plugin state
-
-var pluginView = function pluginView(providerFactory) {
-  return function (view) {
-    var updateMediaProvider = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(name, provider) {
-        var resolvedProvider, resolvedMediaClientConfig, dispatch, state;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!(name !== 'mediaProvider')) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 2:
-                _context.next = 4;
-                return provider;
-
-              case 4:
-                resolvedProvider = _context.sent;
-
-                if (resolvedProvider) {
-                  _context.next = 7;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 7:
-                _context.next = 9;
-                return resolvedProvider.uploadMediaClientConfig;
-
-              case 9:
-                _context.t0 = _context.sent;
-
-                if (_context.t0) {
-                  _context.next = 14;
-                  break;
-                }
-
-                _context.next = 13;
-                return resolvedProvider.viewMediaClientConfig;
-
-              case 13:
-                _context.t0 = _context.sent;
-
-              case 14:
-                resolvedMediaClientConfig = _context.t0;
-                dispatch = view.dispatch, state = view.state;
-                setMediaClientConfig(resolvedMediaClientConfig)(state, dispatch, view);
-
-              case 17:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function updateMediaProvider(_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-
-    providerFactory.subscribe('mediaProvider', updateMediaProvider);
-    return {
-      destroy: function destroy() {
-        providerFactory.unsubscribe('mediaProvider', updateMediaProvider);
-      }
-    };
-  };
-};
-
-export var createPlugin = function createPlugin(_ref2) {
-  var dispatch = _ref2.dispatch,
-      providerFactory = _ref2.providerFactory;
-  return new SafePlugin({
-    state: createPluginState(dispatch, {}),
-    key: pluginKey,
-    view: pluginView(providerFactory)
-  });
-};