Skip to content

Commit 1b73526

Browse files
author
Zaydek Michels-Gualtieri
committed
Added more fixes to support object-only spans API
1 parent df215bc commit 1b73526

4 files changed

Lines changed: 72 additions & 67 deletions

File tree

‎src/Editor/Editor.js‎

Lines changed: 60 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,10 @@ function getTypeInfo(component) {
4545
return [types, typeMap]
4646
}
4747

48-
// Decorates components; sets component.typePos to
49-
// "at-start", "at-center", or "at-end" for common types.
50-
function decorateTypePos(components) {
48+
// Decorates components; sets component.pos to "at-start",
49+
// "at-center", or "at-end" for common types.
50+
51+
function decoratePos(components) {
5152
for (let x = 0; x < components.length; x++) {
5253
if (!x || typeof components[x] === "string") {
5354
// No-op
@@ -57,22 +58,25 @@ function decorateTypePos(components) {
5758
const [types2, typeMap2] = getTypeInfo(components[x])
5859
const common = types1.filter(a => types2.some(b => a === b))
5960
for (const type of common) {
60-
typeMap1[type].props.typePos = !typeMap1[type].props.typePos ? "at-start" : "at-center"
61-
typeMap2[type].props.typePos = "at-end"
61+
typeMap1[type].props.pos = !typeMap1[type].props.pos ? "at-start" : "at-center"
62+
typeMap2[type].props.pos = "at-end"
6263
}
6364
}
6465
}
6566

66-
// Parses spans.
67+
// Parses spans to psuedo-React elements.
6768
function parseSpans(spans) {
68-
const components = []
69+
// if (!spans.length) {
70+
// return null
71+
// }
72+
const elements = []
6973
for (const span of spans) {
7074
if (!span.formats.length) {
71-
components.push(span.content)
75+
elements.push(span.content)
7276
continue
7377
}
74-
const component = {}
75-
let lastRef = component
78+
const element = {}
79+
let lastRef = element
7680
let ref = lastRef
7781
for (const format of span.formats.sort()) {
7882
Object.assign(ref, { // <- lastRef
@@ -86,10 +90,10 @@ function parseSpans(spans) {
8690
ref = ref.props.children
8791
}
8892
lastRef.props.children = span.content
89-
components.push(component)
93+
elements.push(element)
9094
}
91-
decorateTypePos(components)
92-
return components
95+
decoratePos(elements)
96+
return elements
9397
}
9498

9599
const ReactRenderer = ({ state, dispatch, renderableMap }) => (
@@ -122,41 +126,41 @@ const Editor = () => {
122126
type: Paragraph,
123127
uuid: uuidv4(),
124128
spans: [
125-
{
126-
content: "Hey, ",
127-
formats: [formatsEnum.strong],
128-
},
129-
{
130-
content: "Russ",
131-
formats: [formatsEnum.strong, formatsEnum.emphasis],
132-
},
133-
{
134-
content: "!",
135-
formats: [formatsEnum.strong],
136-
},
137-
{
138-
content: " I’m making some ",
139-
formats: [formatsEnum.strong],
140-
},
141-
{
142-
content: "progress ",
143-
formats: [formatsEnum.code],
144-
},
145-
{
146-
content: " on making a ",
147-
formats: [],
148-
},
149-
{
150-
content: "WYSIWYG",
151-
formats: [formatsEnum.anchor],
152-
[formatsEnum.anchor]: {
153-
href: "https://heroicons.dev",
154-
},
155-
},
156-
{
157-
content: " editor.",
158-
formats: [],
159-
},
129+
// {
130+
// content: "Hey, ",
131+
// formats: [formatsEnum.strong],
132+
// },
133+
// {
134+
// content: "Russ",
135+
// formats: [formatsEnum.strong, formatsEnum.emphasis],
136+
// },
137+
// {
138+
// content: "!",
139+
// formats: [formatsEnum.strong],
140+
// },
141+
// {
142+
// content: " I’m making some ",
143+
// formats: [formatsEnum.strong],
144+
// },
145+
// {
146+
// content: "progress ",
147+
// formats: [formatsEnum.code],
148+
// },
149+
// {
150+
// content: " on making a ",
151+
// formats: [],
152+
// },
153+
// {
154+
// content: "WYSIWYG",
155+
// formats: [formatsEnum.anchor],
156+
// [formatsEnum.anchor]: {
157+
// href: "https://heroicons.dev",
158+
// },
159+
// },
160+
// {
161+
// content: " editor.",
162+
// formats: [],
163+
// },
160164
],
161165
},
162166
])
@@ -204,6 +208,7 @@ const Editor = () => {
204208

205209
return (
206210
<div>
211+
207212
<article
208213
ref={ref}
209214

@@ -213,10 +218,6 @@ const Editor = () => {
213218
onBlur={dispatch.blur}
214219
onSelect={() => {
215220
const cursors = computeCursors()
216-
// if (!cursors) {
217-
// // No-op
218-
// return
219-
// }
220221
dispatch.select(cursors)
221222
}}
222223
onPointerDown={() => {
@@ -228,10 +229,6 @@ const Editor = () => {
228229
return
229230
}
230231
const cursors = computeCursors()
231-
// if (!cursors) {
232-
// // No-op
233-
// return
234-
// }
235232
dispatch.select(cursors)
236233
}}
237234
onPointerUp={() => {
@@ -324,8 +321,14 @@ const Editor = () => {
324321
data-codex-root
325322
/>
326323

324+
{/* Debugger */}
327325
<div className="mt-6 whitespace-pre font-mono text-xs leading-tight" style={{ tabSize: 2 }}>
328-
{JSON.stringify(state, null, "\t")}
326+
{JSON.stringify(state, (key, value) => {
327+
if (key === "formats") {
328+
return value
329+
}
330+
return value
331+
}, "\t")}
329332
</div>
330333

331334
</div>

‎src/Editor/components.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ const codeClassNames = {
5454
"at-end": "pr-0.5 py-0.5 text-sm font-mono text-blue-500 border border-gray-300 rounded-r",
5555
}
5656

57-
export const Code = ({ typePos, children }) => (
58-
<span className={codeClassNames[typePos]} data-codex-type={formatsEnum.code} {...disableAutoCorrect}>
57+
export const Code = ({ pos, children }) => (
58+
<span className={codeClassNames[pos]} data-codex-type={formatsEnum.code} {...disableAutoCorrect}>
5959
{children}
6060
</span>
6161
)

‎src/Editor/toReact.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react"
22

3-
// Converts components to renderable React elements.
4-
function toReact(components, renderableMap) {
3+
// Converts pseudo-React elements to renderable React
4+
// elements.
5+
function toReact(elements, renderableMap) {
56
const renderable = []
6-
for (const component of [components].flat()) {
7+
for (const component of [elements].flat()) {
78
if (typeof component === "string") {
89
renderable.push(component)
910
continue
@@ -14,6 +15,11 @@ function toReact(components, renderableMap) {
1415
...props,
1516
}, toReact(props.children, renderableMap)))
1617
}
18+
// NOTE: Does not return an empty array -- uses null for
19+
// {children || <br />} case
20+
if (!renderable.length) {
21+
return null
22+
}
1723
return renderable
1824
}
1925

‎src/Editor/useEditor.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,7 @@ const methods = state => ({
9999
while (countL) {
100100
countL -= removeByteCountFromSpan(uuidElement, x, offset, countL)
101101
if (x - 1 >= 0) {
102-
if (typeof uuidElement.spans[x - 1] === "string") {
103-
offset = uuidElement.spans[x - 1].length
104-
} else {
105-
offset = uuidElement.spans[x - 1].content.length
106-
}
102+
offset = uuidElement.spans[x - 1].content.length
107103
x--
108104
}
109105
}

0 commit comments

Comments
 (0)