Added strike, sup and sub marks

resources/js/editor/markdown-serializer.js

@@ -13,6 +13,21 @@ marks.underline = {
     close: '</span>',
 };
 
+marks.strike = {
+    open: '<span style="text-decoration: line-through;">',
+    close: '</span>',
+};
+
+marks.superscript = {
+    open: '<sup>',
+    close: '</sup>',
+};
+
+marks.subscript = {
+    open: '<sub>',
+    close: '</sub>',
+};
+
 function writeNodeAsHtml(state, node) {
     const html = docToHtml({ content: [node] });
     state.write(html);

resources/js/editor/menu/index.js

@@ -56,6 +56,9 @@ const inlineStyles = [
     markItem(schema.marks.strong, {title: "Bold", icon: icons.strong}),
     markItem(schema.marks.em, {title: "Italic", icon: icons.em}),
     markItem(schema.marks.underline, {title: "Underline", label: 'U'}),
+    markItem(schema.marks.strike, {title: "Strikethrough", label: '-S-'}),
+    markItem(schema.marks.superscript, {title: "Superscript", label: 'sup'}),
+    markItem(schema.marks.subscript, {title: "Subscript", label: 'sub'}),
 ];
 
 const formats = [

resources/js/editor/schema.js

@@ -30,7 +30,28 @@ const markUnderline = {
     toDOM() {
         return ["span", {style: "text-decoration: underline;"}, 0];
     }
-}
+};
+
+const markStrike = {
+    parseDOM: [{tag: "s"}, {tag: "strike"}, {style: "text-decoration=line-through"}],
+    toDOM() {
+        return ["span", {style: "text-decoration: line-through;"}, 0];
+    }
+};
+
+const markSuperscript = {
+    parseDOM: [{tag: "sup"}],
+    toDOM() {
+        return ["sup", 0];
+    }
+};
+
+const markSubscript = {
+    parseDOM: [{tag: "sub"}],
+    toDOM() {
+        return ["sub", 0];
+    }
+};
 
 const customNodes = baseNodes.append({
     callout: nodeCallout,
@@ -38,6 +59,9 @@ const customNodes = baseNodes.append({
 
 const customMarks = baseMarks.append({
     underline: markUnderline,
+    strike: markStrike,
+    superscript: markSuperscript,
+    subscript: markSubscript,
 });
 
 const schema = new Schema({

resources/views/editor-test.blade.php

@@ -13,7 +13,8 @@
             <h2>This is an editable block</h2>
             <p>
                 Lorem ipsum dolor sit amet, <strong>consectetur adipisicing</strong> elit. Asperiores? <br>
-                Some <span style="text-decoration: underline">Underlined content</span> Lorem ipsum dolor sit amet.
+                Some <span style="text-decoration: underline">Underlined content</span> Lorem ipsum dolor sit amet. <br>
+                Some <span style="text-decoration: line-through;">striked content</span> Lorem ipsum dolor sit amet. <br>
             </p>
             <p><img src="/user_avatar.png" alt="Logo"></p>
             <ul>