From 12d98e4bee179e9d277ec3ec2ecb827962ed0e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E7=A6=8F=E6=9C=8B?= Date: Wed, 19 May 2021 17:42:14 +0800 Subject: [PATCH] feat: create editor --- build/create-rollup-config.js | 6 ++- examples/index.html | 39 ++++++++++++++ package.json | 1 + packages/basic/package.json | 9 ++-- packages/core/package.json | 11 ++-- packages/core/src/config/index.ts | 8 ++- packages/core/src/create-editor.ts | 82 +++++++++++++++++++++++++++++- packages/core/src/index.ts | 12 ++++- packages/core/src/utils/util.ts | 22 ++++---- packages/editor/package.json | 1 - packages/editor/src/index.ts | 16 ++---- packages/editor/src/util.ts | 3 -- 12 files changed, 170 insertions(+), 40 deletions(-) delete mode 100644 packages/editor/src/util.ts diff --git a/build/create-rollup-config.js b/build/create-rollup-config.js index a7ed1b027..440db56da 100644 --- 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 index 5b7a6a322..fe5e83a85 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,9 +5,48 @@ we-2021 demo +

index page

+
diff --git a/package.json b/package.json index d9c566a22..16348d460 100644 --- 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 index c747113e6..8feb7a168 100644 --- 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 index 866b1f2e9..c3f9dba52 100644 --- 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 index b69870fc4..6a1582abe 100644 --- 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 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 index a7371a474..902bce297 100644 --- 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 = $(`
`) + $container.append($toolbar) + toolbar = new Toolbar(newToolbarId) + editorConfig.toolbarId = newToolbarId + } + + const newContainerId = genRandomStr('w-e-text-container') + const $textContainer = $(`
`) + $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 index fafa729f1..dd915f0f0 100644 --- 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 index 38843c76c..aa79c2b12 100644 --- 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 index 035bc885d..d3fdd4d9e 100644 --- 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 index 42d85ec09..2d9af301e 100644 --- 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 deleted file mode 100644 index a39d4ef19..000000000 --- a/packages/editor/src/util.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function add(a: number, b: number): number { - return a + b -}