Added text color mark

diff --git a/resources/js/editor/menu/index.js b/resources/js/editor/menu/index.js
index f29108849582b8cbf51bd9c186cb785930988f3b..ed6a1c25b875acab87e86b3a61b3bbdc17474d70 100644 (file)
--- a/resources/js/editor/menu/index.js
+++ b/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,
     ],

diff --git a/resources/js/editor/schema-marks.js b/resources/js/editor/schema-marks.js
index d4c546c08eeff35658e8e9fc28e530ab91847868..175d8bda89322a851ba0a193b32c9ee9b7772518 100644 (file)
--- a/resources/js/editor/schema-marks.js
+++ b/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;
\ No newline at end of file

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