adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/extensions/option-box/index.js

@@ -0,0 +1,77 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'optionBox',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return {
+      target: {
+        default: 'checkbox', // 'checkbox' 或 'radio'
+      },
+      items: {
+        default: [],
+        parseHTML: (element) => {
+          const _data = element.hasAttribute('items')
+            ? element.getAttribute('items')
+            : null
+          return _data ? JSON.parse(_data) : null
+        },
+        renderHTML: (attributes) => ({
+          // 在渲染 HTML 时，确保 items 被序列化为字符串
+          items: attributes.items ? JSON.stringify(attributes.items) : null,
+        }),
+      },
+      checkAll: {
+        default: false,
+      },
+      checked: {
+        default: true,
+      },
+      updated: {
+        default: false,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[data-type="option-box"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const showText = HTMLAttributes['items'] || ''
+
+    return [
+      'span',
+      mergeAttributes(HTMLAttributes, { 'data-type': 'option-box' }),
+      showText,
+    ]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      insertOptionBox:
+        (options) =>
+        ({ chain, editor }) => {
+          const { to } = editor?.state?.selection || {}
+          return chain()
+            .insertContentAt(to - 1, {
+              type: this.name,
+              attrs: options,
+            })
+            .run()
+        },
+      updateOptionBox:
+        (options) =>
+        ({ commands }) => {
+          return commands.updateAttributes(this.name, options)
+        },
+    }
+  },
+})

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

@@ -0,0 +1,194 @@
+<template>
+  <node-view-wrapper
+    as="span"
+    class="umo-node-option-box"
+    @click.capture="editor?.commands.setNodeSelection(getPos())"
+  >
+    <span
+      v-if="attrs.target === 'radio'"
+      class="umo-option-box-radio-container"
+    >
+      <span
+        v-for="(box, index) in attrs.items"
+        :key="box.key"
+        class="option-item"
+      >
+        <t-radio
+          :key="index"
+          :checked="box.checked"
+          :disabled="isDisabled"
+          @change="radioChange(index)"
+        ></t-radio>
+        <span>{{ box.label }}</span>
+      </span>
+    </span>
+
+    <span v-else class="umo-option-box-checkbox-container">
+      <span v-if="attrs.checkAll" class="option-item">
+        <t-checkbox
+          key="checkallInxex"
+          :checked="attrs.checked"
+          :disabled="isDisabled"
+          @change="checkboxAll"
+        ></t-checkbox>
+        <span>{{ t('insert.option.check') }}</span>
+      </span>
+
+      <span
+        v-for="(box, index) in attrs.items"
+        :key="box.key"
+        class="option-item"
+      >
+        <t-checkbox
+          :key="index"
+          :checked="box.checked"
+          :disabled="isDisabled"
+          @click="checkboxChange(index)"
+        ></t-checkbox>
+        <span>{{ box.label }}</span>
+      </span>
+    </span>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { computed as _computed } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+import { inject } from 'vue';
+const options = inject('options')
+const page = inject('page')
+const editor = inject('editor')
+const props = defineProps(nodeViewProps)
+const { updateAttributes, getPos } = props
+const attrs = _computed(() => props.node.attrs)
+
+// 统一的禁用状态计算
+const isDisabled = _computed(() => {
+  return (
+    page.value?.preview?.enabled ||
+    options.value?.document?.readOnly ||
+    !editor.value?.isEditable
+  )
+})
+
+// 处理复选框变化
+const checkboxChange = (index) => {
+  // 如果是禁用状态，则忽略此次调用
+  if (isDisabled.value) return
+
+  const newOptions = [...attrs.value.items]
+  newOptions[index].checked = !newOptions[index].checked
+  updateAttributes({ items: newOptions, updated: true })
+
+  // 使用 setTimeout 重置标志位
+  setTimeout(() => {
+    updateAttributes({ updated: false })
+  }, 0)
+}
+
+const checkboxAll = (check) => {
+  // 如果是禁用状态，则忽略此次调用
+  if (isDisabled.value) return
+
+  // 更新所有选项的选中状态
+  const checked = check
+  const newOptions = attrs.value.items.map((option) => ({
+    ...option,
+    checked,
+  }))
+
+  // 更新属性
+  updateAttributes({
+    items: newOptions,
+    checked,
+    updated: true,
+  })
+
+  // 使用 setTimeout 重置标志位
+  setTimeout(() => {
+    updateAttributes({ updated: false })
+  }, 0)
+}
+
+// 处理单选框变化
+const radioChange = (index) => {
+  // 如果是禁用状态，则忽略此次调用
+  if (isDisabled.value) return
+
+  // 清除其他选项的选中状态
+  const newOptions = attrs.value.items.map((option, i) => ({
+    ...option,
+    checked: i === index,
+  }))
+  updateAttributes({ items: newOptions, updated: true })
+
+  // 使用 setTimeout 重置标志位
+  setTimeout(() => {
+    updateAttributes({ updated: false })
+  }, 0)
+}
+</script>
+
+<style lang="less">
+.umo-node-option-box {
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+  display: inline-block;
+
+  .umo-option-box-checkbox-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+
+    .umo-checkbox {
+      font: inherit !important;
+      color: inherit !important;
+      transform: translateY(0.1em);
+      &__label {
+        font: inherit !important;
+      }
+      &__input {
+        width: 1em;
+        height: 1em;
+        border-radius: 0.15em;
+        &::after {
+          width: 0.3em;
+          height: 0.6em;
+          left: 0.2em;
+          top: 0.4em;
+        }
+      }
+    }
+  }
+
+  .umo-option-box-radio-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+
+    .umo-radio {
+      font: inherit !important;
+      color: inherit !important;
+      transform: translateY(-0.1em);
+      &__label {
+        font: inherit !important;
+      }
+      &__input {
+        width: 1em;
+        height: 1em;
+        border-radius: 50%;
+        &::after {
+          width: 1em;
+          height: 1em;
+          left: 0;
+          top: 0;
+          margin: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,36 @@
+import { OrderedList } from '@tiptap/extension-list'
+
+export default OrderedList.extend({
+  content: 'listItem*',
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      listType: {
+        default: 'decimal',
+        parseHTML: (element) =>
+          element.style.getPropertyValue('list-style-type') || 'decimal',
+        renderHTML: ({ listType }) => {
+          return {
+            style: `list-style-type: ${listType}`,
+            'data-type': listType,
+          }
+        },
+      },
+      start: {
+        default: 1,
+        parseHTML: (element) => {
+          const start = element.getAttribute('data-start')
+          return start ? Number(start) : 1
+        },
+        renderHTML: (attributes) => {
+          if (attributes['data-start'] === 1) {
+            return {}
+          }
+          return {
+            'data-start': attributes.start,
+          }
+        },
+      },
+    }
+  },
+})

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

@@ -0,0 +1,42 @@
+import { t } from '../composables/i18n.js';
+import { mergeAttributes, Node } from '@tiptap/core'
+
+export default Node.create({
+  name: 'pageBreak',
+  group: 'block',
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'umo-page-break',
+        'data-line-number': false,
+      },
+      getContentLabel: () => t('page.break'),
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'div[class*="umo-page-break"]' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        'data-content': this.options.getContentLabel(),
+      }),
+    ]
+  },
+  addCommands() {
+    return {
+      setPageBreak:
+        () =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+          }),
+    }
+  },
+  addKeyboardShortcuts() {
+    return {
+      'Mod-Enter': () => this.editor.commands.setPageBreak(),
+    }
+  },
+})

package/src/components/editor-main/src/extensions/search-replace.js

@@ -0,0 +1,304 @@
+import { Extension } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+
+const getRegex = (s, disableRegex, caseSensitive) => {
+  return RegExp(
+    disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') : s,
+    caseSensitive ? 'gu' : 'gui',
+  )
+}
+
+const processSearches = (doc, searchTerm, searchResultClass, resultIndex) => {
+  const decorations = []
+  const results = []
+
+  let textNodesWithPosition = []
+  let index = 0
+
+  if (!searchTerm) {
+    return {
+      decorationsToReturn: DecorationSet.empty,
+      results: [],
+    }
+  }
+
+  doc?.descendants((node, pos) => {
+    if (node.isText) {
+      if (textNodesWithPosition[index]) {
+        textNodesWithPosition[index] = {
+          text: textNodesWithPosition[index].text + node.text,
+          pos: textNodesWithPosition[index].pos,
+        }
+      } else {
+        textNodesWithPosition[index] = {
+          text: `${node.text}`,
+          pos,
+        }
+      }
+    } else {
+      index += 1
+    }
+  })
+
+  textNodesWithPosition = textNodesWithPosition.filter(Boolean)
+
+  for (const element of textNodesWithPosition) {
+    const { text, pos } = element
+    const matches = Array.from(text.matchAll(searchTerm)).filter(
+      ([matchText]) => matchText.trim(),
+    )
+
+    for (const m of matches) {
+      if (m[0] === '') break
+
+      if (m.index !== undefined) {
+        results.push({
+          from: pos + m.index,
+          to: pos + m.index + m[0].length,
+        })
+      }
+    }
+  }
+
+  for (let i = 0; i < results.length; i += 1) {
+    const r = results[i]
+    const className =
+      i === resultIndex
+        ? `${searchResultClass} ${searchResultClass}-current`
+        : searchResultClass
+    const decoration = Decoration.inline(r.from, r.to, {
+      class: className,
+    })
+
+    decorations.push(decoration)
+  }
+
+  return {
+    decorationsToReturn: DecorationSet.create(doc, decorations),
+    results,
+  }
+}
+
+const replace = (replaceTerm, results, { state, dispatch }) => {
+  const [firstResult] = results
+
+  if (!firstResult) return
+
+  const { from, to } = firstResult
+
+  if (dispatch) dispatch(state.tr.insertText(replaceTerm, from, to))
+}
+
+const rebaseNextResult = (replaceTerm, index, lastOffset, results) => {
+  const nextIndex = index + 1
+
+  if (!results[nextIndex]) return null
+
+  const { from: currentFrom, to: currentTo } = results[index]
+
+  const offset = currentTo - currentFrom - replaceTerm.length + lastOffset
+
+  const { from, to } = results[nextIndex]
+
+  results[nextIndex] = {
+    to: to - offset,
+    from: from - offset,
+  }
+
+  return [offset, results]
+}
+
+const replaceAll = (replaceTerm, results, { tr, dispatch }) => {
+  let offset = 0
+
+  let resultsCopy = results.slice()
+
+  if (!resultsCopy.length) return
+
+  for (let i = 0; i < resultsCopy.length; i += 1) {
+    const { from, to } = resultsCopy[i]
+
+    tr.insertText(replaceTerm, from, to)
+
+    const rebaseNextResultResponse = rebaseNextResult(
+      replaceTerm,
+      i,
+      offset,
+      resultsCopy,
+    )
+
+    if (!rebaseNextResultResponse) continue
+    ;[offset, resultsCopy] = rebaseNextResultResponse
+  }
+
+  dispatch(tr)
+}
+
+export const SearchAndReplace = Extension.create({
+  name: 'searchAndReplace',
+  addOptions() {
+    return {
+      searchResultClass: 'umo-search-result',
+      disableRegex: true,
+    }
+  },
+  addStorage() {
+    return {
+      searchTerm: '',
+      replaceTerm: '',
+      results: [],
+      lastSearchTerm: '',
+      caseSensitive: false,
+      lastCaseSensitive: false,
+      resultIndex: 0,
+      lastResultIndex: 0,
+    }
+  },
+  addCommands() {
+    return {
+      setSearchTerm:
+        (searchTerm) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.searchTerm = searchTerm
+
+          return false
+        },
+      setReplaceTerm:
+        (replaceTerm) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.replaceTerm = replaceTerm
+
+          return false
+        },
+      setCaseSensitive:
+        (caseSensitive) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.caseSensitive = caseSensitive
+
+          return false
+        },
+      resetIndex:
+        () =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.resultIndex = 0
+
+          return false
+        },
+      nextSearchResult:
+        () =>
+        ({ editor }) => {
+          const { results, resultIndex } = editor.storage.searchAndReplace
+
+          const nextIndex = resultIndex + 1
+
+          if (results[nextIndex]) {
+            editor.storage.searchAndReplace.resultIndex = nextIndex
+          } else {
+            editor.storage.searchAndReplace.resultIndex = 0
+          }
+
+          return false
+        },
+      previousSearchResult:
+        () =>
+        ({ editor }) => {
+          const { results, resultIndex } = editor.storage.searchAndReplace
+
+          const prevIndex = resultIndex - 1
+
+          if (results[prevIndex]) {
+            editor.storage.searchAndReplace.resultIndex = prevIndex
+          } else {
+            editor.storage.searchAndReplace.resultIndex = results.length - 1
+          }
+
+          return false
+        },
+      replace:
+        () =>
+        ({ editor, state, dispatch }) => {
+          const { replaceTerm, results } = editor.storage.searchAndReplace
+
+          replace(replaceTerm, results, { state, dispatch })
+
+          return false
+        },
+      replaceAll:
+        () =>
+        ({ editor, tr, dispatch }) => {
+          const { replaceTerm, results } = editor.storage.searchAndReplace
+
+          replaceAll(replaceTerm, results, { tr, dispatch })
+
+          return false
+        },
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const { editor } = this
+    const { searchResultClass, disableRegex } = this.options
+
+    const setLastSearchTerm = (t) =>
+      (editor.storage.searchAndReplace.lastSearchTerm = t)
+    const setLastCaseSensitive = (t) =>
+      (editor.storage.searchAndReplace.lastCaseSensitive = t)
+    const setLastResultIndex = (t) =>
+      (editor.storage.searchAndReplace.lastResultIndex = t)
+
+    return [
+      new Plugin({
+        key: 'search-replace',
+        state: {
+          init: () => DecorationSet.empty,
+          apply({ doc, docChanged }, oldState) {
+            const {
+              searchTerm,
+              lastSearchTerm,
+              caseSensitive,
+              lastCaseSensitive,
+              resultIndex,
+              lastResultIndex,
+            } = editor.storage.searchAndReplace
+
+            if (
+              !docChanged &&
+              lastSearchTerm === searchTerm &&
+              lastCaseSensitive === caseSensitive &&
+              lastResultIndex === resultIndex
+            )
+              return oldState
+
+            setLastSearchTerm(searchTerm)
+            setLastCaseSensitive(caseSensitive)
+            setLastResultIndex(resultIndex)
+
+            if (!searchTerm) {
+              editor.storage.searchAndReplace.results = []
+              return DecorationSet.empty
+            }
+
+            const { decorationsToReturn, results } = processSearches(
+              doc,
+              getRegex(searchTerm, disableRegex, caseSensitive),
+              searchResultClass,
+              resultIndex,
+            )
+
+            editor.storage.searchAndReplace.results = results
+
+            return decorationsToReturn
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)
+          },
+        },
+      }),
+    ]
+  },
+})
+
+export default SearchAndReplace

package/src/components/editor-main/src/extensions/selection.js

@@ -0,0 +1,38 @@
+import { Selection } from '@tiptap/extensions'
+
+import { getSelectionNode } from '../utils/selection'
+
+export default Selection.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      className: 'umo-selection',
+    }
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setCurrentNodeSelection:
+        () =>
+        ({ editor, chain }) => {
+          editor.commands.selectParentNode()
+          const { $anchor } = editor.state.selection
+          return chain()
+            .setNodeSelection($anchor.pos - $anchor.depth)
+            .run()
+        },
+      deleteSelectionNode:
+        () =>
+        ({ editor, commands }) => {
+          const node = getSelectionNode(editor)
+          if (!node) {
+            return false
+          }
+          if (commands.deleteSelection()) {
+            return true
+          }
+          return commands.deleteNode(node.type.name)
+        },
+    }
+  },
+})