adtec-core-package 3.0.0 → 3.0.2

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

@@ -0,0 +1,333 @@
+<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 hover-shadow umo-select-outline umo-node-file"
+      :style="{
+        width: attrs.fitWidth ? '100%' : supportPreview ? '260px' : '220px',
+      }"
+    >
+      <div class="umo-file-icon">
+        <img :src="fileIcon" class="icon-file" />
+      </div>
+      <div class="umo-file-info">
+        <div class="umo-file-name" :title="attrs.name || t('file.unknownName')">
+          {{ attrs.name || t('file.unknownName') }}
+        </div>
+        <div class="umo-file-meta">
+          {{ attrs.size ? prettyBytes(attrs.size) : t('file.unknownSize') }}
+        </div>
+      </div>
+      <div class="umo-file-action">
+        <div
+          v-if="!attrs.uploaded"
+          class="umo-action-item"
+          :title="t('file.uploading')"
+        >
+          <icon class="loading" name="loading" />
+        </div>
+        <template v-else>
+          <div
+            v-if="supportPreview"
+            class="umo-action-item"
+            :title="t('file.preview')"
+            :data-preview-url="previewURL"
+            :data-file-icon="fileIcon"
+            :data-file-name="attrs.name"
+            @click.stop="togglePreview"
+          >
+            <icon name="view" />
+          </div>
+          <a
+            :href="attrs.url"
+            :download="attrs.name"
+            target="_blank"
+            class="umo-action-item"
+            :title="t('file.download')"
+          >
+            <icon name="download" />
+          </a>
+        </template>
+      </div>
+    </div>
+    <modal
+      dialog-class-name="umo-file-preview-modal"
+      :visible="previewModal"
+      :header="false"
+      :footer="false"
+      width="90vw"
+    >
+      <div class="umo-file-preview-modal-header">
+        <img :src="fileIcon" class="file-icon" />
+        <h3>{{ attrs.name || t('file.unknownName') }}</h3>
+        <t-button
+          class="close-btn"
+          size="small"
+          shape="square"
+          variant="text"
+          @click="previewModal = false"
+        >
+          <icon name="close" size="18" />
+        </t-button>
+      </div>
+      <div v-if="previewModal" class="umo-file-preview-modal-body">
+        <iframe :src="previewURL"></iframe>
+      </div>
+    </modal>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { computed as _computed, ref as _ref } from 'vue';
+
+import { isAsyncFunction, isFunction } from '@tool-belt/type-predicates'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import prettyBytes from 'pretty-bytes'
+
+import { getFileExtname, getFileIcon } from '../../utils/file'
+
+import { updateAttributesWithoutHistory } from './'
+
+
+import { inject, ref, onMounted, onBeforeUnmount } from 'vue';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { getPos } = props
+const editor = inject('editor')
+const options = inject('options')
+const container = inject('container')
+const uploadFileMap = inject('uploadFileMap')
+const containerRef = ref(null)
+
+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,
+  }
+})
+
+const fileIcon = _computed(() => {
+  return `${options.value.cdnUrl}/icons/file/${getFileIcon(attrs.value.name)}.svg`
+})
+
+let previewModal = _ref(false)
+let previewURL = _ref(null)
+
+const getPreviewInfo = () => {
+  const { preview } = options.value.file
+  const extname = getFileExtname(attrs.value.name)
+  const match = preview.find(
+    (item) => extname && item.extensions.includes(extname),
+  )
+  return match
+}
+const setPreviewURL = () => {
+  const match = getPreviewInfo()
+  if (match?.url.includes('{url}')) {
+    previewURL.value = match.url
+      .replace(/{{url}}/g, encodeURIComponent(attrs.value.url))
+      .replace(/{url}/g, attrs.value.url)
+  }
+}
+
+onMounted(async () => {
+  if (!attrs.value.uploaded && uploadFileMap.value.has(attrs.value.id)) {
+    try {
+      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, url, uploaded: true },
+          getPos(),
+        )
+      }
+      uploadFileMap.value.delete(attrs.value.id)
+    } catch (e) {
+      useMessage('error', { attach: container, content: e.message })
+    }
+  }
+  setPreviewURL()
+})
+
+onBeforeUnmount(() => {
+  setTimeout(() => {
+    if (editor.value.isDestroyed) return
+    options.value.onFileDelete(attrs.value.id, attrs.value.src, `image:${attrs.value.type}`)
+  }, 500)
+})
+
+const supportPreview = _computed(() => {
+  const supportNodes = ['image', 'video', 'audio']
+  return supportNodes.includes(attrs.value.previewType) || previewURL.value !== null
+})
+const togglePreview = () => {
+  const match = getPreviewInfo(attrs.value.name)
+  const onPreview = match?.onPreview
+  if (isFunction(onPreview) || isAsyncFunction(onPreview)) {
+    try {
+      onPreview(attrs.value)
+      return
+    } catch {}
+  }
+  if (previewURL.value !== null) {
+    previewModal.value = true
+    return
+  }
+  editor.value.commands.insertContent({
+    type: attrs.value.previewType,
+    attrs: {
+      ...attrs.value,
+      src: attrs.value.url,
+    },
+  })
+}
+</script>
+
+<style lang="less">
+.umo-node-view {
+  .umo-node-file {
+    display: inline-flex;
+    align-items: center;
+    padding: 12px;
+    outline: solid 1px var(--umo-content-node-border);
+    overflow: hidden;
+    background-color: #fff;
+    border-radius: var(--umo-content-node-radius);
+
+    .umo-file-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .umo-file-icon {
+      width: 32px;
+      height: 32px;
+      margin-right: 8px;
+      .icon-file {
+        width: 32px;
+        display: block;
+      }
+    }
+
+    .umo-file-name {
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 1.2;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+      width: 100%;
+      padding-right: 10px;
+      box-sizing: border-box;
+    }
+
+    .umo-file-meta {
+      font-size: 12px;
+      color: #999;
+      line-height: 1;
+      margin-top: 6px;
+    }
+
+    .umo-file-action {
+      display: flex;
+      align-items: center;
+      color: #999;
+      gap: 5px;
+
+      .umo-action-item {
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 32px;
+        width: 32px;
+        background-color: #fff;
+        box-sizing: border-box;
+        cursor: pointer;
+        border-radius: 50%;
+        color: #999;
+
+        &:hover {
+          border: solid 1px var(--umo-primary-color);
+          color: var(--umo-primary-color);
+        }
+
+        .loading {
+          animation: turn 1s linear infinite;
+        }
+      }
+    }
+  }
+}
+
+.umo-file-preview-modal {
+  padding: 0 !important;
+  overflow: hidden;
+  .umo-dialog {
+    &__header {
+      display: none !important;
+    }
+    &__body {
+      padding: 0 !important;
+    }
+  }
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 20px 15px;
+    position: relative;
+    .file-icon {
+      height: 24px;
+      display: block;
+    }
+    h3 {
+      margin: 0;
+      font-size: 18px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+      width: calc(100% - 100px);
+    }
+    .close-btn {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+    }
+  }
+  &-body {
+    iframe {
+      display: block;
+      width: 100%;
+      height: calc(90vh - 164px);
+      border: solid 1px var(--umo-border-color-light);
+      box-sizing: border-box;
+    }
+  }
+}
+
+@keyframes turn {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/file-handler.js

@@ -0,0 +1,93 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { isOfficeLikeClipboardData } from './office-paste/utils'
+
+const FileHandlePlugin = (option) => {
+  const { key, editor, onPaste, onDrop, allowedMimeTypes } = option
+  return new Plugin({
+    key: key || new PluginKey('file-handler'),
+    props: {
+      handleDrop(view, event) {
+        const { dataTransfer } = event
+        if (!onDrop) {
+          return false
+        }
+        if (!dataTransfer?.files.length) {
+          return false
+        }
+        const pos = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        })
+        let files = Array.from(dataTransfer.files)
+        if (allowedMimeTypes.length > 0) {
+          files = files.filter((item) => {
+            if (allowedMimeTypes.includes(item.type)) {
+              return true
+            }
+            return allowedMimeTypes.includes(`${item.type.split('/')[0]}/*`)
+          })
+        }
+        if (files.length !== 0) {
+          onDrop(editor, files, pos === null ? undefined : pos.pos)
+          event.preventDefault()
+          event.stopPropagation()
+          return true
+        }
+        return false
+      },
+      handlePaste(_view, event) {
+        const { clipboardData } = event
+        if (event.skipFileHandler) {
+          return false
+        }
+        if (isOfficeLikeClipboardData(clipboardData)) {
+          return false
+        }
+        if (!onPaste) {
+          return false
+        }
+        if (!clipboardData?.files.length) {
+          return false
+        }
+        let files = Array.from(clipboardData.files)
+        const html = clipboardData.getData('text/html')
+        if (allowedMimeTypes.length > 0) {
+          files = files.filter((item) => {
+            if (allowedMimeTypes.includes(item.type)) {
+              return true
+            }
+            return allowedMimeTypes.includes(`${item.type.split('/')[0]}/*`)
+          })
+        }
+        if (files.length !== 0) {
+          onPaste(editor, files, html)
+          event.preventDefault()
+          event.stopPropagation()
+          return true
+        }
+        return false
+      },
+    },
+  })
+}
+
+export default Extension.create({
+  name: 'fileHandler',
+  addOptions: () => ({
+    onPaste: undefined,
+    onDrop: undefined,
+    allowedMimeTypes: [],
+  }),
+  addProseMirrorPlugins() {
+    return [
+      FileHandlePlugin({
+        key: new PluginKey(this.name),
+        editor: this.editor,
+        allowedMimeTypes: this.options.allowedMimeTypes,
+        onDrop: this.options.onDrop,
+        onPaste: this.options.onPaste,
+      }),
+    ]
+  },
+})

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

@@ -0,0 +1,152 @@
+import { mergeAttributes } from '@tiptap/core'
+import { ListItem } from '@tiptap/extension-list'
+
+export default ListItem.extend({
+  name: 'footnote',
+  content() {
+    return this.options.content
+  },
+  isolating: true,
+  defining: true,
+  draggable: false,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      bulletListTypeName: 'bulletList',
+      orderedListTypeName: 'orderedList',
+      ...this.parent?.(),
+      content: 'paragraph+',
+    }
+  },
+  addAttributes() {
+    return {
+      id: {
+        isRequired: true,
+      },
+      'data-fn-id': {
+        isRequired: true,
+      },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'li',
+        getAttrs(node) {
+          const id = node.getAttribute('data-fn-id')
+          if (id) {
+            return {
+              'data-fn-id': node.getAttribute('data-fn-id'),
+            }
+          }
+          return false
+        },
+        priority: 1000,
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'li',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ]
+  },
+  addCommands() {
+    return {
+      focusFootnote:
+        (id) =>
+        ({ editor, chain }) => {
+          const matchedFootnote = editor.$node('footnote', {
+            'data-fn-id': id,
+          })
+          if (matchedFootnote) {
+            chain()
+              .focus()
+              .setTextSelection(
+                matchedFootnote.from + matchedFootnote.content.size,
+              )
+              .run()
+
+            matchedFootnote.element.scrollIntoView()
+            return true
+          }
+          return false
+        },
+    }
+  },
+  addKeyboardShortcuts() {
+    return {
+      'Mod-a': ({ editor }) => {
+        try {
+          const { selection } = editor.state
+          const { $from } = selection
+
+          for (let { depth } = $from; depth >= 0; depth--) {
+            const node = $from.node(depth)
+            if (node.type.name === 'footnote') {
+              const start = $from.start(depth)
+              const end = $from.end(depth)
+
+              editor.commands.setTextSelection({
+                from: start + 1,
+                to: end - 1,
+              })
+              return true
+            }
+          }
+
+          return false
+        } catch (e) {
+          return false
+        }
+      },
+      Tab: ({ editor }) => {
+        try {
+          const { selection } = editor.state
+          const pos = editor.$pos(selection.anchor)
+          if (!pos.after) return false
+          if (pos.after.node.type.name === 'footnotes') {
+            const firstChild = pos.after.node.child(0)
+            editor
+              .chain()
+              .setTextSelection(pos.after.from + firstChild.content.size)
+              .scrollIntoView()
+              .run()
+            return true
+          } else {
+            const startPos = selection.$from.start(2)
+            if (Number.isNaN(startPos)) return false
+            const parent = editor.$pos(startPos)
+            if (parent.node.type.name !== 'footnote' || !parent.after) {
+              return false
+            }
+            editor
+              .chain()
+              .setTextSelection(parent.after.to - 1)
+              .scrollIntoView()
+              .run()
+            return true
+          }
+        } catch {
+          return false
+        }
+      },
+      'Shift-Tab': ({ editor }) => {
+        const { selection } = editor.state
+        const startPos = selection.$from.start(2)
+        if (Number.isNaN(startPos)) return false
+        const parent = editor.$pos(startPos)
+        if (parent.node.type.name !== 'footnote' || !parent.before) {
+          return false
+        }
+        editor
+          .chain()
+          .setTextSelection(parent.before.to - 1)
+          .scrollIntoView()
+          .run()
+        return true
+      },
+    }
+  },
+})

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

@@ -0,0 +1,41 @@
+import { OrderedList } from '@tiptap/extension-list'
+
+import FootnoteRules from './rules'
+
+export default OrderedList.extend({
+  name: 'footnotes',
+  group: '',
+  isolating: true,
+  defining: true,
+  draggable: false,
+  content() {
+    return 'footnote*'
+  },
+  addAttributes() {
+    return {
+      class: {
+        default: 'umo-node-footnotes',
+      },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'ol.umo-node-footnotes',
+        priority: 1000,
+      },
+    ]
+  },
+  addKeyboardShortcuts() {
+    return {}
+  },
+  addCommands() {
+    return {}
+  },
+  addInputRules() {
+    return []
+  },
+  addExtensions() {
+    return [FootnoteRules]
+  },
+})

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

@@ -0,0 +1,7 @@
+// https://github.com/buttondown/tiptap-footnotes
+
+import Footnote from './footnote'
+import Footnotes from './footnotes'
+import FootnoteReference from './reference'
+
+export { Footnote, FootnoteReference, Footnotes }