From 260b6435cf0e878ccc03169d99d4eb3a3bf5eece Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 14 Jul 2022 19:29:07 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0editor=E6=96=B0props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/package.json                 |  1 +
 docs/src/.vuepress/client.ts      |  1 +
 docs/src/.vuepress/demo-block.vue |  8 ++++++--
 docs/src/.vuepress/polyfills.ts   |  8 ++++++++
 docs/src/api/editor/editor.md     | 30 ++++++++++++++++++++++++++++++
 docs/src/api/editor/services.md   |  4 ++--
 pnpm-lock.yaml                    |  2 ++
 7 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/.vuepress/polyfills.ts

diff --git a/docs/package.json b/docs/package.json
index a5226b31..f5bb3040 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -16,6 +16,7 @@
     "highlight.js": "^11.2.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },
   "devDependencies": {
diff --git a/docs/src/.vuepress/client.ts b/docs/src/.vuepress/client.ts
index d4761aff..0cf72c1e 100644
--- a/docs/src/.vuepress/client.ts
+++ b/docs/src/.vuepress/client.ts
@@ -1,6 +1,7 @@
 import 'element-plus/dist/index.css';
 import 'highlight.js/styles/github.css';
 
+import './polyfills';
 import { defineClientConfig  } from '@vuepress/client';
 import ElementPlus from 'element-plus';
 import MagicForm from '@tmagic/form';
diff --git a/docs/src/.vuepress/demo-block.vue b/docs/src/.vuepress/demo-block.vue
index e574dab5..368d2dc2 100644
--- a/docs/src/.vuepress/demo-block.vue
+++ b/docs/src/.vuepress/demo-block.vue
@@ -196,8 +196,9 @@
 }
 </style>
 
-<script type="text/babel" lang="ts">
+<script lang="ts">
 import hljs from 'highlight.js';
+import serialize from 'serialize-javascript';
 
 export function stripScript(content) {
   const result = content.match(/<(script)>([\s\S]+)<\/\1>/);
@@ -294,7 +295,10 @@ export default {
     text() {
       return this.isStringConfig ?
         hljs.highlight('js', this.config).value :
-        hljs.highlight('json', JSON.stringify(this.config, null, 2)).value;
+        hljs.highlight('js', serialize(this.config, {
+          space: 2,
+          unsafe: true,
+        }).replace(/"(\w+)":\s/g, '$1: ')).value;
     },
 
     formConfig() {
diff --git a/docs/src/.vuepress/polyfills.ts b/docs/src/.vuepress/polyfills.ts
new file mode 100644
index 00000000..2fb45308
--- /dev/null
+++ b/docs/src/.vuepress/polyfills.ts
@@ -0,0 +1,8 @@
+// serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
+if (typeof global === 'undefined') {
+  (window as any).global = window;
+}
+
+if (typeof globalThis === 'undefined') {
+  (window as any).globalThis = window;
+}
diff --git a/docs/src/api/editor/editor.md b/docs/src/api/editor/editor.md
index 1e9e80e6..bd1d1b3e 100644
--- a/docs/src/api/editor/editor.md
+++ b/docs/src/api/editor/editor.md
@@ -330,6 +330,36 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
   
 当选中框与组件不贴合时，可以通过此方法进行调整
 
+### isContainer
+
+- **类型：** (el: HTMLDivElement) => boolean | Promise<boolean>;
+  
+- **默认值：** (el: HTMLElement) => el.classList.contains('magic-ui-container')
+  
+- **详情：**
+  
+当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
+
+### containerHighlightDuration
+
+- **类型：** number;
+  
+- **默认值：** 800（单位为ms）
+  
+- **详情：**
+  
+当组件拖动过程中停留在画布上超过 [containerHighlightDuration](#containerHighlightDuration) 时长时，识别当前是否有容器
+
+### containerHighlightClassName
+
+- **类型：** string;
+  
+- **默认值：** 'tmagic-stage-container-highlight'
+  
+- **详情：**
+  
+识别到容器后，会给其dom上添加的class
+
 
 ## slots
 
diff --git a/docs/src/api/editor/services.md b/docs/src/api/editor/services.md
index 452d4364..c3c44da4 100644
--- a/docs/src/api/editor/services.md
+++ b/docs/src/api/editor/services.md
@@ -434,7 +434,7 @@ editorService.move(1, 1);
 
   对于每一个方法，都可以为其添加before/after两个扩展方法，分别在该方法运行前与运行后调用
 
-  调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值
+  调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个个参数则是原方法的return值
 
 - **示例：**
 
@@ -449,7 +449,7 @@ editorService.usePlugin({
       type: 'button',
     }];
   },
-  afterAdd(result, value) {
+  afterAdd(value, result) {
     console.log(value) // { type: 'button' }
     console.log('after add');
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3397622a..ec7cd7dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -85,6 +85,7 @@ importers:
       highlight.js: ^11.2.0
       lodash: ^4.17.21
       lodash-es: ^4.17.21
+      serialize-javascript: ^6.0.0
       vue: ^3.2.0
       vuepress: ^2.0.0-beta.48
     dependencies:
@@ -96,6 +97,7 @@ importers:
       highlight.js: 11.5.1
       lodash: 4.17.21
       lodash-es: 4.17.21
+      serialize-javascript: 6.0.0
       vue: 3.2.37
     devDependencies:
       '@vuepress/bundler-vite': 2.0.0-beta.48