a tool for shared writing and social publishing
298
fork

Configure Feed

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

highlight text manually if focused in other input

+45 -1
+13
app/globals.css
··· 105 105 @apply rounded-[4px]; 106 106 @apply box-decoration-clone; 107 107 } 108 + 109 + .selection-highlight { 110 + background-color: Highlight; 111 + @apply py-[1.5px]; 112 + } 113 + 114 + .ProseMirror:focus-within .selection-highlight { 115 + background-color: transparent; 116 + } 117 + 118 + .Multiple-Selected:focus-within .selection-highlight { 119 + background-color: transparent; 120 + }
+2
components/Blocks/TextBlock/index.tsx
··· 39 39 import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark"; 40 40 import { useEntitySetContext } from "components/EntitySetProvider"; 41 41 import { useHandlePaste } from "./useHandlePaste"; 42 + import { highlightSelectionPlugin } from "./plugins"; 42 43 43 44 export function TextBlock(props: BlockProps & { className: string }) { 44 45 let initialized = useInitialPageLoad(); ··· 171 172 ySyncPlugin(value), 172 173 TextBlockKeymap(propsRef, repRef), 173 174 keymap(baseKeymap), 175 + highlightSelectionPlugin, 174 176 ], 175 177 }), 176 178 });
+27
components/Blocks/TextBlock/plugins.ts
··· 1 + import { Decoration, DecorationSet } from "prosemirror-view"; 2 + import { Plugin } from "prosemirror-state"; 3 + export const highlightSelectionPlugin = new Plugin({ 4 + state: { 5 + init(_, { doc }) { 6 + return DecorationSet.empty; 7 + }, 8 + apply(tr, oldDecorations, oldState, newState) { 9 + let decorations = []; 10 + 11 + // Check if there's a selection 12 + const { from, to } = newState.selection; 13 + if (from !== to) { 14 + decorations.push( 15 + Decoration.inline(from, to, { class: "selection-highlight" }), 16 + ); 17 + } 18 + 19 + return DecorationSet.create(newState.doc, decorations); 20 + }, 21 + }, 22 + props: { 23 + decorations(state) { 24 + return this.getState(state); 25 + }, 26 + }, 27 + });
+3 -1
components/Blocks/index.tsx
··· 299 299 props.type !== "heading" && 300 300 props.type !== "text" && 301 301 `first:pt-0 sm:first:pt-0 pl-3 pr-3 sm:pl-4 sm:pr-4 pt-1 pb-2` 302 - }`} 302 + } 303 + ${selectedBlocks.length > 1 ? "Multiple-Selected" : ""} 304 + `} 303 305 id={elementId.block(props.entityID).container} 304 306 > 305 307 {selected && selectedBlocks.length > 1 && (