adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/extensions/foonotes/reference.js

@@ -0,0 +1,211 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { Fragment as PMFragment, Slice } from '@tiptap/pm/model'
+import { NodeSelection, Plugin, PluginKey } from '@tiptap/pm/state'
+
+import { shortId } from '../../utils/short-id'
+
+const REFNUM_ATTR = 'data-ref-num'
+const REF_CLASS = 'umo-node-footnote-ref'
+
+const normalizeHoverTitle = (value) => {
+  return String(value || '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+export default Node.create({
+  name: 'footnoteReference',
+  inline: true,
+  content: 'text*',
+  group: 'inline',
+  atom: true,
+  draggable: true,
+  parseHTML() {
+    return [
+      {
+        tag: `sup`,
+        priority: 1000,
+        getAttrs(node) {
+          const anchor = node.querySelector(`a.${REF_CLASS}:first-child`)
+          if (!anchor) {
+            return false
+          }
+          const id = anchor.getAttribute('data-fn-id')
+          const ref = anchor.getAttribute(REFNUM_ATTR)
+          return {
+            'data-fn-id': id || shortId(10),
+            referenceNumber: ref || anchor.innerText,
+          }
+        },
+        contentElement(node) {
+          return node.firstChild
+        },
+      },
+    ]
+  },
+  addAttributes() {
+    return {
+      class: {
+        default: REF_CLASS,
+      },
+      'data-fn-id': {
+        renderHTML(attributes) {
+          return {
+            'data-fn-id': attributes['data-fn-id'] || shortId(10),
+          }
+        },
+      },
+      referenceNumber: {},
+      caption: {
+        default: '',
+      },
+      href: {
+        renderHTML(attributes) {
+          return {
+            href: `#fn:${attributes['referenceNumber']}`,
+          }
+        },
+      },
+    }
+  },
+  renderHTML({ HTMLAttributes }) {
+    const { referenceNumber, ...attributes } = HTMLAttributes
+    const attrs = mergeAttributes(this.options.HTMLAttributes, attributes)
+    attrs[REFNUM_ATTR] = referenceNumber
+
+    return [
+      'sup',
+      { id: `fnref:${referenceNumber}` },
+      ['a', attrs, `[${HTMLAttributes.referenceNumber}]`],
+    ]
+  },
+  addProseMirrorPlugins() {
+    const { editor } = this
+    const mapNode = (node) => {
+      if (node.type.name === this.name) {
+        const newAttrs = { ...node.attrs, 'data-fn-id': shortId(10) }
+        return node.type.create(newAttrs, node.content, node.marks)
+      }
+      if (node.content && node.content.size > 0) {
+        const newChildren = []
+        let changed = false
+        node.content.forEach((child) => {
+          const mapped = mapNode(child)
+          if (mapped !== child) {
+            changed = true
+          }
+          newChildren.push(mapped)
+        })
+        if (changed) {
+          return node.copy(PMFragment.from(newChildren))
+        }
+      }
+      return node
+    }
+    return [
+      new Plugin({
+        key: new PluginKey('footnotePasteHandler'),
+        props: {
+          transformPasted(slice) {
+            const mappedNodes = []
+            let changed = false
+
+            slice.content.forEach((node) => {
+              const mapped = mapNode(node)
+              if (mapped !== node) {
+                changed = true
+              }
+              mappedNodes.push(mapped)
+            })
+
+            if (!changed) {
+              return slice
+            }
+
+            return new Slice(
+              PMFragment.from(mappedNodes),
+              slice.openStart,
+              slice.openEnd,
+            )
+          },
+        },
+      }),
+      new Plugin({
+        key: new PluginKey('footnoteRefClick'),
+        props: {
+          handleDoubleClickOn(view, pos, node, nodePos, event) {
+            if (node.type.name !== 'footnoteReference') return false
+            event.preventDefault()
+            const id = node.attrs['data-fn-id']
+            return editor.commands.focusFootnote(id)
+          },
+          handleClickOn(view, pos, node, nodePos, event) {
+            if (node.type.name !== 'footnoteReference') return false
+            event.preventDefault()
+            const { selection } = editor.state.tr
+            if (selection instanceof NodeSelection && selection.node.eq(node)) {
+              const id = node.attrs['data-fn-id']
+              return editor.commands.focusFootnote(id)
+            } else {
+              editor.chain().setNodeSelection(nodePos).run()
+              return true
+            }
+          },
+        },
+      }),
+      new Plugin({
+        key: new PluginKey('footnoteRefHoverTitle'),
+        props: {
+          handleDOMEvents: {
+            mouseover(view, event) {
+              const target = event?.target
+              if (!(target instanceof Element)) return false
+              const anchor = target.closest(`a.${REF_CLASS}`)
+              if (!anchor) return false
+              const id = anchor.getAttribute('data-fn-id')
+              if (!id) return false
+              const matchedFootnote = editor.$node('footnote', {
+                'data-fn-id': id,
+              })
+              const caption = normalizeHoverTitle(
+                matchedFootnote?.node?.textContent,
+              )
+              if (!caption) return false
+              anchor.setAttribute('caption', caption)
+              return false
+            },
+          },
+        },
+      }),
+    ]
+  },
+  addCommands() {
+    return {
+      addFootnote:
+        () =>
+        ({ state, tr }) => {
+          const node = this.type.create({
+            'data-fn-id': shortId(10),
+          })
+          tr.insert(state.selection.anchor, node)
+          return true
+        },
+    }
+  },
+  addInputRules() {
+    return [
+      {
+        find: /\[\^(.*?)\]/,
+        type: this.type,
+        undoable: true,
+        handler({ range, match, chain }) {
+          const start = range.from
+          const end = range.to
+          if (match[1]) {
+            chain().deleteRange({ from: start, to: end }).addFootnote().run()
+          }
+        },
+      },
+    ]
+  },
+})

package/src/components/editor-main/src/extensions/foonotes/rules.js

@@ -0,0 +1,103 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { ReplaceStep } from '@tiptap/pm/transform'
+
+import { syncFootnoteReferenceCaptions, updateFootnotesList } from './utils'
+
+export default Extension.create({
+  name: 'footnoteRules',
+  priority: 1000,
+  addCommands() {
+    return {
+      syncFootnoteCaptions:
+        () =>
+        ({ state, dispatch }) => {
+          const { tr } = state
+          const synced = syncFootnoteReferenceCaptions(tr)
+          if (!synced) return false
+          tr.setMeta('addToHistory', false)
+          tr.setMeta('footnoteAutoSync', true)
+          dispatch?.(tr)
+          return true
+        },
+    }
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('footnoteRules'),
+        filterTransaction(tr) {
+          const { from, to } = tr.selection
+          if (from === 0 && to === tr.doc.content.size) return true
+          let selectedFootnotes = false
+          let selectedContent = false
+          let footnoteCount = 0
+          tr.doc.nodesBetween(from, to, (node, _, parent) => {
+            if (parent?.type.name === 'doc' && node.type.name !== 'footnotes') {
+              selectedContent = true
+            } else if (node.type.name === 'footnote') {
+              footnoteCount += 1
+            } else if (node.type.name === 'footnotes') {
+              selectedFootnotes = true
+            }
+          })
+          const overSelected = selectedContent && selectedFootnotes
+          return !overSelected && footnoteCount <= 1
+        },
+        appendTransaction(transactions, oldState, newState) {
+          if (transactions.some((tr) => tr.getMeta('footnoteAutoSync'))) {
+            return null
+          }
+          if (!transactions.some((tr) => tr.docChanged)) {
+            return null
+          }
+          const newTr = newState.tr
+          let refsChanged = false
+          for (const tr of transactions) {
+            if (!tr.docChanged) continue
+            for (const step of tr.steps) {
+              if (!(step instanceof ReplaceStep)) continue
+
+              const isDelete = step.from !== step.to
+              const isInsert = step.slice.size > 0
+
+              if (isInsert) {
+                step.slice.content.descendants((node) => {
+                  if (node?.type.name === 'footnoteReference') {
+                    refsChanged = true
+                    return false
+                  }
+                })
+              }
+              if (isDelete && !refsChanged) {
+                tr.before.nodesBetween(
+                  step.from,
+                  Math.min(tr.before.content.size, step.to),
+                  (node) => {
+                    if (node.type.name === 'footnoteReference') {
+                      refsChanged = true
+                      return false
+                    }
+                  },
+                )
+              }
+            }
+          }
+
+          let changed = false
+          if (refsChanged) {
+            updateFootnotesList(newTr, newState)
+            changed = true
+          }
+
+          const synced = syncFootnoteReferenceCaptions(newTr)
+          if (synced) changed = true
+
+          if (!changed) return null
+          newTr.setMeta('footnoteAutoSync', true)
+          return newTr
+        },
+      }),
+    ]
+  },
+})

package/src/components/editor-main/src/extensions/foonotes/utils.js

@@ -0,0 +1,171 @@
+import { Fragment } from '@tiptap/pm/model'
+
+export const updateFootnoteReferences = (tr) => {
+  let count = 1
+  const nodes = []
+  tr.doc.descendants((node, pos) => {
+    if (node.type.name === 'footnoteReference') {
+      const next = `${count}`
+      if (node.attrs.referenceNumber !== next) {
+        tr.setNodeAttribute(pos, 'referenceNumber', next)
+      }
+      nodes.push(node)
+      count += 1
+    }
+  })
+  return nodes
+}
+
+const normalizeCaption = (value) => {
+  return String(value || '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const getFootnoteCaptionText = (footnote) => {
+  const parts = []
+  footnote.content.descendants((node) => {
+    if (node.type.name !== 'paragraph') return
+    const text = normalizeCaption(node.textContent)
+    if (text) parts.push(text)
+  })
+  return normalizeCaption(parts.join(' '))
+}
+
+export const syncFootnoteReferenceCaptions = (tr) => {
+  const idToCaption = {}
+  tr.doc.descendants((node) => {
+    if (node.type.name !== 'footnote') return
+    const id = node.attrs?.['data-fn-id']
+    if (!id) return
+    const caption = getFootnoteCaptionText(node)
+    if (caption) idToCaption[id] = caption
+  })
+
+  let changed = false
+  tr.doc.descendants((node, pos) => {
+    if (node.type.name !== 'footnoteReference') return
+    const id = node.attrs?.['data-fn-id']
+    if (!id) return
+    const caption = idToCaption[id]
+    if (!caption) return
+    if (normalizeCaption(node.attrs?.caption) === caption) return
+    tr.setNodeAttribute(pos, 'caption', caption)
+    changed = true
+  })
+  return changed
+}
+
+const getFootnotes = (tr) => {
+  let footnotesRange
+  const footnotes = []
+  tr.doc.descendants((node, pos) => {
+    if (node.type.name === 'footnote') {
+      footnotes.push(node)
+    } else if (node.type.name === 'footnotes') {
+      footnotesRange = { from: pos, to: pos + node.nodeSize }
+    } else {
+      return false
+    }
+  })
+  return { footnotesRange, footnotes }
+}
+
+const isEmptyFootnoteContent = (footnote) => {
+  if (!footnote || footnote.childCount !== 1) return false
+  const first = footnote.firstChild
+  if (!first || first.type.name !== 'paragraph') return false
+  return first.content.size === 0
+}
+
+export const updateFootnotesList = (tr, state) => {
+  const footnoteReferences = updateFootnoteReferences(tr)
+
+  const footnoteType = state.schema.nodes.footnote
+  const footnotesType = state.schema.nodes.footnotes
+  const paragraphType = state.schema.nodes.paragraph
+
+  const emptyParagraph = state.schema.nodeFromJSON({
+    type: 'paragraph',
+    content: [],
+  })
+
+  const { footnotesRange, footnotes } = getFootnotes(tr)
+
+  // a mapping of footnote id -> footnote node
+  const footnoteIds = footnotes.reduce((obj, footnote) => {
+    obj[footnote.attrs['data-fn-id']] = footnote
+    return obj
+  }, {})
+
+  const newFootnotes = []
+
+  const footnoteRefIds = new Set(
+    footnoteReferences.map((ref) => ref.attrs['data-fn-id']),
+  )
+  const deleteFootnoteIds = new Set()
+  for (const footnote of footnotes) {
+    const id = footnote.attrs['data-fn-id']
+    if (!footnoteRefIds.has(id) || deleteFootnoteIds.has(id)) {
+      deleteFootnoteIds.add(id)
+      footnote.content.descendants((node) => {
+        if (node.type.name === 'footnoteReference')
+          deleteFootnoteIds.add(node.attrs['data-fn-id'])
+      })
+    }
+  }
+
+  for (let i = 0; i < footnoteReferences.length; i++) {
+    const ref = footnoteReferences[i]
+    const refId = ref.attrs['data-fn-id']
+    if (deleteFootnoteIds.has(refId)) continue
+    const initialCaption = normalizeCaption(ref.attrs?.caption)
+    if (refId in footnoteIds) {
+      const footnote = footnoteIds[refId]
+      const nextContent =
+        initialCaption && isEmptyFootnoteContent(footnote)
+          ? Fragment.from([
+              paragraphType.create(
+                undefined,
+                state.schema.text(initialCaption),
+              ),
+            ])
+          : footnote.content
+      newFootnotes.push(
+        footnoteType.create(
+          { ...footnote.attrs, id: `fn:${i + 1}` },
+          nextContent,
+        ),
+      )
+    } else {
+      const content = initialCaption
+        ? [paragraphType.create(undefined, state.schema.text(initialCaption))]
+        : [emptyParagraph]
+      const newNode = footnoteType.create(
+        {
+          'data-fn-id': refId,
+          id: `fn:${i + 1}`,
+        },
+        content,
+      )
+      newFootnotes.push(newNode)
+    }
+  }
+
+  if (newFootnotes.length === 0) {
+    if (footnotesRange) {
+      tr.delete(footnotesRange.from, footnotesRange.to)
+    }
+  } else if (!footnotesRange) {
+    tr.insert(
+      tr.doc.content.size,
+      footnotesType.create(undefined, Fragment.from(newFootnotes)),
+    )
+  } else {
+    tr.replaceWith(
+      footnotesRange.from + 1,
+      footnotesRange.to - 1,
+      Fragment.from(newFootnotes),
+    )
+  }
+}

package/src/components/editor-main/src/extensions/format-painter.js

@@ -0,0 +1,104 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+export default Extension.create({
+  name: 'painter',
+  addCommands() {
+    // 添加命令
+    return {
+      setFormatPainter:
+        (once) =>
+        ({ editor, view }) => {
+          const { tr } = view.state
+          const marks = editor.state.selection.$head.marks()
+          view.painter = {
+            enabled: true,
+            once,
+            marks,
+          }
+          // 设置格式刷开始的动作
+          view.dispatch(tr.setMeta('painterAction', { type: 'start', marks }))
+          return true
+        },
+      unsetFormatPainter:
+        () =>
+        ({ view }) => {
+          const { tr } = view.state
+          view.painter = {
+            enabled: false,
+            once: true,
+            marks: [],
+          }
+          // 设置格式刷结束的动作
+          view.dispatch(tr.setMeta('painterAction', { type: 'end' }))
+          return true
+        },
+    }
+  },
+  addProseMirrorPlugins() {
+    // 添加插件
+    return [
+      new Plugin({
+        key: new PluginKey('format-painter'),
+        state: {
+          init: () => [],
+          apply(tr, set) {
+            const action = tr.getMeta('painterAction')
+            if (action?.type === 'start') {
+              return action.marks
+            }
+            if (action?.type === 'end') {
+              return []
+            }
+            return set
+          },
+        },
+        props: {
+          handleDOMEvents: {
+            mousedown(view) {
+              const marks = this.getState(view.state)
+
+              // 通过 view 传值，方便获取，但是不建议这样做
+              const { painter } = view
+
+              if (!marks || marks.length === 0) {
+                return false // 如果没有标记，则不执行任何操作
+              }
+              const mouseup = () => {
+                document.removeEventListener('mouseup', mouseup)
+
+                if (!painter.enabled) {
+                  return
+                }
+
+                const { dispatch } = view
+                let { tr, selection } = view.state
+
+                tr = tr.removeMark(selection.from, selection.to)
+                for (const mark of marks) {
+                  if (mark.type.name !== 'link') {
+                    tr = tr.addMark(selection.from, selection.to, mark)
+                  }
+                }
+                if (painter.once) {
+                  painter.enabled = false
+                  painter.marks = []
+                  dispatch(tr.setMeta('painterAction', { type: 'end' }))
+                } else {
+                  dispatch(
+                    tr.setMeta('painterAction', {
+                      type: 'start',
+                      marks: painter.marks,
+                    }),
+                  )
+                }
+              }
+              document.addEventListener('mouseup', mouseup)
+              return true
+            },
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/components/editor-main/src/extensions/horizontal-rule.js

@@ -0,0 +1,93 @@
+import { nodeInputRule } from '@tiptap/core'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
+import { NodeSelection, TextSelection } from '@tiptap/pm/state'
+
+export default HorizontalRule.extend({
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: 'umo-page-divider',
+        'data-line-number': false,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'hr' }]
+  },
+  addAttributes() {
+    return {
+      'data-type': {
+        parseHTML: (element) => element.getAttribute('data-type') || 'single',
+      },
+      color: {
+        parseHTML: (element) => element.getAttribute('data-color'),
+        renderHTML: (attributes) => {
+          return {
+            'data-color': attributes.color,
+            style: `color: ${attributes.color || 'inherit'}`,
+          }
+        },
+      },
+    }
+  },
+  addCommands() {
+    return {
+      setHorizontalRule:
+        ({ type, color }) =>
+        ({ chain, state }) => {
+          const { $to: $originTo } = state.selection
+          const currentChain = chain()
+          if ($originTo.parentOffset === 0) {
+            currentChain.insertContentAt(Math.max($originTo.pos - 2, 0), {
+              type: this.name,
+              attrs: { 'data-type': type, color },
+            })
+          } else {
+            currentChain.insertContent({
+              type: this.name,
+              attrs: { 'data-type': type, color },
+            })
+          }
+          return (
+            currentChain
+              // set cursor after horizontal rule
+              .command(({ tr, dispatch }) => {
+                if (dispatch) {
+                  const { $to } = tr.selection
+                  const posAfter = $to.end()
+                  if ($to.nodeAfter) {
+                    if ($to.nodeAfter.isTextblock) {
+                      tr.setSelection(TextSelection.create(tr.doc, $to.pos + 1))
+                    } else if ($to.nodeAfter.isBlock) {
+                      tr.setSelection(NodeSelection.create(tr.doc, $to.pos))
+                    } else {
+                      tr.setSelection(TextSelection.create(tr.doc, $to.pos))
+                    }
+                  } else {
+                    const node =
+                      $to.parent.type.contentMatch.defaultType?.create()
+                    if (node) {
+                      tr.insert(posAfter, node)
+                      tr.setSelection(
+                        TextSelection.create(tr.doc, posAfter + 1),
+                      )
+                    }
+                  }
+                  tr.scrollIntoView()
+                }
+                return true
+              })
+              .run()
+          )
+        },
+    }
+  },
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        type: this.type,
+      }),
+    ]
+  },
+})