H5/xp-robotaxi-web.git

<script setup lang="ts">
import type { AiEditor as AiEditorInstance, AiEditorOptions, Uploader } from 'aieditor'
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { AiEditor } from 'aieditor'
import 'aieditor/dist/style.css'
import { uploadSingleFile } from '@/utils/upload'
 
defineOptions({
  name: 'AiRichTextEditor',
})
 
interface Props {
  disabled?: boolean
  readOnly?: boolean
  value?: string
  placeholder?: string
  height?: string
  toolbarKeys?: AiEditorOptions['toolbarKeys']
}
 
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  readOnly: false,
  value: '',
  placeholder: '请输入内容...',
  height: '360px',
  toolbarKeys: () => [
    'undo',
    'redo',
    'divider',
    'heading',
    'font-family',
    'font-size',
    'divider',
    'bold',
    'italic',
    'underline',
    'strike',
    'link',
    'divider',
    'align',
    'bullet-list',
    'ordered-list',
    'indent-decrease',
    'indent-increase',
    'divider',
    'image',
    'video',
    'attachment',
    'table',
    'fullscreen',
  ],
})
 
const emit = defineEmits<{
  change: [value: string]
  input: [value: string]
  focus: []
  blur: []
  ready: [editor: AiEditorInstance]
}>()
 
const model = defineModel<string>()
 
const editorRef = ref<HTMLElement | null>(null)
const editor = ref<AiEditorInstance | null>(null)
const lastHtml = ref('')
const isUnmounted = ref(false)
const isApplyingExternalContent = ref(false)
let applyContentVersion = 0
 
const commonUploader: Uploader = async (file) => {
  const res = await uploadSingleFile(file)
  return {
    errorCode: 0,
    data: {
      src: res.url,
      href: res.url,
      fileName: res.name || file.name,
      alt: res.name || file.name,
      poster: '',
    },
  }
}
 
function createUploadConfig() {
  return {
    uploadUrl: '/api/common/upload',
    uploadHeaders: {},
    uploadFormName: 'file',
    uploader: commonUploader,
  }
}
 
function appendStyle(originStyle: string | null, styleText: string) {
  const style = (originStyle || '').trim()
  if (!style)
    return styleText
  return style.endsWith(';') ? `${style}${styleText}` : `${style};${styleText}`
}
 
function removeStyleProperties(originStyle: string | null, properties: string[]) {
  let style = (originStyle || '').trim()
  for (const property of properties) {
    const reg = new RegExp(`${property}\\s*:\\s*[^;]+;?`, 'gi')
    style = style.replace(reg, '')
  }
  return style.replace(/\s{2,}/g, ' ').trim()
}
 
function formatTableForMiniProgram(html: string) {
  if (!html || typeof document === 'undefined')
    return html || ''
 
  const container = document.createElement('div')
  container.innerHTML = html
 
  container.querySelectorAll('table').forEach((table) => {
    table.removeAttribute('width')
    table.setAttribute('border', '1')
    table.setAttribute('cellspacing', '0')
    table.setAttribute('cellpadding', '0')
    table.setAttribute(
      'style',
      appendStyle(
        removeStyleProperties(table.getAttribute('style'), ['width', 'min-width', 'max-width']),
        'width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed;box-sizing:border-box;',
      ),
    )
 
    table.querySelectorAll('colgroup, col').forEach((col) => {
      col.removeAttribute('width')
      const style = removeStyleProperties(col.getAttribute('style'), ['width', 'min-width', 'max-width'])
      if (style)
        col.setAttribute('style', style)
      else
        col.removeAttribute('style')
    })
 
    table.querySelectorAll('th, td').forEach((cell) => {
      cell.removeAttribute('width')
      cell.setAttribute(
        'style',
        appendStyle(
          removeStyleProperties(cell.getAttribute('style'), ['width', 'min-width', 'max-width']),
          'width:auto;max-width:100%;border:1px solid #d9d9d9;padding:8px;vertical-align:top;word-break:break-all;overflow-wrap:anywhere;box-sizing:border-box;',
        ),
      )
    })
 
    table.querySelectorAll('th').forEach((headerCell) => {
      headerCell.setAttribute(
        'style',
        appendStyle(
          headerCell.getAttribute('style'),
          'font-weight:600;background:#f5f5f5;',
        ),
      )
    })
  })
 
  return container.innerHTML
}
 
function formatRichTextList(html: string) {
  if (!html)
    return ''
 
  if (typeof document === 'undefined')
    return html
 
  const container = document.createElement('div')
  container.innerHTML = html
 
  const applyListStyle = (list: Element, type: 'ol' | 'ul', depth: number) => {
    const baseStyle = type === 'ol'
      ? `list-style-type:decimal;margin:8px 0;`
      : `list-style-type:disc;margin:8px 0;`
 
    list.setAttribute(
      'style',
      appendStyle(
        removeStyleProperties(list.getAttribute('style'), ['list-style', 'list-style-type', 'padding-left', 'margin', 'margin-top', 'margin-bottom']),
        baseStyle,
      ),
    )
  }
 
  const walkLists = (root: ParentNode, depth = 1) => {
    Array.from(root.children).forEach((child) => {
      const element = child as HTMLElement
      if (element.tagName === 'OL') {
        applyListStyle(element, 'ol', depth)
        element.querySelectorAll(':scope > li').forEach((item) => {
          const li = item as HTMLElement
          li.setAttribute(
            'style',
            appendStyle(
              removeStyleProperties(li.getAttribute('style'), ['margin']),
              'margin:4px 0;',
            ),
          )
          Array.from(li.children).forEach((nested) => {
            if (nested instanceof HTMLOListElement || nested instanceof HTMLUListElement)
              walkLists({ children: [nested] } as unknown as ParentNode, depth + 1)
          })
        })
      }
      else if (element.tagName === 'UL' && element.getAttribute('data-type') !== 'taskList') {
        applyListStyle(element, 'ul', depth)
        element.querySelectorAll(':scope > li').forEach((item) => {
          const li = item as HTMLElement
          li.setAttribute(
            'style',
            appendStyle(
              removeStyleProperties(li.getAttribute('style'), ['margin']),
              'margin:4px 0;',
            ),
          )
          Array.from(li.children).forEach((nested) => {
            if (nested instanceof HTMLOListElement || nested instanceof HTMLUListElement)
              walkLists({ children: [nested] } as unknown as ParentNode, depth + 1)
          })
        })
      }
    })
  }
 
  walkLists(container)
 
  return container.innerHTML
}
 
function formatRichTextContent(html: string) {
  return formatRichTextList(formatTableForMiniProgram(html))
}
 
function syncModelValue(html: string) {
  const formattedHtml = formatRichTextContent(html)
  if (isApplyingExternalContent.value) {
    lastHtml.value = formattedHtml
    return
  }
  if (formattedHtml === lastHtml.value)
    return
 
  lastHtml.value = formattedHtml
  if (model.value !== undefined)
    model.value = formattedHtml
  emit('input', formattedHtml)
  emit('change', formattedHtml)
}
 
function destroyEditor() {
  editor.value?.destroy()
  editor.value = null
 
  if (editorRef.value)
    editorRef.value.innerHTML = ''
}
 
function getIncomingContent() {
  return model.value ?? props.value ?? ''
}
 
function initEditor(content = getIncomingContent()) {
  if (!editorRef.value || editor.value || isUnmounted.value)
    return
 
  const initialContent = formatRichTextContent(content || '')
 
  const instance = new AiEditor({
    element: editorRef.value,
    placeholder: props.placeholder,
    content: initialContent,
    editable: !(props.disabled || props.readOnly),
    toolbarKeys: props.toolbarKeys,
    toolbarExcludeKeys: ['ai'],
    ai: false,
    draggable: false,
    image: createUploadConfig(),
    video: createUploadConfig(),
    attachment: createUploadConfig(),
    onChange: (currentEditor) => {
      syncModelValue(currentEditor.getHtml())
    },
    onFocus: () => {
      emit('focus')
    },
    onBlur: () => {
      emit('blur')
    },
    onCreated: (currentEditor) => {
      emit('ready', currentEditor)
    },
  })
 
  editor.value = instance
  lastHtml.value = initialContent
}
 
async function rebuildEditor(content: string, focus = false) {
  if (isUnmounted.value)
    return
 
  const formattedContent = formatRichTextContent(content || '')
  if (formattedContent === lastHtml.value && editor.value) {
    lastHtml.value = formattedContent
    return
  }
 
  const version = ++applyContentVersion
  isApplyingExternalContent.value = true
 
  destroyEditor()
 
  await nextTick()
  if (isUnmounted.value || version !== applyContentVersion)
    return
 
  initEditor(formattedContent)
  if (focus)
    editor.value?.focus()
 
  requestAnimationFrame(() => {
    if (version === applyContentVersion)
      isApplyingExternalContent.value = false
  })
}
 
async function setContent(content: string, focus = false) {
  await rebuildEditor(content, focus)
}
 
function clear() {
  destroyEditor()
  if (!isUnmounted.value && editorRef.value)
    initEditor('')
  lastHtml.value = ''
  syncModelValue('')
}
 
function focus() {
  editor.value?.focus()
}
 
function blur() {
  editor.value?.blur()
}
 
function getContent() {
  return editor.value?.getHtml() || ''
}
 
function getEditor() {
  return editor.value
}
 
watch(
  () => model.value,
  (value) => {
    if (value === undefined)
      return
    const html = value || ''
    if (html === lastHtml.value)
      return
    void rebuildEditor(html)
  },
  { flush: 'post' },
)
 
watch(
  () => props.value,
  (value) => {
    if (model.value !== undefined)
      return
    const html = value || ''
    if (html === lastHtml.value)
      return
    void rebuildEditor(html)
  },
  { flush: 'post' },
)
 
watch(
  () => [props.disabled, props.readOnly],
  (value) => {
    const [disabled, readOnly] = value
    editor.value?.setEditable(!(disabled || readOnly))
  },
)
 
watch(
  () => props.placeholder,
  () => {
    const html = getIncomingContent() || lastHtml.value
    void rebuildEditor(html)
  },
)
 
onMounted(() => {
  isUnmounted.value = false
  void nextTick(() => {
    initEditor()
  })
})
 
onBeforeUnmount(() => {
  isUnmounted.value = true
  destroyEditor()
})
 
defineExpose({
  clear,
  blur,
  focus,
  setContent,
  getContent,
  getEditor,
})
</script>
 
<template>
  <div class="ai-editor-container">
    <div
      ref="editorRef"
      class="ai-editor-host"
      :style="{ minHeight: height }"
    />
  </div>
</template>
 
<style scoped>
.ai-editor-container {
  width: 100%;
  border-radius: 4px;
  background: #fff;
}
 
.ai-editor-host {
  width: 100%;
}
 
:deep(aie-footer) {
  display: none !important;
}
 
:deep(.aie-container) {
  border-radius: 4px;
}
 
:deep(.aie-main) {
  min-height: v-bind(height);
}
 
:deep(.aie-content ul:not([data-type='taskList'])) {
  list-style-type: disc;
  padding-left: 20px;
  margin: 8px 0;
}
 
:deep(.aie-content ol) {
  list-style-type: decimal;
  padding-left: 20px;
  margin: 8px 0;
}
 
:deep(.aie-content ul:not([data-type='taskList']) > li),
:deep(.aie-content ol > li) {
  list-style: inherit;
  margin: 4px 0;
}
 
:deep(.aie-content li > ul:not([data-type='taskList'])),
:deep(.aie-content li > ol) {
  margin-top: 8px;
  margin-bottom: 0;
}
</style>