Add decorations for textmd and textsf (#13716)

GitOrigin-RevId: c5bedf2260c4e075e458ac38f90e5746dccdde81

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(

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',
   },

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|`)