a tool for shared writing and social publishing
handle shift-enter and shift-backspace
+88
-71
+88
-71
components/TextBlock/keymap.ts
+88
-71
components/TextBlock/keymap.ts
···
2
2
import { generateKeyBetween } from "fractional-indexing";
3
3
import { toggleMark } from "prosemirror-commands";
4
4
import { keymap } from "prosemirror-keymap";
5
-
import { TextSelection } from "prosemirror-state";
5
+
import { EditorState, TextSelection, Transaction } from "prosemirror-state";
6
6
import { MutableRefObject } from "react";
7
7
import { Replicache } from "replicache";
8
8
import { ReplicacheMutators } from "src/replicache";
···
66
66
}
67
67
return true;
68
68
},
69
-
Backspace: (state) => {
70
-
if (!propsRef.current.previousBlock) {
71
-
return false;
72
-
}
73
-
if (state.selection.anchor > 1 || state.selection.content().size > 0) {
74
-
return false;
75
-
}
69
+
Backspace: backspace(propsRef, repRef),
70
+
"Shift-Backspace": backspace(propsRef, repRef),
71
+
Enter: enter(propsRef, repRef),
72
+
"Shift-Enter": enter(propsRef, repRef),
73
+
});
76
74
77
-
if (state.doc.textContent.length === 0) {
78
-
repRef.current?.mutate.removeBlock({
79
-
blockEntity: propsRef.current.entityID,
80
-
});
81
-
if (propsRef.current.previousBlock) {
82
-
focusBlock(propsRef.current.previousBlock, "end", "bottom");
83
-
}
84
-
return true;
85
-
}
86
-
87
-
let block =
88
-
useEditorStates.getState().editorStates[
89
-
propsRef.current.previousBlock.value
90
-
];
91
-
if (!block) return false;
75
+
const backspace =
76
+
(
77
+
propsRef: MutableRefObject<BlockProps>,
78
+
repRef: MutableRefObject<Replicache<ReplicacheMutators> | null>,
79
+
) =>
80
+
(state: EditorState) => {
81
+
console.log("yo");
82
+
if (!propsRef.current.previousBlock) {
83
+
return false;
84
+
}
85
+
if (state.selection.anchor > 1 || state.selection.content().size > 0) {
86
+
return false;
87
+
}
92
88
89
+
if (state.doc.textContent.length === 0) {
93
90
repRef.current?.mutate.removeBlock({
94
91
blockEntity: propsRef.current.entityID,
95
92
});
93
+
if (propsRef.current.previousBlock) {
94
+
focusBlock(propsRef.current.previousBlock, "end", "bottom");
95
+
}
96
+
return true;
97
+
}
96
98
97
-
let tr = block.editor.tr;
99
+
let block =
100
+
useEditorStates.getState().editorStates[
101
+
propsRef.current.previousBlock.value
102
+
];
103
+
if (!block) return false;
98
104
99
-
block.view?.dom.focus();
100
-
let firstChild = state.doc.content.firstChild?.content;
101
-
if (firstChild) {
102
-
tr.insert(tr.doc.content.size - 1, firstChild);
103
-
tr.setSelection(
104
-
TextSelection.create(
105
-
tr.doc,
106
-
tr.doc.content.size - firstChild?.size - 1,
107
-
),
108
-
);
109
-
}
105
+
repRef.current?.mutate.removeBlock({
106
+
blockEntity: propsRef.current.entityID,
107
+
});
110
108
111
-
let newState = block.editor.apply(tr);
112
-
setEditorState(propsRef.current.previousBlock.value, {
113
-
editor: newState,
114
-
});
109
+
let tr = block.editor.tr;
115
110
116
-
return true;
117
-
},
118
-
Enter: (state, dispatch) => {
119
-
let tr = state.tr;
120
-
let newContent = tr.doc.slice(state.selection.anchor);
121
-
tr.delete(state.selection.anchor, state.doc.content.size);
122
-
dispatch?.(tr);
123
-
let newEntityID = crypto.randomUUID();
124
-
repRef.current?.mutate.addBlock({
125
-
newEntityID,
126
-
parent: propsRef.current.parent,
127
-
type: "text",
128
-
position: generateKeyBetween(
129
-
propsRef.current.position,
130
-
propsRef.current.nextPosition,
111
+
block.view?.dom.focus();
112
+
let firstChild = state.doc.content.firstChild?.content;
113
+
if (firstChild) {
114
+
tr.insert(tr.doc.content.size - 1, firstChild);
115
+
tr.setSelection(
116
+
TextSelection.create(
117
+
tr.doc,
118
+
tr.doc.content.size - firstChild?.size - 1,
131
119
),
132
-
});
133
-
setTimeout(() => {
134
-
let block = useEditorStates.getState().editorStates[newEntityID];
135
-
if (block) {
136
-
let tr = block.editor.tr;
137
-
tr.replaceWith(0, tr.doc.content.size, newContent.content);
138
-
tr.setSelection(TextSelection.create(tr.doc, 0));
139
-
let newState = block.editor.apply(tr);
140
-
setEditorState(newEntityID, {
141
-
editor: newState,
142
-
});
143
-
}
144
-
document.getElementById(elementId.block(newEntityID).text)?.focus();
145
-
}, 10);
146
-
return true;
147
-
},
148
-
});
120
+
);
121
+
}
122
+
123
+
let newState = block.editor.apply(tr);
124
+
setEditorState(propsRef.current.previousBlock.value, {
125
+
editor: newState,
126
+
});
127
+
128
+
return true;
129
+
};
130
+
131
+
const enter =
132
+
(
133
+
propsRef: MutableRefObject<BlockProps>,
134
+
repRef: MutableRefObject<Replicache<ReplicacheMutators> | null>,
135
+
) =>
136
+
(state: EditorState, dispatch?: (tr: Transaction) => void) => {
137
+
let tr = state.tr;
138
+
let newContent = tr.doc.slice(state.selection.anchor);
139
+
tr.delete(state.selection.anchor, state.doc.content.size);
140
+
dispatch?.(tr);
141
+
let newEntityID = crypto.randomUUID();
142
+
repRef.current?.mutate.addBlock({
143
+
newEntityID,
144
+
parent: propsRef.current.parent,
145
+
type: "text",
146
+
position: generateKeyBetween(
147
+
propsRef.current.position,
148
+
propsRef.current.nextPosition,
149
+
),
150
+
});
151
+
setTimeout(() => {
152
+
let block = useEditorStates.getState().editorStates[newEntityID];
153
+
if (block) {
154
+
let tr = block.editor.tr;
155
+
tr.replaceWith(0, tr.doc.content.size, newContent.content);
156
+
tr.setSelection(TextSelection.create(tr.doc, 0));
157
+
let newState = block.editor.apply(tr);
158
+
setEditorState(newEntityID, {
159
+
editor: newState,
160
+
});
161
+
}
162
+
document.getElementById(elementId.block(newEntityID).text)?.focus();
163
+
}, 10);
164
+
return true;
165
+
};