a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

handle shift-enter and shift-backspace

+88 -71
+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 + };