From 4aa63e30d2fe697ab99de12a6cba8eda2cc44d82 Mon Sep 17 00:00:00 2001 From: Petyo Ivanov Date: Tue, 30 Jan 2024 11:45:45 +0200 Subject: [PATCH] fix: move theme to the codemirror plugin --- .github/ISSUE_TEMPLATE/1.bug.md | 5 ++--- README.md | 7 +++++- src/plugins/codeblock/CodeBlockNode.tsx | 4 +--- src/plugins/codeblock/index.ts | 20 ----------------- src/plugins/codemirror/CodeMirrorEditor.tsx | 7 +++--- src/plugins/codemirror/index.tsx | 24 +++++++++++++++++++-- 6 files changed, 35 insertions(+), 32 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/1.bug.md b/.github/ISSUE_TEMPLATE/1.bug.md index 1bfe4fcf..d3d03fe4 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.md +++ b/.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:petyo@mdxeditor.dev). - [ ] 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: diff --git a/README.md b/README.md index bc845665..dd0b9907 100644 --- a/README.md +++ b/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 ; @@ -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:petyo@mdxeditor.dev). + +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 diff --git a/src/plugins/codeblock/CodeBlockNode.tsx b/src/plugins/codeblock/CodeBlockNode.tsx index b179865d..875e0eec 100644 --- a/src/plugins/codeblock/CodeBlockNode.tsx +++ b/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 { 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 ( diff --git a/src/plugins/codeblock/index.ts b/src/plugins/codeblock/index.ts index b33c492f..3e7fb569 100644 --- a/src/plugins/codeblock/index.ts +++ b/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('') -/** - * 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('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) { diff --git a/src/plugins/codemirror/CodeMirrorEditor.tsx b/src/plugins/codemirror/CodeMirrorEditor.tsx index 220863d2..924e8775 100644 --- a/src/plugins/codemirror/CodeMirrorEditor.tsx +++ b/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(() => { diff --git a/src/plugins/codemirror/index.tsx b/src/plugins/codemirror/index.tsx index 7547a446..15bb712d 100644 --- a/src/plugins/codemirror/index.tsx +++ b/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('auto') + /** * A plugin that adds lets users edit code blocks with CodeMirror. * @group CodeMirror */ -export const codeMirrorPlugin = realmPlugin<{ codeBlockLanguages: Record }>({ +export const codeMirrorPlugin = realmPlugin<{ + codeBlockLanguages: Record + /** + * 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 || {}) }) }