adtec-core-package 2.9.9 → 3.0.1

package/src/components/editor-main/src/extensions/type-writer.js

@@ -0,0 +1,256 @@
+import { Extension } from '@tiptap/core'
+import { ref } from 'vue'
+
+const typewriterState = ref({
+  isRunning: false,
+  currentParagraph: 0,
+  currentTextNode: 0,
+  currentChar: 0,
+})
+
+let typewriterTimer = null
+let typewriterProgress = {
+  totalChars: 0,
+  typedChars: 0,
+}
+
+// 计算总字符数用于进度跟踪
+const calculateTotalChars = (content) => {
+  return content.reduce((total, node) => {
+    if (node.type === 'paragraph' && node.content) {
+      return node.content.reduce((paraTotal, textNode) => {
+        return (
+          paraTotal + (textNode.type === 'text' ? textNode.text?.length : 0)
+        )
+      }, total)
+    }
+    return total
+  }, 0)
+}
+
+export default Extension.create({
+  name: 'typewriter',
+  addCommands() {
+    return {
+      startTypewriter:
+        (content, options) =>
+        ({ editor, commands }) => {
+          // 立即返回 true 表示命令开始执行
+
+          ;(async () => {
+            try {
+              // 清除现有计时器
+              if (typewriterTimer) {
+                clearTimeout(typewriterTimer)
+                typewriterTimer = null
+              }
+
+              // 重置状态
+              typewriterState.value = {
+                isRunning: true,
+                currentParagraph: 0,
+                currentTextNode: 0,
+                currentChar: 0,
+              }
+
+              // 计算总字符数
+              typewriterProgress = {
+                totalChars: calculateTotalChars(content?.content),
+                typedChars: 0,
+              }
+              const focusState =
+                options?.focus === null ? null : options?.focus || 'end'
+              // 插入内容
+              const typeWriterInsertContent = async (curContent) => {
+                await new Promise((resolve) => {
+                  setTimeout(() => {
+                    try {
+                      editor
+                        .chain()
+                        .insertContent(curContent)
+                        .focus(focusState)
+                        .run()
+                    } catch (e) {}
+                    resolve()
+                  }, 0)
+                })
+              }
+              // 取非负数
+              const speed = Math.max(options?.speed || 1, 0)
+
+              const isEmptyParagraph = (node) => {
+                return (
+                  node?.type === 'paragraph' &&
+                  (!node.content ||
+                    node.content.length === 0 ||
+                    (node.content.length === 1 &&
+                      node.content[0].type === 'text' &&
+                      !node.content[0].text))
+                )
+              }
+              // 处理内容
+              const processNode = async (
+                node,
+                index,
+                nodes,
+                isTopLevel = false,
+              ) => {
+                let resultIndex = 0
+                if (node.type === 'paragraph') {
+                  if (isEmptyParagraph(node)) {
+                    const ParagraphNodes = [node]
+                    for (
+                      let paragraphIndex = index + 1;
+                      paragraphIndex < nodes.length;
+                      paragraphIndex++
+                    ) {
+                      if (isEmptyParagraph(nodes[paragraphIndex])) {
+                        ParagraphNodes.push(nodes[paragraphIndex])
+                        resultIndex++
+                        typewriterState.value.currentParagraph++
+                      } else {
+                        break
+                      }
+                    }
+                    await typeWriterInsertContent(ParagraphNodes)
+                    typewriterState.value.currentParagraph++
+                  } else {
+                    // 当前为段落时 插入段落样式
+                    await typeWriterInsertContent([
+                      { type: 'paragraph', attrs: node.attrs },
+                    ])
+                    // 处理段落内容
+                    if (node.content && node.content.length > 0) {
+                      for (
+                        let childIndex = 0;
+                        childIndex < node.content.length;
+                        childIndex++
+                      ) {
+                        typewriterState.value.currentTextNode = childIndex
+                        const childNode = node.content[childIndex]
+                        const childResultIndex = await processNode(
+                          childNode,
+                          childIndex,
+                          node.content,
+                          false,
+                        )
+                        childIndex = childIndex + (childResultIndex || 0)
+                      }
+                    } else {
+                      editor.commands.enter()
+                    }
+                    typewriterState.value.currentParagraph++
+                  }
+                } else if (node.type === 'text') {
+                  // 处理文本节点
+                  const text = node.text || ''
+                  const marks = node.marks || []
+                  const step = options?.step || 1
+                  for (let i = 0; i < text.length; i += step) {
+                    if (!typewriterState.value.isRunning) return // 检查是否被停止
+                    const endIndex = Math.min(i + step, text.length)
+                    const currentText = text.slice(i, endIndex)
+                    await new Promise((resolve) => {
+                      typewriterTimer = setTimeout(async () => {
+                        // 插入当前字符
+                        await typeWriterInsertContent([
+                          {
+                            type: 'text',
+                            text: currentText,
+                            marks,
+                          },
+                        ])
+
+                        typewriterState.value.currentChar =
+                          i + currentText.length - 1
+                        typewriterProgress.typedChars += currentText.length
+
+                        // 更新进度回调
+                        if (
+                          options?.onProgress &&
+                          typewriterProgress.totalChars > 0
+                        ) {
+                          options.onProgress(
+                            typewriterProgress.typedChars /
+                              typewriterProgress.totalChars,
+                          )
+                        }
+
+                        resolve()
+                      }, speed)
+                    })
+                  }
+                } else if (node.type === 'table') {
+                  const tableNodes = [node]
+                  for (
+                    let tableIndex = index + 1;
+                    tableIndex < nodes.length;
+                    tableIndex++
+                  ) {
+                    if (isEmptyParagraph(nodes[tableIndex])) {
+                      tableNodes.push(nodes[tableIndex])
+                      resultIndex++
+                    } else {
+                      break
+                    }
+                  }
+                  if (tableNodes.length === 1) {
+                    tableNodes.push({ type: 'paragraph' })
+                  }
+                  await typeWriterInsertContent(tableNodes)
+                  editor.commands.enter()
+                } else {
+                  if (isTopLevel) {
+                    await typeWriterInsertContent([node, { type: 'paragraph' }])
+                  } else {
+                    await typeWriterInsertContent([node])
+                  }
+                }
+                return resultIndex
+              }
+              // // 结束当前事务（确保之前的修改已应用）
+              // editor.view.dispatch(editor.state.tr) // 应用一个空事务来确保状态更新
+              // 处理所有顶级节点
+              const contentNodes = content?.content
+              for (let i = 0; i < contentNodes.length; i++) {
+                if (!typewriterState.value.isRunning) break
+                const resultIndex = await processNode(
+                  contentNodes[i],
+                  i,
+                  contentNodes,
+                  true,
+                )
+                i = i + resultIndex
+              }
+              // 完成回调
+              if (typewriterState.value.isRunning && options?.onComplete) {
+                options.onComplete()
+              }
+              typewriterState.value.isRunning = false
+            } catch (e) {}
+          })()
+          return true
+        },
+
+      stopTypewriter: () => () => {
+        typewriterState.value.isRunning = false
+        if (typewriterTimer) {
+          clearTimeout(typewriterTimer)
+          typewriterTimer = null
+        }
+        return true
+      },
+
+      getTypewriterState: () => {
+        return {
+          isRunning: typewriterState.value.isRunning,
+          currentParagraph: typewriterState.value.currentParagraph,
+          currentTextNode: typewriterState.value.currentTextNode,
+          currentChar: typewriterState.value.currentChar,
+        }
+      },
+    }
+  },
+})
+
+export const getTypewriterRunState = () => typewriterState.value.isRunning

package/src/components/editor-main/src/extensions/video/index.js

@@ -0,0 +1,65 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'video',
+  group: 'block',
+  atom: true,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+      file: {
+        default: null,
+      },
+      id: {
+        default: null,
+      },
+      name: {
+        default: null,
+      },
+      size: {
+        default: null,
+      },
+      src: {
+        default: null,
+      },
+      width: {
+        default: null,
+      },
+      height: {
+        default: 200,
+      },
+      uploaded: {
+        default: false,
+      },
+      previewType: {
+        default: 'video',
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'video' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['video', mergeAttributes(HTMLAttributes)]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setVideo:
+        (options) =>
+        ({ commands, editor }) => {
+          return commands.insertContentAt(editor.state.selection.anchor, {
+            type: this.name,
+            attrs: options,
+          })
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/video/node-view.vue

@@ -0,0 +1,211 @@
+<template>
+  <node-view-wrapper
+    :id="attrs.id"
+    ref="containerRef"
+    class="umo-node-view"
+    :style="nodeStyle"
+    @click.capture="editor?.commands.setNodeSelection(getPos())"
+  >
+    <div
+      class="umo-node-container umo-node-video"
+      :class="{
+        'umo-hover-shadow': !options.document?.readOnly,
+      }"
+    >
+      <drager
+        :selected="selected"
+        :rotatable="false"
+        :boundary="false"
+        :width="Number(attrs.width)"
+        :height="Number(attrs.height)"
+        :min-width="300"
+        :min-height="200"
+        :max-width="maxWidth"
+        :max-height="maxHeight"
+        :equal-proportion="true"
+        :disabled="options.document?.readOnly"
+        @resize="onResize"
+        @focus="selected = true"
+      >
+        <video
+          v-show="playerShow"
+          ref="videoRef"
+          :src="attrs.src"
+          preload="metadata"
+          controls
+          crossorigin="anonymous"
+          @canplay="onLoad"
+        ></video>
+        <div
+          v-if="!attrs.uploaded && attrs.id !== null"
+          class="uploading"
+        ></div>
+      </drager>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>import { computed as _computed, ref as _ref } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import Drager from 'es-drager'
+
+import { player } from '../../utils/player'
+
+import { updateAttributesWithoutHistory } from '../file'
+
+
+import { inject, ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes, getPos } = props
+const options = inject('options')
+const editor = inject('editor')
+const container = inject('container')
+const uploadFileMap = inject('uploadFileMap')
+
+const containerRef = ref(null)
+let selected = _ref(false)
+const videoRef = _ref(null)
+let playerInstance = _ref(null)
+let playerShow = _ref(false)
+let maxWidth = _ref(0)
+let maxHeight = _ref(0)
+
+const nodeStyle = _computed(() => {
+  const { nodeAlign, margin } = attrs.value
+  const marginTop =
+    margin?.top && margin?.top !== '' ? `${margin.top}px` : undefined
+  const marginBottom =
+    margin?.bottom && margin?.bottom !== '' ? `${margin.bottom}px` : undefined
+  return {
+    'justify-content': nodeAlign,
+    marginTop,
+    marginBottom,
+  }
+})
+
+onMounted(async () => {
+  await nextTick()
+  playerInstance.value = await player(videoRef.value, options.value.cdnUrl)
+  playerInstance.value.on('ready', () => (playerShow.value = true))
+  if (attrs.value.uploaded || !attrs.value.id) {
+    return
+  }
+  if (uploadFileMap.value.has(attrs.value.id)) {
+    try {
+      const file = uploadFileMap.value.get(attrs.value.id)
+      const result = await options.value?.onFileUpload?.(file)
+      const { id, url } = result
+      if (containerRef.value) {
+        updateAttributesWithoutHistory(
+          editor.value,
+          { id, src: url, uploaded: true },
+          getPos(),
+        )
+      }
+      uploadFileMap.value.delete(attrs.value.id)
+    } catch (e) {
+      useMessage('error', { attach: container, content: e.message })
+    }
+  }
+})
+const onLoad = () => {
+  if (attrs.value.width === null) {
+    const { clientWidth = 0, clientHeight = 0 } = videoRef.value
+    maxWidth.value = containerRef.value?.$el.clientWidth
+    const ratio = clientWidth / clientHeight
+    maxHeight.value = containerRef.value?.$el.clientWidth / ratio
+    updateAttributes({
+      width: (200 * ratio).toFixed(2),
+    })
+    setTimeout(() => {
+      updateAttributes({
+        height: containerRef.value?.$el.clientHeight,
+      })
+    }, 200)
+  }
+}
+const onResize = ({ width, height }) => {
+  updateAttributes({ width, height })
+}
+
+onBeforeUnmount(() => {
+  playerInstance.value?.destroy?.()
+  setTimeout(() => {
+    if (editor.value.isDestroyed) return
+    options.value.onFileDelete(attrs.value.id, attrs.value.src, `image:${attrs.value.type}`)
+  }, 500)
+})
+
+onClickOutside(containerRef, () => {
+  selected.value = false
+})
+</script>
+
+<style lang="less">
+.umo-node-view {
+  .umo-node-video {
+    max-width: 100%;
+    pointer-events: none;
+    border-radius: var(--umo-radius);
+
+    .es-drager {
+      max-width: 100%;
+      max-height: 100%;
+      .es-drager-dot {
+        pointer-events: auto;
+      }
+
+      .plyr {
+        height: 100%;
+      }
+
+      video {
+        display: block;
+        border-radius: var(--umo-radius);
+        overflow: hidden;
+        pointer-events: auto;
+        outline: none;
+        max-width: 100%;
+        max-height: 100%;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .plyr {
+      pointer-events: auto;
+    }
+
+    .uploading {
+      position: absolute;
+      right: 0;
+      top: 0;
+      background: rgba(255, 255, 255, 0.7);
+      height: 2px;
+      left: 0;
+      border-top-left-radius: var(--umo-radius);
+      border-top-right-radius: var(--umo-radius);
+
+      &:after {
+        content: '';
+        display: block;
+        height: 100%;
+        background-color: var(--umo-primary-color);
+        animation: progress 1s linear infinite;
+      }
+    }
+  }
+}
+
+@keyframes progress {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/word-wrap.js

@@ -0,0 +1,94 @@
+import { Extension } from '@tiptap/core'
+import { NodeSelection } from '@tiptap/pm/state'
+
+const buildStyle = (mode) => {
+  switch (mode) {
+    case 'break-all':
+      return 'word-break: break-all;'
+    case 'break-word':
+      return 'word-break: break-word;'
+    case 'normal':
+    default:
+      return 'word-break: normal;'
+  }
+}
+
+export default Extension.create({
+  name: 'wordWrap',
+  addOptions() {
+    return {
+      types: ['paragraph', 'heading'],
+    }
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          wordWrap: {
+            default: 'normal',
+            parseHTML: (element) => {
+              return (
+                element.style.wordWrap ||
+                element.getAttribute('data-word-wrap') ||
+                'normal'
+              )
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.wordWrap || attributes.wordWrap === 'normal') {
+                return {}
+              }
+              return {
+                'data-word-wrap': attributes.wordWrap,
+                style: buildStyle(attributes.wordWrap),
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+  addCommands() {
+    return {
+      setWordWrap:
+        (mode) =>
+        ({ state, commands }) => {
+          const { selection } = state
+          if (selection instanceof NodeSelection) {
+            return commands.updateAttributes(selection.node.type.name, {
+              wordWrap: mode,
+            })
+          }
+          return this.options.types.some((type) =>
+            commands.updateAttributes(type, {
+              wordWrap: mode,
+            }),
+          )
+        },
+      unsetWordWrap:
+        () =>
+        ({ commands }) => {
+          return this.options.types.some((type) =>
+            commands.updateAttributes(type, {
+              wordWrap: 'normal',
+            }),
+          )
+        },
+      canSetWordWrap:
+        () =>
+        ({ state }) => {
+          const { from, to } = state.selection
+          let canSet = false
+
+          state.doc.nodesBetween(from, to, (node) => {
+            if (this.options.types.includes(node.type.name)) {
+              canSet = true
+              return false
+            }
+          })
+
+          return canSet
+        },
+    }
+  },
+})

package/src/components/editor-main/src/i18n.js

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+
+import en_US from './locales/en-US.json'
+import zh_CN from './locales/zh-CN.json'
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  defaultLocale: 'zh-CN',
+  warnHtmlMessage: false,
+  messages: {
+    'en-US': en_US,
+    'zh-CN': zh_CN,
+  },
+})