@ember-eui/core 4.4.0 → 5.0.0-alpha.1

package/addon/utils/detect-element-resize.js

@@ -0,0 +1,248 @@
+/**
+ * Detect Element Resize.
+ * https://github.com/sdecima/javascript-detect-element-resize
+ * Sebastian Decima
+ *
+ * Forked from version 0.5.3; includes the following modifications:
+ * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+ * 2) Defer initialization code via a top-level function wrapper (to support SSR).
+ * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+ * 4) Add nonce for style element.
+ * 5) Added support for injecting custom window object
+ **/
+
+export default function createDetectElementResize(nonce, hostWindow) {
+  // Check `document` and `window` in case of server-side rendering
+  var _window;
+  if (typeof hostWindow !== 'undefined') {
+    _window = hostWindow;
+  } else if (typeof window !== 'undefined') {
+    _window = window;
+  } else if (typeof self !== 'undefined') {
+    _window = self;
+  } else {
+    //eslint-disable-next-line
+    _window = global;
+  }
+
+  var attachEvent =
+    typeof _window.document !== 'undefined' && _window.document.attachEvent;
+
+  if (!attachEvent) {
+    var requestFrame = (function () {
+      var raf =
+        _window.requestAnimationFrame ||
+        _window.mozRequestAnimationFrame ||
+        _window.webkitRequestAnimationFrame ||
+        function (fn) {
+          return _window.setTimeout(fn, 20);
+        };
+      return function (fn) {
+        return raf(fn);
+      };
+    })();
+
+    var cancelFrame = (function () {
+      var cancel =
+        _window.cancelAnimationFrame ||
+        _window.mozCancelAnimationFrame ||
+        _window.webkitCancelAnimationFrame ||
+        _window.clearTimeout;
+      return function (id) {
+        return cancel(id);
+      };
+    })();
+
+    var resetTriggers = function (element) {
+      var triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + 'px';
+      expandChild.style.height = expand.offsetHeight + 1 + 'px';
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
+    };
+
+    var checkTriggers = function (element) {
+      return (
+        element.offsetWidth != element.__resizeLast__.width ||
+        element.offsetHeight != element.__resizeLast__.height
+      );
+    };
+
+    var scrollListener = function (e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (
+        e.target.className &&
+        typeof e.target.className.indexOf === 'function' &&
+        e.target.className.indexOf('contract-trigger') < 0 &&
+        e.target.className.indexOf('expand-trigger') < 0
+      ) {
+        return;
+      }
+
+      var element = this;
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function () {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function (fn) {
+            fn.call(element, e);
+          });
+        }
+      });
+    };
+
+    /* Detect CSS Animations support to detect element display/re-attach */
+    var animation = false,
+      keyframeprefix = '',
+      animationstartevent = 'animationstart',
+      domPrefixes = 'Webkit Moz O ms'.split(' '),
+      startEvents =
+        'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(
+          ' '
+        ),
+      pfx = '';
+    {
+      var elm = _window.document.createElement('fakeelement');
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+
+      if (animation === false) {
+        for (var i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = '-' + pfx.toLowerCase() + '-';
+            animationstartevent = startEvents[i];
+            animation = true;
+            break;
+          }
+        }
+      }
+    }
+
+    var animationName = 'resizeanim';
+    var animationKeyframes =
+      '@' +
+      keyframeprefix +
+      'keyframes ' +
+      animationName +
+      ' { from { opacity: 0; } to { opacity: 0; } } ';
+    var animationStyle =
+      keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+  }
+
+  var createStyles = function (doc) {
+    if (!doc.getElementById('detectElementResize')) {
+      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      var css =
+          (animationKeyframes ? animationKeyframes : '') +
+          '.resize-triggers { ' +
+          (animationStyle ? animationStyle : '') +
+          'visibility: hidden; opacity: 0; } ' +
+          '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName('head')[0],
+        style = doc.createElement('style');
+
+      style.id = 'detectElementResize';
+      style.type = 'text/css';
+
+      if (nonce != null) {
+        style.setAttribute('nonce', nonce);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(doc.createTextNode(css));
+      }
+
+      head.appendChild(style);
+    }
+  };
+
+  var addResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.attachEvent('onresize', fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        var doc = element.ownerDocument;
+        var elementStyle = _window.getComputedStyle(element);
+        if (elementStyle && elementStyle.position == 'static') {
+          element.style.position = 'relative';
+        }
+        createStyles(doc);
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = doc.createElement('div')).className =
+          'resize-triggers';
+        var expandTrigger = doc.createElement('div');
+        expandTrigger.className = 'expand-trigger';
+        expandTrigger.appendChild(doc.createElement('div'));
+        var contractTrigger = doc.createElement('div');
+        contractTrigger.className = 'contract-trigger';
+        element.__resizeTriggers__.appendChild(expandTrigger);
+        element.__resizeTriggers__.appendChild(contractTrigger);
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener('scroll', scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationstartevent) {
+          element.__resizeTriggers__.__animationListener__ =
+            function animationListener(e) {
+              if (e.animationName == animationName) {
+                resetTriggers(element);
+              }
+            };
+          element.__resizeTriggers__.addEventListener(
+            animationstartevent,
+            element.__resizeTriggers__.__animationListener__
+          );
+        }
+      }
+      element.__resizeListeners__.push(fn);
+    }
+  };
+
+  var removeResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.detachEvent('onresize', fn);
+    } else {
+      element.__resizeListeners__.splice(
+        element.__resizeListeners__.indexOf(fn),
+        1
+      );
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener('scroll', scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(
+            animationstartevent,
+            element.__resizeTriggers__.__animationListener__
+          );
+          element.__resizeTriggers__.__animationListener__ = null;
+        }
+        try {
+          element.__resizeTriggers__ = !element.removeChild(
+            element.__resizeTriggers__
+          );
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
+        }
+      }
+    }
+  };
+
+  return {
+    addResizeListener,
+    removeResizeListener
+  };
+}

package/addon/utils/markdown/plugins/markdown-add-components/index.ts

@@ -0,0 +1 @@
+export * from './processor';

package/addon/utils/markdown/plugins/{markdown-add-components.ts → markdown-add-components/processor.ts}

@@ -1,6 +1,7 @@
-import { RehypeNode } from '../markdown-types';
-import EuiMarkdownFormatMarkdownCode from '../../../components/eui-markdown-format/markdown-code';
-import EuiMarkdownFormatMarkdownCodeBlock from '../../../components/eui-markdown-format/markdown-code-block';
+import { RehypeNode } from '../../markdown-types';
+import EuiMarkdownFormatMarkdownCode from '../../../../components/eui-markdown-format/markdown-code';
+import EuiMarkdownFormatMarkdownCodeBlock from '../../../../components/eui-markdown-format/markdown-code-block';
+import { FENCED_CLASS } from '../../remark/remark-prismjs';
 
 type Visitor = (node: RehypeNode) => RehypeNode;
 
@@ -21,7 +22,9 @@ export const visit = (node: RehypeNode, visitor: Visitor) => {
   return node;
 };
 
-export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
+export const processor = function MarkdownAddComponents(): (
+  tree: RehypeNode
+) => void {
   return (tree) => {
     visit(tree, (node: RehypeNode) => {
       if (node.tagName === 'component') {
@@ -46,8 +49,12 @@ export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
       }
       if (node.type === 'element' && node.tagName === 'code') {
         node.type = 'component';
-        const hasBreaks = node.children?.find((child: RehypeNode) =>
-          /\r|\n/.exec(child.value)
+        const hasBreaks = node.children?.find(
+          (child: RehypeNode) =>
+            /\r|\n/.exec(child.value) ||
+            ((node.properties.className as string[]) &&
+              (node.properties.className as string[]).indexOf(FENCED_CLASS) >
+                -1)
         );
         if (hasBreaks) {
           node.properties.componentName = EuiMarkdownFormatMarkdownCodeBlock;
@@ -61,4 +68,4 @@ export default function MarkdownAddComponents(): (tree: RehypeNode) => void {
       return node;
     });
   };
-}
+};

package/addon/utils/markdown/plugins/markdown-checkbox/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { CheckboxParser as parser } from './parser';

package/addon/utils/markdown/plugins/{markdown-checkbox.ts → markdown-checkbox/parser.ts}

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { RemarkTokenizer } from '../markdown-types';
+import { RemarkTokenizer } from '../../markdown-types';
 import { Plugin } from 'unified';
-import EuiMarkdownFormatMarkdownCheckbox from '../../../components/eui-markdown-format/markdown-checkbox';
+import EuiMarkdownFormatMarkdownCheckbox from '../../../../components/eui-markdown-format/markdown-checkbox';
 
 interface CheckboxNodeDetails {
   type: 'component';
@@ -29,7 +29,7 @@ interface CheckboxNodeDetails {
   isChecked: boolean;
 }
 
-const CheckboxParser: Plugin = function CheckboxParser() {
+export const CheckboxParser: Plugin = function CheckboxParser() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.blockTokenizers;
   const methods = Parser.prototype.blockMethods;
@@ -77,5 +77,3 @@ const CheckboxParser: Plugin = function CheckboxParser() {
   tokenizers.checkbox = tokenizeCheckbox;
   methods.splice(methods.indexOf('list'), 0, 'checkbox'); // Run it just before default `list` plugin to inject our own idea of checkboxes.
 };
-
-export { CheckboxParser as parser };

package/addon/utils/markdown/plugins/markdown-default-plugins/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './ui-plugins';
+export * from './parsing-plugins';
+export * from './processing-plugins';
+export * from './plugins';

package/addon/utils/markdown/plugins/{markdown-default-plugins.ts → markdown-default-plugins/parsing-plugins.ts}

@@ -33,45 +33,33 @@ import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   Settings
 } from 'unified';
-import remark2Rehype from 'remark-rehype';
 import markdown from 'remark-parse';
 import emoji from 'remark-emoji';
-import all from 'mdast-util-to-hast/lib/all';
-import { Handler } from 'mdast-util-to-hast';
-import * as MarkdownCheckbox from '../plugins/markdown-checkbox';
-import MarkdownAddComponents from '../plugins/markdown-add-components';
 import breaks from 'remark-breaks';
-import highlight from 'remark-highlight.js';
-import * as MarkdownTooltip from '../plugins/markdown-tooltip';
+import highlight from '../../remark/remark-prismjs';
+import * as MarkdownCheckbox from '../markdown-checkbox';
+import * as MarkdownTooltip from '../markdown-tooltip';
 
 export type DefaultEuiMarkdownParsingPlugins = PluggableList;
 
-export const getDefaultEuiMarkdownParsingPlugins =
-  (): DefaultEuiMarkdownParsingPlugins => [
+export const getDefaultEuiMarkdownParsingPlugins = ({
+  exclude
+}: { exclude?: Array<'tooltip'> } = {}): DefaultEuiMarkdownParsingPlugins => {
+  const excludeSet = new Set(exclude);
+  const parsingPlugins: PluggableList = [
     [markdown, {}],
     [highlight, {}],
     [emoji, { emoticon: false }],
     //@ts-ignore
     [breaks, {}],
-    [MarkdownTooltip.parser, {}],
+    // [markdownLinkValidator, {}],
     [MarkdownCheckbox.parser, {}]
-    // [MarkdownCheckbox.parser, {}],
-    // [markdownLinkValidator, {}]
   ];
 
-const unknownHandler: Handler = (h, node) => {
-  return h(node, node.type, node, all(h, node));
+  if (!excludeSet.has('tooltip'))
+    parsingPlugins.push([MarkdownTooltip.parser, {}]);
+
+  return parsingPlugins;
 };
 
 export const defaultParsingPlugins = getDefaultEuiMarkdownParsingPlugins();
-
-export const getDefaultEuiMarkdownProcessingPlugins = (): [
-  [typeof remark2Rehype, Record<string, unknown>],
-  ...PluggableList // any additional are generic
-] => [
-  [remark2Rehype, { allowDangerousHtml: true, unknownHandler }],
-  [MarkdownAddComponents, {}]
-];
-
-export const defaultProcessingPlugins =
-  getDefaultEuiMarkdownProcessingPlugins();

package/addon/utils/markdown/plugins/markdown-default-plugins/plugins.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  getDefaultEuiMarkdownUiPlugins,
+  DefaultEuiMarkdownUiPlugins
+} from './ui-plugins';
+import {
+  getDefaultEuiMarkdownParsingPlugins,
+  DefaultEuiMarkdownParsingPlugins
+} from './parsing-plugins';
+import {
+  getDefaultEuiMarkdownProcessingPlugins,
+  DefaultEuiMarkdownProcessingPlugins
+} from './processing-plugins';
+
+export const getDefaultEuiMarkdownPlugins = (
+  config: undefined | { exclude?: Array<'tooltip'> }
+): {
+  parsingPlugins: DefaultEuiMarkdownParsingPlugins;
+  processingPlugins: DefaultEuiMarkdownProcessingPlugins;
+  uiPlugins: DefaultEuiMarkdownUiPlugins;
+} => ({
+  parsingPlugins: getDefaultEuiMarkdownParsingPlugins(config),
+  processingPlugins: getDefaultEuiMarkdownProcessingPlugins(config),
+  uiPlugins: getDefaultEuiMarkdownUiPlugins(config)
+});

package/addon/utils/markdown/plugins/markdown-default-plugins/processing-plugins.ts

@@ -0,0 +1,67 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// Importing seemingly unused types from `unified` because the definitions
+// are exported for two versions of TypeScript (3.4, 4.0) and implicit
+// imports during eui.d.ts generation default to the incorrect version (3.4).
+// Explicit imports here resolve the version mismatch.
+import {
+  PluggableList,
+  // @ts-ignore See above comment
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Attacher,
+  // @ts-ignore See above comment
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Pluggable,
+  // @ts-ignore See above comment
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Settings
+} from 'unified';
+import remark2Rehype from 'remark-rehype';
+import all from 'mdast-util-to-hast/lib/all';
+import { Options as Remark2RehypeOptions, Handler } from 'mdast-util-to-hast';
+import * as MarkdownAddComponents from '../markdown-add-components';
+
+const unknownHandler: Handler = (h, node) => {
+  return h(node, node.type, node, all(h, node));
+};
+
+export interface Rehype2ReactOptions {
+  [key: string]: any;
+}
+
+export type DefaultEuiMarkdownProcessingPlugins = [
+  [typeof remark2Rehype, Remark2RehypeOptions], // first is well known
+  [typeof MarkdownAddComponents.processor, Rehype2ReactOptions], // second is well known
+  ...PluggableList // any additional are generic
+];
+
+export const getDefaultEuiMarkdownProcessingPlugins = ({
+  exclude
+}: { exclude?: Array<'tooltip'> } = {}) => {
+  exclude;
+  const plugins: DefaultEuiMarkdownProcessingPlugins = [
+    [remark2Rehype, { allowDangerousHtml: true, unknownHandler }],
+    [MarkdownAddComponents.processor, {}]
+  ];
+  return plugins;
+};
+
+export const defaultProcessingPlugins =
+  getDefaultEuiMarkdownProcessingPlugins();

package/addon/utils/markdown/plugins/markdown-default-plugins/ui-plugins.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import * as MarkdownTooltip from '../markdown-tooltip';
+import { EuiMarkdownEditorUiPlugin } from '../../markdown-types';
+
+export type DefaultEuiMarkdownUiPlugins = EuiMarkdownEditorUiPlugin[];
+
+export const getDefaultEuiMarkdownUiPlugins = ({
+  exclude
+}: { exclude?: Array<'tooltip'> } = {}): DefaultEuiMarkdownUiPlugins => {
+  const excludeSet = new Set(exclude);
+  const uiPlugins = [];
+
+  if (!excludeSet.has('tooltip')) uiPlugins.push(MarkdownTooltip.plugin);
+
+  // @ts-ignore __originatedFromEui is a custom property
+  uiPlugins.__originatedFromEui = true;
+  return uiPlugins;
+};
+
+export const defaultUiPlugins = getDefaultEuiMarkdownUiPlugins();

package/addon/utils/markdown/plugins/markdown-tooltip/index.ts

@@ -0,0 +1,2 @@
+export { TooltipParser as parser } from './parser';
+export { tooltipPlugin as plugin } from './plugin';

package/addon/utils/markdown/plugins/{markdown-tooltip.ts → markdown-tooltip/parser.ts}

@@ -1,31 +1,13 @@
-import { RemarkTokenizer } from '../markdown-types';
+import { RemarkTokenizer } from '../../markdown-types';
 import { Plugin } from 'unified';
-import EuiMarkdownFormatMarkdownTooltip from '../../../components/eui-markdown-format/markdown-tooltip';
+import EuiMarkdownFormatMarkdownTooltip from '../../../../components/eui-markdown-format/markdown-tooltip';
 
 interface TooltipNodeDetails {
   type: 'component';
   tooltipText: string;
 }
 
-const tooltipPlugin = {
-  name: 'tooltipPlugin',
-  button: {
-    label: 'Tooltip',
-    iconType: 'editorComment'
-  },
-  formatting: {
-    prefix: '!{tooltip[',
-    suffix: ']()}',
-    trimFirst: true
-  },
-  helpText: `
-  \`\`\`md
-  !{tooltip[anchor text](helpful description)}
-  \`\`\`
-  `
-};
-
-const TooltipParser: Plugin = function TooltipParser() {
+export const TooltipParser: Plugin = function TooltipParser() {
   const Parser = this.Parser;
   const tokenizers = Parser.prototype.inlineTokenizers;
   const methods = Parser.prototype.inlineMethods;
@@ -110,5 +92,3 @@ const TooltipParser: Plugin = function TooltipParser() {
   tokenizers.tooltip = tokenizeTooltip;
   methods.splice(methods.indexOf('text'), 0, 'tooltip');
 };
-
-export { tooltipPlugin as plugin, TooltipParser as parser };

package/addon/utils/markdown/plugins/markdown-tooltip/plugin.ts

@@ -0,0 +1,17 @@
+export const tooltipPlugin = {
+  name: 'tooltipPlugin',
+  button: {
+    label: 'Tooltip',
+    iconType: 'editorComment'
+  },
+  formatting: {
+    prefix: '!{tooltip[',
+    suffix: ']()}',
+    trimFirst: true
+  },
+  helpText: `
+  \`\`\`md
+  !{tooltip[anchor text](helpful description)}
+  \`\`\`
+  `
+};

package/addon/utils/markdown/plugins/to-dom.ts

@@ -5,7 +5,7 @@ This util was extracted from https://github.com/ampatspell/ember-cli-remark-stat
 import { assert } from '@ember/debug';
 import { RehypeNode } from '../markdown-types';
 
-const attributes = ['src', 'alt', 'href', 'target'];
+const attributes = ['src', 'alt', 'href', 'target', 'title'];
 
 const createDocument = () => {
   return document;
@@ -82,6 +82,8 @@ export const toDOM = (tree: RehypeNode) => {
           ...properties
         });
         return element;
+      } else if (type === 'raw') {
+        return document.createTextNode(node.value);
       }
       assert(`Unsupported node '${type}'`, false);
     }

package/addon/utils/markdown/remark/remark-prismjs.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import refractor from 'refractor';
+import visit from 'unist-util-visit';
+import { Plugin } from 'unified';
+import { checkSupportedLanguage } from '../../code/utils';
+
+export const FENCED_CLASS = 'remark-prismjs--fenced';
+
+const attacher: Plugin = () => {
+  return (ast) => visit(ast, 'code', visitor);
+
+  function visitor(node: any) {
+    const { data = {}, lang: language } = node;
+
+    if (!language) {
+      return;
+    }
+    const actualLanguage = checkSupportedLanguage(language);
+    node.data = data;
+    data.hChildren = refractor.highlight(node.value, actualLanguage);
+    data.hProperties = {
+      ...data.hProperties,
+      language,
+      className: [
+        'prismjs',
+        ...(data.hProperties?.className || []),
+        `language-${language}`,
+        FENCED_CLASS
+      ]
+    };
+  }
+};
+
+export default attacher;