@ctzy-web-client/plugin-component-vue 1.0.0

package/src/data-form/form-components/bwa-rich-text-tinymce.vue

@@ -0,0 +1,561 @@
+<template>
+  <div :class="ns.b()">
+    <div :class="ns.e('editor')" ref="editorRef">
+      <TinyMCEEditor
+        :init="initOptions"
+        :disabled="disabled"
+        tinymceScriptSrc="/tinymce/tinymce.js"
+        ref="tinyMCEEditorRef"
+      />
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <div :class="ns.e('at-list-wrapper')">
+      <div
+        v-if="atPersonInfos.style"
+        :class="ns.e('at-list')"
+        :style="atPersonInfos.style"
+      >
+        <div v-for="i in 4" :key="i" @click="handlePersonSelect(i)">
+          用户{{ i }}
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  ref,
+  unref,
+  watch,
+  computed,
+  getCurrentScope,
+  onScopeDispose,
+  onMounted,
+  reactive,
+} from 'vue';
+import { useNamespace, useService } from 'web-base-client-vue';
+import TinyMCEEditor from '@tinymce/tinymce-vue';
+// import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+import {
+  Observable,
+  Subject,
+  delayWhen,
+  filter,
+  from,
+  map,
+  merge,
+  mergeMap,
+  takeUntil,
+  tap,
+  timer,
+} from 'rxjs';
+// import { useActiveElement } from '@vueuse/core';
+// import { filter, fromEvent } from 'rxjs';
+
+defineOptions({
+  name: 'BwaRichText',
+});
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+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 emit = defineEmits(['update:modelValue']);
+
+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();
+    // });
+  });
+});
+</script>