@deot/vc-components 1.0.54 → 1.0.56

package/dist/index.cjs

@@ -75,6 +75,7 @@ const defaults$2 = {
     line: nil
   },
   Snapshot: {
+    options: nil,
     source: nil,
     download: nil
   }
@@ -10090,23 +10091,16 @@ const insertFontSizeStyle = (value, id) => {
 				.ql-snow .ql-font-size.ql-picker .ql-picker-label[data-value="${fontSize}"]:before {
 					content: "${fontSize}"
 				}`;
-    pre += `.ql-editor .ql-font-size-${fontSize} {
-					font-size: ${fontSize};
-				}`;
     return pre;
   }, "");
   return Load__namespace.style(code, { id });
 };
 const insertLineHeightStyle = (value, id) => {
   const code = value.reduce((pre, lineHeight) => {
-    const classLineHeightValue = +lineHeight * 10;
-    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${classLineHeightValue}"]:before,
-				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${classLineHeightValue}"]:before {
+    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${lineHeight}"]:before,
+				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${lineHeight}"]:before {
 					content: "${+lineHeight}" 
 				}`;
-    pre += `.ql-editor .ql-line-height-${classLineHeightValue} {
-					line-height: ${+lineHeight};
-				}`;
     return pre;
   }, "");
   return Load__namespace.style(code, { id });
@@ -10117,9 +10111,6 @@ const insertLetterSpacingStyle = (value, id) => {
 				.ql-snow .ql-letter-spacing.ql-picker .ql-picker-label[data-value="${letterSpacing}"]:before {
 					content: "${letterSpacing}"
 				}`;
-    pre += `.ql-editor .ql-letter-spacing-${letterSpacing} {
-					letter-spacing: ${letterSpacing};
-				}`;
     return pre;
   }, "");
   return Load__namespace.style(code, { id });
@@ -10307,9 +10298,8 @@ const EditorToolbar = /* @__PURE__ */ vue.defineComponent({
                   "selected": true
                 }, null);
               }
-              const v = key === 'line-height' ? +it * 10 : it;
               return vue.createVNode("option", {
-                "value": `${v}`
+                "value": `${it}`
               }, null);
             })]);
           }
@@ -10322,16 +10312,18 @@ const EditorToolbar = /* @__PURE__ */ vue.defineComponent({
         if (Array.isArray(item)) {
           return insertStyle(item);
         }
+        let key = item;
+        let value = [];
         if (typeof item === 'object') {
-          const [key, value] = Object.entries(item)[0];
-          const options = value.length && value || toolbarDefaultsMap[key];
-          if (key === 'font-size') {
-            insertFontSizeStyle(options, styleId);
-          } else if (key === 'line-height') {
-            insertLineHeightStyle(options, lineHeightStyleId);
-          } else if (key === 'letter-spacing') {
-            insertLetterSpacingStyle(options, letterSpacingStyleId);
-          }
+          [key, value] = Object.entries(item)[0];
+        }
+        value = value.length && value || toolbarDefaultsMap[key];
+        if (key === 'font-size' && Array.isArray(value)) {
+          insertFontSizeStyle(value, styleId);
+        } else if (key === 'line-height') {
+          insertLineHeightStyle(value, lineHeightStyleId);
+        } else if (key === 'letter-spacing') {
+          insertLetterSpacingStyle(value, letterSpacingStyleId);
         }
       });
     };
@@ -10412,21 +10404,20 @@ const registerAudioBlot = (quillInstance) => {
 
 const registerLineHeight = (quillInstance) => {
   const lineHeight = toolbarDefaultsMap["line-height"];
-  const whitelist = lineHeight.map((i) => String(+i * 10));
   const Parchment = quillInstance.import("parchment");
-  const lineHeightStyle = new Parchment.ClassAttributor(
+  const lineHeightStyle = new Parchment.StyleAttributor(
+    "line-height",
     "line-height",
-    "ql-line-height",
-    { scope: Parchment.Scope.INLINE, whitelist }
+    { scope: Parchment.Scope.INLINE, whitelist: lineHeight }
   );
   quillInstance.register({ "formats/line-height": lineHeightStyle }, true);
 };
 
 const registerLetterSpacing = (quillInstance) => {
   const Parchment = quillInstance.import("parchment");
-  const letterSpacingStyle = new Parchment.ClassAttributor(
+  const letterSpacingStyle = new Parchment.StyleAttributor(
+    "letter-spacing",
     "letter-spacing",
-    "ql-letter-spacing",
     {
       scope: Parchment.Scope.INLINE,
       whitelist: toolbarDefaultsMap["letter-spacing"]
@@ -11110,18 +11101,12 @@ const registerEventModule = (QuillClass) => {
 const registerFontSize = (editor) => {
   const Parchment = editor.import("parchment");
   const fontSize = toolbarDefaultsMap["font-size"];
-  const SizeClass = new Parchment.ClassAttributor("font-size", "ql-font-size", {
-    scope: Parchment.Scope.INLINE,
-    whitelist: fontSize
-  });
   const SizeStyle = new Parchment.StyleAttributor("font-size", "font-size", {
     scope: Parchment.Scope.INLINE,
     whitelist: fontSize
   });
   editor.register({
-    "formats/font-size": SizeClass,
-    "attributors/class/font-size": SizeClass,
-    "attributors/style/font-size": SizeStyle
+    "formats/font-size": SizeStyle
   }, true);
 };
 
@@ -11179,6 +11164,7 @@ const COMPONENT_NAME$14 = 'vc-editor';
 const Editor = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$14,
   props: props$M,
+  defaults,
   emits: ['ready', 'blur', 'focus', 'input', 'update:modelValue', 'change'],
   setup(props, {
     slots,
@@ -12132,6 +12118,14 @@ const props$H = {
   },
   source: Function,
   download: Function,
+  lazy: {
+    type: Boolean,
+    default: true
+  },
+  showLoading: {
+    type: Boolean,
+    default: true
+  },
   // 传递给snap-dom的配置项
   options: {
     type: Object,
@@ -12154,34 +12148,59 @@ const Snapshot = /* @__PURE__ */ vue.defineComponent({
     let snapDOM;
     const instance = vue.getCurrentInstance();
     const current = vue.ref();
-    const snapdom = vue.ref();
+    const snapshot = vue.ref();
     const refresh = async () => {
       await vue.nextTick();
-      snapdom.value = await snapDOM(current.value, props.options);
-      return snapdom.value;
+      snapshot.value = await snapDOM(current.value, {
+        fast: false,
+        // dom太大时会卡死一会儿
+        ...VcInstance.options.Snapshot?.options,
+        ...props.options
+      });
+      return snapshot.value;
+    };
+    const onLoad = () => {
+      return props.showLoading && Message.loading('正在生成...');
+    };
+    const onLoaded = ctx => {
+      ctx?.destroy?.();
     };
     const toDataURL = async () => {
+      const loadContext = onLoad();
+      try {
+        await refresh();
+        return snapshot.value.toRaw();
+      } finally {
+        onLoaded(loadContext);
+      }
+    };
+    const downloadByDefault = async options => {
       await refresh();
-      return snapdom.value.toRaw();
+      return snapshot.value.download(options);
     };
     const download = async options => {
-      await refresh();
-      const _download = props.download || VcInstance.options.Snapshot?.download || (() => false);
-      const skip = _download(instance, options);
+      const loadContext = onLoad();
+      const downloadByUser = props.download || VcInstance.options.Snapshot?.download || (() => false);
+      const skip = downloadByUser(instance, options);
+      const done = async v => {
+        try {
+          v || (await downloadByDefault(options));
+        } finally {
+          onLoaded(loadContext);
+        }
+      };
       if (skip && skip.then) {
         let skip$ = false;
         skip.then(v => {
           skip$ = typeof v === 'undefined' ? true : !!v;
           return v;
-        }).finally(() => {
-          skip$ || snapdom.value.download(options);
-        });
+        }).finally(() => done(skip$));
         return;
       }
-      skip || snapdom.value.download(options);
+      done(skip);
     };
     expose({
-      snapdom,
+      snapshot,
       refresh,
       toDataURL,
       download
@@ -12190,7 +12209,7 @@ const Snapshot = /* @__PURE__ */ vue.defineComponent({
       try {
         snapDOM = window.snapdom || (await import('@zumer/snapdom'));
         snapDOM = snapDOM.snapdom || snapDOM;
-        await refresh();
+        !props.lazy && (await refresh());
         emit('ready', {
           instance,
           dependencies: {

package/dist/index.d.ts

@@ -8425,10 +8425,18 @@ default: string;
 crossOrigin: {
 type: StringConstructor;
 default: string;
-validator: (v: any) => boolean;
+validator: (v: string) => boolean;
 };
 source: FunctionConstructor;
 download: FunctionConstructor;
+lazy: {
+type: BooleanConstructor;
+default: boolean;
+};
+showLoading: {
+type: BooleanConstructor;
+default: boolean;
+};
 options: {
 type: ObjectConstructor;
 default: () => {};
@@ -8441,10 +8449,18 @@ default: string;
 crossOrigin: {
 type: StringConstructor;
 default: string;
-validator: (v: any) => boolean;
+validator: (v: string) => boolean;
 };
 source: FunctionConstructor;
 download: FunctionConstructor;
+lazy: {
+type: BooleanConstructor;
+default: boolean;
+};
+showLoading: {
+type: BooleanConstructor;
+default: boolean;
+};
 options: {
 type: ObjectConstructor;
 default: () => {};
@@ -8454,7 +8470,9 @@ onReady?: ((...args: any[]) => any) | undefined;
 }>, {
 tag: string;
 options: Record<string, any>;
+showLoading: boolean;
 crossOrigin: string;
+lazy: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare const MSortList: DefineComponent<ExtractPropTypes<    {
@@ -13308,10 +13326,18 @@ default: string;
 crossOrigin: {
 type: StringConstructor;
 default: string;
-validator: (v: any) => boolean;
+validator: (v: string) => boolean;
 };
 source: FunctionConstructor;
 download: FunctionConstructor;
+lazy: {
+type: BooleanConstructor;
+default: boolean;
+};
+showLoading: {
+type: BooleanConstructor;
+default: boolean;
+};
 options: {
 type: ObjectConstructor;
 default: () => {};
@@ -13324,10 +13350,18 @@ default: string;
 crossOrigin: {
 type: StringConstructor;
 default: string;
-validator: (v: any) => boolean;
+validator: (v: string) => boolean;
 };
 source: FunctionConstructor;
 download: FunctionConstructor;
+lazy: {
+type: BooleanConstructor;
+default: boolean;
+};
+showLoading: {
+type: BooleanConstructor;
+default: boolean;
+};
 options: {
 type: ObjectConstructor;
 default: () => {};
@@ -13337,7 +13371,9 @@ onReady?: ((...args: any[]) => any) | undefined;
 }>, {
 tag: string;
 options: Record<string, any>;
+showLoading: boolean;
 crossOrigin: string;
+lazy: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare const SortList: DefineComponent<ExtractPropTypes<    {

package/dist/index.iife.js

@@ -37,6 +37,7 @@ var VcComponents = (function (exports, vue) {
 	    line: nil
 	  },
 	  Snapshot: {
+	    options: nil,
 	    source: nil,
 	    download: nil
 	  }
@@ -16543,23 +16544,16 @@ var VcComponents = (function (exports, vue) {
 				.ql-snow .ql-font-size.ql-picker .ql-picker-label[data-value="${fontSize}"]:before {
 					content: "${fontSize}"
 				}`;
-	    pre += `.ql-editor .ql-font-size-${fontSize} {
-					font-size: ${fontSize};
-				}`;
 	    return pre;
 	  }, "");
 	  return style(code, { id });
 	};
 	const insertLineHeightStyle = (value, id) => {
 	  const code = value.reduce((pre, lineHeight) => {
-	    const classLineHeightValue = +lineHeight * 10;
-	    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${classLineHeightValue}"]:before,
-				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${classLineHeightValue}"]:before {
+	    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${lineHeight}"]:before,
+				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${lineHeight}"]:before {
 					content: "${+lineHeight}" 
 				}`;
-	    pre += `.ql-editor .ql-line-height-${classLineHeightValue} {
-					line-height: ${+lineHeight};
-				}`;
 	    return pre;
 	  }, "");
 	  return style(code, { id });
@@ -16570,9 +16564,6 @@ var VcComponents = (function (exports, vue) {
 				.ql-snow .ql-letter-spacing.ql-picker .ql-picker-label[data-value="${letterSpacing}"]:before {
 					content: "${letterSpacing}"
 				}`;
-	    pre += `.ql-editor .ql-letter-spacing-${letterSpacing} {
-					letter-spacing: ${letterSpacing};
-				}`;
 	    return pre;
 	  }, "");
 	  return style(code, { id });
@@ -16760,9 +16751,8 @@ var VcComponents = (function (exports, vue) {
 	                  "selected": true
 	                }, null);
 	              }
-	              const v = key === 'line-height' ? +it * 10 : it;
 	              return vue.createVNode("option", {
-	                "value": `${v}`
+	                "value": `${it}`
 	              }, null);
 	            })]);
 	          }
@@ -16775,16 +16765,18 @@ var VcComponents = (function (exports, vue) {
 	        if (Array.isArray(item)) {
 	          return insertStyle(item);
 	        }
+	        let key = item;
+	        let value = [];
 	        if (typeof item === 'object') {
-	          const [key, value] = Object.entries(item)[0];
-	          const options = value.length && value || toolbarDefaultsMap[key];
-	          if (key === 'font-size') {
-	            insertFontSizeStyle(options, styleId);
-	          } else if (key === 'line-height') {
-	            insertLineHeightStyle(options, lineHeightStyleId);
-	          } else if (key === 'letter-spacing') {
-	            insertLetterSpacingStyle(options, letterSpacingStyleId);
-	          }
+	          [key, value] = Object.entries(item)[0];
+	        }
+	        value = value.length && value || toolbarDefaultsMap[key];
+	        if (key === 'font-size' && Array.isArray(value)) {
+	          insertFontSizeStyle(value, styleId);
+	        } else if (key === 'line-height') {
+	          insertLineHeightStyle(value, lineHeightStyleId);
+	        } else if (key === 'letter-spacing') {
+	          insertLetterSpacingStyle(value, letterSpacingStyleId);
 	        }
 	      });
 	    };
@@ -16865,21 +16857,20 @@ var VcComponents = (function (exports, vue) {
 
 	const registerLineHeight = (quillInstance) => {
 	  const lineHeight = toolbarDefaultsMap["line-height"];
-	  const whitelist = lineHeight.map((i) => String(+i * 10));
 	  const Parchment = quillInstance.import("parchment");
-	  const lineHeightStyle = new Parchment.ClassAttributor(
+	  const lineHeightStyle = new Parchment.StyleAttributor(
+	    "line-height",
 	    "line-height",
-	    "ql-line-height",
-	    { scope: Parchment.Scope.INLINE, whitelist }
+	    { scope: Parchment.Scope.INLINE, whitelist: lineHeight }
 	  );
 	  quillInstance.register({ "formats/line-height": lineHeightStyle }, true);
 	};
 
 	const registerLetterSpacing = (quillInstance) => {
 	  const Parchment = quillInstance.import("parchment");
-	  const letterSpacingStyle = new Parchment.ClassAttributor(
+	  const letterSpacingStyle = new Parchment.StyleAttributor(
+	    "letter-spacing",
 	    "letter-spacing",
-	    "ql-letter-spacing",
 	    {
 	      scope: Parchment.Scope.INLINE,
 	      whitelist: toolbarDefaultsMap["letter-spacing"]
@@ -19521,18 +19512,12 @@ var VcComponents = (function (exports, vue) {
 	const registerFontSize = (editor) => {
 	  const Parchment = editor.import("parchment");
 	  const fontSize = toolbarDefaultsMap["font-size"];
-	  const SizeClass = new Parchment.ClassAttributor("font-size", "ql-font-size", {
-	    scope: Parchment.Scope.INLINE,
-	    whitelist: fontSize
-	  });
 	  const SizeStyle = new Parchment.StyleAttributor("font-size", "font-size", {
 	    scope: Parchment.Scope.INLINE,
 	    whitelist: fontSize
 	  });
 	  editor.register({
-	    "formats/font-size": SizeClass,
-	    "attributors/class/font-size": SizeClass,
-	    "attributors/style/font-size": SizeStyle
+	    "formats/font-size": SizeStyle
 	  }, true);
 	};
 
@@ -19590,6 +19575,7 @@ var VcComponents = (function (exports, vue) {
 	const Editor$1 = /* @__PURE__ */ vue.defineComponent({
 	  name: COMPONENT_NAME$14,
 	  props: props$M,
+	  defaults: defaults$1,
 	  emits: ['ready', 'blur', 'focus', 'input', 'update:modelValue', 'change'],
 	  setup(props, {
 	    slots,
@@ -20675,6 +20661,14 @@ var VcComponents = (function (exports, vue) {
 	  },
 	  source: Function,
 	  download: Function,
+	  lazy: {
+	    type: Boolean,
+	    default: true
+	  },
+	  showLoading: {
+	    type: Boolean,
+	    default: true
+	  },
 	  // 传递给snap-dom的配置项
 	  options: {
 	    type: Object,
@@ -20697,34 +20691,59 @@ var VcComponents = (function (exports, vue) {
 	    let snapDOM;
 	    const instance = vue.getCurrentInstance();
 	    const current = vue.ref();
-	    const snapdom = vue.ref();
+	    const snapshot = vue.ref();
 	    const refresh = async () => {
 	      await vue.nextTick();
-	      snapdom.value = await snapDOM(current.value, props.options);
-	      return snapdom.value;
+	      snapshot.value = await snapDOM(current.value, {
+	        fast: false,
+	        // dom太大时会卡死一会儿
+	        ...VcInstance.options.Snapshot?.options,
+	        ...props.options
+	      });
+	      return snapshot.value;
+	    };
+	    const onLoad = () => {
+	      return props.showLoading && Message.loading('正在生成...');
+	    };
+	    const onLoaded = ctx => {
+	      ctx?.destroy?.();
 	    };
 	    const toDataURL = async () => {
+	      const loadContext = onLoad();
+	      try {
+	        await refresh();
+	        return snapshot.value.toRaw();
+	      } finally {
+	        onLoaded(loadContext);
+	      }
+	    };
+	    const downloadByDefault = async options => {
 	      await refresh();
-	      return snapdom.value.toRaw();
+	      return snapshot.value.download(options);
 	    };
 	    const download = async options => {
-	      await refresh();
-	      const _download = props.download || VcInstance.options.Snapshot?.download || (() => false);
-	      const skip = _download(instance, options);
+	      const loadContext = onLoad();
+	      const downloadByUser = props.download || VcInstance.options.Snapshot?.download || (() => false);
+	      const skip = downloadByUser(instance, options);
+	      const done = async v => {
+	        try {
+	          v || (await downloadByDefault(options));
+	        } finally {
+	          onLoaded(loadContext);
+	        }
+	      };
 	      if (skip && skip.then) {
 	        let skip$ = false;
 	        skip.then(v => {
 	          skip$ = typeof v === 'undefined' ? true : !!v;
 	          return v;
-	        }).finally(() => {
-	          skip$ || snapdom.value.download(options);
-	        });
+	        }).finally(() => done(skip$));
 	        return;
 	      }
-	      skip || snapdom.value.download(options);
+	      done(skip);
 	    };
 	    expose({
-	      snapdom,
+	      snapshot,
 	      refresh,
 	      toDataURL,
 	      download
@@ -20733,7 +20752,7 @@ var VcComponents = (function (exports, vue) {
 	      try {
 	        snapDOM = window.snapdom || (await Promise.resolve().then(() => snapdom$1));
 	        snapDOM = snapDOM.snapdom || snapDOM;
-	        await refresh();
+	        !props.lazy && (await refresh());
 	        emit('ready', {
 	          instance,
 	          dependencies: {

package/dist/index.js

@@ -53,6 +53,7 @@ const defaults$2 = {
     line: nil
   },
   Snapshot: {
+    options: nil,
     source: nil,
     download: nil
   }
@@ -10068,23 +10069,16 @@ const insertFontSizeStyle = (value, id) => {
 				.ql-snow .ql-font-size.ql-picker .ql-picker-label[data-value="${fontSize}"]:before {
 					content: "${fontSize}"
 				}`;
-    pre += `.ql-editor .ql-font-size-${fontSize} {
-					font-size: ${fontSize};
-				}`;
     return pre;
   }, "");
   return Load.style(code, { id });
 };
 const insertLineHeightStyle = (value, id) => {
   const code = value.reduce((pre, lineHeight) => {
-    const classLineHeightValue = +lineHeight * 10;
-    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${classLineHeightValue}"]:before,
-				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${classLineHeightValue}"]:before {
+    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${lineHeight}"]:before,
+				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${lineHeight}"]:before {
 					content: "${+lineHeight}" 
 				}`;
-    pre += `.ql-editor .ql-line-height-${classLineHeightValue} {
-					line-height: ${+lineHeight};
-				}`;
     return pre;
   }, "");
   return Load.style(code, { id });
@@ -10095,9 +10089,6 @@ const insertLetterSpacingStyle = (value, id) => {
 				.ql-snow .ql-letter-spacing.ql-picker .ql-picker-label[data-value="${letterSpacing}"]:before {
 					content: "${letterSpacing}"
 				}`;
-    pre += `.ql-editor .ql-letter-spacing-${letterSpacing} {
-					letter-spacing: ${letterSpacing};
-				}`;
     return pre;
   }, "");
   return Load.style(code, { id });
@@ -10285,9 +10276,8 @@ const EditorToolbar = /* @__PURE__ */ defineComponent({
                   "selected": true
                 }, null);
               }
-              const v = key === 'line-height' ? +it * 10 : it;
               return createVNode("option", {
-                "value": `${v}`
+                "value": `${it}`
               }, null);
             })]);
           }
@@ -10300,16 +10290,18 @@ const EditorToolbar = /* @__PURE__ */ defineComponent({
         if (Array.isArray(item)) {
           return insertStyle(item);
         }
+        let key = item;
+        let value = [];
         if (typeof item === 'object') {
-          const [key, value] = Object.entries(item)[0];
-          const options = value.length && value || toolbarDefaultsMap[key];
-          if (key === 'font-size') {
-            insertFontSizeStyle(options, styleId);
-          } else if (key === 'line-height') {
-            insertLineHeightStyle(options, lineHeightStyleId);
-          } else if (key === 'letter-spacing') {
-            insertLetterSpacingStyle(options, letterSpacingStyleId);
-          }
+          [key, value] = Object.entries(item)[0];
+        }
+        value = value.length && value || toolbarDefaultsMap[key];
+        if (key === 'font-size' && Array.isArray(value)) {
+          insertFontSizeStyle(value, styleId);
+        } else if (key === 'line-height') {
+          insertLineHeightStyle(value, lineHeightStyleId);
+        } else if (key === 'letter-spacing') {
+          insertLetterSpacingStyle(value, letterSpacingStyleId);
         }
       });
     };
@@ -10390,21 +10382,20 @@ const registerAudioBlot = (quillInstance) => {
 
 const registerLineHeight = (quillInstance) => {
   const lineHeight = toolbarDefaultsMap["line-height"];
-  const whitelist = lineHeight.map((i) => String(+i * 10));
   const Parchment = quillInstance.import("parchment");
-  const lineHeightStyle = new Parchment.ClassAttributor(
+  const lineHeightStyle = new Parchment.StyleAttributor(
+    "line-height",
     "line-height",
-    "ql-line-height",
-    { scope: Parchment.Scope.INLINE, whitelist }
+    { scope: Parchment.Scope.INLINE, whitelist: lineHeight }
   );
   quillInstance.register({ "formats/line-height": lineHeightStyle }, true);
 };
 
 const registerLetterSpacing = (quillInstance) => {
   const Parchment = quillInstance.import("parchment");
-  const letterSpacingStyle = new Parchment.ClassAttributor(
+  const letterSpacingStyle = new Parchment.StyleAttributor(
+    "letter-spacing",
     "letter-spacing",
-    "ql-letter-spacing",
     {
       scope: Parchment.Scope.INLINE,
       whitelist: toolbarDefaultsMap["letter-spacing"]
@@ -11088,18 +11079,12 @@ const registerEventModule = (QuillClass) => {
 const registerFontSize = (editor) => {
   const Parchment = editor.import("parchment");
   const fontSize = toolbarDefaultsMap["font-size"];
-  const SizeClass = new Parchment.ClassAttributor("font-size", "ql-font-size", {
-    scope: Parchment.Scope.INLINE,
-    whitelist: fontSize
-  });
   const SizeStyle = new Parchment.StyleAttributor("font-size", "font-size", {
     scope: Parchment.Scope.INLINE,
     whitelist: fontSize
   });
   editor.register({
-    "formats/font-size": SizeClass,
-    "attributors/class/font-size": SizeClass,
-    "attributors/style/font-size": SizeStyle
+    "formats/font-size": SizeStyle
   }, true);
 };
 
@@ -11157,6 +11142,7 @@ const COMPONENT_NAME$14 = 'vc-editor';
 const Editor = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$14,
   props: props$M,
+  defaults,
   emits: ['ready', 'blur', 'focus', 'input', 'update:modelValue', 'change'],
   setup(props, {
     slots,
@@ -12110,6 +12096,14 @@ const props$H = {
   },
   source: Function,
   download: Function,
+  lazy: {
+    type: Boolean,
+    default: true
+  },
+  showLoading: {
+    type: Boolean,
+    default: true
+  },
   // 传递给snap-dom的配置项
   options: {
     type: Object,
@@ -12132,34 +12126,59 @@ const Snapshot = /* @__PURE__ */ defineComponent({
     let snapDOM;
     const instance = getCurrentInstance();
     const current = ref();
-    const snapdom = ref();
+    const snapshot = ref();
     const refresh = async () => {
       await nextTick();
-      snapdom.value = await snapDOM(current.value, props.options);
-      return snapdom.value;
+      snapshot.value = await snapDOM(current.value, {
+        fast: false,
+        // dom太大时会卡死一会儿
+        ...VcInstance.options.Snapshot?.options,
+        ...props.options
+      });
+      return snapshot.value;
+    };
+    const onLoad = () => {
+      return props.showLoading && Message.loading('正在生成...');
+    };
+    const onLoaded = ctx => {
+      ctx?.destroy?.();
     };
     const toDataURL = async () => {
+      const loadContext = onLoad();
+      try {
+        await refresh();
+        return snapshot.value.toRaw();
+      } finally {
+        onLoaded(loadContext);
+      }
+    };
+    const downloadByDefault = async options => {
       await refresh();
-      return snapdom.value.toRaw();
+      return snapshot.value.download(options);
     };
     const download = async options => {
-      await refresh();
-      const _download = props.download || VcInstance.options.Snapshot?.download || (() => false);
-      const skip = _download(instance, options);
+      const loadContext = onLoad();
+      const downloadByUser = props.download || VcInstance.options.Snapshot?.download || (() => false);
+      const skip = downloadByUser(instance, options);
+      const done = async v => {
+        try {
+          v || (await downloadByDefault(options));
+        } finally {
+          onLoaded(loadContext);
+        }
+      };
       if (skip && skip.then) {
         let skip$ = false;
         skip.then(v => {
           skip$ = typeof v === 'undefined' ? true : !!v;
           return v;
-        }).finally(() => {
-          skip$ || snapdom.value.download(options);
-        });
+        }).finally(() => done(skip$));
         return;
       }
-      skip || snapdom.value.download(options);
+      done(skip);
     };
     expose({
-      snapdom,
+      snapshot,
       refresh,
       toDataURL,
       download
@@ -12168,7 +12187,7 @@ const Snapshot = /* @__PURE__ */ defineComponent({
       try {
         snapDOM = window.snapdom || (await import('@zumer/snapdom'));
         snapDOM = snapDOM.snapdom || snapDOM;
-        await refresh();
+        !props.lazy && (await refresh());
         emit('ready', {
           instance,
           dependencies: {

package/dist/index.umd.cjs

@@ -40,6 +40,7 @@
 	    line: nil
 	  },
 	  Snapshot: {
+	    options: nil,
 	    source: nil,
 	    download: nil
 	  }
@@ -16546,23 +16547,16 @@
 				.ql-snow .ql-font-size.ql-picker .ql-picker-label[data-value="${fontSize}"]:before {
 					content: "${fontSize}"
 				}`;
-	    pre += `.ql-editor .ql-font-size-${fontSize} {
-					font-size: ${fontSize};
-				}`;
 	    return pre;
 	  }, "");
 	  return style(code, { id });
 	};
 	const insertLineHeightStyle = (value, id) => {
 	  const code = value.reduce((pre, lineHeight) => {
-	    const classLineHeightValue = +lineHeight * 10;
-	    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${classLineHeightValue}"]:before,
-				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${classLineHeightValue}"]:before {
+	    pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${lineHeight}"]:before,
+				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${lineHeight}"]:before {
 					content: "${+lineHeight}" 
 				}`;
-	    pre += `.ql-editor .ql-line-height-${classLineHeightValue} {
-					line-height: ${+lineHeight};
-				}`;
 	    return pre;
 	  }, "");
 	  return style(code, { id });
@@ -16573,9 +16567,6 @@
 				.ql-snow .ql-letter-spacing.ql-picker .ql-picker-label[data-value="${letterSpacing}"]:before {
 					content: "${letterSpacing}"
 				}`;
-	    pre += `.ql-editor .ql-letter-spacing-${letterSpacing} {
-					letter-spacing: ${letterSpacing};
-				}`;
 	    return pre;
 	  }, "");
 	  return style(code, { id });
@@ -16763,9 +16754,8 @@
 	                  "selected": true
 	                }, null);
 	              }
-	              const v = key === 'line-height' ? +it * 10 : it;
 	              return vue.createVNode("option", {
-	                "value": `${v}`
+	                "value": `${it}`
 	              }, null);
 	            })]);
 	          }
@@ -16778,16 +16768,18 @@
 	        if (Array.isArray(item)) {
 	          return insertStyle(item);
 	        }
+	        let key = item;
+	        let value = [];
 	        if (typeof item === 'object') {
-	          const [key, value] = Object.entries(item)[0];
-	          const options = value.length && value || toolbarDefaultsMap[key];
-	          if (key === 'font-size') {
-	            insertFontSizeStyle(options, styleId);
-	          } else if (key === 'line-height') {
-	            insertLineHeightStyle(options, lineHeightStyleId);
-	          } else if (key === 'letter-spacing') {
-	            insertLetterSpacingStyle(options, letterSpacingStyleId);
-	          }
+	          [key, value] = Object.entries(item)[0];
+	        }
+	        value = value.length && value || toolbarDefaultsMap[key];
+	        if (key === 'font-size' && Array.isArray(value)) {
+	          insertFontSizeStyle(value, styleId);
+	        } else if (key === 'line-height') {
+	          insertLineHeightStyle(value, lineHeightStyleId);
+	        } else if (key === 'letter-spacing') {
+	          insertLetterSpacingStyle(value, letterSpacingStyleId);
 	        }
 	      });
 	    };
@@ -16868,21 +16860,20 @@
 
 	const registerLineHeight = (quillInstance) => {
 	  const lineHeight = toolbarDefaultsMap["line-height"];
-	  const whitelist = lineHeight.map((i) => String(+i * 10));
 	  const Parchment = quillInstance.import("parchment");
-	  const lineHeightStyle = new Parchment.ClassAttributor(
+	  const lineHeightStyle = new Parchment.StyleAttributor(
+	    "line-height",
 	    "line-height",
-	    "ql-line-height",
-	    { scope: Parchment.Scope.INLINE, whitelist }
+	    { scope: Parchment.Scope.INLINE, whitelist: lineHeight }
 	  );
 	  quillInstance.register({ "formats/line-height": lineHeightStyle }, true);
 	};
 
 	const registerLetterSpacing = (quillInstance) => {
 	  const Parchment = quillInstance.import("parchment");
-	  const letterSpacingStyle = new Parchment.ClassAttributor(
+	  const letterSpacingStyle = new Parchment.StyleAttributor(
+	    "letter-spacing",
 	    "letter-spacing",
-	    "ql-letter-spacing",
 	    {
 	      scope: Parchment.Scope.INLINE,
 	      whitelist: toolbarDefaultsMap["letter-spacing"]
@@ -19524,18 +19515,12 @@
 	const registerFontSize = (editor) => {
 	  const Parchment = editor.import("parchment");
 	  const fontSize = toolbarDefaultsMap["font-size"];
-	  const SizeClass = new Parchment.ClassAttributor("font-size", "ql-font-size", {
-	    scope: Parchment.Scope.INLINE,
-	    whitelist: fontSize
-	  });
 	  const SizeStyle = new Parchment.StyleAttributor("font-size", "font-size", {
 	    scope: Parchment.Scope.INLINE,
 	    whitelist: fontSize
 	  });
 	  editor.register({
-	    "formats/font-size": SizeClass,
-	    "attributors/class/font-size": SizeClass,
-	    "attributors/style/font-size": SizeStyle
+	    "formats/font-size": SizeStyle
 	  }, true);
 	};
 
@@ -19593,6 +19578,7 @@
 	const Editor$1 = /* @__PURE__ */ vue.defineComponent({
 	  name: COMPONENT_NAME$14,
 	  props: props$M,
+	  defaults: defaults$1,
 	  emits: ['ready', 'blur', 'focus', 'input', 'update:modelValue', 'change'],
 	  setup(props, {
 	    slots,
@@ -20678,6 +20664,14 @@
 	  },
 	  source: Function,
 	  download: Function,
+	  lazy: {
+	    type: Boolean,
+	    default: true
+	  },
+	  showLoading: {
+	    type: Boolean,
+	    default: true
+	  },
 	  // 传递给snap-dom的配置项
 	  options: {
 	    type: Object,
@@ -20700,34 +20694,59 @@
 	    let snapDOM;
 	    const instance = vue.getCurrentInstance();
 	    const current = vue.ref();
-	    const snapdom = vue.ref();
+	    const snapshot = vue.ref();
 	    const refresh = async () => {
 	      await vue.nextTick();
-	      snapdom.value = await snapDOM(current.value, props.options);
-	      return snapdom.value;
+	      snapshot.value = await snapDOM(current.value, {
+	        fast: false,
+	        // dom太大时会卡死一会儿
+	        ...VcInstance.options.Snapshot?.options,
+	        ...props.options
+	      });
+	      return snapshot.value;
+	    };
+	    const onLoad = () => {
+	      return props.showLoading && Message.loading('正在生成...');
+	    };
+	    const onLoaded = ctx => {
+	      ctx?.destroy?.();
 	    };
 	    const toDataURL = async () => {
+	      const loadContext = onLoad();
+	      try {
+	        await refresh();
+	        return snapshot.value.toRaw();
+	      } finally {
+	        onLoaded(loadContext);
+	      }
+	    };
+	    const downloadByDefault = async options => {
 	      await refresh();
-	      return snapdom.value.toRaw();
+	      return snapshot.value.download(options);
 	    };
 	    const download = async options => {
-	      await refresh();
-	      const _download = props.download || VcInstance.options.Snapshot?.download || (() => false);
-	      const skip = _download(instance, options);
+	      const loadContext = onLoad();
+	      const downloadByUser = props.download || VcInstance.options.Snapshot?.download || (() => false);
+	      const skip = downloadByUser(instance, options);
+	      const done = async v => {
+	        try {
+	          v || (await downloadByDefault(options));
+	        } finally {
+	          onLoaded(loadContext);
+	        }
+	      };
 	      if (skip && skip.then) {
 	        let skip$ = false;
 	        skip.then(v => {
 	          skip$ = typeof v === 'undefined' ? true : !!v;
 	          return v;
-	        }).finally(() => {
-	          skip$ || snapdom.value.download(options);
-	        });
+	        }).finally(() => done(skip$));
 	        return;
 	      }
-	      skip || snapdom.value.download(options);
+	      done(skip);
 	    };
 	    expose({
-	      snapdom,
+	      snapshot,
 	      refresh,
 	      toDataURL,
 	      download
@@ -20736,7 +20755,7 @@
 	      try {
 	        snapDOM = window.snapdom || (await Promise.resolve().then(() => snapdom$1));
 	        snapDOM = snapDOM.snapdom || snapDOM;
-	        await refresh();
+	        !props.lazy && (await refresh());
 	        emit('ready', {
 	          instance,
 	          dependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc-components",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",