预览模式下的背景样式问题

[yangzhenyu322]

Prerequisites

• There isn't an existing issue that requests the same feature, to avoid duplicates.

Issue Type

Feature Request

Description of the Problem or Idea

问题一：预览模式下的背景样式问题
我将cherry mark down 作为我开发的gpt回答框组件，希望实现一个纯预览模式下能够随着文本内容增加高度随之增加的显示框，因此我在创建cherry mark down实例时没有设置其高度，发现其背景样式有些问题，具体如下：
1、刚实例化时的样式如下：

2、内容开始出现

3、内容填充到一定高度

这导致如果回答框内容太少，会出现两种不一样的背景，显得很突兀，不知道是主题样式（明亮、暗黑等其他主题也会出现这种情况）的问题还是预览模式的问题。

复现：
组件-不设置高度，内容为空或一行内均可复现

cherryMarkDown实例化时设置预览模式的配置：
editor: {
codemirror: {
// markdown主题：default、dark暗黑、light明亮、green清新、red热情、violet淡雅、blue清幽
theme: 'light',
},
// defaultModel 编辑器初始化后的模式：1、edit&preview双栏编辑预览模式（）；2、editOnly纯编辑模式；3、previewOnly预览模式
defaultModel: 'previewOnly',
},

预期效果：希望实例化组件（不固定高度）后，其背景与主题背景完全一致，不会出现两种颜色背景的情况，并且随着内容的增加，背景样式依然与主题保持一致

问题二：实例化多个组件的主题切换问题
我在项目中创建了多个组件实例，一个为edit&preview模式（A markdown），其他均为previewOnly模式（B markdown），然后我发现我在A中通过侧边栏切换主题后，B的主题样式会自动与A同步（A与B的id不同），具体如下：
1、一开始A和B的默认主题都是明亮主题：

2、然后通过侧边栏切换A组件主题为暗黑背景：

然后B组件我并没有做任何改动，其主题自动与A组件同步：

经过测试A组件无论切换任何主题，B组件也会一起变化。

复现：
实例化一个edit&preview模式下的A组件，再实例化一个（或多个）previewOnly模式下的B组件，然后通过侧边栏改变A组件的主题，再观察B组件的主题会不会与A组件自动同步

预期效果：
实例化多个组件的初衷是希望能够独立设置每个markdown组件的样式，希望A组件的主题切换后，B组件主题保持不变。

Further Information

No response

Contributing

None

[sunsonliu]

感谢反馈，第一个问题是背景高度和内容高度不一致的bug，第二个问题是一个特性。
我们将：
1、修复第一个bug
2、提供一个配置是否允许多个实例共用主题配置，如果是true，效果如现在的表现；如果是false，则根据另一个配置来判断用哪个主题

[sunsonliu]

已增加主题的命名空间机制，相同命名空间使用同一个主题缓存

[yangzhenyu322]

非常感谢，目前背景问题已经解决了，主题命名空间机制也发挥了作用，但貌似仍存在一些问题，比如：
1、我一开始初始化themeNameSpace：‘cherry'的markdown组件主题为light：

这时候命名空间为cherry的主题都设置主题为light。
2、然后我修改该markdown组件themeNameSpace：‘cherry-markdown'，尝试通过侧边栏更换主题，它成功了：

然而当我刷新或切换路由时，它出现了如图所示的问题：

这是我的markdown组件配置：
const initMarkDown = () => {
const cherrymarkdown = new Cherry({
id: props.id,
value: defaultContent, // 默认文本内容
/**
* 配置主题，第三方可以自行扩展主题
*/
theme: [
{ className: 'default', label: '默认' },
{ className: 'dark', label: '暗黑' },
{ className: 'light', label: '明亮' },
{ className: 'green', label: '清新' },
{ className: 'red', label: '热情' },
{ className: 'violet', label: '淡雅' },
{ className: 'blue', label: '清幽' },
],
// 定义主题的作用范围，相同themeNameSpace的实例共享主题配置
themeNameSpace: 'cherry-markdown',
editor: {
// markdown主题：default、dark暗黑、light明亮、green清新、red热情、violet淡雅、blue清幽
theme: 'default',
codemirror: {
// 是否自动focus 默认为true
autofocus: true,
},
// defaultModel 编辑器初始化后的模式：1、edit&preview双栏编辑预览模式（）；2、editOnly纯编辑模式；3、previewOnly预览模式
defaultModel: 'edit&preview',
},
toolbars:{
// 工具栏主题：light or dark（默认）
theme: 'default',
// 是否展示顶部工具栏：true展示(默认)；false不展示
showToolbar: true,
// 工具栏功能设置：自定义
toolbar: ['undo', 'redo', '|', 'color', 'size', 'justify', 'bold', 'italic', 'underline', 'strikethrough', 'ruby', '|', 'header', 'quote', '|', 'list', { insert: ['table', 'code','image', 'audio', 'video', 'link', 'br', 'formula', 'toc', 'pdf', 'word'] }, 'graph'],
// 右侧工具栏
toolbarRight: ['fullScreen', 'togglePreview', 'switchModel', 'export', 'codeTheme'],
// 侧边工具栏
sidebar: ['settings', 'theme', 'mobilePreview'],
// 选中时工具栏
bubble: [ 'size', 'color', 'justify', '|', 'bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup'],
// 浮动工具栏
float: ['h1', 'h2', 'h3', '|', 'quote', 'quickTable', 'code', 'image', 'drawIo'],
},
// 解锁引擎配置
engine: {
// 全局配置
global: {
// 是否启用经典换行逻辑: true一个换行会被忽略，两个以上连续换行会分割成段落；false(默认)一个换行会转成
，两个会分割成段落，三个会转成
并分割段落
classicBr: false,
},
// 内置语法配置
syntax: {
codeBlock: {
theme: 'dark', //默认为dark深色主题, default、dark、funky、okaidia、twilight、coy、(solarized light、tomorrow night, 这两个主题还不可用，不知道为什么)
wrap: false, // 超出长度是否换行，false则显示滚动条
lineNumber: true, // 默认显示行号
},
header: {
// 标题样式：default 默认样式，前面有锚点；autonumber 标题前面有自增序号锚点；none 标题前面没有锚点
anchorStyle: 'default'
}
}
},
// 打开draw.io编辑页的url，如果为空则drawio按钮失效(访问被拒绝了，不知道什么原因，待解决)
drawioIframeUrl: 'https://app.diagrams.net/#Hyangzhenyu322%2FdrawIo%2Fmain%2Fopentool.drawio',
// 文件上传：默认以base64编码存储，也可以以图片的形式存储，但需要将文件存储的url在callback返回，fileUpload(file, callback)
// fileUpload: callbacks.fileUpload,

    // callback: {
    //     afterChange: callbacks.afterChange,
    //     afterInit: callbacks.afterInit,
    //     beforeImageMounted: callbacks.beforeImageMounted,
    // },
})

}
效果期望：
不同命名主题组件的主题修改互相不影响，即使刷新后也不会出现上述步骤二图示的情况

[sunsonliu]

确实有问题，我们再跟下哈~

[sunsonliu]

已修复哈，已提交到dev分支，会跟下次发布