From 87185473b4886864dd0245e429a0502999eae97e Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Mon, 22 Apr 2024 11:22:24 -0500 Subject: [PATCH] Revert "Use mark tag for highlights (#2176)" (#2225) This reverts commit d9858aedcba6542c0e0efd5d282ba9b1b82813aa. --- .stylelintrc | 5 +- package.json | 2 +- .../__snapshots__/routes.spec.tsx.snap | 44 ---------- .../content/components/Page/PageContent.tsx | 52 ++--------- .../__snapshots__/Content.spec.tsx.snap | 88 ------------------- src/app/messages/en/messages.json | 2 - src/app/messages/es/messages.json | 2 - src/app/messages/pl/messages.json | 2 - yarn.lock | 6 +- 9 files changed, 15 insertions(+), 188 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index c3e0885805..42e71858de 100644 --- 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 index ed81d8a3b1..853baf33e9 100644 --- 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 index 675eca2ee7..1306db03b5 100644 --- 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 index f4305e4681..b780df1100 100644 --- 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 index f31dce8434..cc16a43b40 100644 --- 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 index 1797566273..77246d9f3d 100644 --- 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 index 9c0ccda37f..cfc3101047 100644 --- 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 index 63fd89b9a3..2dc00e9043 100644 --- 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 index 86174788ea..5876231132 100644 --- 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"