@atlaskit/editor-core 153.1.5 → 157.0.0

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -15,6 +15,7 @@ export const supportedHeaderRow = node => {
   return allHeaders && !someMerged;
 };
 export class TableRowNodeView {
+  // this is the sticky header table row
   get tree() {
     return getTree(this.dom);
   }
@@ -24,9 +25,7 @@ export class TableRowNodeView {
 
     _defineProperty(this, "focused", false);
 
-    _defineProperty(this, "scrollElementTop", 0);
-
-    _defineProperty(this, "isSticky", false);
+    _defineProperty(this, "topPosEditorElement", 0);
 
     _defineProperty(this, "stickyHeadersOptimization", false);
 
@@ -73,7 +72,14 @@ export class TableRowNodeView {
       const {
         table,
         wrapper
-      } = tree;
+      } = tree; // If the previous refresh is less than 10ms then don't do anything.
+      // The jumpiness happen under that time and this is to avoid it.
+
+      const timelapse = Math.abs(performance.now() - this.lastTimePainted);
+
+      if (timelapse < 10) {
+        return;
+      }
 
       if (this.shouldHeaderStick(tree)) {
         this.makeHeaderRowSticky(tree);
@@ -83,6 +89,7 @@ export class TableRowNodeView {
 
 
       this.dom.scrollLeft = wrapper.scrollLeft;
+      this.lastTimePainted = performance.now();
     });
 
     _defineProperty(this, "onTablePluginState", state => {
@@ -92,6 +99,14 @@ export class TableRowNodeView {
 
       if (!tree) {
         return;
+      } // make it non-sticky initially to avoid making it look separated
+
+
+      if (!this.isTableInit) {
+        if (this.tree) {
+          this.makeRowHeaderNotSticky(this.tree.table);
+          this.isTableInit = true;
+        }
       } // when header rows are toggled off - mark sentinels as unobserved
 
 
@@ -159,23 +174,39 @@ export class TableRowNodeView {
       const {
         wrapper
       } = tree;
-      const scrollTop = this.scrollElementTop;
-      const refTop = this.getWrapperRefTop(wrapper);
-      const wrapperRect = wrapper.getBoundingClientRect(); // we don't have parent information in via the node,
-      // so we need to look this up on scroll
-
+      const tableWrapperRect = wrapper.getBoundingClientRect();
+      const editorAreaRect = this.editorScrollableElement.getBoundingClientRect();
+      const stickyHeaderRect = this.contentDOM.getBoundingClientRect();
       const firstHeaderRow = !this.dom.previousElementSibling;
       const subsequentRows = !!this.dom.nextElementSibling;
-      const bottomVisible = scrollTop - wrapperRect.bottom < this.dom.clientHeight;
-      return refTop <= scrollTop && bottomVisible && firstHeaderRow && subsequentRows;
+      const isHeaderValid = firstHeaderRow && subsequentRows; // if the table wrapper is less than the editor top pos then make it sticky
+      // Make header sticky if table wrapper top is outside viewport
+      //  but bottom is still in the viewport.
+
+      if (tableWrapperRect.top < editorAreaRect.top && tableWrapperRect.bottom > editorAreaRect.top && isHeaderValid) {
+        return true;
+      } // if the sticky header is below the editor area make it non-sticky
+
+
+      if (stickyHeaderRect.top > editorAreaRect.top) {
+        return false;
+      } // otherwise make it non-sticky
+
+
+      return false;
     });
 
     _defineProperty(this, "makeHeaderRowSticky", tree => {
+      // If header row height is more than 50% of viewport height don't do this
+      if (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
+        return;
+      }
+
       const {
         table
       } = tree;
       const currentTableTop = this.getCurrentTableTop(tree);
-      const domTop = currentTableTop > 0 ? this.scrollElementTop : this.scrollElementTop + currentTableTop;
+      const domTop = currentTableTop > 0 ? this.topPosEditorElement : this.topPosEditorElement + currentTableTop;
 
       if (!this.isSticky) {
         syncStickyRowToTable(table);
@@ -189,17 +220,6 @@ export class TableRowNodeView {
       this.emitOn(domTop, this.colControlsOffset);
     });
 
-    _defineProperty(this, "getWrapperoffset", (inverse = false) => {
-      const focusValue = inverse ? !this.focused : this.focused;
-      return focusValue ? 0 : tableControlsSpacing;
-    });
-
-    _defineProperty(this, "getWrapperRefTop", wrapper => Math.round(getTop(wrapper)) + this.getWrapperoffset());
-
-    _defineProperty(this, "getScrolledTableTop", wrapper => this.getWrapperRefTop(wrapper) - this.scrollElementTop);
-
-    _defineProperty(this, "getCurrentTableTop", tree => this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight);
-
     _defineProperty(this, "makeRowHeaderNotSticky", (table, isEditorDestroyed = false) => {
       if (!this.isSticky || !table || !this.dom) {
         return;
@@ -214,6 +234,17 @@ export class TableRowNodeView {
       this.emitOff(isEditorDestroyed);
     });
 
+    _defineProperty(this, "getWrapperoffset", (inverse = false) => {
+      const focusValue = inverse ? !this.focused : this.focused;
+      return focusValue ? 0 : tableControlsSpacing;
+    });
+
+    _defineProperty(this, "getWrapperRefTop", wrapper => Math.round(getTop(wrapper)) + this.getWrapperoffset());
+
+    _defineProperty(this, "getScrolledTableTop", wrapper => this.getWrapperRefTop(wrapper) - this.topPosEditorElement);
+
+    _defineProperty(this, "getCurrentTableTop", tree => this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight);
+
     _defineProperty(this, "padding", 0);
 
     _defineProperty(this, "top", 0);
@@ -262,7 +293,10 @@ export class TableRowNodeView {
       stickyHeadersOptimization
     } = featureFlags;
     this.stickyHeadersOptimization = !!stickyHeadersOptimization;
+    this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
+    this.isSticky = false;
+    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -273,16 +307,16 @@ export class TableRowNodeView {
 
 
   subscribe() {
-    this.scrollElement = findOverflowScrollParent(this.view.dom) || window;
+    this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
 
-    if (this.scrollElement) {
+    if (this.editorScrollableElement) {
       if (this.stickyHeadersOptimization) {
         this.initObservers();
       } else {
-        this.scrollElement.addEventListener('scroll', this.onScroll);
+        this.editorScrollableElement.addEventListener('scroll', this.onScroll);
       }
 
-      this.scrollElementTop = getTop(this.scrollElement);
+      this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
 
     this.eventDispatcher.on(widthPluginKey.key, this.onWidthPluginState);
@@ -303,8 +337,8 @@ export class TableRowNodeView {
       this.resizeObserver.disconnect();
     }
 
-    if (this.scrollElement && !this.stickyHeadersOptimization) {
-      this.scrollElement.removeEventListener('scroll', this.onScroll);
+    if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
+      this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
     }
 
     this.eventDispatcher.off(widthPluginKey.key, this.onWidthPluginState);
@@ -415,7 +449,7 @@ export class TableRowNodeView {
         }
       });
     }, {
-      root: this.scrollElement
+      root: this.editorScrollableElement
     });
   }
   /* paint/update loop */

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/plugin.js

@@ -1,9 +1,9 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TableRowNodeView } from './nodeviews/tableRow';
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-state';
 export const createPlugin = (dispatch, eventDispatcher, initialState = () => []) => {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, initialState),
     key: pluginKey,
     props: {

package/dist/es2019/plugins/table/pm-plugins/table-local-id.js

@@ -10,7 +10,8 @@
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
 import { uuid } from '@atlaskit/adf-schema';
 import { stepAddsOneOf } from '../../../utils/step';
@@ -30,7 +31,7 @@ const checkIsAddingTable = (transaction, nodeType) => {
  */
 
 
-const createPlugin = dispatch => new Plugin({
+const createPlugin = dispatch => new SafePlugin({
   key: pluginKey,
   state: {
     init() {

package/dist/es2019/plugins/table/pm-plugins/table-resizing/plugin.js

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TableCssClassName as ClassName } from '../../types';
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
@@ -10,7 +10,7 @@ export function createPlugin(dispatch, {
   lastColumnResizable = true,
   dynamicTextSizing = false
 }) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
       lastColumnResizable,

package/dist/es2019/plugins/table/toolbar.js

@@ -15,7 +15,8 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '../../utils/dom';
+import { closestElement } from '../../utils/dom'; // TODO: ED-14403 investigate why these translations don't work
+
 export const messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

package/dist/es2019/plugins/table/ui/LayoutButton/index.js

@@ -9,14 +9,15 @@ import commonMessages from '../../../../messages';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { toggleTableLayoutWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
+import { findDomRefAtPos } from 'prosemirror-utils';
 
 const addPopupOffset = pos => ({ ...pos,
-  // add 22 pixels to align y position with
+  // add 12 pixels to align y position with
   //the columns controls
-  top: pos.top ? pos.top + 22 : undefined
+  top: pos.top ? pos.top + 12 : undefined
 });
 
-const getTitle = layout => {
+const getMessage = layout => {
   switch (layout) {
     case 'default':
       return commonMessages.layoutWide;
@@ -42,24 +43,77 @@ class LayoutButton extends React.Component {
     });
   }
 
-  render() {
+  getTitle() {
     const {
       intl: {
         formatMessage
       },
+      layout = 'default'
+    } = this.props;
+    return formatMessage(getMessage(layout));
+  }
+
+  toolbarButton() {
+    const {
+      isResizing,
+      layout = 'default'
+    } = this.props;
+    const title = this.getTitle();
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(ClassName.LAYOUT_BUTTON, {
+        [ClassName.IS_RESIZING]: isResizing
+      })
+    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+      title: title,
+      onClick: this.handleClick,
+      iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+        label: title
+      }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+        label: title
+      })
+    }));
+  }
+
+  getStickyTargetRef(pos) {
+    const {
+      editorView
+    } = this.props;
+    const domAtPos = editorView.domAtPos.bind(editorView);
+    const node = findDomRefAtPos(pos, domAtPos);
+    return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
+  }
+
+  renderSticky(button, targetRef) {
+    const title = this.getTitle();
+
+    if (!targetRef || !(targetRef instanceof HTMLElement)) {
+      return null;
+    }
+
+    const pos = targetRef.getBoundingClientRect();
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-label": title,
+      style: {
+        position: 'fixed',
+        top: pos.top + 22,
+        left: pos.right + 10
+      }
+    }, button);
+  }
+
+  renderPopup(button) {
+    const {
       mountPoint,
       boundariesElement,
       scrollableElement,
-      targetRef,
-      isResizing,
-      layout = 'default'
+      targetRef
     } = this.props;
 
     if (!targetRef) {
       return null;
     }
 
-    const title = formatMessage(getTitle(layout));
+    const title = this.getTitle();
     return /*#__PURE__*/React.createElement(Popup, {
       ariaLabel: title,
       target: targetRef,
@@ -71,19 +125,21 @@ class LayoutButton extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       forcePlacement: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(ClassName.LAYOUT_BUTTON, {
-        [ClassName.IS_RESIZING]: isResizing
-      })
-    }, /*#__PURE__*/React.createElement(ToolbarButton, {
-      title: title,
-      onClick: this.handleClick,
-      iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
-        label: title
-      }) : /*#__PURE__*/React.createElement(ExpandIcon, {
-        label: title
-      })
-    })));
+    }, button);
+  }
+
+  render() {
+    const {
+      stickyHeader
+    } = this.props;
+    const button = this.toolbarButton();
+    const stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
+
+    if (stickyTargetRef) {
+      return this.renderSticky(button, stickyTargetRef);
+    } else {
+      return this.renderPopup(button);
+    }
   }
 
   shouldComponentUpdate(nextProps) {
@@ -91,9 +147,10 @@ class LayoutButton extends React.Component {
       targetRef,
       layout,
       isResizing,
-      tableWidth
+      tableWidth,
+      stickyHeader
     } = this.props;
-    return targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
+    return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
   }
 
 }

package/dist/es2019/plugins/table/ui/common-styles.css.js

@@ -7,6 +7,7 @@ import { scrollbarStyles } from '../../../ui/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
 import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles.css';
+const cornerControlHeight = tableToolbarSize + 1;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
   th,td {
@@ -292,7 +293,7 @@ export const tableStyles = css`
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
       width: ${tableToolbarSize + 1}px;
-      height: ${tableToolbarSize + 1}px;
+      height: ${cornerControlHeight}px;
       display: none;
 
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
@@ -488,6 +489,19 @@ export const tableStyles = css`
         margin-top: 0;
       }
 
+      /*
+       * Headings have a top margin by default, but we don't want this on the
+       * first heading within table header cells.
+       *
+       * This specifically sets margin-top for the first heading within a header
+       * cell when center/right aligned.
+       */
+      th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
+        > h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child {
+          margin-top: 0;
+        }
+      }
+
       .${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
         position: relative;
       }
@@ -517,7 +531,8 @@ export const tableStyles = css`
     }
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       position: absolute;
-      top: ${tableMarginTop - 1}px;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
     }
     .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
@@ -526,15 +541,13 @@ export const tableStyles = css`
       left: -${tableToolbarSize}px;
     }
     .${ClassName.TABLE_NODE_WRAPPER} {
-      /* 
+      /*
       compensating for half of the insert column button
       that is aligned to the right edge initially on hover of the top right column control when table overflown,
       its center should be aligned with the edge
        */
       padding-right: ${tableInsertColumnButtonSize / 2}px;
       margin-right: -${tableInsertColumnButtonSize / 2}px;
-      padding-top: ${tableInsertColumnButtonSize / 2}px;
-      margin-top: -${tableInsertColumnButtonSize / 2}px;
       padding-bottom: ${tableScrollbarOffset}px;
       margin-bottom: -${tableScrollbarOffset}px;
       /* fixes gap cursor height */

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/main.js

@@ -1,4 +1,5 @@
-import { NodeSelection, Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { NodeSelection } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
 import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
@@ -23,7 +24,7 @@ const setContextIdentifierProvider = provider => (state, dispatch) => {
 };
 
 export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, useLongPressSelection = false) {
-  return new Plugin({
+  return new SafePlugin({
     props: {
       nodeViews: {
         taskItem: taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory),

package/dist/es2019/plugins/text-color/index.js

@@ -40,8 +40,6 @@ const textColorPlugin = textColorConfig => ({
     dispatchAnalyticsEvent,
     disabled
   }) {
-    const config = pluginConfig(textColorConfig);
-    const showMoreColorsToggle = config === null || config === void 0 ? void 0 : config.allowMoreTextColors;
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
         textColor: textColorPluginKey
@@ -55,7 +53,6 @@ const textColorPlugin = textColorConfig => ({
         popupsMountPoint: popupsMountPoint,
         popupsBoundariesElement: popupsBoundariesElement,
         popupsScrollableElement: popupsScrollableElement,
-        showMoreColorsToggle: showMoreColorsToggle,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         disabled: disabled
       })

package/dist/es2019/plugins/text-color/pm-plugins/main.js

@@ -1,41 +1,23 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { textColorPalette, textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { textColorPaletteExtended } from '../../../ui/ColorPalette/Palettes/textColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';
 export function createInitialPluginState(editorState, pluginConfig) {
   const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
-  const showMoreColorsToggle = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowMoreTextColors) || false;
   const palette = [{
     value: defaultColor.color,
     label: defaultColor.label,
     border: DEFAULT_BORDER_COLOR
-  }, ...(showMoreColorsToggle ? textColorPaletteExtended : textColorPalette)];
+  }, ...textColorPaletteExtended];
   const state = {
     color: getActiveColor(editorState),
     disabled: getDisabledState(editorState),
     palette,
     defaultColor: defaultColor.color
-  }; // break up the palette for extended colors
-
-  if (showMoreColorsToggle) {
-    // defined palette order: [normal, dark, light] (but normal[0] is default/dark)
-    // expanded palette: [dark, normal, light] with normal[0] on the dark row
-    const normalRow = palette.slice(0, 7);
-    const darkRow = palette.slice(7, 14);
-    const lightRow = palette.slice(14);
-    const paletteExpanded = darkRow.concat(normalRow).concat(lightRow); // swap default back and slot 7
-
-    const defaultSwatch = paletteExpanded[0];
-    paletteExpanded[0] = paletteExpanded[7];
-    paletteExpanded[7] = defaultSwatch;
-    return { ...state,
-      palette: normalRow,
-      paletteExpanded
-    };
-  }
-
+  };
   return state;
 }
 export let ACTIONS;
@@ -48,7 +30,7 @@ export let ACTIONS;
 
 export const pluginKey = new PluginKey('textColorPlugin');
 export function createPlugin(dispatch, pluginConfig) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init(_config, editorState) {