Revert "Use mark tag for highlights (#2176)" (#2225)

This reverts commit d9858ae.
openstax · Apr 22, 2024 · 8718547 · 8718547
1 parent aac5c69
commit 8718547
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 188 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -34,6 +34,9 @@
     } ],
     "font-family-no-duplicate-names": true,
     "font-family-no-missing-generic-family-keyword": true,
+    "function-comma-space-after": [ "always", {
+      "severity": "warning"
+    } ],
     "function-max-empty-lines": 0,
     "function-url-quotes": "always",
     "indentation": 2,
@@ -74,7 +77,7 @@
     } ],
     "unit-no-unknown": true,
     "unit-case": "lower",
-    "value-keyword-case": ["lower", {"ignoreKeywords": ["dummyValue"]}],
+    "value-keyword-case": ["lower", ignoreKeywords: ["dummyValue"]],
     "value-list-max-empty-lines": 0,
     "value-no-vendor-prefix": [ true, {
       "severity": "warning"

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "@craco/craco": "<7",
     "@formatjs/intl-pluralrules": "^5.2.3",
     "@openstax/event-capture-client": "^2.0.2",
-    "@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.3",
+    "@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.2",
     "@openstax/open-search-client": "0.1.0-build.7",
     "@openstax/ts-utils": "1.6.0",
     "@openstax/ui-components": "https://github.com/openstax/ui-components#1.3.4-post2",

diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -580,29 +580,6 @@ Array [
   }
 }
 
-@media screen {
-  .c4 .highlight::before,
-  .c4 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .c4 .highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c4 .highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-}
-
 @media screen {
   .c4 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -690,32 +667,11 @@ Array [
     font-weight: bold;
   }
 
-  .c4 .search-highlight::before,
-  .c4 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .c4 .search-highlight,
   .c4 .search-highlight .math {
     background-color: #ffea00;
   }
 
-  .c4 .search-highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c4 .search-highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-
   .c4 .search-highlight[aria-current],
   .c4 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -7,13 +7,12 @@ import { highlightStyles } from '../../constants';
 import {
   highlightBlockPadding,
   highlightIndicatorSize,
-  highlightIndicatorSizeForBlock
+  highlightIndicatorSizeForBlock,
 } from '../../highlights/constants';
 import { contentTextWidth } from '../constants';
 
 export const contentTextStyle = css`
-  @media screen {
-    /* full page width in print */
+  @media screen { /* full page width in print */
     max-width: ${contentTextWidth}rem;
     margin: 0 auto;
   }
@@ -23,19 +22,6 @@ export const contentTextStyle = css`
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
 
-const hideBeforeAndAfter = `
-  &::before,
-  &::after {
-    clip-path: inset(100%);
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-`;
-
 export default styled(MainContent)`
   ${contentTextStyle}
   overflow: visible;
@@ -68,18 +54,6 @@ export default styled(MainContent)`
   .highlight {
     position: relative;
     z-index: 1;
-
-    @media screen {
-      ${hideBeforeAndAfter}
-
-      &[data-start-message]::before {
-        content: attr(data-start-message);
-      }
-
-      &[data-end-message]::after {
-        content: attr(data-end-message);
-      }
-    }
   }
 
   /* stylelint-disable selector-class-pattern */
@@ -89,8 +63,7 @@ export default styled(MainContent)`
   }
   /* stylelint-enable selector-class-pattern */
 
-  ${highlightStyles.map(
-    style => css`
+  ${highlightStyles.map((style) => css`
     .highlight.${style.label} {
       background-color: ${style.passive};
 
@@ -141,10 +114,9 @@ export default styled(MainContent)`
           border-bottom: 0.2rem solid ${style.focusBorder};
           padding: 0.2rem 0 0;
 
-          ${Color(style.focused).isDark() &&
-            css`
-              color: ${theme.color.text.white};
-            `}
+          ${Color(style.focused).isDark() && css`
+            color: ${theme.color.text.white};
+          `}
 
           &.block:after {
             background-color: ${style.focused};
@@ -156,26 +128,16 @@ export default styled(MainContent)`
         }
       }
     }
-  `
-  )}
+  `)}
 
   @media screen {
     .search-highlight {
-      ${hideBeforeAndAfter}
       font-weight: bold;
 
       ${SELF_AND_CHILD_MATH_SELECTOR} {
         background-color: #ffea00;
       }
 
-      &[data-start-message]::before {
-        content: attr(data-start-message);
-      }
-
-      &[data-end-message]::after {
-        content: attr(data-end-message);
-      }
-
       &[aria-current] {
         ${SELF_AND_CHILD_MATH_SELECTOR} {
           background-color: #ff9e4b;

diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2215,29 +2215,6 @@ li[aria-label="Current Page"] .c60 {
   }
 }
 
-@media screen {
-  .c78 .highlight::before,
-  .c78 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .c78 .highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c78 .highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-}
-
 @media screen {
   .c78 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -2325,32 +2302,11 @@ li[aria-label="Current Page"] .c60 {
     font-weight: bold;
   }
 
-  .c78 .search-highlight::before,
-  .c78 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c78 .search-highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-
   .c78 .search-highlight[aria-current],
   .c78 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;
@@ -6810,29 +6766,6 @@ li[aria-label="Current Page"] .c60 {
   }
 }
 
-@media screen {
-  .c78 .highlight::before,
-  .c78 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .c78 .highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c78 .highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-}
-
 @media screen {
   .c78 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -6920,32 +6853,11 @@ li[aria-label="Current Page"] .c60 {
     font-weight: bold;
   }
 
-  .c78 .search-highlight::before,
-  .c78 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c78 .search-highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-
   .c78 .search-highlight[aria-current],
   .c78 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;

diff --git a/src/app/messages/en/messages.json b/src/app/messages/en/messages.json
@@ -65,10 +65,8 @@
   "i18n:highlighter:edit-note:label": "Edit highlighted note",
   "i18n:highlighter:highlight:end": "End of {style} highlight",
   "i18n:highlighter:highlight:start": "Start {style} highlight",
-  "i18n:highlighter:highlight:start-selected": "Start selected {style} highlight",
   "i18n:highlighter:highlight:end:search": "End of search result",
   "i18n:highlighter:highlight:start:search": "Start search result",
-  "i18n:highlighter:highlight:start-selected:search": "Start selected search result",
   "i18n:highlighting:button:cancel": "Cancel",
   "i18n:highlighting:button:delete": "Delete",
   "i18n:highlighting:button:save": "Save",

diff --git a/src/app/messages/es/messages.json b/src/app/messages/es/messages.json
@@ -63,10 +63,8 @@
   "i18n:highlighter:edit-note:label": "Editar nota resaltada",
   "i18n:highlighter:highlight:end": "Final de texto resaltado {style, select, blue {azul} green {verde} pink {rosado} purple {morado} yellow {amarillo} other {{style}}}",
   "i18n:highlighter:highlight:start": "Comienzo de texto resaltado {style, select, blue {azul} green {verde} pink {rosado} purple {morado} yellow {amarillo} other {{style}}}",
-  "i18n:highlighter:highlight:start-selected": "Comienzo de texto resaltado seleccionado {style, select, blue {azul} green {verde} pink {rosado} purple {morado} yellow {amarillo} other {{style}}}",
   "i18n:highlighter:highlight:end:search": "Final de resultado de búsqueda",
   "i18n:highlighter:highlight:start:search": "Comienzo de resultado de búsqueda",
-  "i18n:highlighter:highlight:start-selected:search": "Comienzo de resultado de búsqueda seleccionado",
   "i18n:highlighting:button:cancel": "Cancelar",
   "i18n:highlighting:button:delete": "Eliminar",
   "i18n:highlighting:button:save": "Guardar",

diff --git a/src/app/messages/pl/messages.json b/src/app/messages/pl/messages.json
@@ -63,10 +63,8 @@
   "i18n:highlighter:edit-note:label": "edytuj notatkę",
   "i18n:highlighter:highlight:end": "Koniec {style, select, blue {niebieskiego} green {zielonego} pink {różowego} purple {fioletowego} yellow {żółtego} other {{style}}} zakreślenia",
   "i18n:highlighter:highlight:start": "Początek {style, select, blue {niebieskiego} green {zielonego} pink {różowego} purple {fioletowego} yellow {żółtego} other {{style}}} zakreślenia",
-  "i18n:highlighter:highlight:start-selected": "Początek {style, select, blue {niebieskiego} green {zielonego} pink {różowego} purple {fioletowego} yellow {żółtego} other {{style}}} wybranego",
   "i18n:highlighter:highlight:end:search": "Koniec zakreślenia wyniku wyszukiwania",
   "i18n:highlighter:highlight:start:search": "Początek zakreślenia wyniku wyszukiwania",
-  "i18n:highlighter:highlight:start-selected:search": "Początek wybranego wyniku wyszukiwania",
   "i18n:highlighting:button:cancel": "Anuluj",
   "i18n:highlighting:button:delete": "Usuń",
   "i18n:highlighting:button:save": "Zachowaj",

diff --git a/yarn.lock b/yarn.lock
@@ -5083,9 +5083,9 @@
   dependencies:
     uuid "^8.3.2"
 
-"@openstax/highlighter@https://github.com/openstax/highlighter#v1.14.3":
-  version "1.14.0"
-  resolved "https://github.com/openstax/highlighter#fd87f0b8c40cc1bbfc1fa539adadf3cb1b6f65b5"
+"@openstax/highlighter@https://github.com/openstax/highlighter#v1.14.2":
+  version "1.14.1"
+  resolved "https://github.com/openstax/highlighter#fcd259e1642e243de6ed95771d0b97249ff2d162"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"