|
|
@ -1,8 +1,7 @@
|
|
|
|
import React from "react";
|
|
|
|
import React from "react";
|
|
|
|
import { marked } from "marked";
|
|
|
|
import { marked } from "marked";
|
|
|
|
import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
|
|
|
|
import { faFileLines } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
|
|
|
|
import { faPenToSquare, faFileLines } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
import "./App.scss";
|
|
|
|
import "./App.scss";
|
|
|
|
|
|
|
|
|
|
|
|
marked.setOptions({
|
|
|
|
marked.setOptions({
|
|
|
@ -24,38 +23,45 @@ class App extends React.Component {
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="App container-fluid vh-100">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div className="row">
|
|
|
|
<div class="row min-vh-100">
|
|
|
|
<div className="editor-topbar col-md-6 border border-dark border-2">
|
|
|
|
<div class="col-12 col-md-6 bg-red">
|
|
|
|
|
|
|
|
<div class="d-flex flex-column h-100">
|
|
|
|
|
|
|
|
<div class="row bg-color-6 text-white">
|
|
|
|
<h3 className="text-white text-center">
|
|
|
|
<h3 className="text-white text-center">
|
|
|
|
<FontAwesomeIcon icon={faPenToSquare} />
|
|
|
|
<FontAwesomeIcon icon={faPenToSquare} />
|
|
|
|
{` Editor`}
|
|
|
|
{` Editor`}
|
|
|
|
</h3>
|
|
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="preview-topbar col-md-6 border border-dark border-2">
|
|
|
|
<div class="row bg-blue flex-grow-1 text-white">
|
|
|
|
<h3 className="text-white text-center">
|
|
|
|
|
|
|
|
<FontAwesomeIcon icon={faFileLines} />
|
|
|
|
|
|
|
|
{` Preview`}
|
|
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="row h-100">
|
|
|
|
|
|
|
|
<div className="col-md-6 p-0 border border-dark border-2">
|
|
|
|
|
|
|
|
<textarea
|
|
|
|
<textarea
|
|
|
|
className="text-justify h-100 px-3 py-1 form-control p-0 rounded-0"
|
|
|
|
className="text-justify px-3 py-1 form-control p-0 rounded-0"
|
|
|
|
|
|
|
|
style={{ "min-height": 300 }}
|
|
|
|
id="editor"
|
|
|
|
id="editor"
|
|
|
|
value={this.state.markdown}
|
|
|
|
value={this.state.markdown}
|
|
|
|
onChange={this.handleMarkdownChange}
|
|
|
|
onChange={this.handleMarkdownChange}
|
|
|
|
></textarea>
|
|
|
|
></textarea>{" "}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="col-md-6 p-0 border border-dark border-2">
|
|
|
|
</div>
|
|
|
|
<div className="" id="preview">
|
|
|
|
<div class="col-12 col-md-6 bg-red">
|
|
|
|
|
|
|
|
<div class="d-flex flex-column h-100">
|
|
|
|
|
|
|
|
<div class="row bg-color-8 text-white">
|
|
|
|
|
|
|
|
<h3 className="text-white text-center">
|
|
|
|
|
|
|
|
<FontAwesomeIcon icon={faFileLines} />
|
|
|
|
|
|
|
|
{` Preview`}
|
|
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row bg-blue flex-grow-1 text-white">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
className="text-justify vh-100 px-3 py-1 m-0 overflow-auto markdown-body"
|
|
|
|
className="text-justify px-3 py-1 m-0 overflow-auto markdown-body"
|
|
|
|
|
|
|
|
style={{ "min-height": 300 }}
|
|
|
|
|
|
|
|
id="preview"
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
__html: marked.parse(this.state.markdown),
|
|
|
|
__html: marked.parse(this.state.markdown),
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>{" "}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|