a tool for shared writing and social publishing
in text blocks use break-word instead of break-all
+14
-11
+14
-11
components/Blocks/TextBlock/index.tsx
+14
-11
components/Blocks/TextBlock/index.tsx
···
78
78
79
79
export function IOSBS(props: BlockProps) {
80
80
let selected = useUIState((s) =>
81
-
s.selectedBlock.find((b) => b.value === props.entityID),
81
+
s.selectedBlock.find((b) => b.value === props.entityID)
82
82
);
83
83
let [initialRender, setInitialRender] = useState(true);
84
84
useEffect(() => {
···
97
97
});
98
98
setTimeout(async () => {
99
99
let target = document.getElementById(
100
-
elementId.block(props.entityID).container,
100
+
elementId.block(props.entityID).container
101
101
);
102
102
let vis = await isVisible(target as Element);
103
103
if (!vis) {
104
104
let parentEl = document.getElementById(
105
-
elementId.card(props.parent).container,
105
+
elementId.card(props.parent).container
106
106
);
107
107
if (!parentEl) return;
108
108
parentEl?.scrollBy({
···
152
152
}
153
153
154
154
export function BaseTextBlock(
155
-
props: BlockProps & { className: string; blockPadding: string },
155
+
props: BlockProps & { className: string; blockPadding: string }
156
156
) {
157
157
const [mount, setMount] = useState<HTMLElement | null>(null);
158
158
···
168
168
}, [rep?.rep]);
169
169
170
170
let selected = useUIState((s) =>
171
-
s.selectedBlock.find((b) => b.value === props.entityID),
171
+
s.selectedBlock.find((b) => b.value === props.entityID)
172
172
);
173
173
let first = props.previousBlock === null;
174
174
let headingLevel = useEntity(props.entityID, "block/heading-level");
···
176
176
let [value, factID] = useYJSValue(props.entityID);
177
177
178
178
let editorState = useEditorStates(
179
-
(s) => s.editorStates[props.entityID],
179
+
(s) => s.editorStates[props.entityID]
180
180
)?.editor;
181
181
useEffect(() => {
182
182
if (!editorState)
···
243
243
await addLinkBlock(
244
244
editorState.doc.textContent,
245
245
props.entityID,
246
-
rep.rep,
246
+
rep.rep
247
247
);
248
248
}
249
249
}}
···
260
260
}, 5);
261
261
}}
262
262
id={elementId.block(props.entityID).text}
263
+
// unless we break *only* on urls, this is better than tailwind 'break-all'
264
+
// b/c break-all can cause breaks in the middle of words, but break-word still
265
+
// forces break if a single text string (e.g. a url) spans more than a full line
266
+
style={{ wordBreak: "break-word" }}
263
267
className={`
264
-
break-all
265
268
grow resize-none align-top whitespace-pre-wrap bg-transparent
266
269
outline-none
267
270
${props.blockPadding}
···
328
331
) {
329
332
toggleMark(args.mark, args.attrs)(view.state, view.dispatch);
330
333
} else setMark(args.mark, args.attrs)(view.state, view.dispatch);
331
-
},
334
+
}
332
335
);
333
336
useAppEventListener(props.entityID, "toggleMark", cb, []);
334
337
return null;
···
355
358
356
359
// scroll card if cursor is at the very top or very bottom of the card
357
360
let parentID = document.getElementById(
358
-
elementId.card(props.parentID).container,
361
+
elementId.card(props.parentID).container
359
362
);
360
363
let parentHeight = parentID?.clientHeight;
361
364
let cursorPosY = coords.top;
···
390
393
};
391
394
});
392
395
},
393
-
[props.entityID],
396
+
[props.entityID]
394
397
);
395
398
return null;
396
399
};