@atlaskit/adf-schema 57.0.16 → 57.1.1

package/dist/es2019/utils/clamp-lightness.js

@@ -0,0 +1,65 @@
+import { rgbFromHex } from './rgb-from-hex';
+import { rgbToLch } from './rgb-to-lch';
+const clamp = (i, min, max) => Math.round(Math.min(Math.max(i, min), max));
+const rgbToHex = ({
+  r,
+  g,
+  b
+}) => {
+  const convertComponent = c => {
+    const cBase16 = c.toString(16);
+    return cBase16.length === 1 ? `0${cBase16}` : cBase16;
+  };
+  return `#${convertComponent(r)}${convertComponent(g)}${convertComponent(b)}`;
+};
+const lchToLab = ({
+  l,
+  c,
+  h
+}) => {
+  const convertH = Number.isNaN(h) ? 0 : h * (Math.PI / 180);
+  return {
+    l,
+    a: Math.cos(convertH) * c,
+    b: Math.sin(convertH) * c
+  };
+};
+const labToXyz = ({
+  l,
+  a,
+  b
+}) => {
+  const convertComponent = c => c > 0.206896552 ? Math.pow(c, 3) : 0.12841855 * (c - 0.137931034);
+  const y = (l + 16) / 116;
+  const x = a / 500 + y;
+  const z = y - b / 200;
+  return {
+    x: convertComponent(x) * 0.95047,
+    y: convertComponent(y),
+    z: convertComponent(z) * 1.08883
+  };
+};
+const xyzToRgb = ({
+  x,
+  y,
+  z
+}) => {
+  const convertComponent = c => 255 * (c <= 0.00304 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055);
+  return {
+    r: clamp(convertComponent(3.2404542 * x - 1.5371385 * y - 0.4985314 * z), 0, 255),
+    g: clamp(convertComponent(-0.969266 * x + 1.8760108 * y + 0.041556 * z), 0, 255),
+    b: clamp(convertComponent(0.0556434 * x - 0.2040259 * y + 1.0572252 * z), 0, 255)
+  };
+};
+const lchToRgb = lch => xyzToRgb(labToXyz(lchToLab(lch)));
+export const clampLightness = (color, newPercent) => {
+  const rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return color;
+  }
+
+  // LCH (rather than HSL) gives the best results here as the L component in LCH is based on human color perception
+  const lch = rgbToLch(rgb);
+  lch.l = clamp(newPercent, 0, 100);
+  return rgbToHex(lchToRgb(lch));
+};

package/dist/es2019/utils/colors.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-namespace
-import * as namedColors from 'css-color-names';
+/* eslint-disable @atlaskit/editor/no-re-export -- VOLTC-139 tracks removal of these deprecated compatibility re-export shims. */
 
 /**
  * We're avoding importing these colors from @atlaskit/theme since we
@@ -7,7 +6,6 @@ import * as namedColors from 'css-color-names';
  * TODO: Refactor this once tokenization by Core team is ready
  * https://product-fabric.atlassian.net/browse/CS-908
  */
-
 export const R50 = '#FFEBE6';
 export const R75 = '#FFBDAD';
 export const R100 = '#FF8F73';
@@ -87,95 +85,15 @@ export const T200 = '#C6EDFB';
 export const T300 = '#00B8D9';
 export const T500 = '#008DA6';
 
-/**
- * @returns String with HEX-coded color.
- */
-export function normalizeHexColor(color, defaultColor) {
-  if (!color) {
-    return null;
-  }
-
-  // Normalize to hex
-  color = color.trim().toLowerCase();
-  if (isHex(color)) {
-    // Normalize 3-hex to 6-hex colours
-    if (color.length === 4) {
-      color = color.split('').map(c => c === '#' ? '#' : `${c}${c}`).join('');
-    }
-  } else if (isRgb(color)) {
-    return rgbToHex(color);
-  } else {
-    // http://dev.w3.org/csswg/css-color/#named-colors
-    if (color === 'default') {
-      return null;
-    } else if (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    namedColors.default &&
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    namedColors.default[color]) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      color = namedColors.default[color];
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } else if (namedColors && namedColors[color]) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      color = namedColors[color];
-    } else {
-      return null;
-    }
-  }
-  if (color === defaultColor) {
-    return null;
-  }
-  return color;
-}
-
-/**
- * Converts hex color format to rgb.
- * Works well with full hex color format and shortcut as well.
- *
- * @param hex - hex color string (#xxx, or #xxxxxx)
- */
-export function hexToRgb(color) {
-  if (!isHex(color)) {
-    return null;
-  }
-  let colorBits = color.substring(1).split('');
-  if (colorBits.length === 3) {
-    colorBits = [colorBits[0], colorBits[0], colorBits[1], colorBits[1], colorBits[2], colorBits[2]];
-  }
-  const rgb = Number(`0x${colorBits.join('')}`);
-  return `rgb(${rgb >> 16 & 255},${rgb >> 8 & 255},${rgb & 255})`;
-}
-
-/**
- * Converts hex color format to rgba.
- *
- * @param hex - hex color string (#xxx, or #xxxxxx)
- */
-export function hexToRgba(rawColor, alpha) {
-  const color = normalizeHexColor(rawColor);
-  if (!color) {
-    return null;
-  }
-  const hex2rgb = color => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return color.match(/[a-z0-9]{2}/giu).map(hex => parseInt(hex, 16));
-  };
-  return `rgba(${hex2rgb(color).concat(alpha).join(',')})`;
-}
-export function rgbToHex(value) {
-  const matches = value.match(/(0?\.?\d{1,3})%?\b/gu);
-  if (matches && matches.length >= 3) {
-    const [red, green, blue] = matches.map(Number);
-    return '#' + (blue | green << 8 | red << 16 | 1 << 24).toString(16).slice(1);
-  }
-  return null;
-}
-const IS_RGB_REGEX = /rgba?\(/u;
-const IS_HEX_REGEX = /^#([A-Fa-f0-9]{3}){1,2}$/u;
-export function isRgb(color) {
-  return IS_RGB_REGEX.test(color);
-}
-export function isHex(color) {
-  return IS_HEX_REGEX.test(color);
-}
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { normalizeHexColor } from './normalize-hex-color';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { hexToRgb } from './hex-to-rgb';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { hexToRgba } from './hex-to-rgba';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { rgbToHex } from './rgb-to-hex';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { isRgb } from './is-rgb';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { isHex } from './is-hex';

package/dist/es2019/utils/confluence/acNameToEmoji.js

@@ -0,0 +1,14 @@
+import { acNameToEmojiMap } from './acNameToEmojiMap';
+import { DEFAULT_EMOJI_ID } from './emoji';
+export function acNameToEmoji(acName) {
+  const emojiData = acNameToEmojiMap[acName];
+  return emojiData ? {
+    id: emojiData[0],
+    shortName: emojiData[1],
+    text: emojiData[2]
+  } : {
+    id: DEFAULT_EMOJI_ID,
+    shortName: `:${acName}:`,
+    text: ''
+  };
+}

package/dist/es2019/utils/confluence/acNameToEmojiMap.js

@@ -0,0 +1,33 @@
+/**
+ * Confluence glyphs ac:name of <ac:emoticon /> map to new emojis
+ * {
+ *   [ac:name] : ['emoji-id', 'emoji-shortName', 'emoji-fallback']
+ *   ...
+ * }
+ * Glyphs that do not map to Fabric Emoji
+ * will be mapped to Emoji Id '2b50' (:star:) with preserving ac:name as shortName attribute;
+ */
+export const acNameToEmojiMap = {
+  smile: ['1f642', ':slight_smile:', '\uD83D\uDE42'],
+  sad: ['1f641', ':slight_frown:', '\uD83D\uDE41'],
+  cheeky: ['1f61b', ':stuck_out_tongue:', '\uD83D\uDE1B'],
+  laugh: ['1f600', ':grinning:', '\uD83D\uDE00'],
+  wink: ['1f609', ':wink:', '\uD83D\uDE09'],
+  information: ['2139', ':information_source:', '\u2139'],
+  tick: ['2705', ':white_check_mark:', '\u2705'],
+  cross: ['274c', ':x:', '\u274C'],
+  warning: ['26a0', ':warning:', '\u26A0'],
+  plus: ['2795', ':heavy_plus_sign:', '\u2795'],
+  minus: ['2796', ':heavy_minus_sign:', '\u2796'],
+  question: ['2753', ':question:', '\u003F'],
+  'thumbs-up': ['1f44d', ':thumbsup:', '\uD83D\uDC4D'],
+  'thumbs-down': ['1f44e', ':thumbsdown:', '\uD83D\uDC4E'],
+  'light-on': ['1f4a1', ':bulb:', '\uD83D\uDCA1'],
+  'yellow-star': ['2b50', ':star:', '\uD83D\uDC9B'],
+  'light-off': ['1f6ab', ':no_entry_sign:', '\uD83D\uDEAB'],
+  'red-star': ['2764', ':heart:', '\u2764\uFE0F'],
+  'green-star': ['1f49a', ':green_heart:', '\uD83D\uDC9A'],
+  'blue-star': ['1f499', ':blue_heart:', '\uD83D\uDC99'],
+  heart: ['2764', ':heart:', '\u2764\uFE0F'],
+  'broken-heart': ['1f494', ':broken_heart:', '\uD83D\uDC94']
+};

package/dist/es2019/utils/confluence/acShortcutToEmoji.js

@@ -0,0 +1,8 @@
+import { HC_EMOTICON_PREFIX } from './emoji';
+export function acShortcutToEmoji(hipchatEmoticonShortName) {
+  return {
+    id: `${HC_EMOTICON_PREFIX}${hipchatEmoticonShortName}`,
+    shortName: `:${hipchatEmoticonShortName}:`,
+    text: ''
+  };
+}

package/dist/es2019/utils/confluence/emoji.js

@@ -1,80 +1,20 @@
+/* eslint-disable @atlaskit/editor/no-re-export -- VOLTC-139 tracks removal of these deprecated compatibility re-export shims. */
+
 // Default emoji id for Confluence glyphs that has no match to Fabric Emoji
-const DEFAULT_EMOJI_ID = '2b50';
+export const DEFAULT_EMOJI_ID = '2b50';
 
 // Default ac:name for emoticons as a fallback is `blue-star`
-const DEFAULT_EMOJI_ACNAME = 'blue-star';
+export const DEFAULT_EMOJI_ACNAME = 'blue-star';
 
 // ac:hipchat-emoticon prefix when converting to Emoji ID
-const HC_EMOTICON_PREFIX = 'atlassian-';
-
-/**
- * Confluence glyphs ac:name of <ac:emoticon /> map to new emojis
- * {
- *   [ac:name] : ['emoji-id', 'emoji-shortName', 'emoji-fallback']
- *   ...
- * }
- * Glyphs that do not map to Fabric Emoji
- * will be mapped to Emoji Id '2b50' (:star:) with preserving ac:name as shortName attribute;
- */
-const acNameToEmojiMap = {
-  smile: ['1f642', ':slight_smile:', '\uD83D\uDE42'],
-  sad: ['1f641', ':slight_frown:', '\uD83D\uDE41'],
-  cheeky: ['1f61b', ':stuck_out_tongue:', '\uD83D\uDE1B'],
-  laugh: ['1f600', ':grinning:', '\uD83D\uDE00'],
-  wink: ['1f609', ':wink:', '\uD83D\uDE09'],
-  information: ['2139', ':information_source:', '\u2139'],
-  tick: ['2705', ':white_check_mark:', '\u2705'],
-  cross: ['274c', ':x:', '\u274C'],
-  warning: ['26a0', ':warning:', '\u26A0'],
-  plus: ['2795', ':heavy_plus_sign:', '\u2795'],
-  minus: ['2796', ':heavy_minus_sign:', '\u2796'],
-  question: ['2753', ':question:', '\u003F'],
-  'thumbs-up': ['1f44d', ':thumbsup:', '\uD83D\uDC4D'],
-  'thumbs-down': ['1f44e', ':thumbsdown:', '\uD83D\uDC4E'],
-  'light-on': ['1f4a1', ':bulb:', '\uD83D\uDCA1'],
-  'yellow-star': ['2b50', ':star:', '\uD83D\uDC9B'],
-  'light-off': ['1f6ab', ':no_entry_sign:', '\uD83D\uDEAB'],
-  'red-star': ['2764', ':heart:', '\u2764\uFE0F'],
-  'green-star': ['1f49a', ':green_heart:', '\uD83D\uDC9A'],
-  'blue-star': ['1f499', ':blue_heart:', '\uD83D\uDC99'],
-  heart: ['2764', ':heart:', '\u2764\uFE0F'],
-  'broken-heart': ['1f494', ':broken_heart:', '\uD83D\uDC94']
-};
-export function acNameToEmoji(acName) {
-  const emojiData = acNameToEmojiMap[acName];
-  return emojiData ? {
-    id: emojiData[0],
-    shortName: emojiData[1],
-    text: emojiData[2]
-  } : {
-    id: DEFAULT_EMOJI_ID,
-    shortName: `:${acName}:`,
-    text: ''
-  };
-}
-export function emojiIdToAcName(emojiId) {
-  const filterEmojis = acName => acNameToEmojiMap[acName] ? acNameToEmojiMap[acName][0] === emojiId : false;
-  return Object.keys(acNameToEmojiMap).filter(filterEmojis)[0];
-}
-export function acShortcutToEmoji(hipchatEmoticonShortName) {
-  return {
-    id: `${HC_EMOTICON_PREFIX}${hipchatEmoticonShortName}`,
-    shortName: `:${hipchatEmoticonShortName}:`,
-    text: ''
-  };
-}
-function getAcNameFromShortName(shortName) {
-  return shortName.slice(shortName[0] === ':' ? 1 : 0, shortName[shortName.length - 1] === ':' ? -1 : shortName.length);
-}
-export function getEmojiAcName({
-  id,
-  shortName
-}) {
-  if (DEFAULT_EMOJI_ID === id) {
-    const possibleName = getAcNameFromShortName(shortName);
-    if (possibleName in acNameToEmojiMap) {
-      return possibleName;
-    }
-  }
-  return emojiIdToAcName(id) || DEFAULT_EMOJI_ACNAME;
-}
+export const HC_EMOTICON_PREFIX = 'atlassian-';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { acNameToEmoji } from './acNameToEmoji';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { emojiIdToAcName } from './emojiIdToAcName';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { acShortcutToEmoji } from './acShortcutToEmoji';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { getEmojiAcName } from './getEmojiAcName';
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-re-exports -- Public compatibility re-export.
+export { acNameToEmojiMap } from './acNameToEmojiMap';

package/dist/es2019/utils/confluence/emojiIdToAcName.js

@@ -0,0 +1,5 @@
+import { acNameToEmojiMap } from './acNameToEmojiMap';
+export function emojiIdToAcName(emojiId) {
+  const filterEmojis = acName => acNameToEmojiMap[acName] ? acNameToEmojiMap[acName][0] === emojiId : false;
+  return Object.keys(acNameToEmojiMap).filter(filterEmojis)[0];
+}

package/dist/es2019/utils/confluence/getEmojiAcName.js

@@ -0,0 +1,18 @@
+import { acNameToEmojiMap } from './acNameToEmojiMap';
+import { DEFAULT_EMOJI_ACNAME, DEFAULT_EMOJI_ID } from './emoji';
+import { emojiIdToAcName } from './emojiIdToAcName';
+function getAcNameFromShortName(shortName) {
+  return shortName.slice(shortName[0] === ':' ? 1 : 0, shortName[shortName.length - 1] === ':' ? -1 : shortName.length);
+}
+export function getEmojiAcName({
+  id,
+  shortName
+}) {
+  if (DEFAULT_EMOJI_ID === id) {
+    const possibleName = getAcNameFromShortName(shortName);
+    if (possibleName in acNameToEmojiMap) {
+      return possibleName;
+    }
+  }
+  return emojiIdToAcName(id) || DEFAULT_EMOJI_ACNAME;
+}

package/dist/es2019/utils/editor-palette.js

@@ -1,29 +1,5 @@
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
-
-/**
- * This takes an adf hex color and returns a matching border palette color.
- *
- * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
- *
- * Example usage
- * ```tsx
- * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
- * //     ^? const cssValue: string
- * <div style={{borderColor: cssValue}} />
- * ```
- * The names of tokens can change over time, and the values of tokens will differ between themes.
- * The exact output of this function is an implementation detail and should only be used when rendering
- * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
- * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
- * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
- */
-export function hexToEditorBorderPaletteColor(hexColor) {
-  // Ts ignore was used to allow use of conditional return type
-  // (preferencing better type on consumption over safety in implementation)
-  // @ts-expect-error
-  return hexColor ? editorBorderPalette[hexColor.toUpperCase()] : undefined;
-}
 export const editorBorderPalette = {
   /** gray - subtle */
   '#091E4224': 'var(--ds-border, #091E4224)',
@@ -32,32 +8,6 @@ export const editorBorderPalette = {
   /** gray - bold */
   '#172B4D': 'var(--ds-text, #172B4D)'
 };
-
-/**
- * This takes an adf hex color and returns a matching text palette color.
- *
- * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
- *
- * Example usage
- * ```tsx
- * const cssValue = hexToTextPaletteColor('#0747A6');
- * //     ^? const cssValue: string
- * <span style={{textColor: cssValue}} />
- * ```
- * The names of tokens can change over time, and the values of tokens will differ between themes.
- * The exact output of this function is an implementation detail and should only be used when rendering
- * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
- * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
- * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
- */
-export function hexToEditorTextPaletteColor(hexColor) {
-  const normalizedHexColor = hexColor ? hexColor.toUpperCase() : undefined;
-
-  // Ts ignore was used to allow use of conditional return type
-  // (preferencing better type on consumption over safety in implementation)
-  // @ts-expect-error
-  return normalizedHexColor ? editorTextPalette[normalizedHexColor] : undefined;
-}
 export const editorTextPalette = {
   /** blue - light */
   '#B3D4FF': 'var(--ds-background-accent-blue-subtler, #B3D4FF)',
@@ -126,30 +76,6 @@ export const editorTextPalette = {
   /** yellow - strong */
   '#7F5F01': 'var(--ds-text-accent-yellow, #7F5F01)'
 };
-
-/**
- * This takes an ADF hex color and returns a matching text background palette color.
- *
- * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
- *
- * Example usage
- * ```tsx
- * const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
- * //     ^? const cssValue: string
- * <span style={{backgroundColor: cssValue}} />
- * ```
- * The names of tokens can change over time, and the values of tokens will differ between themes.
- * The exact output of this function is an implementation detail and should only be used when rendering
- * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
- * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
- * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
- */
-export function hexToEditorTextBackgroundPaletteColor(hexColor) {
-  // Ts ignore was used to allow use of conditional return type
-  // (preferring better type on consumption over safety in implementation)
-  // @ts-expect-error
-  return hexColor ? textBackgroundColorPalette[hexColor.toUpperCase()] : undefined;
-}
 export const textBackgroundColorPalette = {
   /** Gray - light */
   '#DCDFE4': 'var(--ds-background-accent-gray-subtler, #DCDFE4)',
@@ -172,26 +98,6 @@ export const textBackgroundColorPalette = {
   /** Green - light */
   '#ABF5D1': 'var(--ds-background-accent-green-subtler, #ABF5D1)'
 };
-/**
- * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
- * If the provided color does not exist in the Editor color palette, this function returns undefined.
- *
- * This should only be used when rendering content where CSS variables are not feasible, such as a non-CSS environment
- * or to enable cross-app copy/paste.
- *
- * WARNING: If the rendered theme changes (such as from light -> dark mode) the value returned here will no longer match
- * the surrounding UI and will need to be re-fetched.
- * In addition, the values of tokens will differ between themes and the value for a given theme can and will change.
- * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
- * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color.
- */
-export function hexToEditorBackgroundPaletteRawValue(hexColor) {
-  // Ts ignore was used to allow use of conditional return type
-  // (preferencing better type on consumption over safety in implementation)
-  const tokenData = hexColor ? editorBackgroundPalette[hexColor.toUpperCase()] : undefined;
-  // @ts-expect-error
-  return tokenData ? tokenData.getValue(hexColor) : undefined;
-}
 /**
  * Values are asserted to improve generated type declarations
  * Using object structure as getValue() function needed for table values, and other
@@ -385,5 +291,4 @@ export const editorBackgroundPalette = {
     getValue: () => '#B7B9BE',
     token: 'var(--ds-background-accent-gray-subtler-hovered, #B7B9BE)'
   }
-};
-export {};
+};

package/dist/es2019/utils/expand-shorthand-hex.js

@@ -0,0 +1,2 @@
+const SHORTHAND_HEX_REGEX = /^#?([a-f\d])([a-f\d])([a-f\d])$/iu;
+export const expandShorthandHex = input => input.replace(SHORTHAND_HEX_REGEX, (_m, r, g, b) => r + r + g + g + b + b);

package/dist/es2019/utils/get-dark-mode-lch-color.js

@@ -0,0 +1,16 @@
+import { clampLightness } from './clamp-lightness';
+import { rgbFromHex } from './rgb-from-hex';
+import { rgbToLch } from './rgb-to-lch';
+const getLightness = color => {
+  const rgb = rgbFromHex(color);
+  if (rgb === null) {
+    return 0;
+  }
+  const lch = rgbToLch(rgb);
+  return lch.l;
+};
+export const getDarkModeLCHColor = currentBackgroundColor => {
+  const lightness = getLightness(currentBackgroundColor);
+  const newLightness = Math.abs(100 - lightness);
+  return clampLightness(currentBackgroundColor, newLightness).toUpperCase();
+};

package/dist/es2019/utils/get-extension-attrs.js

@@ -0,0 +1,20 @@
+import { isValidLayout } from './is-valid-layout';
+export const getExtensionAttrs = (dom, isInline = false) => {
+  const extensionType = dom.getAttribute('data-extension-type');
+  const extensionKey = dom.getAttribute('data-extension-key');
+  if (!extensionType || !extensionKey) {
+    return false;
+  }
+  const attrs = {
+    extensionType,
+    extensionKey,
+    text: dom.getAttribute('data-text') || undefined,
+    parameters: JSON.parse(dom.getAttribute('data-parameters') || '{}'),
+    localId: dom.getAttribute('data-local-id') || undefined
+  };
+  if (!isInline) {
+    const rawLayout = dom.getAttribute('data-layout');
+    attrs.layout = isValidLayout(rawLayout) ? rawLayout : 'default';
+  }
+  return attrs;
+};

package/dist/es2019/utils/get-link-match.js

@@ -0,0 +1,26 @@
+/**
+ * This file has been partially duplicated in packages/linking-platform/linking-common/src/url.ts
+ * Any changes made here should be mirrored there.
+ * Ticket for dedeplication: https://product-fabric.atlassian.net/browse/EDM-7138
+ * Ticket for fixing linkification of filename-like urls: https://product-fabric.atlassian.net/browse/EDM-7190
+ */
+
+import { linkifyMatch } from './linkify-match';
+import { linkify } from './url';
+/**
+ * Attempt to find a link match. Tries to use our regex search first.
+ * If this doesn't match (e.g. no protocol), try using linkify-it library.
+ * Returns null if url string empty or no string given, or if no match found.
+ */
+export function getLinkMatch(str) {
+  if (!str) {
+    return null;
+  }
+  // linkify-it mishandles closing braces on long urls, so we preference using our own regex first:
+  // https://product-fabric.atlassian.net/browse/ED-13669
+  let match = linkifyMatch(str);
+  if (!match.length) {
+    match = linkify.match(str);
+  }
+  return match && match[0];
+}

package/dist/es2019/utils/hex-to-editor-background-palette-raw-value.js

@@ -0,0 +1,21 @@
+import { editorBackgroundPalette } from './editor-palette';
+/**
+ * Takes an ADF hex color and returns the rendered hex code for the associated background palette design token using getTokenValue.
+ * If the provided color does not exist in the Editor color palette, this function returns undefined.
+ *
+ * This should only be used when rendering content where CSS variables are not feasible, such as a non-CSS environment
+ * or to enable cross-app copy/paste.
+ *
+ * WARNING: If the rendered theme changes (such as from light -> dark mode) the value returned here will no longer match
+ * the surrounding UI and will need to be re-fetched.
+ * In addition, the values of tokens will differ between themes and the value for a given theme can and will change.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color.
+ */
+export function hexToEditorBackgroundPaletteRawValue(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  const tokenData = hexColor ? editorBackgroundPalette[hexColor.toUpperCase()] : undefined;
+  // @ts-expect-error
+  return tokenData ? tokenData.getValue(hexColor) : undefined;
+}

package/dist/es2019/utils/hex-to-editor-border-palette-color.js

@@ -0,0 +1,24 @@
+import { editorBorderPalette } from './editor-palette';
+/**
+ * This takes an adf hex color and returns a matching border palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
+ * //     ^? const cssValue: string
+ * <div style={{borderColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorBorderPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferencing better type on consumption over safety in implementation)
+  // @ts-expect-error
+  return hexColor ? editorBorderPalette[hexColor.toUpperCase()] : undefined;
+}

package/dist/es2019/utils/hex-to-editor-text-background-palette-color.js

@@ -0,0 +1,24 @@
+import { textBackgroundColorPalette } from './editor-palette';
+/**
+ * This takes an ADF hex color and returns a matching text background palette color.
+ *
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
+ *
+ * Example usage
+ * ```tsx
+ * const cssValue = hexToEditorTextBackgroundPaletteColor('#0747A6');
+ * //     ^? const cssValue: string
+ * <span style={{backgroundColor: cssValue}} />
+ * ```
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
+ * The exact output of this function is an implementation detail and should only be used when rendering
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
+ */
+export function hexToEditorTextBackgroundPaletteColor(hexColor) {
+  // Ts ignore was used to allow use of conditional return type
+  // (preferring better type on consumption over safety in implementation)
+  // @ts-expect-error
+  return hexColor ? textBackgroundColorPalette[hexColor.toUpperCase()] : undefined;
+}