zydx-plus 1.10.34 → 1.10.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.10.34",
+  "version": "1.10.36",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -24,7 +24,6 @@
     "pdfjs-dist": "^2.0.943",
     "flipbook-vue": "^1.0.0-beta.4",
     "@wangeditor/editor": "^5.1.23",
-    "wangeditor5-for-vue3": "^1.0.0",
     "@wangeditor/plugin-upload-attachment": "^1.1.0",
     "snabbdom": "^3.5.1"
   },

package/src/components/editor/src/editor.vue

@@ -12,7 +12,7 @@ import { Boot } from '@wangeditor/editor'
 import attachmentModule from '@wangeditor/plugin-upload-attachment'
 import { menuModule } from './menu'
 import { nodeModule } from './node'
-import { useWangEditor,WeEditable, WeToolbar } from 'wangeditor5-for-vue3'
+import { useWangEditor,WeEditable, WeToolbar } from './wangeditor5-for-vue3/index'
 Boot.registerModule(attachmentModule)
 Boot.registerModule(nodeModule)
 Boot.registerModule(menuModule)

package/src/components/editor/src/wangeditor5-for-vue3/core/editable.js

@@ -0,0 +1,328 @@
+import { createEditor, SlateEditor, SlateTransforms } from '@wangeditor/editor';
+import debounce from 'lodash.debounce';
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, shallowReactive, toRaw, toRef, watch, watchEffect } from 'vue';
+import { useWeContent } from './hooks';
+import { withInstall, is } from './utils';
+export const EditableProps = {
+    handle: {
+        type: Symbol,
+        required: true
+    },
+    json: {
+        type: [Array, String]
+    },
+    // v-model:json.string
+    jsonModifiers: {
+        default: () => ({ string: false })
+    },
+    html: {
+        type: String
+    }
+};
+export const EditableEmits = ['reload', 'reloaded', 'update:json', 'update:html'];
+const Editable = defineComponent({
+    name: 'WeEditable',
+    props: EditableProps,
+    emits: [...EditableEmits],
+    setup(props, { emit, expose }) {
+        const rootRef = ref();
+        const content = shallowReactive({
+            json: [],
+            jstr: '',
+            html: ''
+        });
+        const modelJson = computed(() => {
+            const { json } = props;
+            if (is(json, 'array'))
+                return true;
+            if (is(json, 'string'))
+                return true;
+            return false;
+        });
+        const modelJstr = computed(() => modelJson.value && props.jsonModifiers.string);
+        const modelHtml = computed(() => is(props.html, 'string'));
+        const { cache, opts, instance, globalAttrs, formFieldInit } = useWeContent(props.handle);
+        const formField = formFieldInit();
+        /**
+         * 生成 reload/reloaded 事件传递的数据
+         */
+        function createEvent() {
+            return {
+                type: 'editable',
+                instance: instance.editable
+            };
+        }
+        /**
+         * 菜单编辑区
+         * @param dispatch 是否需要触发 reload 事件。组件卸载时的销毁不需要触发 reload 事件
+         * @return 是否需要触发 reloaded 事件
+         */
+        function destory(dispatch) {
+            if (!instance.editable)
+                return false;
+            syncContent();
+            dispatch && emit('reload', createEvent());
+            instance.editable.destroy();
+            instance.editable = null;
+            return true;
+        }
+        /** 封装 change 事件，实现数据 v-model v-model:json 和 v-model:html */
+        const changes = [];
+        watchEffect(() => {
+            changes.length = 0;
+            if (modelJson.value || modelHtml.value) {
+                const { delay } = opts.editable;
+                changes.push(delay > 0 ? debounce(syncContent, delay) : syncContent);
+            }
+            const { onChange } = opts.editable.config;
+            is(onChange, 'function') && changes.push(onChange);
+        });
+        /**
+         * 生成编辑区初始化所需的配置对象
+         */
+        function createOption() {
+            const { mode, config, defaultContent, extendCache } = toRaw(opts).editable;
+            const option = {
+                selector: rootRef.value,
+                mode: mode || 'default',
+                config: Object.assign({}, config, {
+                    customAlert(info, type) {
+                        // opts.editable.config.customAlert?.(info, type)
+                        if(opts.editable.config.customAlert) opts.editable.config.customAlert(info, type);
+                    },
+                    onCreated(editor) {
+                        // opts.editable.config.onCreated?.(editor);
+                        if(opts.editable.config.onCreated) opts.editable.config.onCreated(editor);
+                    },
+                    onDestroyed(editor) {
+                        if(opts.editable.config.onDestroyed) opts.editable.config.onDestroyed(editor);
+                        // opts.editable.config.onDestroyed?.(editor);
+                    },
+                    onMaxLength(editor) {
+                        if(opts.editable.config.onMaxLength) opts.editable.config.onMaxLength(editor);
+                        // opts.editable.config.onMaxLength?.(editor);
+                    },
+                    onFocus(editor) {
+                        if(opts.editable.config.onFocus) opts.editable.config.onFocus(editor);
+                        // opts.editable.config.onFocus?.(editor);
+                    },
+                    onBlur(editor) {
+                        if(opts.editable.config.onBlur) opts.editable.config.onBlur(editor);
+                        // opts.editable.config.onBlur?.(editor);
+                        formField.blur();
+                    },
+                    onChange(editor) {
+                        nextTick(() => changes.forEach((change) => change(editor)));
+                    }
+                })
+            };
+            let data = '';
+            if (extendCache) {
+                data =
+                    content.jstr.length > 2
+                        ? content.jstr
+                        : Array.isArray(defaultContent)
+                            ? JSON.stringify(defaultContent)
+                            : defaultContent || '';
+            }
+            else {
+                data = Array.isArray(defaultContent) ? JSON.stringify(defaultContent) : defaultContent || content.jstr;
+            }
+            try {
+                const json = JSON.parse(data);
+                return { content: json, ...option };
+            }
+            catch (e) {
+                return { html: data, ...option };
+            }
+        }
+        const editable = {
+            timer: null,
+            create() {
+                if (!rootRef.value)
+                    return;
+                const dispatch = destory(true);
+                instance.editable = createEditor(createOption());
+                syncContent();
+                dispatch && emit('reloaded', createEvent());
+                if (cache.toolbar.timer)
+                    clearTimeout(cache.toolbar.timer);
+                cache.toolbar.create();
+            },
+            throttle() {
+                if (editable.timer)
+                    clearTimeout(editable.timer);
+                editable.timer = setTimeout(() => {
+                    editable.timer = null;
+                    editable.create();
+                }, opts.reloadDelay);
+            }
+        };
+        Object.assign(cache, {
+            editable,
+            clearContent,
+            syncContent
+        });
+        const { create, throttle } = editable;
+        onMounted(create);
+        onBeforeUnmount(destory);
+        /**
+         * 设置 v-model 数据
+         * @param inst 编辑器实例
+         * @param insert 执行插入操作
+         */
+        function setContent(inst, insert) {
+            const focus = inst.isFocused();
+            const disable = opts.editable.config.readOnly;
+            const selection = JSON.stringify(inst.selection);
+            disable && inst.enable();
+            inst.clear();
+            insert();
+            if (disable) {
+                inst.disable();
+            }
+            else if (!focus) {
+                inst.blur();
+            }
+            else {
+                try {
+                    inst.select(JSON.parse(selection)); // 恢复选区
+                }
+                catch (e) {
+                    inst.select(SlateEditor.start(inst, [])); // 选中开头
+                }
+            }
+        }
+        // 监听 v-model:json
+        watch(() => props.json, (json) => {
+            if (!modelJson.value)
+                return;
+            const value = toRaw(json);
+            if (value === content.json || value === content.jstr)
+                return;
+            let jstr = is(value, 'array') ? JSON.stringify(value) : value;
+            if (jstr === content.jstr)
+                return;
+            try {
+                json = JSON.parse(jstr);
+            }
+            catch (e) {
+                json = [];
+                jstr = '';
+                console.error(Error(`v-model:json${modelJstr.value ? '.string' : ''}'s value is not a json string or object!`));
+            }
+            const { editable: inst } = instance;
+            if (inst) {
+                setContent(inst, () => inst.insertFragment(json));
+            }
+            else {
+                Object.assign(content, { json, jstr });
+            }
+        }, { immediate: true, deep: true });
+        // v-model:html
+        watch(() => props.html, (html) => {
+            // 以 v-model:json 为主，无 v-model:json 时才会继续操作
+            if (modelJson.value || !modelHtml.value)
+                return;
+            html = html || '';
+            if (content.html === html)
+                return;
+            const { editable: inst } = instance;
+            if (inst) {
+                setContent(inst, () => {
+                    // @ts-ignore
+                    SlateTransforms.setNodes(inst, { type: 'paragraph' }, { mode: 'highest' });
+                    inst.dangerouslyInsertHtml(html);
+                });
+            }
+            else {
+                content.html = html;
+            }
+        }, { immediate: true });
+        // 编辑器支持重载的配置项
+        watch(() => opts.editable.mode, throttle);
+        watch(() => opts.editable.config.maxLength, throttle);
+        watch(() => opts.editable.config.decorate, throttle);
+        watch(() => opts.editable.config.customPaste, throttle);
+        watch(() => opts.editable.config.hoverbarKeys, throttle, { deep: true });
+        watch(() => opts.editable.config.MENU_CONF, throttle, { deep: true });
+        watch(() => opts.editable.config.EXTEND_CONF, throttle, { deep: true });
+        // readOnly
+        watch(() => opts.editable.config.readOnly, (nv) => {
+            const { editable: inst } = instance;
+            inst && (nv ? inst.disable() : inst.enable());
+        });
+        // placeholder
+        watch(() => opts.editable.config.placeholder, (nv) => {
+            const target = rootRef.value?.querySelector('.w-e-text-placeholder');
+            console.log(nv)
+            if (target instanceof HTMLElement)
+                target.innerHTML = nv || '';
+        });
+        // scroll
+        watch(() => opts.editable.config.scroll, (nv) => {
+            const target = rootRef.value?.querySelector('.w-e-scroll');
+            if (target instanceof HTMLElement)
+                target.style.overflowY = nv ? 'auto' : '';
+        });
+        /**
+         * 更新数据，将编辑器内容同步到父组件。
+         */
+        function syncContent() {
+            if (!modelJson.value && !modelHtml.value)
+                return;
+            const { editable: inst } = instance;
+            if (!inst)
+                return;
+            content.json = inst.isEmpty() ? [] : inst.children;
+            const { json, jstr: oldJstr } = content;
+            const jstr = json.length ? JSON.stringify(json) : '';
+            if (oldJstr === jstr)
+                return;
+            Object.assign(content, { json, jstr });
+            if (modelJstr.value) {
+                emit('update:json', jstr);
+            }
+            else if (modelJson.value) {
+                emit('update:json', json);
+            }
+            if (modelHtml.value) {
+                content.html = inst.isEmpty() ? '' : inst.getHtml();
+                emit('update:html', content.html);
+            }
+            formField.change();
+        }
+        /**
+         * 清除组件中的富文本内容和缓存
+         */
+        function clearContent() {
+            const { editable: inst } = instance;
+            // 为初始 || 无内容
+            if (!inst || inst.isEmpty())
+                return;
+            const disable = inst.isDisabled();
+            inst.enable();
+            inst.clear();
+            disable && inst.disable();
+            syncContent();
+        }
+        expose({ rootRef, modelJson, modelJstr, modelHtml, instance, syncContent, clearContent });
+        return {
+            rootRef,
+            globalAttrs,
+            modelJson,
+            modelJstr,
+            modelHtml,
+            content,
+            instance,
+            syncContent,
+            clearContent,
+            option: toRef(opts, 'editable')
+        };
+    },
+    render() {
+        return h('div', { ref: 'rootRef', ...this.globalAttrs.editable });
+    }
+});
+export const WeEditable = withInstall(Editable);
+//# sourceMappingURL=editable.js.map

package/src/components/editor/src/wangeditor5-for-vue3/core/editor.js

@@ -0,0 +1,53 @@
+import { WeToolbar } from './toolbar';
+import { computed, defineComponent, h, mergeProps } from 'vue';
+import { EditableEmits, EditableProps, WeEditable } from './editable';
+import { omit, pick, withInstall } from './utils';
+import { useWeContent } from './hooks';
+// const PierceEmits = EditableEmits.map((e) => `on${e.charAt(0).toUpperCase()}${e.slice(1)}`)
+const Editor = defineComponent({
+    inheritAttrs: false,
+    name: 'WeEditor',
+    props: {
+        toolbarAttrs: {
+            type: Object,
+            default: () => ({})
+        },
+        editableAttrs: {
+            type: Object,
+            default: () => ({})
+        },
+        ...EditableProps
+    },
+    emits: [...EditableEmits],
+    setup(props, { attrs, emit }) {
+        const { globalAttrs, instance } = useWeContent(props.handle);
+        const editorProps = computed(() => {
+            return mergeProps(omit(attrs, ['toolbarAttrs', 'editableAttrs']), globalAttrs.value.editor);
+        });
+        const editableEmits = EditableEmits.reduce((events, e) => {
+            events[`on${e.charAt(0).toUpperCase()}${e.slice(1)}`] = (data) => emit(e, data);
+            return events;
+        }, {});
+        const editableProps = computed(() => {
+            return mergeProps(editableEmits, pick(props, ['handle', 'json', 'jsonModifiers', 'html']), props.editableAttrs);
+        });
+        const toolbarProps = computed(() => {
+            const { handle, toolbarAttrs } = props;
+            return mergeProps({
+                handle,
+                onReload(e) {
+                    emit('reload', e);
+                },
+                onReloaded(e) {
+                    emit('reloaded', e);
+                }
+            }, toolbarAttrs);
+        });
+        return { editorProps, editableProps, toolbarProps, instance };
+    },
+    render() {
+        return h('div', this.editorProps, [h(WeToolbar, this.toolbarProps), h(WeEditable, this.editableProps)]);
+    }
+});
+export const WeEditor = withInstall(Editor);
+//# sourceMappingURL=editor.js.map

package/src/components/editor/src/wangeditor5-for-vue3/core/hooks.js

@@ -0,0 +1,134 @@
+import { getCurrentInstance, inject, provide, reactive, ref, shallowReactive, toRefs, watch } from 'vue';
+import { deepMerge, is } from './utils';
+let HANDLE_INDEX = 1;
+function defaultOptions() {
+    return {
+        reloadDelay: 500,
+        toolbar: {
+            mode: 'default',
+            config: {}
+        },
+        editable: {
+            mode: 'default',
+            defaultContent: null,
+            config: {},
+            delay: 3000,
+            extendCache: true
+        }
+    };
+}
+function defaultAttrs() {
+    return { editor: {}, toolbar: {}, editable: {} };
+}
+function defaultFormFieldInit() {
+    return { blur() { }, change() { } };
+}
+function defaultGlobalConfig() {
+    return { opts: defaultOptions(), attrs: defaultAttrs(), formFieldInit: defaultFormFieldInit };
+}
+function createGlobalPropertyName(name) {
+    return `WE-${name.toUpperCase()}`;
+}
+/**
+ * 创建 wangEditor 编辑器的全局配置注册函数
+ * @param config - 全局配置
+ */
+export function createWeGlobalConfig(config) {
+    return function (app) {
+        deepMerge(defaultGlobalConfig(), config);
+        const configRefs = toRefs(reactive(config));
+        const keys = Object.keys(configRefs);
+        keys.forEach((key) => {
+            app.config.globalProperties[createGlobalPropertyName(key)] = configRefs[key];
+        });
+    };
+}
+const GlobalPropertiesInit = {
+    opts: defaultOptions,
+    attrs: defaultAttrs,
+    formFieldInit: () => defaultFormFieldInit
+};
+export function useWeGlobalConfig(key) {
+    // const properties = getCurrentInstance()?.appContext.config.globalProperties;
+    let properties = null
+    if(getCurrentInstance()) {
+        properties = getCurrentInstance().appContext.config.globalProperties;
+    }
+    if (properties) {
+        const name = createGlobalPropertyName(key);
+        if (!Reflect.has(properties, name)) {
+            properties[name] = ref(GlobalPropertiesInit[key]());
+        }
+        return properties[name];
+    }
+    return ref(GlobalPropertiesInit[key]());
+}
+/**
+ * 创建编辑器配置
+ * @param option - 初始化配置项
+ */
+export function useWangEditor(option = null, formField) {
+    const opts = reactive((is(option, 'object') ? option : {}));
+    const globalOpts = useWeGlobalConfig('opts');
+    watch(globalOpts, (options) => {
+        if (is(options, 'object')) {
+            deepMerge(options, opts);
+        }
+    }, { immediate: true, deep: true });
+    const instance = shallowReactive({
+        editable: null,
+        toolbar: null
+    });
+    const cache = {};
+    const globalFormField = useWeGlobalConfig('formFieldInit');
+    function formFieldInit() {
+        return [globalFormField.value, formField].reduce((field, init) => {
+            if (typeof init === 'function') {
+                const { blur, change } = init();
+                if (typeof blur === 'function')
+                    field.blur = blur;
+                if (typeof change === 'function')
+                    field.change = change;
+            }
+            return field;
+        }, defaultFormFieldInit());
+    }
+    const handle = Symbol(`WE ${String(HANDLE_INDEX++).padStart(6, '0')}`);
+    provide(handle, {
+        opts,
+        instance,
+        cache,
+        formFieldInit,
+        globalAttrs: useWeGlobalConfig('attrs')
+    });
+    function clearContent() {
+        if(cache.clearContent) cache.clearContent()
+        // cache.clearContent?.();
+    }
+    function syncContent() {
+        if(cache.syncContent) cache.syncContent()
+        // cache.syncContent?.();
+    }
+    function reloadEditor() {
+        if(cache.create) cache.create()
+        // cache.editable?.create();
+    }
+    return { opts, instance, handle, clearContent, syncContent, reloadEditor };
+}
+/**
+ * 获取 useWangEditor 中传递的 provide 数据
+ * @param handle - 句柄
+ */
+export function useWeContent(handle) {
+    return (inject(handle) || {
+        cache: {},
+        opts: reactive(defaultOptions()),
+        instance: shallowReactive({
+            toolbar: null,
+            editable: null
+        }),
+        globalAttrs: useWeGlobalConfig('attrs'),
+        formFieldInit: useWeGlobalConfig('formFieldInit').value
+    });
+}
+//# sourceMappingURL=hooks.js.map

package/src/components/editor/src/wangeditor5-for-vue3/core/toolbar.js

@@ -0,0 +1,79 @@
+import { createToolbar } from '@wangeditor/editor';
+import { defineComponent, h, onBeforeUnmount, ref, toRaw, unref, watch } from 'vue';
+import { useWeContent } from './hooks';
+import { withInstall } from './utils';
+const Toolbar = defineComponent({
+    name: 'WeToolbar',
+    props: {
+        handle: {
+            type: Symbol,
+            required: true
+        }
+    },
+    emits: ['reload', 'reloaded'],
+    setup(props, { emit }) {
+        const rootRef = ref();
+        const { cache, opts, instance, globalAttrs } = useWeContent(props.handle);
+        /**
+         * 生成 reload/reloaded 事件传递的数据
+         */
+        function createEvent() {
+            return {
+                type: 'toolbar',
+                instance: instance.toolbar
+            };
+        }
+        /**
+         * 菜单栏销毁
+         * @param dispatch 是否需要触发 reload 事件，用于区分销毁前的重建和组件的销毁
+         * @return 是否需要触发 reloaded 事件
+         */
+        function destory(dispatch) {
+            if (!instance.toolbar)
+                return false;
+            dispatch && emit('reload', createEvent());
+            instance.toolbar.destroy();
+            instance.toolbar = null;
+            return true;
+        }
+        const toolbar = {
+            timer: null,
+            create() {
+                const selector = unref(rootRef);
+                if (!instance.editable || !selector)
+                    return;
+                // 是否需要触发 reloaded 事件
+                const dispatch = destory(true);
+                delete selector.dataset.wEToolbar;
+                instance.toolbar = createToolbar({
+                    selector,
+                    editor: instance.editable,
+                    ...toRaw(opts).toolbar
+                });
+                dispatch && emit('reloaded', createEvent());
+            },
+            throttle() {
+                if (toolbar.timer)
+                    clearTimeout(toolbar.timer);
+                if (cache.editable || cache.editable.timer)
+                    return;
+                toolbar.timer = setTimeout(() => {
+                    toolbar.timer = null;
+                    toolbar.create();
+                }, opts.reloadDelay);
+            }
+        };
+        watch(() => opts.toolbar, toolbar.throttle, { deep: true });
+        cache.toolbar = toolbar;
+        onBeforeUnmount(() => {
+            destory();
+            delete cache.toolbar;
+        });
+        return { rootRef, globalAttrs, instance };
+    },
+    render() {
+        return h('div', { ref: 'rootRef', ...this.globalAttrs.toolbar });
+    }
+});
+export const WeToolbar = withInstall(Toolbar);
+//# sourceMappingURL=toolbar.js.map

package/src/components/editor/src/wangeditor5-for-vue3/core/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/components/editor/src/wangeditor5-for-vue3/core/utils.js

@@ -0,0 +1,65 @@
+import deepClone from 'lodash.clonedeep';
+/**
+ * 类型判断
+ * @param tar 需要被判断类型的变量
+ * @param type 数据类型
+ */
+export function is(tar, type) {
+    return (Object.prototype.toString
+        .call(tar)
+        .replace(/(\[.+?\s|\])/g, '')
+        .toLowerCase() === type);
+}
+/**
+ * 给组件包装 install 函数
+ * @param component 组件
+ */
+export function withInstall(component) {
+    function install(app) {
+        app.component(component.name, component);
+    }
+    return Object.assign(component, { install });
+}
+/**
+ * 数据合并（深度合并）
+ * @param from 被合并的
+ * @param to 合并到
+ * @param compel 强制覆盖
+ */
+export function deepMerge(from, to, compel = false) {
+    for (let key in from) {
+        const value = from[key];
+        if (Reflect.has(to, key)) {
+            const oldValue = Reflect.get(to, key);
+            if (is(oldValue, 'object') && is(value, 'object')) {
+                deepMerge(value, oldValue, compel);
+                continue;
+            }
+            else if (!compel) {
+                continue;
+            }
+        }
+        Reflect.set(to, key, is(value, 'object') ? deepClone(value) : value);
+    }
+}
+/**
+ * 对 TypeScript 类型推导 Pick 的 JavaScript 实现
+ * @param data 数据源
+ * @param keys 被保留的键
+ */
+export function pick(data, keys) {
+    const temp = {};
+    keys.forEach((key) => Reflect.set(temp, key, data[key]));
+    return temp;
+}
+/**
+ * 对 TypeScript 类型推导 Omit 的 JavaScript 实现
+ * @param data 数据源
+ * @param keys 被剔除的键
+ */
+export function omit(data, keys) {
+    const temp = { ...data };
+    keys.forEach((key) => Reflect.deleteProperty(temp, key));
+    return temp;
+}
+//# sourceMappingURL=utils.js.map

package/src/components/editor/src/wangeditor5-for-vue3/index.js

@@ -0,0 +1,5 @@
+export { createWeGlobalConfig, useWangEditor, useWeContent, useWeGlobalConfig } from './core/hooks';
+export { WeEditor } from './core/editor';
+export { WeEditable } from './core/editable';
+export { WeToolbar } from './core/toolbar';
+//# sourceMappingURL=index.js.map

package/src/index.js

@@ -39,7 +39,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.10.34',
+    version: '1.10.36',
     install,
     Calendar,
     Message,