adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,65 @@
+import { Table } from '@tiptap/extension-table'
+import { TableCell } from '@tiptap/extension-table/cell'
+import { TableHeader } from '@tiptap/extension-table/header'
+import { TableRow } from '@tiptap/extension-table/row'
+
+// 扩展表格能力
+const CustomTable = Table.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      HTMLAttributes: {
+        class: 'umo-node-table',
+      },
+      allowTableNodeSelection: true,
+      resizable: true,
+    }
+  },
+})
+
+// 扩展单元格
+const TableCellOptions = {
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('align') || null,
+        renderHTML: ({ align }) => ({ align }),
+      },
+      background: {
+        default: null,
+        parseHTML: (element) => {
+          const style = element.getAttribute('style') || ''
+          const match = style.match(/background(?:-color)?:\s*([^;]+)/i)
+          return match ? match[1].trim() : null
+        },
+        renderHTML: ({ background }) => {
+          return background ? { style: `background-color: ${background}` } : {}
+        },
+      },
+      color: {
+        default: null,
+        parseHTML: (element) => {
+          const style = element.getAttribute('style') || ''
+          const match = style.match(/(?<!background-)color:\s*([^;]+)/i)
+          if (style.includes('background-color')) return null
+          return match ? match[1].trim() : null
+        },
+        renderHTML: ({ color }) => {
+          return color ? { style: `color: ${color}` } : {}
+        },
+      },
+    }
+  },
+}
+
+const CustomTableHeader = TableHeader.extend(TableCellOptions)
+const CustomTableCell = TableCell.extend(TableCellOptions)
+
+export {
+  CustomTable as Table,
+  CustomTableCell as TableCell,
+  CustomTableHeader as TableHeader,
+  TableRow,
+}

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

@@ -0,0 +1,47 @@
+import { t } from '../../composables/i18n.js';
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'tag',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes() {
+    return {
+      type: { default: 'default' },
+      text: { default: t('bubbleMenu.tag.content') },
+      color: { default: '#999' },
+      backgroundColor: { default: 'rgba(0, 0, 0, 0.05)' },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'span[data-type="tag"]' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'span',
+      mergeAttributes(HTMLAttributes, { 'data-type': 'tag' }),
+      HTMLAttributes.text,
+    ]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      insertTag:
+        (options) =>
+        ({ chain }) => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: options,
+            })
+            .run()
+        },
+    }
+  },
+})

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

@@ -0,0 +1,51 @@
+<template>
+  <node-view-wrapper
+    as="span"
+    class="umo-node-tag"
+    @click.capture="editor?.commands.setNodeSelection(getPos())"
+  >
+    <span
+      class="umo-node-tag-text"
+      :style="{
+        color: attrs.color,
+        backgroundColor: attrs.backgroundColor,
+        cursor:
+          !options.document?.readOnly || editor.isEditable
+            ? 'pointer'
+            : 'default',
+      }"
+      v-text="attrs.text"
+    ></span>
+  </node-view-wrapper>
+</template>
+
+<script setup>import { computed as _computed } from 'vue';
+
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+
+import { inject } from 'vue';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const options = inject('options')
+const editor = inject('editor')
+</script>
+
+<style lang="less">
+.umo-node-tag {
+  margin: 0 0.2em;
+  background-color: transparent !important;
+  vertical-align: middle;
+  display: inline-block;
+  transform: translateY(-0.05em);
+  &-text {
+    border-radius: 0.2em;
+    padding: 0.1em 0.4em;
+    font-size: 0.9em;
+    margin: 0 0.2em;
+    white-space: nowrap;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-sizing: border-box;
+  }
+}
+</style>

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

@@ -0,0 +1,44 @@
+import TextAlign from '@tiptap/extension-text-align'
+
+export default TextAlign.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      types: ['heading', 'paragraph'],
+      alignments: ['left', 'center', 'right', 'justify', 'distributed'],
+    }
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          textAlign: {
+            default: this.options.defaultAlignment,
+            parseHTML: (element) => {
+              if (element.style.textAlignLast) {
+                return 'distributed'
+              }
+              return element.style.textAlign || this.options.defaultAlignment
+            },
+            renderHTML: (attributes) => {
+              if (attributes.textAlign === this.options.defaultAlignment) {
+                return {}
+              }
+              if (attributes.textAlign === 'distributed') {
+                return { style: 'text-align-last: justify' }
+              }
+              return { style: `text-align: ${attributes.textAlign}` }
+            },
+          },
+        },
+      },
+    ]
+  },
+  addKeyboardShortcuts() {
+    return {
+      ...this.parent?.(),
+      'Mod-Shift-d': () => this.editor.commands.setTextAlign('distributed'),
+    }
+  },
+})

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

@@ -0,0 +1,78 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'textBox',
+  group: 'block',
+  content: 'inline*',
+  draggable: false,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+      width: {
+        default: 200,
+      },
+      height: {
+        default: 30,
+      },
+      angle: {
+        default: null,
+      },
+      left: {
+        default: 0,
+      },
+      top: {
+        default: 0,
+      },
+      rotatable: {
+        default: true,
+      },
+      borderWidth: {
+        default: 1,
+      },
+      borderColor: {
+        default: '#000',
+      },
+      borderStyle: {
+        default: 'solid',
+      },
+      backgroundColor: {
+        default: 'transparent',
+      },
+      writingMode: {
+        default: 'horizontal-tb',
+        parseHTML: (element) => {
+          return element.style.writingMode || this.options.writingMode
+        },
+        renderHTML: ({ writingMode }) => {
+          return { style: `writing-mode: ${writingMode}` }
+        },
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'text-box' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['text-box', mergeAttributes(HTMLAttributes), 0]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addCommands() {
+    return {
+      setTextBox:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          })
+        },
+    }
+  },
+})

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

@@ -0,0 +1,141 @@
+<template>
+  <node-view-wrapper
+    :id="attrs.id"
+    ref="containerRef"
+    class="umo-node-view umo-floating-node"
+    :style="{
+      zIndex: 90,
+      '--umo-textbox-border-color': attrs.borderColor,
+      '--umo-textbox-border-width': attrs.borderWidth + 'px',
+      '--umo-textbox-border-style': attrs.borderStyle,
+      '--umo-textbox-background-color': attrs.backgroundColor,
+    }"
+  >
+    <div class="umo-node-container umo-node-text-box">
+      <drager
+        class="is-draggable"
+        :style="{
+          cursor: !options.document?.readOnly
+            ? 'inherit'
+            : 'default !important',
+        }"
+        :selected="selected"
+        :disabled="disabled || options?.document?.readOnly"
+        :rotatable="true"
+        :boundary="false"
+        :angle="attrs.angle"
+        :width="attrs.width"
+        :height="attrs.height"
+        :left="attrs.left"
+        :top="attrs.top"
+        :min-width="14"
+        :min-height="14"
+        :title="t('node.textBox.tip')"
+        @rotate="onRotate"
+        @resize="onResize"
+        @drag="onDrag"
+        @blur="disabled = false"
+        @click="selected = true"
+        @dblclick="editTextBox"
+      >
+        <node-view-content
+          ref="contentRef"
+          class="umo-node-text-box-content"
+          :style="{ writingMode: attrs.writingMode }"
+        />
+      </drager>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { computed as _computed, ref as _ref } from 'vue';
+
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import Drager from 'es-drager'
+
+
+import { inject, ref } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes } = props
+
+const options = inject('options')
+
+const containerRef = ref(null)
+const contentRef = _ref(null)
+let selected = _ref(false)
+let disabled = _ref(false)
+
+const onRotate = ({ angle }) => {
+  updateAttributes({ angle })
+}
+const onResize = ({ width, height }) => {
+  updateAttributes({ width, height })
+}
+const onDrag = ({ left, top }) => {
+  updateAttributes({ left, top })
+}
+
+onClickOutside(containerRef, () => {
+  selected.value = false
+  disabled.value = false
+})
+
+const editTextBox = () => {
+  disabled.value = true
+  const range = document.createRange()
+  range.selectNodeContents(contentRef.value.$el)
+  const election = window.getSelection()
+  if (election) {
+    election.removeAllRanges()
+    election.addRange(range)
+  }
+  contentRef.value.$el.focus()
+}
+</script>
+
+<style lang="less">
+.umo-node-view {
+  .umo-node-text-box {
+    position: absolute;
+    .es-drager {
+      user-select: text !important;
+      cursor: default !important;
+      z-index: 90 !important;
+      background-color: var(--umo-textbox-background-color);
+      &.dragging {
+        caret-color: transparent;
+      }
+      &.disabled {
+        outline: none;
+        &:after {
+          display: none !important;
+        }
+      }
+      &.selected {
+        .umo-node-text-box-content {
+          outline: none;
+        }
+      }
+      &.disabled.selected {
+        .umo-node-text-box-content {
+          outline: var(--umo-textbox-border-style)
+            var(--umo-textbox-border-width) var(--umo-textbox-border-color);
+        }
+      }
+    }
+    .umo-node-text-box-content {
+      outline: var(--umo-textbox-border-style) var(--umo-textbox-border-width)
+        var(--umo-textbox-border-color);
+      width: 100%;
+      height: 100%;
+      padding: 5px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,48 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+
+import NodeView from './node-view.vue'
+
+export default Node.create({
+  name: 'toc',
+  group: 'block',
+  atom: true,
+  addAttributes() {
+    return {
+      vnode: {
+        default: true,
+      },
+    }
+  },
+  parseHTML() {
+    return [{ tag: 'toc' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['toc', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['heading'],
+        attributes: {},
+      },
+    ]
+  },
+  addCommands() {
+    return {
+      addTableOfContents:
+        (options) =>
+        ({ chain }) => {
+          return chain()
+            .insertContent({
+              type: this.name,
+              attrs: options,
+            })
+            .run()
+        },
+    }
+  },
+})

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

@@ -0,0 +1,159 @@
+<template>
+  <node-view-wrapper
+    :id="node.attrs.id"
+    class="umo-node-view"
+    @click.capture="editor?.commands.setNodeSelection(getPos())"
+  >
+    <div
+      class="umo-node-container umo-hover-shadow umo-select-outline umo-node-toc"
+    >
+      <p class="umo-node-toc-head" v-text="t('toc.title')"></p>
+      <div class="umo-node-toc-body">
+        <t-tree
+          class="umo-toc-tree"
+          :data="tocTreeData"
+          :keys="{
+            label: 'textContent',
+            value: 'id',
+          }"
+          :empty="t('toc.empty')"
+          :transition="false"
+          activable
+          hover
+          expand-all
+          line
+          @active="headingActive"
+        />
+      </div>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { ref as _ref } from 'vue';
+
+import { TextSelection } from '@tiptap/pm/state'
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+
+
+import { inject, watch } from 'vue';
+defineProps(nodeViewProps)
+
+const container = inject('container')
+const editor = inject('editor')
+
+defineEmits(['close'])
+
+// 最终可视化数据
+let tocTreeData = _ref([])
+let watchTreeData = [] // 可视化监听数据
+const buildTocTree = (tocArray) => {
+  const root = []
+  const stack = []
+  for (const item of tocArray) {
+    const node = {
+      textContent: item.textContent,
+      level: item.originalLevel,
+      id: item.id,
+      actived: false,
+      children: [],
+    }
+    while (
+      stack.length > 0 &&
+      stack[stack.length - 1].level >= item.originalLevel
+    ) {
+      stack.pop()
+    }
+    if (stack.length === 0) {
+      root.push(node)
+    } else {
+      stack[stack.length - 1].children.push(node)
+    }
+    stack.push(node)
+  }
+  return root
+}
+
+watch(
+  () => editor.value?.storage.tableOfContents.content,
+  (toc) => {
+    // 每次都监听 但不是每次发生变化，重复赋值导致toc数据双击生效
+    const curTocTreeData = buildTocTree(toc)
+    if (JSON.stringify(watchTreeData) !== JSON.stringify(curTocTreeData)) {
+      watchTreeData = curTocTreeData
+      tocTreeData.value = JSON.parse(JSON.stringify(curTocTreeData))
+    }
+  },
+  { immediate: true },
+)
+
+const headingActive = (value) => {
+  if (!editor.value) {
+    return
+  }
+  const nodeElement = editor.value.view.dom.querySelector(
+    `[data-toc-id="${value[0]}"]`,
+  )
+  const pageContainer = document.querySelector(
+    `${container} .umo-zoomable-container`,
+  )
+  const pageHeader = pageContainer?.querySelector('.umo-page-node-header')
+  pageContainer.scrollTo({
+    top: nodeElement.offsetTop + (pageHeader?.offsetHeight || 0),
+  })
+  const pos = editor.value.view.posAtDOM(nodeElement, 0)
+  const { tr } = editor.value.view.state
+  tr.setSelection(new TextSelection.create(tr.doc, pos))
+  editor.value.view.dispatch(tr)
+  editor.value.view.focus()
+}
+</script>
+
+<style lang="less">
+.umo-node-view {
+  .umo-node-toc {
+    padding: 44px 24px 24px 10px;
+    position: relative;
+    outline: solid 1px var(--umo-content-node-border);
+    border-radius: var(--umo-content-node-radius);
+    background-color: #fff;
+    width: 100%;
+    &-head {
+      font-weight: 500;
+      margin: 0;
+      position: absolute;
+      top: 0;
+      left: 24px;
+      padding: 0.25em 0.5em;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      background: rgba(black, 0.05);
+      color: var(--umo-primary-color);
+    }
+
+    &-body {
+      --td-bg-color-container-hover: rgba(0, 0, 0, 0.05);
+      --td-text-color-primary: #222;
+      --td-border-level-1-color: #ddd;
+      --td-brand-color-light: rgba(0, 0, 0, 0.05);
+      .umo-tree__label {
+        margin-left: 0 !important;
+        padding: 5px;
+        &:hover {
+          color: var(--umo-primary-color);
+        }
+      }
+      .umo-tree__empty {
+        height: 40px;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #999;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>