Added strike, sup and sub marks

diff --git a/resources/js/editor/markdown-serializer.js b/resources/js/editor/markdown-serializer.js
index a7c5d7d8233523fd289de09286a9210fae74bf15..7fc0bad48280d87351016e3f1be0027bebd890fe 100644 (file)
--- a/resources/js/editor/markdown-serializer.js
+++ b/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);

diff --git a/resources/js/editor/menu/index.js b/resources/js/editor/menu/index.js
index 591878f7c6939b780763e1bf06ea47311de527cf..9fad417ba52fed3002f4f8574ff5dc5997cc819d 100644 (file)
--- a/resources/js/editor/menu/index.js
+++ b/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 = [

diff --git a/resources/js/editor/schema.js b/resources/js/editor/schema.js
index fb6192f228cb3398f38991842511d2dfd3393931..e81d0060829aa03078f599e1d76ed9c63a8d6ebc 100644 (file)
--- a/resources/js/editor/schema.js
+++ b/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({

diff --git a/resources/views/editor-test.blade.php b/resources/views/editor-test.blade.php
index bba27f15321ed938b810514dcbc01c5fcb5a1a62..aa79e79074adf14f9c7321a93016c9b31c8cf51a 100644 (file)
--- a/resources/views/editor-test.blade.php
+++ b/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>