Preview style

src/components/PreferencesModal/GeneralTab.tsx

@@ -71,7 +71,7 @@ const GeneralTab = () => {
             onChange={selectLanguage}
           >
             <option value='en-US'>English (US)</option>
-            <option value='ja'>Japanese</option>
+            <option value='ja'>日本語</option>
           </select>
         </SectionControl>
       </Section>

src/components/PreferencesModal/MarkdownTab.tsx

@@ -8,6 +8,7 @@ import { SelectChangeEventHandler } from '../../lib/events'
 import { themes } from '../../lib/CodeMirror'
 import { capitalize } from '../../lib/string'
 import { useTranslation } from 'react-i18next'
+import { usePreviewStyle, defaultPreviewStyle } from '../../lib/preview'
 
 const defaultPreviewContent = `# hello-world.js
 
@@ -26,6 +27,24 @@ const PreviewContainer = styled.div`
 `
 
 const MarkdownTab = () => {
+  const { previewStyle, setPreviewStyle } = usePreviewStyle()
+  const [newPreviewStyle, setNewPreviewStyle] = useState(previewStyle)
+  const updatePreviewStyle = useCallback(
+    (newValue: string) => {
+      setNewPreviewStyle(newValue)
+    },
+    [setNewPreviewStyle]
+  )
+  const savePreviewStyle = useCallback(() => {
+    if (previewStyle !== newPreviewStyle) {
+      setPreviewStyle(newPreviewStyle)
+    }
+  }, [setPreviewStyle, newPreviewStyle, previewStyle])
+
+  const resetNewPreviewStyle = useCallback(() => {
+    setNewPreviewStyle(defaultPreviewStyle)
+  }, [setNewPreviewStyle])
+
   const { preferences, setPreferences } = usePreferences()
 
   const selectCodeFenceTheme: SelectChangeEventHandler = useCallback(
@@ -49,6 +68,18 @@ const MarkdownTab = () => {
 
   return (
     <div>
+      <Section>
+        <SectionHeader>{t('preferences.previewStyle')}</SectionHeader>
+        <SectionControl>
+          <button onClick={savePreviewStyle}>Save</button>
+          <button onClick={resetNewPreviewStyle}>Use default style</button>
+          <CustomizedCodeEditor
+            value={newPreviewStyle}
+            onChange={updatePreviewStyle}
+            mode='css'
+          />
+        </SectionControl>
+      </Section>
       <Section>
         <SectionHeader>{t('preferences.markdownCodeBlockTheme')}</SectionHeader>
         <SectionControl>

src/components/atoms/CodeEditor.tsx

@@ -15,8 +15,7 @@ const StyledContainer = styled.div`
 
 const defaultCodeMirrorOptions: CodeMirror.EditorConfiguration = {
   lineWrapping: true,
-  lineNumbers: true,
-  mode: 'markdown'
+  lineNumbers: true
 }
 
 interface CodeEditorProps {
@@ -33,6 +32,7 @@ interface CodeEditorProps {
   indentType?: EditorIndentTypeOptions
   indentSize?: EditorIndentSizeOptions
   keyMap?: EditorKeyMapOptions
+  mode?: string
 }
 
 class CodeEditor extends React.Component<CodeEditorProps> {
@@ -51,7 +51,8 @@ class CodeEditor extends React.Component<CodeEditorProps> {
       indentWithTabs: this.props.indentType === 'tab',
       indentUnit: indentSize,
       tabSize: indentSize,
-      keyMap
+      keyMap,
+      mode: this.props.mode || 'markdown'
     })
     this.codeMirror.on('change', this.handleCodeMirrorChange)
     window.addEventListener('codemirror-mode-load', this.reloadMode)

src/components/atoms/CustomizedCodeEditor.tsx

@@ -10,13 +10,15 @@ interface CustomizedCodeEditor {
   ) => void
   codeMirrorRef?: (codeMirror: CodeMirror.EditorFromTextArea) => void
   className?: string
+  mode?: string
 }
 
 const CustomizedCodeEditor = ({
   onChange,
   value,
   codeMirrorRef,
-  className
+  className,
+  mode
 }: CustomizedCodeEditor) => {
   const { preferences } = usePreferences()
   return (
@@ -31,6 +33,7 @@ const CustomizedCodeEditor = ({
       indentType={preferences['editor.indentType']}
       indentSize={preferences['editor.indentSize']}
       keyMap={preferences['editor.keyMap']}
+      mode={mode}
     />
   )
 }

src/components/atoms/CustomizedMarkdownPreviewer.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { usePreferences } from '../../lib/preferences'
 import MarkdownPreviewer from './MarkdownPreviewer'
+import { usePreviewStyle } from '../../lib/preview'
 
 interface CustomizedMarkdownPreviewer {
   content: string
@@ -10,11 +11,13 @@ const CustomizedMarkdownPreviewer = ({
   content
 }: CustomizedMarkdownPreviewer) => {
   const { preferences } = usePreferences()
+  const { previewStyle } = usePreviewStyle()
 
   return (
     <MarkdownPreviewer
       content={content}
       theme={preferences['markdown.codeBlockTheme']}
+      style={previewStyle}
     />
   )
 }

src/components/atoms/MarkdownPreviewer.tsx

@@ -13,7 +13,6 @@ import CodeMirror from '../../lib/CodeMirror'
 import h from 'hastscript'
 import useForceUpdate from 'use-force-update'
 import styled from '../../lib/styled'
-import { githubPreviewStyle } from '../../lib/preview'
 
 const schema = mergeDeepRight(gh, { attributes: { '*': ['className'] } })
 
@@ -150,19 +149,17 @@ function createMarkdownProcessor(options: MarkdownProcessorOptions = {}) {
     .use(rehypeReact, { createElement: React.createElement })
 }
 
-const StyledContainer = styled.div`
-  .CodeMirror {
-    height: inherit;
-  }
-  ${githubPreviewStyle}
-`
-
 interface MarkdownPreviewerProps {
   content: string
   theme?: string
+  style?: string
 }
 
-const MarkdownPreviewer = ({ content, theme }: MarkdownPreviewerProps) => {
+const MarkdownPreviewer = ({
+  content,
+  theme,
+  style
+}: MarkdownPreviewerProps) => {
   const forceUpdate = useForceUpdate()
   const [rendering, setRendering] = useState(false)
   const previousContentRef = useRef('')
@@ -209,6 +206,15 @@ const MarkdownPreviewer = ({ content, theme }: MarkdownPreviewerProps) => {
     renderContent(content)
   }, [content, theme, rendering, renderContent, renderedContent])
 
+  const StyledContainer = useMemo(() => {
+    return styled.div`
+      .CodeMirror {
+        height: inherit;
+      }
+      ${style}
+    `
+  }, [style])
+
   return (
     <StyledContainer className='MarkdownPreviewer'>
       {rendering && 'rendering...'}

src/index.tsx

@@ -8,8 +8,10 @@ import { combineProviders } from './lib/utils/context'
 import { DbProvider } from './lib/db'
 import { PreferencesProvider } from './lib/preferences'
 import { GeneralStatusProvider } from './lib/generalStatus'
+import { PreviewStyleProvider } from './lib/preview'
 
 const CombinedProvider = combineProviders(
+  PreviewStyleProvider,
   GeneralStatusProvider,
   PreferencesProvider,
   DialogProvider,

src/lib/CodeMirror.ts

@@ -1,7 +1,9 @@
 import CodeMirror from 'codemirror'
 import 'codemirror/addon/runmode/runmode'
 import 'codemirror/addon/mode/overlay'
+import 'codemirror/addon/comment/comment'
 import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/css/css'
 import debounce from 'lodash/debounce'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/keymap/sublime'

src/lib/i18n/enUS.ts

@@ -32,6 +32,7 @@ export default {
     'preferences.editorPreview': 'Editor Preview',
 
     // Preferences MarkdownTab
+    'preferences.previewStyle': 'Preview Style',
     'preferences.markdownCodeBlockTheme': 'Code Block Theme'
   }
 }

src/lib/i18n/ja.ts

@@ -32,6 +32,7 @@ export default {
     'preferences.editorPreview': 'エディタープレヴュー',
 
     // Preferences MarkdownTab
+    'preferences.previewStyle': 'プレビュースタイル',
     'preferences.markdownCodeBlockTheme': 'コードブロックテーマ'
   }
 }

src/lib/localStorageKeys.ts

@@ -1,3 +1,4 @@
 export const preferencesKey = 'note.boostio.co:preferences'
 export const storageDataListKey = 'note.boostio.co:storageDataList'
 export const generalStatusKey = 'note.boostio.co:generalStatusKey'
+export const previewStyleKey = 'note.boostio.co:previewStyleKey'