cosey 0.9.4 → 0.10.0

package/components/editor/editor.js

@@ -1,108 +1,210 @@
-import { defineComponent, useTemplateRef, shallowRef, provide, ref, watch, onMounted, createVNode } from 'vue';
-import Quill from 'quill';
-import { useFormItem, CHANGE_EVENT } from 'element-plus';
-import { editorEmits, editorProps } from './editor.api.js';
-import stdin_default$1, { useHljsStyle } from './editor.style.js';
-import stdin_default$2 from './modules/image-uploader/formats/image-loading.style.js';
-import stdin_default$6 from './modules/syntax/syntaxOptions.js';
-import { editorContextKey } from './quillContext.js';
-import stdin_default$4 from './components/resize/resize.vue.js';
-import stdin_default$3 from './components/toolbar/toolbar.vue.js';
-import stdin_default$5 from './components/table-toolbar/table-toolbar.vue.js';
-import { register } from './quill.js';
-import { useUpload } from '../upload-context.js';
+import { defineComponent, computed, watch, createVNode, mergeProps, h } from 'vue';
+import { Slate, Editable, useInheritRef } from 'slate-vue3';
+import { createEditor } from 'slate-vue3/core';
+import { withDOM } from 'slate-vue3/dom';
+import { withHistory } from 'slate-vue3/history';
+import stdin_default$2 from './toolbar.js';
+import stdin_default$3 from './button-group.js';
+import stdin_default$7 from './formats/format-mark.js';
+import stdin_default$4 from './formats/format-heading.js';
+import stdin_default$d from './formats/format-block-quote.js';
+import stdin_default$h from './formats/format-table.js';
+import stdin_default$5 from './formats/format-font.js';
+import stdin_default$6 from './formats/format-size.js';
+import stdin_default$8 from './formats/format-color.js';
+import stdin_default$9 from './formats/format-background.js';
+import stdin_default$b from './formats/format-indent.js';
+import stdin_default$c from './formats/format-align.js';
+import stdin_default$a from './formats/format-list.js';
+import stdin_default$k from './formats/format-clear.js';
+import stdin_default$l from './formats/format-source.js';
+import stdin_default$e from './formats/format-link.js';
+import stdin_default$i from './formats/format-code-block.js';
+import stdin_default$f from './formats/format-image.js';
+import stdin_default$g from './formats/format-video.js';
+import stdin_default$j from './formats/format-formula.js';
+import { editorEmits, editorSlots, editorProps } from './editor.api.js';
+import stdin_default$1 from './editor.style.js';
+import { useFocus } from './hooks/useFocus.js';
+import { withDefaultPlugins } from './plugins/index.js';
+import stdin_default$m from './contents/content-placeholder.js';
+import { usePopoverContainer } from './usePopoverContainer.js';
+import { useFormItem, CHANGE_EVENT, useFormDisabled } from 'element-plus';
 import { useComponentConfig } from '../config-provider/config-provider.api.js';
+import { useLocale } from '../../hooks/useLocale.js';
 import { debugWarn } from 'element-plus/es/utils/error.mjs';
 
 var stdin_default = defineComponent({
   name: "CoEditor",
-  inheritAttrs: false,
   props: editorProps,
+  slots: editorSlots,
   emits: editorEmits,
   setup(props, {
     emit
   }) {
-    register();
     const {
       prefixCls
     } = useComponentConfig("editor", props);
     const {
       hashId
     } = stdin_default$1(prefixCls);
-    useHljsStyle();
-    stdin_default$2();
     const {
-      request
-    } = useUpload() || {};
-    const element = useTemplateRef("element");
-    const quill = shallowRef();
-    provide(editorContextKey, {
-      quill
-    });
-    const createQuill = () => {
-      return new Quill(element.value, {
-        modules: {
-          syntax: stdin_default$6,
-          uploader: false,
-          table: true,
-          imageUploader: {
-            upload: file => {
-              return (props.request || request)?.(file);
-            }
-          },
-          customList: true
-        },
-        placeholder: props.placeholder
-      });
+      t
+    } = useLocale();
+    const editor = withDefaultPlugins(withHistory(withDOM(createEditor())));
+    editor.children = [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }];
+    const {
+      isFocus,
+      onFocus,
+      onBlur
+    } = useFocus();
+    const {
+      mountPoint
+    } = usePopoverContainer();
+    const renderPlaceholder = ({
+      attributes
+    }) => {
+      return h(stdin_default$m, {
+        ...useInheritRef(attributes),
+        style: {}
+      }, () => props.placeholder || t("co.common.pleaseInput"));
     };
-    const innerValue = ref(props.modelValue);
+    const innerValue = computed(() => props.modelValue ?? "");
+    let currentValue = "";
     const {
       formItem
     } = useFormItem();
-    const setEditorValue = (value = "") => {
-      quill.value?.clipboard.dangerouslyPasteHTML(value);
-    };
-    const initEditor = () => {
-      quill.value = createQuill();
-      if (innerValue.value) {
-        setEditorValue(innerValue.value);
-      }
-      quill.value.on("text-change", () => {
-        let value = quill.value.getSemanticHTML();
-        if (value === "<p></p>") {
-          value = "";
-        }
-        if (value !== innerValue.value) {
-          innerValue.value = value;
-          emit("update:modelValue", value);
-          emit("change", value);
-        }
-      });
-    };
-    watch(() => props.modelValue, value => {
-      if (value !== innerValue.value) {
-        innerValue.value = value;
-        setEditorValue(value);
+    watch(innerValue, () => {
+      if (innerValue.value !== currentValue) {
+        currentValue = innerValue.value;
+        editor.setContent(innerValue.value);
       }
+    }, {
+      immediate: true
+    });
+    watch(() => props.modelValue, () => {
       if (props.validateEvent) {
-        formItem?.validate?.(CHANGE_EVENT).catch(err => debugWarn(err));
+        formItem?.validate?.(CHANGE_EVENT).catch(debugWarn);
       }
     });
-    onMounted(() => {
-      initEditor();
-    });
+    const onValueChange = () => {
+      const nextValue = editor.getContent();
+      if (nextValue !== currentValue) {
+        currentValue = nextValue;
+        emit("update:modelValue", currentValue);
+        emit("change", currentValue);
+      }
+    };
+    const disabled = useFormDisabled();
     return () => {
       return createVNode("div", {
         "class": [hashId.value, prefixCls.value, {
-          "is-error": formItem?.validateState === "error"
+          "is-error": formItem?.validateState === "error",
+          "is-disabled": disabled.value
         }]
-      }, [createVNode(stdin_default$3, null, null), createVNode("div", {
-        "ref": "element",
-        "class": `${prefixCls.value}-container`,
-        "style": {
-          height: props.height
-        }
-      }, null), createVNode(stdin_default$4, null, null), createVNode(stdin_default$5, null, null)]);
+      }, [createVNode(Slate, {
+        "editor": editor,
+        "renderElement": editor.renderElement,
+        "renderLeaf": editor.renderLeaf,
+        "renderPlaceholder": renderPlaceholder,
+        "decorate": editor.decorate,
+        "onValuechange": onValueChange
+      }, {
+        default: () => [!props.readonly && !disabled.value && createVNode(stdin_default$2, null, {
+          default: () => [createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$4, null, null), createVNode(stdin_default$5, null, null), createVNode(stdin_default$6, null, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$7, {
+              "format": "bold",
+              "icon": "co:text-bold"
+            }, null), createVNode(stdin_default$7, {
+              "format": "italic",
+              "icon": "co:text-italic"
+            }, null), createVNode(stdin_default$7, {
+              "format": "underline",
+              "icon": "co:text-underline"
+            }, null), createVNode(stdin_default$7, {
+              "format": "strikethrough",
+              "icon": "co:text-strikethrough"
+            }, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$7, {
+              "format": "superscript",
+              "icon": "co:text-superscript"
+            }, null), createVNode(stdin_default$7, {
+              "format": "subscript",
+              "icon": "co:text-subscript"
+            }, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$8, null, null), createVNode(stdin_default$9, null, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$a, {
+              "format": "numbered-list",
+              "icon": "co:list-numbered"
+            }, null), createVNode(stdin_default$a, {
+              "format": "bulleted-list",
+              "icon": "co:list-bulleted"
+            }, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$b, {
+              "delta": -1,
+              "icon": "co:text-indent-less"
+            }, null), createVNode(stdin_default$b, {
+              "delta": 1,
+              "icon": "co:text-indent-more"
+            }, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$c, {
+              "format": "left",
+              "icon": "co:text-align-left"
+            }, null), createVNode(stdin_default$c, {
+              "format": "center",
+              "icon": "co:text-align-center"
+            }, null), createVNode(stdin_default$c, {
+              "format": "right",
+              "icon": "co:text-align-right"
+            }, null), createVNode(stdin_default$c, {
+              "format": "justify",
+              "icon": "co:text-align-justify"
+            }, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$d, null, null), createVNode(stdin_default$7, {
+              "format": "code",
+              "icon": "co:code"
+            }, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$e, null, null), createVNode(stdin_default$f, null, null), createVNode(stdin_default$g, null, null), createVNode(stdin_default$h, null, null), createVNode(stdin_default$i, null, null), createVNode(stdin_default$j, null, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$k, null, null)]
+          }), createVNode(stdin_default$3, null, {
+            default: () => [createVNode(stdin_default$l, null, null)]
+          })]
+        }), createVNode("div", {
+          "class": [`${prefixCls.value}-container`, {
+            "is-focus": isFocus.value
+          }]
+        }, [createVNode("div", {
+          "ref": mountPoint,
+          "class": [`${prefixCls.value}-wrapper`],
+          "style": {
+            height: props.height,
+            maxHeight: props.maxHeight
+          }
+        }, [createVNode(Editable, mergeProps({
+          "placeholder": " ",
+          "readOnly": props.readonly || disabled.value,
+          "class": `${prefixCls.value}-content`
+        }, {
+          onFocus,
+          onBlur,
+          onKeydown: editor.onKeydown
+        }), null)])])]
+      })]);
     };
   }
 });

package/components/editor/editor.style.d.ts

@@ -1,4 +1,8 @@
-export declare const useHljsStyle: (themeManager?: import("../theme/theme-context").ThemeManager) => void;
+import type { CSSObject } from '../cssinjs';
+import { type GenerateStyle } from '../theme';
+import { AliasTokenWithCommonCls } from '../theme/getSimpleStyleHook';
+export declare const getButtonStyle: GenerateStyle<AliasTokenWithCommonCls, CSSObject>;
+export declare const getArticleStyle: GenerateStyle<AliasTokenWithCommonCls, CSSObject>;
 declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../theme/theme-context").ThemeManager) => {
     hashId: import("vue").Ref<string, string>;
 };