leaflet.pub
a tool for shared writing and social publishing
highlight text manually if focused in other input
awarm.space
+13
app/globals.css
+13
app/globals.css
···
105
@apply rounded-[4px];
106
@apply box-decoration-clone;
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
+2
components/Blocks/TextBlock/index.tsx
···
39
import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark";
40
import { useEntitySetContext } from "components/EntitySetProvider";
41
import { useHandlePaste } from "./useHandlePaste";
42
43
export function TextBlock(props: BlockProps & { className: string }) {
44
let initialized = useInitialPageLoad();
···
171
ySyncPlugin(value),
172
TextBlockKeymap(propsRef, repRef),
173
keymap(baseKeymap),
174
],
175
}),
176
});
···
39
import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark";
40
import { useEntitySetContext } from "components/EntitySetProvider";
41
import { useHandlePaste } from "./useHandlePaste";
42
+
import { highlightSelectionPlugin } from "./plugins";
43
44
export function TextBlock(props: BlockProps & { className: string }) {
45
let initialized = useInitialPageLoad();
···
172
ySyncPlugin(value),
173
TextBlockKeymap(propsRef, repRef),
174
keymap(baseKeymap),
175
+
highlightSelectionPlugin,
176
],
177
}),
178
});
+27
components/Blocks/TextBlock/plugins.ts
+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
+3
-1
components/Blocks/index.tsx
···
299
props.type !== "heading" &&
300
props.type !== "text" &&
301
`first:pt-0 sm:first:pt-0 pl-3 pr-3 sm:pl-4 sm:pr-4 pt-1 pb-2`
302
+
}
303
+
${selectedBlocks.length > 1 ? "Multiple-Selected" : ""}
304
+
`}
305
id={elementId.block(props.entityID).container}
306
>
307
{selected && selectedBlocks.length > 1 && (