adtec-core-package 3.0.0 → 3.0.1

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

@@ -0,0 +1,130 @@
+<template>
+  <node-view-wrapper class="umo-node-view">
+    <t-popup
+      :attach="`${container} .umo-zoomable-container`"
+      overlay-inner-class-name="umo-editor-bubble-menu"
+      trigger="click"
+      :visible="
+        editor?.isEditable &&
+        bubbleMenu &&
+        editor.state.selection.to === editor.state.selection.from
+      "
+      @visible-change="(visible) => (bubbleMenu = visible)"
+    >
+      <div
+        class="umo-node-container hover-shadow umo-node-callout"
+        :style="{
+          color: attrs.fontColor,
+          backgroundColor: attrs.backgroundColor,
+        }"
+        @mousedown="focusCalloutContent"
+      >
+        <span
+          v-if="attrs.icon"
+          class="umo-node-callout-icon"
+          contenteditable="false"
+          >{{ attrs.icon }}</span
+        >
+        <node-view-content
+          class="umo-node-callout-content"
+          :class="{
+            'umo-node-callout-empty': node.content.size <= 2,
+          }"
+          :data-placeholder="t('callout.placeholder')"
+        />
+      </div>
+      <template #content>
+        <menus-bubble-callout-builtin />
+        <div class="umo-bubble-menu-divider"></div>
+        <menus-toolbar-insert-emoji @select-emoji="selectEmoji" />
+        <menus-bubble-callout-emoji-remove
+          v-if="editor.getAttributes('callout').icon"
+        />
+        <menus-bubble-callout-background />
+        <div class="umo-bubble-menu-divider"></div>
+        <menus-bubble-node-delete />
+      </template>
+    </t-popup>
+  </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 { inject } from 'vue';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes } = props
+
+const container = inject('container')
+const bubbleMenu = _ref(false)
+
+const selectEmoji = (emoji) => {
+  updateAttributes({
+    icon: emoji,
+  })
+}
+
+const focusCalloutContent = (event) => {
+  if (!props.editor?.isEditable || event.button !== 0) {
+    return
+  }
+  const { target } = event
+  if (!(target instanceof HTMLElement)) {
+    return
+  }
+  // 点击文本区域时保留原生定位行为；仅为空白区域提供兜底聚焦。
+  if (target.closest('.umo-node-callout-content')) {
+    return
+  }
+  const pos = props.getPos?.()
+  if (typeof pos !== 'number') {
+    return
+  }
+  props.editor
+    .chain()
+    .focus()
+    .setTextSelection(pos + 1)
+    .run()
+}
+</script>
+
+<style lang="less">
+.umo-node-callout {
+  padding: 8px 12px;
+  border-radius: var(--umo-radius);
+  display: flex;
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  align-items: flex-start;
+  &-icon {
+    font-size: 18px;
+    margin-right: 10px;
+    line-height: 1.25;
+  }
+  &-content {
+    flex: 1;
+    min-height: 1em;
+    cursor: text;
+    white-space: pre-wrap;
+    word-break: break-word;
+
+    &.umo-node-callout-empty {
+      display: flex;
+      align-items: center;
+      &::after {
+        content: attr(data-placeholder);
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      .tiptap-invisible-character {
+        display: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,32 @@
+import CodeBlock from '@tiptap/extension-code-block-lowlight'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { common, createLowlight } from 'lowlight'
+
+import NodeView from './node-view.vue'
+
+const customCodeBlock = CodeBlock.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      language: {
+        default: 'plaintext',
+      },
+      theme: {
+        default: 'light',
+      },
+      textWrap: {
+        default: true,
+      },
+    }
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(NodeView)
+  },
+})
+
+export default customCodeBlock.configure({
+  lowlight: createLowlight(common),
+  enableTabIndentation: true,
+  tabSize: 2,
+  defaultLanguage: 'plaintext',
+})

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

@@ -0,0 +1,399 @@
+<template>
+  <node-view-wrapper ref="containerRef" class="umo-node-view umo-code-block">
+    <div
+      :class="`umo-node-container hover-shadow umo-node-code-block umo-node-code-block-theme-${attrs.theme}`"
+    >
+      <div class="umo-node-code-block-toolbar">
+        <div class="umo-node-code-block-toolbar-left">
+          <template v-if="editor?.isEditable && !options.document?.readOnly">
+            <menus-button
+              :text="t('bubbleMenu.code.languages')"
+              menu-type="select"
+              :select-options="languageOptions"
+              :select-value="attrs.language"
+              :popup-props="{
+                attach: container,
+                overlayClassName: 'umo-code-block-language',
+              }"
+              filterable
+              borderless
+              auto-width
+              @menu-click="(value) => updateAttribute('language', value)"
+            />
+            <menus-button
+              :text="t('bubbleMenu.code.themes.text')"
+              menu-type="select"
+              :select-options="themeOptions"
+              :select-value="attrs.theme"
+              :disabled="options.document?.readOnly"
+              force-enabled
+              borderless
+              auto-width
+              @menu-click="(value) => updateAttribute('theme', value)"
+            />
+          </template>
+          <span v-else class="umo-node-code-block-language">{{
+            attrs.language
+          }}</span>
+        </div>
+        <div class="umo-node-code-block-toolbar-right">
+          <menus-button
+            class="umo-word-wrap-button"
+            :menu-active="attrs.textWrap"
+            :text="t('bubbleMenu.code.wordWrap')"
+            ico="code-word-wrap"
+            hide-text
+            force-enabled
+            @menu-click="updateAttribute('textWrap', !attrs.textWrap)"
+          />
+          <menus-button
+            class="umo-copy-button"
+            ico="copy"
+            :text="t('bubbleMenu.code.copy.text')"
+            hide-text
+            force-enabled
+            @menu-click="copyCode"
+          />
+          <menus-button
+            v-if="editor?.isEditable && !options.document?.readOnly"
+            class="umo-delete-button"
+            ico="node-delete"
+            :text="t('bubbleMenu.delete')"
+            hide-text
+            @menu-click="deleteNode"
+          />
+        </div>
+      </div>
+      <pre
+        class="umo-node-code-block-content"
+        :class="{
+          'umo-node-code-block-word-wrap': attrs.textWrap,
+        }"
+      ><node-view-content
+        :class="`hljs language-${attrs.language}`"
+        :style="`white-space: pre${attrs.textWrap ? '-wrap' : ''} !important;`"
+        as="code"
+      /></pre>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { t } from '../../composables/i18n.js';
+import { computed as _computed } from 'vue';
+
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+import { common, createLowlight } from 'lowlight'
+
+
+import { inject } from 'vue';
+const props = defineProps(nodeViewProps)
+const attrs = _computed(() => props.node.attrs)
+const { updateAttributes, deleteNode } = props
+const lowlight = createLowlight(common)
+
+const container = inject('container')
+const options = inject('options')
+const editor = inject('editor')
+
+const languageOptions = lowlight.listLanguages().map((item) => {
+  return { label: item, value: item }
+})
+const themeOptions = [
+  { label: t('bubbleMenu.code.themes.dark'), value: 'dark' },
+  { label: t('bubbleMenu.code.themes.light'), value: 'light' },
+]
+
+const updateAttribute = (attr, value) => {
+  updateAttributes({
+    [attr]: value,
+  })
+}
+
+const copyCode = () => {
+  useCopy(props.node.textContent, t('bubbleMenu.code.copy.success'), container)
+}
+</script>
+
+<style lang="less">
+@import '../../assets/styles/_mixins.less';
+
+.umo-code-block {
+  display: block !important;
+  .umo-node-code-block {
+    border: solid 1px var(--umo-content-node-border);
+    border-radius: 3px;
+    &-toolbar {
+      --td-bg-color-container-hover: rgba(0, 0, 0, 0.05);
+      --td-component-border: rgba(0, 0, 0, 0.1);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      border-bottom: 1px solid var(--umo-content-node-border);
+      height: 36px;
+      border-top-left-radius: 2px;
+      border-top-right-radius: 2px;
+      background-color: var(--umo-content-node-selected-background);
+      .umo-select__wrap {
+        --td-comp-paddingLR-s: 5px;
+        --td-text-color-primary: #999;
+        width: auto;
+        .umo-input--auto-width {
+          min-width: unset;
+        }
+        .umo-input__suffix {
+          margin: 0 -3px 0 3px;
+          --td-text-color-placeholder: #999;
+        }
+      }
+      &-right {
+        display: flex;
+        align-items: center;
+        display: none;
+        gap: 5px;
+        .umo-menu-button-wrap {
+          margin-right: 0;
+          .active {
+            background-color: var(--td-bg-color-container-hover);
+            .umo-button-content {
+              color: var(--umo-primary-color);
+            }
+          }
+        }
+      }
+      .umo-button-content {
+        color: #999;
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+    &:hover {
+      .umo-node-code-block-toolbar {
+        &-right {
+          display: flex;
+        }
+      }
+    }
+    &-language {
+      font-size: 12px;
+      color: #999;
+      padding: 0 6px;
+    }
+    &-theme-dark {
+      .umo-node-code-block {
+        &-toolbar {
+          background-color: rgba(0, 0, 0, 0.95);
+          border-bottom-color: transparent;
+          --td-bg-color-container-hover: transparent;
+          .umo-button-content {
+            &:hover {
+              color: #eee;
+            }
+          }
+        }
+      }
+    }
+    &-content {
+      font-family: var(--umo-content-code-family);
+      margin: 0 !important;
+      padding: 0 !important;
+      overflow: hidden;
+      max-height: 500px;
+      border-radius: 0;
+      border-bottom-left-radius: 2px;
+      border-bottom-right-radius: 2px;
+      .umo-scrollbar();
+
+      code {
+        display: block;
+        padding: 10px 20px !important;
+        width: 100%;
+        color: inherit;
+        font-size: 0.8rem;
+        box-sizing: border-box;
+        border-radius: 0;
+        background: none;
+        &:first-child {
+          margin-left: -0.4em;
+        }
+      }
+    }
+  }
+  &.umo-node-focused {
+    .umo-node-code-block {
+      border-color: var(--umo-primary-color);
+    }
+  }
+  .tiptap-invisible-character {
+    display: none;
+  }
+}
+.umo-code-block-language {
+  .umo-select__list {
+    max-height: 200px;
+  }
+}
+.umo-node-code-block-theme {
+  &-light {
+    pre {
+      color: #24292e;
+      background: #ffffff;
+    }
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-meta .hljs-keyword,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable.language_ {
+      color: #d73a49;
+    }
+    .hljs-title,
+    .hljs-title.class_,
+    .hljs-title.class_.inherited__,
+    .hljs-title.function_ {
+      color: #6f42c1;
+    }
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-operator,
+    .hljs-variable,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-id {
+      color: #005cc5;
+    }
+    .hljs-regexp,
+    .hljs-string,
+    .hljs-meta .hljs-string {
+      color: #032f62;
+    }
+    .hljs-built_in,
+    .hljs-symbol {
+      color: #e36209;
+    }
+    .hljs-comment,
+    .hljs-code,
+    .hljs-formula {
+      color: #6a737d;
+    }
+    .hljs-name,
+    .hljs-quote,
+    .hljs-selector-tag,
+    .hljs-selector-pseudo {
+      color: #22863a;
+    }
+    .hljs-subst {
+      color: #24292e;
+    }
+    .hljs-section {
+      color: #005cc5;
+      font-weight: bold;
+    }
+    .hljs-bullet {
+      color: #735c0f;
+    }
+    .hljs-emphasis {
+      color: #24292e;
+      font-style: italic;
+    }
+    .hljs-strong {
+      color: #24292e;
+      font-weight: bold;
+    }
+    .hljs-addition {
+      color: #22863a;
+      background-color: #f0fff4;
+    }
+    .hljs-deletion {
+      color: #b31d28;
+      background-color: #ffeef0;
+    }
+  }
+  &-dark {
+    pre {
+      color: #c9d1d9;
+      background: #1d2229;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-meta .hljs-keyword,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable.language_ {
+      color: #ff7b72;
+    }
+    .hljs-title,
+    .hljs-title.class_,
+    .hljs-title.class_.inherited__,
+    .hljs-title.function_ {
+      color: #d2a8ff;
+    }
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-operator,
+    .hljs-variable,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-id {
+      color: #79c0ff;
+    }
+    .hljs-regexp,
+    .hljs-string,
+    .hljs-meta .hljs-string {
+      color: #a5d6ff;
+    }
+    .hljs-built_in,
+    .hljs-symbol {
+      color: #ffa657;
+    }
+    .hljs-comment,
+    .hljs-code,
+    .hljs-formula {
+      color: #8b949e;
+    }
+    .hljs-name,
+    .hljs-quote,
+    .hljs-selector-tag,
+    .hljs-selector-pseudo {
+      color: #7ee787;
+    }
+    .hljs-subst {
+      color: #c9d1d9;
+    }
+    .hljs-section {
+      color: #1f6feb;
+      font-weight: bold;
+    }
+    .hljs-bullet {
+      color: #f2cc60;
+    }
+    .hljs-emphasis {
+      color: #c9d1d9;
+      font-style: italic;
+    }
+    .hljs-strong {
+      color: #c9d1d9;
+      font-weight: bold;
+    }
+    .hljs-addition {
+      color: #aff5b4;
+      background-color: #033a16;
+    }
+    .hljs-deletion {
+      color: #ffdcd7;
+      background-color: #67060c;
+    }
+  }
+}
+</style>

package/src/components/editor-main/src/extensions/columns/dom.js

@@ -0,0 +1,142 @@
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+
+import { gridResizingPluginKey } from './state'
+import {
+  draggedWidth,
+  findBoundaryPosition,
+  getColumnInfoAtPos,
+  updateColumnNodeWidth,
+} from './utils'
+
+const updateActiveHandle = (view, value) => {
+  view.dispatch(
+    view.state.tr.setMeta(gridResizingPluginKey, {
+      setHandle: value,
+    }),
+  )
+}
+
+export const handleMouseMove = (view, event, handleWidth) => {
+  const pluginState = gridResizingPluginKey.getState(view.state)
+  if (!pluginState) return false
+
+  if (pluginState.dragging) return false
+
+  const boundaryPos = findBoundaryPosition(view, event, handleWidth)
+  if (boundaryPos !== pluginState.activeHandle) {
+    updateActiveHandle(view, boundaryPos)
+  }
+  return false
+}
+
+export const handleMouseLeave = (view) => {
+  const pluginState = gridResizingPluginKey.getState(view.state)
+  if (!pluginState) return false
+  if (pluginState.activeHandle > -1 && !pluginState.dragging) {
+    updateActiveHandle(view, -1)
+  }
+  return false
+}
+
+export const handleMouseDown = (view, event, columnMinWidth) => {
+  const pluginState = gridResizingPluginKey.getState(view.state)
+  if (!pluginState) return false
+  if (pluginState.activeHandle === -1) return false
+  if (pluginState.dragging) return false
+
+  const columnInfo = getColumnInfoAtPos(view, pluginState.activeHandle)
+  if (!columnInfo) return false
+
+  const { domWidth, $pos, node } = columnInfo
+  const nodeAttrs = { ...(node.attrs || {}) }
+  const nodePos = $pos.before()
+
+  view.dispatch(
+    view.state.tr.setMeta(gridResizingPluginKey, {
+      setDragging: { startX: event.clientX, startWidth: domWidth },
+    }),
+  )
+
+  const win = view.dom.ownerDocument.defaultView || window
+
+  const finish = (e) => {
+    win.removeEventListener('mouseup', finish)
+    win.removeEventListener('mousemove', move)
+
+    const pluginState = gridResizingPluginKey.getState(view.state)
+    if (!pluginState?.dragging) return
+
+    const finalWidth = draggedWidth(pluginState.dragging, e, columnMinWidth)
+    updateColumnNodeWidth(view, nodePos, nodeAttrs, finalWidth)
+    view.dispatch(
+      view.state.tr.setMeta(gridResizingPluginKey, {
+        setDragging: null,
+      }),
+    )
+  }
+
+  const move = (e) => {
+    if (!e.buttons) {
+      finish(e)
+      return
+    }
+    const pluginState = gridResizingPluginKey.getState(view.state)
+    if (!pluginState?.dragging) return
+
+    const newWidth = draggedWidth(pluginState.dragging, e, columnMinWidth)
+    updateColumnNodeWidth(view, nodePos, nodeAttrs, newWidth)
+  }
+
+  win.addEventListener('mouseup', finish)
+  win.addEventListener('mousemove', move)
+
+  updateColumnNodeWidth(view, nodePos, nodeAttrs, domWidth)
+
+  event.preventDefault()
+  return true
+}
+
+export const handleGridDecorations = (state, boundaryPos) => {
+  const decorations = []
+  const $pos = state.doc.resolve(boundaryPos)
+  if ($pos.nodeAfter !== null) {
+    const widget = document.createElement('div')
+    widget.className = 'grid-resize-handle'
+    const circleButton = document.createElement('div')
+    circleButton.className = 'grid-resize-handle-circle-btn'
+    widget.appendChild(circleButton)
+    const plusIcon = document.createElement('div')
+    plusIcon.className = 'grid-resize-handle-icon'
+    circleButton.appendChild(plusIcon)
+    decorations.push(Decoration.widget(boundaryPos, widget))
+  }
+  return DecorationSet.create(state.doc, decorations)
+}
+
+export const handleMouseUp = (view, event) => {
+  const div = event.target
+  if (!div) return false
+  if (
+    div.className !== 'grid-resize-handle-circle-btn' &&
+    div.className !== 'grid-resize-handle-icon'
+  )
+    return false
+  const column = div.closest('.umo-node-column')
+  if (!column) return false
+  const boundryPos = view.posAtDOM(column, 0)
+  if (!boundryPos) return false
+  const $pos = view.state.doc.resolve(boundryPos)
+  const { state } = view
+  view.dispatch(
+    state.tr.insert(
+      $pos.pos + $pos.parent.nodeSize - 1,
+      state.schema.nodes.column.create(
+        {
+          colWidth: 100,
+        },
+        state.schema.nodes.paragraph.create(),
+      ),
+    ),
+  )
+  return true
+}