Merge pull request #157 from aws/ege/bugFix

Fix disappearing span tags inside code blocks
aws · Nov 7, 2024 · dc939c2 · dc939c2
2 parents 7b12189 + 016aac2
commit dc939c2
Show file tree

Hide file tree

Showing 6 changed files with 5 additions and 82 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: '<span class="amzn-mynah-search-result-highlight">',
-    textReplacement: '__mynahhighlighterstart__',
-  },
-  end: {
-    markup: '</span>',
-    textReplacement: '__mynahhighlighterend__',
-  },
-};
-export const ellipsis = {
-  start: {
-    markup: '<span class="amzn-mynah-search-result-ellipsis">',
-    textReplacement: '__mynahcodeellipsisstart__',
-  },
-  end: {
-    markup: '</span>',
-    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
@@ -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
@@ -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 {