From bbbf38d76bf9e5c9ca51eec6bbba0fef4a168a45 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 11 Jul 2023 14:37:05 +0100
Subject: [PATCH] Add decorations for textmd and textsf (#13716)

GitOrigin-RevId: c5bedf2260c4e075e458ac38f90e5746dccdde81
---
 .../extensions/visual/atomic-decorations.ts   | 11 +++++--
 .../extensions/visual/visual-theme.ts         |  6 ++++
 .../codemirror-editor-visual.spec.tsx         | 30 +++++++++++--------
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts b/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
index 74f6e2951f..884ceba6dc 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts
@@ -849,9 +849,14 @@ export const atomicDecorations = (options: Options) => {
                 )
               } else if (
                 // markup that can't be toggled using toolbar buttons/keyboard shortcuts
-                ['\\textsc', '\\texttt', '\\sout', '\\emph'].includes(
-                  commandName
-                )
+                [
+                  '\\textsc',
+                  '\\texttt',
+                  '\\textmd',
+                  '\\textsf',
+                  '\\sout',
+                  '\\emph',
+                ].includes(commandName)
               ) {
                 if (shouldDecorate(state, nodeRef)) {
                   decorations.push(
diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts b/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
index e27898e51c..f34258c4f9 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
@@ -220,6 +220,12 @@ export const visualTheme = EditorView.theme({
   '.ol-cm-command-texttt': {
     fontFamily: 'monospace',
   },
+  '.ol-cm-command-textmd, .ol-cm-command-textmd > .ol-cm-command-textbf': {
+    fontWeight: 'normal',
+  },
+  '.ol-cm-command-textsf': {
+    fontFamily: 'var(--source-font-family)',
+  },
   '.ol-cm-command-underline': {
     textDecoration: 'underline',
   },
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx
index df11be5a3d..759b0fd695 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx
+++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx
@@ -149,18 +149,24 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     cy.get('@first-line').find(`.ol-cm-heading.ol-cm-command-${command}`)
   })
 
-  forEach(['textsc', 'texttt', 'sout', 'emph', 'url', 'caption']).it(
-    'handles \\%s text',
-    function (command) {
-      cy.get('@first-line').type(`\\${command}{`)
-      cy.get('@first-line').should('have.text', `\\${command}{}`)
-      cy.get('@first-line').type('{rightArrow} ')
-      cy.get('@first-line').should('have.text', `\\${command}{} `)
-      cy.get('@first-line').type('{Backspace}{leftArrow}test text{rightArrow} ')
-      cy.get('@first-line').should('have.text', 'test text ')
-      cy.get('@first-line').find(`.ol-cm-command-${command}`)
-    }
-  )
+  forEach([
+    'textsc',
+    'texttt',
+    'textmd',
+    'textsf',
+    'sout',
+    'emph',
+    'url',
+    'caption',
+  ]).it('handles \\%s text', function (command) {
+    cy.get('@first-line').type(`\\${command}{`)
+    cy.get('@first-line').should('have.text', `\\${command}{}`)
+    cy.get('@first-line').type('{rightArrow} ')
+    cy.get('@first-line').should('have.text', `\\${command}{} `)
+    cy.get('@first-line').type('{Backspace}{leftArrow}test text{rightArrow} ')
+    cy.get('@first-line').should('have.text', 'test text ')
+    cy.get('@first-line').find(`.ol-cm-command-${command}`)
+  })
 
   it('handles \\verb text', function () {
     cy.get('@first-line').type(`\\verb|`)