Added text color mark

resources/js/editor/menu/index.js

@@ -49,7 +49,7 @@ function markItem(markType, options) {
         passedOptions[prop] = options[prop];
     }
 
-    return cmdItem(toggleMark(markType), passedOptions)
+    return cmdItem(toggleMark(markType, passedOptions.attrs), passedOptions)
 }
 
 const inlineStyles = [
@@ -117,11 +117,17 @@ const alignments = [
     }),
 ];
 
+const colors = [
+    markItem(schema.marks.text_color, {title: "Green", label: "Green", attrs: {color: '#00FF00'}}),
+    markItem(schema.marks.text_color, {title: "Blue", label: "Blue", attrs: {color: '#0000FF'}}),
+];
+
 const menu = menuBar({
     floating: false,
     content: [
         [undoItem, redoItem],
         [new DropdownSubmenu(formats, { label: 'Formats' })],
+        colors,
         inlineStyles,
         alignments,
     ],

resources/js/editor/schema-marks.js

@@ -30,11 +30,27 @@ const subscript = {
     }
 };
 
+const text_color = {
+    attrs: {
+        color: {},
+    },
+    parseDOM: [{
+        style: 'color',
+        getAttrs(color) {
+            return {color}
+        }
+    }],
+    toDOM(node) {
+        return ['span', {style: `color: ${node.attrs.color};`}, 0];
+    }
+};
+
 const marks = baseMarks.append({
     underline,
     strike,
     superscript,
     subscript,
+    text_color,
 });
 
 export default marks;

resources/views/editor-test.blade.php

@@ -15,6 +15,7 @@
                 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. <br>
                 Some <span style="text-decoration: line-through;">striked content</span> Lorem ipsum dolor sit amet. <br>
+                Some <span style="color: red;">Red Content</span> Lorem ipsum dolor sit amet. <br>
             </p>
             <p><img src="/user_avatar.png" alt="Logo"></p>
             <ul>