请求为GrapesJS的mj-section元素添加独立边框样式配置功能

使用包版本：

• grapesjs: ^0.20.2
• grapesjs-mjml: ^1.0.3

需要给MJML的mj-section元素配置独立边框功能：选中该元素时，装饰面板里要显示独立的上下左右边框样式选项——这个功能旧版本里是有的，现在新版本缺失，需恢复。

预期效果 #

实际效果 #

要恢复该功能，需通过GrapesJS自定义配置给mj-section重新添加独立边框的样式编辑选项，具体步骤如下：

1. 扩展样式管理器面板 #

初始化编辑器时，在styleManager的装饰面板中添加独立边框属性配置：

const editor = grapesjs.init({
  // 其他原有配置...
  styleManager: {
    sectors: [
      {
        name: '装饰',
        open: false,
        properties: [
          // 开启完整的边框方向控制选项
          {
            type: 'border',
            property: 'border',
            name: '边框',
            full: true,
          },
          // 也可单独拆分出四个方向的边框（按需选择）
          {
            type: 'border',
            property: 'border-top',
            name: '上边框',
          },
          {
            type: 'border',
            property: 'border-right',
            name: '右边框',
          },
          {
            type: 'border',
            property: 'border-bottom',
            name: '下边框',
          },
          {
            type: 'border',
            property: 'border-left',
            name: '左边框',
          },
        ],
      },
      // 其他原有面板配置...
    ],
  },
});

2. 强制绑定元素样式属性 #

如果上述配置未生效，说明默认mj-section类型覆盖了设置，直接扩展元素类型强制添加样式属性：

editor.DomComponents.addType('mj-section', {
  extends: 'mj-section',
  model: {
    defaults: {
      // 指定要显示的样式属性列表
      styleProps: ['border', 'border-top', 'border-right', 'border-bottom', 'border-left'],
    },
  },
});

3. 验证效果 #

重启编辑器后，选中mj-section元素，装饰面板会显示独立的上下左右边框配置选项，与旧版本功能一致。

由于MJML的mj-section原生支持这几个边框属性，配置的样式会直接被MJML解析渲染，无需额外处理。

内容的提问来源于stack exchange，提问作者Muthu