accomodate rt colorpicker

apostrophecms · Dec 4, 2024 · 2f82d5e · 2f82d5e
1 parent 818241d
commit 2f82d5e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/modules/@apostrophecms/rich-text-widget/index.js b/modules/@apostrophecms/rich-text-widget/index.js
@@ -617,7 +617,9 @@ module.exports = {
                 // HSL colors
                 /^hsl\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)$/,
                 // HSLA colors
-                /^hsla\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*,\s*(?:0?\.\d+|1(?:\.0)?)\s*\)$/
+                /^hsla\(\s*\d{1,3}(?:deg)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*,\s*(?:0?\.\d+|1(?:\.0)?)\s*\)$/,
+                // CSS Variable value
+                /^var\(--[a-zA-Z0-9-]+\)$/
               ]
             }
           }

diff --git a/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue b/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue
@@ -177,9 +177,16 @@ export default defineComponent({
     };
 
     const update = (value) => {
-      tinyColorObj.value = new TinyColor(value.hsl);
-      next.value = tinyColorObj.value.toString(format.value);
-      props.editor.chain().focus().setColor(next.value).run();
+      let color;
+      if (value._cssVariable) {
+        next.value = value._cssVariable;
+        color = `var(${next.value})`;
+      } else {
+        tinyColorObj.value = new TinyColor(value.hsl);
+        next.value = tinyColorObj.value.toString(format.value);
+        color = next.value;
+      }
+      props.editor.chain().focus().setColor(color).run();
       indicatorColor.value = next.value;
     };