@mnykj/alleditor-dual 0.0.0-stage → 1.1.0

package/README.md

@@ -1,3 +1,72 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @mnykj/alleditor-dual
+
+AllEditor 双引擎（**wang / Slate** + **UE HTML**）。UEditor 静态资源已打进本包，装上即可用。
+
+## 安装
+
+```bash
+npm i @mnykj/alleditor @mnykj/alleditor-for-vue @mnykj/alleditor-dual
+```
+
+## 一步挂载静态资源（必做一次）
+
+组件默认从站点 `/ueditor/` 加载脚本。本包自带完整 `ueditor/`，用插件/模块自动挂上去即可，**无需再单独下载 UEditor**。
+
+### Nuxt 3
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@mnykj/alleditor-dual/nuxt'],
+})
+```
+
+### Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { alleditorDualUeditor } from '@mnykj/alleditor-dual/vite'
+
+export default defineConfig({
+  plugins: [alleditorDualUeditor()],
+})
+```
+
+## 使用
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { DualEditor } from '@mnykj/alleditor-dual'
+import '@mnykj/alleditor/dist/css/style.css'
+
+const html = ref('<p>hello</p>')
+</script>
+
+<template>
+  <DualEditor v-model="html" style="height: 70vh" />
+</template>
+```
+
+一般不用再写 `ueditor-base`。若自建 CDN，可覆盖：
+
+```vue
+<DualEditor v-model="html" ueditor-base="https://cdn.example.com/ueditor/" />
+```
+
+## HTML 协议
+
+```html
+<div class="alleditor-root" data-alleditor-engine="ue">…</div>
+```
+
+兼容旧注释 `<!--yunkee-editor:ue-html-->`。
+
+## 开发（monorepo）
+
+从 `other_editor/ueditor` 同步资源：
+
+```bash
+npm run sync:ueditor -w @mnykj/alleditor-dual
+```

package/nuxt.ts

@@ -0,0 +1,60 @@
+/**
+ * Nuxt 模块：自动把包内 ueditor 挂到 /ueditor/（开发 + 生产 publicAssets）。
+ *
+ * // nuxt.config.ts
+ * export default defineNuxtConfig({
+ *   modules: ['@mnykj/alleditor-dual/nuxt'],
+ * })
+ */
+import { defineNuxtModule } from '@nuxt/kit'
+import { existsSync } from 'node:fs'
+import { join } from 'node:path'
+import { DEFAULT_UEDITOR_PUBLIC_BASE, getUeditorPackageDir } from './src/ueditorPaths'
+
+export interface ModuleOptions {
+  /** 浏览器访问前缀，默认 /ueditor */
+  baseURL?: string
+  /** 是否启用，默认 true */
+  enabled?: boolean
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: '@mnykj/alleditor-dual',
+    configKey: 'alleditorDual',
+  },
+  defaults: {
+    baseURL: 'ueditor',
+    enabled: true,
+  },
+  setup(options, nuxt) {
+    if (options.enabled === false) return
+    const dir = getUeditorPackageDir()
+    if (!existsSync(join(dir, 'ueditor.all.min.js'))) {
+      console.warn('[alleditor-dual] 包内缺少 ueditor 资源:', dir)
+      return
+    }
+    const baseURL = String(options.baseURL || 'ueditor').replace(/^\/+|\/+$/g, '')
+    nuxt.options.nitro = nuxt.options.nitro || {}
+    nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || []
+    nuxt.options.nitro.publicAssets.push({
+      baseURL,
+      dir,
+      maxAge: 60 * 60 * 24 * 7,
+    })
+    // 开发时也允许 Vite 读包内文件
+    nuxt.options.vite = nuxt.options.vite || {}
+    nuxt.options.vite.server = nuxt.options.vite.server || {}
+    nuxt.options.vite.server.fs = nuxt.options.vite.server.fs || {}
+    const allow = new Set([
+      ...((nuxt.options.vite.server.fs.allow as string[]) || []),
+      dir,
+    ])
+    nuxt.options.vite.server.fs.allow = [...allow]
+
+    // 标记默认 public base，供运行时可选读取
+    nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {}
+    ;(nuxt.options.runtimeConfig.public as any).alleditorUeditorBase =
+      `/${baseURL}/` || DEFAULT_UEDITOR_PUBLIC_BASE
+  },
+})

package/package.json

@@ -1,6 +1,59 @@
-{
-  "name": "@mnykj/alleditor-dual",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@mnykj/alleditor-dual",
+  "version": "1.1.0",
+  "description": "AllEditor dual-engine (wang + UE HTML) Vue3 components, with bundled UEditor static assets",
+  "author": "mnykj",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./UeHtmlEngine.vue": "./src/UeHtmlEngine.vue",
+    "./DualEditor.vue": "./src/DualEditor.vue",
+    "./vite": "./vite.ts",
+    "./nuxt": "./nuxt.ts",
+    "./ueditor/*": "./ueditor/*"
+  },
+  "files": [
+    "src",
+    "ueditor",
+    "vite.ts",
+    "nuxt.ts",
+    "README.md",
+    "scripts"
+  ],
+  "keywords": [
+    "AllEditor",
+    "alleditor",
+    "dual-engine",
+    "ueditor",
+    "vue3",
+    "mnykj"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@mnykj/alleditor": "^1.1.0",
+    "@mnykj/alleditor-for-vue": "^1.1.0",
+    "vue": "^3.0.5",
+    "vite": ">=4",
+    "@nuxt/kit": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "@nuxt/kit": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "sync:ueditor": "node ./scripts/sync-ueditor.mjs",
+    "prepack": "node ./scripts/sync-ueditor.mjs",
+    "build": "node -e \"console.log('@mnykj/alleditor-dual ships Vue/TS source + ueditor assets; no bundle step')\""
+  }
+}

package/scripts/sync-ueditor.mjs

@@ -0,0 +1,28 @@
+/**
+ * 从 monorepo 的 other_editor/ueditor 构建产物同步到本包 ueditor/，便于发 npm。
+ * 若源不存在但包内已有资源，则跳过（方便纯发包场景）。
+ */
+import { cpSync, existsSync, mkdirSync, rmSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const dualRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const dest = join(dualRoot, 'ueditor')
+const src = resolve(dualRoot, '../../../other_editor/ueditor/dist/utf8-php')
+const destOk = existsSync(join(dest, 'ueditor.all.min.js'))
+const srcOk = existsSync(join(src, 'ueditor.all.min.js'))
+
+if (!srcOk) {
+  if (destOk) {
+    console.log('[sync-ueditor] 源不存在，保留包内已有 ueditor/', dest)
+    process.exit(0)
+  }
+  console.error('[sync-ueditor] 未找到源产物且包内无资源')
+  console.error('  源:', join(src, 'ueditor.all.min.js'))
+  process.exit(1)
+}
+
+rmSync(dest, { recursive: true, force: true })
+mkdirSync(dest, { recursive: true })
+cpSync(src, dest, { recursive: true })
+console.log('[sync-ueditor] synced ->', dest)

package/src/DualEditor.vue

@@ -0,0 +1,330 @@
+<script setup>
+/**
+ * AllEditor 双引擎门面：按 HTML 协议自动选 wang / ue，共用 wang 工具栏。
+ *
+ * v-model 存「可入库」HTML（UE 模式会包 data-alleditor-engine 根节点）。
+ * 宿主需自行提供 UEditor 静态资源（默认 /ueditor/）。
+ */
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
+import { Editor, Toolbar } from '@mnykj/alleditor-for-vue'
+import {
+  detectEditorEngine,
+  unwrapEditorEngineHtml,
+  wrapEditorEngineHtml,
+} from '@mnykj/alleditor'
+import UeHtmlEngine from './UeHtmlEngine.vue'
+import { bindUeToolbarAdapter } from './ueToolbar'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  mode: { type: String, default: 'default' },
+  disabled: { type: Boolean, default: false },
+  ueditorBase: { type: String, default: '/ueditor/' },
+  toolbarConfig: { type: Object, default: () => ({}) },
+  editorConfig: { type: Object, default: () => ({}) },
+  /** wang 占位正文（UE 模式下避免把高保真 HTML 喂进 Slate） */
+  wangPlaceholder: { type: String, default: '<p><br></p>' },
+  /** 仅当引擎为 ue 时才写外层 div（推荐；wang 正文保持干净） */
+  wrapOnlyWhenUe: { type: Boolean, default: true },
+  toolbarSelector: {
+    type: String,
+    default: '.alleditor-dual .w-e-toolbar, .alleditor-dual .editor-toolbar',
+  },
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+  'change',
+  'engine-change',
+  'wang-created',
+  'ue-created',
+  'ue-ready',
+])
+
+/** @type {import('vue').Ref<'wang' | 'ue'>} */
+const engineMode = ref(detectEditorEngine(props.modelValue))
+const rootRef = ref(null)
+const wangEditorRef = shallowRef(null)
+const ueEngineRef = shallowRef(null)
+const wangHtml = ref(props.wangPlaceholder)
+const ueHtml = ref('')
+let toolbarBinding = null
+let applyingExternal = false
+
+const useUe = computed(() => engineMode.value === 'ue')
+
+function bodyOf(html) {
+  return unwrapEditorEngineHtml(html || '') || '<p><br></p>'
+}
+
+function encodeForModel(rawBody) {
+  const body = String(rawBody ?? '').trim() || '<p><br></p>'
+  if (engineMode.value === 'ue') {
+    return wrapEditorEngineHtml(body, 'ue', {
+      onlyWhenUe: props.wrapOnlyWhenUe,
+    })
+  }
+  if (props.wrapOnlyWhenUe) return body
+  return wrapEditorEngineHtml(body, 'wang')
+}
+
+function emitModel(rawBody) {
+  const next = encodeForModel(rawBody)
+  emit('update:modelValue', next)
+  emit('change', next, engineMode.value)
+}
+
+function applyIncoming(html, { forceEngine } = {}) {
+  applyingExternal = true
+  try {
+    const nextEngine = forceEngine || detectEditorEngine(html)
+    const body = bodyOf(html)
+    if (nextEngine !== engineMode.value) {
+      engineMode.value = nextEngine
+      emit('engine-change', nextEngine)
+    }
+    if (nextEngine === 'ue') {
+      wangHtml.value = props.wangPlaceholder
+      ueHtml.value = body
+      ueEngineRef.value?.setContent?.(body)
+      nextTick(() => bindToolbar())
+    } else {
+      unbindToolbar()
+      ueHtml.value = ''
+      wangHtml.value = body
+    }
+  } finally {
+    applyingExternal = false
+  }
+}
+
+function bindToolbar() {
+  unbindToolbar()
+  toolbarBinding = bindUeToolbarAdapter({
+    toolbar: props.toolbarSelector,
+    getUe: () => ueEngineRef.value,
+    shouldCapture: () => engineMode.value === 'ue',
+  })
+}
+
+function unbindToolbar() {
+  toolbarBinding?.unbind?.()
+  toolbarBinding = null
+}
+
+function onWangCreated(editor) {
+  wangEditorRef.value = editor
+  emit('wang-created', editor)
+}
+
+function onWangChange(editor) {
+  if (applyingExternal || engineMode.value !== 'wang') return
+  try {
+    emitModel(editor.getHtml?.() || wangHtml.value)
+  } catch {
+    emitModel(wangHtml.value)
+  }
+}
+
+function onUeUpdate(html) {
+  if (applyingExternal || engineMode.value !== 'ue') return
+  ueHtml.value = html
+  emitModel(html)
+}
+
+function onUeReady(ue) {
+  emit('ue-ready', ue)
+  bindToolbar()
+}
+
+function onUeCreated(ue) {
+  emit('ue-created', ue)
+}
+
+function getHtml() {
+  if (engineMode.value === 'ue') {
+    const raw =
+      ueEngineRef.value?.getContent?.() ?? ueHtml.value ?? ''
+    return encodeForModel(raw)
+  }
+  try {
+    return encodeForModel(wangEditorRef.value?.getHtml?.() || wangHtml.value)
+  } catch {
+    return encodeForModel(wangHtml.value)
+  }
+}
+
+function setHtml(html, options = {}) {
+  applyIncoming(html, options)
+}
+
+function getEngineMode() {
+  return engineMode.value
+}
+
+/** 强制切引擎（导入 HTML 等场景） */
+function setEngineMode(mode, html) {
+  const next = mode === 'ue' ? 'ue' : 'wang'
+  const raw = html !== undefined ? html : getHtml()
+  const body = bodyOf(raw)
+  applyIncoming(
+    next === 'ue'
+      ? wrapEditorEngineHtml(body, 'ue')
+      : body,
+    { forceEngine: next }
+  )
+}
+
+watch(
+  () => props.modelValue,
+  (html) => {
+    if (applyingExternal) return
+    const incomingEngine = detectEditorEngine(html)
+    const incomingBody = bodyOf(html)
+    const currentBody =
+      engineMode.value === 'ue'
+        ? bodyOf(ueHtml.value)
+        : bodyOf(wangHtml.value)
+    if (
+      incomingEngine === engineMode.value &&
+      incomingBody === currentBody
+    ) {
+      return
+    }
+    applyIncoming(html)
+  }
+)
+
+watch(engineMode, (mode) => {
+  if (mode === 'ue') nextTick(() => bindToolbar())
+  else unbindToolbar()
+})
+
+applyIncoming(props.modelValue)
+
+onBeforeUnmount(() => {
+  unbindToolbar()
+  const ed = wangEditorRef.value
+  if (ed && !ed.isDestroyed) {
+    try {
+      ed.destroy()
+    } catch {
+      /* ignore */
+    }
+  }
+})
+
+defineExpose({
+  getHtml,
+  setHtml,
+  getEngineMode,
+  setEngineMode,
+  getWangEditor: () => wangEditorRef.value,
+  getUeEngine: () => ueEngineRef.value,
+  engineMode,
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="alleditor-dual" :data-engine="engineMode">
+    <Toolbar
+      v-if="wangEditorRef"
+      :editor="wangEditorRef"
+      :default-config="toolbarConfig"
+      :mode="mode"
+      class="alleditor-dual__toolbar editor-toolbar"
+    />
+    <div class="alleditor-dual__body">
+      <!-- UE 时离屏挂着 wang，避免 display:none 破坏 TextArea / Toolbar 绑定 -->
+      <Editor
+        v-model="wangHtml"
+        :default-config="editorConfig"
+        :mode="mode"
+        class="alleditor-dual__wang"
+        :class="{ 'is-wang-parked': useUe }"
+        @onCreated="onWangCreated"
+        @onChange="onWangChange"
+      />
+      <div v-if="useUe" class="alleditor-dual__ue-wrap">
+        <UeHtmlEngine
+          ref="ueEngineRef"
+          v-model="ueHtml"
+          :disabled="disabled"
+          :ueditor-base="ueditorBase"
+          class="alleditor-dual__ue"
+          @created="onUeCreated"
+          @ready="onUeReady"
+          @update:model-value="onUeUpdate"
+          @change="onUeUpdate"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.alleditor-dual {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: #fff;
+}
+
+.alleditor-dual__toolbar {
+  flex-shrink: 0;
+}
+
+.alleditor-dual__body {
+  position: relative;
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.alleditor-dual__wang {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.alleditor-dual__wang.is-wang-parked {
+  position: absolute !important;
+  left: -10000px !important;
+  top: 0 !important;
+  width: 800px !important;
+  height: 400px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  flex: none !important;
+  z-index: -1;
+}
+
+.alleditor-dual__ue-wrap {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.alleditor-dual__ue {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100%;
+}
+</style>