diff --git a/src/components/__test__/syntax-highlighter.spec.ts b/src/components/__test__/syntax-highlighter.spec.ts index 4eb1bcf7..68ef8834 100644 --- a/src/components/__test__/syntax-highlighter.spec.ts +++ b/src/components/__test__/syntax-highlighter.spec.ts @@ -5,7 +5,6 @@ describe('syntax-highlighter', () => { const testSyntaxHighlighter = new SyntaxHighlighter({ codeStringWithMarkup: 'alert("hello");\n', language: 'js', - keepHighlights: true, block: true, }); @@ -18,7 +17,6 @@ describe('syntax-highlighter', () => { const testSyntaxHighlighter = new SyntaxHighlighter({ codeStringWithMarkup: 'alert("hello");\n', language: 'typescript', - keepHighlights: true, codeBlockActions: { copy: { id: 'copy', diff --git a/src/components/button.ts b/src/components/button.ts index e5405c31..8befde89 100644 --- a/src/components/button.ts +++ b/src/components/button.ts @@ -19,6 +19,7 @@ import { Config } from '../helper/config'; import { cancelEvent } from '../helper/events'; import escapeHTML from 'escape-html'; import '../styles/components/_button.scss'; +import unescapeHTML from 'unescape-html'; const TOOLTIP_DELAY = 350; export interface ButtonProps { @@ -119,7 +120,7 @@ class ButtonInternal extends ButtonAbstract { if (typeof label !== 'string') { return [ { type: 'span', classNames: [ 'mynah-button-label' ], children: [ label ] } ]; } else { - return [ { type: 'span', classNames: [ 'mynah-button-label' ], innerHTML: marked.parseInline(escapeHTML(label)) as string } ]; + return [ { type: 'span', classNames: [ 'mynah-button-label' ], innerHTML: marked.parseInline(unescapeHTML(escapeHTML(label))) as string } ]; } } return []; diff --git a/src/components/card/card-body.ts b/src/components/card/card-body.ts index ca262d87..89ab7ff2 100644 --- a/src/components/card/card-body.ts +++ b/src/components/card/card-body.ts @@ -136,7 +136,6 @@ export class CardBody { const highlighter = new SyntaxHighlighter({ codeStringWithMarkup: unescapeHTML(codeString), language: snippetLanguage?.trim() !== '' ? snippetLanguage : '', - keepHighlights: true, codeBlockActions: !isBlockCode ? undefined : { diff --git a/src/components/syntax-highlighter.ts b/src/components/syntax-highlighter.ts index dbeb7cf8..1699a411 100644 --- a/src/components/syntax-highlighter.ts +++ b/src/components/syntax-highlighter.ts @@ -43,10 +43,10 @@ import { Icon } from './icon'; import { cancelEvent } from '../helper/events'; import { highlightersWithTooltip } from './card/card-body'; import escapeHTML from 'escape-html'; -import unescapeHTML from 'unescape-html'; import '../styles/components/_syntax-highlighter.scss'; import { copyToClipboard } from '../helper/chat-item'; import testIds from '../helper/test-ids'; +import unescapeHTML from 'unescape-html'; const IMPORTED_LANGS = [ 'markup', @@ -98,32 +98,9 @@ const IMPORTED_LANGS = [ ]; const DEFAULT_LANG = 'clike'; -// they'll be used to replaced within the code, so making them unique is a must -export const highlighters = { - start: { - markup: '', - textReplacement: '__mynahhighlighterstart__', - }, - end: { - markup: '', - textReplacement: '__mynahhighlighterend__', - }, -}; -export const ellipsis = { - start: { - markup: '', - textReplacement: '__mynahcodeellipsisstart__', - }, - end: { - markup: '', - textReplacement: '__mynahcodeellipsisend__', - }, -}; - export interface SyntaxHighlighterProps { codeStringWithMarkup: string; language?: string; - keepHighlights?: boolean; showLineNumbers?: boolean; block?: boolean; startingLineNumber?: number; @@ -141,17 +118,8 @@ export class SyntaxHighlighter { constructor (props: SyntaxHighlighterProps) { this.props = props; - let codeMarkup = unescapeHTML(props.codeStringWithMarkup); - // Replacing the incoming markups with keyword matching static texts - if (props.keepHighlights === true) { - codeMarkup = codeMarkup - .replace(new RegExp(highlighters.start.markup, 'g'), highlighters.start.textReplacement) - .replace(new RegExp(highlighters.end.markup, 'g'), highlighters.end.textReplacement) - .replace(new RegExp(ellipsis.start.markup, 'g'), ellipsis.start.textReplacement) - .replace(new RegExp(ellipsis.end.markup, 'g'), ellipsis.end.textReplacement); - } - - let escapedCodeBlock = escapeHTML(codeMarkup); + // To ensure we are not leaving anything unescaped before escaping i.e to prevent double escaping + let escapedCodeBlock = escapeHTML(unescapeHTML(props.codeStringWithMarkup)); // Convert reference tracker escaped markups back to original incoming from the parent escapedCodeBlock = escapedCodeBlock @@ -187,15 +155,6 @@ export class SyntaxHighlighter { }); highlightElement(preElement); - // replacing back the keyword matchings for incoming highlights to markup for highlighting code - if (props.keepHighlights === true) { - preElement.innerHTML = preElement.innerHTML - .replace(new RegExp(highlighters.start.textReplacement, 'g'), highlighters.start.markup) - .replace(new RegExp(highlighters.end.textReplacement, 'g'), highlighters.end.markup) - .replace(new RegExp(ellipsis.start.textReplacement, 'g'), ellipsis.start.markup) - .replace(new RegExp(ellipsis.end.textReplacement, 'g'), ellipsis.end.markup); - } - if (props.codeBlockActions != null) { Object.keys(props.codeBlockActions).forEach((actionId: string) => { const validAction = props.codeBlockActions?.[actionId]?.acceptedLanguages == null || props.language == null || props.codeBlockActions?.[actionId]?.acceptedLanguages?.find(acceptedLang => props.language === acceptedLang) != null ? props.codeBlockActions?.[actionId] : undefined; diff --git a/src/styles/components/card/_card-body.scss b/src/styles/components/card/_card-body.scss index 51af09ab..81c970f3 100644 --- a/src/styles/components/card/_card-body.scss +++ b/src/styles/components/card/_card-body.scss @@ -170,35 +170,5 @@ color: inherit; cursor: help; } - - .amzn-mynah-search-result-highlight { - background-color: var(--mynah-color-highlight); - color: var(--mynah-color-highlight-text); - } - - .amzn-mynah-search-result-ellipsis { - display: inline-block; - position: relative; - padding-left: var(--mynah-sizing-2); - margin-top: var(--mynah-sizing-1); - margin-bottom: var(--mynah-sizing-1); - font-size: calc(1em + var(--mynah-sizing-1)) !important; - user-select: none; - cursor: default; - height: var(--mynah-sizing-7); - - &:before { - pointer-events: none; - content: ''; - width: calc(1em + var(--mynah-sizing-2)); - height: calc(1em + var(--mynah-sizing-2)); - position: absolute; - left: 0; - top: 0; - background-color: currentColor; - opacity: 0.1; - border-radius: var(--mynah-sizing-1); - } - } } } diff --git a/src/styles/components/chat/_chat-item-card.scss b/src/styles/components/chat/_chat-item-card.scss index c9389202..bf562584 100644 --- a/src/styles/components/chat/_chat-item-card.scss +++ b/src/styles/components/chat/_chat-item-card.scss @@ -224,10 +224,6 @@ border-radius: 0; box-shadow: none; } - .amzn-mynah-search-result-highlight { - background-color: inherit; - color: inherit; - } } &:not(.expanded) { > .mynah-chat-item-card-related-content-item {