@atlaskit/editor-plugin-media 0.2.0 → 0.3.1

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

@@ -0,0 +1,228 @@
+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})`};
+`;
+// eslint-disable-next-line @repo/internal/react/no-class-components
+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));

package/dist/es2019/pm-plugins/keymap-media-single.js

@@ -0,0 +1,172 @@
+import { backspace, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { atTheEndOfDoc } from '@atlaskit/editor-common/selection';
+import { isEmptyNode, isSelectionInsideLastNodeInDocument } from '@atlaskit/editor-common/utils';
+import { selectNodeBackward } from '@atlaskit/editor-prosemirror/commands';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+
+/**
+ * Check if is an empty selection at the start of the node
+ */
+function isEmptySelectionAtStart(selection) {
+  if (!selection.empty) {
+    return false;
+  }
+  const {
+    $from
+  } = selection;
+  return $from.parentOffset <= 0;
+}
+
+/**
+ * Check if the current selection is inside a node type
+ */
+function isSelectionInsideOf(selection, nodeType) {
+  const {
+    $from
+  } = selection;
+  const parent = $from.parent;
+  return parent.type === nodeType;
+}
+
+/**
+ * Return the sibling of the current selection
+ */
+function getSibling(selection, sibling) {
+  const {
+    $from
+  } = selection;
+  const index = $from.index($from.depth - 1);
+  const grandParent = $from.node($from.depth - 1); // Get GrandParent
+
+  return grandParent ? grandParent.maybeChild(index + sibling) : null;
+}
+
+/**
+ * Check if respective sibling (negative number previous, positive number next)
+ * is from the specified node
+ */
+function isSiblingOfType(selection, node, sibling) {
+  const maybeSiblingNode = getSibling(selection, sibling);
+  return !!maybeSiblingNode && maybeSiblingNode.type === node;
+}
+/**
+ * When there's any empty block before another paragraph with wrap-right
+ * mediaSingle. Pressing backspace at the start of the paragraph will select
+ * the media but visually it makes more sense to remove the empty paragraph.
+ *
+ * Structure of the document: doc(block(), mediaSingle(media()), paragraph('{<>}hello!'))
+ * But, visually it looks like the following:
+ *
+ *    [empty block] <- Remove this block
+ * or [paragraph block] <- Move text inside this paragraph
+ * or [any other block] <- Move paragraph node after this node
+ * [Cursor] x x x x x x x x  +---------------+
+ * x x x x x x x x x x       |  mediaSingle  |
+ * x x x x x.                +---------------+
+ */
+function handleSelectionAfterWrapRight(isEmptyNode) {
+  function isEmptyWithoutThrow(node) {
+    let isEmpty = false;
+    try {
+      // We dont have isEmptyNode definition for table for example.
+      // In this case it will throw we need to catch it
+      isEmpty = isEmptyNode(node);
+    } catch (e) {}
+    return isEmpty;
+  }
+  return (state, dispatch) => {
+    const {
+      $from
+    } = state.selection;
+    const {
+      paragraph
+    } = state.schema.nodes;
+    const previousMediaSingleSibling = -2;
+    const maybeSibling = getSibling(state.selection, previousMediaSingleSibling);
+    if (!maybeSibling) {
+      // the last is the image so should let the default behaviour delete the image
+      return false;
+    }
+    const mediaSingle = getSibling(state.selection, -1); // Sibling is a media single already checked in main code
+    const mediaSinglePos = $from.pos - mediaSingle.nodeSize;
+
+    // Should find the position
+    // Should move the current paragraph to the last line
+    const maybeAnyBlockPos = mediaSinglePos - maybeSibling.nodeSize;
+    let tr = state.tr;
+    if (isEmptyWithoutThrow(maybeSibling)) {
+      // Should remove the empty sibling
+      tr = tr.replace(maybeAnyBlockPos - 1, maybeAnyBlockPos + maybeSibling.nodeSize);
+    } else {
+      // We move the current node, to the new position
+      // 1. Remove current node, only if I am not removing the last node.
+      if (!isSelectionInsideLastNodeInDocument(state.selection)) {
+        tr.replace($from.pos - 1, $from.pos + $from.parent.nodeSize - 1); // Remove node
+      } else {
+        // Remove node content, if is the last node, let a empty paragraph
+        tr.replace($from.pos, $from.pos + $from.parent.nodeSize - 1);
+      }
+
+      // 2. Add it in the new position
+      // If the sibling is a paragraph lets copy the text inside the paragraph
+      // Like a normal backspace from paragraph to paragraph
+      if (maybeSibling.type === paragraph) {
+        const insideParagraphPos = maybeAnyBlockPos + maybeSibling.nodeSize - 2;
+        safeInsert($from.parent.content, insideParagraphPos)(tr);
+      } else {
+        // If is any other kind of block just add the paragraph after it
+        const endOfBlockPos = maybeAnyBlockPos + maybeSibling.nodeSize - 1;
+        safeInsert($from.parent.copy($from.parent.content), endOfBlockPos)(tr);
+      }
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+const maybeRemoveMediaSingleNode = schema => {
+  const isEmptyNodeInSchema = isEmptyNode(schema);
+  return (state, dispatch) => {
+    const {
+      selection,
+      schema
+    } = state;
+    const {
+      $from
+    } = selection;
+    if (!isEmptySelectionAtStart(state.selection)) {
+      return false;
+    }
+    if (!isSelectionInsideOf(state.selection, schema.nodes.paragraph)) {
+      return false;
+    }
+    const previousSibling = -1;
+    if (!isSiblingOfType(state.selection, schema.nodes.mediaSingle, previousSibling)) {
+      // no media single
+      return false;
+    }
+    const mediaSingle = getSibling(state.selection, previousSibling);
+    if (mediaSingle.attrs.layout === 'wrap-right') {
+      return handleSelectionAfterWrapRight(isEmptyNodeInSchema)(state, dispatch);
+    }
+    if (dispatch) {
+      // Select media single, and remove paragraph if it's empty.
+      selectNodeBackward(state, tr => {
+        if (isEmptyNodeInSchema($from.parent) && !atTheEndOfDoc(state)) {
+          tr.replace($from.pos - 1, $from.pos + $from.parent.nodeSize - 1); // Remove node
+        }
+
+        dispatch(tr);
+      });
+    }
+    return true;
+  };
+};
+export default function keymapPlugin(schema) {
+  const list = {};
+  const removeMediaSingleCommand = maybeRemoveMediaSingleNode(schema);
+  bindKeymapWithCommand(backspace.common, removeMediaSingleCommand, list);
+  return keymap(list);
+}

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

@@ -0,0 +1,84 @@
+import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
+import { stateKey } from '../pm-plugins/plugin-key';
+export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
+  const list = {};
+  const {
+    featureFlags
+  } = options || {};
+  bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
+  bindKeymapWithCommand(enter.common, splitMediaGroup, list);
+  if (options !== null && options !== void 0 && options.allowCaptions || getMediaFeatureFlag('captions', featureFlags)) {
+    bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
+    bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
+    bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
+    bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
+  }
+  bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
+  return keymap(list);
+}
+const ignoreLinksInSteps = state => {
+  const mediaPluginState = stateKey.getState(state);
+  mediaPluginState.ignoreLinks = true;
+  return false;
+};
+const splitMediaGroup = state => {
+  const mediaPluginState = stateKey.getState(state);
+  return mediaPluginState.splitMediaGroup();
+};
+const insertAndSelectCaption = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    selection,
+    schema
+  } = state;
+  if (selection instanceof NodeSelection && selection.node.type === schema.nodes.mediaSingle && schema.nodes.caption) {
+    if (dispatch) {
+      const {
+        from,
+        node
+      } = selection;
+      if (!insertAndSelectCaptionFromMediaSinglePos(editorAnalyticsAPI)(from, node)(state, dispatch)) {
+        selectCaptionFromMediaSinglePos(from, node)(state, dispatch);
+      }
+    }
+    return true;
+  }
+  return false;
+};
+const arrowLeftFromMediaSingle = editorSelectionAPI => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+    const tr = editorSelectionAPI.selectNearNode({
+      selectionRelativeToNode: undefined,
+      selection: new GapCursorSelection(state.doc.resolve(selection.from), Side.LEFT)
+    })(state);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+const arrowRightFromMediaSingle = editorSelectionAPI => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
+    const tr = editorSelectionAPI.selectNearNode({
+      selectionRelativeToNode: undefined,
+      selection: new GapCursorSelection(state.doc.resolve(selection.to), Side.RIGHT)
+    })(state);
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+export default keymapPlugin;

package/dist/es2019/pm-plugins/linking/actions.js

@@ -0,0 +1,7 @@
+export let MediaLinkingActionsTypes = /*#__PURE__*/function (MediaLinkingActionsTypes) {
+  MediaLinkingActionsTypes["showToolbar"] = "MEDIA_SHOW_TOOLBAR";
+  MediaLinkingActionsTypes["hideToolbar"] = "MEDIA_HIDE_TOOLBAR";
+  MediaLinkingActionsTypes["setUrl"] = "MEDIA_SET_LINK_TO";
+  MediaLinkingActionsTypes["unlink"] = "MEDIA_LINKING_UNLINK";
+  return MediaLinkingActionsTypes;
+}({});

package/dist/es2019/pm-plugins/linking/index.js

@@ -0,0 +1,56 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
+export const mediaLinkingPluginKey = new PluginKey('mediaLinking');
+const initialState = {
+  visible: false,
+  editable: false,
+  mediaPos: null,
+  link: ''
+};
+function mapping(tr, pluginState) {
+  if (pluginState && pluginState.mediaPos !== null) {
+    return {
+      ...pluginState,
+      mediaPos: tr.mapping.map(pluginState.mediaPos)
+    };
+  }
+  return pluginState;
+}
+function onSelectionChanged(tr) {
+  const isNodeSelection = tr.selection instanceof NodeSelection;
+  if (!isNodeSelection) {
+    return initialState;
+  }
+  const mediaPos = tr.selection.$from.pos + 1;
+  const node = tr.doc.nodeAt(mediaPos);
+  if (!node || node.type.name !== 'media') {
+    return initialState;
+  }
+  const mark = node.marks.find(mark => mark.type.name === 'link');
+  if (mark) {
+    return {
+      ...initialState,
+      mediaPos,
+      editable: true,
+      link: mark.attrs.href
+    };
+  }
+  return {
+    ...initialState,
+    mediaPos
+  };
+}
+const mediaLinkingPluginFactory = pluginFactory(mediaLinkingPluginKey, reducer, {
+  mapping,
+  onSelectionChanged
+});
+export const {
+  createCommand: createMediaLinkingCommand,
+  getPluginState: getMediaLinkingState
+} = mediaLinkingPluginFactory;
+export default (dispatch => new SafePlugin({
+  key: mediaLinkingPluginKey,
+  state: mediaLinkingPluginFactory.createPluginState(dispatch, initialState)
+}));

package/dist/es2019/pm-plugins/linking/keymap.js

@@ -0,0 +1,8 @@
+import { addLink, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { showLinkingToolbarWithMediaTypeCheck } from '../../commands/linking';
+export default function keymapPlugin(schema) {
+  const list = {};
+  bindKeymapWithCommand(addLink.common, showLinkingToolbarWithMediaTypeCheck, list);
+  return keymap(list);
+}

package/dist/es2019/pm-plugins/linking/reducer.js

@@ -0,0 +1,37 @@
+import { MediaLinkingActionsTypes } from './actions';
+export default ((state, action) => {
+  switch (action.type) {
+    case MediaLinkingActionsTypes.showToolbar:
+      {
+        return {
+          ...state,
+          visible: true
+        };
+      }
+    case MediaLinkingActionsTypes.setUrl:
+      {
+        return {
+          ...state,
+          editable: true,
+          link: action.payload
+        };
+      }
+    case MediaLinkingActionsTypes.hideToolbar:
+      {
+        return {
+          ...state,
+          visible: false
+        };
+      }
+    case MediaLinkingActionsTypes.unlink:
+      {
+        return {
+          ...state,
+          link: '',
+          visible: false,
+          editable: false
+        };
+      }
+  }
+  return state;
+});

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

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