fix: move theme to the codemirror plugin

.github/ISSUE_TEMPLATE/1.bug.md

@@ -6,8 +6,7 @@ labels: bug
 assignees: ''
 ---
 
-If you want to ask for support or request features, [sponsor the project](https://github.com/sponsors/petyosi) and contact me over email.
-If you want to discuss something, use the discussions section for that. 
+If you want to ask for support or request features, [sponsor the project](https://github.com/sponsors/petyosi) and [contact me over email](mailto:[email protected]).
 
 - [ ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
 - [ ] I have read the documentation and cannot find an answer.
@@ -16,7 +15,7 @@ If you want to discuss something, use the discussions section for that.
 A clear and concise description of what the bug is.
 
 **Reproduction**
-Use https://codesandbox.io/ to reproduce the problem so that I can observe the issue on my side and make sure that a potential fix reliably addresses it.
+Start from https://codesandbox.io/p/sandbox/mdx-editor-base-q8s7zr?file=/src/App.tsx to reproduce the problem so that I can observe the issue on my side and make sure that the fix reliably addresses it.
 
 **To Reproduce**
 Steps to reproduce the behavior:

README.md

@@ -10,6 +10,7 @@ The component supports the core markdown syntax and certain extensions, includin
 
 ```jsx
 import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
+import '@mdxeditor/editor/style.css';
 
 export default function App() {
   return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
@@ -21,7 +22,11 @@ The best place to get started using the component is the [documentation](https:/
 
 ## Help and support
 
-Should you encounter any issues, please [create an issue](https://github.com/mdx-editor/editor/issues), but check if there's something similar already open first.
+If you find a bug, check if something similar is not reported already in the [issues](https://github.com/mdx-editor/editor/issues). If not, [create a new issue](https://github.com/mdx-editor/editor/issues/new?assignees=&labels=bug&projects=&template=1.bug.md&title=%5BBUG%5D).
+
+If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, [contact me over email](mailto:[email protected]).
+
+If you want to discuss ideas [join the Discord server](https://discord.gg/4q7U2Hc) or start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
 
 ## License
 

src/plugins/codeblock/CodeBlockNode.tsx

@@ -1,7 +1,7 @@
 import { useCellValue } from '@mdxeditor/gurx'
 import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'
 import React from 'react'
-import { CodeBlockEditorProps, theme$ } from '.'
+import { CodeBlockEditorProps } from '.'
 import { voidEmitter } from '../../utils/voidEmitter'
 import { NESTED_EDITOR_UPDATED_COMMAND, codeBlockEditorDescriptors$ } from '../core'
 
@@ -127,7 +127,6 @@ export class CodeBlockNode extends DecoratorNode<JSX.Element> {
         codeBlockNode={this}
         nodeKey={this.getKey()}
         focusEmitter={this.__focusEmitter}
-        theme={'auto'}
       />
     )
   }
@@ -231,7 +230,6 @@ const CodeBlockEditorContainer: React.FC<
   const Editor = descriptor.Editor
 
   const { codeBlockNode: _, parentEditor: __, ...restProps } = props
-  restProps.theme = useCellValue(theme$)
 
   return (
     <CodeBlockEditorContextProvider parentEditor={props.parentEditor} lexicalNode={props.codeBlockNode}>

src/plugins/codeblock/index.ts

@@ -13,7 +13,6 @@ import { $createCodeBlockNode, CodeBlockNode, CreateCodeBlockNodeOptions } from
 import { VoidEmitter } from '../../utils/voidEmitter'
 import { Cell, Signal, map, withLatestFrom } from '@mdxeditor/gurx'
 import { realmPlugin } from '../../RealmWithPlugins'
-import { SandpackThemeProp } from '@codesandbox/sandpack-react/types'
 export * from './CodeBlockNode'
 
 export type { CodeBlockEditorContextValue, CreateCodeBlockNodeOptions } from './CodeBlockNode'
@@ -45,11 +44,6 @@ export interface CodeBlockEditorProps {
    * Note: you don't need to unsubscribe, the emiter has a single subscription model.
    */
   focusEmitter: VoidEmitter
-
-  /**
-   * The theme CodeMirrorEditor used.
-   */
-  theme: SandpackThemeProp
 }
 
 /**
@@ -81,15 +75,6 @@ export interface CodeBlockEditorDescriptor {
  */
 export const defaultCodeBlockLanguage$ = Cell<string>('')
 
-/**
- * The theme CodeMirrorEditor used.
- * It can be "light" | "dark" | "auto",
- * or the theme in "@codesandbox/sandpack-themes" package,
- * or you can also custom one,
- * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
- */
-export const theme$ = Cell<SandpackThemeProp>('auto')
-
 /**
  * A signal that inserts a new code block into the editor with the published options.
  * @group Code Block
@@ -128,14 +113,9 @@ export const codeBlockPlugin = realmPlugin<{
    * The default language to use when creating a new code block if no language is passed.
    */
   defaultCodeBlockLanguage?: string
-  /**
-   * The theme of CodeMirrorEditor
-   */
-  theme?: SandpackThemeProp
 }>({
   update(realm, params) {
     realm.pub(defaultCodeBlockLanguage$, params?.defaultCodeBlockLanguage || '')
-    realm.pub(theme$, params?.theme || 'auto')
   },
 
   init(realm, params) {

src/plugins/codemirror/CodeMirrorEditor.tsx

@@ -5,11 +5,12 @@ import { CodeBlockEditorProps } from '../codeblock'
 import { useCodeBlockEditorContext } from '../codeblock/CodeBlockNode'
 import { readOnly$ } from '../core'
 import { useCodeMirrorRef } from '../sandpack/useCodeMirrorRef'
-import { useCellValue } from '@mdxeditor/gurx'
+import { useCellValues } from '@mdxeditor/gurx'
+import { codeMirrorTheme$ } from '.'
 
-export const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter, theme }: CodeBlockEditorProps) => {
+export const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => {
   const codeMirrorRef = useCodeMirrorRef(nodeKey, 'codeblock', 'jsx', focusEmitter)
-  const readOnly = useCellValue(readOnly$)
+  const [readOnly, theme] = useCellValues(readOnly$, codeMirrorTheme$)
   const { setCode } = useCodeBlockEditorContext()
 
   React.useEffect(() => {

src/plugins/codemirror/index.tsx

@@ -2,6 +2,7 @@ import { realmPlugin } from '../../RealmWithPlugins'
 import { Cell, Signal, map } from '@mdxeditor/gurx'
 import { CodeBlockEditorDescriptor, appendCodeBlockEditorDescriptor$, insertCodeBlock$ } from '../codeblock'
 import { CodeMirrorEditor } from './CodeMirrorEditor'
+import { SandpackThemeProp } from '@codesandbox/sandpack-react/types'
 
 /**
  * The codemirror code block languages.
@@ -35,18 +36,37 @@ export const insertCodeMirror$ = Signal<{ language: string; code: string }>((r)
   )
 })
 
+/**
+ * The theme CodeMirrorEditor used.
+ * It can be "light" | "dark" | "auto",
+ * or the theme in "@codesandbox/sandpack-themes" package,
+ * or you can also custom one,
+ * learn more https://sandpack.codesandbox.io/docs/getting-started/themes#custom-theme
+ */
+export const codeMirrorTheme$ = Cell<SandpackThemeProp>('auto')
+
 /**
  * A plugin that adds lets users edit code blocks with CodeMirror.
  * @group CodeMirror
  */
-export const codeMirrorPlugin = realmPlugin<{ codeBlockLanguages: Record<string, string> }>({
+export const codeMirrorPlugin = realmPlugin<{
+  codeBlockLanguages: Record<string, string>
+  /**
+   * The theme of CodeMirrorEditor
+   */
+  theme?: SandpackThemeProp
+}>({
   update(r, params) {
-    r.pub(codeBlockLanguages$, params?.codeBlockLanguages)
+    r.pubIn({
+      [codeBlockLanguages$]: params?.codeBlockLanguages,
+      [codeMirrorTheme$]: params?.theme || 'auto'
+    })
   },
 
   init(r, params) {
     r.pubIn({
       [codeBlockLanguages$]: params?.codeBlockLanguages,
+      [codeMirrorTheme$]: params?.theme || 'auto',
       [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(params?.codeBlockLanguages || {})
     })
   }