cosey 0.9.5 → 0.10.1

package/components/editor/editor.style.js

@@ -1,78 +1,81 @@
-import { getHljsDark } from '../highlight/highlight.style.js';
-import { getGlobalStyleHook } from '../theme/getGlobalStyleHook.js';
 import { getSimpleStyleHook } from '../theme/getSimpleStyleHook.js';
 import { getTruncateStyle } from '../style/mixins.js';
 
-const LIST_STYLE = ["decimal", "lower-alpha", "lower-roman"];
-const LIST_STYLE_WIDTH = 1.2;
-const LIST_STYLE_MARGIN = 0.3;
-const LIST_STYLE_OUTER_WIDTH = LIST_STYLE_WIDTH + LIST_STYLE_MARGIN;
-const MAX_INDENT = 9;
-function resets(min, max) {
-  return Array(max + 1 - min).fill(0).map((_, i) => `list-${i + min}`).join(" ");
-}
-const getQuillClipboardStyle = () => {
-  return {
-    ".ql-clipboard": {
-      position: "absolute",
-      insetInlineStart: -1e5,
-      insetBlockStart: "50%",
-      height: 1,
-      overflowY: "hidden",
-      p: {
-        margin: 0,
-        padding: 0
-      }
-    }
-  };
-};
-const getIndent = () => {
+const getButtonStyle = (token) => {
+  const { componentCls } = token;
+  const buttonCls = `${componentCls}-button`;
   return {
-    ...Array(MAX_INDENT).fill(0).map((_, i) => i + 1).reduce((obj, num) => {
-      return {
-        ...obj,
-        [`li[data-list=ordered].ql-indent-${num}`]: {
-          counterIncrement: `list-${num}`,
-          "> .ql-ui::before": {
-            content: `counter(list-${num}, ${LIST_STYLE[num % 3]}) '. '`
-          }
+    [buttonCls]: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: 28,
+      height: 28,
+      flex: "none",
+      fontSize: 20,
+      whiteSpace: "nowrap",
+      borderRadius: token.borderRadiusSM,
+      border: `${token.lineWidth} ${token.lineType} transparent`,
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: token.colorFillSecondary
+      },
+      "&:active, &.is-active": {
+        backgroundColor: token.colorPrimaryBg
+      },
+      "&:focus-visible": {
+        outline: `2px solid ${token.colorPrimaryHover}`,
+        outlineOffset: 1
+      },
+      "&-group": {
+        display: "flex",
+        gap: 2
+      },
+      "&-select": {
+        width: 130,
+        justifyContent: "space-between",
+        paddingInline: token.paddingXS,
+        fontSize: token.fontSize,
+        backgroundColor: token.colorFillTertiary
+      },
+      "&-chevron": {
+        width: 16
+      },
+      "&-text": {
+        ...getTruncateStyle()
+      },
+      "&-arrow": {
+        flex: "none"
+      },
+      "&-split": {
+        display: "flex",
+        borderRadius: token.borderRadiusSM,
+        border: `${token.lineWidth} ${token.lineType} transparent`,
+        "&.is-active, &:hover": {
+          borderColor: token.colorBorderSecondary
         },
-        ...num < MAX_INDENT ? {
-          [`li[data-list].ql-indent-${num}`]: {
-            "@supports (counter-set: none)": {
-              counterSet: resets(num + 1, MAX_INDENT)
-            },
-            "@supports not (counter-set: none)": {
-              counterReset: resets(num + 1, MAX_INDENT)
-            }
+        [`${buttonCls}-button`]: {
+          border: "none",
+          borderRadius: `calc(${token.borderRadiusSM}px - 1px)`,
+          "&:not(:first-child)": {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0
+          },
+          "&:not(:last-child)": {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
           }
-        } : null
-      };
-    }, {}),
-    ...Array(MAX_INDENT).fill(0).map((_, i) => i + 1).reduce((obj, num) => {
-      return {
-        ...obj,
-        [`li.ql-indent-${num}`]: {
-          paddingInlineStart: `${3 * num + LIST_STYLE_OUTER_WIDTH}em`
         }
-      };
-    }, {})
+      }
+    }
   };
 };
-const getQuillArticleStyle = (token) => {
+const getArticleStyle = (token) => {
   return {
-    ...Array(MAX_INDENT).fill(0).map((_, i) => i + 1).reduce((obj, num) => {
-      return {
-        ...obj,
-        [`.ql-indent-${num}`]: {
-          paddingInlineStart: `${3 * num}em`
-        }
-      };
-    }, {}),
-    "p, ol, pre, blockquote, h1, h2, h3, h4, h5, h6": {
+    "p, ol, ul, pre, blockquote, h1, h2, h3, h4, h5, h6, table": {
       margin: 0,
       padding: 0,
-      marginBlockEnd: token.marginSM
+      marginBlock: token.marginSM
     },
     "h1, h2, h3, h4, h5, h6": {
       fontWeight: token.fontWeightStrong
@@ -104,11 +107,13 @@ const getQuillArticleStyle = (token) => {
         border: `${token.lineWidth} ${token.lineType} ${token.colorBorder}`,
         paddingInline: token.paddingXS,
         paddingBlock: token.paddingXXS
+      },
+      thead: {
+        "td,th": {
+          backgroundColor: token.colorBgTextHover
+        }
       }
     },
-    ol: {
-      paddingInlineStart: "1.5em"
-    },
     a: {
       color: token.colorLink,
       textDecoration: token.linkDecoration,
@@ -128,10 +133,8 @@ const getQuillArticleStyle = (token) => {
       maxWidth: "100%"
     },
     blockquote: {
-      borderInlineStart: `4px solid ${token.colorBorder}`,
-      marginBlockEnd: 5,
-      marginBlockStart: 5,
-      paddingInlineStart: 16
+      borderLeft: `4px solid ${token.colorBorder}`,
+      paddingLeft: 16
     },
     code: {
       fontSize: "85%",
@@ -148,96 +151,19 @@ const getQuillArticleStyle = (token) => {
       border: `${token.lineType} ${token.lineWidth} ${token.colorBorder}`,
       borderRadius: token.borderRadiusXS,
       boxShadow: `0 2px 0 -1px ${token.colorBgContainer}, 0 2px ${token.colorBorder}`
-    }
-  };
-};
-const getQuillEditorStyle = (token) => {
-  return {
-    ".ql-editor": {
-      counterReset: resets(0, MAX_INDENT),
-      lineHeight: token.lineHeight,
-      height: "100%",
-      outline: "none",
-      overflowY: "auto",
-      paddingBlock: token.paddingSM,
-      paddingInline: token.padding,
-      tabSize: 4,
-      textAlign: "start",
-      whiteSpace: "pre-wrap",
-      wordWrap: "break-word",
-      ...getQuillArticleStyle(token),
-      "> *": {
-        cursor: "text"
-      },
-      "p, h1, h2, h3, h4, h5, h6": {
-        "@supports (counter-set: none)": {
-          counterSet: resets(0, MAX_INDENT)
-        },
-        "@supports not (counter-set: none)": {
-          counterReset: resets(0, MAX_INDENT)
-        }
-      },
-      li: {
-        position: "relative",
-        listStyleType: "none",
-        paddingInlineStart: token.padding,
-        "> .ql-ui::before": {
-          display: "inline-block",
-          marginInlineStart: `${ -1 * LIST_STYLE_OUTER_WIDTH}em`,
-          marginInlineEnd: `${LIST_STYLE_MARGIN}em`,
-          textAlign: "end",
-          whiteSpace: "nowrap",
-          width: `${LIST_STYLE_WIDTH}em`
-        }
-      },
-      "li[data-list=bullet] > .ql-ui::before": {
-        content: '"\\2022"'
-      },
-      "li[data-list]": {
-        "@supports (counter-set: none)": {
-          counterSet: resets(1, MAX_INDENT)
-        },
-        "@supports not (counter-set: none)": {
-          counterReset: resets(1, MAX_INDENT)
-        }
-      },
-      "li[data-list=ordered]": {
-        counterIncrement: "list-0",
-        "> .ql-ui::before": {
-          content: `counter(list-0, ${LIST_STYLE[0]}) '. '`
-        }
-      },
-      ...getIndent(),
-      ".ql-ui": {
-        position: "absolute"
-      },
-      "&.ql-blank::before": {
+    },
+    pre: {
+      position: "relative",
+      overflow: "hidden",
+      select: {
         position: "absolute",
-        insetInlineStart: token.padding,
-        insetInlineEnd: token.padding,
-        color: token.colorTextPlaceholder,
-        content: "attr(data-placeholder)",
-        fontStyle: "italic",
-        pointerEvents: "none"
+        right: token.sizeXXS,
+        top: token.sizeXXS,
+        zIndex: 1
       },
-      ".ql-code-block-container": {
-        position: "relative",
-        marginBlockEnd: 5,
-        marginBlockStart: 5,
-        paddingBlock: 5,
-        paddingInline: 10,
-        overflow: "visible",
-        fontFamily: token.fontFamilyCode,
-        color: "#f8f8f2",
-        borderRadius: token.borderRadius,
-        backgroundColor: "#23241f",
-        ".ql-ui": {
-          insetInlineEnd: 5,
-          insetBlockStart: 5,
-          color: token.colorText,
-          backgroundColor: token.colorBgElevated,
-          appearance: "auto"
-        }
+      "> div": {
+        padding: "1rem",
+        overflow: "auto"
       }
     }
   };
@@ -246,121 +172,63 @@ const getEditorStyle = (token) => {
   const { componentCls } = token;
   const toolbarCls = `${componentCls}-toolbar`;
   const containerCls = `${componentCls}-container`;
+  const wrapperCls = `${componentCls}-wrapper`;
+  const contentCls = `${componentCls}-content`;
   return {
     [componentCls]: {
       position: "relative",
       lineHeight: token.lineHeight,
-      "*": {
-        boxSizing: "border-box"
+      borderRadius: token.borderRadius,
+      border: `1px solid ${token.colorBorder}`,
+      [toolbarCls]: {
+        display: "flex",
+        flexWrap: "wrap",
+        columnGap: token.sizeLG,
+        rowGap: token.sizeXXS,
+        paddingInline: token.paddingSM,
+        paddingBlock: token.paddingXS,
+        borderBottom: `1px solid ${token.colorBorder}`
       },
       [containerCls]: {
         position: "relative",
-        height: "100%",
-        margin: 0,
-        fontSize: token.fontSize,
-        border: `1px solid ${token.colorBorder}`,
-        borderRadius: token.borderRadius
+        "&.is-focus::before": {
+          content: '""',
+          position: "absolute",
+          zIndex: 10,
+          inset: 0,
+          border: `2px solid ${token.colorPrimaryHover}`,
+          borderRadius: token.borderRadius,
+          pointerEvents: "none"
+        }
       },
-      [`${toolbarCls} ~ ${containerCls}`]: {
-        borderBlockStart: 0,
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0
+      [wrapperCls]: {
+        overflow: "auto"
       },
       "&.is-error": {
-        [`${toolbarCls}, ${containerCls}`]: {
+        [`&, ${toolbarCls}`]: {
           borderColor: token.colorError
         }
       },
-      ...getQuillClipboardStyle(),
-      ...getQuillEditorStyle(token)
-    }
-  };
-};
-const getEditorToolbarStyle = (token) => {
-  const { componentCls } = token;
-  const toolbarCls = `${componentCls}-toolbar`;
-  return {
-    [toolbarCls]: {
-      display: "flex",
-      flexWrap: "wrap",
-      columnGap: token.padding,
-      rowGap: token.paddingXXS,
-      padding: token.paddingXS,
-      border: `1px solid ${token.colorBorder}`,
-      borderTopLeftRadius: token.borderRadius,
-      borderTopRightRadius: token.borderRadius
-    }
-  };
-};
-const getEditorButtonStyle = (token) => {
-  const { componentCls } = token;
-  const buttonCls = `${componentCls}-button`;
-  return {
-    [buttonCls]: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      width: 28,
-      height: 28,
-      fontSize: 20,
-      whiteSpace: "nowrap",
-      borderRadius: token.borderRadiusSM,
-      border: `${token.lineWidth} ${token.lineType} transparent`,
-      cursor: "pointer",
-      "&:hover": {
-        backgroundColor: token.colorFillSecondary
-      },
-      "&:active, &.is-active": {
-        backgroundColor: token.colorPrimaryBg
-      },
-      "&-group": {
-        display: "flex",
-        gap: 2
-      },
-      "&-select": {
-        width: 130,
-        justifyContent: "space-between",
-        paddingInline: token.paddingXS,
+      [contentCls]: {
+        minHeight: "100% !important",
+        padding: token.paddingSM,
+        borderRadius: token.borderRadius,
         fontSize: token.fontSize,
-        backgroundColor: token.colorFillTertiary
-      },
-      "&-chevron": {
-        width: 16
-      },
-      "&-text": {
-        ...getTruncateStyle()
-      },
-      "&-arrow": {
-        flex: "none"
+        outline: "none",
+        ...getArticleStyle(token)
       },
-      "&-split": {
-        display: "flex",
-        borderRadius: token.borderRadiusSM,
-        border: `${token.lineWidth} ${token.lineType} transparent`,
-        "&.is-active, &:hover": {
-          borderColor: token.colorBorderSecondary
-        },
-        [`${buttonCls}-button`]: {
-          border: "none",
-          borderRadius: `calc(${token.borderRadiusSM}px - 1px)`,
-          "&:not(:first-child)": {
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0
-          },
-          "&:not(:last-child)": {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0
-          }
+      "&.is-disabled": {
+        [contentCls]: {
+          backgroundColor: token.colorBgContainerDisabled,
+          color: token.colorTextDisabled,
+          cursor: "not-allowed"
         }
       }
     }
   };
 };
-const useHljsStyle = getGlobalStyleHook("CoGlobalHighlight", () => {
-  return getHljsDark();
-});
 var stdin_default = getSimpleStyleHook("CoEditor", (token) => {
-  return [getEditorStyle(token), getEditorToolbarStyle(token), getEditorButtonStyle(token)];
+  return [getEditorStyle(token), getButtonStyle(token)];
 });
 
-export { stdin_default as default, useHljsStyle };
+export { stdin_default as default, getArticleStyle, getButtonStyle };

package/components/editor/{components/color-picker/color-picker.js → formats/color-picker.api.js}

@@ -1,7 +1,7 @@
 import { zip } from 'lodash-es';
-import { getSolidColor } from '../../../theme/themes/default/colorAlgorithm.js';
-import { defaultPresetColors } from '../../../theme/themes/seed.js';
-import generate from '../../../theme/themes/shared/generate.js';
+import { getSolidColor } from '../../theme/themes/default/colorAlgorithm.js';
+import { defaultPresetColors } from '../../theme/themes/seed.js';
+import generate from '../../theme/themes/shared/generate.js';
 
 const colorNames = [
   "red",

package/components/editor/formats/color-picker.d.ts

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:visible': (visible: boolean) => boolean;
+    select: (color: string) => boolean;
+    clear: () => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    visible: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onSelect?: ((color: string) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    visible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/editor/formats/color-picker.js

@@ -0,0 +1,154 @@
+import { defineComponent, computed, ref, createVNode, Fragment, createTextVNode } from 'vue';
+import stdin_default$2 from './picker.js';
+import stdin_default$1 from './color-picker.style.js';
+import { colorNames, colorPalettes } from './color-picker.api.js';
+import stdin_default$3 from '../../icon/icon.js';
+import { ElInput } from 'element-plus';
+import { TinyColor } from '@ctrl/tinycolor';
+import { useHistoryColor } from '../hooks/useHistoryColor.js';
+import { isString, isBoolean } from '../../../utils/is.js';
+import { useComponentConfig } from '../../config-provider/config-provider.api.js';
+
+var stdin_default = defineComponent({
+  name: "CoEditorColorPicker",
+  props: {
+    visible: {
+      type: Boolean
+    }
+  },
+  emits: {
+    "update:visible": visible => isBoolean(visible),
+    select: color => isString(color),
+    clear: () => true
+  },
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("editor-color-picker");
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const innerVisible = computed({
+      get() {
+        return props.visible;
+      },
+      set(visible) {
+        emit("update:visible", visible);
+      }
+    });
+    const inputColor = ref("");
+    const {
+      historyColors,
+      pushHistory
+    } = useHistoryColor();
+    const mapHistoryColors = computed(() => {
+      return Array(colorNames.length).fill(0).map((_, i) => {
+        return historyColors.value[i] || "";
+      });
+    });
+    const normalInputColor = computed(() => new TinyColor(inputColor.value).toHexString());
+    const isEyeDropperSupported = computed(() => typeof window.EyeDropper === "function");
+    const select = color => {
+      pushHistory(color);
+      emit("select", color);
+      emit("update:visible", false);
+    };
+    const onSelect = color => {
+      if (color) {
+        select(color);
+      }
+    };
+    const onCustomSelect = () => {
+      select(normalInputColor.value);
+    };
+    const onClear = () => {
+      emit("clear");
+      emit("update:visible", false);
+    };
+    const onAbsorb = () => {
+      const eyeDropper = new window.EyeDropper();
+      eyeDropper.open().then(result => {
+        inputColor.value = result.sRGBHex;
+      });
+    };
+    return () => {
+      return createVNode(stdin_default$2, {
+        "popperClass": [hashId.value, prefixCls.value],
+        "visible": innerVisible.value,
+        "onUpdate:visible": $event => innerVisible.value = $event
+      }, {
+        default: slots.default,
+        content: () => createVNode(Fragment, null, [createVNode("div", {
+          "class": `${prefixCls.value}-title`
+        }, [createTextVNode("\u9884\u8BBE")]), createVNode("div", {
+          "class": `${prefixCls.value}-preset`
+        }, [colorPalettes.map((row, i) => createVNode("div", {
+          "key": i,
+          "class": `${prefixCls.value}-row`
+        }, [row.map((color, j) => createVNode("div", {
+          "key": j,
+          "class": `${prefixCls.value}-item`
+        }, [createVNode("button", {
+          "type": "button",
+          "class": [`${prefixCls.value}-color`, `${prefixCls.value}-btn`],
+          "style": {
+            background: color
+          },
+          "onClick": () => onSelect(color)
+        }, null)]))]))]), createVNode("div", {
+          "class": `${prefixCls.value}-title`
+        }, [createTextVNode("\u6700\u8FD1\u4F7F\u7528")]), createVNode("div", {
+          "class": `${prefixCls.value}-row`
+        }, [mapHistoryColors.value.map((color, i) => createVNode("div", {
+          "key": i,
+          "class": `${prefixCls.value}-item`
+        }, [createVNode("button", {
+          "type": "button",
+          "class": [`${prefixCls.value}-color`, `${prefixCls.value}-btn`, {
+            "is-empty": !color
+          }],
+          "style": {
+            background: color
+          },
+          "onClick": () => onSelect(color)
+        }, null)]))]), createVNode("div", {
+          "class": `${prefixCls.value}-title`
+        }, [createTextVNode("\u624B\u52A8\u8BBE\u7F6E")]), createVNode("div", {
+          "class": `${prefixCls.value}-manual`
+        }, [isEyeDropperSupported.value && createVNode("button", {
+          "type": "button",
+          "class": [`${prefixCls.value}-btn`],
+          "onClick": onAbsorb
+        }, [createVNode(stdin_default$3, {
+          "name": "co:eyedropper",
+          "size": "lg"
+        }, null)]), createVNode(ElInput, {
+          "modelValue": inputColor.value,
+          "onUpdate:modelValue": $event => inputColor.value = $event,
+          "size": "small",
+          "placeholder": "\u8BF7\u8F93\u5165",
+          "class": [`${prefixCls.value}-input`]
+        }, null), createVNode("button", {
+          "type": "button",
+          "class": [`${prefixCls.value}-color`, `${prefixCls.value}-btn`],
+          "style": {
+            backgroundColor: normalInputColor.value
+          },
+          "onClick": onCustomSelect
+        }, null), createVNode("button", {
+          "type": "button",
+          "class": [`${prefixCls.value}-color`, `${prefixCls.value}-btn`, `${prefixCls.value}-clear`],
+          "onClick": onClear
+        }, [createVNode(stdin_default$3, {
+          "name": "co:slash-forward",
+          "size": "lg"
+        }, null)])])])
+      });
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/editor/{components/color-picker → formats}/color-picker.style.d.ts

@@ -1,4 +1,4 @@
-declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../../theme/theme-context").ThemeManager) => {
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../theme/theme-context").ThemeManager) => {
     hashId: import("vue").Ref<string, string>;
 };
 export default _default;

package/components/editor/{components/color-picker → formats}/color-picker.style.js

@@ -1,4 +1,4 @@
-import { getSimpleStyleHook } from '../../../theme/getSimpleStyleHook.js';
+import { getSimpleStyleHook } from '../../theme/getSimpleStyleHook.js';
 
 var stdin_default = getSimpleStyleHook("CoEditorColorPicker", (token) => {
   const { componentCls } = token;

package/components/editor/formats/format-align.d.ts

@@ -0,0 +1,22 @@
+import { PropType } from 'vue';
+import { type FormatAlign } from '../plugins/align';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    format: {
+        type: PropType<FormatAlign>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    format: {
+        type: PropType<FormatAlign>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;