@atlaskit/editor-common 71.0.3 → 72.0.1

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

@@ -0,0 +1,120 @@
+import { defineMessages } from 'react-intl-next'; // These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
+// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
+
+export const newLightPalette = defineMessages({
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#97A0AF': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#00B8D9': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#36B37E': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FF5630': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color'
+  },
+  '#FF991F': {
+    id: 'fabric.theme.bold-orange',
+    defaultMessage: 'Bold orange',
+    description: 'Name of a color.'
+  },
+  '#6554C0': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#0747A6': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#008DA6': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#006644': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#BF2600': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#403294': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#172B4D': {
+    id: 'fabric.theme.default',
+    defaultMessage: 'Default',
+    description: 'Name of a color'
+  }
+});
+const darkModeWhite = defineMessages({
+  '#FFFFFF': {
+    id: 'fabric.theme.dark-gray',
+    defaultMessage: 'Dark gray',
+    description: 'Name of a color'
+  }
+});
+export const newDarkPalette = { ...newLightPalette,
+  ...darkModeWhite
+};

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

@@ -4,8 +4,10 @@ import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
+import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
+import getColorMessage from './Palettes/getColorMessage';
+import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
 import { colorPaletteWrapper } from './styles';
 
 /**
@@ -27,7 +29,7 @@ function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 
-  return contrastColor === N0 ? token('color.icon.inverse', N0) : token('color.icon', N500);
+  return contrastColor === N0 ? `var(--ds-icon-inverse, ${N0})` : `var(--ds-icon, ${N500})`;
 }
 
 const ColorPalette = props => {
@@ -40,8 +42,10 @@ const ColorPalette = props => {
     intl: {
       formatMessage
     },
-    textPalette = false
+    textPalette = false,
+    useSomewhatSemanticTextColorNames = false
   } = props;
+  const tokenTheme = useThemeObserver();
   const colorsPerRow = React.useMemo(() => {
     return palette.reduce((resultArray, item, index) => {
       const chunkIndex = Math.floor(index / cols);
@@ -61,16 +65,28 @@ const ColorPalette = props => {
     label,
     border,
     message
-  }, colorIdx) => jsx(Color, {
-    key: value,
-    value: value,
-    borderColor: border,
-    label: message ? formatMessage(message) : label,
-    onClick: onClick,
-    isSelected: value === selectedColor,
-    checkMarkColor: getCheckMarkColor(value, textPalette),
-    useDesignTokens: textPalette === true
-  })))));
+  }, colorIdx) => {
+    if (textPalette === true && useSomewhatSemanticTextColorNames) {
+      if (tokenTheme === 'dark') {
+        message = getColorMessage(newDarkPalette, value.toUpperCase());
+      }
+
+      if (tokenTheme === 'light') {
+        message = getColorMessage(newLightPalette, value.toUpperCase());
+      }
+    }
+
+    return jsx(Color, {
+      key: value,
+      value: value,
+      borderColor: border,
+      label: message ? formatMessage(message) : label,
+      onClick: onClick,
+      isSelected: value === selectedColor,
+      checkMarkColor: getCheckMarkColor(value, textPalette),
+      useDesignTokens: textPalette === true
+    });
+  }))));
 };
 
 export default injectIntl(ColorPalette);

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -8,7 +8,6 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
 import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
@@ -21,7 +20,7 @@ const wrapper = css`
   }
 `;
 const focusedMenuItemStyle = css`
-  box-shadow: inset 0px 0px 0px 2px ${token('color.border.focused', B100)};
+  box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-focused, ${B100})`};
   outline: none;
 `;
 
@@ -34,8 +33,8 @@ const buttonStyles = isActive => theme => {
       > span,
       > span:hover,
       > span:active {
-        background: ${token('color.background.selected', '#6c798f')};
-        color: ${token('color.text', '#fff')};
+        background: ${"var(--ds-background-selected, #6c798f)"};
+        color: ${"var(--ds-text, #fff)"};
       }
       :focus > span[aria-disabled='false'] {
         ${focusedMenuItemStyle};
@@ -49,24 +48,24 @@ const buttonStyles = isActive => theme => {
     return css`
       > span:hover[aria-disabled='false'] {
         color: ${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600)
+      light: `var(--ds-text, ${N900})`,
+      dark: `var(--ds-text, ${DN600})`
     })(theme)};
         background-color: ${themed({
-      light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-      dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+      light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
+      dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
     })(theme)};
       }
       > span:active[aria-disabled='false'] {
         background-color: ${themed({
-      light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-      dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+      light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
+      dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
     })(theme)};
       }
       > span[aria-disabled='true'] {
         color: ${themed({
-      light: token('color.text.disabled', N70),
-      dark: token('color.text.disabled', DN80)
+      light: `var(--ds-text-disabled, ${N70})`,
+      dark: `var(--ds-text-disabled, ${DN80})`
     })(theme)};
       }
       :focus > span[aria-disabled='false'] {
@@ -244,6 +243,7 @@ function DropdownMenuItem({
   }, jsx(CustomItem, {
     item: item,
     key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
+    testId: `dropdown-item__${String(item.content)}`,
     role: shouldUseDefaultRole ? 'button' : 'menuitem',
     iconBefore: item.elemBefore,
     iconAfter: item.elemAfter,
@@ -253,6 +253,7 @@ function DropdownMenuItem({
     }),
     "aria-label": item['aria-label'] || String(item.content),
     "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined,
+    "aria-keyshortcuts": item['aria-keyshortcuts'],
     onMouseDown: e => {
       e.preventDefault();
     },

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

@@ -31,6 +31,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     'aria-haspopup': ariaHasPopup,
     'aria-expanded': ariaExpanded,
     'aria-pressed': ariaPressed,
+    'aria-keyshortcuts': ariaKeyShortcuts,
     onClick,
     onItemClick
   } = props;
@@ -75,7 +76,8 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-expanded": ariaExpanded,
     "aria-haspopup": ariaHasPopup,
     "aria-label": ariaLabel,
-    "aria-pressed": ariaPressed
+    "aria-pressed": ariaPressed,
+    "aria-keyshortcuts": ariaKeyShortcuts
   }, children);
 
   if (!title) {

package/dist/es2019/utils/analytics.js

@@ -37,37 +37,4 @@ export let SEVERITY;
 })(SEVERITY || (SEVERITY = {}));
 
 export { UNSUPPORTED_CONTENT_LEVEL_SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './unsupportedContent/get-unsupported-content-level-data';
-export let EVENT_TYPE;
-
-(function (EVENT_TYPE) {
-  EVENT_TYPE["TRACK"] = "track";
-  EVENT_TYPE["UI"] = "ui";
-})(EVENT_TYPE || (EVENT_TYPE = {}));
-
-export let ACTION;
-
-(function (ACTION) {
-  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
-  ACTION["UNSUPPORTED_TOOLTIP_VIEWED"] = "viewed";
-})(ACTION || (ACTION = {}));
-
-export let ACTION_SUBJECT;
-
-(function (ACTION_SUBJECT) {
-  ACTION_SUBJECT["DOCUMENT"] = "document";
-  ACTION_SUBJECT["TOOLTIP"] = "tooltip";
-})(ACTION_SUBJECT || (ACTION_SUBJECT = {}));
-
-export let ACTION_SUBJECT_ID;
-
-(function (ACTION_SUBJECT_ID) {
-  ACTION_SUBJECT_ID["UNSUPPORTED_BLOCK"] = "unsupportedBlock";
-  ACTION_SUBJECT_ID["UNSUPPORTED_INLINE"] = "unsupportedInline";
-  ACTION_SUBJECT_ID["UNSUPPORTED_MARK"] = "unsupportedMark";
-  ACTION_SUBJECT_ID["UNSUPPORTED_ERROR"] = "unsupportedUnhandled";
-  ACTION_SUBJECT_ID["UNSUPPORTED_NODE_ATTRIBUTE"] = "unsupportedNodeAttribute";
-  ACTION_SUBJECT_ID["ON_UNSUPPORTED_INLINE"] = "onUnsupportedInline";
-  ACTION_SUBJECT_ID["ON_UNSUPPORTED_BLOCK"] = "onUnsupportedBlock";
-})(ACTION_SUBJECT_ID || (ACTION_SUBJECT_ID = {}));
-
 export const analyticsEventKey = 'EDITOR_ANALYTICS_EVENT';

package/dist/es2019/utils/builder.js

@@ -0,0 +1,16 @@
+export class Builder {
+  constructor(...more) {
+    this.data = [...more] || [];
+  }
+
+  add(nextOrTuple) {
+    return new Builder(
+    /**
+     * re-cast this to NewPlugin as we've done all the type
+     * safety, dependency checking, narrowing, during
+     * `SafePresetCheck & VerifyPluginDependencies`
+     */
+    nextOrTuple, ...this.data);
+  }
+
+}

package/dist/es2019/utils/compareNodes.js

@@ -1,5 +1,5 @@
 import { SortOrder } from '../types';
-var ContentType;
+export let ContentType;
 
 (function (ContentType) {
   ContentType[ContentType["NUMBER"] = 0] = "NUMBER";
@@ -13,6 +13,83 @@ var ContentType;
 function getLinkMark(node) {
   const [linkMark] = node.marks.filter(mark => mark.type.name === 'link');
   return linkMark || null;
+} // Source: https://stackoverflow.com/questions/12004808/does-javascript-take-local-decimal-separators-into-account
+
+
+function parseLocaleNumber(stringNumber) {
+  if (stringNumber.trim() === '') {
+    return null;
+  }
+
+  const locale = window.navigator.language;
+  const thousandSeparator = Intl.NumberFormat(locale).format(11111).replace(/\p{Number}/gu, '');
+  const decimalSeparator = Intl.NumberFormat(locale).format(1.1).replace(/\p{Number}/gu, '');
+  const maybeANumber = Number(stringNumber.replace(new RegExp('\\' + thousandSeparator, 'g'), '').replace(new RegExp('\\' + decimalSeparator), '.'));
+  const isANumber = !Number.isNaN(maybeANumber);
+
+  if (!isANumber) {
+    return null;
+  }
+
+  return maybeANumber;
+}
+
+function extractFirstWordFromString(text) {
+  // Firefox is the only browser that doesn't support it
+  if (!Intl || !Intl.Segmenter) {
+    // If the Segment API is not available
+    // let's fallback to a dumb way to extract the first word.
+    // However, this method doesn't cover some languages like Japanase
+    const firstEmptySpace = text.indexOf(' ');
+    const firstWord = firstEmptySpace !== -1 ? text.substring(0, firstEmptySpace) : text;
+    return firstWord;
+  }
+
+  const languageSegment = new Intl.Segmenter(window.navigator.language, {
+    granularity: 'word'
+  });
+  const segmentsIterator = languageSegment.segment(text);
+
+  if (!segmentsIterator) {
+    return text;
+  }
+
+  const segmentsArray = Array.from(segmentsIterator);
+
+  if (segmentsArray.length === 0) {
+    return text;
+  }
+
+  return segmentsArray[0].segment;
+}
+
+export function extractMetaFromTextNode(textNode) {
+  // treat as a link if contain a link
+  const linkMark = getLinkMark(textNode);
+
+  if (linkMark) {
+    const value = textNode.text || '';
+    return {
+      type: ContentType.LINK,
+      value
+    };
+  }
+
+  const text = textNode.text || '';
+  const firstWord = extractFirstWordFromString(text);
+  const maybeANumber = parseLocaleNumber(firstWord);
+
+  if (maybeANumber !== null) {
+    return {
+      type: ContentType.NUMBER,
+      value: maybeANumber
+    };
+  }
+
+  return {
+    type: ContentType.TEXT,
+    value: firstWord
+  };
 }
 
 function getMetaFromNode(node, options) {
@@ -61,33 +138,7 @@ function getMetaFromNode(node, options) {
 
     case 'text':
       {
-        // treat as a link if contain a link
-        const linkMark = getLinkMark(firstChild);
-
-        if (linkMark) {
-          const value = firstChild.text || '';
-          return {
-            type: ContentType.LINK,
-            value
-          };
-        }
-
-        const text = firstChild.text || '';
-        const firstEmptySpace = text.indexOf(' ');
-        const firstWord = firstEmptySpace !== -1 ? text.substring(0, firstEmptySpace) : text;
-        const maybeANumber = Number.parseFloat(firstWord);
-
-        if (!Number.isNaN(maybeANumber)) {
-          return {
-            type: ContentType.NUMBER,
-            value: maybeANumber
-          };
-        }
-
-        return {
-          type: ContentType.TEXT,
-          value: firstWord
-        };
+        return extractMetaFromTextNode(firstChild);
       }
 
     case 'status':

package/dist/es2019/utils/index.js

@@ -33,5 +33,7 @@ export { validateADFEntity, validationErrorHandler } from './validate-using-spec
 export { getShallowPropsDifference, getPropsDifference } from './compare-props';
 export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';
 export { isOutdatedBrowser } from './outdated-browsers';
-export { isReferencedSource } from './referentiality';
-export { sendLogs } from './sendLogs';
+export { isReferencedSource, removeConnectedNodes, getChildrenInfo, getNodeName } from './referentiality';
+export { sendLogs } from './sendLogs';
+export { Builder } from './builder';
+export { getItemCounterDigitsSize, getOrderFromOrderedListNode, resolveOrder } from './list';

package/dist/es2019/utils/list.js

@@ -0,0 +1,31 @@
+export const DEFAULT_ORDER = 1; // resolve "order" to a safe, 0+ integer, otherwise return undefined
+// Note: Any changes to this function should also be made to "resolveStart"
+// in packages/editor/adf-schema/src/schema/nodes/ordered-list.ts
+
+export const resolveOrder = order => {
+  const num = Number(order);
+
+  if (Number.isNaN(num)) {
+    return;
+  }
+
+  if (num < 0) {
+    return;
+  }
+
+  return Math.floor(Math.max(num, 0));
+};
+export const getOrderFromOrderedListNode = orderedListNode => {
+  var _orderedListNode$attr, _resolveOrder;
+
+  const order = orderedListNode === null || orderedListNode === void 0 ? void 0 : (_orderedListNode$attr = orderedListNode.attrs) === null || _orderedListNode$attr === void 0 ? void 0 : _orderedListNode$attr.order;
+  return (_resolveOrder = resolveOrder(order)) !== null && _resolveOrder !== void 0 ? _resolveOrder : DEFAULT_ORDER;
+};
+export const getItemCounterDigitsSize = options => {
+  var _resolveOrder2, _String, _String$split, _String$split$;
+
+  const order = (_resolveOrder2 = resolveOrder(options.order)) !== null && _resolveOrder2 !== void 0 ? _resolveOrder2 : DEFAULT_ORDER;
+  const itemsCount = typeof options.itemsCount === 'number' ? options.itemsCount : 0;
+  const largestCounter = order + (itemsCount - 1);
+  return (_String = String(largestCounter)) === null || _String === void 0 ? void 0 : (_String$split = _String.split('.')) === null || _String$split === void 0 ? void 0 : (_String$split$ = _String$split[0]) === null || _String$split$ === void 0 ? void 0 : _String$split$.length;
+};

package/dist/es2019/utils/plugin-state-factory.js

@@ -58,26 +58,26 @@ export function pluginFactory(pluginKey, reducer, options = {}) {
     createPluginState(dispatch, initialState) {
       return {
         init: (_, state) => isFunction(initialState) ? initialState(state) : initialState,
-        apply: (tr, _pluginState) => {
-          const oldState = mapping ? mapping(tr, _pluginState) : _pluginState;
-          let newState = oldState;
+        apply: (tr, _pluginState, _oldEditorState, newEditorState) => {
+          const oldPluginState = mapping ? mapping(tr, _pluginState, newEditorState) : _pluginState;
+          let newPluginState = oldPluginState;
           const meta = tr.getMeta(pluginKey);
 
           if (meta) {
-            newState = reducer(oldState, meta);
+            newPluginState = reducer(oldPluginState, meta);
           }
 
           if (onDocChanged && tr.docChanged) {
-            newState = onDocChanged(tr, newState);
+            newPluginState = onDocChanged(tr, newPluginState, newEditorState);
           } else if (onSelectionChanged && tr.selectionSet) {
-            newState = onSelectionChanged(tr, newState);
+            newPluginState = onSelectionChanged(tr, newPluginState, newEditorState);
           }
 
-          if (newState !== oldState) {
-            dispatch(pluginKey, newState);
+          if (newPluginState !== oldPluginState) {
+            dispatch(pluginKey, newPluginState);
           }
 
-          return newState;
+          return newPluginState;
         }
       };
     },