rookeries
/
rookeries
1
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity

Resolve issues with server-side rendering hiccupping on code editor.

This commit is contained in:
Dorian 2017-09-25 22:29:05 -04:00
parent 72f9ff2894
commit cfd2486c0b
3 changed files with 21 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/CodeEditor.js Normal file
View File

@ -0,0 +1,20 @@
/*
Work around to allow for both client and server side rendering.
@copyright (c) Copyright 2013-2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/
/* eslint-disable */
import {h} from 'preact'; /** @jsx h*/
if (process.env.BROWSER_ENV) {
require('codemirror/mode/markdown/markdown');
module.exports = require('react-codemirror2');
} else {
module.exports = (props) => {
return <div>Server side rendering of code editor is unavailable. {props}</div>;
}
}

49
src/views/code_editor.js
View File

@ -1,49 +0,0 @@
/*
Wrapper around react-codemirror to handle server-side rendering issues.
@copyright (c) Copyright 2013-2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/
import {h, Component} from 'preact'; /** @jsx h*/
import PropTypes from 'prop-types';
/*
Remember to install codemirror before react-codemirror,
see issue https://github.com/JedWatson/react-codemirror/issues/34
Also add in the themes in the CSS to get proper theming support.
*/
import CodeMirror from 'react-codemirror2';
// TODO: Figure out how to work around this import.
// Workaround for rendering CodeMirror server-side
if (typeof(navigator) !== 'undefined') {
require('codemirror/mode/markdown/markdown');
}
class CodeEditor extends Component {
static get propTypes() {
return {
code: PropTypes.string,
language: PropTypes.string,
theme: PropTypes.string,
}
}
render() {
let code = this.props.code;
let options = {mode: this.props.language, theme: this.props.theme};
// TODO: Improve workaround when rendering React CodeMirror on the server.
// TODO: Add patch to resolve issue at https://github.com/JedWatson/react-codemirror/issues
// TODO: Resolve issues with rendering Code Mirror componnets.
return (<CodeMirror value={ code } onChange={ this.handleUpdateCode } options={ options }/>);
}
}
export {CodeEditor};

13
src/views/journal_markdown_viewer.js
View File

@ -21,18 +21,7 @@ import {fetchPage, savePage} from '../actions';
import appStore from '../store'; import appStore from '../store';
import {withRouter} from 'react-router-dom'; import {withRouter} from 'react-router-dom';
/* import CodeMirror from './CodeEditor';
Remember to install codemirror before react-codemirror,
see issue https://github.com/JedWatson/react-codemirror/issues/34
Also add in the themes in the CSS to get proper theming support.
*/
import CodeMirror from 'react-codemirror2';
// TODO: Figure out how to work around this import.
// Workaround for rendering CodeMirror server-side
if (typeof(navigator) !== 'undefined') {
require('codemirror/mode/markdown/markdown');
}
// # TODO Remove and rework to allow for two flags, rather than a single state? // # TODO Remove and rework to allow for two flags, rather than a single state?