如何修改BlockNoteEditor及blocknotejs中BlockNoteView组件的内边距？

BlockNote的默认内边距可通过自定义CSS覆盖默认样式调整，核心是定位对应的容器类：

• 调整编辑器整体内边距：

  /* 自定义编辑器整体的上下、左右内边距 */
  .bn-editor {
    padding: 8px 12px;
  }
  

• 单独调整编辑内容区域的内边距：

  /* 仅修改编辑器内部内容区域的内边距 */
  .bn-editor__content {
    padding: 6px;
  }
  

设置editable={false}后，BlockNoteView的左内边距默认是为侧边菜单预留的，可通过以下方式缩小至3px：

1. 利用只读状态属性精准定位修改
   编辑器进入只读模式时会自动添加readonly属性，通过该属性定位并调整：

/* 只读模式下将内容区域左内边距设为3px */
.bn-editor[readonly] .bn-editor__content {
  padding-left: 3px;
}

2. 直接覆盖块元素的默认内边距
   如果上述选择器不生效，可直接定位单个块元素修改：

/* 调整只读模式下每个块的左内边距 */
.bn-editor[readonly] .bn-block {
  padding-left: 3px;
}

提示：若默认样式优先级过高，可在样式后添加!important强制覆盖（仅必要时使用），例如：padding-left: 3px !important;

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