cosey 0.9.5 → 0.10.1

package/components/editor/formats/format-video.js

@@ -0,0 +1,117 @@
+import { defineComponent, computed, ref, reactive, createVNode, Fragment } from 'vue';
+import { useEditor } from 'slate-vue3';
+import stdin_default$2 from '../../icon/icon.js';
+import stdin_default$1 from '../button.js';
+import stdin_default$3 from '../../form-dialog/form-dialog.js';
+import stdin_default$4 from '../../form/form.js';
+import stdin_default$5 from '../../form/form-item.vue.js';
+import { isPointingAt, getPointingOptions } from '../utils.js';
+import { useLocale } from '../../../hooks/useLocale.js';
+
+var stdin_default = defineComponent({
+  name: "CoEditorFormatVideo",
+  setup() {
+    const {
+      t
+    } = useLocale();
+    const editor = useEditor();
+    const isActive = computed(() => isPointingAt(editor, "video"));
+    const onClick = () => {
+      if (!editor.selection) return;
+      const nodes = editor.nodes(getPointingOptions(editor, "video"));
+      const {
+        done,
+        value
+      } = nodes.next();
+      if (done) {
+        Object.assign(model, {
+          url: "",
+          width: "",
+          height: ""
+        });
+        actionType.value = "insert";
+      } else {
+        const [node] = value;
+        Object.assign(model, {
+          url: node.url,
+          width: node.width,
+          height: node.height
+        });
+        actionType.value = "update";
+      }
+      visible.value = true;
+    };
+    const visible = ref(false);
+    const actionType = ref("insert");
+    const title = computed(() => `${actionType.value === "update" ? t("co.editor.edit") : t("co.editor.insert")}${t("co.editor.video")}`);
+    const model = reactive({
+      url: "",
+      width: "",
+      height: ""
+    });
+    const onSubmit = () => {
+      if (!editor.selection) return;
+      if (!model.url.trim()) return;
+      if (actionType.value === "update") {
+        editor.setNodes({
+          ...model
+        }, getPointingOptions(editor, "video"));
+      } else {
+        editor.insertVideo(model.url, model.width, model.height);
+      }
+    };
+    return () => {
+      return createVNode(Fragment, null, [createVNode(stdin_default$1, {
+        "active": isActive.value,
+        "onClick": onClick
+      }, {
+        default: () => [createVNode(stdin_default$2, {
+          "name": "co:video-player"
+        }, null)]
+      }), createVNode(stdin_default$3, {
+        "modelValue": visible.value,
+        "onUpdate:modelValue": $event => visible.value = $event,
+        "title": title.value,
+        "width": "sm"
+      }, {
+        default: () => [createVNode(stdin_default$4, {
+          "model": model,
+          "labelWidth": "auto",
+          "grid": true,
+          "rowProps": {
+            gutter: 16
+          },
+          "submit": onSubmit
+        }, {
+          default: () => [createVNode(stdin_default$5, {
+            "modelValue": model.url,
+            "onUpdate:modelValue": $event => model.url = $event,
+            "prop": "url",
+            "label": "URL",
+            "field-type": "input"
+          }, null), createVNode(stdin_default$5, {
+            "modelValue": model.width,
+            "onUpdate:modelValue": $event => model.width = $event,
+            "prop": "width",
+            "label": t("co.editor.width"),
+            "field-type": "input",
+            "colProps": {
+              span: 12
+            }
+          }, null), createVNode(stdin_default$5, {
+            "modelValue": model.height,
+            "onUpdate:modelValue": $event => model.height = $event,
+            "prop": "height",
+            "label": t("co.editor.height"),
+            "field-type": "input",
+            "colProps": {
+              span: 12
+            }
+          }, null)]
+        })]
+      })]);
+    };
+  }
+});
+
+export { stdin_default as default };

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

@@ -0,0 +1,45 @@
+import { PropType, SlotsType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    popperClass: {
+        type: null;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    maxHeight: {
+        type: StringConstructor;
+    };
+    triggerTarget: {
+        type: PropType<HTMLElement | null>;
+    };
+    nopadding: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:visible': (visible: boolean) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    popperClass: {
+        type: null;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    maxHeight: {
+        type: StringConstructor;
+    };
+    triggerTarget: {
+        type: PropType<HTMLElement | null>;
+    };
+    nopadding: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    visible: boolean;
+    nopadding: boolean;
+}, SlotsType<{
+    default: {};
+    content: {};
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/editor/formats/picker.js

@@ -0,0 +1,91 @@
+import { defineComponent, useTemplateRef, ref, provide, computed, onMounted, onBeforeUnmount, createVNode } from 'vue';
+import { ElTooltip } from 'element-plus';
+import stdin_default$1 from './picker.style.js';
+import { pickerContextKey } from './picker.api.js';
+import { isBoolean } from '../../../utils/is.js';
+import { useComponentConfig } from '../../config-provider/config-provider.api.js';
+
+var stdin_default = defineComponent({
+  name: "CoEditorPicker",
+  props: {
+    popperClass: {
+      type: null
+    },
+    visible: {
+      type: Boolean
+    },
+    maxHeight: {
+      type: String
+    },
+    triggerTarget: {
+      type: [Object, null]
+    },
+    nopadding: {
+      type: Boolean
+    }
+  },
+  emits: {
+    "update:visible": visible => isBoolean(visible)
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("editor-picker");
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const contentRef = useTemplateRef("content");
+    const contextTriggerTarget = ref();
+    provide(pickerContextKey, {
+      triggerTarget: contextTriggerTarget
+    });
+    const mergedTriggerTarget = computed(() => {
+      return props.triggerTarget || contextTriggerTarget.value;
+    });
+    const onDocClick = event => {
+      const target = event.target;
+      if (!props.visible || mergedTriggerTarget.value && mergedTriggerTarget.value.contains(target) || contentRef.value?.contains(target)) {
+        return;
+      }
+      emit("update:visible", false);
+    };
+    onMounted(() => {
+      document.addEventListener("click", onDocClick, false);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", onDocClick, false);
+    });
+    return () => {
+      return createVNode(ElTooltip, {
+        "visible": props.visible,
+        "showArrow": false,
+        "placement": "bottom-start",
+        "offset": 0,
+        "gpuAcceleration": false,
+        "popperClass": [hashId.value, props.popperClass, `${prefixCls.value}-panel`],
+        "stopPopperMouseEvent": false,
+        "effect": "light",
+        "trigger": "click",
+        "persistent": true
+      }, {
+        default: slots.default,
+        content: () => createVNode("div", {
+          "ref": "content",
+          "class": [`${prefixCls.value}-content`, {
+            "is-nopadding": props.nopadding
+          }],
+          "style": {
+            maxHeight: props.maxHeight
+          },
+          "onMousedown": event => event.preventDefault()
+        }, [slots.content?.({})])
+      });
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/editor/{components/picker → formats}/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/picker → formats}/picker.style.js

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

package/components/editor/formats/select-list.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, PropType } from 'vue';
+export interface SelectListItem {
+    label: string;
+    value: any;
+    style?: CSSProperties;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selectedValue: {
+        type: null;
+    };
+    list: {
+        type: PropType<SelectListItem[]>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: SelectListItem) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selectedValue: {
+        type: null;
+    };
+    list: {
+        type: PropType<SelectListItem[]>;
+        required: true;
+    };
+}>> & Readonly<{
+    onSelect?: ((item: SelectListItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/editor/formats/select-list.js

@@ -0,0 +1,47 @@
+import { defineComponent, createVNode } from 'vue';
+import stdin_default$1 from './select-list.style.js';
+import { isObject } from '../../../utils/is.js';
+import { useComponentConfig } from '../../config-provider/config-provider.api.js';
+
+var stdin_default = defineComponent({
+  name: "CoEditorSelectList",
+  props: {
+    selectedValue: {
+      type: null
+    },
+    list: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: {
+    select: item => isObject(item)
+  },
+  setup(props, {
+    emit
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("editor-select-list");
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const onSelect = item => {
+      emit("select", item);
+    };
+    return () => {
+      return createVNode("div", {
+        "class": [hashId.value, prefixCls.value]
+      }, [props.list.map(item => createVNode("div", {
+        "key": item.value,
+        "class": [`${prefixCls.value}-item`, {
+          "is-active": props.selectedValue === item.value
+        }],
+        "style": item.style,
+        "onClick": () => onSelect(item)
+      }, [item.label]))]);
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/editor/formats/select-list.style.d.ts

@@ -0,0 +1,4 @@
+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/list/list.style.js → formats/select-list.style.js}

@@ -1,6 +1,6 @@
-import { getSimpleStyleHook } from '../../../theme/getSimpleStyleHook.js';
+import { getSimpleStyleHook } from '../../theme/getSimpleStyleHook.js';
 
-var stdin_default = getSimpleStyleHook("CoEditorListPicker", (token) => {
+var stdin_default = getSimpleStyleHook("EditorSelectList", (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {

package/components/editor/formats/select.d.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue';
+import { type SelectListItem } from './select-list';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    list: {
+        type: PropType<SelectListItem[]>;
+        required: true;
+    };
+    modelValue: {
+        type: null;
+    };
+    buttonWidth: {
+        type: StringConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: any) => true;
+    change: (value: any) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    list: {
+        type: PropType<SelectListItem[]>;
+        required: true;
+    };
+    modelValue: {
+        type: null;
+    };
+    buttonWidth: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/editor/formats/select.js

@@ -0,0 +1,61 @@
+import { defineComponent, ref, computed, createVNode } from 'vue';
+import stdin_default$1 from './picker.js';
+import stdin_default$3 from '../button-select.js';
+import stdin_default$2 from './select-list.js';
+
+var stdin_default = defineComponent({
+  name: "CoEditorSelect",
+  props: {
+    list: {
+      type: Array,
+      required: true
+    },
+    modelValue: {
+      type: null
+    },
+    buttonWidth: {
+      type: String
+    }
+  },
+  emits: {
+    "update:modelValue": value => !!value || true,
+    change: value => !!value || true
+  },
+  setup(props, {
+    emit
+  }) {
+    const visible = ref(false);
+    const displayedLabel = computed(() => {
+      return props.list.find(item => item.value === props.modelValue)?.label || props.modelValue;
+    });
+    const onSelect = item => {
+      emit("update:modelValue", item.value);
+      emit("change", item.value);
+      visible.value = false;
+    };
+    const onClick = () => {
+      visible.value = !visible.value;
+    };
+    return () => {
+      return createVNode(stdin_default$1, {
+        "visible": visible.value,
+        "onUpdate:visible": $event => visible.value = $event,
+        "max-height": "300px"
+      }, {
+        default: () => createVNode(stdin_default$3, {
+          "width": props.buttonWidth,
+          "onClick": onClick
+        }, {
+          default: () => [displayedLabel.value]
+        }),
+        content: () => createVNode(stdin_default$2, {
+          "list": props.list,
+          "selectedValue": props.modelValue,
+          "onSelect": onSelect
+        }, null)
+      });
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/editor/hooks/useBlockValueActive.d.ts

@@ -0,0 +1 @@
+export declare function useBlockValueActive(key: string, value: string): import("vue").ComputedRef<boolean>;

package/components/editor/hooks/useBlockValueActive.js

@@ -0,0 +1,21 @@
+import { useEditor } from 'slate-vue3';
+import { Editor, Element } from 'slate-vue3/core';
+import { computed } from 'vue';
+
+function useBlockValueActive(key, value) {
+  const editor = useEditor();
+  return computed(() => {
+    if (!editor.selection) return false;
+    const [match] = Array.from(
+      editor.nodes({
+        at: Editor.unhangRange(editor, editor.selection),
+        match: (n) => {
+          return !Editor.isEditor(n) && Element.isElement(n) && n[key] === value;
+        }
+      })
+    );
+    return !!match;
+  });
+}
+
+export { useBlockValueActive };

package/components/editor/hooks/useFocus.d.ts

@@ -0,0 +1,5 @@
+export declare function useFocus(): {
+    isFocus: import("vue").Ref<boolean, boolean>;
+    onFocus: () => void;
+    onBlur: () => void;
+};

package/components/editor/hooks/useFocus.js

@@ -0,0 +1,18 @@
+import { ref } from 'vue';
+
+function useFocus() {
+  const isFocus = ref(false);
+  const onFocus = () => {
+    isFocus.value = true;
+  };
+  const onBlur = () => {
+    isFocus.value = false;
+  };
+  return {
+    isFocus,
+    onFocus,
+    onBlur
+  };
+}
+
+export { useFocus };

package/components/editor/{components/color-picker → hooks}/useHistoryColor.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { usePersist } from '../../../../hooks/usePersist.js';
+import { usePersist } from '../../../hooks/usePersist.js';
 
 const historyColorKey = "Cosey:historyColor";
 let historyColors = null;

package/components/editor/hooks/useMarkActive.d.ts

@@ -0,0 +1 @@
+export declare function useMarkActive(mark: string): import("vue").ComputedRef<boolean>;

package/components/editor/hooks/useMarkActive.js

@@ -0,0 +1,13 @@
+import { useEditor } from 'slate-vue3';
+import { Editor } from 'slate-vue3/core';
+import { computed } from 'vue';
+
+function useMarkActive(mark) {
+  const editor = useEditor();
+  return computed(() => {
+    const marks = Editor.marks(editor);
+    return marks ? marks[mark] === true : false;
+  });
+}
+
+export { useMarkActive };

package/components/editor/hooks/useMarkValue.d.ts

@@ -0,0 +1 @@
+export declare function useMarkValue(mark: string, initial?: boolean | string): import("vue").Ref<string | boolean, string | boolean>;

package/components/editor/hooks/useMarkValue.js

@@ -0,0 +1,21 @@
+import { useEditor } from 'slate-vue3';
+import { Editor } from 'slate-vue3/core';
+import { ref, watch } from 'vue';
+
+function useMarkValue(mark, initial = "") {
+  const editor = useEditor();
+  const current = ref(initial);
+  watch(
+    () => editor.selection,
+    () => {
+      const marks = Editor.marks(editor);
+      current.value = marks ? marks[mark] || "" : "";
+    },
+    {
+      deep: true
+    }
+  );
+  return current;
+}
+
+export { useMarkValue };

package/components/editor/index.d.ts

@@ -10,26 +10,30 @@ declare const _Editor: {
         height: {
             type: StringConstructor;
         };
+        maxHeight: {
+            type: StringConstructor;
+        };
         readonly: {
             type: BooleanConstructor;
         };
+        disabled: {
+            type: BooleanConstructor;
+        };
         validateEvent: {
             type: BooleanConstructor;
             default: boolean;
         };
-        request: {
-            type: import("vue").PropType<import("..").UploadContext["request"]>;
-        };
     }>> & Readonly<{
         onChange?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        'update:modelValue': (value: string) => boolean;
         change: (value: string) => boolean;
+        'update:modelValue': (value: string) => boolean;
     }, import("vue").PublicProps, {
+        disabled: boolean;
         validateEvent: boolean;
         readonly: boolean;
-    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    }, true, {}, import("vue").SlotsType<import("./editor.api").EditorSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -46,20 +50,24 @@ declare const _Editor: {
         height: {
             type: StringConstructor;
         };
+        maxHeight: {
+            type: StringConstructor;
+        };
         readonly: {
             type: BooleanConstructor;
         };
+        disabled: {
+            type: BooleanConstructor;
+        };
         validateEvent: {
             type: BooleanConstructor;
             default: boolean;
         };
-        request: {
-            type: import("vue").PropType<import("..").UploadContext["request"]>;
-        };
     }>> & Readonly<{
         onChange?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        disabled: boolean;
         validateEvent: boolean;
         readonly: boolean;
     }>;
@@ -76,25 +84,29 @@ declare const _Editor: {
     height: {
         type: StringConstructor;
     };
+    maxHeight: {
+        type: StringConstructor;
+    };
     readonly: {
         type: BooleanConstructor;
     };
+    disabled: {
+        type: BooleanConstructor;
+    };
     validateEvent: {
         type: BooleanConstructor;
         default: boolean;
     };
-    request: {
-        type: import("vue").PropType<import("..").UploadContext["request"]>;
-    };
 }>> & Readonly<{
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (value: string) => boolean;
     change: (value: string) => boolean;
+    'update:modelValue': (value: string) => boolean;
 }, string, {
+    disabled: boolean;
     validateEvent: boolean;
     readonly: boolean;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin;
+}, {}, string, import("vue").SlotsType<import("./editor.api").EditorSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin;
 export { _Editor as Editor };
 export default _Editor;