refactor: 拆分 toolbar selector 和 textarea selector

haodaking · Jun 25, 2021 · ada254c · ada254c
1 parent 60e6efc
commit ada254c
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 107 deletions.
diff --git a/build/create-rollup-config.js b/build/create-rollup-config.js
@@ -9,7 +9,9 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import devConf from './config/dev'
 import prdConf from './config/prd'
 
+// 环境变量
 const ENV = process.env.NODE_ENV || 'production'
+const IS_PRD = ENV === 'production'
 
 /**
  * 生成单个 rollup 配置
@@ -19,7 +21,7 @@ function genSingleConfig(customConfig = {}) {
   const { input, output = {}, plugins = [] } = customConfig
 
   let config
-  if (ENV === 'production') {
+  if (IS_PRD) {
     config = prdConf
   } else {
     config = devConf
@@ -43,38 +45,49 @@ function genSingleConfig(customConfig = {}) {
 
 /**
  * 生成 rollup 配置
- * @param {string} distDir dist dir
- * @param {string} name output.name
- * @param {Array} plugins rollup plugins
+ * @param {object} opt { distDir, name, plugins, outputUmdOnDev }
  */
-function createRollupConfig(distDir, name, plugins = []) {
-  const configList = []
+function createRollupConfig(opt = {}) {
+  const { distDir, name, plugins = [], outputUmdOnDev = false } = opt
+  if (!distDir || !name) {
+    throw new Error(`Cannot find 'distDir' or 'name' when create rollup config`)
+  }
 
-  // 生成 umd 格式，对应 package.json main
-  const umdConf = genSingleConfig({
+  // 生成 esm 格式，对应 package.json module
+  const esmConf = genSingleConfig({
     // input - 默认为 src/index.ts
     output: {
-      file: path.resolve(distDir, 'index.js'),
-      format: 'umd',
+      file: path.resolve(distDir, 'index.mjs'), // mjs 格式
+      format: 'esm',
       name,
     },
     plugins,
   })
-  configList.push(umdConf)
 
-  // 生成 esm 格式，对应 package.json module
-  const esmConf = genSingleConfig({
+  // 生成 umd 格式，对应 package.json main
+  const umdConf = genSingleConfig({
     // input - 默认为 src/index.ts
     output: {
-      file: path.resolve(distDir, 'index.mjs'), // mjs 格式
-      format: 'esm',
+      file: path.resolve(distDir, 'index.js'),
+      format: 'umd',
       name,
     },
     plugins,
   })
-  configList.push(esmConf)
 
-  return configList
+  // 返回结果
+  if (IS_PRD) {
+    // 生产环境下，全部输出
+    return [esmConf, umdConf]
+  } else {
+    // 开发环境，只输出一个即可，提高打包速度
+    if (outputUmdOnDev) {
+      // 强制输出 umd —— 某些 package 打包之后需要在浏览器中引用，如 packages/editor
+      return umdConf
+    }
+    // 默认输出 esm —— rollup 引用，默认只需要 mjs （对应 package.json module ）
+    return esmConf
+  }
 }
 
 export default createRollupConfig
diff --git a/examples/index.html b/examples/index.html
@@ -1,50 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>we-2021 demo</title>
-  <style>
-    #editor-container {
-        border:  1px solid #ccc;
-        width: 800px;
-    }
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>we-2021 demo</title>
+<style>
+  /* 编辑器 dom */
+  #container {
+    width: 800px;
+  }
 
-    #editor-content-view {
-      border-top: 1px solid #ccc;
-      margin-top: 30px;
-    }
-    #editor-content-view td, #editor-content-view th {
-      border: 1px solid #ccc;
-      min-width: 50px;
-      height: 20px;
-    }
-    #editor-content-view th {
-      background-color: #f1f1f1;
-    }
-    #editor-content-view blockquote {
-      border-left: 8px solid #d0e5f2;
-      padding: 10px 10px;
-      margin: 10px 0;
-      background-color: #f1f1f1;
-    }
-  </style>
-  <link href="../packages/editor/dist/css/style.css" rel="stylesheet">
+  #editor-toolbar {
+    border: 1px solid #ccc;
+  }
+
+  #editor-text-area {
+    border: 1px solid #ccc;
+  }
+
+  /* 显示内容 */
+  #editor-content-view {
+    border-top: 1px solid #ccc;
+    margin-top: 30px;
+  }
+
+  #editor-content-view td,
+  #editor-content-view th {
+    border: 1px solid #ccc;
+    min-width: 50px;
+    height: 20px;
+  }
+
+  #editor-content-view th {
+    background-color: #f1f1f1;
+  }
+
+  #editor-content-view blockquote {
+    border-left: 8px solid #d0e5f2;
+    padding: 10px 10px;
+    margin: 10px 0;
+    background-color: #f1f1f1;
+  }
+</style>
+<link href="../packages/editor/dist/css/style.css" rel="stylesheet">
 </head>
+
 <body>
   <p>index page <button id="toggle-readOnly">toggle readOnly</button></p>
 
-  <div id="editor-container"></div>
+  <!-- 编辑器 -->
+  <div id="container">
+    <div id="editor-toolbar"></div>
+    <div style="height: 10px;"></div>
+    <div id="editor-text-area"></div>
+  </div>
+
+  <!-- 显示内容 -->
   <div id="editor-content-view"></div>
 
   <script src="js/init-content.js"></script>
   <script src="../packages/editor/dist/index.js"></script>
   <script>
-    const editorView = new WangEditor(
-      'editor-container',
-      // @ts-ignore 初始化内容
-      window.initContent
-    )
+    const editorView = new WangEditor({
+      toolbarSelector: '#editor-toolbar', // 可选
+      textareaSelector: '#editor-text-area',
+      initContent: window.initContent, // 可选
+    })
     // editorView.config.autoFocus = false
     // editorView.config.readOnly = true
     editorView.config.onChange = (editorCore) => {
@@ -60,4 +81,5 @@
     })
   </script>
 </body>
+
 </html>
diff --git a/packages/basic-modules/rollup.config.js b/packages/basic-modules/rollup.config.js
@@ -4,6 +4,6 @@ import createRollupConfig from '../../build/create-rollup-config'
 const distDir = path.resolve(__dirname, './dist')
 const name = 'WangEditorBasicModules'
 
-const configList = createRollupConfig(distDir, name)
+const configList = createRollupConfig({ distDir, name })
 
 export default configList
diff --git a/packages/code-highlight/rollup.config.js b/packages/code-highlight/rollup.config.js
@@ -4,6 +4,6 @@ import createRollupConfig from '../../build/create-rollup-config'
 const distDir = path.resolve(__dirname, './dist')
 const name = 'WangEditorCodeHighLight'
 
-const configList = createRollupConfig(distDir, name)
+const configList = createRollupConfig({ distDir, name })
 
 export default configList
diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
@@ -4,6 +4,6 @@ import createRollupConfig from '../../build/create-rollup-config'
 const distDir = path.resolve(__dirname, './dist')
 const name = 'WangEditorCore'
 
-const configList = createRollupConfig(distDir, name)
+const configList = createRollupConfig({ distDir, name })
 
 export default configList
diff --git a/packages/core/src/assets/bar.less b/packages/core/src/assets/bar.less
@@ -27,5 +27,4 @@
 .w-e-toolbar {
   flex-wrap: wrap;
   position: relative;
-  border-bottom: 1px solid #F0F0F0;
 }
diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts
@@ -43,7 +43,6 @@ export interface IConfig {
   }
 
   // 传统菜单栏的 menu
-  toolbarId?: string
   toolbarKeys?: Array<string | IMenuGroup>
   // 悬浮菜单栏 menu
   hoverbarKeys?: Array<IHoverbarConf>

diff --git a/packages/core/src/create-editor.ts b/packages/core/src/create-editor.ts
@@ -3,7 +3,7 @@
  * @author wangfupeng
  */
 
-import { createEditor, Node, Editor } from 'slate'
+import { createEditor, Node } from 'slate'
 import { withHistory } from 'slate-history'
 import { withDOM } from './editor/with-dom'
 import TextArea from './text-area/TextArea'
@@ -22,13 +22,12 @@ import {
   EDITOR_TO_HOVER_BAR,
   IS_READ_ONLY,
 } from './utils/weak-maps'
-import { genRandomStr } from './utils/util'
-import $ from './utils/dom'
 
 type PluginFnType = <T extends IDomEditor>(editor: T) => T
 
 interface ICreateOption {
-  containerId: string
+  toolbarSelector?: string
+  textareaSelector: string
   config?: IConfig
   initContent?: Node[]
   plugins?: PluginFnType[]
@@ -47,57 +46,41 @@ function genDefaultInitialContent() {
  * 创建编辑器
  */
 function create(option: ICreateOption) {
-  const { containerId, config = {}, initContent, plugins = [] } = option
+  const { toolbarSelector, textareaSelector, config = {}, initContent, plugins = [] } = option
 
   // 创建实例
   let editor = withHistory(withDOM(createEditor()))
 
   // 处理配置
   const editorConfig = genConfig(config || {})
   EDITOR_TO_CONFIG.set(editor, editorConfig)
+  const { toolbarKeys = [], hoverbarKeys = [] } = editorConfig
 
   // editor plugins
   plugins.forEach(plugin => {
     editor = plugin(editor)
   })
 
-  // 处理 DOM
-  let textarea: TextArea
+  // 创建 textarea DOM
+  const textarea = new TextArea(textareaSelector)
+  EDITOR_TO_TEXTAREA.set(editor, textarea)
+  TEXTAREA_TO_EDITOR.set(textarea, editor)
+
+  // 创建 toolbar DOM
   let toolbar: Toolbar | null = null
-  const { toolbarId, toolbarKeys = [], hoverbarKeys = [] } = editorConfig
-  if (toolbarId) {
-    // 手动指定了 toolbarId
-    textarea = new TextArea(containerId)
-    toolbar = new Toolbar(toolbarId)
-  } else {
-    // 未手动指定 toolbarId
-    const $container = $(`#${containerId}`)
-
-    if (toolbarKeys.length > 0) {
-      // 要显示 toolbar
-      const newToolbarId = genRandomStr('toolbar')
-      const $toolbar = $(
-        `<div id="${newToolbarId}" class="w-e-bar w-e-bar-show w-e-toolbar"></div>`
+  if (toolbarSelector) {
+    if (toolbarKeys.length === 0) {
+      console.warn(
+        `Cannot find 'toolbarKeys' in editor config\n在 editor config 中未找到 'toolbarKeys'`
       )
-      $container.append($toolbar)
-      toolbar = new Toolbar(newToolbarId)
-      editorConfig.toolbarId = newToolbarId
     }
 
-    const newContainerId = genRandomStr('text-container')
-    const $textContainer = $(`<div id="${newContainerId}" class="w-e-text-container"></div>`)
-    $textContainer.css('height', '300px') // TODO height 可配置
-    $container.append($textContainer)
-    textarea = new TextArea(newContainerId)
-  }
-  EDITOR_TO_TEXTAREA.set(editor, textarea)
-  TEXTAREA_TO_EDITOR.set(textarea, editor)
-  if (toolbar) {
+    toolbar = new Toolbar(toolbarSelector)
     TOOLBAR_TO_EDITOR.set(toolbar, editor)
     EDITOR_TO_TOOLBAR.set(editor, toolbar)
   }
 
-  // hoverbar
+  // 创建 hoverbar DOM
   let hoverbar: HoverBar | null
   if (hoverbarKeys.length > 0) {
     hoverbar = new HoverBar()

diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -21,10 +21,15 @@ class Toolbar {
   private menus: { [key: string]: MenuType } = {}
   private toolbarItems: IBarItem[] = []
 
-  constructor(toolbarId: string) {
-    const $toolbar = $(`#${toolbarId}`)
+  constructor(selector: string) {
+    // 初始化 DOM
+    const $box = $(selector)
+    if ($box.length === 0) {
+      throw new Error(`Cannot find toolbar DOM by selector '${selector}'`)
+    }
+    const $toolbar = $(`<div class="w-e-bar w-e-bar-show w-e-toolbar"></div>`)
     $toolbar.on('mousedown', e => e.preventDefault())
-
+    $box.append($toolbar)
     this.$toolbar = $toolbar
 
     // 注册 items 。异步，否则拿不到 editor 实例

diff --git a/packages/core/src/text-area/TextArea.ts b/packages/core/src/text-area/TextArea.ts
@@ -24,13 +24,19 @@ class TextArea {
   isUpdatingSelection: boolean = false
   latestElement: DOMElement | null = null
 
-  constructor(textAreaContainerId: string) {
+  constructor(selector: string) {
     // id 不能重复
     this.id = ID++
 
     // 初始化 dom
-    const $textAreaContainer = $(`#${textAreaContainerId}`)
-    this.$textAreaContainer = $textAreaContainer
+    const $box = $(selector)
+    if ($box.length === 0) {
+      throw new Error(`Cannot find textarea DOM by selector '${selector}'`)
+    }
+    const $container = $(`<div class="w-e-text-container"></div>`)
+    $container.css('height', '300px') // TODO height 可配置
+    $box.append($container)
+    this.$textAreaContainer = $container
 
     // 监听 selection change
     window.document.addEventListener('selectionchange', this.onDOMSelectionChange)

diff --git a/packages/editor/rollup.config.js b/packages/editor/rollup.config.js
@@ -4,6 +4,6 @@ import createRollupConfig from '../../build/create-rollup-config'
 const distDir = path.resolve(__dirname, './dist')
 const name = 'WangEditor'
 
-const configList = createRollupConfig(distDir, name)
+const configList = createRollupConfig({ distDir, name, outputUmdOnDev: true })
 
 export default configList