feat: add support for superscript, subscript

sibiraj-s · May 13, 2024 · 65a95ff · 65a95ff
1 parent ac2d4e7
commit 65a95ff
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 1 deletion.
diff --git a/docs/src/content/docs/configuration.md b/docs/src/content/docs/configuration.md
@@ -52,6 +52,8 @@ NgxEditorModule.forRoot({
     insertLink: 'Insert Link',
     removeLink: 'Remove Link',
     insertImage: 'Insert Image',
+    superscript: 'Superscript',
+    subscript: 'Subscript',
 
     // pupups, forms, others...
     url: 'URL',

diff --git a/docs/src/content/docs/menu.md b/docs/src/content/docs/menu.md
@@ -29,6 +29,7 @@ export class AppComponent implements OnInit, OnDestroy {
     ['text_color', 'background_color'],
     ['align_left', 'align_center', 'align_right', 'align_justify'],
     ['horizontal_rule', 'format_clear', 'indent', 'outdent'],
+    ['superscript', 'subscript'],
   ];
   colorPresets = ['red', '#FF0000', 'rgb(255, 0, 0)'];
 

diff --git a/projects/ngx-editor/schema/marks.ts b/projects/ngx-editor/schema/marks.ts
@@ -145,6 +145,28 @@ const textBackgroundColor: MarkSpec = {
   },
 };
 
+const sup: MarkSpec = {
+  attrs: {},
+  parseDOM: [
+    { tag: 'sup' },
+    { style: 'vertical-align=super' },
+  ],
+  toDOM() {
+    return ['sup', 0];
+  },
+};
+
+const sub: MarkSpec = {
+  attrs: {},
+  parseDOM: [
+    { tag: 'sub' },
+    { style: 'vertical-align=sub' },
+  ],
+  toDOM() {
+    return ['sub', 0];
+  },
+};
+
 const marks = {
   link,
   em,
@@ -154,6 +176,8 @@ const marks = {
   s,
   text_color: textColor,
   text_background_color: textBackgroundColor,
+  sup,
+  sub,
 };
 
 export default marks;
diff --git a/projects/ngx-editor/src/lib/EditorCommands.ts b/projects/ngx-editor/src/lib/EditorCommands.ts
@@ -164,6 +164,16 @@ class EditorCommands {
     return this;
   }
 
+  superscript(): this {
+    execMark('sup')(this.state, this.dispatch);
+    return this;
+  }
+
+  subscript(): this {
+    execMark('sub')(this.state, this.dispatch);
+    return this;
+  }
+
   toggleOrderedList(): this {
     const command = new ListCommand(false);
     command.toggle()(this.state, this.dispatch);

diff --git a/projects/ngx-editor/src/lib/Locals.ts b/projects/ngx-editor/src/lib/Locals.ts
@@ -30,6 +30,8 @@ export const defaults: Record<string, string | Observable<string>> = {
   insertImage: 'Insert Image',
   indent: 'Increase Indent',
   outdent: 'Decrease Indent',
+  superscript: 'Superscript',
+  subscript: 'Subscript',
 
   // pupups, forms, others...
   url: 'URL',

diff --git a/projects/ngx-editor/src/lib/commands/index.ts b/projects/ngx-editor/src/lib/commands/index.ts
@@ -36,3 +36,5 @@ export const TEXT_COLOR = new TextColor('text_color', 'color');
 export const TEXT_BACKGROUND_COLOR = new TextColor('text_background_color', 'backgroundColor');
 export const INDENT = new Indent('increase');
 export const OUTDENT = new Indent('decrease');
+export const SUPERSCRIPT = new Mark('sup');
+export const SUBSCRIPT = new Mark('sub');
diff --git a/projects/ngx-editor/src/lib/icons/index.ts b/projects/ngx-editor/src/lib/icons/index.ts
@@ -22,6 +22,8 @@ import horizontalRule from './horizontal_rule';
 import formatClear from './format_clear';
 import indent from './indent';
 import outdent from './outdent';
+import superscript from './superscript';
+import subscript from './subscript';
 
 const DEFAULT_ICON_HEIGHT = 20;
 const DEFAULT_ICON_WIDTH = 20;
@@ -49,6 +51,8 @@ export const icons: Record<string, any> = {
   format_clear: formatClear,
   indent,
   outdent,
+  superscript,
+  subscript,
   path: '<path></path>',
 };
 

diff --git a/projects/ngx-editor/src/lib/icons/subscript.ts b/projects/ngx-editor/src/lib/icons/subscript.ts
@@ -0,0 +1 @@
+export default '<g><rect fill="none" height="20" width="20"/><path d="M17,15l-1,0v1h2v1h-3v-2c0-0.55,0.45-1,1-1l1,0l0-1h-2v-1l2,0c0.55,0,1,0.45,1,1v1C18,14.55,17.55,15,17,15z M5.63,14h1.9 l2.43-3.87h0.08L12.47,14h1.9l-3.32-5.2l3.1-4.8h-1.91l-2.19,3.56H9.96L7.75,4h-1.9l3.09,4.8L5.63,14z"/></g>';
diff --git a/projects/ngx-editor/src/lib/icons/superscript.ts b/projects/ngx-editor/src/lib/icons/superscript.ts
@@ -0,0 +1 @@
+export default '<g><rect fill="none" height="20" width="20"/><path d="M17,6l-1,0v1h2v1l-3,0V6c0-0.55,0.45-1,1-1l1,0l0-1h-2V3l2,0c0.55,0,1,0.45,1,1v1C18,5.55,17.55,6,17,6z M5.63,16h1.9 l2.43-3.87h0.08L12.47,16h1.9l-3.32-5.2l3.1-4.8h-1.91l-2.19,3.56H9.96L7.75,6h-1.9l3.09,4.8L5.63,16z"/></g>';
diff --git a/projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts b/projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts
@@ -21,6 +21,8 @@ export const ToggleCommands: Record<string, ToggleCommand> = {
   align_center: Commands.ALIGN_CENTER,
   align_right: Commands.ALIGN_RIGHT,
   align_justify: Commands.ALIGN_JUSTIFY,
+  superscript: Commands.SUPERSCRIPT,
+  subscript: Commands.SUBSCRIPT,
 };
 
 export const InsertCommands: Record<string, InsertCommand> = {

diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
@@ -37,6 +37,7 @@ export const TOOLBAR_FULL: Toolbar = [
   ['text_color', 'background_color'],
   ['align_left', 'align_center', 'align_right', 'align_justify'],
   ['horizontal_rule', 'format_clear', 'indent', 'outdent'],
+  ['superscript', 'subscript'],
 ];
 
 const DEFAULT_COLOR_PRESETS = [
@@ -86,6 +87,8 @@ export class MenuComponent implements OnInit {
     'align_center',
     'align_right',
     'align_justify',
+    'superscript',
+    'subscript',
   ];
 
   insertCommands: ToolbarItem[] = [

diff --git a/projects/ngx-editor/src/lib/types.ts b/projects/ngx-editor/src/lib/types.ts
@@ -31,7 +31,9 @@ export type TBItems = 'bold'
 | 'horizontal_rule'
 | 'format_clear'
 | 'indent'
-| 'outdent';
+| 'outdent'
+| 'superscript'
+| 'subscript';
 
 export type ToolbarDropdown = { heading?: TBHeadingItems[] };
 export type ToolbarLinkOptions = Partial<LinkOptions>;