@elastic/eui 77.1.4 → 77.1.5

package/es/components/code/code_block_annotations.js

@@ -1,3 +1,4 @@
+var _excluded = ["lineNumber", "children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -5,6 +6,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,7 +27,8 @@ import { euiCodeBlockAnnotationsStyles } from './code_block_annotations.style';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var lineNumber = _ref.lineNumber,
-    children = _ref.children;
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -39,7 +43,9 @@ export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var buttonIconFocusStyle = useEuiButtonFocusCSS();
   var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
   var isDarkMode = colorMode === 'DARK';
-  return ___EmotionJSX(EuiPopover, {
+  return ___EmotionJSX(EuiPopover, _extends({
+    css: styles.euiCodeBlockAnnotation
+  }, rest, {
     isOpen: isOpen,
     closePopover: function closePopover() {
       return setIsOpen(false);
@@ -56,16 +62,19 @@ export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
       size: "s",
       color: isDarkMode ? euiTheme.colors.ink : 'ghost'
     })),
-    css: styles.euiCodeBlockAnnotation,
     zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
     ,
     anchorPosition: "downLeft",
     panelProps: {
       'data-test-subj': 'euiCodeBlockAnnotationPopover'
     }
-  }, children);
+  }), children);
 };
 EuiCodeBlockAnnotation.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   lineNumber: PropTypes.number.isRequired
 };
 var AnnotationInfoIcon = function AnnotationInfoIcon(props) {

package/es/components/code/code_block_copy.js

@@ -17,6 +17,7 @@ import { useInnerText } from '../inner_text';
 import { EuiCopy } from '../copy';
 import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
+import { NEW_LINE_REGEX_GLOBAL } from './utils';
 
 /**
  * Hook that returns copy-related state/logic/utils
@@ -31,7 +32,17 @@ export var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = useMemo(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -47,7 +58,8 @@ export var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/es/components/code/code_block_line.styles.js

@@ -44,7 +44,7 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/es/components/code/utils.js

@@ -24,6 +24,22 @@ import { euiCodeBlockLineStyles } from './code_block_line.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SUPPORTED_LANGUAGES = listLanguages();
 export var DEFAULT_LANGUAGE = 'text';
+
+/**
+ * Platform-agnostic new line regex that safely matches all standard
+ * line termination conventions:
+ * - LF: Unix-based platforms and JS-native sources like text areas
+ * - CRLF: Windows
+ * - CR: Mac Classic; to support files saved a long time ago
+ */
+export var NEW_LINE_REGEX = /\r\n|\r|\n/;
+
+/**
+ * Platform-agnostic global new line regex that safely matches all standard
+ * line termination conventions.
+ * See [NEW_LINE_REGEX]{@link NEW_LINE_REGEX} for more details.
+ */
+export var NEW_LINE_REGEX_GLOBAL = new RegExp(NEW_LINE_REGEX, 'g');
 export var checkSupportedLanguage = function checkSupportedLanguage(language) {
   return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE;
 };
@@ -49,14 +65,12 @@ export var nodeToHtml = function nodeToHtml(node, idx, nodes) {
     }), children && children.map(function (el, i) {
       return (
         // @ts-ignore - using a custom type here to handle JSX annotations
-        el.type === 'annotation' ?
-        // @ts-ignore - custom keys are passed by annotationElement below
-        ___EmotionJSX(EuiCodeBlockAnnotation, {
+        el.type === 'annotation' ? ___EmotionJSX(EuiCodeBlockAnnotation, {
+          className: "euiCodeBlock__lineAnnotation",
           lineNumber: el.lineNumber,
           children: el.annotation,
           key: i
-        }) // prettier-ignore
-        : nodeToHtml(el, i, nodes, depth + 1)
+        }) : nodeToHtml(el, i, nodes, depth + 1)
       );
     }));
   }
@@ -93,12 +107,12 @@ var addLineData = function addLineData(nodes, data) {
   return nodes.reduce(function (result, node) {
     var lineStart = data.lineNumber;
     if (node.type === 'text') {
-      if (!node.value.match(/\r\n?|\n/)) {
+      if (!node.value.match(NEW_LINE_REGEX)) {
         node.lineStart = lineStart;
         node.lineEnd = lineStart;
         result.push(node);
       } else {
-        var lines = node.value.split(/\r\n?|\n/);
+        var lines = node.value.split(NEW_LINE_REGEX);
         lines.forEach(function (line, i) {
           var num = i === 0 ? data.lineNumber : ++data.lineNumber;
           result.push({
@@ -172,11 +186,12 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
-        properties: (_properties = {
+        properties: {
           style: {
             inlineSize: width
-          }
-        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
+          },
+          className: ['euiCodeBlock__lineNumberWrapper', lineNumberWrapperStyles]
+        },
         children: []
       };
 
@@ -185,13 +200,10 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: _defineProperty({
-          className: [lineNumberStyles]
-        }, 'aria-hidden', true),
-        children: [{
-          type: 'text',
-          value: String(lineNumber)
-        }]
+        properties: (_properties = {
+          className: ['euiCodeBlock__lineNumber', lineNumberStyles]
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _properties),
+        children: []
       };
       lineNumberWrapperElement.children.push(lineNumberElement);
 

package/eui.d.ts

@@ -9259,10 +9259,12 @@ declare module '@elastic/eui/src/components/code/code_block_annotations.style' {
 }
 declare module '@elastic/eui/src/components/code/code_block_annotations' {
 	import { FunctionComponent, ReactNode } from 'react';
-	export type LineAnnotationMap = Record<number, ReactNode>;
-	export const EuiCodeBlockAnnotation: FunctionComponent<{
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export type LineAnnotationMap = Record<number, ReactNode>; type EuiCodeBlockAnnotationProps = CommonProps & {
 	    lineNumber: number;
-	}>;
+	};
+	export const EuiCodeBlockAnnotation: FunctionComponent<EuiCodeBlockAnnotationProps>;
+	export {};
 
 }
 declare module '@elastic/eui/src/components/code/code_block_line.styles' {
@@ -9300,6 +9302,20 @@ declare module '@elastic/eui/src/components/code/utils' {
 	};
 	export const SUPPORTED_LANGUAGES: string[];
 	export const DEFAULT_LANGUAGE = "text";
+	/**
+	 * Platform-agnostic new line regex that safely matches all standard
+	 * line termination conventions:
+	 * - LF: Unix-based platforms and JS-native sources like text areas
+	 * - CRLF: Windows
+	 * - CR: Mac Classic; to support files saved a long time ago
+	 */
+	export const NEW_LINE_REGEX: RegExp;
+	/**
+	 * Platform-agnostic global new line regex that safely matches all standard
+	 * line termination conventions.
+	 * See [NEW_LINE_REGEX]{@link NEW_LINE_REGEX} for more details.
+	 */
+	export const NEW_LINE_REGEX_GLOBAL: RegExp;
 	export const checkSupportedLanguage: (language: string) => string;
 	export const getHtmlContent: (data: RefractorNode[], children: ReactNode) => ReactElement[] | ReactNode;
 	export const isAstElement: (node: RefractorNode) => node is AST.Element;

package/i18ntokens.json

@@ -347,14 +347,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 26,
+        "line": 33,
         "column": 20,
-        "index": 1005
+        "index": 1140
       },
       "end": {
-        "line": 30,
+        "line": 37,
         "column": 3,
-        "index": 1141
+        "index": 1276
       }
     },
     "filepath": "src/components/code/code_block_annotations.tsx"
@@ -365,14 +365,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 36,
+        "line": 44,
         "column": 24,
-        "index": 1143
+        "index": 1519
       },
       "end": {
-        "line": 36,
+        "line": 44,
         "column": 67,
-        "index": 1186
+        "index": 1562
       }
     },
     "filepath": "src/components/code/code_block_copy.tsx"

package/lib/components/code/code_block_annotations.js

@@ -14,6 +14,7 @@ var _icon = require("../icon");
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _code_block_annotations = require("./code_block_annotations.style");
 var _react2 = require("@emotion/react");
+var _excluded = ["lineNumber", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,9 +25,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var lineNumber = _ref.lineNumber,
-    children = _ref.children;
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -41,7 +45,9 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var buttonIconFocusStyle = (0, _button.useEuiButtonFocusCSS)();
   var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
   var isDarkMode = colorMode === 'DARK';
-  return (0, _react2.jsx)(_popover.EuiPopover, {
+  return (0, _react2.jsx)(_popover.EuiPopover, _extends({
+    css: styles.euiCodeBlockAnnotation
+  }, rest, {
     isOpen: isOpen,
     closePopover: function closePopover() {
       return setIsOpen(false);
@@ -58,17 +64,20 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
       size: "s",
       color: isDarkMode ? euiTheme.colors.ink : 'ghost'
     })),
-    css: styles.euiCodeBlockAnnotation,
     zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
     ,
     anchorPosition: "downLeft",
     panelProps: {
       'data-test-subj': 'euiCodeBlockAnnotationPopover'
     }
-  }, children);
+  }), children);
 };
 exports.EuiCodeBlockAnnotation = EuiCodeBlockAnnotation;
 EuiCodeBlockAnnotation.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   lineNumber: _propTypes.default.number.isRequired
 };
 var AnnotationInfoIcon = function AnnotationInfoIcon(props) {

package/lib/components/code/code_block_copy.js

@@ -10,6 +10,7 @@ var _inner_text = require("../inner_text");
 var _copy = require("../copy");
 var _i18n = require("../i18n");
 var _button = require("../button");
+var _utils = require("./utils");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,7 +32,17 @@ var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = (0, _react.useMemo)(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(_utils.NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -47,7 +58,8 @@ var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/lib/components/code/code_block_line.styles.js

@@ -35,7 +35,7 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/lib/components/code/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseLineRanges = exports.nodeToHtml = exports.isAstElement = exports.highlightByLine = exports.getHtmlContent = exports.checkSupportedLanguage = exports.SUPPORTED_LANGUAGES = exports.DEFAULT_LANGUAGE = void 0;
+exports.parseLineRanges = exports.nodeToHtml = exports.isAstElement = exports.highlightByLine = exports.getHtmlContent = exports.checkSupportedLanguage = exports.SUPPORTED_LANGUAGES = exports.NEW_LINE_REGEX_GLOBAL = exports.NEW_LINE_REGEX = exports.DEFAULT_LANGUAGE = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _refractor = require("refractor");
 var _css = require("@emotion/css");
@@ -21,7 +21,25 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var SUPPORTED_LANGUAGES = (0, _refractor.listLanguages)();
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 var DEFAULT_LANGUAGE = 'text';
+
+/**
+ * Platform-agnostic new line regex that safely matches all standard
+ * line termination conventions:
+ * - LF: Unix-based platforms and JS-native sources like text areas
+ * - CRLF: Windows
+ * - CR: Mac Classic; to support files saved a long time ago
+ */
 exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
+var NEW_LINE_REGEX = /\r\n|\r|\n/;
+
+/**
+ * Platform-agnostic global new line regex that safely matches all standard
+ * line termination conventions.
+ * See [NEW_LINE_REGEX]{@link NEW_LINE_REGEX} for more details.
+ */
+exports.NEW_LINE_REGEX = NEW_LINE_REGEX;
+var NEW_LINE_REGEX_GLOBAL = new RegExp(NEW_LINE_REGEX, 'g');
+exports.NEW_LINE_REGEX_GLOBAL = NEW_LINE_REGEX_GLOBAL;
 var checkSupportedLanguage = function checkSupportedLanguage(language) {
   return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE;
 };
@@ -50,14 +68,12 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
     }), children && children.map(function (el, i) {
       return (
         // @ts-ignore - using a custom type here to handle JSX annotations
-        el.type === 'annotation' ?
-        // @ts-ignore - custom keys are passed by annotationElement below
-        (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+        el.type === 'annotation' ? (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+          className: "euiCodeBlock__lineAnnotation",
           lineNumber: el.lineNumber,
           children: el.annotation,
           key: i
-        }) // prettier-ignore
-        : nodeToHtml(el, i, nodes, depth + 1)
+        }) : nodeToHtml(el, i, nodes, depth + 1)
       );
     }));
   }
@@ -95,12 +111,12 @@ var addLineData = function addLineData(nodes, data) {
   return nodes.reduce(function (result, node) {
     var lineStart = data.lineNumber;
     if (node.type === 'text') {
-      if (!node.value.match(/\r\n?|\n/)) {
+      if (!node.value.match(NEW_LINE_REGEX)) {
         node.lineStart = lineStart;
         node.lineEnd = lineStart;
         result.push(node);
       } else {
-        var lines = node.value.split(/\r\n?|\n/);
+        var lines = node.value.split(NEW_LINE_REGEX);
         lines.forEach(function (line, i) {
           var num = i === 0 ? data.lineNumber : ++data.lineNumber;
           result.push({
@@ -174,11 +190,12 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
-        properties: (_properties = {
+        properties: {
           style: {
             inlineSize: width
-          }
-        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
+          },
+          className: ['euiCodeBlock__lineNumberWrapper', lineNumberWrapperStyles]
+        },
         children: []
       };
 
@@ -187,13 +204,10 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: _defineProperty({
-          className: [lineNumberStyles]
-        }, 'aria-hidden', true),
-        children: [{
-          type: 'text',
-          value: String(lineNumber)
-        }]
+        properties: (_properties = {
+          className: ['euiCodeBlock__lineNumber', lineNumberStyles]
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _properties),
+        children: []
       };
       lineNumberWrapperElement.children.push(lineNumberElement);
 

package/optimize/es/components/code/code_block_annotations.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["lineNumber", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +20,8 @@ import { euiCodeBlockAnnotationsStyles } from './code_block_annotations.style';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var lineNumber = _ref.lineNumber,
-    children = _ref.children;
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -33,7 +36,9 @@ export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var buttonIconFocusStyle = useEuiButtonFocusCSS();
   var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
   var isDarkMode = colorMode === 'DARK';
-  return ___EmotionJSX(EuiPopover, {
+  return ___EmotionJSX(EuiPopover, _extends({
+    css: styles.euiCodeBlockAnnotation
+  }, rest, {
     isOpen: isOpen,
     closePopover: function closePopover() {
       return setIsOpen(false);
@@ -50,14 +55,13 @@ export var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
       size: "s",
       color: isDarkMode ? euiTheme.colors.ink : 'ghost'
     })),
-    css: styles.euiCodeBlockAnnotation,
     zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
     ,
     anchorPosition: "downLeft",
     panelProps: {
       'data-test-subj': 'euiCodeBlockAnnotationPopover'
     }
-  }, children);
+  }), children);
 };
 var AnnotationInfoIcon = function AnnotationInfoIcon(props) {
   return ___EmotionJSX("svg", _extends({

package/optimize/es/components/code/code_block_copy.js

@@ -12,6 +12,7 @@ import { useInnerText } from '../inner_text';
 import { EuiCopy } from '../copy';
 import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
+import { NEW_LINE_REGEX_GLOBAL } from './utils';
 
 /**
  * Hook that returns copy-related state/logic/utils
@@ -26,7 +27,17 @@ export var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = useMemo(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -42,7 +53,8 @@ export var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/optimize/es/components/code/code_block_line.styles.js

@@ -44,7 +44,7 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };