feat: create editor

wangeditor-team · May 19, 2021 · 12d98e4 · 12d98e4
1 parent 3ae5d0c
commit 12d98e4
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 40 deletions.
diff --git a/build/create-rollup-config.js b/build/create-rollup-config.js
@@ -6,8 +6,9 @@ import resolve from '@rollup/plugin-node-resolve'
 import typescript from 'rollup-plugin-typescript2'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import { terser } from 'rollup-plugin-terser'
+import replace from '@rollup/plugin-replace'
 
-const env = process.env.NODE_ENV
+const env = process.env.NODE_ENV || 'production'
 
 function genSingleConfig(distDir, options) {
   const { name = 'index', format, suffix = 'js', plugins = [] } = options
@@ -32,6 +33,9 @@ function genSingleConfig(distDir, options) {
         tsconfig: path.resolve(__dirname, './tsconfig.json'),
       }),
       resolve(),
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(env),
+      }),
       commonjs(),
       cleanup({
         comments: 'none',

diff --git a/examples/index.html b/examples/index.html
@@ -5,9 +5,48 @@
   <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: 600px;
+        height: 300px;
+    }
+    #editor-container [data-slate-editor] {
+        outline: 0;
+        white-space: pre-wrap; /* 【重要】可以显示空格，在连续多空格的情况下 */
+        word-wrap: break-word;
+        padding: 0 10px;
+        height: 100%;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+    #editor-container [data-slate-editor] img {
+        margin: 0 3px;
+    }
+    #editor-container [data-slate-editor] code {
+        font-family: monospace;
+        background-color: #eee;
+        padding: 3px;
+        border-radius: 3px;
+    }
+    #editor-container [data-slate-editor] pre>code {
+        display: block;
+        background-color: #fff;
+        border: 1px solid #ccc;
+    }
+    #editor-container [data-slate-editor] table {
+        border-collapse: collapse;
+    }
+    #editor-container [data-slate-editor] table td {
+        border: 1px solid #ccc;
+        padding: 3px 5px;
+        width: 50px;
+    }
+  </style>
 </head>
 <body>
   <p>index page</p>
+  <div id="editor-container"></div>
 
   <script src="../packages/editor/dist/index.js"></script>
   <!-- <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js"></script> -->

diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-replace": "^2.4.2",
     "@testing-library/jest-dom": "^5.11.6",
     "@types/jest": "^25.2.1",
     "@types/jquery": "^3.3.38",

diff --git a/packages/basic/package.json b/packages/basic/package.json
@@ -37,9 +37,12 @@
     "url": "https://github.com/wangeditor-team/we-2021/issues"
   },
   "peerDependencies": {
-    "dom7": "^3.0.0",
-    "lodash-es": "^4.17.21",
     "slate": "^0.63.0",
-    "snabbdom": "^3.0.1"
+    "snabbdom": "^3.0.1",
+    "dom7": "^3.0.0",
+    "is-hotkey": "^0.2.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -37,17 +37,18 @@
     "url": "https://github.com/wangeditor-team/we-2021/issues"
   },
   "peerDependencies": {
-    "dom7": "^3.0.0",
-    "is-hotkey": "^0.2.0",
-    "lodash-es": "^4.17.21",
     "slate": "^0.63.0",
-    "snabbdom": "^3.0.1"
+    "snabbdom": "^3.0.1",
+    "dom7": "^3.0.0",
+    "is-hotkey": "^0.2.0"
   },
   "dependencies": {
     "scroll-into-view-if-needed": "^2.2.28",
-    "slate-history": "^0.62.0"
+    "slate-history": "^0.62.0",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@types/is-hotkey": "^0.1.2",
     "@types/lodash-es": "^4.17.4"
   }
 }
diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts
@@ -6,11 +6,16 @@
 import { Range, NodeEntry } from 'slate'
 
 export interface IConfig {
+  toolbarId?: string
+  showToolbar: boolean
+
   onChange?: () => void
+
   placeholder?: string
   readOnly?: boolean
   autoFocus?: boolean
   decorate?: (nodeEntry: NodeEntry) => Range[]
+
   toolbarKeys: Array<string | string[]>
   toolButtonConf: {
     [key: string]: any
@@ -22,6 +27,7 @@ export interface IConfig {
  */
 function getDefaultConfig(): IConfig {
   return {
+    showToolbar: true,
     readOnly: false,
     autoFocus: true,
     decorate: () => [],
@@ -31,7 +37,7 @@ function getDefaultConfig(): IConfig {
 }
 
 // 生成配置
-export function genConfig(userConfig: IConfig): IConfig {
+export function genConfig(userConfig: IConfig | {}): IConfig {
   // 默认配置
   const defaultConfig = getDefaultConfig()
 

diff --git a/packages/core/src/create-editor.ts b/packages/core/src/create-editor.ts
@@ -7,7 +7,87 @@ import { createEditor, Node } from 'slate'
 import { withHistory } from 'slate-history'
 import { withDOM } from './editor/with-dom'
 import TextArea from './text-area/TextArea'
+import Toolbar from './menus/toolbar/Toolbar'
+import { IConfig, genConfig } from './config/index'
+import {
+  TEXTAREA_TO_EDITOR,
+  TOOLBAR_TO_EDITOR,
+  EDITOR_TO_ON_CHANGE,
+  EDITOR_TO_CONFIG,
+} from './utils/weak-maps'
+import { genRandomStr } from './utils/util'
+import $ from './utils/dom'
 
-function create() {}
+function genDefaultInitialContent() {
+  return [
+    {
+      type: 'paragraph',
+      children: [{ text: '' }],
+    },
+  ]
+}
+
+/**
+ * 创建编辑器
+ * @param containerId DOM 容器 ID
+ * @param config editor config
+ * @param content editor content
+ */
+function create(containerId: string, config: IConfig | {} = {}, content?: Node[]) {
+  // 创建实例
+  const editor = withHistory(withDOM(createEditor()))
+
+  // 处理配置
+  const editorConfig = genConfig(config || {})
+  EDITOR_TO_CONFIG.set(editor, editorConfig)
+
+  // 处理 DOM
+  let textarea: TextArea
+  let toolbar: Toolbar | null = null
+  const { toolbarId, showToolbar } = editorConfig
+  if (toolbarId) {
+    // 手动指定了 toolbarId
+    textarea = new TextArea(containerId)
+    toolbar = new Toolbar(toolbarId)
+  } else {
+    // 未手动指定 toolbarId
+    const $container = $(`#${containerId}`)
+
+    if (showToolbar) {
+      // 要显示 toolbar
+      const newToolbarId = genRandomStr('w-e-toolbar')
+      const $toolbar = $(`<div id="${newToolbarId}"></div>`)
+      $container.append($toolbar)
+      toolbar = new Toolbar(newToolbarId)
+      editorConfig.toolbarId = newToolbarId
+    }
+
+    const newContainerId = genRandomStr('w-e-text-container')
+    const $textContainer = $(`<div id="${newContainerId}"></div>`)
+    $container.append($textContainer)
+    textarea = new TextArea(newContainerId)
+  }
+  TEXTAREA_TO_EDITOR.set(textarea, editor)
+  toolbar && TOOLBAR_TO_EDITOR.set(toolbar, editor)
+
+  // 初始化内容
+  let initialContent: Node[] = content && content.length > 0 ? content : genDefaultInitialContent()
+  editor.children = initialContent
+  textarea.onEditorChange() // 初始化时触发一次，以便能初始化 textarea DOM 和 selection
+
+  // 绑定 editor onchange
+  EDITOR_TO_ON_CHANGE.set(editor, () => {
+    // 触发 textarea DOM 变化
+    textarea.onEditorChange()
+
+    // 触发 toolbar DOM 变化
+    toolbar && toolbar.onEditorChange()
+
+    // 触发用户配置的 onchange 函数
+    if (editorConfig.onChange) editorConfig.onChange()
+  })
+
+  return editor
+}
 
 export default create
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -3,8 +3,16 @@
  * @author wangfupeng
  */
 
-// 注册 formats
-export * from './formats/index'
+import create from './create-editor'
+
+// 创建编辑器
+export const createEditor = create
 
 // editor 接口和 command
 export * from './editor/dom-editor'
+
+// 注册 formats
+export * from './formats/index'
+
+// 注册 menus
+export * from './menus/index'
diff --git a/packages/core/src/utils/util.ts b/packages/core/src/utils/util.ts
@@ -3,18 +3,18 @@
  * @author wangfupeng
  */
 
-// /**
-//  * 获取随机数字符串
-//  * @param prefix 前缀
-//  * @returns 随机数字符串
-//  */
-// export function genRandomStr(prefix: string = 'r'): string {
-//     // 当前时间 + 随机数
-//     const d = Date.now().toString().slice(-5)
-//     const r = Math.random().toString(36).slice(-5)
+/**
+ * 获取随机数字符串
+ * @param prefix 前缀
+ * @returns 随机数字符串
+ */
+export function genRandomStr(prefix: string = 'r'): string {
+  // 当前时间 + 随机数
+  const d = Date.now().toString().slice(-5)
+  const r = Math.random().toString(36).slice(-5)
 
-//     return `${prefix}-${d}${r}`
-// }
+  return `${prefix}-${d}${r}`
+}
 
 export function promiseResolveThen(fn: Function) {
   // @ts-ignore

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -41,7 +41,6 @@
     "@wangeditor/core": "^0.0.1",
     "dom7": "^3.0.0",
     "is-hotkey": "^0.2.0",
-    "lodash-es": "^4.17.21",
     "slate": "^0.63.0",
     "snabbdom": "^3.0.1"
   }

diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
@@ -3,16 +3,8 @@
  * @author wangfupeng
  */
 
-import { Editor } from 'slate'
-import core, { fn as fn1 } from '@wangeditor/core'
-import basic, { fn as fn2 } from '@wangeditor/basic'
+import { createEditor } from '@wangeditor/core'
 
-import { add } from './util'
-
-console.log('editor index', Editor)
-console.log('add', add(10, 20))
-
-console.log('core', core)
-console.log('core fn', fn1())
-console.log('basic', basic)
-console.log('basic fn', fn2())
+const editor = createEditor('editor-container')
+console.log('editor', editor)
+console.log('editor.config', editor.getConfig())
diff --git a/packages/editor/src/util.ts b/packages/editor/src/util.ts