diff --git a/package.json b/package.json index ac819664c..6d09ac0bc 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "resolutions": { "@embroider/macros": "^1.5.0", "@embroider/shared-internals": "^1.5.0", - "@embroider/util": "^1.5.0" + "@embroider/util": "^1.5.0", + "**/prismjs": "1.27.0" }, "volta": { "node": "16.14.0", diff --git a/packages/core/addon/components/eui-auto-sizer/index.hbs b/packages/core/addon/components/eui-auto-sizer/index.hbs new file mode 100644 index 000000000..d605da85a --- /dev/null +++ b/packages/core/addon/components/eui-auto-sizer/index.hbs @@ -0,0 +1,3 @@ +
+ {{yield this.style.childStyle}} +
\ No newline at end of file diff --git a/packages/core/addon/components/eui-auto-sizer/index.ts b/packages/core/addon/components/eui-auto-sizer/index.ts new file mode 100644 index 000000000..e73cb2a59 --- /dev/null +++ b/packages/core/addon/components/eui-auto-sizer/index.ts @@ -0,0 +1,173 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import createDetectElementResize from '../../utils/detect-element-resize'; + +type Size = { + height: number; + width: number; +}; + +interface EuiAutoSizerComponentArgs { + /** Function responsible for rendering children.*/ + + /** Optional custom CSS class name to attach to root AutoSizer element. */ + className?: string; + + /** Default height to use for initial render; useful for SSR */ + defaultHeight?: number; + + /** Default width to use for initial render; useful for SSR */ + defaultWidth?: number; + + /** Disable dynamic :height property */ + disableHeight: boolean; + + /** Disable dynamic :width property */ + disableWidth: boolean; + + /** Nonce of the inlined stylesheet for Content Security Policy */ + nonce?: string; + + /** Callback to be invoked on-resize */ + onResize: (size: Size) => void; + + /** Optional inline style */ + style?: Record; +} + +type ResizeHandler = (element: HTMLElement, onResize: () => void) => void; + +type DetectElementResize = { + addResizeListener: ResizeHandler; + removeResizeListener: ResizeHandler; +}; + +type DynamicStyle = { + outerStyle: { + height?: number | string; + width?: number | string; + overflow?: string; + }; + childStyle?: { + height?: number | string; + width?: number | string; + }; +}; +export default class EuiAutoSizerComponent extends Component { + _autoSizer?: HTMLElement; + _parentNode?: HTMLElement; + _window?: any; // uses any instead of Window because Flow doesn't have window type + _detectElementResize?: DetectElementResize; + + @tracked height: number | undefined; + @tracked width: number | undefined; + + get disableHeight() { + return this.args.disableHeight ?? false; + } + + get disableWidth() { + return this.args.disableWidth ?? false; + } + + get style() { + let style: DynamicStyle = { + outerStyle: { overflow: 'visible' }, + childStyle: {} + }; + if (!this.disableHeight) { + style.outerStyle.height = `0px`; + if (style.childStyle) { + style.childStyle.height = `${this.height}px`; + } + } + + if (!this.disableWidth) { + style.outerStyle.width = `0px`; + if (style.childStyle) { + style.childStyle.width = `${this.width}px`; + } + } + + return style; + } + + setup() { + const { nonce } = this.args; + if ( + this._autoSizer && + this._autoSizer.parentNode && + this._autoSizer.parentNode.ownerDocument && + this._autoSizer.parentNode.ownerDocument.defaultView && + this._autoSizer.parentNode instanceof + this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement + ) { + // Delay access of parentNode until mount. + // This handles edge-cases where the component has already been unmounted before its ref has been set, + // As well as libraries like react-lite which have a slightly different lifecycle. + this._parentNode = this._autoSizer.parentNode; + this._window = this._autoSizer.parentNode.ownerDocument.defaultView; + + // Defer requiring resize handler in order to support server-side rendering. + // See issue #41 + this._detectElementResize = createDetectElementResize( + nonce, + this._window + ); + this._detectElementResize.addResizeListener( + this._parentNode, + this._onResize + ); + + this._onResize(); + } + } + + _onResize = () => { + const { disableHeight, disableWidth } = this; + + if (this._parentNode) { + // Guard against AutoSizer component being removed from the DOM immediately after being added. + // This can result in invalid style values which can result in NaN values if we don't handle them. + // See issue #150 for more context. + + const height = this._parentNode.offsetHeight || 0; + const width = this._parentNode.offsetWidth || 0; + + const win = this._window || window; + const style = win.getComputedStyle(this._parentNode) || {}; + const paddingLeft = parseInt(style.paddingLeft, 10) || 0; + const paddingRight = parseInt(style.paddingRight, 10) || 0; + const paddingTop = parseInt(style.paddingTop, 10) || 0; + const paddingBottom = parseInt(style.paddingBottom, 10) || 0; + + const newHeight = height - paddingTop - paddingBottom; + const newWidth = width - paddingLeft - paddingRight; + + if ( + (!disableHeight && this.height !== newHeight) || + (!disableWidth && this.width !== newWidth) + ) { + this.height = height - paddingTop - paddingBottom; + this.width = width - paddingLeft - paddingRight; + + this.args.onResize?.({ height, width }); + } + } + }; + + setRef = (ele: HTMLElement) => { + this._autoSizer = ele; + this.setup(); + }; + + willDestroy(): void { + super.willDestroy(); + if (this._detectElementResize && this._parentNode) { + this._detectElementResize.removeResizeListener( + this._parentNode, + this._onResize + ); + } + } +} diff --git a/packages/core/addon/components/eui-code-block-impl/index.ts b/packages/core/addon/components/eui-code-block-impl/index.ts index ec1cb2fa4..c5494b33b 100644 --- a/packages/core/addon/components/eui-code-block-impl/index.ts +++ b/packages/core/addon/components/eui-code-block-impl/index.ts @@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking'; import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default'; import { PaddingSize, FontSize } from '../eui-code-block'; //@ts-ignore -import hljs from 'highlight.js'; +// import hljs from 'highlight.js'; import { keys } from '../../utils/keys'; import { scheduleOnce } from '@ember/runloop'; @@ -75,6 +75,7 @@ export default class EuiAccordionAccordionComponent extends Component + {{#if @showFullScreenButton}} + + {{/if}} + + {{#if @showCopyButton}} +
+ + + +
+ {{/if}} + +{{/if}} \ No newline at end of file diff --git a/packages/core/addon/components/eui-code-block/full-screen-display/index.hbs b/packages/core/addon/components/eui-code-block/full-screen-display/index.hbs new file mode 100644 index 000000000..be6522504 --- /dev/null +++ b/packages/core/addon/components/eui-code-block/full-screen-display/index.hbs @@ -0,0 +1,12 @@ + +
+ {{yield}} +
+ \ No newline at end of file diff --git a/packages/core/addon/components/eui-code-block/index.hbs b/packages/core/addon/components/eui-code-block/index.hbs index b18ce14bd..67681e1ee 100644 --- a/packages/core/addon/components/eui-code-block/index.hbs +++ b/packages/core/addon/components/eui-code-block/index.hbs @@ -1,10 +1,145 @@ - +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{#in-element this.codeTarget}} {{yield}} - \ No newline at end of file +{{/in-element}} + + {{#let + (class-names + "euiCodeBlock" + (if + (or this.showCopyButton this.showFullScreenButton) + "euiCodeBlock--hasControl" + ) + (if + (and this.showCopyButton this.showFullScreenButton) + "euiCodeBlock--hasBothControls" + ) + (if this.lineNumbersConfig.show "euiCodeBlock--hasLineNumbers") + ) + (class-names + "euiCodeBlock__pre" + (if + (or (eq this.whiteSpace "pre") this.isVirtualized) + "euiCodeBlock__pre--whiteSpacePre" + ) + (if + (and (eq this.whiteSpace "pre-wrap") (not this.isVirtualized)) + "euiCodeBlock__pre--whiteSpacePreWrap" + ) + (if this.isVirtualized "euiCodeBlock__pre--isVirtualized") + ) + (component "eui-code-block/virtualized") + (component "eui-code-block/controls") + (component "eui-code-block/full-screen-display") + as |wrapperClasses preClasses VirtualizedCodeBlock Controls FullScreenDisplay| + }} +
+ {{#if this.isVirtualized}} + {{!virtualized}} + + {{else}} + {{!template-lint-disable}} +
+ + {{/if}} + + + + {{#if this.isFullScreen}} + + {{#if this.isVirtualized}} + + {{else}} +
+ {{/if}} + + + {{/if}} +
+ {{/let}} + \ No newline at end of file diff --git a/packages/core/addon/components/eui-code-block/index.ts b/packages/core/addon/components/eui-code-block/index.ts new file mode 100644 index 000000000..43d1ab1fa --- /dev/null +++ b/packages/core/addon/components/eui-code-block/index.ts @@ -0,0 +1,290 @@ +import Component from '@glimmer/component'; +import { + EuiCodeSharedProps, + getHtmlContent, + checkSupportedLanguage, + highlightByLine +} from '../../utils/code/utils'; +import { action } from '@ember/object'; +import { RefractorNode } from 'refractor'; +import { tracked } from '@glimmer/tracking'; +import { scheduleOnce } from '@ember/runloop'; +import { modifier } from 'ember-modifier'; +import { helper } from '@ember/component/helper'; + +interface LineNumbersConfig { + start?: number; + highlight?: string; + show?: boolean; +} + +type PaddingSize = 'none' | 's' | 'm' | 'l'; +type FontSize = 's' | 'm' | 'l'; + +const fontSizeToRowHeightMap = { + s: 18, + m: 21, + l: 24 +}; + +type EuiCodeBlockArgs = EuiCodeSharedProps & { + paddingSize?: PaddingSize; + fontSize?: FontSize; + + /** + * Specify how `white-space` inside the element is handled. + * `pre` respects line breaks/white space but doesn't force them to wrap the line + * `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary. + */ + whiteSpace?: 'pre' | 'pre-wrap'; + + /** + * Displays an icon button to copy the code snippet to the clipboard. + */ + isCopyable?: boolean; + + /** + * Displays line numbers. + * Optionally accepts a configuration object for setting the starting number and visual highlighting ranges: + * `{ start: 100, highlight: '1, 5-10, 20-30, 40' }` + */ + lineNumbers?: boolean | LineNumbersConfig; + + /** + * Sets the maximum container height. + * Accepts a pixel value (`300`) or a percentage (`'100%'`) + * Ensure the container has calcuable height when using a percentage + */ + overflowHeight?: number | string; + + /** + * Renders code block lines virtually. + * Useful for improving load times of large code blocks. + * + * When using this configuration, `overflowHeight` is required and + * `whiteSpace` can only be `pre`. + */ + isVirtualized?: boolean; +}; + +interface LineNumbersFinal { + start: number; + show: boolean; + highlight?: string; +} + +const highlightModifier = modifier( + ( + _e, + _pos: unknown[], + { + element: targetEle, + language = 'text', + lineNumbersConfig = { start: 1, show: false }, + onChange + }: { + element: Element | undefined; + language: EuiCodeSharedProps['language']; + lineNumbersConfig: LineNumbersFinal; + onChange: ({ + data, + element + }: { + data: RefractorNode[]; + element: HTMLElement; + }) => void; + } + ) => { + let observer: undefined | MutationObserver; + + const getHighlighedHtml = () => { + const html = (targetEle?.textContent ? targetEle.textContent : '').trim(); + + let data: RefractorNode[]; + if (typeof html !== 'string') { + data = []; + } else { + data = highlightByLine(html, language, lineNumbersConfig); + } + + return { + data, + element: getHtmlContent(data).element + }; + }; + + const setupObserver = () => { + const newObserver = new MutationObserver((mutationsList) => { + if (mutationsList.length) { + onChange(getHighlighedHtml()); + } + }); + if (targetEle) { + onChange(getHighlighedHtml()); + newObserver.observe(targetEle, { + characterData: true, + subtree: true, + childList: true + }); + } + + return newObserver; + }; + + if (targetEle) { + observer = setupObserver(); + } + + return () => { + observer?.disconnect(); + }; + } +); + +const cleanTextHelper = helper(function ([text]: [string]) { + return text?.replace(/[\r\n?]{2}|\n\n/g, '\n') || ''; +}); + +const textToCopyHelper = helper(function ( + _pos, + { + isVirtualized, + element, + innerText + }: { isVirtualized: boolean; element: HTMLElement; innerText: string } +) { + return isVirtualized ? element.textContent : innerText; +}); + +export default class EuiCodeBlockComponent extends Component { + highlightTargetModifier = highlightModifier; + cleanTextHelper = cleanTextHelper; + textToCopyHelper = textToCopyHelper; + fontSizeToRowHeightMap = fontSizeToRowHeightMap; + + //fake element where yield writes to, so we can observe and clone a highlighted version to code and codeFullSceen + @tracked codeTarget: undefined | HTMLElement; + // Element for non fullscreen + @tracked code: undefined | HTMLElement; + // Element for fullscreen modal + @tracked codeFullScreen: undefined | HTMLElement; + @tracked wrapperRef: undefined | HTMLElement; + @tracked tabIndex = 1; + @tracked isFullScreen = false; + @tracked data: undefined | { data: RefractorNode[]; element: HTMLElement }; + + get language() { + return checkSupportedLanguage(this.args.language || ''); + } + + get transparentBackground() { + return this.args.transparentBackground ?? false; + } + + get paddingSize() { + return this.args.paddingSize ?? 'l'; + } + + get fontSize() { + return this.args.fontSize ?? 's'; + } + + get isCopyable() { + return this.args.isCopyable ?? false; + } + + get whiteSpace() { + return this.args.whiteSpace ?? 'pre-wrap'; + } + + get isVirtualized() { + return !!(this.args.isVirtualized && Array.isArray(this.data?.data)); + } + + get lineNumbers() { + return this.args.lineNumbers ?? false; + } + + get lineNumbersConfig() { + const { lineNumbers } = this; + const config = typeof lineNumbers === 'object' ? lineNumbers : {}; + return lineNumbers + ? { start: 1, show: true, ...config } + : { start: 1, show: false }; + } + + get optionalStyles() { + const overflowHeight = this.args.overflowHeight; + if (overflowHeight) { + const property = + typeof overflowHeight === 'string' ? 'height' : 'maxHeight'; + + return { + [property]: + typeof overflowHeight === 'string' + ? overflowHeight + : `${overflowHeight}px` + }; + } + return {}; + } + + get showCopyButton() { + return this.isCopyable && true; + } + + get rowHeight() { + return fontSizeToRowHeightMap[this.fontSize]; + } + + get showFullScreenButton() { + return !!this.args.overflowHeight; + } + + constructor(owner: unknown, args: EuiCodeBlockArgs) { + super(owner, args); + this.codeTarget = document.createElement('div'); + } + + @action + toggleFullScreen() { + this.isFullScreen = !this.isFullScreen; + } + + @action + closeFullScreen(e: KeyboardEvent) { + e.preventDefault(); + e.stopPropagation(); + this.isFullScreen = false; + } + + @action + doesOverflow() { + if (!this.wrapperRef) return; + const { clientWidth, clientHeight, scrollWidth, scrollHeight } = + this.wrapperRef; + const doesOverflow = + scrollHeight > clientHeight || scrollWidth > clientWidth; + + this.tabIndex = doesOverflow ? 0 : -1; + } + + @action + updateCode(resp: { data: RefractorNode[]; element: HTMLElement }) { + const render = () => { + const code = this.code; + const codeFullScreen = this.codeFullScreen; + + if (code && !this.isFullScreen) { + this.data = resp; + code.innerHTML = resp.element.innerHTML; + } + + if (codeFullScreen && this.isFullScreen) { + this.data = resp; + codeFullScreen.innerHTML = resp.element.innerHTML; + } + }; + scheduleOnce('afterRender', this, render); + } +} diff --git a/packages/core/addon/components/eui-code-block/virtualized/index.hbs b/packages/core/addon/components/eui-code-block/virtualized/index.hbs new file mode 100644 index 000000000..6d2004479 --- /dev/null +++ b/packages/core/addon/components/eui-code-block/virtualized/index.hbs @@ -0,0 +1,30 @@ +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{!-- DO NOT FORMAT AT ALL, PRE TAGS RESPECT WHITESPACE LITERALLY --}} +{{#let (unique-id) as |theID|}} + + 
{{this.getHtmlContent opt index @rowHeight}}
+ +{{/let}} \ No newline at end of file diff --git a/packages/core/addon/components/eui-code-block/virtualized/index.ts b/packages/core/addon/components/eui-code-block/virtualized/index.ts new file mode 100644 index 000000000..7a08cbde9 --- /dev/null +++ b/packages/core/addon/components/eui-code-block/virtualized/index.ts @@ -0,0 +1,22 @@ +import { helper } from '@ember/component/helper'; +import { RefractorNode } from 'refractor'; +import Component from '@glimmer/component'; +import { getHtmlContent } from '../../../utils/code/utils'; + +export default class EuiCodeBlockVirtualizedComponent extends Component { + getHtmlContent = helper(function ([node, index, rowHeight]: [ + RefractorNode, + number, + number + ]) { + const content = getHtmlContent([node]); + const span = content.element.firstChild as HTMLElement; + if (span) { + span.style.position = 'absolute'; + span.style.height = `${rowHeight}px`; + span.style.left = '0'; + span.style.top = `${index * rowHeight}px`; + } + return span; + }); +} diff --git a/packages/core/addon/components/eui-code/index.hbs b/packages/core/addon/components/eui-code/index.hbs index 7ac4243db..02b54614b 100644 --- a/packages/core/addon/components/eui-code/index.hbs +++ b/packages/core/addon/components/eui-code/index.hbs @@ -1,9 +1,15 @@ - +{{#in-element this.codeTarget}} {{yield}} - \ No newline at end of file +{{/in-element}} + \ No newline at end of file diff --git a/packages/core/addon/components/eui-code/index.ts b/packages/core/addon/components/eui-code/index.ts new file mode 100644 index 000000000..47e8cde8a --- /dev/null +++ b/packages/core/addon/components/eui-code/index.ts @@ -0,0 +1,73 @@ +import Component from '@glimmer/component'; +import { + EuiCodeSharedProps, + getHtmlContent, + checkSupportedLanguage +} from '../../utils/code/utils'; +import { action } from '@ember/object'; +import { highlight, RefractorNode } from 'refractor'; +import { tracked } from '@glimmer/tracking'; +import { scheduleOnce } from '@ember/runloop'; + +type EuiCodeArgs = EuiCodeSharedProps & { + //comments +}; + +export default class EuiCodeComponent extends Component { + @tracked codeTarget: undefined | HTMLElement; + @tracked code: undefined | HTMLElement; + observer: MutationObserver | null = null; + + constructor(owner: unknown, args: EuiCodeArgs) { + super(owner, args); + this.codeTarget = document.createElement('div'); + this.setupObserver(); + } + + get language() { + return checkSupportedLanguage(this.args.language || ''); + } + + setupObserver() { + this.observer?.disconnect(); + this.observer = new MutationObserver((mutationsList) => { + if (mutationsList.length) this.update(); + }); + if (this.codeTarget) { + this.update(); + this.observer.observe(this.codeTarget, { + characterData: true, + subtree: true, + childList: true + }); + } + } + + @action + update() { + const render = () => { + const html = ( + this.codeTarget?.textContent ? this.codeTarget.textContent : '' + ).trim(); + + let data: RefractorNode[]; + if (typeof html !== 'string') { + data = []; + } else { + data = highlight(html, this.language); + } + + const code = this.code; + + if (code) { + code.innerHTML = getHtmlContent(data).element.innerHTML; + } + }; + scheduleOnce('afterRender', this, render); + } + + willDestroy(): void { + super.willDestroy(); + this.observer?.disconnect(); + } +} diff --git a/packages/core/addon/components/eui-flyout/index.ts b/packages/core/addon/components/eui-flyout/index.ts index fafdd3be6..b5352c20a 100644 --- a/packages/core/addon/components/eui-flyout/index.ts +++ b/packages/core/addon/components/eui-flyout/index.ts @@ -92,7 +92,6 @@ const classesModifier = modifier( if (isPushed) { if (side === 'right') { - console.log(dimensions) document.body.style.paddingRight = `${dimensions.width}px`; } else if (side === 'left') { document.body.style.paddingLeft = `${dimensions.width}px`; diff --git a/packages/core/addon/components/eui-markdown-format/index.ts b/packages/core/addon/components/eui-markdown-format/index.ts index 134d642ae..b219d8c61 100644 --- a/packages/core/addon/components/eui-markdown-format/index.ts +++ b/packages/core/addon/components/eui-markdown-format/index.ts @@ -32,6 +32,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component {{@node.content}} diff --git a/packages/core/addon/components/eui-markdown-format/markdown-code/index.hbs b/packages/core/addon/components/eui-markdown-format/markdown-code/index.hbs index f23e86bd0..68e4c0b66 100644 --- a/packages/core/addon/components/eui-markdown-format/markdown-code/index.hbs +++ b/packages/core/addon/components/eui-markdown-format/markdown-code/index.hbs @@ -1,3 +1,3 @@ - - {{@node.content}} + + {{@node.content}} \ No newline at end of file diff --git a/packages/core/addon/components/eui-overlay-mask/index.ts b/packages/core/addon/components/eui-overlay-mask/index.ts index 5a327af19..7b49eeaad 100644 --- a/packages/core/addon/components/eui-overlay-mask/index.ts +++ b/packages/core/addon/components/eui-overlay-mask/index.ts @@ -13,7 +13,7 @@ export default class EuiOverlayMaskComponent extends GlimmerComponent { + return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE; +}; + +const createDocument = () => { + return document; +}; + +const attributes = [ + 'src', + 'alt', + 'href', + 'target', + 'title', + 'data-line-number', + 'aria-hidden', + 'style' +]; +export interface DynamicComponent {} + +export const getHtmlContent = (nodes: RefractorNode[]) => { + const document = createDocument(); + let components: DynamicComponent[] = []; + + const toElements = (parent: HTMLElement, nodes: RefractorNode[] = []) => { + nodes?.forEach((node) => { + let el = toElement(node); + if (el) { + parent.appendChild(el); + } + }); + return parent; + }; + + const createElement = ( + name: string, + node: RefractorNode, + className?: string + ) => { + let element = document.createElement(name); + if (isAstElement(node)) { + let properties = node.properties; + let classNames = []; + if (properties) { + if (properties.className) { + classNames.push(...(properties.className as string[])); + } + for (let key in properties) { + if (attributes.includes(key)) { + let value = properties[key]; + if (key === 'style') { + Object.keys(value).forEach((k: string) => { + //@ts-ignore + element.style[k] = `${value[k]}`; + }); + } else { + element.setAttribute(key, value as string); + } + } else { + // temporary + if (key !== 'className') { + console.warn('Unmapped node property', key); + } + } + } + } + if (className) { + classNames.push(className); + } + if (classNames.length) { + element.setAttribute('class', classNames.join(' ')); + } + } + return element; + }; + + const toElement = (node: RefractorNode) => { + if (isAstElement(node)) { + let { type } = node; + if (type === 'element') { + let element = createElement(node.tagName, node); + return toElements(element, node.children); + } else if (type === 'text') { + //@ts-ignore + return document.createTextNode(node.value); + } else if (type === 'component') { + let { inline } = node.properties; + let element = createElement(inline ? 'span' : 'div', node, 'component'); + let { _children, ...properties } = node.properties; + let content = toElements(document.createElement('span'), node.children); + components.push({ + element, + content, + ...properties + }); + return element; + } + } + return; + }; + + const element = toElements(document.createElement('div'), nodes); + + return { + element: element, + components + }; +}; + +export const isAstElement = (node: RefractorNode): node is AST.Element => + node.hasOwnProperty('type') && + (node.type === 'element' || node.type === 'text'); + +/** + * Line utils specific to EuiCodeBlock + */ + +type ExtendedRefractorNode = RefractorNode & { + lineStart?: number; + lineEnd?: number; +}; + +interface LineNumbersConfig { + start: number; + show: boolean; + highlight?: string; +} + +// Approximate width of a single digit/character +const CHAR_SIZE = 8; +const $euiSizeS = 8; + +// Creates an array of numbers from comma-separeated +// string of numbers or number ranges using `-` +// (e.g., "1, 3-10, 15") +export const parseLineRanges = (ranges: string) => { + const highlights: number[] = []; + ranges + .replace(/\s/g, '') + .split(',') + .forEach((line: string) => { + if (line.includes('-')) { + const range = line.split('-').map(Number); + for (let i = range[0]; i <= range[1]; i++) { + highlights.push(i); + } + } else { + highlights.push(Number(line)); + } + }); + return highlights; +}; + +const addLineData = ( + nodes: ExtendedRefractorNode[], + data: { lineNumber: number } +): ExtendedRefractorNode[] => { + return nodes.reduce((result, node) => { + const lineStart = data.lineNumber; + if (node.type === 'text') { + if (!node.value.match(/\r\n?|\n/)) { + node.lineStart = lineStart; + node.lineEnd = lineStart; + result.push(node); + } else { + const lines = node.value.split(/\r\n?|\n/); + lines.forEach((line, i) => { + const num = i === 0 ? data.lineNumber : ++data.lineNumber; + result.push({ + type: 'text', + value: i === lines.length - 1 ? line : `${line}\n`, + lineStart: num, + lineEnd: num + }); + }); + } + return result; + } + + if (node.children && node.children.length) { + const children = addLineData(node.children, data); + const first = children[0]; + const last = children[children.length - 1]; + const start = first.lineStart ?? lineStart; + const end = last.lineEnd ?? lineStart; + if (start !== end) { + children.forEach((node) => { + result.push(node); + }); + } else { + node.lineStart = start; + node.lineEnd = end; + node.children = children; + result.push(node); + } + return result; + } + + result.push(node); + return result; + }, []); +}; + +function wrapLines( + nodes: ExtendedRefractorNode[], + options: { showLineNumbers: boolean; highlight?: string } +) { + const highlights = options.highlight + ? parseLineRanges(options.highlight) + : []; + const grouped: ExtendedRefractorNode[][] = []; + nodes.forEach((node) => { + const lineStart = node.lineStart! - 1; + if (grouped[lineStart]) { + grouped[lineStart].push(node); + } else { + grouped[lineStart] = [node]; + } + }); + const wrapped: RefractorNode[] = []; + const digits = grouped.length.toString().length; + const width = digits * CHAR_SIZE; + grouped.forEach((node, i) => { + const lineNumber = i + 1; + const classes = ['euiCodeBlock__line']; + if (highlights.includes(lineNumber)) { + classes.push('euiCodeBlock__line--isHighlighted'); + } + const children: RefractorNode[] = options.showLineNumbers + ? [ + { + type: 'element', + tagName: 'span', + properties: { + style: { width: `${width}px` }, + ['data-line-number']: lineNumber, + ['aria-hidden']: true, + className: ['euiCodeBlock__lineNumber'] + }, + children: [] + }, + { + type: 'element', + tagName: 'span', + properties: { + style: { + marginLeft: `${width + $euiSizeS}px`, + width: `calc(100% - ${width}px)` + }, + className: ['euiCodeBlock__lineText'] + }, + children: node + } + ] + : node; + wrapped.push({ + type: 'element', + tagName: 'span', + properties: { + className: [classes.join(' ')] + }, + children + }); + }); + return wrapped; +} + +export const highlightByLine = ( + children: string, + language: string, + data: LineNumbersConfig +) => { + return wrapLines( + addLineData(highlight(children, language), { lineNumber: data.start }), + { showLineNumbers: data.show, highlight: data.highlight } + ); +}; diff --git a/packages/core/addon/utils/css-mappings/eui-code-block-impl.ts b/packages/core/addon/utils/css-mappings/eui-code-block.ts similarity index 100% rename from packages/core/addon/utils/css-mappings/eui-code-block-impl.ts rename to packages/core/addon/utils/css-mappings/eui-code-block.ts diff --git a/packages/core/addon/utils/css-mappings/index.ts b/packages/core/addon/utils/css-mappings/index.ts index 9ac7c6c52..7d3d5854d 100644 --- a/packages/core/addon/utils/css-mappings/index.ts +++ b/packages/core/addon/utils/css-mappings/index.ts @@ -53,12 +53,12 @@ import EuiRangeLevels from './eui-range-levels'; import EuiToolTip from './eui-tool-tip'; import EuiToast from './eui-toast'; import EuiGlobalToastList from './eui-global-toast-list'; -import EuiCodeBlockImpl from './eui-code-block-impl'; +import EuiCodeBlock from './eui-code-block'; import EuiStat from './eui-stat'; const mapping: Mapping = { EuiStat, - EuiCodeBlockImpl, + EuiCodeBlock, EuiAccordion, EuiIcon, EuiModal, diff --git a/packages/core/addon/utils/detect-element-resize.js b/packages/core/addon/utils/detect-element-resize.js new file mode 100644 index 000000000..8f0451c36 --- /dev/null +++ b/packages/core/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 + }; +} diff --git a/packages/core/addon/utils/markdown/plugins/markdown-add-components/index.ts b/packages/core/addon/utils/markdown/plugins/markdown-add-components/index.ts new file mode 100644 index 000000000..d7e04ee8c --- /dev/null +++ b/packages/core/addon/utils/markdown/plugins/markdown-add-components/index.ts @@ -0,0 +1 @@ +export * from './processor'; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-add-components.ts b/packages/core/addon/utils/markdown/plugins/markdown-add-components/processor.ts similarity index 72% rename from packages/core/addon/utils/markdown/plugins/markdown-add-components.ts rename to packages/core/addon/utils/markdown/plugins/markdown-add-components/processor.ts index 1fd86c828..d00aa88d2 100644 --- a/packages/core/addon/utils/markdown/plugins/markdown-add-components.ts +++ b/packages/core/addon/utils/markdown/plugins/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; }); }; -} +}; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-checkbox/index.ts b/packages/core/addon/utils/markdown/plugins/markdown-checkbox/index.ts new file mode 100644 index 000000000..3794e8936 --- /dev/null +++ b/packages/core/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'; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-checkbox.ts b/packages/core/addon/utils/markdown/plugins/markdown-checkbox/parser.ts similarity index 90% rename from packages/core/addon/utils/markdown/plugins/markdown-checkbox.ts rename to packages/core/addon/utils/markdown/plugins/markdown-checkbox/parser.ts index 471e30d9e..f2a4a238e 100644 --- a/packages/core/addon/utils/markdown/plugins/markdown-checkbox.ts +++ b/packages/core/addon/utils/markdown/plugins/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 }; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/index.ts b/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/index.ts new file mode 100644 index 000000000..ef669fa02 --- /dev/null +++ b/packages/core/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'; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-default-plugins.ts b/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/parsing-plugins.ts similarity index 64% rename from packages/core/addon/utils/markdown/plugins/markdown-default-plugins.ts rename to packages/core/addon/utils/markdown/plugins/markdown-default-plugins/parsing-plugins.ts index d210881c4..735cd53ca 100644 --- a/packages/core/addon/utils/markdown/plugins/markdown-default-plugins.ts +++ b/packages/core/addon/utils/markdown/plugins/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], - ...PluggableList // any additional are generic -] => [ - [remark2Rehype, { allowDangerousHtml: true, unknownHandler }], - [MarkdownAddComponents, {}] -]; - -export const defaultProcessingPlugins = - getDefaultEuiMarkdownProcessingPlugins(); diff --git a/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/plugins.ts b/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/plugins.ts new file mode 100644 index 000000000..ba583235b --- /dev/null +++ b/packages/core/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) +}); diff --git a/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/processing-plugins.ts b/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/processing-plugins.ts new file mode 100644 index 000000000..9d9fe9625 --- /dev/null +++ b/packages/core/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(); diff --git a/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/ui-plugins.ts b/packages/core/addon/utils/markdown/plugins/markdown-default-plugins/ui-plugins.ts new file mode 100644 index 000000000..6c0856714 --- /dev/null +++ b/packages/core/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(); diff --git a/packages/core/addon/utils/markdown/plugins/markdown-tooltip/index.ts b/packages/core/addon/utils/markdown/plugins/markdown-tooltip/index.ts new file mode 100644 index 000000000..ea0e1b2f0 --- /dev/null +++ b/packages/core/addon/utils/markdown/plugins/markdown-tooltip/index.ts @@ -0,0 +1,2 @@ +export { TooltipParser as parser } from './parser'; +export { tooltipPlugin as plugin } from './plugin'; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-tooltip.ts b/packages/core/addon/utils/markdown/plugins/markdown-tooltip/parser.ts similarity index 79% rename from packages/core/addon/utils/markdown/plugins/markdown-tooltip.ts rename to packages/core/addon/utils/markdown/plugins/markdown-tooltip/parser.ts index 40f9a598d..065486b25 100644 --- a/packages/core/addon/utils/markdown/plugins/markdown-tooltip.ts +++ b/packages/core/addon/utils/markdown/plugins/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 }; diff --git a/packages/core/addon/utils/markdown/plugins/markdown-tooltip/plugin.ts b/packages/core/addon/utils/markdown/plugins/markdown-tooltip/plugin.ts new file mode 100644 index 000000000..cfe0c0e27 --- /dev/null +++ b/packages/core/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)} + \`\`\` + ` +}; diff --git a/packages/core/addon/utils/markdown/plugins/to-dom.ts b/packages/core/addon/utils/markdown/plugins/to-dom.ts index a6fe48794..e98ee5ae9 100644 --- a/packages/core/addon/utils/markdown/plugins/to-dom.ts +++ b/packages/core/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; diff --git a/packages/core/addon/utils/markdown/remark/remark-prismjs.ts b/packages/core/addon/utils/markdown/remark/remark-prismjs.ts new file mode 100644 index 000000000..e754b4587 --- /dev/null +++ b/packages/core/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; diff --git a/packages/core/app/components/eui-auto-sizer/index.js b/packages/core/app/components/eui-auto-sizer/index.js new file mode 100644 index 000000000..92167b415 --- /dev/null +++ b/packages/core/app/components/eui-auto-sizer/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-auto-sizer'; diff --git a/packages/core/app/components/eui-code-block/controls/index.js b/packages/core/app/components/eui-code-block/controls/index.js new file mode 100644 index 000000000..99e26ac9f --- /dev/null +++ b/packages/core/app/components/eui-code-block/controls/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-code-block/controls'; diff --git a/packages/core/app/components/eui-code-block/full-screen-display/index.js b/packages/core/app/components/eui-code-block/full-screen-display/index.js new file mode 100644 index 000000000..cbc423a98 --- /dev/null +++ b/packages/core/app/components/eui-code-block/full-screen-display/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-code-block/full-screen-display'; diff --git a/packages/core/app/components/eui-code-block/virtualized/index.js b/packages/core/app/components/eui-code-block/virtualized/index.js new file mode 100644 index 000000000..82484fe37 --- /dev/null +++ b/packages/core/app/components/eui-code-block/virtualized/index.js @@ -0,0 +1 @@ +export { default } from '@ember-eui/core/components/eui-code-block/virtualized'; diff --git a/packages/core/docs/editors/code/code-block-demo/demo1.md b/packages/core/docs/editors/code/code-block-demo/demo1.md index 2c499de4e..2465fd8ca 100644 --- a/packages/core/docs/editors/code/code-block-demo/demo1.md +++ b/packages/core/docs/editors/code/code-block-demo/demo1.md @@ -2,35 +2,26 @@ order: 1 --- -# Demo +# Code block -```hbs template -
- - {{this.htmlCode}} - -
- - - + +

+ EuiCodeBlock can be used to create multi-line code blocks with configurable font and padding sizes +

+ - +```hbs template + + {{this.jsCode}} + + + {{this.jsCode}} + ``` ```javascript component @@ -39,19 +30,9 @@ import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class EuiMarkdownEditor1 extends Component { - @tracked language = 'html'; - @tracked value = `### hehe - - [ ] hola - - [ ] hola - - [x] hola - \`\`\`javascript - class Human {} - \`\`\` - `; - @tracked htmlCode = ` -
- asdf -
+ jsCode = ` +/* I'm an example of JS */ +import Component from '@glimmer/component'; `; } ``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo2.md b/packages/core/docs/editors/code/code-block-demo/demo2.md new file mode 100644 index 000000000..f47c83255 --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo2.md @@ -0,0 +1,35 @@ +--- +order: 2 +--- + +# Copy + + +

+ Adding the isCopyable prop allows users to copy the text content of the code block. +

+ + +```hbs template + + {{this.jsCode}} + +``` + +```javascript component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class EuiMarkdownEditor1 extends Component { + jsCode = ` +/* I'm an example of JS */ +import Component from '@glimmer/component'; +`; +} +``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo3.md b/packages/core/docs/editors/code/code-block-demo/demo3.md new file mode 100644 index 000000000..69d5ee5a9 --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo3.md @@ -0,0 +1,43 @@ +--- +order: 3 +--- + +# Overflow height + + +

+ For long content, you can set an overflowHeight which will scroll if the text exceeds that height, and allows users to view the code in fullscreen mode. +

+ + +```hbs template + + {{this.sqlCode}} + +``` + +```javascript component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class EuiMarkdownEditor1 extends Component { + sqlCode = `-- I'm an example of SQL +CREATE TABLE "topic" ( + "id" serial NOT NULL PRIMARY KEY, + "forum_id" integer NOT NULL, + "subject" varchar(255) NOT NULL +); +ALTER TABLE "topic" +ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id") +REFERENCES "forum" ("id"); + +insert into "topic" ("forum_id", "subject") +values (2, 'D''artagnian');`; +} +``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo4.md b/packages/core/docs/editors/code/code-block-demo/demo4.md new file mode 100644 index 000000000..b8adbafbd --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo4.md @@ -0,0 +1,28 @@ +--- +order: 4 +--- + +# White space + + +

+ By default, the whiteSpace property is set to pre-wrap. This makes the text wrap when needed. You can, however, pass pre to the whiteSpace prop and the text won't wrap unless line breaks are in the content. +

+ + +```hbs template + + export default () => ( +
In this example, the whiteSpace property is set to pre. All the + whitespaces will be kept as is and the text only wraps when line breaks are + in the content.
+ ); + +``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo5.md b/packages/core/docs/editors/code/code-block-demo/demo5.md new file mode 100644 index 000000000..25e8db9a1 --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo5.md @@ -0,0 +1,42 @@ +--- +order: 5 +--- + +# Line numbers + + +

+ To render line numbers, you can add lineNumbers as boolean flag. +

+ + +```hbs template + + {{this.jsonCode}} + +``` + +```javascript component +import Component from '@glimmer/component'; + +export default class EuiMarkdownEditor1 extends Component { + jsonCode = `{ + "id": "1", + "rawResponse": { + "took": 19, + "timed_out": false, + "_shards": { + "total": 1, + "successful": 1, + "skipped": 0, + "failed": 0 + } + } +}`; +} +``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo6.md b/packages/core/docs/editors/code/code-block-demo/demo6.md new file mode 100644 index 000000000..58406ebf4 --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo6.md @@ -0,0 +1,42 @@ +--- +order: 6 +--- + +# Line numbers highlighted + + +

+ You can also optionally change the starting number and/or visually highlight certain lines by passing a configuration object: lineNumbers={ start: 32, highlight: "32, 34-37, 40" }. +

+ + +```hbs template + + {{this.jsonCode}} + +``` + +```javascript component +import Component from '@glimmer/component'; + +export default class EuiMarkdownEditor1 extends Component { + jsonCode = `{ + "id": "1", + "rawResponse": { + "took": 19, + "timed_out": false, + "_shards": { + "total": 1, + "successful": 1, + "skipped": 0, + "failed": 0 + } + } +}`; +} +``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo7.md b/packages/core/docs/editors/code/code-block-demo/demo7.md new file mode 100644 index 000000000..d8ca05068 --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo7.md @@ -0,0 +1,853 @@ +--- +order: 7 +--- + +# Code block virtualization + + +

+ For large blocks of code, add isVirtualized to reduce the number of rendered rows and improve load times. Note that when using virtualization: +

    +
  • overflowHeight is required
    • +
  • whiteSpace is enforced as pre, and cannot be set to pre-wrap
    • +
+ +

+ + +```hbs template +
+ + {{this.htmlCode}} + +
+``` + +```javascript component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class EuiMarkdownEditor1 extends Component { + @tracked htmlCode = `{ + "id": "1", + "rawResponse": { + "took": 19, + "timed_out": false, + "_shards": { + "total": 1, + "successful": 1, + "skipped": 0, + "failed": 0 + }, + "hits": { + "total": 7, + "max_score": null, + "hits": [ + { + "_index": "kibana_sample_data_flights", + "_id": "i5-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Wichita Mid Continent Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + -97.43309784, + 37.64989853 + ], + "type": "Point" + } + ], + "FlightNum": [ + "Q4UQIF3" + ], + "DestLocation": [ + { + "coordinates": [ + 8.54917, + 47.464699 + ], + "type": "Point" + } + ], + "FlightDelay": [ + true + ], + "DistanceMiles": [ + 5013.5835 + ], + "FlightTimeMin": [ + 822.3817 + ], + "OriginWeather": [ + "Cloudy" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 276.2003 + ], + "Carrier": [ + "JetBeats" + ], + "FlightDelayMin": [ + 150 + ], + "OriginRegion": [ + "US-KS" + ], + "DestAirportID": [ + "ZRH" + ], + "FlightDelayType": [ + "Carrier Delay" + ], + "hour_of_day": [ + 14 + ], + "timestamp": [ + "2021-07-16T14:15:29.000Z" + ], + "Dest": [ + "Zurich Airport" + ], + "FlightTimeHour": [ + "13.706362235285443" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 8068.5806 + ], + "OriginCityName": [ + "Wichita" + ], + "DestWeather": [ + "Rain" + ], + "OriginCountry": [ + "US" + ], + "DestCountry": [ + "CH" + ], + "DestRegion": [ + "CH-ZH" + ], + "OriginAirportID": [ + "ICT" + ], + "DestCityName": [ + "Zurich" + ] + }, + "sort": [ + 1626444929000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "AZ-sr3oB9JvwH6mY-m2P", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Turin Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 7.64963, + 45.200802 + ], + "type": "Point" + } + ], + "FlightNum": [ + "WR15PZZ" + ], + "DestLocation": [ + { + "coordinates": [ + 20.96710014, + 52.16569901 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 774.4176 + ], + "FlightTimeMin": [ + 95.86956 + ], + "OriginWeather": [ + "Clear" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 360.27106 + ], + "Carrier": [ + "Kibana Airlines" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "IT-21" + ], + "DestAirportID": [ + "WAW" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 14 + ], + "timestamp": [ + "2021-07-16T14:14:06.000Z" + ], + "Dest": [ + "Warsaw Chopin Airport" + ], + "FlightTimeHour": [ + "1.597826006729792" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 1246.3043 + ], + "OriginCityName": [ + "Torino" + ], + "DestWeather": [ + "Thunder & Lightning" + ], + "OriginCountry": [ + "IT" + ], + "DestCountry": [ + "PL" + ], + "DestRegion": [ + "PL-MZ" + ], + "OriginAirportID": [ + "TO11" + ], + "DestCityName": [ + "Warsaw" + ] + }, + "sort": [ + 1626444846000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "LJ-sr3oB9JvwH6mY-m6Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Chhatrapati Shivaji International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 72.86789703, + 19.08869934 + ], + "type": "Point" + } + ], + "FlightNum": [ + "VZNTLIZ" + ], + "DestLocation": [ + { + "coordinates": [ + 33.46390152, + 68.15180206 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 3791.431 + ], + "FlightTimeMin": [ + 305.08582 + ], + "OriginWeather": [ + "Cloudy" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 845.4707 + ], + "Carrier": [ + "JetBeats" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "XLMO" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 14 + ], + "timestamp": [ + "2021-07-16T14:05:44.000Z" + ], + "Dest": [ + "Olenya Air Base" + ], + "FlightTimeHour": [ + "5.084763808440013" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 6101.717 + ], + "OriginCityName": [ + "Mumbai" + ], + "DestWeather": [ + "Heavy Fog" + ], + "OriginCountry": [ + "IN" + ], + "DestCountry": [ + "RU" + ], + "DestRegion": [ + "RU-MUR" + ], + "OriginAirportID": [ + "BOM" + ], + "DestCityName": [ + "Olenegorsk" + ] + }, + "sort": [ + 1626444344000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "Hp-sr3oB9JvwH6mY-m2P", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Buffalo Niagara International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + -78.73220062, + 42.94049835 + ], + "type": "Point" + } + ], + "FlightNum": [ + "QAXVRPQ" + ], + "DestLocation": [ + { + "coordinates": [ + -78.3575, + -0.129166667 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 2964.2756 + ], + "FlightTimeMin": [ + 227.16853 + ], + "OriginWeather": [ + "Sunny" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 719.76935 + ], + "Carrier": [ + "JetBeats" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "US-NY" + ], + "DestAirportID": [ + "UIO" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:57:30.000Z" + ], + "Dest": [ + "Mariscal Sucre International Airport" + ], + "FlightTimeHour": [ + "3.7861423240197563" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 4770.5396 + ], + "OriginCityName": [ + "Buffalo" + ], + "DestWeather": [ + "Clear" + ], + "OriginCountry": [ + "US" + ], + "DestCountry": [ + "EC" + ], + "DestRegion": [ + "EC-P" + ], + "OriginAirportID": [ + "BUF" + ], + "DestCityName": [ + "Quito" + ] + }, + "sort": [ + 1626443850000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "U5-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Dubai International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 55.36439896, + 25.25279999 + ], + "type": "Point" + } + ], + "FlightNum": [ + "TJQKCKN" + ], + "DestLocation": [ + { + "coordinates": [ + -73.74079895, + 45.47060013 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 6611.2646 + ], + "FlightTimeMin": [ + 709.31995 + ], + "OriginWeather": [ + "Rain" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 756.61444 + ], + "Carrier": [ + "ES-Air" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "YUL" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:51:52.000Z" + ], + "Dest": [ + "Montreal / Pierre Elliott Trudeau International Airport" + ], + "FlightTimeHour": [ + "11.821998598483413" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 10639.799 + ], + "OriginCityName": [ + "Dubai" + ], + "DestWeather": [ + "Clear" + ], + "OriginCountry": [ + "AE" + ], + "DestCountry": [ + "CA" + ], + "DestRegion": [ + "CA-QC" + ], + "OriginAirportID": [ + "DXB" + ], + "DestCityName": [ + "Montreal" + ] + }, + "sort": [ + 1626443512000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "TJ-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Jorge Chavez International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + -77.114304, + -12.0219 + ], + "type": "Point" + } + ], + "FlightNum": [ + "8B6BGMO" + ], + "DestLocation": [ + { + "coordinates": [ + 128.445007, + 51.169997 + ], + "type": "Point" + } + ], + "FlightDelay": [ + true + ], + "DistanceMiles": [ + 9375.942 + ], + "FlightTimeMin": [ + 824.16406 + ], + "OriginWeather": [ + "Cloudy" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 463.068 + ], + "Carrier": [ + "Logstash Airways" + ], + "FlightDelayMin": [ + 30 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "XHBU" + ], + "FlightDelayType": [ + "Late Aircraft Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:50:55.000Z" + ], + "Dest": [ + "Ukrainka Air Base" + ], + "FlightTimeHour": [ + "13.736067768266615" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 15089.117 + ], + "OriginCityName": [ + "Lima" + ], + "DestWeather": [ + "Clear" + ], + "OriginCountry": [ + "PE" + ], + "DestCountry": [ + "RU" + ], + "DestRegion": [ + "RU-AMU" + ], + "OriginAirportID": [ + "LIM" + ], + "DestCityName": [ + "Belogorsk" + ] + }, + "sort": [ + 1626443455000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "3J-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Sydney Kingsford Smith International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 151.177002, + -33.94609833 + ], + "type": "Point" + } + ], + "FlightNum": [ + "PASAN8N" + ], + "DestLocation": [ + { + "coordinates": [ + 8.54917, + 47.464699 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 10293.209 + ], + "FlightTimeMin": [ + 1380.4429 + ], + "OriginWeather": [ + "Sunny" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 380.29593 + ], + "Carrier": [ + "Logstash Airways" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "ZRH" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:49:20.000Z" + ], + "Dest": [ + "Zurich Airport" + ], + "FlightTimeHour": [ + "23.007380215402044" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 16565.314 + ], + "OriginCityName": [ + "Sydney" + ], + "DestWeather": [ + "Rain" + ], + "OriginCountry": [ + "AU" + ], + "DestCountry": [ + "CH" + ], + "DestRegion": [ + "CH-ZH" + ], + "OriginAirportID": [ + "SYD" + ], + "DestCityName": [ + "Zurich" + ] + }, + "sort": [ + 1626443360000 + ] + } + ] + }, + "aggregations": { + "2": { + "buckets": [ + { + "key_as_string": "2021-07-16T08:49:00.000-05:00", + "key": 1626443340000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T08:50:30.000-05:00", + "key": 1626443430000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T08:51:30.000-05:00", + "key": 1626443490000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T08:57:30.000-05:00", + "key": 1626443850000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T09:05:30.000-05:00", + "key": 1626444330000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T09:14:00.000-05:00", + "key": 1626444840000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T09:15:00.000-05:00", + "key": 1626444900000, + "doc_count": 1 + } + ] + } + } + }, + "isPartial": false, + "isRunning": false, + "total": 1, + "loaded": 1, + "isRestored": false +}`; +} +``` diff --git a/packages/core/docs/editors/code/code-block-demo/demo8.md b/packages/core/docs/editors/code/code-block-demo/demo8.md new file mode 100644 index 000000000..a8a7f8b63 --- /dev/null +++ b/packages/core/docs/editors/code/code-block-demo/demo8.md @@ -0,0 +1,855 @@ +--- +order: 8 +--- + +# Flyout + +```hbs template + + Show flyout example + + +{{#if this.showFlyout}} + + + +

A flyout with just code

+ + +
+ + {{this.jsonCode}} + +
+ +{{/if}} +``` + +```javascript component +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class EuiMarkdownEditor1 extends Component { + @tracked jsonCode = `{ + "id": "1", + "rawResponse": { + "took": 19, + "timed_out": false, + "_shards": { + "total": 1, + "successful": 1, + "skipped": 0, + "failed": 0 + }, + "hits": { + "total": 7, + "max_score": null, + "hits": [ + { + "_index": "kibana_sample_data_flights", + "_id": "i5-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Wichita Mid Continent Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + -97.43309784, + 37.64989853 + ], + "type": "Point" + } + ], + "FlightNum": [ + "Q4UQIF3" + ], + "DestLocation": [ + { + "coordinates": [ + 8.54917, + 47.464699 + ], + "type": "Point" + } + ], + "FlightDelay": [ + true + ], + "DistanceMiles": [ + 5013.5835 + ], + "FlightTimeMin": [ + 822.3817 + ], + "OriginWeather": [ + "Cloudy" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 276.2003 + ], + "Carrier": [ + "JetBeats" + ], + "FlightDelayMin": [ + 150 + ], + "OriginRegion": [ + "US-KS" + ], + "DestAirportID": [ + "ZRH" + ], + "FlightDelayType": [ + "Carrier Delay" + ], + "hour_of_day": [ + 14 + ], + "timestamp": [ + "2021-07-16T14:15:29.000Z" + ], + "Dest": [ + "Zurich Airport" + ], + "FlightTimeHour": [ + "13.706362235285443" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 8068.5806 + ], + "OriginCityName": [ + "Wichita" + ], + "DestWeather": [ + "Rain" + ], + "OriginCountry": [ + "US" + ], + "DestCountry": [ + "CH" + ], + "DestRegion": [ + "CH-ZH" + ], + "OriginAirportID": [ + "ICT" + ], + "DestCityName": [ + "Zurich" + ] + }, + "sort": [ + 1626444929000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "AZ-sr3oB9JvwH6mY-m2P", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Turin Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 7.64963, + 45.200802 + ], + "type": "Point" + } + ], + "FlightNum": [ + "WR15PZZ" + ], + "DestLocation": [ + { + "coordinates": [ + 20.96710014, + 52.16569901 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 774.4176 + ], + "FlightTimeMin": [ + 95.86956 + ], + "OriginWeather": [ + "Clear" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 360.27106 + ], + "Carrier": [ + "Kibana Airlines" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "IT-21" + ], + "DestAirportID": [ + "WAW" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 14 + ], + "timestamp": [ + "2021-07-16T14:14:06.000Z" + ], + "Dest": [ + "Warsaw Chopin Airport" + ], + "FlightTimeHour": [ + "1.597826006729792" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 1246.3043 + ], + "OriginCityName": [ + "Torino" + ], + "DestWeather": [ + "Thunder & Lightning" + ], + "OriginCountry": [ + "IT" + ], + "DestCountry": [ + "PL" + ], + "DestRegion": [ + "PL-MZ" + ], + "OriginAirportID": [ + "TO11" + ], + "DestCityName": [ + "Warsaw" + ] + }, + "sort": [ + 1626444846000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "LJ-sr3oB9JvwH6mY-m6Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Chhatrapati Shivaji International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 72.86789703, + 19.08869934 + ], + "type": "Point" + } + ], + "FlightNum": [ + "VZNTLIZ" + ], + "DestLocation": [ + { + "coordinates": [ + 33.46390152, + 68.15180206 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 3791.431 + ], + "FlightTimeMin": [ + 305.08582 + ], + "OriginWeather": [ + "Cloudy" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 845.4707 + ], + "Carrier": [ + "JetBeats" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "XLMO" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 14 + ], + "timestamp": [ + "2021-07-16T14:05:44.000Z" + ], + "Dest": [ + "Olenya Air Base" + ], + "FlightTimeHour": [ + "5.084763808440013" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 6101.717 + ], + "OriginCityName": [ + "Mumbai" + ], + "DestWeather": [ + "Heavy Fog" + ], + "OriginCountry": [ + "IN" + ], + "DestCountry": [ + "RU" + ], + "DestRegion": [ + "RU-MUR" + ], + "OriginAirportID": [ + "BOM" + ], + "DestCityName": [ + "Olenegorsk" + ] + }, + "sort": [ + 1626444344000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "Hp-sr3oB9JvwH6mY-m2P", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Buffalo Niagara International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + -78.73220062, + 42.94049835 + ], + "type": "Point" + } + ], + "FlightNum": [ + "QAXVRPQ" + ], + "DestLocation": [ + { + "coordinates": [ + -78.3575, + -0.129166667 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 2964.2756 + ], + "FlightTimeMin": [ + 227.16853 + ], + "OriginWeather": [ + "Sunny" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 719.76935 + ], + "Carrier": [ + "JetBeats" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "US-NY" + ], + "DestAirportID": [ + "UIO" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:57:30.000Z" + ], + "Dest": [ + "Mariscal Sucre International Airport" + ], + "FlightTimeHour": [ + "3.7861423240197563" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 4770.5396 + ], + "OriginCityName": [ + "Buffalo" + ], + "DestWeather": [ + "Clear" + ], + "OriginCountry": [ + "US" + ], + "DestCountry": [ + "EC" + ], + "DestRegion": [ + "EC-P" + ], + "OriginAirportID": [ + "BUF" + ], + "DestCityName": [ + "Quito" + ] + }, + "sort": [ + 1626443850000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "U5-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Dubai International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 55.36439896, + 25.25279999 + ], + "type": "Point" + } + ], + "FlightNum": [ + "TJQKCKN" + ], + "DestLocation": [ + { + "coordinates": [ + -73.74079895, + 45.47060013 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 6611.2646 + ], + "FlightTimeMin": [ + 709.31995 + ], + "OriginWeather": [ + "Rain" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 756.61444 + ], + "Carrier": [ + "ES-Air" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "YUL" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:51:52.000Z" + ], + "Dest": [ + "Montreal / Pierre Elliott Trudeau International Airport" + ], + "FlightTimeHour": [ + "11.821998598483413" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 10639.799 + ], + "OriginCityName": [ + "Dubai" + ], + "DestWeather": [ + "Clear" + ], + "OriginCountry": [ + "AE" + ], + "DestCountry": [ + "CA" + ], + "DestRegion": [ + "CA-QC" + ], + "OriginAirportID": [ + "DXB" + ], + "DestCityName": [ + "Montreal" + ] + }, + "sort": [ + 1626443512000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "TJ-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Jorge Chavez International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + -77.114304, + -12.0219 + ], + "type": "Point" + } + ], + "FlightNum": [ + "8B6BGMO" + ], + "DestLocation": [ + { + "coordinates": [ + 128.445007, + 51.169997 + ], + "type": "Point" + } + ], + "FlightDelay": [ + true + ], + "DistanceMiles": [ + 9375.942 + ], + "FlightTimeMin": [ + 824.16406 + ], + "OriginWeather": [ + "Cloudy" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 463.068 + ], + "Carrier": [ + "Logstash Airways" + ], + "FlightDelayMin": [ + 30 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "XHBU" + ], + "FlightDelayType": [ + "Late Aircraft Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:50:55.000Z" + ], + "Dest": [ + "Ukrainka Air Base" + ], + "FlightTimeHour": [ + "13.736067768266615" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 15089.117 + ], + "OriginCityName": [ + "Lima" + ], + "DestWeather": [ + "Clear" + ], + "OriginCountry": [ + "PE" + ], + "DestCountry": [ + "RU" + ], + "DestRegion": [ + "RU-AMU" + ], + "OriginAirportID": [ + "LIM" + ], + "DestCityName": [ + "Belogorsk" + ] + }, + "sort": [ + 1626443455000 + ] + }, + { + "_index": "kibana_sample_data_flights", + "_id": "3J-sr3oB9JvwH6mY-m2Q", + "_version": 1, + "_score": null, + "fields": { + "Origin": [ + "Sydney Kingsford Smith International Airport" + ], + "OriginLocation": [ + { + "coordinates": [ + 151.177002, + -33.94609833 + ], + "type": "Point" + } + ], + "FlightNum": [ + "PASAN8N" + ], + "DestLocation": [ + { + "coordinates": [ + 8.54917, + 47.464699 + ], + "type": "Point" + } + ], + "FlightDelay": [ + false + ], + "DistanceMiles": [ + 10293.209 + ], + "FlightTimeMin": [ + 1380.4429 + ], + "OriginWeather": [ + "Sunny" + ], + "dayOfWeek": [ + 4 + ], + "AvgTicketPrice": [ + 380.29593 + ], + "Carrier": [ + "Logstash Airways" + ], + "FlightDelayMin": [ + 0 + ], + "OriginRegion": [ + "SE-BD" + ], + "DestAirportID": [ + "ZRH" + ], + "FlightDelayType": [ + "No Delay" + ], + "hour_of_day": [ + 13 + ], + "timestamp": [ + "2021-07-16T13:49:20.000Z" + ], + "Dest": [ + "Zurich Airport" + ], + "FlightTimeHour": [ + "23.007380215402044" + ], + "Cancelled": [ + false + ], + "DistanceKilometers": [ + 16565.314 + ], + "OriginCityName": [ + "Sydney" + ], + "DestWeather": [ + "Rain" + ], + "OriginCountry": [ + "AU" + ], + "DestCountry": [ + "CH" + ], + "DestRegion": [ + "CH-ZH" + ], + "OriginAirportID": [ + "SYD" + ], + "DestCityName": [ + "Zurich" + ] + }, + "sort": [ + 1626443360000 + ] + } + ] + }, + "aggregations": { + "2": { + "buckets": [ + { + "key_as_string": "2021-07-16T08:49:00.000-05:00", + "key": 1626443340000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T08:50:30.000-05:00", + "key": 1626443430000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T08:51:30.000-05:00", + "key": 1626443490000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T08:57:30.000-05:00", + "key": 1626443850000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T09:05:30.000-05:00", + "key": 1626444330000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T09:14:00.000-05:00", + "key": 1626444840000, + "doc_count": 1 + }, + { + "key_as_string": "2021-07-16T09:15:00.000-05:00", + "key": 1626444900000, + "doc_count": 1 + } + ] + } + } + }, + "isPartial": false, + "isRunning": false, + "total": 1, + "loaded": 1, + "isRestored": false +}`; +} +``` diff --git a/packages/core/docs/editors/code/code-block.md b/packages/core/docs/editors/code/code-block.md index 1ebe2a89c..81dc6528a 100644 --- a/packages/core/docs/editors/code/code-block.md +++ b/packages/core/docs/editors/code/code-block.md @@ -2,8 +2,26 @@

- Code block + Code

- \ No newline at end of file + + + + + <:body> + EuiCode and EuiCodeBlock are intended to render static lines or blocks of code in read-only contexts. If you need capabilities to edit, or want to print long code (e.g., printing JSON from an API), we recommend installing a version of Monaco. If you are building within the Kibana platform, you can use their CodeEditor. + + + + + + +

+ The EuiCode and EuiCodeBlock components support all language syntaxes supported by the prism library. The language prop can also be omitted to simply render formatted but unhighlighted code. +

+

+ JSX code (often React) has distinct language syntaxes from the base JavaScript and TypeScript languages. For these instances, use language="jsx" or language="tsx". +

+ diff --git a/packages/core/docs/editors/code/inline-demo/demo1.md b/packages/core/docs/editors/code/inline-demo/demo1.md index c81d29a1f..a7e81cc46 100644 --- a/packages/core/docs/editors/code/inline-demo/demo1.md +++ b/packages/core/docs/editors/code/inline-demo/demo1.md @@ -13,17 +13,20 @@ order: 1

You can also pass a language in like - {{this.htmlCode}}. + {{this.htmlCode}}.

Make the background transparent like this - + {{this.htmlCode}} .

- + ``` ```javascript component diff --git a/packages/core/docs/editors/markdown-editor/base-editor-demo/demo1.md b/packages/core/docs/editors/markdown-editor/base-editor-demo/demo1.md index e646f1f09..110e0b270 100644 --- a/packages/core/docs/editors/markdown-editor/base-editor-demo/demo1.md +++ b/packages/core/docs/editors/markdown-editor/base-editor-demo/demo1.md @@ -71,36 +71,17 @@ class Human { } \`\`\` -\`\`\`golang -package main - -import \"fmt\" - -func main() { - - // \`var\` declares 1 or more variables. - var a = "initial" - fmt.Println(a) - - // You can declare multiple variables at once. - var b, c int = 1, 2 - fmt.Println(b, c) - - // Go will infer the type of initialized variables. - var d = true - fmt.Println(d) +\`\`\`tsx +import Component from '@glimmer/component'; +import { helper } from '@ember/component/helper'; +import { tracked } from '@glimmer/tracking'; - // Variables declared without a corresponding - // initialization are _zero-valued_. For example, the - // zero value for an \`int\` is \`0\`. - var e int - fmt.Println(e) +export default class SomeComponent extends Component { + @tracked count = 0; - // The \`:=\` syntax is shorthand for declaring and - // initializing a variable, e.g. for - // \`var f string = "apple"\` in this case. - f := "apple" - fmt.Println(f) + add = helper(function([a, b]: [number, number]) { + return a + b; + }); } \`\`\` diff --git a/packages/core/package.json b/packages/core/package.json index 85e1cb4cc..ff89f6a55 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -55,6 +55,7 @@ "@ember/render-modifiers": "^2.0.4", "@html-next/vertical-collection": "3.0.0-1", "@types/lodash-es": "^4.17.4", + "@types/refractor": "^3.0.0", "chroma-js": "^2.1.0", "ember-auto-import": "^2.4.0", "ember-cached-decorator-polyfill": "^0.1.4", @@ -74,19 +75,19 @@ "ember-style-modifier": "^0.7.0", "ember-svg-jar": "^2.3.4", "ember-truth-helpers": "^3.0.0", - "highlight.js": "^9.18.5", "lodash-es": "^4.17.21", "mdast-util-to-hast": "^10.0.0", + "refractor": "^3.5.0", "rehype-raw": "^5.0.0", "rehype-stringify": "^8.0.0", "remark-breaks": "^3.0.2", "remark-emoji": "^2.1.0", - "remark-highlight.js": "^6.0.0", "remark-parse": "^8.0.3", "remark-rehype": "^8.0.0", "resolve": "^1.13.1", "tabbable": "^5.1.5", "unified": "^9.2.0", + "unist-util-visit": "^2.0.3", "vfile": "^4.2.0" }, "peerDependencies": { diff --git a/site/app/styles/app.css b/site/app/styles/app.css index 6f5fc7a81..d41e5dcad 100644 --- a/site/app/styles/app.css +++ b/site/app/styles/app.css @@ -20,7 +20,8 @@ @apply ml-6; &::before { content: '#'; - @apply absolute pr-2 -ml-4 opacity-100; + color: #1a1c21; + @apply absolute pr-2 -ml-6 opacity-100; } @screen lg { @@ -32,6 +33,7 @@ } } &:hover { + margin-left: 10px; & > a::before { @apply opacity-100; } diff --git a/site/app/styles/markdown/light.css b/site/app/styles/markdown/light.css index 09388fd62..ae5b98aba 100644 --- a/site/app/styles/markdown/light.css +++ b/site/app/styles/markdown/light.css @@ -3,9 +3,24 @@ } div.docfy-demo__example { - @apply p-4 border-t border-l border-r border-solid rounded-t; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border-top-right-radius: 6px; + flex-grow: 0; + display: flex; + flex-direction: column; border-color: #d3dae6; + background-color: #fff; + border: 1px solid #d3dae6; + border-left: 1px solid #d3dae6; + border-right: 1px solid #d3dae6; + border-top: 1px solid #d3dae6; border-style: solid solid none solid; + box-shadow: none; + display: flex; + flex-direction: column; + min-width: 0; + padding: 16px; } .docfy-demo__description { diff --git a/yarn.lock b/yarn.lock index 28240994a..67e40ceac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1413,15 +1413,7 @@ semver "^7.3.5" typescript-memoize "^1.0.1" -"@embroider/test-setup@^1.0.0": - version "1.3.0" - resolved "https://registry.yarnpkg.com/@embroider/test-setup/-/test-setup-1.3.0.tgz#c1d5c27a32462517ea9d92f6da9f4b098b72e43d" - integrity sha512-lVrpkPcEHmzqfKWz4Ep+Bh7DaqUbrkJAmYvcjNFklq5uGQKDxdBP/sNE2jyIgEa5AofG0UUAmNjWPZVJ6KVjOQ== - dependencies: - lodash "^4.17.21" - resolve "^1.20.0" - -"@embroider/test-setup@^1.5.0": +"@embroider/test-setup@^1.0.0", "@embroider/test-setup@^1.5.0": version "1.5.0" resolved "https://registry.yarnpkg.com/@embroider/test-setup/-/test-setup-1.5.0.tgz#bf6a3663ef3089a865fd76c55f60a62aa6a2e18f" integrity sha512-4C0dgVswxfA/lBCD8FUWADQhjeO8AJ2KmRkvItOPSwPlAA1QI7gOD28DuiAnCAK18muIFq7P++gvl1qBNid6lg== @@ -3174,9 +3166,9 @@ integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== "@types/node@*", "@types/node@>=10.0.0": - version "17.0.21" - resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644" - integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ== + version "17.0.23" + resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da" + integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw== "@types/node@^9.6.0": version "9.6.61" @@ -3272,9 +3264,9 @@ "@types/react" "*" "@types/react@*": - version "17.0.40" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.40.tgz#dc010cee6254d5239a138083f3799a16638e6bad" - integrity sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ== + version "17.0.42" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.42.tgz#8242b9219bf8a911c47f248e327206fea3f4ee5a" + integrity sha512-nuab3x3CpJ7VFeNA+3HTUuEkvClYHXqWtWd7Ud6AZYW7Z3NH9WKtgU+tFB0ZLcHq+niB/HnzLcaZPqMJ95+k5Q== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -3365,13 +3357,13 @@ "@types/yargs-parser" "*" "@typescript-eslint/eslint-plugin@^5.0.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.15.0.tgz#c28ef7f2e688066db0b6a9d95fb74185c114fb9a" - integrity sha512-u6Db5JfF0Esn3tiAKELvoU5TpXVSkOpZ78cEGn/wXtT2RVqs2vkt4ge6N8cRCyw7YVKhmmLDbwI2pg92mlv7cA== + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.16.0.tgz#78f246dd8d1b528fc5bfca99a8a64d4023a3d86d" + integrity sha512-SJoba1edXvQRMmNI505Uo4XmGbxCK9ARQpkvOd00anxzri9RNQk0DDCxD+LIl+jYhkzOJiOMMKYEHnHEODjdCw== dependencies: - "@typescript-eslint/scope-manager" "5.15.0" - "@typescript-eslint/type-utils" "5.15.0" - "@typescript-eslint/utils" "5.15.0" + "@typescript-eslint/scope-manager" "5.16.0" + "@typescript-eslint/type-utils" "5.16.0" + "@typescript-eslint/utils" "5.16.0" debug "^4.3.2" functional-red-black-tree "^1.0.1" ignore "^5.1.8" @@ -3380,68 +3372,68 @@ tsutils "^3.21.0" "@typescript-eslint/parser@^5.0.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.15.0.tgz#95f603f8fe6eca7952a99bfeef9b85992972e728" - integrity sha512-NGAYP/+RDM2sVfmKiKOCgJYPstAO40vPAgACoWPO/+yoYKSgAXIFaBKsV8P0Cc7fwKgvj27SjRNX4L7f4/jCKQ== + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.16.0.tgz#e4de1bde4b4dad5b6124d3da227347616ed55508" + integrity sha512-fkDq86F0zl8FicnJtdXakFs4lnuebH6ZADDw6CYQv0UZeIjHvmEw87m9/29nk2Dv5Lmdp0zQ3zDQhiMWQf/GbA== dependencies: - "@typescript-eslint/scope-manager" "5.15.0" - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/typescript-estree" "5.15.0" + "@typescript-eslint/scope-manager" "5.16.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/typescript-estree" "5.16.0" debug "^4.3.2" -"@typescript-eslint/scope-manager@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.15.0.tgz#d97afab5e0abf4018d1289bd711be21676cdd0ee" - integrity sha512-EFiZcSKrHh4kWk0pZaa+YNJosvKE50EnmN4IfgjkA3bTHElPtYcd2U37QQkNTqwMCS7LXeDeZzEqnsOH8chjSg== +"@typescript-eslint/scope-manager@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.16.0.tgz#7e7909d64bd0c4d8aef629cdc764b9d3e1d3a69a" + integrity sha512-P+Yab2Hovg8NekLIR/mOElCDPyGgFZKhGoZA901Yax6WR6HVeGLbsqJkZ+Cvk5nts/dAlFKm8PfL43UZnWdpIQ== dependencies: - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/visitor-keys" "5.15.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/visitor-keys" "5.16.0" -"@typescript-eslint/type-utils@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.15.0.tgz#d2c02eb2bdf54d0a645ba3a173ceda78346cf248" - integrity sha512-KGeDoEQ7gHieLydujGEFLyLofipe9PIzfvA/41urz4hv+xVxPEbmMQonKSynZ0Ks2xDhJQ4VYjB3DnRiywvKDA== +"@typescript-eslint/type-utils@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.16.0.tgz#b482bdde1d7d7c0c7080f7f2f67ea9580b9e0692" + integrity sha512-SKygICv54CCRl1Vq5ewwQUJV/8padIWvPgCxlWPGO/OgQLCijY9G7lDu6H+mqfQtbzDNlVjzVWQmeqbLMBLEwQ== dependencies: - "@typescript-eslint/utils" "5.15.0" + "@typescript-eslint/utils" "5.16.0" debug "^4.3.2" tsutils "^3.21.0" -"@typescript-eslint/types@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.15.0.tgz#c7bdd103843b1abae97b5518219d3e2a0d79a501" - integrity sha512-yEiTN4MDy23vvsIksrShjNwQl2vl6kJeG9YkVJXjXZnkJElzVK8nfPsWKYxcsGWG8GhurYXP4/KGj3aZAxbeOA== +"@typescript-eslint/types@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.16.0.tgz#5827b011982950ed350f075eaecb7f47d3c643ee" + integrity sha512-oUorOwLj/3/3p/HFwrp6m/J2VfbLC8gjW5X3awpQJ/bSG+YRGFS4dpsvtQ8T2VNveV+LflQHjlLvB6v0R87z4g== -"@typescript-eslint/typescript-estree@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.15.0.tgz#81513a742a9c657587ad1ddbca88e76c6efb0aac" - integrity sha512-Hb0e3dGc35b75xLzixM3cSbG1sSbrTBQDfIScqdyvrfJZVEi4XWAT+UL/HMxEdrJNB8Yk28SKxPLtAhfCbBInA== +"@typescript-eslint/typescript-estree@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.16.0.tgz#32259459ec62f5feddca66adc695342f30101f61" + integrity sha512-SE4VfbLWUZl9MR+ngLSARptUv2E8brY0luCdgmUevU6arZRY/KxYoLI/3V/yxaURR8tLRN7bmZtJdgmzLHI6pQ== dependencies: - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/visitor-keys" "5.15.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/visitor-keys" "5.16.0" debug "^4.3.2" globby "^11.0.4" is-glob "^4.0.3" semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/utils@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.15.0.tgz#468510a0974d3ced8342f37e6c662778c277f136" - integrity sha512-081rWu2IPKOgTOhHUk/QfxuFog8m4wxW43sXNOMSCdh578tGJ1PAaWPsj42LOa7pguh173tNlMigsbrHvh/mtA== +"@typescript-eslint/utils@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.16.0.tgz#42218b459d6d66418a4eb199a382bdc261650679" + integrity sha512-iYej2ER6AwmejLWMWzJIHy3nPJeGDuCqf8Jnb+jAQVoPpmWzwQOfa9hWVB8GIQE5gsCv/rfN4T+AYb/V06WseQ== dependencies: "@types/json-schema" "^7.0.9" - "@typescript-eslint/scope-manager" "5.15.0" - "@typescript-eslint/types" "5.15.0" - "@typescript-eslint/typescript-estree" "5.15.0" + "@typescript-eslint/scope-manager" "5.16.0" + "@typescript-eslint/types" "5.16.0" + "@typescript-eslint/typescript-estree" "5.16.0" eslint-scope "^5.1.1" eslint-utils "^3.0.0" -"@typescript-eslint/visitor-keys@5.15.0": - version "5.15.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.15.0.tgz#5669739fbf516df060f978be6a6dce75855a8027" - integrity sha512-+vX5FKtgvyHbmIJdxMJ2jKm9z2BIlXJiuewI8dsDYMp5LzPUcuTT78Ya5iwvQg3VqSVdmxyM8Anj1Jeq7733ZQ== +"@typescript-eslint/visitor-keys@5.16.0": + version "5.16.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.16.0.tgz#f27dc3b943e6317264c7492e390c6844cd4efbbb" + integrity sha512-jqxO8msp5vZDhikTwq9ubyMHqZ67UIvawohr4qF3KhlpL7gzSjOd+8471H3nh5LyABkaI85laEKKU8SnGUK5/g== dependencies: - "@typescript-eslint/types" "5.15.0" + "@typescript-eslint/types" "5.16.0" eslint-visitor-keys "^3.0.0" "@underline/eslint-config-ember-typescript@^0.12.0": @@ -3927,9 +3919,9 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: uri-js "^4.2.2" ajv@^8.0.0, ajv@^8.0.1, ajv@^8.8.0: - version "8.10.0" - resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.10.0.tgz#e573f719bd3af069017e3b66538ab968d040e54d" - integrity sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw== + version "8.11.0" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f" + integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg== dependencies: fast-deep-equal "^3.1.1" json-schema-traverse "^1.0.0" @@ -4499,12 +4491,12 @@ babel-import-util@^1.1.0: integrity sha512-sfzgAiJsUT1es9yrHAuJZuJfBkkOE7Og6rovAIwK/gNJX6MjDfWTprbPngdJZTd5ye4F3FvpvpQmvKXObRzVYA== babel-loader@8, babel-loader@^8.0.6, babel-loader@^8.2.2: - version "8.2.3" - resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.3.tgz#8986b40f1a64cacfcb4b8429320085ef68b1342d" - integrity sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw== + version "8.2.4" + resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b" + integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A== dependencies: find-cache-dir "^3.3.1" - loader-utils "^1.4.0" + loader-utils "^2.0.0" make-dir "^3.1.0" schema-utils "^2.6.5" @@ -6099,9 +6091,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317: - version "1.0.30001317" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001317.tgz#0548fb28fd5bc259a70b8c1ffdbe598037666a1b" - integrity sha512-xIZLh8gBm4dqNX0gkzrBeyI86J2eCjWzYAs40q88smG844YIrN4tVQl/RhquHvKEKImWWFIVh1Lxe5n1G/N+GQ== + version "1.0.30001319" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz#eb4da4eb3ecdd409f7ba1907820061d56096e88f" + integrity sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw== capture-exit@^2.0.0: version "2.0.0" @@ -7492,9 +7484,9 @@ ee-first@1.1.1: integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= electron-to-chromium@^1.3.47, electron-to-chromium@^1.4.84: - version "1.4.88" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.88.tgz#ebe6a2573b563680c7a7bf3a51b9e465c9c501db" - integrity sha512-oA7mzccefkvTNi9u7DXmT0LqvhnOiN2BhSrKerta7HeUC1cLoIwtbf2wL+Ah2ozh5KQd3/1njrGrwDBXx6d14Q== + version "1.4.91" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.91.tgz#842bbc97fd639abe7e46e7da530e3af5f6ca2831" + integrity sha512-Z7Jkc4+ouEg8F6RrrgLOs0kkJjI0cnyFQmnGVpln8pPifuKBNbUr37GMgJsCTSwy6Z9TK7oTwW33Oe+3aERYew== elliptic@^6.5.3: version "6.5.4" @@ -10226,7 +10218,7 @@ has-flag@^4.0.0: resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== -has-symbols@^1.0.1, has-symbols@^1.0.2: +has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8" integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A== @@ -10436,11 +10428,6 @@ heimdalljs@^0.2.0, heimdalljs@^0.2.1, heimdalljs@^0.2.3, heimdalljs@^0.2.5, heim dependencies: rsvp "~3.2.1" -highlight.js@^9.18.5: - version "9.18.5" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825" - integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA== - highlight.js@~10.7.0: version "10.7.3" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" @@ -11425,11 +11412,9 @@ json5@^1.0.1: minimist "^1.2.0" json5@^2.1.2: - version "2.2.0" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3" - integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA== - dependencies: - minimist "^1.2.5" + version "2.2.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c" + integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA== jsonfile@^2.1.0: version "2.4.0" @@ -11637,7 +11622,7 @@ loader-runner@^4.1.0, loader-runner@^4.2.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384" integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw== -loader-utils@^1.2.3, loader-utils@^1.4.0: +loader-utils@^1.2.3: version "1.4.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== @@ -12589,10 +12574,10 @@ minimist-options@4.1.0: is-plain-obj "^1.1.0" kind-of "^6.0.3" -minimist@>=1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== +minimist@>=1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6: + version "1.2.6" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" + integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== minimist@^0.2.1: version "0.2.1" @@ -12710,11 +12695,11 @@ mkdirp-infer-owner@^2.0.0: mkdirp "^1.0.3" mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1: - version "0.5.5" - resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" - integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ== + version "0.5.6" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6" + integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw== dependencies: - minimist "^1.2.5" + minimist "^1.2.6" mkdirp@^1.0.3, mkdirp@^1.0.4: version "1.0.4" @@ -13861,9 +13846,9 @@ postcss-functions@^3.0.0: postcss-value-parser "^3.3.0" postcss-import@^14.0.0: - version "14.0.2" - resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1" - integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g== + version "14.1.0" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0" + integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== dependencies: postcss-value-parser "^4.0.0" read-cache "^1.0.0" @@ -14017,7 +14002,7 @@ printf@^0.6.1: resolved "https://registry.yarnpkg.com/printf/-/printf-0.6.1.tgz#b9afa3d3b55b7f2e8b1715272479fc756ed88650" integrity sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw== -prismjs@~1.27.0: +prismjs@1.27.0, prismjs@~1.27.0: version "1.27.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057" integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA== @@ -14724,7 +14709,7 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" -regexp.prototype.flags@^1.3.1: +regexp.prototype.flags@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz#b3f4c0059af9e47eca9f3f660e51d81307e72307" integrity sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ== @@ -15680,9 +15665,9 @@ sort-object-keys@^1.1.3: integrity sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg== sort-package-json@^1.49.0: - version "1.54.0" - resolved "https://registry.yarnpkg.com/sort-package-json/-/sort-package-json-1.54.0.tgz#2096ccce1ef0221a6bf8ec3046ec6b9ae8d2c726" - integrity sha512-MA0nRiSfZ4/CNM/9rz70Hwq4PpvtBc3v532tzQSmoaLSdeBB3cCd488xmNruLL0fb/ZdbKlcaDDudwnrObbjBw== + version "1.55.0" + resolved "https://registry.yarnpkg.com/sort-package-json/-/sort-package-json-1.55.0.tgz#150328328a9ac8b417b43d5a1fae74e5f27254e9" + integrity sha512-xhKvRD8WGbALjXQkVuk4/93Z/2NIO+5IzKamdMjN5kn3L+N+M9YWQssmM6GXlQr9v1F7PGWsOJEo1gvXOhM7Mg== dependencies: detect-indent "^6.0.0" detect-newline "3.1.0" @@ -15986,17 +15971,17 @@ string-width@^2.1.0: strip-ansi "^4.0.0" string.prototype.matchall@^4.0.5: - version "4.0.6" - resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz#5abb5dabc94c7b0ea2380f65ba610b3a544b15fa" - integrity sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg== + version "4.0.7" + resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d" + integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg== dependencies: call-bind "^1.0.2" define-properties "^1.1.3" es-abstract "^1.19.1" get-intrinsic "^1.1.1" - has-symbols "^1.0.2" + has-symbols "^1.0.3" internal-slot "^1.0.3" - regexp.prototype.flags "^1.3.1" + regexp.prototype.flags "^1.4.1" side-channel "^1.0.4" string.prototype.padend@^3.0.0: @@ -17826,9 +17811,9 @@ yargs@^16.2.0: yargs-parser "^20.2.2" yargs@^17.0.1: - version "17.3.1" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.3.1.tgz#da56b28f32e2fd45aefb402ed9c26f42be4c07b9" - integrity sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA== + version "17.4.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.4.0.tgz#9fc9efc96bd3aa2c1240446af28499f0e7593d00" + integrity sha512-WJudfrk81yWFSOkZYpAZx4Nt7V4xp7S/uJkX0CnxovMCt1wCE8LNftPpNuF9X/u9gN5nsD7ycYtRcDf2pL3UiA== dependencies: cliui "^7.0.2" escalade "^3.1.1"