[visual] Add decorations for \textsuperscript and \textsubscript (#14153)

GitOrigin-RevId: 7a5bfc7077131dab7ba9569b7edc0d5daad65347

services/web/frontend/js/features/source-editor/extensions/visual/atomic-decorations.ts

@@ -936,6 +936,8 @@ export const atomicDecorations = (options: Options) => {
                   '\\texttt',
                   '\\textmd',
                   '\\textsf',
+                  '\\textsuperscript',
+                  '\\textsubscript',
                   '\\sout',
                   '\\emph',
                 ].includes(commandName)

services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts

@@ -248,6 +248,16 @@ export const visualTheme = EditorView.theme({
   '.ol-cm-command-textsf': {
     fontFamily: 'var(--source-font-family)',
   },
+  '.ol-cm-command-textsuperscript': {
+    verticalAlign: 'super',
+    fontSize: 'smaller',
+    lineHeight: 'calc(var(--line-height) / 2)',
+  },
+  '.ol-cm-command-textsubscript': {
+    verticalAlign: 'sub',
+    fontSize: 'smaller',
+    lineHeight: 'calc(var(--line-height) / 2)',
+  },
   '.ol-cm-command-underline': {
     textDecoration: 'underline',
   },

services/web/test/frontend/features/source-editor/components/codemirror-editor-visual.spec.tsx

@@ -154,6 +154,8 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     'texttt',
     'textmd',
     'textsf',
+    'textsubscript',
+    'textsuperscript',
     'sout',
     'emph',
     'url',