adtec-core-package 2.9.9 → 3.0.1

package/src/components/editor-main/src/components/editor/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <editor-content
+    class="umo-editor-content"
+    :class="{
+      'show-bookmark': page.showBookmark,
+      'show-line-number': page.showLineNumber,
+      'format-painter': editor?.view?.painter?.enabled,
+      'is-empty': editor?.isEmpty && editor?.state.doc.childCount <= 1,
+      'is-readonly': !editor?.isEditable,
+    }"
+    :editor="editor"
+    :style="{
+      lineHeight: defaultLineHeight,
+    }"
+    :spellcheck="
+      options.document?.enableSpellcheck && $document.enableSpellcheck
+    "
+  />
+  <template v-if="editor && !destroyed">
+    <menus-block
+      v-if="options.document?.enableBlockMenu"
+      v-show="
+        page.zoomLevel === 100 && !page.preview?.enabled && editor.isEditable
+      "
+    />
+    <menus-bubble
+      v-if="options.document?.enableBubbleMenu"
+      v-show="!editor?.view?.painter?.enabled && !editor?.isEmpty"
+    >
+      <template #bubble_menu="props">
+        <slot name="bubble_menu" v-bind="props" />
+      </template>
+    </menus-bubble>
+  </template>
+</template>
+
+<script setup>
+import { useState } from '../../composables/state.js';
+import { computed as _computed } from 'vue';
+
+import { migrateMathStrings } from '@tiptap/extension-mathematics'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+import { getDefaultExtensions, inputAndPasteRules } from '../../extensions'
+import { contentTransform } from '../../utils/content-transform'
+import { addHistory } from '../../utils/history-record'
+import { loadResource } from '../../utils/load-resource'
+
+
+import { inject, watch, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
+const destroyed = inject('destroyed')
+const page = inject('page')
+const options = inject('options')
+const uploadFileMap = inject('uploadFileMap')
+const historyRecords = inject('historyRecords')
+
+const $document = useState('document', options)
+
+const defaultLineHeight = _computed(
+  () => options.value.dicts?.lineHeights?.find((item) => item.default)?.value,
+)
+
+const container = inject('container')
+const extensions = getDefaultExtensions({
+  container,
+  options,
+  uploadFileMap,
+})
+
+// 同步文档内容
+let syncContentTimer = null
+const syncDocumentContent = (targetEditor = editorInstance) => {
+  if (!$document.value || !targetEditor) {
+    return
+  }
+  $document.value.content = targetEditor.getHTML()
+}
+const scheduleSyncDocumentContent = () => {
+  if (syncContentTimer !== null) {
+    clearTimeout(syncContentTimer)
+  }
+  syncContentTimer = setTimeout(() => {
+    syncContentTimer = null
+    syncDocumentContent(editorInstance)
+  }, 800)
+}
+const flushSyncDocumentContent = () => {
+  if (syncContentTimer !== null) {
+    clearTimeout(syncContentTimer)
+    syncContentTimer = null
+  }
+  syncDocumentContent(editorInstance)
+}
+
+// 处理列表项的键盘事件
+const getActiveListItemType = (selection) => {
+  const { $from } = selection
+  const { depth: maxDepth } = $from
+  for (let depth = maxDepth; depth > 0; depth -= 1) {
+    const currentNode = $from.node(depth)
+    const nodeName = currentNode?.type?.name
+    if (nodeName === 'listItem' || nodeName === 'taskItem') {
+      return nodeName
+    }
+  }
+  return null
+}
+const handleEditorKeyDown = (view, event) => {
+  const customHandleKeyDown = options.value.document?.editorProps?.handleKeyDown
+  if (
+    event.key === 'Enter' &&
+    !event.shiftKey &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.isComposing
+  ) {
+    const itemType = getActiveListItemType(view.state.selection)
+    if (itemType && editorInstance.commands.splitListItem(itemType)) {
+      event.preventDefault()
+      return true
+    }
+  }
+  return customHandleKeyDown?.(view, event) || false
+}
+
+const initialContent = contentTransform(options.value.document?.content)
+const hostAppContext = getCurrentInstance()?.appContext
+
+const editorInstance = new Editor({
+  editable: !options.value.document?.readOnly,
+  autofocus: options.value.document?.autofocus,
+  content: '',
+  enableInputRules: inputAndPasteRules(options),
+  enablePasteRules: inputAndPasteRules(options),
+  editorProps: {
+    attributes: {
+      class: 'umo-editor',
+    },
+    ...options.value.document?.editorProps,
+    handleKeyDown: handleEditorKeyDown,
+  },
+  // enableContentCheck: true,
+  parseOptions: options.value.document?.parseOptions,
+  extensions: [...extensions, ...options.value.extensions],
+  onCreate({ editor }) {
+    if (options.value.disableExtensions.includes('math')) {
+      migrateMathStrings(editor)
+    }
+  },
+  onUpdate({ editor }) {
+    addHistory(historyRecords, 'editor', editor?.state?.history$)
+    scheduleSyncDocumentContent()
+  },
+  onBlur() {
+    flushSyncDocumentContent()
+  },
+})
+
+if (hostAppContext) {
+  editorInstance.appContext = hostAppContext
+}
+
+const editor = inject('editor')
+editor.value = editorInstance
+editor.value.storage.container = container
+watch(
+  () => options.value,
+  () => {
+    editor.value.storage.options = options.value
+  },
+  { immediate: true, deep: true },
+)
+
+/** 须在 EditorContent 挂载并 createNodeViews 之后再灌内容，否则 NodeView 回退为裸 img */
+async function mountInitialContent() {
+  await nextTick()
+  await nextTick()
+  if (!initialContent || editorInstance.isDestroyed) return
+  editorInstance.commands.setContent(initialContent, { emitUpdate: false })
+}
+
+onMounted(async () => {
+  await mountInitialContent()
+
+  const { disableExtensions, cdnUrl } = options.value
+  const has = (name) => !disableExtensions.includes(name)
+  const libUrl = `${cdnUrl}/libs`
+  if (has('math')) {
+    loadResource(`${libUrl}/katex/katex.min.css`, 'css', 'katex-style')
+  }
+  if (has('mermaid')) {
+    loadResource(`${libUrl}/mermaid/mermaid.min.js`, 'script', 'mermaid-script')
+  }
+  window.addEventListener('beforeunload', flushSyncDocumentContent)
+  window.addEventListener('pagehide', flushSyncDocumentContent)
+  document.addEventListener('visibilitychange', flushSyncDocumentContent)
+})
+
+// 销毁编辑器实例
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', flushSyncDocumentContent)
+  window.removeEventListener('pagehide', flushSyncDocumentContent)
+  document.removeEventListener('visibilitychange', flushSyncDocumentContent)
+  flushSyncDocumentContent()
+  editorInstance.unmount()
+})
+</script>
+
+<style lang="less">
+@import '../../assets/styles/editor.less';
+@import '../../assets/styles/drager.less';
+</style>

package/src/components/editor-main/src/components/icon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg
+    class="umo-icon"
+    aria-hidden="true"
+    :width="size"
+    :height="size"
+    :style="iconStyle"
+  >
+    <use :xlink:href="`#umo-icon-${props.name}`" />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String,
+    default: '1em',
+  },
+  color: {
+    type: String,
+    default: 'currentcolor',
+  },
+})
+
+const iconStyle = computed(() => {
+  if (!props.color || props.color === 'currentcolor') {
+    return undefined
+  }
+  return { color: props.color }
+})
+</script>
+
+<style lang="less">
+.umo-icon {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,22 @@
+import '../assets/icons/register.js'
+
+import UmoEditor from './index.vue'
+import UmoMenuButton from './menus/button.vue'
+import UmoDialog from './modal.vue'
+import UmoTooltip from './tooltip.vue'
+
+const useUmoEditor = {
+  install: (app, options) => {
+    app.provide('defaultOptions', options || {})
+    app.component(UmoEditor.name || 'UmoEditor', UmoEditor)
+  },
+}
+
+export {
+  UmoEditor as default,
+  UmoDialog,
+  UmoEditor,
+  UmoMenuButton,
+  UmoTooltip,
+  useUmoEditor,
+}