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 {