a tool for shared writing and social publishing
add iosbs to commentbox
+37
-4
+37
-4
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
+37
-4
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
···
10
10
import {
11
11
MutableRefObject,
12
12
RefObject,
13
+
useEffect,
13
14
useLayoutEffect,
14
15
useRef,
15
16
useState,
···
23
24
import { setMark } from "src/utils/prosemirror/setMark";
24
25
import { multi } from "linkifyjs";
25
26
import { Json } from "supabase/database.types";
27
+
import { isIOS } from "src/utils/isDevice";
26
28
27
29
export function CommentBox(props: {
28
30
doc_uri: string;
···
89
91
let [loading, setLoading] = useState(false);
90
92
return (
91
93
<div className=" flex flex-col gap-1">
92
-
<pre
93
-
ref={mountRef}
94
-
className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit`}
95
-
/>
94
+
<div className="w-full relative">
95
+
<pre
96
+
ref={mountRef}
97
+
className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit`}
98
+
/>
99
+
<IOSBS view={view} />
100
+
</div>
96
101
<div className="flex justify-between">
97
102
<div className="flex gap-1">
98
103
<TextDecorationButton
···
142
147
</ButtonPrimary>
143
148
</div>
144
149
</div>
150
+
);
151
+
}
152
+
153
+
export function IOSBS(props: { view: RefObject<EditorView | null> }) {
154
+
let [initialRender, setInitialRender] = useState(true);
155
+
useEffect(() => {
156
+
setInitialRender(false);
157
+
}, []);
158
+
if (initialRender || !isIOS()) return null;
159
+
return (
160
+
<div
161
+
className="h-full w-full absolute cursor-text group-focus-within:hidden py-[18px]"
162
+
onPointerUp={(e) => {
163
+
if (!props.view.current) return;
164
+
e.preventDefault();
165
+
166
+
let pos = props.view.current.posAtCoords({
167
+
top: e.clientY,
168
+
left: e.clientX,
169
+
});
170
+
171
+
let tr = props.view.current.state.tr;
172
+
props.view.current.dispatch(
173
+
tr.setSelection(TextSelection.create(tr.doc, pos?.pos || 1)),
174
+
);
175
+
props.view.current.focus();
176
+
}}
177
+
/>
145
178
);
146
179
}
147
180