Use kebab case for theme

BoostIO · Jan 6, 2020 · 8f51c69 · 8f51c69
1 parent a86b79a
commit 8f51c69
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/src/components/CodeMirrorStyle.tsx b/src/components/CodeMirrorStyle.tsx
@@ -10,7 +10,7 @@ const ThemeLink = ({ theme }: ThemeLinkProps) => {
   if (theme == null || theme === 'default') {
     return null
   }
-  if (theme === 'solarized dark') {
+  if (theme === 'solarized-dark') {
     theme = 'solarized'
   }
   return (

diff --git a/src/components/atoms/CodeEditor.tsx b/src/components/atoms/CodeEditor.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import CodeMirror from '../../lib/CodeMirror'
+import CodeMirror, { getCodeMirrorTheme } from '../../lib/CodeMirror'
 import styled from '../../lib/styled'
 import {
   EditorIndentTypeOptions,
@@ -48,7 +48,7 @@ class CodeEditor extends React.Component<CodeEditorProps> {
         : this.props.keyMap
     this.codeMirror = CodeMirror.fromTextArea(this.textAreaRef.current!, {
       ...defaultCodeMirrorOptions,
-      theme: this.props.theme == null ? 'default' : this.props.theme,
+      theme: getCodeMirrorTheme(this.props.theme),
       indentWithTabs: this.props.indentType === 'tab',
       indentUnit: indentSize,
       tabSize: indentSize,
@@ -77,7 +77,7 @@ class CodeEditor extends React.Component<CodeEditorProps> {
       this.codeMirror.setValue(this.props.value)
     }
     if (this.props.theme !== prevProps.theme) {
-      this.codeMirror.setOption('theme', this.props.theme)
+      this.codeMirror.setOption('theme', getCodeMirrorTheme(this.props.theme))
     }
     if (
       this.props.fontSize !== prevProps.fontSize ||

diff --git a/src/components/atoms/MarkdownPreviewer.tsx b/src/components/atoms/MarkdownPreviewer.tsx
@@ -69,7 +69,7 @@ function rehypeCodeMirrorAttacher(options: Partial<RehypeCodeMirrorOptions>) {
         parent.properties.className != null
           ? [...parent.properties.className]
           : []
-      if (theme === 'solarized dark') {
+      if (theme === 'solarized-dark') {
         classNames.push(`cm-s-solarized`, `cm-s-dark`, 'CodeMirror')
       } else {
         classNames.push(`cm-s-${theme}`, 'CodeMirror')

diff --git a/src/lib/CodeMirror.ts b/src/lib/CodeMirror.ts
@@ -19,6 +19,12 @@ export async function requireMode(mode: string) {
   dispatchModeLoad()
 }
 
+export function getCodeMirrorTheme(theme?: string) {
+  if (theme == null) return 'default'
+  if (theme === 'solarized-dark') return 'solarized dark'
+  return theme
+}
+
 function loadMode(_CodeMirror: any) {
   const memoizedModeResult = new Map<string, CodeMirror.ModeInfo | null>()
   function findModeByMIME(mime: string) {
@@ -57,7 +63,7 @@ export const themes = [
   'neo',
   'paraiso-light',
   'solarized',
-  'solarized dark',
+  'solarized-dark',
   'twilight',
   'zenburn',
   '3024-night',