@ctzy-web-client/plugin-component-vue 1.0.25 → 1.0.27

package/es/data-form/form-components/bwa-rich-text-tinymce.mjs

@@ -1,570 +1,245 @@
-import { ref, getCurrentScope, computed, reactive, onMounted, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, createVNode, createBlock, Teleport, normalizeStyle, renderList, toDisplayString, createCommentVNode } from 'vue';
+import { defineComponent, ref, getCurrentScope, computed, reactive, onMounted, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, createVNode, createBlock, Teleport, normalizeStyle, renderList, toDisplayString, createCommentVNode } from 'vue';
 import { useNamespace, useService } from '@ctzy-web-client/web-base-client-vue';
 import TinyMCEEditor from '@tinymce/tinymce-vue';
 import 'quill/dist/quill.snow.css';
 import { Subject, Observable, map, filter, mergeMap, merge, from, delayWhen, timer, takeUntil, tap } from 'rxjs';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
 
+// Inject __name helper
+if (typeof __name === 'undefined') {
+  function __name(obj, name) {
+    Object.defineProperty(obj, "name", {
+      value: name,
+      configurable: true
+    });
+  }
+}
 const _hoisted_1 = ["onClick"];
-// import { useActiveElement } from '@vueuse/core';
-// import { filter, fromEvent } from 'rxjs';
-
-
-const _sfc_main = {
-  __name: 'bwa-rich-text-tinymce',
-  props: {
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: null,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-},
-  emits: ['update:modelValue'],
-  setup(__props, { emit }) {
-
-const props = __props;
-
-defineOptions({
-  name: 'BwaRichText',
-});
-
-
-
-let resolve = null;
-
-const setupPromise = new Promise((relv) => {
-  resolve = relv;
-});
-
-const initOptions = {
-  promotion: false,
-  language: 'zh-Hans',
-  setup: resolve,
-};
-
-// const DIGIAL_LETTER_REGEXP = /^[\da-z]/i;
-
-
-
-const ns = useNamespace('rich-text');
-
-const fileService = useService('FileService');
-
-/** @type {import('vue').Ref<HTMLElement>} */
-const editorRef = ref(null);
-const tinyMCEEditorRef = ref(null);
-
-// const editing = computed(() => {
-//   const element = unref(useActiveElement());
-
-//   if (!element.classList.contains('ql-editor')) {
-//     return false;
-//   }
-
-//   const el = unref(editorRef);
-
-//   return el?.contains(element) ?? false;
-// });
-
-const currentScope = getCurrentScope();
-
-// const toolbarOptions = [
-//   [{ header: [1, 2, 3, 4, 5, 6, false] }],
-//   [{ font: [] }],
-//   ['bold', 'italic', 'underline', 'strike'],
-//   [{ align: [] }],
-//   ['blockquote', 'code-block'],
-//   [{ header: 1 }, { header: 2 }],
-//   [{ list: 'ordered' }, { list: 'bullet' }],
-//   [{ script: 'sub' }, { script: 'super' }],
-//   [{ indent: '-1' }, { indent: '+1' }],
-//   [{ color: [] }, { background: [] }],
-//   ['clean'],
-// ];
-
-const value = computed({
-  get: () => props.modelValue || '',
-  set: (v) => {
-    emit('update:modelValue', v);
-  },
-});
-
-// const updateImage = async (file) => {
-//   if (!unref(fileService)) {
-//     return;
-//   }
-
-//   const uploadFileResult = await unref(fileService).uploadFile(file);
-
-//   if (uploadFileResult.code != 0) {
-//     return uploadFileResult;
-//   }
-
-//   const fileID = uploadFileResult.data.id;
-
-//   const filePathResult = await unref(fileService).getFilePath(fileID);
-
-//   if (filePathResult.code != 0) {
-//     return filePathResult;
-//   }
-
-//   return {
-//     ...filePathResult,
-//     data: { id: fileID, path: filePathResult.data },
-//   };
-// };
-
-const focusing = ref(false);
-
-const AT_REGEXP = /[^\da-zA-Z]@[^@]*$/;
-
-const atPersonInfos = reactive({
-  node: null,
-  content: '',
-  selection: null,
-  index: -1,
-  style: null,
-});
-
-const selectPersonSubject = new Subject();
-
-const handlePersonSelect = selectPersonSubject.next.bind(selectPersonSubject);
-
-// const handlePersonSelect = () => {
-//   if (!atPersonInfos.node) {
-//     return;
-//   }
-
-//   const { node, index, content } = atPersonInfos;
-
-//   const document = node.ownerDocument;
-
-//   const documentFragment = document.createDocumentFragment();
-
-//   if (index) {
-//     const textNode = document.createTextNode(node.data.slice(0, index));
-
-//     documentFragment.appendChild(textNode);
-//   }
-
-//   const span = document.createElement('span');
-//   span.innerText = content;
-
-//   documentFragment.appendChild(span);
-
-//   const contentEndIndex = index + content.length;
-//   if (contentEndIndex < node.data.length) {
-//     const textNode = document.createTextNode(node.data.slice(contentEndIndex));
-
-//     documentFragment.appendChild(textNode);
-//   }
-
-//   const parent = node.parentElement;
-
-//   parent.insertBefore(documentFragment, node);
-//   parent.removeChild(node);
-
-//   //   console.log(
-//   // documentFragment
-//   // atPersonInfos.node.data,
-//   // atPersonInfos.index,
-//   // atPersonInfos.content.length
-//   //   );
-
-//   //   atPersonInfos.node.data;
-// };
-
-window.atPersonInfos = atPersonInfos;
-
-onMounted(async () => {
-  const editor = await setupPromise;
-
-  window.editor = editor;
-
-  //   const focusObservable = new Observable((observer) => {
-  //     editor.on('focus', observer.next.bind(observer));
-
-  //     return () => {
-  //       editor.off('focus', observer.next.bind(observer));
-  //     };
-  //   });
-
-  //   const blurObservable = new Observable((observer) => {
-  //     editor.on('blur', observer.next.bind(observer));
-
-  //     return () => {
-  //       editor.off('blur', observer.next.bind(observer));
-  //     };
-  //   });
-
-  const inputObservable = new Observable((observer) => {
-    const next = observer.next.bind(observer);
-    editor.on('input', next);
-
-    return () => {
-      editor.off('input', next);
-    };
-  });
-
-  editor.on('change', (event) => {
-    console.log(event);
-  });
-
-  const getSelection = (event) => {
-    if (
-      typeof event.target.nodeType === 'number' &&
-      typeof event.target.tagName === 'string'
-    ) {
-      return event.target.ownerDocument.getSelection();
-    }
-
-    return event.target.iframeElement.contentDocument.getSelection();
-  };
-
-  const subject = new Subject();
-
-  inputObservable
-    .pipe(
-      map((event) => {
-        if (event.data !== '@') {
-          return null;
-        }
-
-        const selection = event.currentTarget.ownerDocument.getSelection();
-
-        const focusNode = selection.focusNode;
-
-        if (focusNode.nodeType !== Node.TEXT_NODE) {
-          return null;
-        }
-
-        const content = focusNode.data.slice(0, selection.focusOffset);
-
-        const match = content.match(AT_REGEXP);
-
-        if (!match) {
-          return null;
-        }
-
-        return {
-          event: event,
-          selection,
-          index: match[0].indexOf('@') + match.index,
-          node: focusNode,
-          content,
-          range: selection.getRangeAt(0),
-        };
-      }),
-      filter(Boolean),
-      mergeMap(({ event, index, node, content, range }) => {
-        const changeObservable = new Observable((observer) => {
-          const next = observer.next.bind(observer);
-          editor.on('change input undo redo', next);
-
-          return () => {
-            editor.off('change input undo redo', next);
-          };
-        });
-
-        return merge(from([event]), changeObservable).pipe(
-          delayWhen(() => timer(0)),
-          map((event) => {
-            const selection = getSelection(event);
-
-            const content = node.data.slice(index, selection.focusOffset);
-
-            console.log(content);
-
-            if (!content) {
-              subject.next();
-              return null;
-            }
-
-            return {
-              index,
-              node,
-              content,
-              range: selection.getRangeAt(0),
-            };
-          }),
-          filter(Boolean),
-          takeUntil(
-            merge(
-              inputObservable.pipe(filter((event) => event.data === '@')),
-              subject
-            ).pipe(
-              tap(() => {
-                atPersonInfos.node = null;
-                atPersonInfos.content = '';
-                atPersonInfos.selection = null;
-                atPersonInfos.index = -1;
-                atPersonInfos.style = null;
-              })
-            )
-          )
-        );
-      })
-    )
-    .subscribe(({ index, node, selection, content, range }) => {
-      const searchContent = content.slice(1);
-
-      const { x: offsetX, y: offsetY, height } = range.getBoundingClientRect();
-
-      const iframeElement = editor.iframeElement;
-      const { x: iframeX, y: iframeY } = iframeElement.getBoundingClientRect();
-
-      atPersonInfos.node = node;
-      atPersonInfos.content = content;
-      atPersonInfos.selection = selection;
-      atPersonInfos.index = index;
-      atPersonInfos.style = {
-        '--left': iframeX + offsetX + 'px',
-        '--top': iframeY + offsetY + height + 'px',
-      };
-    });
-
-  selectPersonSubject.subscribe(() => {
-    if (!atPersonInfos.node) {
-      return;
-    }
-
-    const { node, index, content } = atPersonInfos;
-
-    const document = node.ownerDocument;
-
-    const documentFragment = document.createDocumentFragment();
-
-    if (index) {
-      const textNode = document.createTextNode(node.data.slice(0, index));
-
-      documentFragment.appendChild(textNode);
-    }
-
-    const span = document.createElement('span');
-    span.innerText = content;
-
-    documentFragment.appendChild(span);
-
-    const contentEndIndex = index + content.length;
-    if (contentEndIndex < node.data.length) {
-      const textNode = document.createTextNode(
-        node.data.slice(contentEndIndex)
-      );
-
-      documentFragment.appendChild(textNode);
-    }
-
-    const parent = node.parentElement;
-
-    parent.insertBefore(documentFragment, node);
-    parent.removeChild(node);
-
-    subject.next();
-  });
-
-  //   editor.on('keydown', (event) => {ƒ
-
-  //   editor.on('focus', () => {
-  //     focusing.value = true;
-  //   });
-
-  //   editor.on('blur', () => {
-  //     focusing.value = false;
-  //   });
-
-  //   editor.on('input', (event) => {
-  //     if (event.data !== '@') {
-  //       return;
-  //     }
-
-  //     /** @type {Selection} */
-  //     const selection = event.target.ownerDocument.getSelection();
-
-  //     console.dir(selection.focusNode);
-
-  //     const focusNode = selection.focusNode;
-
-  //     if (focusNode.nodeType !== Node.TEXT_NODE) {
-  //       return;
-  //     }
-
-  //     const content = focusNode.data.slice(0, selection.focusOffset);
-
-  //     const match = content.match(AT_REGEXP);
-
-  //     if (!match) {
-  //       return;
-  //     }
-
-  //     const index = match.index;
-
-  //     const range = selection.getRangeAt(0);
-
-  //     const boundary = range.getBoundingClientRect();
-
-  //     console.log(boundary);
-  //   });
-
-  //   editor.on('SelectionChange', (...args) => {
-  //     console.log(...args);
-  //   });
-
-  //   const editor = new Quill(unref(editorRef), {
-  //     modules: { toolbar: toolbarOptions },
-  //     theme: 'snow',
-  //     placeholder: props.placeholder,
-  //   });
-
-  //   window.aaa = editor;
-
-  //   watch(
-  //     value,
-  //     (value) => {
-  //       if (editor.root.innerHTML !== value) {
-  //         editor.root.innerHTML = value;
-  //       }
-  //     },
-  //     { immediate: true }
-  //   );
-
-  //   watch(
-  //     computed(() => props.disabled),
-  //     (disabled) => {
-  //       editor.enable(!disabled);
-  //     },
-  //     { immediate: true }
-  //   );
-
-  //   const atPersonSubcription = fromEvent(document, 'keydown')
-  //     .pipe(
-  //       filter(() => unref(editing)),
-  //       filter((/** @type {KeyboardEvent}*/ e) => e.key === '@')
-  //     )
-  //     .subscribe((/** @type {KeyboardEvent}*/ e) => {
-  //       const selection = editor.getSelection();
-
-  //       if (selection.index > 1) {
-  //         const preChar = editor.getContents(
-  //           selection.index - 1,
-  //           selection.index
-  //         );
-
-  //         if (
-  //           preChar.ops.length === 1 &&
-  //           DIGIAL_LETTER_REGEXP.test(preChar.ops[0].insert)
-  //         ) {
-  //           return;
-  //         }
-  //       }
-
-  //       e.preventDefault();
-  //       e.stopPropagation();
-
-  //       console.log(editor.getContents());
-
-  //       //   atPersionInfo.value = {
-  //       //     startIndex: selection.index,
-  //       //     endIndex: selection.index + 1,
-  //       //   };
-  //     });
-
-  //   const handleTextChange = () => {
-  //     value.value = editor.root.innerHTML;
-  //   };
-
-  //   const handlePaste = (evt) => {
-  //     if (
-  //       evt.clipboardData &&
-  //       evt.clipboardData.files &&
-  //       evt.clipboardData.files.length
-  //     ) {
-  //       evt.preventDefault();
-  //       [].forEach.call(evt.clipboardData.files, async (file) => {
-  //         if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
-  //           const filePathResult = await updateImage(file);
-
-  //           if (filePathResult.code != 0) {
-  //             return;
-  //           }
-
-  //           const fileData = filePathResult.data;
-
-  //           var range = editor.getSelection();
-  //           if (range && fileData) {
-  //             //  在当前光标位置插入图�?
-  //             editor.insertEmbed(range.index, 'image', fileData.path);
-  //             editor.formatText(range.index, 1, {
-  //               alt: fileData.id,
-  //             });
-  //             //  将光标移动到图片后面
-  //             editor.setSelection(range.index + 1);
-  //           }
-  //         }
-  //       });
-  //     }
-  //   };
-
-  currentScope.run(() => {
-    // editor.on('text-change', handleTextChange);
-    // editor.root.addEventListener('paste', handlePaste);
-    // onScopeDispose(() => {
-    //   editor.off('text-change', handleTextChange);
-    //   editor.root.removeEventListener('paste', handlePaste);
-    //   atPersonSubcription.unsubscribe();
-    // });
-  });
-});
-
-return (_ctx, _cache) => {
-  return (openBlock(), createElementBlock(Fragment, null, [
-    createElementVNode("div", {
-      class: normalizeClass(unref(ns).b())
-    }, [
-      createElementVNode("div", {
-        class: normalizeClass(unref(ns).e('editor')),
-        ref_key: "editorRef",
-        ref: editorRef
-      }, [
-        createVNode(unref(TinyMCEEditor), {
-          init: initOptions,
-          disabled: __props.disabled,
-          tinymceScriptSrc: "/tinymce/tinymce.js",
-          ref_key: "tinyMCEEditorRef",
-          ref: tinyMCEEditorRef
-        }, null, 8 /* PROPS */, ["disabled"])
-      ], 2 /* CLASS */)
-    ], 2 /* CLASS */),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
-      createElementVNode("div", {
-        class: normalizeClass(unref(ns).e('at-list-wrapper'))
-      }, [
-        (atPersonInfos.style)
-          ? (openBlock(), createElementBlock("div", {
+const __default__ = defineComponent({
+  name: "BwaRichText"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    ;
+    const props = __props;
+    let resolve = null;
+    const setupPromise = new Promise((relv) => {
+      resolve = relv;
+    });
+    const initOptions = {
+      promotion: false,
+      language: "zh-Hans",
+      setup: resolve
+    };
+    const emit = __emit;
+    const ns = useNamespace("rich-text");
+    const fileService = useService("FileService");
+    const editorRef = ref(null);
+    const tinyMCEEditorRef = ref(null);
+    const currentScope = getCurrentScope();
+    const value = computed({
+      get: () => props.modelValue || "",
+      set: (v) => {
+        emit("update:modelValue", v);
+      }
+    });
+    const focusing = ref(false);
+    const AT_REGEXP = /[^\da-zA-Z]@[^@]*$/;
+    const atPersonInfos = reactive({
+      node: null,
+      content: "",
+      selection: null,
+      index: -1,
+      style: null
+    });
+    const selectPersonSubject = new Subject();
+    const handlePersonSelect = selectPersonSubject.next.bind(selectPersonSubject);
+    window.atPersonInfos = atPersonInfos;
+    onMounted(async () => {
+      const editor = await setupPromise;
+      window.editor = editor;
+      const inputObservable = new Observable((observer) => {
+        const next = observer.next.bind(observer);
+        editor.on("input", next);
+        return () => {
+          editor.off("input", next);
+        };
+      });
+      editor.on("change", (event) => {
+        console.log(event);
+      });
+      const getSelection = (event) => {
+        if (typeof event.target.nodeType === "number" && typeof event.target.tagName === "string") {
+          return event.target.ownerDocument.getSelection();
+        }
+        return event.target.iframeElement.contentDocument.getSelection();
+      };
+      const subject = new Subject();
+      inputObservable.pipe(
+        map((event) => {
+          if (event.data !== "@") {
+            return null;
+          }
+          const selection = event.currentTarget.ownerDocument.getSelection();
+          const focusNode = selection.focusNode;
+          if (focusNode.nodeType !== Node.TEXT_NODE) {
+            return null;
+          }
+          const content = focusNode.data.slice(0, selection.focusOffset);
+          const match = content.match(AT_REGEXP);
+          if (!match) {
+            return null;
+          }
+          return {
+            event,
+            selection,
+            index: match[0].indexOf("@") + match.index,
+            node: focusNode,
+            content,
+            range: selection.getRangeAt(0)
+          };
+        }),
+        filter(Boolean),
+        mergeMap(({ event, index, node, content, range }) => {
+          const changeObservable = new Observable((observer) => {
+            const next = observer.next.bind(observer);
+            editor.on("change input undo redo", next);
+            return () => {
+              editor.off("change input undo redo", next);
+            };
+          });
+          return merge(from([event]), changeObservable).pipe(
+            delayWhen(() => timer(0)),
+            map((event2) => {
+              const selection = getSelection(event2);
+              const content2 = node.data.slice(index, selection.focusOffset);
+              console.log(content2);
+              if (!content2) {
+                subject.next();
+                return null;
+              }
+              return {
+                index,
+                node,
+                content: content2,
+                range: selection.getRangeAt(0)
+              };
+            }),
+            filter(Boolean),
+            takeUntil(
+              merge(
+                inputObservable.pipe(filter((event2) => event2.data === "@")),
+                subject
+              ).pipe(
+                tap(() => {
+                  atPersonInfos.node = null;
+                  atPersonInfos.content = "";
+                  atPersonInfos.selection = null;
+                  atPersonInfos.index = -1;
+                  atPersonInfos.style = null;
+                })
+              )
+            )
+          );
+        })
+      ).subscribe(({ index, node, selection, content, range }) => {
+        const searchContent = content.slice(1);
+        const { x: offsetX, y: offsetY, height } = range.getBoundingClientRect();
+        const iframeElement = editor.iframeElement;
+        const { x: iframeX, y: iframeY } = iframeElement.getBoundingClientRect();
+        atPersonInfos.node = node;
+        atPersonInfos.content = content;
+        atPersonInfos.selection = selection;
+        atPersonInfos.index = index;
+        atPersonInfos.style = {
+          "--left": iframeX + offsetX + "px",
+          "--top": iframeY + offsetY + height + "px"
+        };
+      });
+      selectPersonSubject.subscribe(() => {
+        if (!atPersonInfos.node) {
+          return;
+        }
+        const { node, index, content } = atPersonInfos;
+        const document = node.ownerDocument;
+        const documentFragment = document.createDocumentFragment();
+        if (index) {
+          const textNode = document.createTextNode(node.data.slice(0, index));
+          documentFragment.appendChild(textNode);
+        }
+        const span = document.createElement("span");
+        span.innerText = content;
+        documentFragment.appendChild(span);
+        const contentEndIndex = index + content.length;
+        if (contentEndIndex < node.data.length) {
+          const textNode = document.createTextNode(
+            node.data.slice(contentEndIndex)
+          );
+          documentFragment.appendChild(textNode);
+        }
+        const parent = node.parentElement;
+        parent.insertBefore(documentFragment, node);
+        parent.removeChild(node);
+        subject.next();
+      });
+      currentScope.run(() => {
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).b())
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("editor")),
+            ref_key: "editorRef",
+            ref: editorRef
+          }, [
+            createVNode(unref(TinyMCEEditor), {
+              init: initOptions,
+              disabled: __props.disabled,
+              tinymceScriptSrc: "/tinymce/tinymce.js",
+              ref_key: "tinyMCEEditorRef",
+              ref: tinyMCEEditorRef
+            }, null, 8, ["disabled"])
+          ], 2)
+        ], 2),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("at-list-wrapper"))
+          }, [
+            atPersonInfos.style ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: normalizeClass(unref(ns).e('at-list')),
+              class: normalizeClass(unref(ns).e("at-list")),
               style: normalizeStyle(atPersonInfos.style)
             }, [
               (openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
                 return createElementVNode("div", {
                   key: i,
-                  onClick: $event => (unref(handlePersonSelect)(i))
-                }, " 用户" + toDisplayString(i), 9 /* TEXT, PROPS */, _hoisted_1)
-              }), 64 /* STABLE_FRAGMENT */))
-            ], 6 /* CLASS, STYLE */))
-          : createCommentVNode("v-if", true)
-      ], 2 /* CLASS */)
-    ]))
-  ], 64 /* STABLE_FRAGMENT */))
-}
-}
-
-};
-var bwaRichTextTinymce = /*#__PURE__*/_export_sfc(_sfc_main, [['__file',"bwa-rich-text-tinymce.vue"]]);
+                  onClick: ($event) => unref(handlePersonSelect)(i)
+                }, " \u7528\u6237" + toDisplayString(i), 9, _hoisted_1);
+              }), 64))
+            ], 6)) : createCommentVNode("v-if", true)
+          ], 2)
+        ]))
+      ], 64);
+    };
+  }
+});
+var bwaRichTextTinymce = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bwa-rich-text-tinymce.vue"]]);
 
 export { bwaRichTextTinymce as default };