From 971e0f0e84dbf27c6b851c08067d45e44bd5fe88 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 11 Aug 2023 09:11:10 +0100
Subject: [PATCH] [visual] Add decorations for `\textsuperscript` and
 `\textsubscript` (#14153)

GitOrigin-RevId: 7a5bfc7077131dab7ba9569b7edc0d5daad65347
---
 .../extensions/visual/atomic-decorations.ts            |  2 ++
 .../source-editor/extensions/visual/visual-theme.ts    | 10 ++++++++++
 .../components/codemirror-editor-visual.spec.tsx       |  2 ++
 3 files changed, 14 insertions(+)

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 95b9d2f052..d292775e09 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
@@ -936,6 +936,8 @@ export const atomicDecorations = (options: Options) => {
                   '\\texttt',
                   '\\textmd',
                   '\\textsf',
+                  '\\textsuperscript',
+                  '\\textsubscript',
                   '\\sout',
                   '\\emph',
                 ].includes(commandName)
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 4cc7ca3b22..791a5054e5 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
@@ -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',
   },
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 735fd54b62..74a293e4e5 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
@@ -154,6 +154,8 @@ describe('<CodeMirrorEditor/> in Visual mode', function () {
     'texttt',
     'textmd',
     'textsf',
+    'textsubscript',
+    'textsuperscript',
     'sout',
     'emph',
     'url',