Skip to content

Commit 7d24868

Browse files
author
Zaydek Michels-Gualtieri
committed
Fixed a small implementation bug with deeplySyncTrees -- forgot to add src and dst as parameters / arguments
1 parent 6112c36 commit 7d24868

10 files changed

Lines changed: 85 additions & 62 deletions

File tree

‎src/RichTextEditor/RichTextEditor.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as Range from "./methods/Range"
22
import Debugger from "./components/Debugger"
3+
import DocumentRenderer from "./components/DocumentRenderer"
34
import React from "react"
4-
import Renderer from "./components/Renderer"
55
import useDOMContentLoadedCallback from "lib/x/useDOMContentLoadedCallback"
66
import useRichTextEditor from "./useRichTextEditor"
7-
import { parseRenderedElement } from "./parsers"
7+
import { parseRenderedChildren } from "./parsers"
88

99
const RichTextEditor = ({ markup, children }) => {
1010
const ref = React.useRef(null)
@@ -144,7 +144,7 @@ const RichTextEditor = ({ markup, children }) => {
144144

145145
onInput={readWriteOnlyHandler(e => {
146146
const range = Range.collapseStart(Range.getCurrent(ref.current))()
147-
const children = parseRenderedElement(document.getElementById(range.start.key))
147+
const children = parseRenderedChildren(document.getElementById(range.start.key))
148148
// defer(children)
149149
dispatch.uncontrolledInput(children, range)
150150
})}
@@ -174,7 +174,7 @@ const RichTextEditor = ({ markup, children }) => {
174174

175175
data-root
176176
>
177-
<Renderer
177+
<DocumentRenderer
178178
forwardedRef={ref}
179179
state={state}
180180
dispatch={dispatch}

src/RichTextEditor/components/Renderer.js renamed to src/RichTextEditor/components/DocumentRenderer.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import * as Range from "../methods/Range"
12
import componentMap from "./componentMap"
23
import React from "react"
34
import ReactDOM from "react-dom"
45

5-
const Elements = ({ state, dispatch }) => (
6+
const Document = ({ state, dispatch }) => (
67
state.elements.map(({ type, key, props }) => (
78
React.createElement(componentMap[type], {
89
key,
@@ -13,7 +14,7 @@ const Elements = ({ state, dispatch }) => (
1314
)
1415

1516
// Rerenders the current state on state.shouldRerender.
16-
const ReactRenderer = ({ forwardedRef, state, dispatch }) => {
17+
const DocumentRenderer = ({ forwardedRef, state, dispatch }) => {
1718
React.useLayoutEffect(
1819
React.useCallback(() => {
1920
if (!forwardedRef.current) {
@@ -25,22 +26,23 @@ const ReactRenderer = ({ forwardedRef, state, dispatch }) => {
2526
if (selection.rangeCount) {
2627
selection.removeAllRanges()
2728
}
28-
ReactDOM.render(<Elements state={state} dispatch={dispatch} />, forwardedRef.current, () => {
29-
if (state.readOnlyModeEnabled || !state.focused) {
29+
ReactDOM.render(<Document state={state} dispatch={dispatch} />, forwardedRef.current, () => {
30+
if (state.readOnlyModeEnabled /* FIXME? */ || !state.focused) {
3031
// No-op
3132
return
3233
}
33-
try {
34-
const range = state.range.toUserLiteral(state.range)
35-
selection.addRange(range)
36-
} catch (error) {
37-
console.error(error)
38-
}
34+
// try {
35+
// const range = Range.toUserLiteral(state.range)()
36+
// console.log(range)
37+
// selection.addRange(range)
38+
// } catch (error) {
39+
// console.error(error)
40+
// }
3941
})
4042
}, [forwardedRef, state, dispatch]),
4143
[forwardedRef.current, state.shouldRerender],
4244
)
4345
return null
4446
}
4547

46-
export default ReactRenderer
48+
export default DocumentRenderer

‎src/RichTextEditor/methods/Range.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as Position from "./Position"
2-
import JSONEqual from "lib/JSON/JSONEqual"
2+
3+
// const collapsed = start === end
4+
// return { start, end, collapsed }
35

46
// Gets the current range. Range must be scoped to a tree.
57
export function getCurrent(tree) {
@@ -25,7 +27,7 @@ export function getCurrent(tree) {
2527
const computed = {
2628
start,
2729
end,
28-
collapsed: JSONEqual(start, end),
30+
collapsed: start === end,
2931
}
3032
return computed
3133
}
@@ -51,13 +53,14 @@ function conv({ node, offset }) {
5153

5254
// Resolves to a user literal.
5355
export const toUserLiteral = r => () => {
54-
const pos1 = conv(r.start.toUserLiteral())
55-
let pos2 = pos1
56-
if (!r.collapsed) {
57-
pos2 = conv(r.end.toUserLiteral())
58-
}
59-
const range = document.createRange()
60-
range.setStart(...pos1)
61-
range.setEnd(...pos2)
62-
return range
56+
console.log(r)
57+
// const pos1 = conv(Position.toUserLiteral(r.start)())
58+
// let pos2 = pos1
59+
// if (!r.collapsed) {
60+
// pos2 = conv(Position.toUserLiteral(r.end)())
61+
// }
62+
// const range = document.createRange()
63+
// range.setStart(...pos1)
64+
// range.setEnd(...pos2)
65+
// return range
6366
}

‎src/RichTextEditor/methods/RichTextEditor.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,14 @@ export const select = e => range => {
7373
// Uncontrolled input handler.
7474
export const uncontrolledInput = e => (children, range) => {
7575
registerAction(e)(actionEnum.INPUT)
76-
const el = e.find(each => each.key === range.start.key) // TODO: Add support for nested elements
76+
const el = e.elements.find(each => each.key === range.start.key) // TODO: Add support for nested elements
7777
el.props.children = children
7878
e.range = range
7979
e.shouldRerender++
8080
}
8181

82+
// TODO: Add render?
83+
8284
// deleteHandler(enumKey) {
8385
// this.registerAction(enumKey)
8486
// // ...

src/RichTextEditor/parsers/parseRenderedTree.test.js renamed to src/RichTextEditor/parsers/parseRenderedElements.test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import newHash from "lib/x/newHash"
22
import React from "react"
33
import renderTree from "lib/DOM/renderTree"
4-
import { parseRenderedTree } from "./parsers"
4+
import { parseRenderedElements } from "./parsers"
55

66
test("<p><br></p>", () => {
77
const id = newHash()
@@ -12,7 +12,7 @@ test("<p><br></p>", () => {
1212
</div>
1313
</article>
1414
))
15-
const elements = parseRenderedTree(tree)
15+
const elements = parseRenderedElements(tree)
1616
expect(elements).toEqual([
1717
{
1818
type: "p",
@@ -37,7 +37,7 @@ test("<p>Hello, <code>world</code>!</p>", () => {
3737
</div>
3838
</article>
3939
))
40-
const elements = parseRenderedTree(tree)
40+
const elements = parseRenderedElements(tree)
4141
expect(elements).toEqual([
4242
{
4343
type: "p",
@@ -82,7 +82,7 @@ test("<p>Hello, <code><a href='foo'><strike><strong><em>world</em></strong></str
8282
</div>
8383
</article>
8484
))
85-
const elements = parseRenderedTree(tree)
85+
const elements = parseRenderedElements(tree)
8686
expect(elements).toEqual([
8787
{
8888
type: "p",

src/RichTextEditor/parsers/parseSemanticTree.test.js renamed to src/RichTextEditor/parsers/parseSemanticElements.test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import newHash from "lib/x/newHash"
22
import React from "react"
33
import renderTree from "lib/DOM/renderTree"
4-
import { parseSemanticTree } from "./parsers"
4+
import { parseSemanticElements } from "./parsers"
55

66
test("<p><br></p>", () => {
77
const id = newHash()
@@ -12,7 +12,7 @@ test("<p><br></p>", () => {
1212
</p>
1313
</article>
1414
))
15-
const elements = parseSemanticTree(tree)
15+
const elements = parseSemanticElements(tree)
1616
expect(elements).toEqual([
1717
{
1818
type: "p",
@@ -37,7 +37,7 @@ test("<p>Hello, <code>world</code>!</p>", () => {
3737
</p>
3838
</article>
3939
))
40-
const elements = parseSemanticTree(tree)
40+
const elements = parseSemanticElements(tree)
4141
expect(elements).toEqual([
4242
{
4343
type: "p",
@@ -82,7 +82,7 @@ test("<p>Hello, <code><a href='foo'><strike><strong><em>world</em></strong></str
8282
</p>
8383
</article>
8484
))
85-
const elements = parseSemanticTree(tree)
85+
const elements = parseSemanticElements(tree)
8686
expect(elements).toEqual([
8787
{
8888
type: "p",

‎src/RichTextEditor/parsers/parsers.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,21 +54,21 @@ function parseElements(tree, parser) {
5454
}
5555

5656
// Parses elements from a rendered tree.
57-
export function parseRenderedTree(tree) {
57+
export function parseRenderedElements(tree) {
5858
return parseElements(tree, parseRendered)
5959
}
6060

6161
// Parses children from a rendered element.
62-
export function parseRenderedElement(element) {
63-
return parseElements(element, parseRendered)
62+
export function parseRenderedChildren(element) {
63+
return parseChildren(element, parseRendered)
6464
}
6565

6666
// Parses elements from a semantic tree.
67-
export function parseSemanticTree(tree) {
67+
export function parseSemanticElements(tree) {
6868
return parseElements(tree, parseSemantic)
6969
}
7070

7171
// Parses children from a semantic element.
72-
export function parseSemanticElement(element) {
73-
return parseElements(element, parseSemantic)
72+
export function parseSemanticChildren(element) {
73+
return parseChildren(element, parseSemantic)
7474
}

‎src/RichTextEditor/useRichTextEditor.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import * as RichTextEditor from "./methods/RichTextEditor"
2-
import JSONEqual from "lib/JSON/JSONEqual"
32
import parseTree from "lib/DOM/parseTree"
43
import React from "react"
54
import ReactDOMServer from "react-dom/server"
65
import stripWhitespace from "lib/DOM/stripWhitespace"
76
import useMethods from "use-methods"
8-
import { parseSemanticTree } from "./parsers"
7+
import { parseSemanticElements } from "./parsers"
98

109
const newInitialState = elements => ({
1110
lastActionTimestamp: "init",
@@ -23,6 +22,7 @@ const newInitialState = elements => ({
2322
key: "",
2423
offset: 0,
2524
},
25+
// // TODO
2626
// get collapsed() {
2727
// return JSONEqual(this.start, this.end)
2828
// },
@@ -50,7 +50,7 @@ function parseElements({ markup, children }) {
5050
"</article>",
5151
stripWhitespace,
5252
)
53-
return parseSemanticTree(tree)
53+
return parseSemanticElements(tree)
5454
}
5555

5656
function useRichTextEditor({ markup, children }) {

‎src/lib/DOM/deeplySyncTrees/deeplySyncTrees.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import shallowlySyncNodes from "./shallowlySyncNodes"
33

44
// Deeply syncs trees.
55
function deeplySyncTrees(src, dst) {
6-
const recurse = (recursed = false) => {
6+
const recurse = (src, dst, recursed = false) => {
77
if (recursed) {
88
// NOTE: shallowlySyncNodes **does not** sync
99
// node.childNodes.
@@ -35,7 +35,7 @@ function deeplySyncTrees(src, dst) {
3535
}
3636
}
3737
}
38-
recurse()
38+
recurse(src, dst)
3939
}
4040

4141
export default deeplySyncTrees

0 commit comments

Comments
 (0)