adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,19 @@
+import { isRecord } from '@tool-belt/type-predicates'
+
+import { i18n } from '../i18n'
+
+const { global } = i18n
+
+export const { t } = global
+
+export const l = (data) => {
+  if (typeof data === 'string') {
+    return data
+  }
+
+  if (isRecord(data)) {
+    return data[global.locale.value.replace('-', '_')]
+  }
+}
+
+export const useI18n = () => global

package/src/components/editor-main/src/composables/popup.js

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+
+export const usePopup = () => {
+  const popupVisible = ref(false)
+
+  const togglePopup = (visible) => {
+    popupVisible.value = visible ?? !popupVisible.value
+  }
+
+  return { popupVisible, togglePopup }
+}

package/src/components/editor-main/src/composables/select.js

@@ -0,0 +1,13 @@
+// 为解决 tdesign-vue-next select 组件的自身 Bug，采用延时渲染来避免
+
+import { onMounted, ref } from 'vue'
+
+export const useSelect = () => {
+  const selectVisible = ref(false)
+
+  onMounted(() => {
+    selectVisible.value = true
+  })
+
+  return { selectVisible }
+}

package/src/components/editor-main/src/composables/state.js

@@ -0,0 +1,30 @@
+export function useState(key, editorOptions) {
+  const storageKey = `umo-editor:${editorOptions?.value?.editorKey || 'default'}:${key}`
+
+  if (key === 'document') {
+    return useStorage(storageKey, editorOptions?.value?.document)
+  }
+  if (key === 'recent') {
+    return useStorage(storageKey, {
+      fonts: [],
+      colors: [],
+      downloadedFonts: [],
+    })
+  }
+  if (key === 'toolbar') {
+    return useStorage(storageKey, {
+      mode: editorOptions?.value?.toolbar?.defaultMode || 'classic',
+      show: true,
+    })
+  }
+  if (key === 'theme') {
+    return useStorage(storageKey, 'light')
+  }
+  if (key === 'skin') {
+    return useStorage(storageKey, 'default')
+  }
+  if (key === 'layout') {
+    return useStorage(storageKey, 'page')
+  }
+  throw new Error('[useStorage]', { cause: 'Key is not valid' })
+}

package/src/components/editor-main/src/composables/toolbarSelection.js

@@ -0,0 +1,68 @@
+/** 工具栏 t-select 等抢焦点时缓存的非空文本选区 */
+let cachedRange = null
+/** 当前 t-select 弹层会话内快照（打开下拉时锁定，避免误恢复旧选区） */
+let pendingSelectRange = null
+
+export function cacheEditorTextSelection(editor) {
+  if (!editor?.state) return
+  const { from, to, empty } = editor.state.selection
+  if (empty || from === to) return
+  cachedRange = { from, to }
+}
+
+/** 用户拖选新文字时同步缓存，避免仍作用于上一次选区 */
+export function syncCacheOnEditorSelectionUpdate(editor) {
+  if (!editor?.state) return
+  const { from, to, empty } = editor.state.selection
+  if (!empty && from !== to) {
+    cachedRange = { from, to }
+  }
+}
+
+export function beginSelectMenuInteraction(editor) {
+  if (!editor?.state) {
+    pendingSelectRange = cachedRange ? { ...cachedRange } : null
+    return
+  }
+  const { from, to, empty } = editor.state.selection
+  if (!empty && from !== to) {
+    pendingSelectRange = { from, to }
+    cachedRange = { from, to }
+  } else if (cachedRange) {
+    pendingSelectRange = { ...cachedRange }
+  } else {
+    pendingSelectRange = null
+  }
+}
+
+export function endSelectMenuInteraction() {
+  pendingSelectRange = null
+}
+
+function applyTextRange(editor, range) {
+  if (!editor?.state || !range) return false
+  const docSize = editor.state.doc.content.size
+  const from = Math.max(0, Math.min(range.from, docSize))
+  const to = Math.max(from, Math.min(range.to, docSize))
+  if (to <= from) return false
+  editor.chain().focus().setTextSelection({ from, to }).run()
+  return true
+}
+
+export function restorePendingSelectMenuRange(editor) {
+  return applyTextRange(editor, pendingSelectRange)
+}
+
+export function applyCachedTextSelection(editor) {
+  if (restorePendingSelectMenuRange(editor)) return true
+  return applyTextRange(editor, cachedRange)
+}
+
+/** mark 应用后刷新缓存，便于对同一选区连续改字号 */
+export function refreshCachedTextSelection(editor) {
+  if (!editor?.state) return
+  const { from, to, empty } = editor.state.selection
+  if (!empty && from !== to) {
+    cachedRange = { from, to }
+  }
+}

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

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

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

@@ -0,0 +1,141 @@
+<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-hover-shadow umo-select-outline umo-node-audio"
+    >
+      <audio
+        v-show="playerShow"
+        ref="audioRef"
+        :src="attrs.src"
+        controls
+        crossorigin="anonymous"
+        preload="metadata"
+      ></audio>
+      <div v-if="!attrs.uploaded && attrs.id !== null" class="uploading"></div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>import { computed as _computed, ref as _ref } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+import { player } from '../../utils/player'
+
+import { updateAttributesWithoutHistory } from '../file'
+
+
+import { inject, ref, onMounted, onBeforeUnmount } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { getPos } = props
+const options = inject('options')
+const editor = inject('editor')
+const uploadFileMap = inject('uploadFileMap')
+
+const containerRef = ref(null)
+const audioRef = _ref(null)
+let playerInstance = _ref(null)
+let playerShow = _ref(false)
+let selected = _ref(false)
+
+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 () => {
+  playerInstance.value = await player(audioRef.value, options.value.cdnUrl)
+  playerInstance.value.on('ready', () => (playerShow.value = true))
+  if (attrs.value.uploaded || !attrs.value.id) {
+    return
+  }
+  try {
+    if (uploadFileMap.value.has(attrs.value.id)) {
+      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 (error) {
+    useMessage('error', error.message)
+  }
+})
+
+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-audio {
+    max-width: 100%;
+    width: 360px;
+    position: relative;
+    display: flex;
+    border-radius: var(--umo-radius);
+    outline: solid 1px var(--umo-content-node-border);
+    audio {
+      width: 100%;
+      outline: none;
+    }
+    .uploading {
+      position: absolute;
+      z-index: 10;
+      right: 0;
+      top: 0;
+      background: rgba(0, 0, 0, 0.2);
+      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/bookmark.js

@@ -0,0 +1,110 @@
+import { Mark, mergeAttributes } from '@tiptap/core'
+import { TextSelection } from '@tiptap/pm/state'
+
+import { shortId } from '../utils/short-id'
+
+// 书签格式 创建一个书签
+export default Mark.create({
+  name: 'bookmark',
+  priority: 1000,
+  keepOnSplit: false,
+  exitable: true,
+  addOptions() {
+    return {
+      bookmarkName: '',
+      class: 'umo-editor-bookmark',
+    }
+  },
+  addAttributes() {
+    return {
+      bookmarkName: {
+        default: 'bookmarkName',
+      },
+      class: {
+        default: this.options.class,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'bookmark',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['bookmark', mergeAttributes(this.options, HTMLAttributes), 0]
+  },
+
+  addCommands() {
+    return {
+      // 设置书签 若书签有选中区域数据 否则默认值为书签名称
+      setBookmark:
+        (attributes) =>
+        ({ chain, editor }) => {
+          try {
+            chain().setMark(this.name, attributes).run()
+            const { empty } = editor.state.selection
+            if (empty && attributes.bookmarkName) {
+              chain().focus().insertContent(attributes.bookmarkName).run()
+            }
+            return true
+          } catch (e) {
+            return false
+          }
+        },
+      focusBookmark:
+        (bookmarkName) =>
+        ({ editor, tr }) => {
+          if (bookmarkName) {
+            const element = editor.view.dom.querySelector(
+              `bookmark[bookmarkName="${bookmarkName}"]`,
+            )
+            if (element) {
+              element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+                inline: 'nearest',
+              })
+              const pos = editor.view.posAtDOM(element, 0)
+              if (tr) {
+                tr.setSelection(new TextSelection(tr.doc.resolve(pos)))
+                editor.view.dispatch(tr)
+                editor.view.focus()
+              }
+            }
+            return true
+          } else return false
+        },
+      getAllBookmarks:
+        (callback) =>
+        ({ editor }) => {
+          const bookmarkData = []
+          try {
+            const alltext = editor.getHTML()
+            const parser = new DOMParser()
+            const doc = parser.parseFromString(alltext, 'text/html')
+            // 获取所有的 <bookmark> 元素
+            const bookmarks = doc.body.querySelectorAll(this.name)
+            const keyNode = []
+            Array.from(bookmarks).forEach((node) => {
+              if (node !== null) {
+                const bookName = node.getAttribute('bookmarkName')
+                if (bookName && !keyNode.includes(bookName)) {
+                  keyNode.push(bookName)
+                  bookmarkData.push({
+                    bookmarkRowId: shortId(),
+                    bookmarkRowName: bookName,
+                  })
+                }
+              }
+            })
+          } catch (e) {}
+          callback(bookmarkData)
+          return true
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/break-marks.js

@@ -0,0 +1,19 @@
+import { InvisibleNode } from '@tiptap/extension-invisible-characters'
+import InvisibleCharacters, {
+  HardBreakNode,
+  ParagraphNode,
+} from '@tiptap/extension-invisible-characters'
+
+class HeadingNode extends InvisibleNode {
+  constructor() {
+    super({
+      type: 'paragraph',
+      predicate: (node) => ['heading'].includes(node.type.name),
+    })
+  }
+}
+
+export default InvisibleCharacters.configure({
+  injectCSS: false,
+  builders: [new HardBreakNode(), new ParagraphNode(), new HeadingNode()],
+})

package/src/components/editor-main/src/extensions/bullet-list.js

@@ -0,0 +1,21 @@
+import { BulletList } from '@tiptap/extension-list'
+
+export default BulletList.extend({
+  content: 'listItem*',
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      listType: {
+        default: 'disc',
+        parseHTML: (element) =>
+          element.style.getPropertyValue('list-style-type') || 'disc',
+        renderHTML: ({ listType }) => {
+          return {
+            style: `list-style-type: ${listType}`,
+            'data-type': listType,
+          }
+        },
+      },
+    }
+  },
+})

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

@@ -0,0 +1,128 @@
+import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'callout',
+  group: 'block',
+  content: 'paragraph+',
+  defining: true,
+  exitable: true,
+  selectable: false,
+  addAttributes() {
+    return {
+      type: { default: 'primary' },
+      icon: {
+        default: '⭐️',
+      },
+      backgroundColor: { default: 'rgb(217, 231, 255)' },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="callout"]',
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(HTMLAttributes, { 'data-type': 'callout' }),
+      0,
+    ]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      insertCallout:
+        (options) =>
+        ({ chain, editor, tr, dispatch }) => {
+          const { selection, schema } = editor.state
+          const hasSelection = !selection.empty
+
+          if (hasSelection) {
+            const selectedSlice = selection.content()
+            let calloutContent = selectedSlice.content
+
+            // 当选区不是合法的块级内容时，降级为纯文本段落，避免结构校验失败
+            if (!this.type.validContent(calloutContent)) {
+              const selectedText = editor.state.doc.textBetween(
+                selection.from,
+                selection.to,
+                '\n',
+              )
+              calloutContent = schema.nodes.paragraph.create(
+                null,
+                selectedText ? schema.text(selectedText) : null,
+              ).content
+            }
+
+            const calloutNode = this.type.create(options, calloutContent)
+            tr.replaceSelectionWith(calloutNode, false).scrollIntoView()
+            if (dispatch) {
+              dispatch(tr)
+            }
+            return true
+          }
+
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: options,
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            })
+            .run()
+        },
+    }
+  },
+  addInputRules() {
+    return [
+      wrappingInputRule({
+        find: /^:::callout $/,
+        type: this.type,
+        getAttributes: (match) => {
+          return { type: match[1] }
+        },
+      }),
+    ]
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => {
+        const { state, view } = editor
+        const { dispatch } = view
+        const { selection } = state
+        const { $from } = selection
+        const node = $from.node(-1) // 获取 `callout` 节点
+
+        if (node?.type.name === 'callout') {
+          if (node.content.size <= 2) {
+            const pos = selection.from + 1 // 计算新段落插入的位置
+            // 创建新的 `paragraph` 并插入
+            const tr = state.tr.insert(
+              pos,
+              state.schema.nodes.paragraph.create(),
+            )
+            // 将光标移动到新段落
+            tr.setSelection(
+              state.selection.constructor.near(tr.doc.resolve(pos)),
+            )
+            dispatch(tr)
+            return true
+          }
+        }
+
+        return false
+      },
+    }
+  },
+})