From 842fbcc6683efc521fb0e010c4b3e59e4a51a829 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 27 Jul 2018 19:42:35 -0600 Subject: [PATCH] implement syntax highlighter --- src/renderer/component/fileRender/view.jsx | 4 +- .../component/fileViewer/internal/player.jsx | 2 + src/renderer/component/viewers/codeViewer.jsx | 19 +- .../component/viewers/documentViewer.jsx | 9 +- src/renderer/scss/all.scss | 2 + src/renderer/scss/component/_file-render.scss | 33 +- .../scss/component/_markdown-editor.scss | 32 +- .../scss/component/_syntax-highlighter.scss | 40 + yarn.lock | 713 ++++++++++++++++-- 9 files changed, 748 insertions(+), 106 deletions(-) create mode 100644 src/renderer/scss/component/_syntax-highlighter.scss diff --git a/src/renderer/component/fileRender/view.jsx b/src/renderer/component/fileRender/view.jsx index 9667c309f..d2d91f6c1 100644 --- a/src/renderer/component/fileRender/view.jsx +++ b/src/renderer/component/fileRender/view.jsx @@ -18,8 +18,8 @@ type Props = { class FileRender extends React.PureComponent { renderViewer() { - const { source, mediaType, currentTheme } = this.props; - const viewerProps = { source, theme: currentTheme }; + const { source, mediaType, currentTheme: theme } = this.props; + const viewerProps = { source, theme }; // Supported mediaTypes const mediaTypes = { diff --git a/src/renderer/component/fileViewer/internal/player.jsx b/src/renderer/component/fileViewer/internal/player.jsx index 9ae490b66..a470f52c6 100644 --- a/src/renderer/component/fileViewer/internal/player.jsx +++ b/src/renderer/component/fileViewer/internal/player.jsx @@ -195,8 +195,10 @@ class VideoPlayer extends React.PureComponent { this.setState({ unsupported: true }); return false; } + console.info(filename); // File to render const fileSource = { + contentType, downloadPath, filePath: url, fileType: path.extname(filename).substring(1), diff --git a/src/renderer/component/viewers/codeViewer.jsx b/src/renderer/component/viewers/codeViewer.jsx index f37fa64d1..b00e8ade3 100644 --- a/src/renderer/component/viewers/codeViewer.jsx +++ b/src/renderer/component/viewers/codeViewer.jsx @@ -1,10 +1,16 @@ // @flow import React from 'react'; -import CodeMirror from 'codemirror'; +import CodeMirror from 'codemirror/lib/codemirror'; +// Syntax mode +import 'codemirror/mode/javascript/javascript'; +import 'codemirror/mode/markdown/markdown'; +import 'codemirror/mode/xml/xml'; type Props = { + theme: string, value: string, + contentType: string, }; class CodeViewer extends React.PureComponent { @@ -15,9 +21,11 @@ class CodeViewer extends React.PureComponent { } componentDidMount() { + const { theme, contentType } = this.props; this.codeMirror = CodeMirror.fromTextArea(this.textarea.current, { - mode: 'markdown', - readOnly: true, + mode: contentType, + theme: theme === 'dark' ? 'dark' : 'default', + readOnly: 'nocursor', dragDrop: false, lineNumbers: true, lineWrapping: true, @@ -26,10 +34,9 @@ class CodeViewer extends React.PureComponent { render() { const { value } = this.props; - return ( -
-