docs: 添加editor新props

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": {

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';

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() {

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;
+}

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
 

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');
   },

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