diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | spring-front/src/App.js | 3 | ||||
| -rw-r--r-- | spring-front/src/components/Editor.js | 16 | ||||
| -rw-r--r-- | spring-front/src/index.css | 5 |
4 files changed, 22 insertions, 4 deletions
@@ -1,2 +1,2 @@ # mdrtl -A markdown editor with rtl support.<br/> +A bare-bones rtl markdown editor.<br/> diff --git a/spring-front/src/App.js b/spring-front/src/App.js index e965d51..a91418e 100644 --- a/spring-front/src/App.js +++ b/spring-front/src/App.js @@ -10,6 +10,9 @@ export default class App extends React.Component { return ( <div> <Editor /> + <img className="icon" src="save.png" width="20" height="20" /> + <img className="icon" src="load.jpg" width="20" height="20" /> + <img className="icon" src="delete.png" width="20" height="20" /> </div> ); } diff --git a/spring-front/src/components/Editor.js b/spring-front/src/components/Editor.js index 3f8fefb..eee31a9 100644 --- a/spring-front/src/components/Editor.js +++ b/spring-front/src/components/Editor.js @@ -26,7 +26,7 @@ const md = new mit({ html: true }) .use(mittexmath, { engine: katex, delimiters: "gitlab", - katexOptions: { macros: { "\\RR": "\\mathbb{R}" }, output: "mathml" }, + katexOptions: { output: "mathml" }, }) .use(mitmmdtable) .use(mithljs, { inline: true, auto: true, code: true, hljs: hljs }); @@ -41,7 +41,8 @@ export default class Editor extends React.Component { this.updateCodeSyntaxHighlighting.bind(this); this.handleChange = this.handleChange.bind(this); this.parseMarkdown = this.parseMarkdown.bind(this); - this.state = { value: "" }; + this.handleTitleClick = this.handleTitleClick.bind(this); + this.state = { value: "", drawerActive: false }; // this.hljs_worker = new Worker("../highlight_worker.js"); // this.md_worker = new Worker("../parse_worker.js"); } @@ -112,7 +113,13 @@ export default class Editor extends React.Component { } } + handleTitleClick() { + this.setState((prevState) => ({ drawerActive: !prevState.drawerActive })); + } + render() { + const { markdownText, drawerTitle, drawerChildren } = this.props; + const drawerStyles = this.state.drawerActive ? "is-expanded" : ""; return ( <div> <div> @@ -134,7 +141,10 @@ export default class Editor extends React.Component { onScroll={this.handleScroll.bind(this)} onKeyDown={this.handleKeyDown.bind(this)} direction="rtl" - ></textarea> + tabIndex="0" + > + {markdownText} + </textarea> </div> <div className="split right"> <div direction="rtl" id="markdown-placeholder"></div> diff --git a/spring-front/src/index.css b/spring-front/src/index.css index 942cb96..159a28e 100644 --- a/spring-front/src/index.css +++ b/spring-front/src/index.css @@ -100,3 +100,8 @@ code { white-space: pre-wrap; overflow-y: auto; } + +.icon { + z-index: 2; + position: relative; +} |