关于react 编写的一些疑惑

[xuliuzhu1834]

这是我用react初始化的代码

const init = () => {
      const instance = new Cherry(config(value, onValueChange))
//      instance.setTheme('preview')
      setCherryInstance(instance)
    }

useEffect(() => {
      if (containerRef?.current) {
        init()
      }
    }, [])

似乎没有 setConfig这样的函数，方便我改配置。
现在如果我像改config，就只能重新渲染, 比如我像从编辑模式，改成纯预览模式，并且隐藏toolbar，现在switchMode函数无法满足要求,因为它并不会隐藏toolbar.

另外setTheme也让我很疑惑， 我用了这个函数后， 基本的样式就全部丢失了，我错过了什么配置吗？
instance.setTheme('preview')

[sunsonliu]

感谢反馈，目前还不支持setConfig，所谓的setConfig就是要先destory再new一下。。现在destory还没实现。。。。。

至于switchMode无法隐藏工具栏的问题，应该是个bug，或者说这个api没实现好，我们重新评估下怎么搞哈，我们的预期也是.switchModel('previewOnly')后隐藏工具栏。临时修复方案就是在cherry的容器上加一个“cherry--no-toolbar”的class，见下图

至于setTheme，这个是cherry的主题切换哈，取值范围见下图：

[xuliuzhu1834]

另外 setTheme，似乎也是个BUG， 比如在config中设置了

{
theme: [
      { className: 'default', label: 'default' },
      { className: 'preview', label: 'preview' },
      { className: 'edit', label: 'edit' },
    ],
}

在外部调用setTheme(preview)，default和edit全部丢失.
这个可能才是我只要setTheme，就丢失样式的主要原因。

[nenge123]

我觉其实不需要new
只需要重绘toolbar 不就是setConfig.
因此只需要增加setToolBar 可以删除工具API 以及可以随时注册的格式转换.

[nenge123]

主题方面如果换成CSS变量,就很好解决,

添加data-theme="xxx",不要用额外类.theme__default

.cherry:not([data-theme]),.cherry[data-theme="default"]{
/* 默认 */
--theme-color:;
}

[sunsonliu]

我觉其实不需要new 只需要重绘toolbar 不就是setConfig. 因此只需要增加setToolBar 可以删除工具API 以及可以随时注册的格式转换.

setConfig里涉及的config不仅包含toolbar相关，还包含编辑器相关配置、语法引擎相关配置、回调函数配置、预览区域编辑等等配置。所以setConfig要重绘toolbar、重绘编辑器、重绘预览区、重绘引擎等等，而所谓的重绘=销毁+新建 或者 重绘=新建+替换，从功能复用度考虑，销毁的复用度高于替换，所以我们选择 重绘=销毁+新建

[sunsonliu]

另外 setTheme，似乎也是个BUG， 比如在config中设置了

{
theme: [
      { className: 'default', label: 'default' },
      { className: 'preview', label: 'preview' },
      { className: 'edit', label: 'edit' },
    ],
}

在外部调用setTheme(preview)，default和edit全部丢失. 这个可能才是我只要setTheme，就丢失样式的主要原因。

首先需要确认下有没有这些主题对应的css哈，如果没有，建议参考src/sass/themes/*scss （如下图）新建负责自身业务需求的主题哈。

[sunsonliu]

主题方面如果换成CSS变量,就很好解决,

添加data-theme="xxx",不要用额外类.theme__default

.cherry:not([data-theme]),.cherry[data-theme="default"]{ /* 默认 */ --theme-color:; }

额。这个本质上是一样的，用户目前的编辑器状态是 .cherry[data-theme="preview"]，还是会出现对应的样式不存在的情况。而要解决这个问题也是很简单，只要增加一套.cherry的默认样式就好了（如下），也并不需要变量化。。

.cherry {
  default
}
.cherry.cherry--theme-default{
  default
}
.cherry.cherry--theme-preview{
  preview
}

[xuliuzhu1834]

很感谢两位的回复，我目前先按照改样式和重新new的方式来实现需求，另外期待setConfig类似功能的函数

[sunsonliu]

从编辑模式，改成纯预览模式

如果只是从编辑模式，改成纯预览模式，则不需要重新new，只需要调用.switchModel('previewOnly')后，再在cherry的容器上加一个“cherry--no-toolbar”的class哈

[sunsonliu]

从编辑模式，改成纯预览模式

如果只是从编辑模式，改成纯预览模式，则不需要重新new，只需要调用.switchModel('previewOnly')后，再在cherry的容器上加一个“cherry--no-toolbar”的class哈

已修复.switchModel('previewOnly')无法隐藏工具栏的问题，已提交到dev分支，可以试试哈

[youchuyu]

您好，我试了一下，在触发setTheme(theme__preview)函数以后，preview所在div的class变成了
cherry-previewer cherry-markdowncherry-preview--full theme__preview
其中cherry-markdowncherry-preview--full两个类型粘在一起了，导致继承自cherry-markdown的样式都不生效了。

[nenge123]

您好，我试了一下，在触发setTheme(theme__preview)函数以后，preview所在div的class变成了

cherry-previewer cherry-markdowncherry-preview--full theme__preview

其中cherry-markdowncherry-preview--full两个类型粘在一起了，导致继承自cherry-markdown的样式都不生效了。

你多了 theme__ ，

[youchuyu]

这个应该不影响，主要是触发setTheme()函数后，cherry-markdown和cherry-preview--full两个class变成cherry-markdowncherry-preview--full了

[youchuyu]

补充一下，clearfix和cherry--no-toolbar两个类也会变成clearfixcherry--no-toolbar

[sunsonliu]

补充一下，clearfix和cherry--no-toolbar两个类也会变成clearfixcherry--no-toolbar

收到，我们定位下

[sunsonliu]

补充一下，clearfix和cherry--no-toolbar两个类也会变成clearfixcherry--no-toolbar

已修复并更新到dev分支了哈，欢迎尝试

[youchuyu]

收到 谢谢大佬