@atlaskit/editor-common 69.2.2 → 69.3.0

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

@@ -0,0 +1,193 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
+import { injectIntl, RawIntlProvider, useIntl } from 'react-intl-next';
+import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
+import { EventDispatcher } from '../../event-dispatcher';
+import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
+export class PortalProviderAPI extends EventDispatcher {
+  constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+    super();
+
+    _defineProperty(this, "portals", new Map());
+
+    _defineProperty(this, "setContext", context => {
+      this.context = context;
+    });
+
+    this.intl = intl;
+    this.onAnalyticsEvent = onAnalyticsEvent;
+    this.useAnalyticsContext = analyticsContext;
+    this.themeMode = themeMode;
+  }
+
+  render(children, container, hasAnalyticsContext = false, hasIntlContext = false) {
+    this.portals.set(container, {
+      children: children,
+      hasAnalyticsContext,
+      hasIntlContext
+    });
+
+    const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+      mode: this.themeMode
+    }, children());
+
+    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+
+    if (hasIntlContext) {
+      wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
+        value: this.intl
+      }, wrappedChildren);
+    }
+
+    unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
+  } // TODO: until https://product-fabric.atlassian.net/browse/ED-5013
+  // we (unfortunately) need to re-render to pass down any updated context.
+  // selectively do this for nodeviews that opt-in via `hasAnalyticsContext`
+
+
+  forceUpdate({
+    intl,
+    themeMode
+  }) {
+    this.intl = intl;
+    this.themeMode = themeMode;
+    this.portals.forEach((portal, container) => {
+      if (!portal.hasAnalyticsContext && !this.useAnalyticsContext && !portal.hasIntlContext) {
+        return;
+      }
+
+      let wrappedChildren = portal.children();
+
+      const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+        mode: themeMode
+      }, wrappedChildren);
+
+      if (portal.hasAnalyticsContext && this.useAnalyticsContext) {
+        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+      }
+
+      if (portal.hasIntlContext) {
+        wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
+          value: this.intl
+        }, childrenWithThemeProviders());
+      }
+
+      unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
+    });
+  }
+
+  remove(container) {
+    this.portals.delete(container); // There is a race condition that can happen caused by Prosemirror vs React,
+    // where Prosemirror removes the container from the DOM before React gets
+    // around to removing the child from the container
+    // This will throw a NotFoundError: The node to be removed is not a child of this node
+    // Both Prosemirror and React remove the elements asynchronously, and in edge
+    // cases Prosemirror beats React
+
+    try {
+      unmountComponentAtNode(container);
+    } catch (error) {
+      if (this.onAnalyticsEvent) {
+        this.onAnalyticsEvent({
+          payload: {
+            action: ACTION.FAILED_TO_UNMOUNT,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            actionSubjectId: ACTION_SUBJECT_ID.REACT_NODE_VIEW,
+            attributes: {
+              error,
+              domNodes: {
+                container: container ? container.className : undefined,
+                child: container.firstElementChild ? container.firstElementChild.className : undefined
+              }
+            },
+            eventType: EVENT_TYPE.OPERATIONAL
+          }
+        });
+      }
+    }
+  }
+
+}
+
+class BasePortalProvider extends React.Component {
+  constructor(props) {
+    super(props);
+    this.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+  }
+
+  render() {
+    return this.props.render(this.portalProviderAPI);
+  }
+
+  componentDidUpdate() {
+    this.portalProviderAPI.forceUpdate({
+      intl: this.props.intl,
+      themeMode: this.props.themeMode
+    });
+  }
+
+}
+
+_defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
+
+export const PortalProvider = injectIntl(BasePortalProvider);
+export const PortalProviderWithThemeProviders = props => {
+  const intl = useIntl();
+  const globalTheme = useGlobalTheme();
+  return /*#__PURE__*/React.createElement(BasePortalProvider, {
+    intl: intl,
+    themeMode: globalTheme.mode,
+    onAnalyticsEvent: props.onAnalyticsEvent,
+    useAnalyticsContext: props.useAnalyticsContext,
+    render: props.render
+  });
+};
+export class PortalRenderer extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "handleUpdate", portals => this.setState({
+      portals
+    }));
+
+    props.portalProviderAPI.setContext(this);
+    props.portalProviderAPI.on('update', this.handleUpdate);
+    this.state = {
+      portals: new Map()
+    };
+  }
+
+  render() {
+    const {
+      portals
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(portals.entries()).map(([container, children]) => /*#__PURE__*/createPortal(children, container)));
+  }
+
+}
+/**
+ * Wrapper to re-provide modern analytics context to ReactNodeViews.
+ */
+
+const dummyAnalyticsContext = {
+  getAtlaskitAnalyticsContext() {},
+
+  getAtlaskitAnalyticsEventHandlers() {}
+
+};
+const AnalyticsContextWrapper = class extends React.Component {
+  render() {
+    const {
+      value
+    } = this.context.contextAdapter.analytics || {
+      value: dummyAnalyticsContext
+    };
+    return /*#__PURE__*/React.createElement(AnalyticsReactContext.Provider, {
+      value: value
+    }, this.props.children);
+  }
+
+};

package/dist/es2019/ui-color/ColorPalette/Color/index.js

@@ -0,0 +1,72 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import React, { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import { N0 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { buttonStyle, buttonWrapperStyle } from './styles';
+
+class Color extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "onMouseDown", e => {
+      e.preventDefault();
+    });
+
+    _defineProperty(this, "onClick", e => {
+      const {
+        onClick,
+        value,
+        label
+      } = this.props;
+      e.preventDefault();
+      onClick(value, label);
+    });
+  }
+
+  render() {
+    const {
+      autoFocus,
+      tabIndex,
+      value,
+      label,
+      isSelected,
+      borderColor,
+
+      /** this is not new usage - old code extracted from editor-core */
+
+      /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+      checkMarkColor = N0
+      /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+    } = this.props;
+    return jsx(Tooltip, {
+      content: label
+    }, jsx("span", {
+      css: buttonWrapperStyle
+    }, jsx("button", {
+      css: buttonStyle,
+      "aria-label": label,
+      role: "radio",
+      "aria-checked": isSelected,
+      onClick: this.onClick,
+      onMouseDown: this.onMouseDown,
+      tabIndex: tabIndex,
+      className: `${isSelected ? 'selected' : ''}`,
+      style: {
+        backgroundColor: value || 'transparent',
+        border: `1px solid ${borderColor}`
+      },
+      autoFocus: autoFocus
+    }, isSelected && jsx(EditorDoneIcon, {
+      primaryColor: checkMarkColor,
+      label: ""
+    }))));
+  }
+
+}
+
+export default Color;

package/dist/es2019/ui-color/ColorPalette/Color/styles.js

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+import { N0, N50, N900 } from '@atlaskit/theme/colors';
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export const buttonStyle = css`
+  height: 26px;
+  width: 26px;
+  background: ${N900};
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid ${N0};
+  cursor: pointer;
+  display: block;
+`;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export const buttonWrapperStyle = css`
+  border: 1px solid transparent;
+  margin: 1px;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  border-radius: 6px;
+  &:hover {
+    border-color: ${N50};
+  }
+`;
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-color/ColorPalette/Palettes/cellBackgroundColorPalette.js

@@ -0,0 +1,15 @@
+import { tableBackgroundBorderColor, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import getColorMessage from './getColorMessage';
+import paletteMessages from './paletteMessages';
+const cellBackgroundColorPalette = [];
+tableBackgroundColorPalette.forEach((label, color) => {
+  const key = label.toLowerCase().replace(' ', '-');
+  const message = getColorMessage(paletteMessages, key);
+  cellBackgroundColorPalette.push({
+    value: color,
+    label,
+    border: tableBackgroundBorderColor,
+    message
+  });
+});
+export default cellBackgroundColorPalette;

package/dist/es2019/ui-color/ColorPalette/Palettes/common.js

@@ -0,0 +1,25 @@
+import chromatism from 'chromatism';
+import { N800 } from '@atlaskit/theme/colors';
+/**
+ * For a given color set the alpha channel to alpha
+ *
+ * @param color color string, suppports HEX, RGB, RGBA etc.
+ * @param alpha Alpha channel value as fraction of 1
+ * @return CSS RGBA string with applied alpha channel
+ */
+
+function setAlpha(color, alpha) {
+  const {
+    r,
+    g,
+    b
+  } = chromatism.convert(color).rgb;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+
+export const DEFAULT_BORDER_COLOR = setAlpha(N800, 0.12);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-color/ColorPalette/Palettes/getColorMessage.js

@@ -0,0 +1,14 @@
+export default function getColorMessage(messages, color) {
+  let message = messages[color];
+
+  if (!message) {
+    // eslint-disable-next-line no-console
+    console.warn(`Text color palette does not have an internationalization message for color ${color.toUpperCase()}.
+You must add a message description to properly translate this color.
+Using current label as default message.
+This could have happen when someone changed the 'colorPalette' from 'adf-schema' without updating this file.
+`);
+  }
+
+  return message;
+}

package/dist/es2019/ui-color/ColorPalette/Palettes/index.js

@@ -0,0 +1 @@
+export { DEFAULT_BORDER_COLOR } from './common';

package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessages.js

@@ -0,0 +1,113 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  white: {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  'light-blue': {
+    id: 'fabric.theme.light-blue',
+    defaultMessage: 'Light blue',
+    description: 'Name of a color'
+  },
+  'light-teal': {
+    id: 'fabric.theme.light-teal',
+    defaultMessage: 'Light teal',
+    description: 'Name of a color'
+  },
+  'light-green': {
+    id: 'fabric.theme.light-green',
+    defaultMessage: 'Light green',
+    description: 'Name of a color'
+  },
+  'light-yellow': {
+    id: 'fabric.theme.light-yellow',
+    defaultMessage: 'Light yellow',
+    description: 'Name of a color'
+  },
+  'light-red': {
+    id: 'fabric.theme.light-red',
+    defaultMessage: 'Light red',
+    description: 'Name of a color'
+  },
+  'light-purple': {
+    id: 'fabric.theme.light-purple',
+    defaultMessage: 'Light purple',
+    description: 'Name of a color'
+  },
+  'light-gray': {
+    id: 'fabric.theme.light-gray',
+    defaultMessage: 'Light gray',
+    description: 'Name of a color'
+  },
+  blue: {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  teal: {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  green: {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  yellow: {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  red: {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color'
+  },
+  orange: {
+    id: 'fabric.theme.orange',
+    defaultMessage: 'Orange',
+    description: 'Name of a color.'
+  },
+  purple: {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  gray: {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  'dark-blue': {
+    id: 'fabric.theme.dark-blue',
+    defaultMessage: 'Dark blue',
+    description: 'Name of a color'
+  },
+  'dark-teal': {
+    id: 'fabric.theme.dark-teal',
+    defaultMessage: 'Dark teal',
+    description: 'Name of a color'
+  },
+  'dark-green': {
+    id: 'fabric.theme.dark-green',
+    defaultMessage: 'Dark green',
+    description: 'Name of a color'
+  },
+  'dark-yellow': {
+    id: 'fabric.theme.dark-yellow',
+    defaultMessage: 'Dark yellow',
+    description: 'Name of a color'
+  },
+  'dark-red': {
+    id: 'fabric.theme.dark-red',
+    defaultMessage: 'Dark red',
+    description: 'Name of a color'
+  },
+  'dark-purple': {
+    id: 'fabric.theme.dark-purple',
+    defaultMessage: 'Dark purple',
+    description: 'Name of a color'
+  }
+});

package/dist/es2019/ui-color/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -0,0 +1,143 @@
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { colors } from '@atlaskit/theme';
+import { darkPanelColors } from '../../../panel';
+import { DEFAULT_BORDER_COLOR } from './common';
+
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export const panelBackgroundPalette = [{
+  label: 'White',
+  value: colors.N0
+}, {
+  label: 'Light blue',
+  value: colors.B50
+}, {
+  label: 'Light teal',
+  value: colors.T50
+}, {
+  label: 'Light green',
+  value: colors.G50
+}, {
+  label: 'Light yellow',
+  value: colors.Y50
+}, {
+  label: 'Light red',
+  value: colors.R50
+}, {
+  label: 'Light purple',
+  value: colors.P50
+}, {
+  label: 'Light gray',
+  value: colors.N20
+}, {
+  label: 'Blue',
+  value: colors.B75
+}, {
+  label: 'Teal',
+  value: colors.T75
+}, {
+  label: 'Green',
+  value: colors.G75
+}, {
+  label: 'Yellow',
+  value: colors.Y75
+}, {
+  label: 'Red',
+  value: colors.R75
+}, {
+  label: 'Purple',
+  value: colors.P75
+}, {
+  label: 'Gray',
+  value: colors.N60
+}, {
+  label: 'Dark blue',
+  value: colors.B100
+}, {
+  label: 'Dark teal',
+  value: colors.T100
+}, {
+  label: 'Dark green',
+  value: colors.G200
+}, {
+  label: 'Dark yellow',
+  value: colors.Y200
+}, {
+  label: 'Dark red',
+  value: colors.R100
+}, {
+  label: 'Dark purple',
+  value: colors.P100
+}].map(color => ({ ...color,
+  border: DEFAULT_BORDER_COLOR
+}));
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+export const panelDarkModeBackgroundPalette = [{
+  label: 'Dark gray',
+  value: darkPanelColors.DarkGray
+}, {
+  label: 'Dark blue',
+  value: darkPanelColors.B1200S
+}, {
+  label: 'Dark teal',
+  value: darkPanelColors.T1200S
+}, {
+  label: 'Dark green',
+  value: darkPanelColors.G1200S
+}, {
+  label: 'Dark yellow',
+  value: darkPanelColors.Y1200S
+}, {
+  label: 'Dark red',
+  value: darkPanelColors.R1200S
+}, {
+  label: 'Dark purple',
+  value: darkPanelColors.P1200S
+}, {
+  label: 'Gray',
+  value: darkPanelColors.Gray
+}, {
+  label: 'blue',
+  value: darkPanelColors.B900
+}, {
+  label: 'teal',
+  value: darkPanelColors.T900
+}, {
+  label: 'green',
+  value: darkPanelColors.G900
+}, {
+  label: 'yellow',
+  value: darkPanelColors.Y900
+}, {
+  label: 'red',
+  value: darkPanelColors.R900
+}, {
+  label: 'purple',
+  value: darkPanelColors.P900
+}, {
+  label: 'Light gray',
+  value: darkPanelColors.LightGray
+}, {
+  label: 'Light blue',
+  value: darkPanelColors.B800S
+}, {
+  label: 'Light teal',
+  value: darkPanelColors.T900S
+}, {
+  label: 'Light green',
+  value: darkPanelColors.G900S
+}, {
+  label: 'Light yellow',
+  value: darkPanelColors.Y800S
+}, {
+  label: 'Light red',
+  value: darkPanelColors.R800S
+}, {
+  label: 'Light purple',
+  value: darkPanelColors.P800S
+}].map(color => ({ ...color,
+  border: DEFAULT_BORDER_COLOR
+}));

package/dist/es2019/ui-color/ColorPalette/Palettes/statusColorPalette.js

@@ -0,0 +1,56 @@
+import * as colors from '@atlaskit/theme/colors';
+
+/** this is not new usage - old code extracted from editor-core */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export const lightModeStatusColorPalette = [{
+  label: 'neutral',
+  value: colors.N40,
+  border: colors.N400
+}, {
+  label: 'purple',
+  value: colors.P50,
+  border: colors.P400
+}, {
+  label: 'blue',
+  value: colors.B50,
+  border: colors.B400
+}, {
+  label: 'red',
+  value: colors.R50,
+  border: colors.R400
+}, {
+  label: 'yellow',
+  value: colors.Y75,
+  border: colors.Y400
+}, {
+  label: 'green',
+  value: colors.G50,
+  border: colors.G400
+}];
+export const darkModeStatusColorPalette = [{
+  label: 'neutral',
+  value: '#7F9BB4',
+  border: colors.N400
+}, {
+  label: 'purple',
+  value: '#282249',
+  border: colors.P400
+}, {
+  label: 'blue',
+  value: '#0C294F',
+  border: colors.B400
+}, {
+  label: 'red',
+  value: '#441C13',
+  border: colors.R400
+}, {
+  label: 'yellow',
+  value: '#413001',
+  border: colors.Y400
+}, {
+  label: 'green',
+  value: '#052E21',
+  border: colors.G400
+}];
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/es2019/ui-color/ColorPalette/Palettes/textColorPalette.js

@@ -0,0 +1,25 @@
+import { colorPalette, colorPaletteExtended } from '@atlaskit/adf-schema';
+import { DEFAULT_BORDER_COLOR } from './common';
+import getColorMessage from './getColorMessage';
+import paletteMessages from './paletteMessages';
+
+const mapPaletteColor = (label, color) => {
+  const key = label.toLowerCase().replace(' ', '-');
+  const message = getColorMessage(paletteMessages, key);
+  return {
+    value: color,
+    label,
+    border: DEFAULT_BORDER_COLOR,
+    message
+  };
+}; // row 1
+
+
+export const textColorPalette = [];
+export const textColorPaletteExtended = [];
+colorPalette.forEach((label, color) => {
+  textColorPalette.push(mapPaletteColor(label, color));
+});
+colorPaletteExtended.forEach((label, color) => {
+  textColorPaletteExtended.push(mapPaletteColor(label, color));
+});

package/dist/es2019/ui-color/ColorPalette/Palettes/type.js

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