feat: add strike mark

demo/src/app/app.module.ts

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

src/lib/commands/index.ts

@@ -11,6 +11,7 @@ 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 STRIKE = new MarkToggle('s');
 export const BLOCKQUOTE = new BlockquoteToggle();
 export const UL = new ListItemToggle(true);
 export const OL = new ListItemToggle(false);

src/lib/editor.service.ts

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

src/lib/icons/index.ts

@@ -4,6 +4,7 @@ import bold from './bold';
 import italic from './italic';
 import code from './code';
 import underline from './underline';
+import strike from './strike';
 import orderedList from './ordered_list';
 import bulletList from './bullet_list';
 import quote from './quote';
@@ -25,6 +26,7 @@ const icons = {
   italic,
   code,
   underline,
+  strike,
   ordered_list: orderedList,
   bullet_list: bulletList,
   blockquote: quote,

src/lib/icons/strike.ts

@@ -0,0 +1,3 @@
+export default `
+<path d="M6.85,7.08C6.85,4.37,9.45,3,12.24,3c1.64,0,3,0.49,3.9,1.28c0.77,0.65,1.46,1.73,1.46,3.24h-3.01 c0-0.31-0.05-0.59-0.15-0.85c-0.29-0.86-1.2-1.28-2.25-1.28c-1.86,0-2.34,1.02-2.34,1.7c0,0.48,0.25,0.88,0.74,1.21 C10.97,8.55,11.36,8.78,12,9H7.39C7.18,8.66,6.85,8.11,6.85,7.08z M21,12v-2H3v2h9.62c1.15,0.45,1.96,0.75,1.96,1.97 c0,1-0.81,1.67-2.28,1.67c-1.54,0-2.93-0.54-2.93-2.51H6.4c0,0.55,0.08,1.13,0.24,1.58c0.81,2.29,3.29,3.3,5.67,3.3 c2.27,0,5.3-0.89,5.3-4.05c0-0.3-0.01-1.16-0.48-1.94H21V12z"/>
+`;

src/lib/modules/menu/MenuCommands.ts

@@ -8,6 +8,7 @@ SimpleCommands.set('bold', Commands.STRONG);
 SimpleCommands.set('italic', Commands.EM);
 SimpleCommands.set('code', Commands.CODE);
 SimpleCommands.set('underline', Commands.UNDERLINE);
+SimpleCommands.set('strike', Commands.STRIKE);
 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,7 +22,7 @@ export class MenuComponent implements OnDestroy {
 
   simpleCommands = [
     'bold', 'italic',
-    'underline',
+    'underline', 'strike',
     'code', 'blockquote',
     'ordered_list', 'bullet_list',
     'align_left', 'align_center', 'align_right', 'align_justify'

src/lib/schema/marks.ts

@@ -90,6 +90,20 @@ const u: MarkSpec = {
   }
 };
 
+// :: MarkSpec An underline mark. Rendered as an `<s>` element.
+// Has parse rules that also match `strike`, `del` tag and css property `text-decoration: line-through`.
+const s: MarkSpec = {
+  parseDOM: [
+    { tag: 's' },
+    { tag: 'strike' },
+    { tag: 'del' },
+    { style: 'text-decoration=line-through' }
+  ],
+  toDOM(): DOMOutputSpec {
+    return ['s', 0];
+  }
+};
+
 const textColor: MarkSpec = {
   attrs: {
     color: {
@@ -136,6 +150,7 @@ const makrs = {
   strong,
   code,
   u,
+  s,
   text_color: textColor,
   text_background_color: textBackgroundColor
 };

src/lib/types.ts

@@ -9,7 +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'
+  | 'underline' | 'strike'
   | 'ordered_list' | 'bullet_list'
   | 'link' | 'image'
   | 'text_color' | 'background_color'