Skip to content

Commit 6d46fbb

Browse files
peterjumapeterjuma
committed
Add split screen
1 parent d7b7943 commit 6d46fbb

File tree

9 files changed

+891
-168
lines changed

9 files changed

+891
-168
lines changed

‎package-lock.json‎

Lines changed: 636 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
"react-dom": "17.0.1",
2525
"react-markdown": "^6.0.1",
2626
"react-scripts": "4.0.0",
27+
"react-syntax-highlighter": "^15.4.3",
28+
"remark-gfm": "^1.0.0",
2729
"turndown": "^7.0.0",
2830
"turndown-plugin-gfm": "^1.0.2"
2931
},

‎src/App.js‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,8 @@ import FooterBar from "./FooterBar";
1010
import hljs from "highlight.js";
1111
import keyCodes from "./KeyCodes";
1212
import { openDB } from "idb/with-async-ittr.js";
13-
// Markdown
14-
import markdownitEmoji from "markdown-it-emoji";
15-
import markdownitTaskLists from "markdown-it-task-lists";
16-
import * as marked from "marked";
17-
import MarkdownIt from "markdown-it";
18-
import TurndownService from "turndown";
19-
import * as turndownPluginGfm from "turndown-plugin-gfm";
20-
// Turndown
21-
var turndownService = new TurndownService();
22-
var gfm = turndownPluginGfm.gfm;
23-
turndownService.use(gfm);
24-
// Markdown-It & markdownitEmoji
25-
var md = new MarkdownIt();
26-
md.use(markdownitEmoji);
27-
// Task List
28-
md.use(markdownitTaskLists);
13+
import { html2md, md2html } from "./useMarkDown";
14+
import marked from "marked";
2915

3016
class App extends Component {
3117
constructor(props) {
@@ -37,6 +23,7 @@ class App extends Component {
3723
activepage: "viewnote", // editnote // previewnote // viewnote
3824
action: "", // addnote // updatenote
3925
sortby: "4", //"0" - Title: A-Z, "1" - Title: Z-A, "2" - Created: Newest, "3" - Created: Oldest, "4" - Modified: Newest, "5" - Modified: Oldest
26+
split: false, //
4027
allnotes: [],
4128
};
4229
this.handleNoteListItemClick = this.handleNoteListItemClick.bind(this);
@@ -61,6 +48,7 @@ class App extends Component {
6148
this.updateCodeSyntaxHighlighting;
6249
this.addCopyButtons;
6350
this.handleCopyCodeButtonClick;
51+
this.handleSplitScreen = this.handleSplitScreen.bind(this);
6452
}
6553

6654
async componentDidMount() {
@@ -339,7 +327,7 @@ class App extends Component {
339327
}
340328

341329
handleSaveNote(e, note) {
342-
var notebody = turndownService.turndown(
330+
var notebody = html2md.turndown(
343331
marked(marked(document.getElementById("notebody").value))
344332
);
345333
this.setState((prevState) => {
@@ -411,11 +399,11 @@ class App extends Component {
411399
let pasteData;
412400
if (html) {
413401
// console.log(html);
414-
turndownService.keep(["pre", "code"]);
415-
pasteData = turndownService.turndown(html);
402+
html2md.keep(["pre", "code"]);
403+
pasteData = html2md.turndown(html);
416404
} else {
417405
/<[a-z][\s\S]*>/i.test(text)
418-
? (pasteData = turndownService.turndown(marked(text)))
406+
? (pasteData = html2md.turndown(marked(text)))
419407
: (pasteData = text);
420408
}
421409
if (document.queryCommandSupported("insertText")) {
@@ -485,7 +473,7 @@ class App extends Component {
485473
copiedContent = document.selection.createRange().htmlText;
486474
}
487475
}
488-
this.handleCopyNote("", turndownService.turndown(copiedContent));
476+
this.handleCopyNote("", html2md.turndown(copiedContent));
489477
}
490478

491479
handleKeyEvent(event) {
@@ -629,8 +617,8 @@ class App extends Component {
629617

630618
handleDownloadNote(e) {
631619
const html = document.getElementById("notebody-view").innerHTML;
632-
const data = turndownService.turndown(marked(html));
633-
const title = turndownService
620+
const data = html2md.turndown(marked(html));
621+
const title = html2md
634622
.turndown(marked(document.getElementById("notetitle-view").innerHTML))
635623
.replace(/ /g, "_");
636624
const fileName = `${title || "note"}.md`;
@@ -646,6 +634,12 @@ class App extends Component {
646634
e.preventDefault();
647635
}
648636

637+
handleSplitScreen() {
638+
this.setState((prevState) => ({
639+
split: !prevState.split,
640+
}));
641+
}
642+
649643
render() {
650644
const noteListItems = this.state.allnotes.map((note) => (
651645
<NoteList
@@ -699,13 +693,15 @@ class App extends Component {
699693
notebody: this.state.notebody,
700694
action: this.state.action,
701695
}}
696+
splitscreen={this.state.split}
702697
handleEditNote={this.handleEditNote}
703698
handleSaveNote={this.handleSaveNote}
704699
handlePaste={this.handlePaste}
705700
handleKeyEvent={this.handleKeyEvent}
706701
processInput={this.processInput}
707702
handleCancel={this.handleCancel}
708703
handleImageUpload={this.handleImageUpload}
704+
handleSplitScreen={this.handleSplitScreen}
709705
/>
710706
);
711707
}

‎src/NoteEditor.js‎

Lines changed: 112 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,125 @@
1-
import React from "react";
1+
import React, { Fragment } from "react";
2+
import NotePreview from "./NotePreview";
23

34
function NoteEditor(props) {
45
var note = props.editNoteData;
56
const ButtonStyle = {
67
border: "1px solid #dcdcde",
78
};
9+
const styles = {
10+
main_editor: {
11+
paddingLeft: "5px",
12+
paddingRight: "1px",
13+
height: "100%",
14+
display: "flex",
15+
flexDirection: "column",
16+
width: props.splitscreen ? "50%" : "100%",
17+
},
18+
};
19+
820
return (
9-
<div className="main-editor">
10-
<div className="title-header">
11-
<input
12-
name="title"
13-
type="text"
14-
id="notetitle"
15-
data-action={note.action}
16-
value={note.notetitle}
17-
placeholder="Title"
18-
autoComplete="off"
19-
onChange={(e) => props.handleEditNote(e, note)}
20-
/>
21-
</div>
22-
<div className="md-editor-tools" id="mdtools">
23-
<i
24-
className="fas fa-bold btn"
25-
onClick={(e) => props.processInput("bold")}
26-
></i>
27-
<i
28-
className="fas fa-italic btn"
29-
onClick={(e) => props.processInput("italic")}
30-
></i>
31-
<i
32-
className="fas fa-heading btn"
33-
onClick={(e) => props.processInput("heading")}
34-
></i>
35-
<i
36-
className="fas fa-link btn"
37-
onClick={(e) => props.processInput("link")}
38-
></i>
39-
<i
40-
className="fas fa-list-ol btn"
41-
onClick={(e) => props.processInput("olist")}
42-
></i>
43-
<i
44-
className="fas fa-list btn"
45-
onClick={(e) => props.processInput("ulist")}
46-
></i>
47-
<i
48-
className="fas fa-quote-left btn"
49-
onClick={(e) => props.processInput("blockquote")}
50-
></i>
51-
<i
52-
className="far fa-image btn"
53-
onClick={(e) => props.processInput("image")}
54-
></i>
55-
<i
56-
className="fas fa-terminal btn"
57-
onClick={(e) => props.processInput("backticks")}
58-
></i>
59-
<i
60-
className="fas fa-code btn"
61-
onClick={(e) => props.processInput("codeblock")}
62-
></i>
63-
<i
64-
className="far fa-check-square btn"
65-
onClick={(e) => props.processInput("tasklist")}
66-
></i>
67-
<i
68-
className="fas fa-table btn"
69-
onClick={(e) => props.processInput("table")}
70-
></i>
71-
<i
72-
className="fas fa-strikethrough btn"
73-
onClick={(e) => props.processInput("strike")}
74-
></i>
75-
</div>
76-
<div className="md-txtarea">
77-
<textarea
78-
placeholder="Note"
79-
id="notebody"
80-
data-action={note.action}
81-
value={note.notebody}
82-
onChange={(e) => props.handleEditNote(e, note)}
83-
onPaste={(e) => props.handlePaste(e)}
84-
onKeyDown={(e) => props.handleKeyEvent(e)}
85-
/>
86-
<div className="right-bottom-bar">
87-
<div className="saveCancelBar">
88-
<i
89-
className="far fa-save btn-save-cancel fa-2x"
90-
onClick={(e) => props.handleSaveNote(e, note)}
91-
data-action={note.action}
92-
></i>
93-
<i
94-
className="far fa-window-close btn-save-cancel fa-2x"
95-
onClick={(e) => props.handleCancel(e, note)}
96-
></i>
21+
<div className="right-row">
22+
<div></div>
23+
<div style={styles.main_editor}>
24+
<div className="title-header">
25+
<input
26+
name="title"
27+
type="text"
28+
id="notetitle"
29+
data-action={note.action}
30+
value={note.notetitle}
31+
placeholder="Title"
32+
autoComplete="off"
33+
onChange={(e) => props.handleEditNote(e, note)}
34+
/>
35+
</div>
36+
<div className="md-editor-tools" id="mdtools">
37+
<i
38+
className="fas fa-bold btn"
39+
onClick={(e) => props.processInput("bold")}
40+
></i>
41+
<i
42+
className="fas fa-italic btn"
43+
onClick={(e) => props.processInput("italic")}
44+
></i>
45+
<i
46+
className="fas fa-heading btn"
47+
onClick={(e) => props.processInput("heading")}
48+
></i>
49+
<i
50+
className="fas fa-link btn"
51+
onClick={(e) => props.processInput("link")}
52+
></i>
53+
<i
54+
className="fas fa-list-ol btn"
55+
onClick={(e) => props.processInput("olist")}
56+
></i>
57+
<i
58+
className="fas fa-list btn"
59+
onClick={(e) => props.processInput("ulist")}
60+
></i>
61+
<i
62+
className="fas fa-quote-left btn"
63+
onClick={(e) => props.processInput("blockquote")}
64+
></i>
65+
<i
66+
className="far fa-image btn"
67+
onClick={(e) => props.processInput("image")}
68+
></i>
69+
<i
70+
className="fas fa-terminal btn"
71+
onClick={(e) => props.processInput("backticks")}
72+
></i>
73+
<i
74+
className="fas fa-code btn"
75+
onClick={(e) => props.processInput("codeblock")}
76+
></i>
77+
<i
78+
className="far fa-check-square btn"
79+
onClick={(e) => props.processInput("tasklist")}
80+
></i>
81+
<i
82+
className="fas fa-table btn"
83+
onClick={(e) => props.processInput("table")}
84+
></i>
85+
<i
86+
className="fas fa-strikethrough btn"
87+
onClick={(e) => props.processInput("strike")}
88+
></i>
89+
<i
90+
className="fas fa-columns btn"
91+
onClick={() => {
92+
props.handleSplitScreen();
93+
}}
94+
></i>
95+
</div>
96+
<div className="md-txtarea">
97+
<textarea
98+
placeholder="Note"
99+
id="notebody"
100+
data-action={note.action}
101+
value={note.notebody}
102+
onChange={(e) => props.handleEditNote(e, note)}
103+
onPaste={(e) => props.handlePaste(e)}
104+
onKeyDown={(e) => props.handleKeyEvent(e)}
105+
/>
106+
107+
<div className="right-bottom-bar">
108+
<div className="saveCancelBar">
109+
<i
110+
className="far fa-save btn-save-cancel fa-2x"
111+
onClick={(e) => props.handleSaveNote(e, note)}
112+
data-action={note.action}
113+
></i>
114+
<i
115+
className="far fa-window-close btn-save-cancel fa-2x"
116+
onClick={(e) => props.handleCancel(e, note)}
117+
></i>
118+
</div>
97119
</div>
98120
</div>
99121
</div>
122+
{props.splitscreen && <NotePreview note={note} />}
100123
</div>
101124
);
102125
}

‎src/NoteMain.js‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,4 @@
1-
import react from "react";
2-
import $ from "jquery";
3-
import markdownitEmoji from "markdown-it-emoji";
4-
import markdownitTaskLists from "markdown-it-task-lists";
5-
import * as marked from "marked";
6-
import MarkdownIt from "markdown-it";
7-
import TurndownService from "turndown";
8-
import * as turndownPluginGfm from "turndown-plugin-gfm";
9-
10-
// Turndown
11-
var turndownService = new TurndownService();
12-
var gfm = turndownPluginGfm.gfm;
13-
turndownService.use(gfm);
14-
15-
// Markdown-It & markdownitEmoji
16-
var md = new MarkdownIt();
17-
md.use(markdownitEmoji);
18-
19-
// Task List
20-
md.use(markdownitTaskLists);
21-
1+
import { md2html } from "./useMarkDown";
222
function NoteMain(props) {
233
// var jsonData = (JSON.stringify(props.notesData, null, 2)).replace(/\\n/g, '');
244
var { notesData } = props;
@@ -27,13 +7,15 @@ function NoteMain(props) {
277
<div className="page-header">
288
<h2
299
id="notetitle-view"
30-
dangerouslySetInnerHTML={{ __html: md.render(notesData.notetitle) }}
10+
dangerouslySetInnerHTML={{
11+
__html: md2html.render(notesData.notetitle),
12+
}}
3113
></h2>
3214
</div>
3315
<div
3416
className="markdown-body"
3517
id="notebody-view"
36-
dangerouslySetInnerHTML={{ __html: md.render(notesData.notebody) }}
18+
dangerouslySetInnerHTML={{ __html: md2html.render(notesData.notebody) }}
3719
onCopy={(e) => props.handleCopyEvent(e)}
3820
></div>
3921
</div>

0 commit comments

Comments
 (0)