Temporary fixes to code mirror editor
This commit is contained in:
parent
0fdaff820e
commit
e8bbc1f4d1
|
@ -93,7 +93,7 @@ class MarkdownAtlas extends React.Component {
|
||||||
mode: 'gfm',
|
mode: 'gfm',
|
||||||
matchBrackets: true,
|
matchBrackets: true,
|
||||||
lineWrapping: true,
|
lineWrapping: true,
|
||||||
// viewportMargin: Infinity,
|
viewportMargin: Infinity,
|
||||||
theme: 'atlas',
|
theme: 'atlas',
|
||||||
extraKeys: {
|
extraKeys: {
|
||||||
Enter: 'newlineAndIndentContinueMarkdownList',
|
Enter: 'newlineAndIndentContinueMarkdownList',
|
||||||
|
@ -104,7 +104,6 @@ class MarkdownAtlas extends React.Component {
|
||||||
// http://codepen.io/lubelski/pen/fnGae
|
// http://codepen.io/lubelski/pen/fnGae
|
||||||
// TODO:
|
// TODO:
|
||||||
// - Emojify
|
// - Emojify
|
||||||
// -
|
|
||||||
return (
|
return (
|
||||||
<Dropzone
|
<Dropzone
|
||||||
onDropAccepted={this.onDropAccepted}
|
onDropAccepted={this.onDropAccepted}
|
||||||
|
@ -118,6 +117,7 @@ class MarkdownAtlas extends React.Component {
|
||||||
onChange={this.onChange}
|
onChange={this.onChange}
|
||||||
options={options}
|
options={options}
|
||||||
ref="editor"
|
ref="editor"
|
||||||
|
className={styles.codeMirrorContainer}
|
||||||
/>
|
/>
|
||||||
</Dropzone>
|
</Dropzone>
|
||||||
);
|
);
|
||||||
|
|
|
@ -11,9 +11,14 @@
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.codeMirrorContainer {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 2000px) and (min-width: 960px) {
|
@media all and (max-width: 2000px) and (min-width: 960px) {
|
||||||
.container {
|
.container {
|
||||||
margin-top: 48px;
|
// margin-top: 48px;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,14 +11,12 @@
|
||||||
:global {
|
:global {
|
||||||
/* Custom styling */
|
/* Custom styling */
|
||||||
.cm-s-atlas.CodeMirror {
|
.cm-s-atlas.CodeMirror {
|
||||||
background: #ffffff;
|
background: #fff;
|
||||||
color: #202020;
|
color: #202020;
|
||||||
font-family: 'Atlas Typewriter', 'Cousine', 'Monaco', monospace;
|
font-family: 'Atlas Typewriter', 'Cousine', 'Monaco', monospace;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
height: auto;
|
height: auto; // This will break layout for some reason. TODO: investigate
|
||||||
}
|
width: 100%;
|
||||||
.cm-s-atlas div.CodeMirror-selected {
|
|
||||||
background: #90CAF9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Disable ondrag cursor for file uploads */
|
/* Disable ondrag cursor for file uploads */
|
||||||
|
|
|
@ -36,13 +36,13 @@ class Editor extends Component {
|
||||||
)}
|
)}
|
||||||
title={ this.props.title }
|
title={ this.props.title }
|
||||||
>
|
>
|
||||||
<Flex flex={ true } align="center">
|
|
||||||
<MarkdownEditor
|
<MarkdownEditor
|
||||||
onChange={ this.props.updateText }
|
onChange={ this.props.updateText }
|
||||||
text={ this.props.text }
|
text={ this.props.text }
|
||||||
replaceText={this.props.replaceText}
|
replaceText={this.props.replaceText}
|
||||||
/>
|
/>
|
||||||
</Flex>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,9 +18,3 @@ html, body {
|
||||||
a {
|
a {
|
||||||
color: #0C77F8;
|
color: #0C77F8;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global {
|
|
||||||
.Codemirror {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
Reference in New Issue