adtec-core-package 3.0.0 → 3.0.2

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

@@ -0,0 +1,226 @@
+import { Extension } from '@tiptap/core'
+import { AllSelection, TextSelection } from '@tiptap/pm/state'
+
+const DEFAULT_INDENT_UNIT = 'em'
+
+const parseIndentConfig = (indentSize, fallbackUnit = DEFAULT_INDENT_UNIT) => {
+  if (typeof indentSize === 'number') {
+    return Number.isFinite(indentSize)
+      ? { value: indentSize, unit: fallbackUnit }
+      : null
+  }
+
+  if (typeof indentSize !== 'string') {
+    return null
+  }
+
+  const match = indentSize.trim().match(/^(-?[\d.]+)\s*([a-z%]*)$/i)
+  if (!match) {
+    return null
+  }
+
+  const value = Number.parseFloat(match[1])
+  if (!Number.isFinite(value)) {
+    return null
+  }
+
+  return {
+    value,
+    unit: match[2] || fallbackUnit,
+  }
+}
+
+const parseTextIndent = (textIndent, fallbackUnit = DEFAULT_INDENT_UNIT) => {
+  if (typeof textIndent !== 'string') {
+    return null
+  }
+
+  const match = textIndent.trim().match(/^(-?[\d.]+)\s*([a-z%]*)$/i)
+  if (!match) {
+    return null
+  }
+
+  const value = Number.parseFloat(match[1])
+  if (!Number.isFinite(value)) {
+    return null
+  }
+
+  return {
+    value,
+    unit: match[2] || fallbackUnit,
+  }
+}
+
+export default Extension.create({
+  name: 'indent',
+  addOptions() {
+    return {
+      types: ['heading', 'listItem', 'taskItem', 'paragraph'],
+      minLevel: 0,
+      maxLevel: 20,
+      indentSize: 2,
+      defaultUnit: DEFAULT_INDENT_UNIT,
+    }
+  },
+  addGlobalAttributes() {
+    const getIndentConfig = () =>
+      parseIndentConfig(this.options.indentSize, this.options.defaultUnit)
+    const parseElementIndent = (element) => {
+      const config = getIndentConfig()
+      if (!config) {
+        return null
+      }
+      return parseTextIndent(element.style.textIndent, config.unit)
+    }
+
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          indent: {
+            default: null,
+            renderHTML: (attributes) => {
+              const { indent, indentUnit } = attributes
+              const { minLevel } = this.options
+              if (!indent || indent <= minLevel) {
+                return {}
+              }
+              const config = getIndentConfig()
+              if (!config) {
+                return {}
+              }
+              return {
+                style: `text-indent: ${indent * config.value}${indentUnit || config.unit};`,
+              }
+            },
+            parseHTML: (element) => {
+              const parsedIndent = parseElementIndent(element)
+              const config = getIndentConfig()
+              if (!parsedIndent || !config?.value) {
+                return null
+              }
+              const level = Math.round(parsedIndent.value / config.value)
+              return level > this.options.minLevel ? level : null
+            },
+          },
+          indentUnit: {
+            default: null,
+            renderHTML: () => ({}),
+            parseHTML: (element) => {
+              const parsedIndent = parseElementIndent(element)
+              const config = getIndentConfig()
+              if (!parsedIndent || !config?.value) {
+                return null
+              }
+              const level = Math.round(parsedIndent.value / config.value)
+              return level > this.options.minLevel ? parsedIndent.unit : null
+            },
+          },
+        },
+      },
+    ]
+  },
+  addCommands() {
+    const getIndentConfig = () =>
+      parseIndentConfig(this.options.indentSize, this.options.defaultUnit)
+    const shouldClampMaxLevel = (indentUnit) => {
+      const config = getIndentConfig()
+      if (!config) {
+        return true
+      }
+      return !indentUnit || indentUnit === config.unit
+    }
+
+    const setNodeIndentMarkup = (tr, pos, delta) => {
+      const node = tr.doc.nodeAt(pos)
+      if (!node) return tr
+      const nextLevel = (node.attrs.indent || 0) + delta
+      const { minLevel, maxLevel } = this.options
+      let indent = nextLevel
+      if (nextLevel < minLevel) indent = minLevel
+      if (nextLevel > maxLevel && shouldClampMaxLevel(node.attrs.indentUnit)) {
+        indent = maxLevel
+      }
+      if (indent !== node.attrs.indent) {
+        const attrs = { ...node.attrs }
+        delete attrs.indent
+        delete attrs.indentUnit
+        const config = getIndentConfig()
+        const nextAttrs =
+          indent > minLevel
+            ? {
+                ...attrs,
+                indent,
+                indentUnit:
+                  node.attrs.indentUnit || config?.unit || DEFAULT_INDENT_UNIT,
+              }
+            : attrs
+        return tr.setNodeMarkup(pos, node.type, nextAttrs, node.marks)
+      }
+      return tr
+    }
+    const updateIndentLevel = (tr, delta) => {
+      const { doc, selection } = tr
+      if (
+        selection instanceof TextSelection ||
+        selection instanceof AllSelection
+      ) {
+        const { from, to } = selection
+        doc.nodesBetween(from, to, (node, pos) => {
+          if (this.options.types.includes(node.type.name)) {
+            tr = setNodeIndentMarkup(tr, pos, delta)
+            return false
+          }
+          return true
+        })
+      }
+      return tr
+    }
+    const applyIndent =
+      (direction) =>
+      () =>
+      ({ tr, state, dispatch }) => {
+        tr.setSelection(state.selection)
+        tr = updateIndentLevel(tr, direction)
+        if (tr.docChanged) {
+          if (dispatch) {
+            dispatch(tr)
+          }
+          return true
+        }
+        return false
+      }
+    return {
+      setIndent: applyIndent(1),
+      setOutdent: applyIndent(-1),
+    }
+  },
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        if (
+          this.editor.isActive('bulletList') ||
+          this.editor.isActive('orderedList')
+        ) {
+          return this.editor.commands.sinkListItem('listItem')
+        }
+        if (this.editor.isActive('taskList')) {
+          return this.editor.commands.sinkListItem('taskItem')
+        }
+        return this.editor.commands.setIndent()
+      },
+      'Shift-Tab': () => {
+        if (
+          this.editor.isActive('bulletList') ||
+          this.editor.isActive('orderedList')
+        ) {
+          return this.editor.commands.liftListItem('listItem')
+        }
+        if (this.editor.isActive('taskList')) {
+          return this.editor.commands.liftListItem('taskItem')
+        }
+        return this.editor.commands.setOutdent()
+      },
+    }
+  },
+})

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

@@ -0,0 +1,341 @@
+import { t } from '../composables/i18n.js';
+import Bold from '@tiptap/extension-bold'
+import {
+  Details,
+  DetailsContent,
+  DetailsSummary,
+} from '@tiptap/extension-details'
+import Document from '@tiptap/extension-document'
+import Link from '@tiptap/extension-link'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
+import Mathematics from '@tiptap/extension-mathematics'
+import NodeRange from '@tiptap/extension-node-range'
+import Subscript from '@tiptap/extension-subscript'
+import Superscript from '@tiptap/extension-superscript'
+import { getHierarchicalIndexes } from '@tiptap/extension-table-of-contents'
+import { TableOfContents } from '@tiptap/extension-table-of-contents'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+import Typography from '@tiptap/extension-typography'
+import UniqueID from '@tiptap/extension-unique-id'
+import {
+  CharacterCount,
+  Dropcursor,
+  Focus,
+  TrailingNode,
+  Placeholder,
+  UndoRedo,
+} from '@tiptap/extensions'
+import StarterKit from '@tiptap/starter-kit'
+
+import { l } from '../composables/i18n'
+import { useState } from '../composables/state'
+import { getImageDimensions } from '../utils/file'
+import { shortId } from '../utils/short-id'
+
+import Audio from './audio'
+import Bookmark from './bookmark'
+import BreakMarks from './break-marks'
+import BulletList from './bullet-list'
+import Callout from './callout'
+import CodeBlock from './code-block'
+import Columns from './columns'
+import Datetime from './datetime'
+import Echarts from './echarts'
+import File from './file'
+import FileHandler from './file-handler'
+import { Footnote, FootnoteReference, Footnotes } from './foonotes'
+import FormatPainter from './format-painter'
+import HorizontalRule from './horizontal-rule'
+import Iframe from './iframe'
+import { BlockImage, InlineImage } from './image'
+import Indent from './indent'
+import LetterSpacing from './letter-spacing'
+import LineHeight from './line-height'
+import Margin from './margin'
+import Mention from './mention'
+import getUsersSuggestion from './mention/suggestion'
+import NodeAlign from './node-align'
+import NodeSelect from './node-select'
+import OfficePaste from './office-paste'
+import OptionBox from './option-box'
+import OrderedList from './ordered-list'
+import PageBreak from './page-break'
+import SearchReplace from './search-replace'
+import Selection from './selection'
+import { Table, TableCell, TableHeader, TableRow } from './table'
+import Tag from './tag'
+import TextAlign from './text-align'
+import TextBox from './text-box'
+import Toc from './toc'
+import TypeWriter from './type-writer'
+import Video from './video'
+import WordWrap from './word-wrap'
+
+const nodeTypes = [
+  'paragraph',
+  'heading',
+  'blockquote',
+  'codeBlock',
+  'hardBreak',
+  'horizontalRule',
+  'bulletList',
+  'orderedList',
+  'listItem',
+  'taskList',
+  'taskItem',
+  'details',
+  'detailsSummary',
+  'detailsContent',
+  'table',
+  'tableRow',
+  'tableHeader',
+  'tableCell',
+  'image',
+  'inlineImage',
+  'video',
+  'audio',
+  'file',
+  'callout',
+  'column',
+  'columnBlock',
+  'textBox',
+  'datetime',
+  'optionBox',
+  'iframe',
+  'echarts',
+  'toc',
+  'tag',
+  'pageBreak',
+  'mention',
+  'blockMath',
+  'inlineMath',
+]
+
+export const getDefaultExtensions = ({ container, options, uploadFileMap }) => {
+  const { page, document: doc, users, file, disableExtensions } = options.value
+
+  const extensions = {
+    'ordered-list': OrderedList,
+    'bullet-list': BulletList,
+    'task-list': TaskList.configure({
+      HTMLAttributes: {
+        class: 'umo-task-list',
+      },
+    }),
+    margin: Margin,
+    link: Link.configure({
+      openOnClick: false,
+      enableClickSelection: true,
+    }),
+    image: BlockImage,
+    inlineImage: InlineImage,
+    video: Video,
+    audio: Audio,
+    'code-block': CodeBlock,
+    symbol: Symbol,
+    math: Mathematics.configure({
+      katex: { throwOnError: false },
+    }),
+    tag: Tag,
+    columns: Columns,
+    callout: Callout,
+    mention: Mention.configure({
+      suggestion: getUsersSuggestion(users, container),
+    }),
+    'date-time': Datetime,
+    'option-box': OptionBox,
+    bookmark: Bookmark,
+    footnote: [Footnotes, FootnoteReference, Footnote],
+    'hard-break': BreakMarks.configure({
+      visible: page?.showBreakMarks,
+    }),
+    'horizontal-rule': HorizontalRule,
+    toc: Toc,
+    'text-box': TextBox,
+    'web-page': Iframe,
+  }
+
+  const buildInExtensions = [
+    StarterKit.configure({
+      document: false,
+      bold: false,
+      codeBlock: false,
+      horizontalRule: false,
+      undoRedo: false,
+      link: false,
+      placeholder: false,
+      dropcursor: false,
+      selection: false,
+      bulletList: false,
+      orderedList: false,
+      trailingNode: false,
+      listKeymap: true,
+    }),
+    Document.extend({
+      content: disableExtensions.includes('footnote')
+        ? doc.structure
+        : `${doc.structure} footnotes?`,
+    }),
+    TextStyleKit.configure({
+      lineHeight: false,
+    }),
+    UndoRedo.extend({
+      addKeyboardShortcuts() {
+        // 返回空对象表示移除所有默认快捷键
+        return {}
+      },
+    }),
+    Focus.configure({
+      className: 'umo-node-focused',
+      mode: 'all',
+    }),
+    TrailingNode.configure({
+      node: 'paragraph',
+    }),
+    Placeholder.configure({
+      showOnlyCurrent: false,
+      placeholder: ({ node, pos }) => {
+        if (node.type.name === 'heading') {
+          return pos === 0 ? t('document.headingPlaceholder') : ''
+        }
+        return String(l(doc?.placeholder || ''))
+      },
+    }),
+    FormatPainter,
+    WordWrap,
+    Bold.extend({
+      renderHTML: ({ HTMLAttributes }) => ['b', HTMLAttributes, 0],
+    }),
+    Subscript,
+    Superscript,
+    Indent,
+    TextAlign,
+    NodeAlign,
+    LetterSpacing,
+    TaskItem.configure({ nested: true }),
+    LineHeight,
+    SearchReplace,
+
+    // 插入
+    File,
+    Details.configure({
+      HTMLAttributes: {
+        class: 'umo-node-details',
+      },
+    }),
+    DetailsContent.configure({
+      HTMLAttributes: {
+        class: 'umo-node-details-content',
+      },
+    }),
+    DetailsSummary.configure({
+      HTMLAttributes: {
+        class: 'umo-node-details-summary',
+      },
+    }),
+
+    // 表格
+    Table,
+    TableRow,
+    TableCell,
+    TableHeader,
+
+    // 工具
+    Echarts,
+
+    // 页面
+    PageBreak,
+
+    // 其他
+    Selection,
+    NodeRange,
+    NodeSelect,
+    TableOfContents.configure({
+      getIndex: getHierarchicalIndexes,
+      scrollParent: () =>
+        document.querySelector(`${container} .umo-zoomable-container`),
+      getId: () => shortId(10),
+    }),
+    Typography.configure(doc?.typographyRules),
+    CharacterCount.configure({
+      limit: doc?.characterLimit !== 0 ? doc?.characterLimit : undefined,
+    }),
+    FileHandler.configure({
+      allowedMimeTypes: file?.allowedMimeTypes,
+      async onPaste(editor, files) {
+        // 记录 已有位置
+        const pageContainer = document.querySelector(
+          `${container} .umo-zoomable-container`,
+        )
+        const scrollTop = pageContainer?.scrollTop || 0
+        for (const file of files) {
+          const dimensions = await getImageDimensions(file)
+          editor.commands.insertFile({
+            file,
+            uploadFileMap: uploadFileMap.value,
+            autoType: true,
+            dimensions,
+          })
+        }
+        // 恢复滚动位置
+        if (pageContainer) {
+          // 使用 setTimeout 确保 DOM 更新完成后再恢复滚动位置
+          setTimeout(() => {
+            pageContainer.scrollTop = scrollTop
+          }, 0)
+        }
+      },
+      async onDrop(editor, files, pos) {
+        for (const file of files) {
+          const dimensions = await getImageDimensions(file)
+          editor.commands.insertFile({
+            file,
+            uploadFileMap: uploadFileMap.value,
+            autoType: true,
+            pos,
+            dimensions,
+          })
+        }
+      },
+    }),
+    Dropcursor.configure({
+      color: 'var(--umo-primary-color)',
+    }),
+    TypeWriter,
+    OfficePaste,
+  ]
+
+  // 合并扩展
+  Object.values(extensions).forEach((item) => {
+    if (!disableExtensions?.includes(item.name)) {
+      if (Array.isArray(item)) {
+        buildInExtensions.push(...item)
+        return
+      }
+      buildInExtensions.push(item)
+    }
+  })
+
+  if (doc?.enableNodeId) {
+    buildInExtensions.push(
+      UniqueID.configure({
+        types: nodeTypes,
+        generateID: () => shortId(10),
+      }),
+    )
+  }
+
+  return buildInExtensions
+}
+
+export const inputAndPasteRules = (options) => {
+  let enableRules = true
+  const $document = useState('document', options)
+  if (
+    !options.value.document?.enableMarkdown ||
+    !$document.value?.enableMarkdown
+  ) {
+    enableRules = [Mathematics, Typography, BlockImage]
+  }
+  return enableRules
+}

package/src/components/editor-main/src/extensions/letter-spacing.js

@@ -0,0 +1,66 @@
+import { Mark, mergeAttributes } from '@tiptap/core'
+
+export default Mark.create({
+  name: 'letterSpacing',
+
+  // 默认配置
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    }
+  },
+
+  // 定义属性如何映射到 HTML 样式
+  addAttributes() {
+    return {
+      spacing: {
+        default: null,
+        parseHTML: (element) =>
+          element.style.letterSpacing?.replace(/['"]+/g, ''),
+        renderHTML: (attributes) => {
+          if (!attributes.spacing) {
+            return {}
+          }
+          return {
+            style: `letter-spacing: ${attributes.spacing}`,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span',
+        getAttrs: (element) => {
+          const hasSpacing = element.style.letterSpacing
+          if (!hasSpacing) return false
+          return {}
+        },
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'span',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ]
+  },
+  addCommands() {
+    return {
+      setLetterSpacing:
+        (spacing) =>
+        ({ chain }) => {
+          return chain().setMark(this.name, { spacing }).run()
+        },
+      unsetLetterSpacing:
+        () =>
+        ({ chain }) => {
+          return chain().unsetMark(this.name).run()
+        },
+    }
+  },
+})