@atlaskit/editor-common 74.5.2 → 74.7.0

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -0,0 +1,219 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { ErrorBoundary } from '../ui/ErrorBoundary';
+import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
+export const inlineNodeViewClassname = 'inlineNodeView';
+function createNodeView({
+  nodeViewParams,
+  pmPluginFactoryParams,
+  Component,
+  extraComponentProps
+}) {
+  // We set a variable for the current node which is
+  // used for comparisions when doing updates, before being
+  // overwritten to the updated node.
+  let currentNode = nodeViewParams.node;
+
+  // First we setup the dom element which will be rendered and "tracked" by prosemirror
+  // and also used as a "editor portal" (not react portal) target by the editor
+  // portal provider api, for rendering the Component passed.
+
+  let domRef = document.createElement('span');
+  domRef.contentEditable = 'false';
+  setDomAttrs(nodeViewParams.node, domRef);
+
+  // @see ED-3790
+  // something gets messed up during mutation processing inside of a
+  // nodeView if DOM structure has nested plain "div"s, it doesn't see the
+  // difference between them and it kills the nodeView
+  domRef.classList.add(`${nodeViewParams.node.type.name}View-content-wrap`, `${inlineNodeViewClassname}`);
+
+  // This util is shared for tracking rendering, and the ErrorBoundary that
+  // is setup to wrap the Component when rendering
+  // NOTE: This is not a prosemirror dispatch
+  function dispatchAnalyticsEvent(payload) {
+    pmPluginFactoryParams.eventDispatcher.emit(analyticsEventKey, {
+      payload
+    });
+  }
+
+  // This is called to render the Component into domRef which is inside the
+  // prosemirror View.
+  // Internally it uses the unstable_renderSubtreeIntoContainer api to render,
+  // to the passed dom element (domRef) which means it is automatically
+  // "cleaned up" when you do a "re render".
+  function renderComponent() {
+    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
+      dispatchAnalyticsEvent,
+      currentNode,
+      nodeViewParams,
+      Component,
+      extraComponentProps
+    }), domRef, false,
+    // node views should be rendered with intl context
+    true);
+  }
+  const {
+    samplingRate,
+    slowThreshold,
+    trackingEnabled
+  } = getPerformanceOptions(nodeViewParams.view);
+  trackingEnabled && startMeasureReactNodeViewRendered({
+    nodeTypeName: currentNode.type.name
+  });
+
+  // We render the component while creating the node view
+  renderComponent();
+  trackingEnabled && stopMeasureReactNodeViewRendered({
+    nodeTypeName: currentNode.type.name,
+    dispatchAnalyticsEvent,
+    editorState: nodeViewParams.view.state,
+    samplingRate,
+    slowThreshold
+  });
+
+  // https://prosemirror.net/docs/ref/#view.NodeView
+  const nodeView = {
+    get dom() {
+      return domRef;
+    },
+    update(nextNode, _decorations) {
+      // Let ProseMirror handle the update if node types are different.
+      // This prevents an issue where it was not possible to select the
+      // inline node view then replace it by entering text - the node
+      // view contents would be deleted but the node view itself would
+      // stay in the view and become uneditable.
+      if (currentNode.type !== nextNode.type) {
+        return false;
+      }
+      // On updates, we only set the new attributes if the type, attributes, and marks
+      // have changed on the node.
+
+      // NOTE: this could mean attrs changes aren't reflected in the dom,
+      // when an attribute key which was previously present is no longer
+      // present.
+      // ie.
+      // -> Original attributes { text: "hello world", color: "red" }
+      // -> Updated attributes { color: "blue" }
+      // in this case, the dom text attribute will not be cleared.
+      //
+      // This may not be an issue with any of our current node schemas.
+      if (!currentNode.sameMarkup(nextNode)) {
+        setDomAttrs(nextNode, domRef);
+      }
+      currentNode = nextNode;
+      renderComponent();
+      return true;
+    },
+    destroy() {
+      // When prosemirror destroys the node view, we need to clean up
+      // what we have previously rendered using the editor portal
+      // provider api.
+      pmPluginFactoryParams.portalProviderAPI.remove(domRef);
+      // @ts-expect-error Expect an error as domRef is expected to be
+      // of HTMLSpanElement type however once the node view has
+      // been destroyed no other consumers should still be using it.
+      domRef = undefined;
+    }
+  };
+  return nodeView;
+}
+
+/**
+ * Copies the attributes from a ProseMirror Node to a DOM node.
+ * @param node The Prosemirror Node from which to source the attributes
+ */
+function setDomAttrs(node, element) {
+  Object.keys(node.attrs || {}).forEach(attr => {
+    element.setAttribute(attr, node.attrs[attr]);
+  });
+}
+function getPortalChildren({
+  dispatchAnalyticsEvent,
+  currentNode,
+  nodeViewParams,
+  Component,
+  extraComponentProps
+}) {
+  return function portalChildren() {
+    var _currentNode$type$nam, _currentNode$type;
+    //  All inline nodes use `display: inline` to allow for multi-line
+    //  wrapping. This does produce an issue in Chrome where it is not
+    //  possible to click select the position after the node,
+    //  see: https://product-fabric.atlassian.net/browse/ED-12003
+    //  however this is only a problem for node views that use
+    //  `display: inline-block` somewhere within the Component.
+    //  Looking at the below structure, spans with className
+    //  `inlineNodeViewAddZeroWidthSpace` have pseudo elements that
+    //  add a zero width space which fixes the problem.
+    //  Without the additional zero width space before the Component,
+    //  it is not possible to use the keyboard to range select in Safari.
+    //
+    //  Zero width spaces on either side of the Component also prevent
+    //  the cursor from appearing inside the node view on all browsers.
+    //
+    //  Note:
+    //  In future it is worth considering prohibiting the use of `display: inline-block`
+    //  within inline node view Components however would require a sizable
+    //  refactor. A test suite to catch any instances of this is ideal however
+    //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
+
+    return jsx(ErrorBoundary, {
+      component: ACTION_SUBJECT.REACT_NODE_VIEW,
+      componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    }, jsx("span", {
+      "aria-hidden": "true",
+      className: `zeroWidthSpaceContainer`
+    }, jsx("span", {
+      className: `${inlineNodeViewClassname}AddZeroWidthSpace`
+    }), ZERO_WIDTH_SPACE), jsx(Component, _extends({
+      view: nodeViewParams.view,
+      getPos: nodeViewParams.getPos,
+      node: currentNode
+    }, extraComponentProps)), jsx("span", {
+      "aria-hidden": "true",
+      className: `${inlineNodeViewClassname}AddZeroWidthSpace`
+    }));
+  };
+}
+
+// https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews
+// The prosemirror EditorProps has a nodeViews key which has the rough shape:
+// type nodeViews: {
+//   [nodeViewName: string]: (node, editorView, getPos, decorations, innerDecorations) => NodeView
+// }
+// So the value of the keys on the nodeViews object, are a function which should return a NodeView.
+// The following type NodeViewProducer, refers to these functions which return a NodeView.
+//
+// So the above type could also be described as
+// type NodeViewProducer = (node, editorView, getPos, decorations, innerDecorations) => NodeView
+// nodeViews: {
+//   [nodeViewName: string]: NodeViewProducer
+// }
+// This return of this function is intended to be the value of a key
+// in a ProseMirror nodeViews object.
+export function getInlineNodeViewProducer({
+  pmPluginFactoryParams,
+  Component,
+  extraComponentProps
+}) {
+  function nodeViewProducer(...nodeViewProducerParameters) {
+    const nodeView = createNodeView({
+      nodeViewParams: {
+        node: nodeViewProducerParameters[0],
+        view: nodeViewProducerParameters[1],
+        getPos: nodeViewProducerParameters[2],
+        decorations: nodeViewProducerParameters[3]
+      },
+      pmPluginFactoryParams,
+      Component,
+      extraComponentProps
+    });
+    return nodeView;
+  }
+  return nodeViewProducer;
+}

package/dist/es2019/react-node-view/index.js

@@ -6,6 +6,7 @@ import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { analyticsEventKey } from '../utils/analytics';
+export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
 export default class ReactNodeView {
   constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasAnalyticsContext = false, viewShouldUpdate, hasIntlContext = false) {
     _defineProperty(this, "handleRef", node => this._handleRef(node));

package/dist/es2019/{ui/Resizer/index.js → resizer/Resizer.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../../styles/shared/resizer';
+import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
 export default function ResizerNext(props) {
   const resizable = React.useRef(null);
   const {
@@ -9,7 +9,8 @@ export default function ResizerNext(props) {
     handleResizeStart,
     handleResizeStop,
     handlerHeightSize = 'medium',
-    handleAlignmentMethod = 'center'
+    handleAlignmentMethod = 'center',
+    resizeRatio = 1
   } = props;
   const onResizeStart = React.useCallback(event => {
     // prevent creating a drag event on Firefox
@@ -91,6 +92,7 @@ export default function ResizerNext(props) {
     ,
     onResizeStart: onResizeStart,
     onResize: onResize,
-    onResizeStop: onResizeStop
+    onResizeStop: onResizeStop,
+    resizeRatio: resizeRatio
   }, props.children);
 }

package/dist/es2019/resizer/index.js

@@ -0,0 +1 @@
+export { default as ResizerNext } from './Resizer';

package/dist/es2019/resizer/utils.js

@@ -0,0 +1,12 @@
+export const snapTo = (target, points) => {
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
+  target : points.reduce((point, closest) => {
+    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
+  });
+};
+export const handleSides = ['left', 'right'];
+export const imageAlignmentMap = {
+  left: 'start',
+  right: 'end'
+};

package/dist/es2019/styles/shared/resizer.js

@@ -23,12 +23,9 @@ export const resizerHandlerClassName = {
   large: resizerHandlerLargeClassName
 };
 export const resizerStyles = css`
-  .${resizerItemClassName} {
-    background: ${`var(--ds-border-focused, ${B200})`};
-  }
-
   .${resizerHandleRightClassName}, .${resizerHandleLeftClassName} {
     display: flex;
+    visibility: hidden;
     flex-direction: column;
     justify-content: center;
   }
@@ -51,6 +48,13 @@ export const resizerStyles = css`
     border-radius: 6px;
   }
 
+  .${resizerItemClassName}:hover
+    .${resizerHandleLeftClassName},
+    .${resizerItemClassName}:hover
+    .${resizerHandleRightClassName} {
+    visibility: visible;
+  }
+
   .${resizerItemClassName}:hover
     .${resizerHandleLeftClassName}::after,
     .${resizerItemClassName}:hover

package/dist/es2019/styles/shared/table.js

@@ -32,7 +32,8 @@ export const TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: tableHeaderSelector,
   TABLE_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
-  TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`
+  TABLE_COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
+  TABLE_RESIZER_CONTAINER: `${tablePrefixSelector}-resizer-container`
 };
 const tableSharedStyle = props => css`
   ${tableCellBackgroundStyleOverride()}
@@ -206,12 +207,12 @@ const tableSharedStyle = props => css`
 export const calcTableWidth = (layout, containerWidth, addControllerPadding = true) => {
   switch (layout) {
     case 'full-width':
-      return containerWidth ? `${Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth)}px` : `${akEditorFullWidthLayoutWidth}px`;
+      return containerWidth ? Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
     case 'wide':
       if (containerWidth) {
-        return `${Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth)}px`;
+        return Math.min(containerWidth - (addControllerPadding ? akEditorBreakoutPadding : 0), akEditorWideLayoutWidth);
       }
-      return `${akEditorWideLayoutWidth}px`;
+      return akEditorWideLayoutWidth;
     default:
       return 'inherit';
   }

package/dist/es2019/types/resizable-media-single.js

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

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.5.2";
+const packageVersion = "74.7.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/LinkSearch/const.js

@@ -0,0 +1,4 @@
+export const RECENT_SEARCH_WIDTH_IN_PX = 420;
+export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
+export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export const LINKPICKER_HEIGHT_IN_PX = 570;

package/dist/es2019/ui/ResizerLegacy/index.js

@@ -0,0 +1,191 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import { Resizable } from 're-resizable';
+import { akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
+import { richMediaClassName } from '../../styles';
+import { gridTypeForLayout } from '../../utils';
+import { handleSides, snapTo } from './utils';
+const getResizeAnalyticsEvent = (type, size, layout) => {
+  const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
+  return {
+    action: ACTION.EDITED,
+    actionSubject,
+    actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
+    attributes: {
+      size,
+      layout
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
+const getWidthFromSnapPoints = (width, snapPoints) => {
+  if (snapPoints.length) {
+    return Math.min(Math.max(width, snapPoints[0]), snapPoints[snapPoints.length - 1]);
+  }
+  return width;
+};
+export default class Resizer extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "resizable", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      isResizing: false
+    });
+    _defineProperty(this, "handleResizeStart", event => {
+      const {
+        innerPadding = 0,
+        highlights,
+        displayGrid,
+        layout,
+        width,
+        snapPoints
+      } = this.props;
+
+      // prevent creating a drag event on Firefox
+      event.preventDefault();
+      this.setState({
+        isResizing: true
+      }, () => {
+        const newHighlights = highlights(width + innerPadding, snapPoints);
+        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, gridTypeForLayout(layout), newHighlights);
+      });
+    });
+    _defineProperty(this, "handleResize", (_event, _direction, _elementRef, delta) => {
+      const {
+        highlights,
+        calcNewSize,
+        scaleFactor,
+        snapPoints,
+        displayGrid,
+        layout,
+        updateSize,
+        innerPadding = 0
+      } = this.props;
+      const resizable = this.resizable.current;
+      const {
+        isResizing
+      } = this.state;
+      if (!resizable || !resizable.state.original || !isResizing) {
+        return;
+      }
+      const newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width * (scaleFactor || 1), snapPoints);
+      const newSize = calcNewSize(newWidth + innerPadding, false);
+      if (newSize.layout !== layout) {
+        updateSize(newSize.width, newSize.layout);
+      }
+      const newHighlights = highlights(newWidth, snapPoints);
+      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
+      resizable.updateSize({
+        width: newWidth,
+        height: 'auto'
+      });
+      resizable.setState({
+        isResizing: true
+      });
+    });
+    _defineProperty(this, "handleResizeStop", (_event, _direction, _elementRef, delta) => {
+      const {
+        highlights,
+        calcNewSize,
+        snapPoints,
+        displayGrid,
+        layout,
+        updateSize,
+        dispatchAnalyticsEvent,
+        nodeType
+      } = this.props;
+      const resizable = this.resizable.current;
+      const {
+        isResizing
+      } = this.state;
+      if (!resizable || !resizable.state.original || !isResizing) {
+        return;
+      }
+      const newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width, snapPoints);
+      const snapWidth = snapTo(newWidth, snapPoints);
+      const newSize = calcNewSize(snapWidth, true);
+      const newHighlights = highlights(newWidth, snapPoints);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, newSize.width, newSize.layout));
+      }
+      // show committed grid size
+      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, gridTypeForLayout(newSize.layout), newHighlights);
+      this.setState({
+        isResizing: false
+      }, () => {
+        updateSize(newSize.width, newSize.layout);
+        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(false, gridTypeForLayout(layout), []);
+      });
+    });
+  }
+  render() {
+    const handleStyles = {};
+    const handles = {};
+    const handleComponent = {};
+    const {
+      innerPadding = 0,
+      width,
+      pctWidth,
+      selected,
+      layout,
+      enable,
+      children,
+      ratio,
+      handleComponentFunc
+    } = this.props;
+    const {
+      isResizing
+    } = this.state;
+    handleSides.forEach(side => {
+      handles[side] = `richMedia-resize-handle-${side}`;
+      handleStyles[side] = {
+        width: '24px',
+        [side]: `${-13 - innerPadding}px`,
+        zIndex: akRichMediaResizeZIndex,
+        pointerEvents: 'auto'
+      };
+      const sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
+      if (sideHandleComponent) {
+        handleComponent[side] = sideHandleComponent;
+      }
+    });
+    const className = classnames(richMediaClassName, `image-${layout}`, this.props.className, {
+      'is-resizing': isResizing,
+      'not-resized': !pctWidth,
+      'richMedia-selected': selected,
+      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+    });
+    let handleWrapperStyle;
+    if (ratio) {
+      handleWrapperStyle = {
+        position: 'absolute',
+        width: '100%',
+        paddingBottom: `${ratio}%`,
+        top: 0,
+        pointerEvents: 'none'
+      };
+    }
+
+    // Ideally, Resizable would let you pass in the component rather than
+    // the div. For now, we just apply the same styles using CSS
+    return /*#__PURE__*/React.createElement(Resizable, {
+      ref: this.resizable,
+      size: {
+        width,
+        // just content itself (no paddings)
+        height: 'auto'
+      },
+      className: className,
+      handleClasses: handles,
+      handleStyles: handleStyles,
+      handleWrapperStyle: handleWrapperStyle,
+      handleComponent: handleComponent,
+      enable: enable,
+      onResize: this.handleResize,
+      onResizeStop: this.handleResizeStop,
+      onResizeStart: this.handleResizeStart
+    }, children);
+  }
+}

package/dist/es2019/ui/ResizerLegacy/styled.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import { MediaSingleDimensionHelper } from '../MediaSingle/styled';
+export const wrapperStyle = props => css`
+  & > div {
+    ${MediaSingleDimensionHelper(props)};
+    position: relative;
+    clear: both;
+
+    > div {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+  }
+`;

package/dist/es2019/ui/ResizerLegacy/types.js

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

package/dist/es2019/ui/ResizerLegacy/utils.js

@@ -0,0 +1,12 @@
+export const snapTo = (target, points) => {
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
+  target : points.reduce((point, closest) => {
+    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
+  });
+};
+export const handleSides = ['left', 'right'];
+export const imageAlignmentMap = {
+  left: 'start',
+  right: 'end'
+};

package/dist/es2019/ui/index.js

@@ -18,4 +18,8 @@ export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle
 export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
 export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';
 export { default as FloatingToolbarButton } from './FloatingToolbar/Button';
-export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';
+export { RECENT_SEARCH_WIDTH_IN_PX, RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, LINKPICKER_HEIGHT_IN_PX } from './LinkSearch/const';
+export { ContextPanelProvider, ContextPanelWidthProvider, ContextPanelConsumer, ContextPanel } from './ContextPanel/context';
+export { default as Resizer } from './ResizerLegacy';
+export { snapTo, handleSides, imageAlignmentMap } from './ResizerLegacy/utils';
+export { wrapperStyle } from './ResizerLegacy/styled';