Support for subscript and superscript marks (#531)

Co-authored-by: abeforgit <arnebertrand@gmail.com>

addon/components/plugins/subscript/button.hbs

@@ -0,0 +1,6 @@
+<Rdfa::ToolbarIcon
+  @active={{this.isActive}}
+  @title={{t 'ember-rdfa-editor.subscript'}}
+  @icon='subscript'
+  {{on 'click' this.toggle}}
+/>

addon/components/plugins/subscript/button.ts

@@ -0,0 +1,20 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+
+type Args = {
+  controller: ProseController;
+};
+export default class SubscriptButton extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+  get isActive() {
+    return this.controller.isMarkActive(this.controller.schema.marks.subscript);
+  }
+
+  @action
+  toggle() {
+    this.controller.toggleMark('subscript');
+  }
+}

addon/components/plugins/superscript/button.hbs

@@ -0,0 +1,6 @@
+<Rdfa::ToolbarIcon
+  @active={{this.isActive}}
+  @title={{t 'ember-rdfa-editor.superscript'}}
+  @icon='superscript'
+  {{on 'click' this.toggle}}
+/>

addon/components/plugins/superscript/button.ts

@@ -0,0 +1,22 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+
+type Args = {
+  controller: ProseController;
+};
+export default class SuperscriptButton extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+  get isActive() {
+    return this.controller.isMarkActive(
+      this.controller.schema.marks.superscript
+    );
+  }
+
+  @action
+  toggle() {
+    this.controller.toggleMark('superscript');
+  }
+}

addon/plugins/subscript/index.ts

@@ -0,0 +1,15 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { MarkSpec } from 'prosemirror-model';
+
+export const subscript: MarkSpec = {
+  excludes: 'subscript superscript',
+  parseDOM: [{ tag: 'sub' }],
+  toDOM() {
+    return ['sub', 0];
+  },
+};
+
+export const subscriptWidget: WidgetSpec = {
+  componentName: 'plugins/subscript/button',
+  desiredLocation: 'toolbarMiddle',
+};

addon/plugins/superscript/index.ts

@@ -0,0 +1,15 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { MarkSpec } from 'prosemirror-model';
+
+export const superscript: MarkSpec = {
+  excludes: 'superscript subscript',
+  parseDOM: [{ tag: 'sup' }],
+  toDOM() {
+    return ['sup', 0];
+  },
+};
+
+export const superscriptWidget: WidgetSpec = {
+  componentName: 'plugins/superscript/button',
+  desiredLocation: 'toolbarMiddle',
+};

app/components/plugins/subscript/button.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor/components/plugins/subscript/button';

app/components/plugins/superscript/button.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor/components/plugins/superscript/button';

app/styles/ember-rdfa-editor/_c-content.scss

@@ -314,6 +314,16 @@ $say-editor-highlight-hover-color: var(--au-gray-200) !default;
     display: inline-block;
   }
 
+  sub {
+    vertical-align: sub;
+    font-size: smaller;
+  }
+
+  sup {
+    vertical-align: super;
+    font-size: smaller;
+  }
+
   // Table styling
   table th {
     white-space: initial;
@@ -439,3 +449,4 @@ $say-editor-highlight-hover-color: var(--au-gray-200) !default;
     font-weight: var(--au-medium);
   }
 }
+