adtec-core-package 3.0.0 → 3.0.2

package/src/components/editor-main/src/extensions/node-align.js

@@ -0,0 +1,164 @@
+import { Extension } from '@tiptap/core'
+import { NodeSelection } from '@tiptap/pm/state'
+
+const findClosestTargetNode = (state, typeNames) => {
+  const { selection } = state
+
+  if (selection instanceof NodeSelection) {
+    const { node } = selection
+    if (node && typeNames.includes(node.type.name)) {
+      return { node, pos: selection.from }
+    }
+  }
+
+  const { $from } = selection
+  for (let { depth } = $from; depth > 0; depth -= 1) {
+    const node = $from.node(depth)
+    if (typeNames.includes(node.type.name)) {
+      return { node, pos: $from.before(depth) }
+    }
+  }
+
+  return null
+}
+
+export default Extension.create({
+  name: 'nodeAlign',
+  addOptions() {
+    return {
+      defaultAlignment: 'center',
+      alignments: ['flex-start', 'center', 'flex-end'],
+      types: ['image', 'video', 'audio', 'iframe', 'file', 'echarts'],
+    }
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          nodeAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML: (element) => {
+              return (
+                element.style.justifyContent || this.options.defaultAlignment
+              )
+            },
+            renderHTML: (attributes) => {
+              const align = attributes.nodeAlign
+              return { style: `justify-content: ${align}` }
+            },
+          },
+        },
+      },
+    ]
+  },
+  addCommands() {
+    return {
+      setNodeAlign:
+        (alignment) =>
+        ({ editor, state, dispatch }) => {
+          if (!this.options.alignments.includes(alignment)) {
+            return false
+          }
+
+          const typeNames = this.options.types.filter(
+            (type) => editor.schema.nodes[type],
+          )
+
+          let { tr } = state
+          let updated = false
+
+          state.doc.nodesBetween(
+            state.selection.from,
+            state.selection.to,
+            (node, pos) => {
+              if (!typeNames.includes(node.type.name)) {
+                return
+              }
+              if (node.attrs.nodeAlign === alignment) {
+                updated = true
+                return
+              }
+              tr = tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                nodeAlign: alignment,
+              })
+              updated = true
+            },
+          )
+
+          if (!updated) {
+            const target = findClosestTargetNode(state, typeNames)
+            if (!target) {
+              return false
+            }
+            if (target.node.attrs.nodeAlign === alignment) {
+              return true
+            }
+            tr = tr.setNodeMarkup(target.pos, undefined, {
+              ...target.node.attrs,
+              nodeAlign: alignment,
+            })
+            updated = true
+          }
+
+          if (dispatch && tr.docChanged) {
+            dispatch(tr)
+          }
+
+          return updated
+        },
+      unsetNodeAlign:
+        () =>
+        ({ editor, state, dispatch }) => {
+          const { defaultAlignment } = this.options
+          const typeNames = this.options.types.filter(
+            (type) => editor.schema.nodes[type],
+          )
+
+          let { tr } = state
+          let updated = false
+
+          state.doc.nodesBetween(
+            state.selection.from,
+            state.selection.to,
+            (node, pos) => {
+              if (!typeNames.includes(node.type.name)) {
+                return
+              }
+              if (node.attrs.nodeAlign === defaultAlignment) {
+                updated = true
+                return
+              }
+              tr = tr.setNodeMarkup(pos, undefined, {
+                ...node.attrs,
+                nodeAlign: defaultAlignment,
+              })
+              updated = true
+            },
+          )
+
+          if (!updated) {
+            const target = findClosestTargetNode(state, typeNames)
+            if (!target) {
+              return false
+            }
+            if (target.node.attrs.nodeAlign === defaultAlignment) {
+              return true
+            }
+            tr = tr.setNodeMarkup(target.pos, undefined, {
+              ...target.node.attrs,
+              nodeAlign: defaultAlignment,
+            })
+            updated = true
+          }
+
+          if (dispatch && tr.docChanged) {
+            dispatch(tr)
+          }
+
+          return updated
+        },
+    }
+  },
+})

package/src/components/editor-main/src/extensions/node-select.js

@@ -0,0 +1,51 @@
+import { Extension } from '@tiptap/core'
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state'
+
+// 点击节点时选中当前节点，主要是为了解决升级到 tiptap v3 后，点击节点无法选中当前节点的问题
+export default Extension.create({
+  name: 'selectNode',
+  addOptions() {
+    return {
+      types: ['horizontalRule', 'pageBreak', 'blockMath', 'inlineMath'],
+    }
+  },
+  addProseMirrorPlugins() {
+    const { types } = this.options
+
+    return [
+      new Plugin({
+        key: new PluginKey('select-node'),
+        props: {
+          handleDOMEvents: {
+            click(view, event) {
+              const { state, dispatch } = view
+
+              const pos = view.posAtCoords({
+                left: event.clientX,
+                top: event.clientY,
+              })
+
+              if (!pos) return false
+
+              const resolvedPos = pos.inside >= 0 ? pos.inside : pos.pos
+
+              const node = state.doc.nodeAt(resolvedPos)
+
+              if (!node || !types.includes(node.type.name)) {
+                return false
+              }
+
+              const selection = NodeSelection.create(state.doc, resolvedPos)
+
+              dispatch(state.tr.setSelection(selection))
+              view.focus()
+
+              // 返回 true 表示事件已处理，阻止 PM 继续处理
+              return true
+            },
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/components/editor-main/src/extensions/office-paste/index.js

@@ -0,0 +1,70 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { useConfirm } from '../../composables/dialog'
+import { t } from '../../composables/i18n'
+
+import { transformRemoveBookmarks } from './transform/bookmark'
+import { transformExcel } from './transform/excel'
+import { transformMsoHtmlClasses } from './transform/html-classes'
+import { transformRemoveLineNumberWrapper } from './transform/line-number'
+import { transformLists } from './transform/list'
+import { transformMsoStyles } from './transform/style'
+import {
+  hasImageInPastePayload,
+  isOfficeHtml,
+  isOfficeLikeClipboardData,
+  replaceImageWithPlaceholder,
+} from './utils'
+
+// form https://www.npmjs.com/package/@intevation/tiptap-extension-office-paste
+
+const createOfficePastePlugin = () =>
+  new Plugin({
+    key: new PluginKey('office-paste'),
+    props: {
+      transformPastedHTML(html) {
+        if (isOfficeHtml(html)) {
+          const imagePlaceholder = `<span style="color: var(--umo-error-color, #e34d59);">${t('officePaste.imagePlaceholder')}</span>`
+          html = transformLists(html)
+          html = transformRemoveBookmarks(html)
+          html = transformMsoStyles(html)
+          html = transformMsoHtmlClasses(html)
+          html = transformRemoveLineNumberWrapper(html)
+          html = replaceImageWithPlaceholder(html, imagePlaceholder)
+        }
+        return html
+      },
+      handlePaste(view, event) {
+        const clipboardData = event?.clipboardData
+        const html = clipboardData?.getData('text/html') || ''
+        const files = Array.from(clipboardData?.files || [])
+        const officeLike = isOfficeLikeClipboardData(clipboardData)
+        const hasImage = hasImageInPastePayload(files, html)
+
+        if (event && officeLike) {
+          if (hasImage) {
+            const dialog = useConfirm({
+              width: 400,
+              theme: 'warning',
+              header: t('officePaste.dialog.title'),
+              body: t('officePaste.dialog.body'),
+              onConfirm: () => {
+                dialog.destroy()
+              },
+            })
+          }
+          // 标记给 file-handler：当前粘贴交由 office-paste/默认流程处理
+          event.skipFileHandler = true
+        }
+        return transformExcel(view, event)
+      },
+    },
+  })
+
+export default Extension.create({
+  priority: 99999,
+  name: 'officePaste',
+  addProseMirrorPlugins() {
+    return [createOfficePastePlugin()]
+  },
+})

package/src/components/editor-main/src/extensions/office-paste/transform/bookmark.js

@@ -0,0 +1,17 @@
+import { parseStyleAttribute, unwrapNode } from '../utils'
+
+export const transformRemoveBookmarks = (html) => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, `text/html`)
+  const bookmarks = doc.querySelectorAll(`[style*="mso-bookmark:"]`)
+  bookmarks.forEach((node) => {
+    const bookmark = parseStyleAttribute(node)[`mso-bookmark`]
+    const bookmarkLink = doc.querySelector(`a[name="${bookmark}"]`)
+    if (bookmarkLink) {
+      unwrapNode(bookmarkLink)
+    }
+    unwrapNode(node)
+  })
+
+  return doc.documentElement.outerHTML
+}

package/src/components/editor-main/src/extensions/office-paste/transform/excel.js

@@ -0,0 +1,85 @@
+import { DOMParser as ProseMirrorDOMParser } from '@tiptap/pm/model'
+
+// 解析剪切板中 excel 的 CSS 规则（将 CSS 字符串转换为对象）
+const parseCSS = (cssRules) => {
+  const results = {}
+  const rules = cssRules
+    .split(';')
+    .map((rule) => rule.trim())
+    .filter(Boolean)
+  rules.forEach((rule) => {
+    const [property, value] = rule.split(':').map((part) => part.trim())
+    if (property && value) {
+      results[property] = value
+    }
+  })
+  return results
+}
+
+// 提取样式规则的方法
+const extractStyles = (styleText) => {
+  const regex = /\.(\w+)\s*\{([^}]+)\}/g
+  let match
+  const styles = {}
+
+  while ((match = regex.exec(styleText)) !== null) {
+    // const className = match[1]
+    // const cssRules = match[2]
+    const [, className, cssRules] = match
+    const parsedRules = parseCSS(cssRules)
+    styles[className] = parsedRules
+  }
+
+  return styles
+}
+
+export const transformExcel = (view, event) => {
+  if (!event) return false
+  const { clipboardData } = event
+  if (!clipboardData) return false
+
+  const html = clipboardData.getData('text/html')
+  if (!html) return false
+
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, 'text/html')
+  const excel = doc
+    ?.querySelector('html')
+    ?.getAttribute('xmlns:x')
+    ?.includes('office:excel')
+  if (!excel) {
+    return false
+  }
+
+  const table = doc.querySelector('table')
+  if (!table) return false
+
+  const styleText = Array.from(doc.head.querySelectorAll('style'))
+    .map((style) => style.textContent)
+    .join('\n')
+
+  // 提取所有样式规则
+  const styles = extractStyles(styleText)
+
+  // 添加单元格的样式
+  table.querySelectorAll('td, th').forEach((cell) => {
+    const style = styles[cell.getAttribute('class')]
+    if (style?.background) {
+      cell.style.background = style.background
+    }
+    if (style?.color) {
+      cell.style.color = style.color
+    }
+    if (style?.['text-align']) {
+      cell.setAttribute('align', style['text-align'])
+    }
+  })
+
+  // 使用 ProseMirror 的 DOMParser 将表格转换为 ProseMirror 节点
+  const { schema } = view.state
+  const fragment = ProseMirrorDOMParser.fromSchema(schema).parse(table)
+  const transaction = view.state.tr.replaceSelectionWith(fragment)
+  view.dispatch(transaction)
+
+  return true
+}

package/src/components/editor-main/src/extensions/office-paste/transform/html-classes.js

@@ -0,0 +1,9 @@
+export const transformMsoHtmlClasses = (html) => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, `text/html`)
+  doc.querySelectorAll(`p[class*="MsoNormal"]`).forEach((node) => {
+    node.classList.remove(`MsoNormal`)
+  })
+
+  return doc.documentElement.outerHTML
+}

package/src/components/editor-main/src/extensions/office-paste/transform/line-number.js

@@ -0,0 +1,10 @@
+import { unwrapNode } from '../utils'
+
+export const transformRemoveLineNumberWrapper = (html) => {
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, `text/html`)
+  const lineNumbers = doc.querySelectorAll(`[class*="MsoLineNumber"]`)
+  lineNumbers.forEach((node) => unwrapNode(node))
+
+  return doc.documentElement.outerHTML
+}

package/src/components/editor-main/src/extensions/office-paste/transform/list.js

@@ -0,0 +1,148 @@
+import {
+  parseLetterNumber,
+  parseRomanNumber,
+  parseStyleAttribute,
+} from '../utils'
+
+export const transformLists = (html) => {
+  if (html.indexOf(`mso-list:`) === -1) {
+    return html
+  }
+
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, `text/html`)
+
+  let listStack = []
+  let currentListId
+  const listElements = doc.querySelectorAll(`p[style*="mso-list:"]`)
+  listElements.forEach((node) => {
+    const el = node
+    const [msoListId, msoListLevel] = parseMsoListAttribute(
+      parseStyleAttribute(el)[`mso-list`],
+    )
+
+    // Check for start of a new list
+    if (
+      currentListId !== msoListId &&
+      (hasNonListItemSibling(el) || msoListLevel === 1)
+    ) {
+      currentListId = msoListId
+      listStack = []
+    }
+
+    while (msoListLevel > listStack.length) {
+      const newList = createListElement(el)
+
+      if (listStack.length > 0) {
+        listStack[listStack.length - 1].appendChild(newList)
+      } else {
+        el.before(newList)
+      }
+      listStack.push(newList)
+    }
+
+    while (msoListLevel < listStack.length) {
+      listStack.pop()
+    }
+
+    // Remove list item numbers and create li
+    listStack[listStack.length - 1].appendChild(getListItemFromParagraph(el))
+    el.remove()
+  })
+
+  return doc.documentElement.outerHTML
+}
+
+const hasNonListItemSibling = (el) => {
+  return (
+    !el.previousElementSibling ||
+    !(
+      el.previousElementSibling.nodeName === `OL` ||
+      el.previousElementSibling.nodeName === `UL`
+    )
+  )
+}
+
+const getListItemFromParagraph = (el) => {
+  const li = document.createElement(`li`)
+  li.innerHTML = el.innerHTML.replace(listTypeRegex, ``)
+
+  return li
+}
+
+// Parses `mso-list` style attribute
+const parseMsoListAttribute = (attr) => {
+  const msoListValue = attr
+  const msoListInfos = msoListValue.split(` `)
+  const msoListId = msoListInfos.find((e) => /l[0-9]+/.test(e)) || ``
+  const msoListLevel = +(
+    msoListInfos.find((e) => e.startsWith(`level`))?.substring(5) || 1
+  )
+
+  return [msoListId, msoListLevel]
+}
+// eslint-disable-next-line
+const listTypeRegex = /<!--\[if \!supportLists\]-->((.|\n)*)<!--\[endif\]-->/m
+const getListPrefix = (el) => {
+  const matches = el.innerHTML.match(listTypeRegex)
+  if (matches?.length) {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(matches[0], `text/html`)
+    return doc.body.querySelector(`span`)?.textContent || ``
+  }
+
+  return ``
+}
+
+const createListElement = (el) => {
+  const listInfo = getListInfo(getListPrefix(el))
+  const list = document.createElement(listInfo.type)
+  if (listInfo.countType) {
+    list.setAttribute(`type`, listInfo.countType)
+  }
+  if (listInfo.start > 1) {
+    list.setAttribute(`start`, listInfo.start.toString())
+  }
+  return list
+}
+
+const listOrderRegex = {
+  number: /[0-9]+\./,
+  romanLower: /(?=[mdclxvi])m*(c[md]|d?c*)(x[cl]|l?x*)(i[xv]|v?i*)\./,
+  romanUpper: /(?=[MDCLXVI])M*(C[MD]|D?C*)(X[CL]|L?X*)(I[XV]|V?I*)\./,
+  letterLower: /[a-z]+\./,
+  letterUpper: /[A-Z]+\./,
+}
+
+const getListInfo = (prefix) => {
+  let type = `ul`
+  let countType = null
+  let start = 1
+  let matches
+  if ((matches = prefix.match(listOrderRegex.number))) {
+    type = `ol`
+    start = +matches[0].replace(`.`, ``)
+  } else if ((matches = prefix.match(listOrderRegex.romanLower))) {
+    type = `ol`
+    countType = `i`
+    start = +parseRomanNumber(matches[0].replace(`.`, ``))
+  } else if ((matches = prefix.match(listOrderRegex.romanUpper))) {
+    type = `ol`
+    countType = `I`
+    start = +parseRomanNumber(matches[0].replace(`.`, ``))
+  } else if ((matches = prefix.match(listOrderRegex.letterLower))) {
+    type = `ol`
+    countType = `a`
+    start = +parseLetterNumber(matches[0].replace(`.`, ``))
+  } else if ((matches = prefix.match(listOrderRegex.letterUpper))) {
+    type = `ol`
+    countType = `A`
+    start = +parseLetterNumber(matches[0].replace(`.`, ``))
+  }
+
+  return {
+    type,
+    start,
+    countType,
+  }
+}

package/src/components/editor-main/src/extensions/office-paste/transform/style.js

@@ -0,0 +1,24 @@
+import { parseStyleAttribute } from '../utils'
+
+export const transformMsoStyles = (html) => {
+  html = html.replace(/<o:p>(.*?)<\/o:p>/g, ``)
+
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, `text/html`)
+  doc.querySelectorAll(`[style*="mso-"]`).forEach((node) => {
+    const styles = parseStyleAttribute(node)
+    const newStyles = []
+    for (const prop of Object.keys(styles)) {
+      if (prop && !prop.startsWith(`mso-`)) {
+        newStyles.push(`${prop}: ${styles[prop]}`)
+      }
+    }
+    node.setAttribute(`style`, newStyles.join(`;`))
+  })
+
+  doc.querySelectorAll(`[style*="color: black"]`).forEach((node) => {
+    node.style.removeProperty(`color`)
+  })
+
+  return doc.documentElement.outerHTML
+}

package/src/components/editor-main/src/extensions/office-paste/utils.js

@@ -0,0 +1,120 @@
+/**
+ * Parses a roman number string into a number
+ *
+ * Example: a -> 1, ab -> 28, ...
+ */
+export function parseRomanNumber(roman) {
+  roman = roman.toUpperCase()
+  let value = 0
+  const values = { I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000 }
+  let i = roman.length
+  let lastVal = 0
+  while (i--) {
+    if (values[roman.charAt(i)] >= lastVal) {
+      value += values[roman.charAt(i)]
+    } else {
+      value -= values[roman.charAt(i)]
+    }
+    lastVal = values[roman.charAt(i)]
+  }
+
+  return value
+}
+
+/**
+ * Parses a list item index of letters.
+ *
+ * Example: a -> 1, ab -> 28, ...
+ */
+export function parseLetterNumber(str) {
+  const alphaVal = (s) => s.toLowerCase().charCodeAt(0) - 97 + 1
+  let value = 0
+  let i = str.length
+  while (i--) {
+    const factor = Math.pow(26, str.length - i - 1)
+    value += alphaVal(str.charAt(i)) * factor
+  }
+  return value
+}
+
+/**
+ * Removes the sourounding tag of a node
+ *
+ * @param {Node} node
+ * @returns {Node}
+ */
+export function unwrapNode(node) {
+  const parent = node.parentNode
+  while (node.firstChild) {
+    parent?.insertBefore(node.firstChild, node)
+  }
+  parent?.removeChild(node)
+}
+
+/**
+ * Parses arbitrary style properties of an element into an object
+ *
+ * @param {Element} el
+ * @returns {Object}
+ */
+export function parseStyleAttribute(el) {
+  const styleRaw = el?.attributes[`style`]?.value || ``
+  return Object.fromEntries(
+    styleRaw.split(`;`).map((line) => line.split(`:`).map((v) => v.trim())),
+  )
+}
+
+export function isOfficeHtml(html) {
+  if (!html) {
+    return false
+  }
+  const normalized = html.toLowerCase()
+  const hasMsOfficeSignature =
+    (normalized.includes('microsoft-com') && normalized.includes('office')) ||
+    normalized.includes('urn:schemas-microsoft-com:office') ||
+    normalized.includes('class=mso') ||
+    normalized.includes('class="mso') ||
+    normalized.includes('mso-') ||
+    normalized.includes('w:worddocument')
+
+  const hasWpsSignature =
+    normalized.includes('wps office') ||
+    normalized.includes('kingsoft') ||
+    normalized.includes('xmlns:wps') ||
+    normalized.includes('name="generator" content="wps')
+
+  return hasMsOfficeSignature || hasWpsSignature
+}
+
+export function hasImageInPastePayload(files, html) {
+  const hasImageFile = files.some((item) => item.type?.startsWith('image/'))
+  const hasImageTag = /<(img\b|v:imagedata\b)/i.test(html || '')
+  return hasImageFile || hasImageTag
+}
+
+export function replaceImageWithPlaceholder(html, placeholder = '[图片]') {
+  if (!html) {
+    return html
+  }
+
+  let nextHtml = html
+  nextHtml = nextHtml.replace(
+    /<v:shape\b[^>]*>[\s\S]*?<v:imagedata[\s\S]*?<\/v:shape>/gi,
+    placeholder,
+  )
+  nextHtml = nextHtml.replace(/<v:imagedata\b[^>]*\/?>/gi, placeholder)
+  nextHtml = nextHtml.replace(/<img\b[^>]*>/gi, placeholder)
+  return nextHtml
+}
+
+export function isOfficeLikeClipboardData(clipboardData) {
+  if (!clipboardData) {
+    return false
+  }
+  const html = clipboardData.getData('text/html') || ''
+  if (isOfficeHtml(html)) {
+    return true
+  }
+  const types = Array.from(clipboardData.types || [])
+  return types.includes('text/rtf') || types.includes('application/rtf')
+}