@ctzy-web-client/plugin-component-vue 1.0.22 → 1.0.24

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, getCurrentScope, computed, reactive, onMounted, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, unref, createVNode, createBlock, Teleport, normalizeStyle, renderList, toDisplayString, createCommentVNode } from 'vue';
+import { 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';
@@ -6,229 +6,565 @@ import { Subject, Observable, map, filter, mergeMap, merge, from, delayWhen, tim
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
 
 const _hoisted_1 = ["onClick"];
-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"],
+// 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;
-    let resolve = null;
-    const setupPromise = new Promise((relv) => {
-      resolve = relv;
-    });
-    const initOptions = {
-      promotion: false,
-      language: "zh-Hans",
-      setup: resolve
-    };
-    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", {
+
+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", {
               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)
-                }, " \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"]]);
+                  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"]]);
 
 export { bwaRichTextTinymce as default };