Add support for subscript/superscript

Content editor now supports subscript and superscript text

Changelog: added

app/assets/javascripts/content_editor/extensions/subscript.js

+export { Subscript as default } from '@tiptap/extension-subscript';

app/assets/javascripts/content_editor/extensions/superscript.js

+export { Superscript as default } from '@tiptap/extension-superscript';

app/assets/javascripts/content_editor/services/create_content_editor.js

@@ -23,6 +23,8 @@ import Loading from '../extensions/loading';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
 import Strike from '../extensions/strike';
+import Subscript from '../extensions/subscript';
+import Superscript from '../extensions/superscript';
 import Table from '../extensions/table';
 import TableCell from '../extensions/table_cell';
 import TableHeader from '../extensions/table_header';
@@ -77,6 +79,8 @@ export const createContentEditor = ({
     OrderedList,
     Paragraph,
     Strike,
+    Subscript,
+    Superscript,
     TableCell,
     TableHeader,
     TableRow,

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -19,6 +19,8 @@ import ListItem from '../extensions/list_item';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
 import Strike from '../extensions/strike';
+import Subscript from '../extensions/subscript';
+import Superscript from '../extensions/superscript';
 import Table from '../extensions/table';
 import TableCell from '../extensions/table_cell';
 import TableHeader from '../extensions/table_header';
@@ -30,6 +32,8 @@ const defaultSerializerConfig = {
     [Bold.name]: defaultMarkdownSerializer.marks.strong,
     [Code.name]: defaultMarkdownSerializer.marks.code,
     [Italic.name]: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
+    [Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
+    [Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
     [Link.name]: {
       open() {
         return '[';

package.json

@@ -85,6 +85,8 @@
     "@tiptap/extension-ordered-list": "^2.0.0-beta.14",
     "@tiptap/extension-paragraph": "^2.0.0-beta.15",
     "@tiptap/extension-strike": "^2.0.0-beta.16",
+    "@tiptap/extension-subscript": "^2.0.0-beta.4",
+    "@tiptap/extension-superscript": "^2.0.0-beta.4",
     "@tiptap/extension-table": "^2.0.0-beta.25",
     "@tiptap/extension-table-cell": "^2.0.0-beta.13",
     "@tiptap/extension-table-header": "^2.0.0-beta.15",

spec/frontend/fixtures/api_markdown.yml

@@ -8,6 +8,10 @@
   markdown: '_emphasized text_'
 - name: inline_code
   markdown: '`code`'
+- name: subscript
+  markdown: H<sub>2</sub>O
+- name: superscript
+  markdown: 2<sup>8</sup> = 256
 - name: strike
   markdown: '~~del~~'
 - name: horizontal_rule

yarn.lock

@@ -1474,6 +1474,16 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.16.tgz#cccce9713824e05ebde895f84f747b8bbed45f7d"
   integrity sha512-SPSCUVzxFLKZzgMXYfeUZE+xy52CJckswo0dZ/8NcUthl3mkDS/TwzokpQ/wsyEsKaJNYt8vh2S9HpadSrLcug==
 
+"@tiptap/extension-subscript@^2.0.0-beta.4":
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-subscript/-/extension-subscript-2.0.0-beta.4.tgz#07907df58695eb02bf6904d2c3635111003b30fd"
+  integrity sha512-eEjUXkgfeIBIgzdg3/GQGdta9Ww0Wwfiovn7ZvalRofRT4dnoiS0/83t1pQL81JT+ENow5jtx8RZHlaw/fMP4g==
+
+"@tiptap/extension-superscript@^2.0.0-beta.4":
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.4.tgz#16906d71dd8f9892101cf792f42005f8cd404516"
+  integrity sha512-rTQCnSnloSf6UN1y3zhu6j41MxrcCVWm5JIPX8VEt60WsOXJLAc/YJHLYi2FWhh/Psq8k78sPrmZbjYUrj3Dkw==
+
 "@tiptap/extension-table-cell@^2.0.0-beta.13":
   version "2.0.0-beta.13"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.13.tgz#c01eada4859d5ea487d61e68cc7fab7ed2e4842a"