feat: add underline mark

demo/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { CustomMenuComponent } from './components/custom-menu/custom-menu.compon
       nodeViews,
       menu: [
         ['bold', 'italic'],
+        ['underline'],
         ['code', 'blockquote'],
         ['ordered_list', 'bullet_list'],
         [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],

src/lib/commands/index.ts

@@ -10,6 +10,7 @@ import TextColor from './TextColor';
 export const STRONG = new MarkToggle('strong');
 export const EM = new MarkToggle('em');
 export const CODE = new MarkToggle('code');
+export const UNDERLINE = new MarkToggle('u');
 export const BLOCKQUOTE = new BlockquoteToggle();
 export const UL = new ListItemToggle(true);
 export const OL = new ListItemToggle(false);

src/lib/editor.service.ts

@@ -12,6 +12,7 @@ import { schema } from './schema';
 const DEFAULT_MENU: Toolbar = [
   ['bold', 'italic'],
   ['code', 'blockquote'],
+  ['underline'],
   ['ordered_list', 'bullet_list'],
   [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
   ['link', 'image'],

src/lib/icons/index.ts

@@ -3,6 +3,7 @@
 import bold from './bold';
 import italic from './italic';
 import code from './code';
+import underline from './underline';
 import orderedList from './ordered_list';
 import bulletList from './bullet_list';
 import quote from './quote';
@@ -23,6 +24,7 @@ const icons = {
   bold,
   italic,
   code,
+  underline,
   ordered_list: orderedList,
   bullet_list: bulletList,
   blockquote: quote,

src/lib/icons/underline.ts

@@ -0,0 +1,4 @@
+export default `
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
+`;

src/lib/modules/menu/MenuCommands.ts

@@ -7,6 +7,7 @@ export const SimpleCommands = new Map<string, SimpleCommand>();
 SimpleCommands.set('bold', Commands.STRONG);
 SimpleCommands.set('italic', Commands.EM);
 SimpleCommands.set('code', Commands.CODE);
+SimpleCommands.set('underline', Commands.UNDERLINE);
 SimpleCommands.set('blockquote', Commands.BLOCKQUOTE);
 SimpleCommands.set('bullet_list', Commands.UL);
 SimpleCommands.set('ordered_list', Commands.OL);

src/lib/modules/menu/menu.component.ts

@@ -22,6 +22,7 @@ export class MenuComponent implements OnDestroy {
 
   simpleCommands = [
     'bold', 'italic',
+    'underline',
     'code', 'blockquote',
     'ordered_list', 'bullet_list',
     'align_left', 'align_center', 'align_right', 'align_justify'

src/lib/schema/marks.ts

@@ -78,6 +78,18 @@ const code: MarkSpec = {
   }
 };
 
+// :: MarkSpec An underline mark. Rendered as an `<u>` element.
+// Has parse rules that also match `text-decoration: underline`.
+const u: MarkSpec = {
+  parseDOM: [
+    { tag: 'u' },
+    { style: 'text-decoration=underline' }
+  ],
+  toDOM(): DOMOutputSpec {
+    return ['u', 0];
+  }
+};
+
 const textColor: MarkSpec = {
   attrs: {
     color: {
@@ -123,6 +135,7 @@ const makrs = {
   em,
   strong,
   code,
+  u,
   text_color: textColor,
   text_background_color: textBackgroundColor
 };

src/lib/types.ts

@@ -9,6 +9,7 @@ type TCR = { dom: HTMLElement, update: (state: EditorState) => void };
 type TBHeading = Array<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
 type TBItems = 'bold' | 'italic'
   | 'code' | 'blockquote'
+  | 'underline'
   | 'ordered_list' | 'bullet_list'
   | 'link' | 'image'
   | 'text_color' | 'background_color'