feat: ✨ add color&background ext type | update css variable | update …

…color-picker component
isboyjc · Dec 6, 2024 · 39f972c · 39f972c
1 parent 06c3581
commit 39f972c
Show file tree

Hide file tree

Showing 23 changed files with 465 additions and 391 deletions.
diff --git a/packages/core/src/extensions/background.js b/packages/core/src/extensions/background.js
@@ -1,4 +1,3 @@
-import { prefixClass } from "@/utils/prefix.js";
 import {
   Mark,
   markInputRule,
@@ -23,59 +22,19 @@ export default Mark.create({
     return {
       name: "background",
       desc: "",
+      type: "default", // picker
       multicolor: true,
       HTMLAttributes: {},
-      command: ({ editor, color = "" }) => {
-        if (editor.isActive("background", { color }) || !color) {
+      command: ({ editor, background = "" }) => {
+        if (editor.isActive("background", { background }) || !background) {
           editor.chain().focus().unsetBackground().run();
         } else {
-          editor.chain().focus().setBackground({ color }).run();
+          editor.chain().focus().setBackground({ background }).run();
         }
       },
       isDisabled: ({ editor }) => !editor.can().toggleBackground(),
-      isActive: ({ editor, color }) => editor.isActive("background", { color }),
-      colors: [
-        {
-          name: "white",
-          color: `var(--${prefixClass}-background-white)`,
-        },
-        {
-          name: "black",
-          color: `var(--${prefixClass}-background-black)`,
-        },
-        {
-          name: "purple",
-          color: `var(--${prefixClass}-background-purple)`,
-        },
-        {
-          name: "red",
-          color: `var(--${prefixClass}-background-red)`,
-        },
-        {
-          name: "yellow",
-          color: `var(--${prefixClass}-background-yellow)`,
-        },
-        {
-          name: "blue",
-          color: `var(--${prefixClass}-background-blue)`,
-        },
-        {
-          name: "green",
-          color: `var(--${prefixClass}-background-green)`,
-        },
-        {
-          name: "orange",
-          color: `var(--${prefixClass}-background-orange)`,
-        },
-        {
-          name: "pink",
-          color: `var(--${prefixClass}-background-pink)`,
-        },
-        {
-          name: "gray",
-          color: `var(--${prefixClass}-background-gray)`,
-        },
-      ],
+      isActive: ({ editor, background }) =>
+        editor.isActive("background", { background }),
       shortcutkeys: "Mod-Shift-H",
     };
   },
@@ -86,18 +45,19 @@ export default Mark.create({
     }
 
     return {
-      color: {
+      background: {
         default: null,
         parseHTML: (element) =>
-          element.getAttribute("data-color") || element.style.backgroundColor,
+          element.getAttribute("data-background-color") ||
+          element.style.backgroundColor,
         renderHTML: (attributes) => {
-          if (!attributes.color) {
+          if (!attributes.background) {
             return {};
           }
 
           return {
-            "data-color": attributes.color,
-            style: `background-color: ${attributes.color}; color: inherit`,
+            "data-background-color": attributes.background,
+            style: `background-color: ${attributes.background}; color: inherit`,
           };
         },
       },

diff --git a/packages/core/src/extensions/color.js b/packages/core/src/extensions/color.js
@@ -1,4 +1,3 @@
-import { prefixClass } from "@/utils/prefix.js";
 import { Extension } from "@tiptap/core";
 
 export default Extension.create({
@@ -7,59 +6,18 @@ export default Extension.create({
   addOptions() {
     return {
       types: ["textStyle"],
+      type: "default", // picker
       title: "color",
       desc: "",
       command: ({ editor, color = "" }) => {
-        if (editor.isActive("textStyle", { color })) {
+        if (editor.isActive("textStyle", { color }) || !color) {
           editor.chain().focus().unsetColor().run();
         } else {
           editor.chain().focus().setColor(color).run();
         }
       },
       isDisabled: ({ editor }) => !editor.can().setColor(),
       isActive: ({ editor, color }) => editor.isActive("textStyle", { color }),
-      colors: [
-        {
-          name: "white",
-          color: `var(--${prefixClass}-text-white)`,
-        },
-        {
-          name: "black",
-          color: `var(--${prefixClass}-text-black)`,
-        },
-        {
-          name: "purple",
-          color: `var(--${prefixClass}-text-purple)`,
-        },
-        {
-          name: "red",
-          color: `var(--${prefixClass}-text-red)`,
-        },
-        {
-          name: "yellow",
-          color: `var(--${prefixClass}-text-yellow)`,
-        },
-        {
-          name: "blue",
-          color: `var(--${prefixClass}-text-blue)`,
-        },
-        {
-          name: "green",
-          color: `var(--${prefixClass}-text-green)`,
-        },
-        {
-          name: "orange",
-          color: `var(--${prefixClass}-text-orange)`,
-        },
-        {
-          name: "pink",
-          color: `var(--${prefixClass}-text-pink)`,
-        },
-        {
-          name: "gray",
-          color: `var(--${prefixClass}-text-gray)`,
-        },
-      ],
     };
   },
 

diff --git a/packages/core/src/locales/en.json b/packages/core/src/locales/en.json
@@ -70,5 +70,13 @@
     "huge": "Huge"
   },
 
+  "colors": {
+    "defaultColor": "Default Color",
+    "baseColor": "Base Color",
+    "standardColor": "Standard Color",
+    "recentUse": "Recent Use",
+    "palette": "Palette"
+  },
+
   "placeholder": "Write something ..."
 }
diff --git a/packages/core/src/locales/zh.json b/packages/core/src/locales/zh.json
@@ -70,5 +70,13 @@
     "huge": "超大"
   },
 
+  "colors":{
+    "defaultColor": "默认颜色",
+    "baseColor": "基础颜色",
+    "standardColor": "标准颜色",
+    "recentUse": "最近使用",
+    "palette": "调色板"
+  },
+
   "placeholder": "写点什么 ..."
 }
diff --git a/packages/vue3/src/components/special-button/button-background.js b/packages/vue3/src/components/special-button/button-background.js
@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, computed } from "vue";
 import { prefixClass, t } from "@isle-editor/core";
-import { getIcon } from "@/utils/icon";
-import { ITooltip, IButton, ITrigger } from "@/components/ui";
+import { getIcon, getColors } from "@/utils";
+import { ITooltip, IButton, ITrigger, IColorPicker } from "@/components/ui";
 
 export default defineComponent({
   name: "ButtonBackground",
@@ -19,11 +19,80 @@ export default defineComponent({
     const isShown = ref(false);
 
     const activeColor = computed(() => {
-      return props.menu.colors.find((v) =>
-        props.menu.isActive({ editor: props.editor, color: v.color }),
-      );
+      const attrs = props.editor.getAttributes("background");
+      return attrs?.background || "";
     });
 
+    function defaultModelRender() {
+      return h(
+        "div",
+        {
+          class: `${prefixClass}-special-button__background`,
+        },
+        [
+          h(
+            "div",
+            { class: `${prefixClass}-special-button__background-title` },
+            [
+              h(
+                "span",
+                {
+                  class: `${prefixClass}-special-button__background-title-text`,
+                },
+                t(props.menu.name),
+              ),
+            ],
+          ),
+          h("div", { class: `${prefixClass}-special-button__background-box` }, [
+            ...getColors().map(({ background, color }) =>
+              h("div", {
+                class: `${prefixClass}-special-button__background-box-item`,
+                style: {
+                  backgroundColor: background,
+                  borderColor: activeColor.value === background ? color : "",
+                },
+                onClick: () =>
+                  props.menu.command({
+                    background,
+                    editor: props.editor,
+                  }),
+              }),
+            ),
+          ]),
+        ],
+      );
+    }
+
+    function pickerModelRender() {
+      return h(
+        "div",
+        {
+          class: `${prefixClass}-special-button__background`,
+        },
+        [
+          h(IColorPicker, {
+            defaultColorName: t("colors.defaultColor"),
+            standardColorName: t("colors.standardColor"),
+            recentUseName: t("colors.recentUse"),
+            storageKey: "ICOLORPICKER-RECENT-BACKGROUND",
+            onChange: (color) => {
+              if (color) {
+                props.menu.command({
+                  background: color,
+                  editor: props.editor,
+                });
+              } else {
+                props.menu.command({
+                  background: "",
+                  editor: props.editor,
+                });
+              }
+            },
+          }),
+        ],
+      );
+    }
+
     return () =>
       h(
         ITrigger,
@@ -62,7 +131,7 @@ export default defineComponent({
                           {
                             class: `${prefixClass}-special-button__icon-box`,
                             style: {
-                              backgroundColor: activeColor.value?.color,
+                              backgroundColor: activeColor.value,
                             },
                           },
                           [
@@ -86,49 +155,9 @@ export default defineComponent({
               },
             ),
           content: () =>
-            h(
-              "div",
-              {
-                class: `${prefixClass}-special-button__background`,
-              },
-              [
-                h(
-                  "div",
-                  { class: `${prefixClass}-special-button__background-title` },
-                  [
-                    h(
-                      "span",
-                      {
-                        class: `${prefixClass}-special-button__background-title-text`,
-                      },
-                      t(props.menu.name),
-                    ),
-                    h("span", {
-                      class: `${prefixClass}-special-button__background-title-default`,
-                      onClick: () =>
-                        props.editor.chain().focus().unsetBackground().run(),
-                    }),
-                  ],
-                ),
-                h(
-                  "div",
-                  { class: `${prefixClass}-special-button__background-box` },
-                  [
-                    ...props.menu.colors.map(({ color }) =>
-                      h("div", {
-                        class: `${prefixClass}-special-button__background-box-item`,
-                        style: { backgroundColor: color },
-                        onClick: () =>
-                          props.menu.command({
-                            color: color,
-                            editor: props.editor,
-                          }),
-                      }),
-                    ),
-                  ],
-                ),
-              ],
-            ),
+            props.menu?.type === "picker"
+              ? pickerModelRender()
+              : defaultModelRender(),
         },
       );
   },