@atlaskit/editor-core 188.3.0 → 188.4.0

package/dist/es2019/plugins/media/picker-facade.js

@@ -1,146 +0,0 @@
-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/plugins/media/pm-plugins/alt-text/actions.js

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

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

@@ -1,42 +0,0 @@
-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/plugins/media/pm-plugins/alt-text/index.js

@@ -1,33 +0,0 @@
-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/plugins/media/pm-plugins/alt-text/keymap.js

@@ -1,9 +0,0 @@
-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/plugins/media/pm-plugins/alt-text/messages.js

@@ -1,38 +0,0 @@
-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/plugins/media/pm-plugins/alt-text/reducer.js

@@ -1,26 +0,0 @@
-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/plugins/media/pm-plugins/alt-text/style.js

@@ -1,4 +0,0 @@
-const prefix = 'pm-alt-text';
-export const ClassNames = {
-  FLOATING_TOOLBAR_COMPONENT: `${prefix}-alt-text-floating-toolbar`
-};

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -1,227 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-
-import React from 'react';
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { escape, ToolTipContent } from '@atlaskit/editor-common/keymaps';
-import { PanelTextInput } from '@atlaskit/editor-common/ui';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
-import { RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
-import { ErrorMessage } from '@atlaskit/editor-common/ui';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { N100, N30, N80, R400 } from '@atlaskit/theme/colors';
-import { closeMediaAltTextMenu, updateAltText } from '../commands';
-import { messages } from '../messages';
-export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
-export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
-
-const supportText = css`
-  color: ${`var(--ds-text-subtlest, ${N100})`};
-  font-size: ${relativeFontSizeToBase16(12)};
-  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-500, 40px)"};
-  line-height: 20px;
-  border-top: 1px solid ${`var(--ds-border, ${N30})`};
-  margin: 0;
-`;
-const container = css`
-  width: ${CONTAINER_WIDTH_IN_PX}px;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  line-height: 2;
-`;
-const inputWrapper = css`
-  display: flex;
-  line-height: 0;
-  padding: 5px 0;
-  align-items: center;
-`;
-const validationWrapper = css`
-  display: flex;
-  line-height: 0;
-  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-300, 24px)"}
-    ${"var(--ds-space-150, 12px)"} 0;
-  margin: 0 ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-500, 40px)"};
-  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
-  align-items: start;
-  flex-direction: column;
-`;
-const buttonWrapper = css`
-  display: flex;
-  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
-`;
-const clearText = css`
-  color: ${`var(--ds-icon-subtle, ${N80})`};
-`;
-export class AltTextEditComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "state", {
-      showClearTextButton: Boolean(this.props.value),
-      validationErrors: this.props.value ? this.getValidationErrors(this.props.value) : [],
-      lastValue: this.props.value
-    });
-    _defineProperty(this, "closeMediaAltTextMenu", () => {
-      const {
-        view
-      } = this.props;
-      closeMediaAltTextMenu(view.state, view.dispatch);
-    });
-    _defineProperty(this, "dispatchCancelEvent", event => {
-      const {
-        view,
-        onEscape
-      } = this.props;
-
-      // We need to pass down the ESCAPE keymap
-      // because when we focus on the Toolbar, Prosemirror blur,
-      // making all keyboard shortcuts not working
-      view.someProp('handleKeyDown', fn => fn(view, event));
-      onEscape === null || onEscape === void 0 ? void 0 : onEscape();
-    });
-    _defineProperty(this, "updateAltText", newAltText => {
-      const {
-        view
-      } = this.props;
-      const newValue = newAltText.length === 0 ? '' : newAltText;
-      updateAltText(newValue)(view.state, view.dispatch);
-    });
-    _defineProperty(this, "handleOnChange", newAltText => {
-      const validationErrors = this.getValidationErrors(newAltText);
-      this.setState({
-        showClearTextButton: Boolean(newAltText),
-        validationErrors,
-        lastValue: newAltText
-      }, () => {
-        if (!validationErrors || !validationErrors.length) {
-          this.updateAltText(newAltText);
-        }
-      });
-    });
-    _defineProperty(this, "handleOnBlur", () => {
-      // Handling the trimming onBlur() because PanelTextInput doesn't sync
-      // defaultValue properly during unmount
-      const {
-        value
-      } = this.props;
-      const newValue = (this.state.lastValue || value || '').trim();
-      this.handleOnChange(newValue);
-    });
-    _defineProperty(this, "handleClearText", () => {
-      this.handleOnChange('');
-    });
-    const {
-      createAnalyticsEvent
-    } = props;
-    this.fireCustomAnalytics = fireAnalyticsEvent(createAnalyticsEvent);
-  }
-  componentDidMount() {
-    this.prevValue = this.props.value;
-  }
-  componentWillUnmount() {
-    this.fireAnalytics(ACTION.CLOSED);
-    if (!this.prevValue && this.props.value) {
-      this.fireAnalytics(ACTION.ADDED);
-    }
-    if (this.prevValue && !this.props.value) {
-      this.fireAnalytics(ACTION.CLEARED);
-    }
-    if (this.prevValue && this.prevValue !== this.props.value) {
-      this.fireAnalytics(ACTION.EDITED);
-    }
-  }
-  getValidationErrors(value) {
-    const {
-      altTextValidator
-    } = this.props;
-    if (value && typeof altTextValidator === 'function') {
-      return altTextValidator(value) || [];
-    }
-    return [];
-  }
-  render() {
-    const {
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const {
-      showClearTextButton
-    } = this.state;
-    const backButtonMessage = formatMessage(messages.back);
-    const backButtonMessageComponent = jsx(ToolTipContent, {
-      description: backButtonMessage,
-      keymap: escape,
-      shortcutOverride: "Esc"
-    });
-    const errorsList = (this.state.validationErrors || []).map(function (error, index) {
-      return jsx(ErrorMessage, {
-        key: index
-      }, error);
-    });
-    return jsx("div", {
-      css: container
-    }, jsx("section", {
-      css: inputWrapper
-    }, jsx("div", {
-      css: buttonWrapper
-    }, jsx(Button, {
-      title: formatMessage(messages.back),
-      icon: jsx(ChevronLeftLargeIcon, {
-        label: formatMessage(messages.back)
-      }),
-      tooltipContent: backButtonMessageComponent,
-      onClick: this.closeMediaAltTextMenu
-    })), jsx(PanelTextInput, {
-      testId: "alt-text-input",
-      ariaLabel: formatMessage(messages.placeholder),
-      describedById: "support-text",
-      placeholder: formatMessage(messages.placeholder),
-      defaultValue: this.state.lastValue,
-      onCancel: this.dispatchCancelEvent,
-      onChange: this.handleOnChange,
-      onBlur: this.handleOnBlur,
-      onSubmit: this.closeMediaAltTextMenu,
-      maxLength: MAX_ALT_TEXT_LENGTH,
-      autoFocus: true
-    }), showClearTextButton && jsx("div", {
-      css: buttonWrapper
-    }, jsx(Button, {
-      testId: "alt-text-clear-button",
-      title: formatMessage(messages.clear),
-      icon: jsx("span", {
-        css: clearText
-      }, jsx(CrossCircleIcon, {
-        label: formatMessage(messages.clear)
-      })),
-      tooltipContent: formatMessage(messages.clear),
-      onClick: this.handleClearText
-    }))), !!errorsList.length && jsx("section", {
-      css: validationWrapper
-    }, errorsList), jsx("p", {
-      css: supportText,
-      id: "support-text"
-    }, formatMessage(messages.supportText)));
-  }
-  fireAnalytics(actionType) {
-    const {
-      createAnalyticsEvent
-    } = this.props;
-    if (createAnalyticsEvent && this.fireCustomAnalytics) {
-      this.fireCustomAnalytics({
-        payload: {
-          action: actionType,
-          actionSubject: ACTION_SUBJECT.MEDIA,
-          actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
-          eventType: EVENT_TYPE.TRACK
-        }
-      });
-    }
-  }
-}
-export default withAnalyticsEvents()(injectIntl(AltTextEditComponent));