Skip to content

Commit 0a8c669

Browse files
author
Zaydek Michels-Gualtieri
committed
Deprecated display markdown option (a sidebar is probably preferable, because we can easily add support for plaintext, HTML, React, and markdown like in previous demos). Rendering markdown syntax immediately can also be confusing for the end-user as they may perceive the markdown is directly editable, which it is not.
1 parent 353c8b7 commit 0a8c669

11 files changed

Lines changed: 29 additions & 173 deletions

File tree

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react"
2-
import RichTextEditor from "./RichTextEditor"
2+
import { RichTextEditor } from "./RichTextEditor"
33

44
const markup = `
55
<p>

‎src/RichTextEditor/RichTextEditor.js‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as Range from "./methods/Range"
22
import Debugger from "./components/Debugger"
3-
import isCtrlOrMetaKey from "lib/Client/isCtrlOrMetaKey"
43
import React from "react"
54
import Renderer from "./components/Renderer"
65
import useDOMContentLoadedCallback from "lib/x/useDOMContentLoadedCallback"
@@ -18,28 +17,6 @@ const RichTextEditor = ({ markup, children }) => {
1817
// Disables read-only mode on DOMContentLoaded.
1918
useDOMContentLoadedCallback(dispatch.disableReadOnlyMode)
2019

21-
// Binds ctrl-/ or cmd-/ to toggle display display
22-
// markdown mode. Does not use onKeyDown because of the
23-
// readWriteOnlyHandler pattern.
24-
React.useEffect(
25-
React.useCallback(() => {
26-
const handler = e => {
27-
if (isCtrlOrMetaKey(e) && e.key === "/") {
28-
let toggle = dispatch.enableDisplayMarkdownMode
29-
if (state.displayMarkdownModeEnabled) {
30-
toggle = dispatch.disableDisplayMarkdownMode
31-
}
32-
toggle()
33-
}
34-
}
35-
document.addEventListener("keydown", handler)
36-
return () => {
37-
document.removeEventListener("keydown", handler)
38-
}
39-
}, [state, dispatch]),
40-
[state.displayMarkdownModeEnabled],
41-
)
42-
4320
// Returns a handler when read-only mode is disabled.
4421
const readWriteOnlyHandler = handler => {
4522
if (state.readOnlyModeEnabled) {
@@ -215,9 +192,8 @@ const RichTextEditor = ({ markup, children }) => {
215192
// lastActionTimestamp
216193
// lastAction
217194
// readOnlyModeEnabled
218-
// displayMarkdownModeEnabled
219195
// focused
220-
elements
196+
// elements
221197
range
222198
// shouldRerender
223199
/>

‎src/RichTextEditor/components/Debugger.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,19 @@ const Debugger = ({
66
lastActionTimestamp,
77
lastAction,
88
readOnlyModeEnabled,
9-
displayMarkdownModeEnabled,
109
focused,
1110
elements,
1211
range,
1312
shouldRerender,
1413
}) => (
1514
process.env.NODE_ENV !== "production" && (
16-
<div className="mt-6 whitespace-pre-wrap text-sm font-mono" style={{ MozTabSize: 2, tabSize: 2 }}>
15+
<div className="mt-6 whitespace-pre-wrap text-xs font-mono" style={{ MozTabSize: 2, tabSize: 2 }}>
1716
{JSON.stringify(
1817
{
1918
...state,
2019
lastActionTimestamp: lastActionTimestamp && state.lastActionTimestamp,
2120
lastAction: lastAction && state.lastAction,
2221
readOnlyModeEnabled: readOnlyModeEnabled && state.readOnlyModeEnabled,
23-
displayMarkdownModeEnabled: displayMarkdownModeEnabled && state.displayMarkdownModeEnabled,
2422
focused: focused && state.focused,
2523
elements: elements && state.elements,
2624
range: range && state.range,

‎src/RichTextEditor/components/Markdown.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/RichTextEditor/components/components-text.js‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import attrs from "./attrs"
2-
import Markdown from "./Markdown"
32
import React from "react"
43
import T from "./T"
54

65
// <em>
76
export const Em = ({ children }) => (
87
<T type="em">
98
<span className="italic">
10-
<Markdown syntax="_">
11-
{children}
12-
</Markdown>
9+
{children}
1310
</span>
1411
</T>
1512
)
@@ -18,9 +15,7 @@ export const Em = ({ children }) => (
1815
export const Strong = ({ children }) => (
1916
<T type="strong">
2017
<span className="font-semibold">
21-
<Markdown syntax="**">
22-
{children}
23-
</Markdown>
18+
{children}
2419
</span>
2520
</T>
2621
)
@@ -29,9 +24,7 @@ export const Strong = ({ children }) => (
2924
export const Code = ({ children }) => (
3025
<T type="code">
3126
<span className="mx-px py-1 text-sm font-mono text-blue-600 border border-cool-gray-300" {...attrs.code}>
32-
<Markdown syntax="`">
33-
{children}
34-
</Markdown>
27+
{children}
3528
</span>
3629
</T>
3730
)
@@ -40,9 +33,7 @@ export const Code = ({ children }) => (
4033
export const Strike = ({ children }) => (
4134
<T type="strike">
4235
<span className="line-through text-gray-400">
43-
<Markdown syntax="~~">
44-
{children}
45-
</Markdown>
36+
{children}
4637
</span>
4738
</T>
4839
)
@@ -51,9 +42,7 @@ export const Strike = ({ children }) => (
5142
export const A = ({ href, children }) => (
5243
<T type="a" props={{ href }}>
5344
<span className="mx-px underline text-blue-600" {...attrs.a}>
54-
<Markdown syntax={["[", "](" + href + ")"]}>
55-
{children}
56-
</Markdown>
45+
{children}
5746
</span>
5847
</T>
5948
)

‎src/RichTextEditor/components/components.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react"
33
import T from "./T"
44
import toReact from "./toReact"
55

6-
// Renders <p id="...">.
6+
// <p id="...">
77
export const P = React.memo(({ id, children }) => (
88
<T type="p">
99
<Node id={id}>

‎src/RichTextEditor/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export { default } from "./RichTextEditor"
1+
export { default as RichTextEditor } from "./RichTextEditor"
2+
export { default as useRichTextEditor } from "./useRichTextEditor"

‎src/RichTextEditor/methods/RichTextEditor.js‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import newEnum from "lib/x/newEnum"
33
const actionEnum = newEnum(
44
"ENABLE_READ_ONLY_MODE",
55
"DISABLE_READ_ONLY_MODE",
6-
"ENABLE_DISPLAY_MARKDOWN_MODE",
7-
"DISABLE_DISPLAY_MARKDOWN_MODE",
86
"FOCUS",
97
"BLUR",
108
"SELECT",
@@ -43,20 +41,6 @@ export const disableReadOnlyMode = e => () => {
4341
e.readOnlyModeEnabled = false
4442
}
4543

46-
// Enables display markdown mode; enables read-only mode.
47-
export const enableDisplayMarkdownMode = e => () => {
48-
registerAction(e)(actionEnum.ENABLE_DISPLAY_MARKDOWN_MODE)
49-
e.readOnlyModeEnabled = true
50-
e.displayMarkdownModeEnabled = true
51-
}
52-
53-
// Disables display markdown mode; disables read-only mode.
54-
export const disableDisplayMarkdownMode = e => () => {
55-
registerAction(e)(actionEnum.DISABLE_DISPLAY_MARKDOWN_MODE)
56-
e.readOnlyModeEnabled = false
57-
e.displayMarkdownModeEnabled = false
58-
}
59-
6044
// Focuses the editor.
6145
export const focus = e => () => {
6246
registerAction(e)(actionEnum.FOCUS)

‎src/RichTextEditor/parsers/parseRenderedElements.test.js‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,6 @@ import renderTree from "lib/DOM/renderTree"
44
import toArray from "lib/Array/toArray"
55
import { parseRenderedElements } from "./parsers"
66

7-
const Syntax = ({ children }) => (
8-
<span data-type="markdown" contentEditable={false}>
9-
{children}
10-
</span>
11-
)
12-
13-
const Markdown = ({ syntax, children }) => (
14-
<React.Fragment>
15-
<Syntax>
16-
{toArray(syntax)[0]}
17-
</Syntax>
18-
{children}
19-
<Syntax>
20-
{toArray(syntax).slice(-1)[0]}
21-
</Syntax>
22-
</React.Fragment>
23-
)
24-
257
test("<p><br></p>", () => {
268
const id = newHash()
279
const tree = renderTree((
@@ -50,9 +32,7 @@ test("<p>Hello, <code>world</code>!</p>", () => {
5032
<div id={id} data-type="p">
5133
Hello,{" "}
5234
<span data-type="code">
53-
<Markdown syntax="`">
54-
world
55-
</Markdown>
35+
world
5636
</span>
5737
!
5838
</div>
@@ -89,25 +69,15 @@ test("<p>Hello, <code><a href='foo'><strike><strong><em>world</em></strong></str
8969
<div id={id} data-type="p">
9070
Hello,{" "}
9171
<span data-type="code">
92-
<Markdown syntax="`">
93-
<span data-type="a" data-props={JSON.stringify({ href: "foo" })}>
94-
<Markdown syntax={["[", "](foo)"]}>
95-
<span data-type="strike">
96-
<Markdown syntax="~~">
97-
<span data-type="strong">
98-
<Markdown syntax="**">
99-
<span data-type="em">
100-
<Markdown syntax="**">
101-
world
102-
</Markdown>
103-
</span>
104-
</Markdown>
105-
</span>
106-
</Markdown>
72+
<span data-type="a" data-props={JSON.stringify({ href: "foo" })}>
73+
<span data-type="strike">
74+
<span data-type="strong">
75+
<span data-type="em">
76+
world
10777
</span>
108-
</Markdown>
78+
</span>
10979
</span>
110-
</Markdown>
80+
</span>
11181
</span>
11282
!
11383
</div>

‎src/RichTextEditor/parsers/parseSemanticElements.test.js‎

Lines changed: 10 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,6 @@ import renderTree from "lib/DOM/renderTree"
44
import toArray from "lib/Array/toArray"
55
import { parseSemanticElements } from "./parsers"
66

7-
const Syntax = ({ children }) => (
8-
<span data-type="markdown" contentEditable={false}>
9-
{children}
10-
</span>
11-
)
12-
13-
const Markdown = ({ syntax, children }) => (
14-
<React.Fragment>
15-
<Syntax>
16-
{toArray(syntax)[0]}
17-
</Syntax>
18-
{children}
19-
<Syntax>
20-
{toArray(syntax).slice(-1)[0]}
21-
</Syntax>
22-
</React.Fragment>
23-
)
24-
257
test("<p><br></p>", () => {
268
const id = newHash()
279
const tree = renderTree((
@@ -50,9 +32,7 @@ test("<p>Hello, <code>world</code>!</p>", () => {
5032
<p id={id}>
5133
Hello,{" "}
5234
<code>
53-
<Markdown syntax="`">
54-
world
55-
</Markdown>
35+
world
5636
</code>
5737
!
5838
</p>
@@ -89,25 +69,15 @@ test("<p>Hello, <code><a href='foo'><strike><strong><em>world</em></strong></str
8969
<p id={id}>
9070
Hello,{" "}
9171
<code>
92-
<Markdown syntax="`">
93-
<a href="foo">
94-
<Markdown syntax={["[", "](foo)"]}>
95-
<strike>
96-
<Markdown syntax="~~">
97-
<strong>
98-
<Markdown syntax="**">
99-
<em>
100-
<Markdown syntax="**">
101-
world
102-
</Markdown>
103-
</em>
104-
</Markdown>
105-
</strong>
106-
</Markdown>
107-
</strike>
108-
</Markdown>
109-
</a>
110-
</Markdown>
72+
<a href="foo">
73+
<strike>
74+
<strong>
75+
<em>
76+
world
77+
</em>
78+
</strong>
79+
</strike>
80+
</a>
11181
</code>
11282
!
11383
</p>

0 commit comments

Comments
 (0)