소스 검색

feat: update markdown editor

node 6 년 전
부모
커밋
79623ecd20
12개의 변경된 파일5026개의 추가작업 그리고 2318개의 파일을 삭제
  1. 9
    0
      README.md
  2. 3060
    230
      package-lock.json
  3. 7
    0
      package.json
  4. 1
    0
      source/node_react_mde
  5. 34
    0
      source/react-mde/docs/bundle-prod.js
  6. 684
    0
      source/react-mde/docs/bundle.css
  7. 1188
    2084
      source/react-mde/package-lock.json
  8. 3
    3
      source/react-mde/package.json
  9. 4
    1
      src/App.js
  10. 4
    0
      src/MarkdownEditor/index.css
  11. 31
    0
      src/MarkdownEditor/index.js
  12. 1
    0
      testdata/react-mde

+ 9
- 0
README.md 파일 보기

@@ -1 +1,10 @@
1 1
 # 
2
+
3
+## size
4
+
5
+引入 fontawsome 之前
6
+
7
+File sizes after gzip:
8
+
9
+  186.26 KB (+149.06 KB)  build/static/js/main.2563472b.js
10
+  21.28 KB (+20.99 KB)    build/static/css/main.e0d26ea8.css

+ 3060
- 230
package-lock.json
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 7
- 0
package.json 파일 보기

@@ -3,6 +3,9 @@
3 3
   "version": "0.1.0",
4 4
   "private": true,
5 5
   "dependencies": {
6
+    "@fortawesome/fontawesome-svg-core": "^1.2.4",
7
+    "@fortawesome/free-solid-svg-icons": "^5.3.1",
8
+    "@fortawesome/react-fontawesome": "^0.1.3",
6 9
     "autoprefixer": "7.1.6",
7 10
     "babel-core": "6.26.0",
8 11
     "babel-eslint": "7.2.3",
@@ -27,7 +30,9 @@
27 30
     "file-loader": "1.1.5",
28 31
     "fs-extra": "3.0.1",
29 32
     "html-webpack-plugin": "2.29.0",
33
+    "i": "^0.3.6",
30 34
     "jest": "20.0.4",
35
+    "npm": "^6.4.1",
31 36
     "object-assign": "4.1.1",
32 37
     "postcss-flexbugs-fixes": "3.2.0",
33 38
     "postcss-loader": "2.0.8",
@@ -36,7 +41,9 @@
36 41
     "react": "^16.5.0",
37 42
     "react-dev-utils": "^5.0.2",
38 43
     "react-dom": "^16.5.0",
44
+    "react-mde": "^5.8.0",
39 45
     "resolve": "1.6.0",
46
+    "showdown": "^1.8.6",
40 47
     "style-loader": "0.19.0",
41 48
     "sw-precache-webpack-plugin": "0.11.4",
42 49
     "url-loader": "0.6.2",

+ 1
- 0
source/node_react_mde

@@ -0,0 +1 @@
1
+Subproject commit 2a1228f2a976c7b0b020d9c26789e907897d012e

+ 34
- 0
source/react-mde/docs/bundle-prod.js
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 684
- 0
source/react-mde/docs/bundle.css 파일 보기

@@ -0,0 +1,684 @@
1
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
2
+
3
+/* Document
4
+   ========================================================================== */
5
+
6
+/**
7
+ * 1. Correct the line height in all browsers.
8
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
9
+ */
10
+
11
+html {
12
+  line-height: 1.15; /* 1 */
13
+  -webkit-text-size-adjust: 100%; /* 2 */
14
+}
15
+
16
+/* Sections
17
+   ========================================================================== */
18
+
19
+/**
20
+ * Remove the margin in all browsers.
21
+ */
22
+
23
+body {
24
+  margin: 0;
25
+}
26
+
27
+/**
28
+ * Correct the font size and margin on `h1` elements within `section` and
29
+ * `article` contexts in Chrome, Firefox, and Safari.
30
+ */
31
+
32
+h1 {
33
+  font-size: 2em;
34
+  margin: 0.67em 0;
35
+}
36
+
37
+/* Grouping content
38
+   ========================================================================== */
39
+
40
+/**
41
+ * 1. Add the correct box sizing in Firefox.
42
+ * 2. Show the overflow in Edge and IE.
43
+ */
44
+
45
+hr {
46
+  box-sizing: content-box; /* 1 */
47
+  height: 0; /* 1 */
48
+  overflow: visible; /* 2 */
49
+}
50
+
51
+/**
52
+ * 1. Correct the inheritance and scaling of font size in all browsers.
53
+ * 2. Correct the odd `em` font sizing in all browsers.
54
+ */
55
+
56
+pre {
57
+  font-family: monospace, monospace; /* 1 */
58
+  font-size: 1em; /* 2 */
59
+}
60
+
61
+/* Text-level semantics
62
+   ========================================================================== */
63
+
64
+/**
65
+ * Remove the gray background on active links in IE 10.
66
+ */
67
+
68
+a {
69
+  background-color: transparent;
70
+}
71
+
72
+/**
73
+ * 1. Remove the bottom border in Chrome 57-
74
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
75
+ */
76
+
77
+abbr[title] {
78
+  border-bottom: none; /* 1 */
79
+  text-decoration: underline; /* 2 */
80
+  text-decoration: underline dotted; /* 2 */
81
+}
82
+
83
+/**
84
+ * Add the correct font weight in Chrome, Edge, and Safari.
85
+ */
86
+
87
+b,
88
+strong {
89
+  font-weight: bolder;
90
+}
91
+
92
+/**
93
+ * 1. Correct the inheritance and scaling of font size in all browsers.
94
+ * 2. Correct the odd `em` font sizing in all browsers.
95
+ */
96
+
97
+code,
98
+kbd,
99
+samp {
100
+  font-family: monospace, monospace; /* 1 */
101
+  font-size: 1em; /* 2 */
102
+}
103
+
104
+/**
105
+ * Add the correct font size in all browsers.
106
+ */
107
+
108
+small {
109
+  font-size: 80%;
110
+}
111
+
112
+/**
113
+ * Prevent `sub` and `sup` elements from affecting the line height in
114
+ * all browsers.
115
+ */
116
+
117
+sub,
118
+sup {
119
+  font-size: 75%;
120
+  line-height: 0;
121
+  position: relative;
122
+  vertical-align: baseline;
123
+}
124
+
125
+sub {
126
+  bottom: -0.25em;
127
+}
128
+
129
+sup {
130
+  top: -0.5em;
131
+}
132
+
133
+/* Embedded content
134
+   ========================================================================== */
135
+
136
+/**
137
+ * Remove the border on images inside links in IE 10.
138
+ */
139
+
140
+img {
141
+  border-style: none;
142
+}
143
+
144
+/* Forms
145
+   ========================================================================== */
146
+
147
+/**
148
+ * 1. Change the font styles in all browsers.
149
+ * 2. Remove the margin in Firefox and Safari.
150
+ */
151
+
152
+button,
153
+input,
154
+optgroup,
155
+select,
156
+textarea {
157
+  font-family: inherit; /* 1 */
158
+  font-size: 100%; /* 1 */
159
+  line-height: 1.15; /* 1 */
160
+  margin: 0; /* 2 */
161
+}
162
+
163
+/**
164
+ * Show the overflow in IE.
165
+ * 1. Show the overflow in Edge.
166
+ */
167
+
168
+button,
169
+input { /* 1 */
170
+  overflow: visible;
171
+}
172
+
173
+/**
174
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
175
+ * 1. Remove the inheritance of text transform in Firefox.
176
+ */
177
+
178
+button,
179
+select { /* 1 */
180
+  text-transform: none;
181
+}
182
+
183
+/**
184
+ * Correct the inability to style clickable types in iOS and Safari.
185
+ */
186
+
187
+button,
188
+[type="button"],
189
+[type="reset"],
190
+[type="submit"] {
191
+  -webkit-appearance: button;
192
+}
193
+
194
+/**
195
+ * Remove the inner border and padding in Firefox.
196
+ */
197
+
198
+button::-moz-focus-inner,
199
+[type="button"]::-moz-focus-inner,
200
+[type="reset"]::-moz-focus-inner,
201
+[type="submit"]::-moz-focus-inner {
202
+  border-style: none;
203
+  padding: 0;
204
+}
205
+
206
+/**
207
+ * Restore the focus styles unset by the previous rule.
208
+ */
209
+
210
+button:-moz-focusring,
211
+[type="button"]:-moz-focusring,
212
+[type="reset"]:-moz-focusring,
213
+[type="submit"]:-moz-focusring {
214
+  outline: 1px dotted ButtonText;
215
+}
216
+
217
+/**
218
+ * Correct the padding in Firefox.
219
+ */
220
+
221
+fieldset {
222
+  padding: 0.35em 0.75em 0.625em;
223
+}
224
+
225
+/**
226
+ * 1. Correct the text wrapping in Edge and IE.
227
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
228
+ * 3. Remove the padding so developers are not caught out when they zero out
229
+ *    `fieldset` elements in all browsers.
230
+ */
231
+
232
+legend {
233
+  box-sizing: border-box; /* 1 */
234
+  color: inherit; /* 2 */
235
+  display: table; /* 1 */
236
+  max-width: 100%; /* 1 */
237
+  padding: 0; /* 3 */
238
+  white-space: normal; /* 1 */
239
+}
240
+
241
+/**
242
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
243
+ */
244
+
245
+progress {
246
+  vertical-align: baseline;
247
+}
248
+
249
+/**
250
+ * Remove the default vertical scrollbar in IE 10+.
251
+ */
252
+
253
+textarea {
254
+  overflow: auto;
255
+}
256
+
257
+/**
258
+ * 1. Add the correct box sizing in IE 10.
259
+ * 2. Remove the padding in IE 10.
260
+ */
261
+
262
+[type="checkbox"],
263
+[type="radio"] {
264
+  box-sizing: border-box; /* 1 */
265
+  padding: 0; /* 2 */
266
+}
267
+
268
+/**
269
+ * Correct the cursor style of increment and decrement buttons in Chrome.
270
+ */
271
+
272
+[type="number"]::-webkit-inner-spin-button,
273
+[type="number"]::-webkit-outer-spin-button {
274
+  height: auto;
275
+}
276
+
277
+/**
278
+ * 1. Correct the odd appearance in Chrome and Safari.
279
+ * 2. Correct the outline style in Safari.
280
+ */
281
+
282
+[type="search"] {
283
+  -webkit-appearance: textfield; /* 1 */
284
+  outline-offset: -2px; /* 2 */
285
+}
286
+
287
+/**
288
+ * Remove the inner padding in Chrome and Safari on macOS.
289
+ */
290
+
291
+[type="search"]::-webkit-search-decoration {
292
+  -webkit-appearance: none;
293
+}
294
+
295
+/**
296
+ * 1. Correct the inability to style clickable types in iOS and Safari.
297
+ * 2. Change font properties to `inherit` in Safari.
298
+ */
299
+
300
+::-webkit-file-upload-button {
301
+  -webkit-appearance: button; /* 1 */
302
+  font: inherit; /* 2 */
303
+}
304
+
305
+/* Interactive
306
+   ========================================================================== */
307
+
308
+/*
309
+ * Add the correct display in Edge, IE 10+, and Firefox.
310
+ */
311
+
312
+details {
313
+  display: block;
314
+}
315
+
316
+/*
317
+ * Add the correct display in all browsers.
318
+ */
319
+
320
+summary {
321
+  display: list-item;
322
+}
323
+
324
+/* Misc
325
+   ========================================================================== */
326
+
327
+/**
328
+ * Add the correct display in IE 10+.
329
+ */
330
+
331
+template {
332
+  display: none;
333
+}
334
+
335
+/**
336
+ * Add the correct display in IE 10.
337
+ */
338
+
339
+[hidden] {
340
+  display: none;
341
+}
342
+/**
343
+ * Draft v0.10.5
344
+ *
345
+ * Copyright (c) 2013-present, Facebook, Inc.
346
+ * All rights reserved.
347
+ *
348
+ * This source code is licensed under the BSD-style license found in the
349
+ * LICENSE file in the root directory of this source tree. An additional grant
350
+ * of patent rights can be found in the PATENTS file in the same directory.
351
+ */
352
+.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:1}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}* {
353
+  box-sizing: border-box; }
354
+
355
+body {
356
+  font-size: 14px;
357
+  font-family: sans-serif; }
358
+
359
+.container {
360
+  width: 100%;
361
+  height: 600px;
362
+  padding: 10px; }
363
+.mde-header {
364
+  flex-shrink: 0;
365
+  display: flex;
366
+  flex-wrap: wrap;
367
+  align-items: stretch;
368
+  border-bottom: 1px solid #c8ccd0;
369
+  border-radius: 2px 2px 0 0;
370
+  background: #f9f9f9; }
371
+  .mde-header .mde-toolbar-children {
372
+    flex-grow: 1;
373
+    display: flex;
374
+    justify-content: flex-end;
375
+    align-items: stretch; }
376
+  .mde-header button:focus {
377
+    outline: 0; }
378
+  .mde-header ul.mde-header-group {
379
+    margin: 0;
380
+    padding: 10px;
381
+    list-style: none;
382
+    display: flex;
383
+    flex-wrap: nowrap; }
384
+    .mde-header ul.mde-header-group li.mde-header-item {
385
+      display: inline-block;
386
+      position: relative;
387
+      margin: 0 4px; }
388
+      .mde-header ul.mde-header-group li.mde-header-item button {
389
+        text-align: left;
390
+        cursor: pointer;
391
+        height: 22px;
392
+        padding: 4px;
393
+        margin: 0;
394
+        border: none;
395
+        background: none;
396
+        color: #242729; }
397
+
398
+@keyframes tooltip-appear {
399
+  from {
400
+    opacity: 0; }
401
+  to {
402
+    opacity: 1; } }
403
+        .mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::before {
404
+          animation-name: tooltip-appear;
405
+          animation-duration: 0.2s;
406
+          animation-delay: 0.5s;
407
+          animation-fill-mode: forwards;
408
+          opacity: 0;
409
+          position: absolute;
410
+          z-index: 1000001;
411
+          width: 0;
412
+          height: 0;
413
+          color: rgba(0, 0, 0, 0.8);
414
+          pointer-events: none;
415
+          content: "";
416
+          border: 5px solid transparent;
417
+          top: -5px;
418
+          right: 50%;
419
+          bottom: auto;
420
+          margin-right: -5px;
421
+          border-top-color: rgba(0, 0, 0, 0.8); }
422
+        .mde-header ul.mde-header-group li.mde-header-item button.tooltipped:hover::after {
423
+          animation-name: tooltip-appear;
424
+          animation-duration: 0.2s;
425
+          animation-delay: 0.5s;
426
+          animation-fill-mode: forwards;
427
+          font-size: 11px;
428
+          opacity: 0;
429
+          position: absolute;
430
+          z-index: 1000000;
431
+          padding: 5px 8px;
432
+          color: #fff;
433
+          pointer-events: none;
434
+          content: attr(aria-label);
435
+          background: rgba(0, 0, 0, 0.8);
436
+          border-radius: 3px;
437
+          right: 50%;
438
+          bottom: 100%;
439
+          transform: translateX(50%);
440
+          margin-bottom: 5px;
441
+          white-space: nowrap; }
442
+      .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown {
443
+        position: absolute;
444
+        left: 0;
445
+        top: 30px;
446
+        background-color: white;
447
+        border: 1px solid #c8ccd0;
448
+        padding: 5px;
449
+        z-index: 2;
450
+        transform: translateX(-9px); }
451
+        .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li {
452
+          margin: 0;
453
+          white-space: nowrap;
454
+          list-style: none;
455
+          display: block; }
456
+          .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button {
457
+            display: block;
458
+            height: auto; }
459
+            .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p {
460
+              display: block;
461
+              margin: 0;
462
+              padding: 0;
463
+              font-weight: bold;
464
+              line-height: 1em;
465
+              background: none;
466
+              border: 0;
467
+              text-align: left; }
468
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p:hover {
469
+                color: #4078c0; }
470
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-1 {
471
+                font-size: 20px; }
472
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-2 {
473
+                font-size: 18px; }
474
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-3 {
475
+                font-size: 14px; }
476
+              .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown li button p.header-4 {
477
+                font-size: 12px; }
478
+        .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown::before {
479
+          position: absolute;
480
+          content: "";
481
+          width: 0;
482
+          height: 0;
483
+          border: 8px solid transparent;
484
+          border-bottom-color: rgba(0, 0, 0, 0.15);
485
+          top: -16px;
486
+          left: 3px;
487
+          transform: translateX(50%); }
488
+        .mde-header ul.mde-header-group li.mde-header-item ul.react-mde-dropdown::after {
489
+          position: absolute;
490
+          content: "";
491
+          width: 0;
492
+          height: 0;
493
+          border: 7px solid transparent;
494
+          border-bottom-color: white;
495
+          top: -14px;
496
+          left: 5px;
497
+          transform: translateX(50%); }
498
+
499
+.mde-text .public-DraftEditor-content {
500
+  width: 100%;
501
+  min-height: 200px;
502
+  padding: 10px; }
503
+
504
+.mde-preview {
505
+  min-height: 200px; }
506
+  .mde-preview .mde-preview-content {
507
+    padding: 10px; }
508
+    .mde-preview .mde-preview-content p, .mde-preview .mde-preview-content blockquote, .mde-preview .mde-preview-content ul, .mde-preview .mde-preview-content ol, .mde-preview .mde-preview-content dl, .mde-preview .mde-preview-content table, .mde-preview .mde-preview-content pre {
509
+      margin-top: 0;
510
+      margin-bottom: 16px; }
511
+    .mde-preview .mde-preview-content h1, .mde-preview .mde-preview-content h2, .mde-preview .mde-preview-content h3 {
512
+      margin-top: 24px;
513
+      margin-bottom: 16px;
514
+      font-weight: 600;
515
+      line-height: 1.25;
516
+      border-bottom: 1px solid #eee;
517
+      padding-bottom: 0.3em; }
518
+    .mde-preview .mde-preview-content h1 {
519
+      font-size: 1.6em; }
520
+    .mde-preview .mde-preview-content h2 {
521
+      font-size: 1.4em; }
522
+    .mde-preview .mde-preview-content h3 {
523
+      font-size: 1.2em; }
524
+    .mde-preview .mde-preview-content ul, .mde-preview .mde-preview-content ol {
525
+      padding-left: 2em; }
526
+    .mde-preview .mde-preview-content blockquote {
527
+      margin-left: 0;
528
+      padding: 0 1em;
529
+      color: #777;
530
+      border-left: 0.25em solid #ddd; }
531
+      .mde-preview .mde-preview-content blockquote > :first-child {
532
+        margin-top: 0; }
533
+      .mde-preview .mde-preview-content blockquote > :last-child {
534
+        margin-bottom: 0; }
535
+    .mde-preview .mde-preview-content code {
536
+      padding: 0.2em 0 0.2em 0;
537
+      margin: 0;
538
+      font-size: 90%;
539
+      background-color: rgba(0, 0, 0, 0.04);
540
+      border-radius: 3px; }
541
+      .mde-preview .mde-preview-content code::before, .mde-preview .mde-preview-content code::after {
542
+        letter-spacing: -0.2em;
543
+        content: "\A0"; }
544
+    .mde-preview .mde-preview-content pre {
545
+      padding: 16px;
546
+      overflow: auto;
547
+      font-size: 85%;
548
+      line-height: 1.45;
549
+      background-color: #f7f7f7;
550
+      border-radius: 3px; }
551
+      .mde-preview .mde-preview-content pre code {
552
+        display: inline;
553
+        padding: 0;
554
+        margin: 0;
555
+        overflow: visible;
556
+        line-height: inherit;
557
+        word-wrap: normal;
558
+        background-color: transparent;
559
+        border: 0; }
560
+        .mde-preview .mde-preview-content pre code::before, .mde-preview .mde-preview-content pre code::after {
561
+          content: none; }
562
+      .mde-preview .mde-preview-content pre > code {
563
+        padding: 0;
564
+        margin: 0;
565
+        font-size: 100%;
566
+        word-break: normal;
567
+        white-space: pre;
568
+        background: transparent;
569
+        border: 0; }
570
+    .mde-preview .mde-preview-content a {
571
+      color: #4078c0;
572
+      text-decoration: none; }
573
+      .mde-preview .mde-preview-content a:hover {
574
+        text-decoration: underline; }
575
+    .mde-preview .mde-preview-content > *:first-child {
576
+      margin-top: 0 !important; }
577
+    .mde-preview .mde-preview-content > *:last-child {
578
+      margin-bottom: 0 !important; }
579
+    .mde-preview .mde-preview-content::after {
580
+      display: table;
581
+      clear: both;
582
+      content: ""; }
583
+    .mde-preview .mde-preview-content table {
584
+      display: block;
585
+      width: 100%;
586
+      border-spacing: 0;
587
+      border-collapse: collapse; }
588
+      .mde-preview .mde-preview-content table thead th {
589
+        font-weight: bold; }
590
+      .mde-preview .mde-preview-content table th, .mde-preview .mde-preview-content table td {
591
+        padding: 6px 13px;
592
+        border: 1px solid #c8ccd0; }
593
+
594
+* {
595
+  box-sizing: border-box; }
596
+
597
+.react-mde {
598
+  border: 1px solid #c8ccd0;
599
+  border-radius: 2px; }
600
+
601
+.react-mde-vertical-layout {
602
+  display: flex;
603
+  flex-direction: column; }
604
+  .react-mde-vertical-layout .mde-tabs {
605
+    display: flex;
606
+    align-items: stretch; }
607
+    .react-mde-vertical-layout .mde-tabs .mde-tab {
608
+      border: none;
609
+      border-left: 1px solid #c8ccd0;
610
+      padding: 10px;
611
+      background: none; }
612
+  .react-mde-vertical-layout .react-mde-content {
613
+    display: flex;
614
+    flex-direction: column; }
615
+    .react-mde-vertical-layout .react-mde-content .mde-text {
616
+      min-height: 200px;
617
+      height: auto;
618
+      overflow-y: auto; }
619
+    .react-mde-vertical-layout .react-mde-content .mde-preview {
620
+      min-height: 0;
621
+      height: auto;
622
+      overflow-y: auto;
623
+      border-top: 1px solid #c8ccd0; }
624
+
625
+.react-mde-no-preview-layout {
626
+  height: 100%;
627
+  display: flex;
628
+  flex-direction: column; }
629
+  .react-mde-no-preview-layout .mde-text {
630
+    overflow-y: auto; }
631
+
632
+.react-mde-horizontal-layout {
633
+  height: 100%;
634
+  display: flex;
635
+  flex-direction: column; }
636
+  .react-mde-horizontal-layout .mde-tabs {
637
+    display: flex;
638
+    align-items: stretch; }
639
+    .react-mde-horizontal-layout .mde-tabs .mde-tab {
640
+      border: none;
641
+      border-left: 1px solid #c8ccd0;
642
+      padding: 10px;
643
+      background: none; }
644
+    .react-mde-horizontal-layout .mde-tabs .mde-tab:hover {
645
+      cursor: pointer; }
646
+  .react-mde-horizontal-layout .mde-content {
647
+    display: flex;
648
+    height: 100%; }
649
+    .react-mde-horizontal-layout .mde-content .mde-text {
650
+      min-width: 50%;
651
+      overflow-y: auto;
652
+      border-radius: 0; }
653
+    .react-mde-horizontal-layout .mde-content .mde-preview {
654
+      min-width: 50%;
655
+      border-left: 1px solid #c8ccd0;
656
+      overflow-y: auto; }
657
+
658
+.react-mde-tabbed-layout {
659
+  height: 100%;
660
+  display: flex;
661
+  flex-direction: column; }
662
+  .react-mde-tabbed-layout .mde-tabs {
663
+    display: flex;
664
+    align-items: flex-end; }
665
+    .react-mde-tabbed-layout .mde-tabs .mde-tab {
666
+      position: relative;
667
+      top: 1px;
668
+      border: 1px solid #f9f9f9;
669
+      border-bottom: none;
670
+      border-top-left-radius: 2px;
671
+      border-top-right-radius: 2px;
672
+      margin-right: 10px;
673
+      padding: 10px;
674
+      background: none; }
675
+    .react-mde-tabbed-layout .mde-tabs .mde-tab:hover {
676
+      border-color: #c8ccd0;
677
+      cursor: pointer; }
678
+    .react-mde-tabbed-layout .mde-tabs .mde-tab-activated {
679
+      border-color: #c8ccd0;
680
+      background: white; }
681
+  .react-mde-tabbed-layout .mde-text {
682
+    overflow-y: auto; }
683
+  .react-mde-tabbed-layout .mde-preview {
684
+    overflow-y: auto; }

+ 1188
- 2084
source/react-mde/package-lock.json
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 3
- 3
source/react-mde/package.json 파일 보기

@@ -67,7 +67,7 @@
67 67
     "gulp-typescript": "^5.0.0-alpha.2",
68 68
     "merge2": "^1.2.1",
69 69
     "mocha": "^5.0.1",
70
-    "node-sass": "^4.9.0",
70
+    "node-sass": "^4.9.3",
71 71
     "normalize.css": "^8.0.0",
72 72
     "opn": "^5.2.0",
73 73
     "react": "^16.2.0",
@@ -81,7 +81,7 @@
81 81
     "tslint": "^5.9.1",
82 82
     "tslint-react": "^3.5.1",
83 83
     "typescript": "^2.9.2",
84
-    "webpack": "^4.14.0",
84
+    "webpack": "^4.18.0",
85 85
     "webpack-cli": "^3.0.8",
86 86
     "webpack-dev-middleware": "^3.1.3",
87 87
     "webpack-hot-middleware": "^2.21.0"
@@ -94,6 +94,6 @@
94 94
   },
95 95
   "dependencies": {
96 96
     "classnames": "^2.2.5",
97
-    "npm": "^6.1.0"
97
+    "npm": "^6.4.1"
98 98
   }
99 99
 }

+ 4
- 1
src/App.js 파일 보기

@@ -1,11 +1,14 @@
1 1
 import React, { Component } from 'react';
2 2
 import RichEditor from './RichEditor';
3
+import MarkdownEditor from './MarkdownEditor';
3 4
 
4 5
 class App extends Component {
5 6
   render() {
6 7
     return (
7
-      <div>
8
+      <div classNAme="main">
8 9
         <RichEditor />
10
+        <hr></hr>
11
+        <MarkdownEditor />
9 12
       </div>
10 13
     );
11 14
   }

+ 4
- 0
src/MarkdownEditor/index.css 파일 보기

@@ -0,0 +1,4 @@
1
+.container {
2
+  width: 100%;
3
+  height: 300px;
4
+}

+ 31
- 0
src/MarkdownEditor/index.js 파일 보기

@@ -0,0 +1,31 @@
1
+import * as React from "react";
2
+import ReactMde from 'react-mde';
3
+import * as Showdown from "showdown";
4
+import 'react-mde/lib/styles/css/react-mde-all.css';
5
+
6
+export default class MarkdownEditor extends React.Component {
7
+
8
+    constructor(props) {
9
+        super(props);
10
+        this.state = {
11
+            mdeState: null,
12
+        };
13
+        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});
14
+    }
15
+
16
+    handleValueChange = (mdeState) => {
17
+        this.setState({mdeState});
18
+    }
19
+
20
+    render() {
21
+        return (
22
+            <div className="container">
23
+                <ReactMde
24
+                    onChange={this.handleValueChange}
25
+                    editorState={this.state.mdeState}
26
+                    generateMarkdownPreview={(markdown) => Promise.resolve(this.converter.makeHtml(markdown))}
27
+                />
28
+            </div>
29
+        );
30
+    }
31
+}

+ 1
- 0
testdata/react-mde

@@ -0,0 +1 @@
1
+Subproject commit 64e58259b225b06da35fd49184b1bbec6ea82784