@atlaskit/editor-core 172.1.2 → 172.2.0

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

@@ -1,95 +1,3 @@
-/** @jsx jsx */
-import React, { useCallback } from 'react';
-import { css, jsx } from '@emotion/react';
-import Tooltip from '@atlaskit/tooltip';
-import { FabricChannel } from '@atlaskit/analytics-listeners';
-import Button from './styles';
-import { ACTION_SUBJECT, EVENT_TYPE, ACTION } from '../../plugins/analytics/types/enums';
-import { TOOLBAR_ACTION_SUBJECT_ID } from '../../plugins/analytics/types/toolbar-button';
-export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-const buttonWrapper = css`
-  display: flex;
-  height: 100%;
-`;
-const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    buttonId,
-    testId,
-    className = '',
-    href,
-    iconAfter,
-    iconBefore,
-    disabled,
-    selected,
-    spacing,
-    target,
-    children,
-    hideTooltip,
-    title,
-    titlePosition = 'top',
-    item,
-    'aria-label': ariaLabel,
-    'aria-haspopup': ariaHasPopup,
-    'aria-expanded': ariaExpanded,
-    'aria-pressed': ariaPressed,
-    onClick,
-    onItemClick
-  } = props;
-  const handleClick = useCallback((event, analyticsEvent) => {
-    if (disabled) {
-      return;
-    }
-
-    if (buttonId) {
-      analyticsEvent.update(payload => ({ ...payload,
-        action: ACTION.CLICKED,
-        actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
-        actionSubjectId: buttonId,
-        eventType: EVENT_TYPE.UI
-      })).fire(FabricChannel.editor);
-    }
-
-    if (onClick) {
-      onClick(event);
-    }
-
-    if (item && onItemClick) {
-      onItemClick(item);
-    }
-  }, [disabled, onClick, onItemClick, item, buttonId]);
-  const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
-  const button = jsx(Button, {
-    id: id,
-    ref: ref,
-    appearance: "subtle",
-    testId: testId,
-    className: className,
-    href: href,
-    iconAfter: iconAfter,
-    iconBefore: iconBefore,
-    isDisabled: disabled,
-    isSelected: selected,
-    onClick: handleClick,
-    spacing: spacing || 'default',
-    target: target,
-    shouldFitContainer: true,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup,
-    "aria-label": ariaLabel,
-    "aria-pressed": ariaPressed
-  }, children);
-
-  if (!title) {
-    return button;
-  }
-
-  const tooltipContent = !hideTooltip ? title : null;
-  return jsx(Tooltip, {
-    content: tooltipContent,
-    hideTooltipOnClick: true,
-    position: titlePosition
-  }, jsx("div", {
-    css: buttonWrapper
-  }, button));
-});
+import { ToolbarButton, TOOLBAR_BUTTON } from '@atlaskit/editor-common/ui-menu';
+export { TOOLBAR_BUTTON };
 export default ToolbarButton;

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
 import { createDispatch } from '../../event-dispatcher';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../plugins/analytics';
-import { analyticsEventKey } from '../../plugins/analytics/consts';
+import { analyticsEventKey } from '@atlaskit/editor-common/utils';
 import { analyticsPluginKey } from '../../plugins/analytics/plugin-key';
 import { getParticipantsCount } from '../../plugins/collab-edit/get-participants-count';
 const DEFAULT_SAMPLING_RATE = 100;

package/dist/es2019/ui/styles.js

@@ -1,9 +1,14 @@
 import { css } from '@emotion/react';
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
-import { N30, N100 } from '@atlaskit/theme/colors';
+import { N30 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-const akGridSize = gridSize() + 'px';
+export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar'; // TODO ED-15449 delete this style when deleting editor-core table
+
+export const cellColourPreviewStyles = selectedColor => css`
+  &::before {
+    background: ${selectedColor};
+  }
+`;
 export const buttonGroupStyle = css`
   display: inline-flex;
   align-items: center;
@@ -61,50 +66,7 @@ export const buttonContentReducedSpacingStyle = css`
 export const dropShadow = css`
   box-shadow: ${token('elevation.shadow.overlay', `0 0 1px rgba(9, 30, 66, 0.31),
     0 4px 8px -2px rgba(9, 30, 66, 0.25)`)};
-`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
-
-export const scrollbarStyles = `
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-
-  &::-webkit-scrollbar {
-    height: ${akGridSize};
-    width: ${akGridSize};
-  }
-
-  &::-webkit-scrollbar-corner {
-    display: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
-    border-radius: ${akGridSize};
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
-  }
-`;
-export const shortcutStyle = css`
-  background-color: ${token('color.background.neutral', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
-  color: ${token('color.text.subtle', N100)};
-  border-radius: ${borderRadius()}px;
-  padding: 4px;
-  line-height: 12px;
-  font-size: ${relativeFontSizeToBase16(11.67)};
-  align-self: flex-end;
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    display: none;
-  }
 `;
 export const clickSelectWrapperStyle = css`
   user-select: all;
-`;
-export const cellColourPreviewStyles = selectedColor => css`
-  &::before {
-    background: ${selectedColor};
-  }
 `;

package/dist/es2019/ui/with-outer-listeners.js

@@ -1,104 +1,2 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-import ReactEditorViewContext from '../create-editor/ReactEditorViewContext';
-
-class WithOutsideClick extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleClick", evt => {
-      if (!this.props.isActiveComponent) {
-        return;
-      }
-
-      const domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
-
-      if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
-        if (this.props.handleClickOutside) {
-          this.props.handleClickOutside(evt);
-        }
-      }
-    });
-
-    _defineProperty(this, "handleKeydown", evt => {
-      if (!this.props.isActiveComponent) {
-        return;
-      }
-
-      if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
-        var _this$props$editorVie;
-
-        evt.preventDefault();
-        evt.stopPropagation();
-        this.props.handleEscapeKeydown(evt);
-
-        if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
-          var _this$props$editorVie2;
-
-          (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
-        }
-
-        return false;
-      } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
-        this.props.handleEnterKeydown(evt);
-      }
-    });
-  }
-
-  componentDidMount() {
-    if (this.props.handleClickOutside) {
-      document.addEventListener('click', this.handleClick, false);
-    }
-
-    if (this.props.handleEscapeKeydown) {
-      var _this$props$editorRef;
-
-      (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.handleClickOutside) {
-      document.removeEventListener('click', this.handleClick, false);
-    }
-
-    if (this.props.handleEscapeKeydown) {
-      var _this$props$editorRef2;
-
-      (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || document).removeEventListener('keydown', this.handleKeydown, false);
-    }
-  }
-
-  render() {
-    return this.props.children;
-  }
-
-}
-
-function hasIsOpen(props) {
-  return 'isOpen' in props;
-}
-
-export default function withOuterListeners(Component) {
-  return ({
-    handleClickOutside,
-    handleEnterKeydown,
-    handleEscapeKeydown,
-    ...props
-  }) => {
-    const isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
-    return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
-      editorView,
-      editorRef
-    }) => /*#__PURE__*/React.createElement(WithOutsideClick, {
-      editorView: editorView,
-      editorRef: editorRef,
-      isActiveComponent: isActiveComponent,
-      handleClickOutside: handleClickOutside,
-      handleEnterKeydown: handleEnterKeydown,
-      handleEscapeKeydown: handleEscapeKeydown
-    }, /*#__PURE__*/React.createElement(Component, props)));
-  };
-}
+import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+export default withReactEditorViewOuterListeners;

package/dist/es2019/utils/dom.js

@@ -1,113 +1 @@
-/**
- * Walks a DOM tree up to the provided `stopElement`, or if falsy before.
- * @param element
- * @param stopElement
- */
-export function walkUpTreeUntil(element, shouldStop) {
-  let rootElement = element;
-
-  while (rootElement && rootElement.parentElement && !shouldStop(rootElement)) {
-    rootElement = rootElement.parentElement;
-  }
-
-  return rootElement;
-}
-/**
- * Takes all children out from wrapped el and puts them directly inside
- * the parent el, at the wrapped el's position
- */
-
-export function unwrap(parent, wrapped) {
-  const docsFragment = document.createDocumentFragment();
-  Array.from(wrapped.children).forEach(child => {
-    docsFragment.appendChild(child);
-  });
-  parent.replaceChild(docsFragment, wrapped);
-}
-/**
- * Walks up DOM removing elements if they are empty until it finds
- * one that is not
- */
-
-export function removeNestedEmptyEls(el) {
-  while (el.parentElement && el.childElementCount === 0 && el.textContent === '') {
-    const parentEl = el.parentElement;
-    parentEl.removeChild(el);
-    el = parentEl;
-  }
-}
-/**
- * IE11 doesn't support classList to SVGElements
- **/
-
-export const containsClassName = (node, className) => {
-  if (!node) {
-    return false;
-  }
-
-  if (node.classList && node.classList.contains) {
-    return node.classList.contains(className);
-  }
-
-  if (!node.className) {
-    return false;
-  }
-
-  const classNames = typeof node.className.baseVal === 'string' ? node.className.baseVal : node.className;
-  return classNames.split(' ').indexOf(className) !== -1;
-};
-export function closest(node, s) {
-  if (!node) {
-    return null;
-  }
-
-  let el = node;
-
-  if (!document.documentElement || !document.documentElement.contains(el)) {
-    return null;
-  }
-
-  if (el.closest) {
-    return el.closest(s);
-  }
-
-  do {
-    const matchfn = el.matches ? el.matches : el.msMatchesSelector;
-
-    if (matchfn && matchfn.call(el, s)) {
-      return el;
-    }
-
-    el = el.parentElement || el.parentNode;
-  } while (el !== null && el.nodeType === 1);
-
-  return null;
-}
-/*
- * @deprecated - Use HTMLElement.protoype.closest instead
- */
-
-export function closestElement(node, s) {
-  return closest(node, s);
-}
-export function parsePx(pxStr) {
-  if (!pxStr.endsWith('px')) {
-    return undefined;
-  }
-
-  const maybeNumber = parseInt(pxStr, 10);
-  return !Number.isNaN(maybeNumber) ? maybeNumber : undefined;
-}
-// does typescript have function templates yet?
-export function mapElem(elem, callback) {
-  const array = [];
-
-  for (let i = 0; i < elem.childElementCount; i++) {
-    array.push(callback(elem.children[i], i, elem));
-  }
-
-  return array;
-}
-export function maphElem(elem, callback) {
-  return mapElem(elem, callback);
-}
+export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, closest, closestElement, parsePx, mapElem, maphElem } from '@atlaskit/editor-common/utils';

package/dist/es2019/utils/index.js

@@ -7,7 +7,7 @@ import { FakeTextCursorSelection } from '../plugins/fake-text-cursor/cursor';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { isNodeEmpty } from './document';
 import { atTheBeginningOfDoc, atTheEndOfDoc } from './prosemirror/position';
-import { closest } from './dom';
+export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { isEmptyParagraph, hasVisibleContent, isNodeEmpty, isEmptyDocument, processRawValue, getStepRange, findFarthestParentNode, isSelectionEndOfParagraph, nodesBetweenChanged, getNodesCount } from './document';
 export { cascadeCommands, getEditorValueWithMedia } from './action';
 export { isMarkAllowedInRange, isMarkExcluded, removeBlockMarks, sanitiseSelectionMarksForWrapping, sanitiseMarksInSelection } from './mark';
@@ -510,13 +510,6 @@ export const isEmptyNode = schema => {
 
   return innerIsEmptyNode;
 };
-export const insideTable = state => {
-  const {
-    table,
-    tableCell
-  } = state.schema.nodes;
-  return hasParentNodeOfType([table, tableCell])(state.selection);
-};
 export const insideTableCell = state => {
   const {
     tableCell,
@@ -524,15 +517,6 @@ export const insideTableCell = state => {
   } = state.schema.nodes;
   return hasParentNodeOfType([tableCell, tableHeader])(state.selection);
 };
-export const isElementInTableCell = element => {
-  return closest(element, 'td') || closest(element, 'th');
-};
-export const isLastItemMediaGroup = node => {
-  const {
-    content
-  } = node;
-  return !!content.lastChild && content.lastChild.type.name === 'mediaGroup';
-};
 export const isInLayoutColumn = state => {
   return hasParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
 };
@@ -580,7 +564,7 @@ export function dedupe(list = [], iteratee = p => p) {
     return false;
   });
 }
-export const isTextSelection = selection => selection instanceof TextSelection;
+export { isTextSelection, isElementInTableCell, isLastItemMediaGroup, nonNullable } from '@atlaskit/editor-common/utils';
 /** Helper type for single arg function */
 
 /**
@@ -614,7 +598,4 @@ export function shallowEqual(obj1 = {}, obj2 = {}) {
 export function sum(arr, f) {
   return arr.reduce((val, x) => val + f(x), 0);
 }
-export function nonNullable(value) {
-  return value !== null && value !== undefined;
-}
 export { SetAttrsStep } from '@atlaskit/adf-schema/steps';

package/dist/es2019/utils/node-width.js

@@ -1,82 +1,8 @@
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-import { absoluteBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '../plugins/layout/styles';
-import { BODIED_EXT_PADDING } from '../plugins/extension/ui/Extension/styles';
-
-/**
- * Calculates width of parent node of a nested node (inside layouts, extension)
- * If current node selection is not nested will return undefined
- */
-export const getParentNodeWidth = (pos, state, containerWidth, isFullWidthModeEnabled) => {
-  if (!pos) {
-    return;
-  }
-
-  const node = getNestedParentNode(pos, state);
-
-  if (!node) {
-    return;
-  }
-
-  let layout = node.attrs.layout || 'default';
-  const {
-    schema
-  } = state;
-  const breakoutMark = schema.marks.breakout && schema.marks.breakout.isInSet(node.marks);
-
-  if (breakoutMark && breakoutMark.attrs.mode) {
-    layout = breakoutMark.attrs.mode;
-  }
-
-  let parentWidth = calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled);
-
-  if (node.type === schema.nodes.layoutSection) {
-    parentWidth += akLayoutGutterOffset * 2; // extra width that gets added to layout
-
-    if (containerWidth.width > gridMediumMaxWidth) {
-      parentWidth -= (LAYOUT_SECTION_MARGIN + 2) * (node.childCount - 1); // margin between sections
-
-      const $pos = state.doc.resolve(pos);
-      const column = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.layoutColumn]);
-
-      if (column && column.node && !isNaN(column.node.attrs.width)) {
-        // get exact width of parent layout column using node attrs
-        parentWidth = Math.round(parentWidth * column.node.attrs.width * 0.01);
-      }
-    }
-  } // account for the padding of the parent node
-
-
-  if (node.type === schema.nodes.layoutSection) {
-    parentWidth -= LAYOUT_COLUMN_PADDING * 2;
-  } else if (node.type === schema.nodes.bodiedExtension) {
-    parentWidth -= BODIED_EXT_PADDING * 2;
-  }
-
-  parentWidth -= 2; // border
-
-  return parentWidth;
-};
-
-const getNestedParentNode = (tablePos, state) => {
-  if (tablePos === undefined) {
-    return null;
-  }
-
-  const $pos = state.doc.resolve(tablePos);
-  const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
-  return parent ? parent.node : null;
-};
-
-const calcBreakoutNodeWidth = (layout, containerWidth, isFullWidthModeEnabled) => {
-  return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, akEditorFullWidthLayoutWidth) : absoluteBreakoutWidth(layout, containerWidth.width);
-};
+export { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 /**
  * Returns the breakout mode of a given node
  */
 
-
 export const getBreakoutMode = (node, breakout) => {
   const breakoutMark = breakout && breakout.isInSet(node.marks);
   return breakoutMark ? breakoutMark.attrs.mode : node.attrs.layout;

package/dist/es2019/utils/nodes.js

@@ -1,88 +1 @@
-/**
- * Finds all top level nodes affected by the transaction
- * Uses from/to positions in transaction's steps to work out which nodes will
- * be changed by the transaction
- */
-export const findChangedNodesFromTransaction = tr => {
-  const nodes = [];
-  const steps = tr.steps || [];
-  steps.forEach(step => {
-    const {
-      to,
-      from,
-      slice
-    } = step;
-    const size = slice && slice.content ? slice.content.size : 0;
-
-    for (let i = from; i <= to + size; i++) {
-      if (i <= tr.doc.content.size) {
-        const topLevelNode = tr.doc.resolve(i).node(1);
-
-        if (topLevelNode && !nodes.find(n => n === topLevelNode)) {
-          nodes.push(topLevelNode);
-        }
-      }
-    }
-  });
-  return nodes;
-};
-export const validNode = node => {
-  try {
-    node.check(); // this will throw an error if the node is invalid
-  } catch (error) {
-    return false;
-  }
-
-  return true;
-};
-/** Validates prosemirror nodes, and returns true only if all nodes are valid */
-
-export const validateNodes = nodes => nodes.every(validNode);
-export const isType = (node, type) => type && node && node.type === type;
-export const isParagraph = (node, schema) => isType(node, schema.nodes.paragraph);
-export const isText = (node, schema) => isType(node, schema.nodes.text);
-export const isLinkMark = (node, schema) => isType(node, schema.marks.link);
-export let SelectedState;
-/**
- * Returns if the current selection from achor-head is selecting the node.
- * If the node is not selected then null is returned.
- * If the node is selected then an enum is returned that describes weather the node
- * is fully selected by a range or if the "inside" of the node has been selected or clicked.
- */
-
-(function (SelectedState) {
-  SelectedState[SelectedState["selectedInRange"] = 0] = "selectedInRange";
-  SelectedState[SelectedState["selectedInside"] = 1] = "selectedInside";
-})(SelectedState || (SelectedState = {}));
-
-export const isNodeSelectedOrInRange = (anchorPosition, headPosition, nodePosition, nodeSize) => {
-  const rangeStart = Math.min(anchorPosition, headPosition);
-  const rangeEnd = Math.max(anchorPosition, headPosition);
-  const nodeStart = nodePosition;
-  const nodeEnd = nodePosition + nodeSize;
-
-  if (anchorPosition === headPosition) {
-    return null;
-  }
-
-  if (rangeStart <= nodeStart && nodeEnd < rangeEnd || rangeStart < nodeStart && nodeEnd <= rangeEnd) {
-    return SelectedState.selectedInRange;
-  }
-
-  if (nodeStart <= anchorPosition && headPosition <= nodeEnd) {
-    return SelectedState.selectedInside;
-  }
-
-  return null;
-};
-/**
- * Checks if a particular node fragment is supported in the parent
- * @param state EditorState
- * @param fragment The fragment to be checked for
- */
-
-export const isSupportedInParent = (state, fragment, currentAppearance) => {
-  const depth = currentAppearance === 'embed' || currentAppearance === 'block' ? undefined : -1;
-  const parent = state.selection.$from.node(depth);
-  return parent && parent.type.validContent(fragment);
-};
+export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent } from '@atlaskit/editor-common/utils';