|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { ScrollArea } from "@/components/ui/scroll-area"; |
| 4 | +import { useKeymapExtension } from "@/hooks/useKeymapExtension"; |
| 5 | +import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam"; |
| 6 | +import { useSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension"; |
| 7 | +import { useThemeNormalized } from "@/hooks/useThemeNormalized"; |
| 8 | +import { search } from "@codemirror/search"; |
| 9 | +import CodeMirror, { Decoration, DecorationSet, EditorSelection, EditorView, ReactCodeMirrorRef, SelectionRange, StateField, ViewUpdate } from "@uiw/react-codemirror"; |
| 10 | +import { useEffect, useMemo, useRef, useState } from "react"; |
| 11 | +import { EditorContextMenu } from "../../components/editorContextMenu"; |
| 12 | + |
| 13 | +interface CodePreviewProps { |
| 14 | + path: string; |
| 15 | + repoName: string; |
| 16 | + revisionName: string; |
| 17 | + source: string; |
| 18 | + language: string; |
| 19 | +} |
| 20 | + |
| 21 | +export const CodePreview = ({ |
| 22 | + source, |
| 23 | + language, |
| 24 | + path, |
| 25 | + repoName, |
| 26 | + revisionName, |
| 27 | +}: CodePreviewProps) => { |
| 28 | + const editorRef = useRef<ReactCodeMirrorRef>(null); |
| 29 | + const syntaxHighlighting = useSyntaxHighlightingExtension(language, editorRef.current?.view); |
| 30 | + const [currentSelection, setCurrentSelection] = useState<SelectionRange>(); |
| 31 | + const keymapExtension = useKeymapExtension(editorRef.current?.view); |
| 32 | + const [isEditorCreated, setIsEditorCreated] = useState(false); |
| 33 | + |
| 34 | + const highlightRangeQuery = useNonEmptyQueryParam('highlightRange'); |
| 35 | + const highlightRange = useMemo(() => { |
| 36 | + if (!highlightRangeQuery) { |
| 37 | + return; |
| 38 | + } |
| 39 | + |
| 40 | + const rangeRegex = /^\d+:\d+,\d+:\d+$/; |
| 41 | + if (!rangeRegex.test(highlightRangeQuery)) { |
| 42 | + return; |
| 43 | + } |
| 44 | + |
| 45 | + const [start, end] = highlightRangeQuery.split(',').map((range) => { |
| 46 | + return range.split(':').map((val) => parseInt(val, 10)); |
| 47 | + }); |
| 48 | + |
| 49 | + return { |
| 50 | + start: { |
| 51 | + line: start[0], |
| 52 | + character: start[1], |
| 53 | + }, |
| 54 | + end: { |
| 55 | + line: end[0], |
| 56 | + character: end[1], |
| 57 | + } |
| 58 | + } |
| 59 | + }, [highlightRangeQuery]); |
| 60 | + |
| 61 | + const extensions = useMemo(() => { |
| 62 | + const highlightDecoration = Decoration.mark({ |
| 63 | + class: "cm-searchMatch-selected", |
| 64 | + }); |
| 65 | + |
| 66 | + return [ |
| 67 | + syntaxHighlighting, |
| 68 | + EditorView.lineWrapping, |
| 69 | + keymapExtension, |
| 70 | + search({ |
| 71 | + top: true, |
| 72 | + }), |
| 73 | + EditorView.updateListener.of((update: ViewUpdate) => { |
| 74 | + if (update.selectionSet) { |
| 75 | + setCurrentSelection(update.state.selection.main); |
| 76 | + } |
| 77 | + }), |
| 78 | + StateField.define<DecorationSet>({ |
| 79 | + create(state) { |
| 80 | + if (!highlightRange) { |
| 81 | + return Decoration.none; |
| 82 | + } |
| 83 | + |
| 84 | + const { start, end } = highlightRange; |
| 85 | + const from = state.doc.line(start.line).from + start.character - 1; |
| 86 | + const to = state.doc.line(end.line).from + end.character - 1; |
| 87 | + |
| 88 | + return Decoration.set([ |
| 89 | + highlightDecoration.range(from, to), |
| 90 | + ]); |
| 91 | + }, |
| 92 | + update(deco, tr) { |
| 93 | + return deco.map(tr.changes); |
| 94 | + }, |
| 95 | + provide: (field) => EditorView.decorations.from(field), |
| 96 | + }), |
| 97 | + ]; |
| 98 | + }, [keymapExtension, syntaxHighlighting, highlightRange]); |
| 99 | + |
| 100 | + useEffect(() => { |
| 101 | + if (!highlightRange || !editorRef.current || !editorRef.current.state) { |
| 102 | + return; |
| 103 | + } |
| 104 | + |
| 105 | + const doc = editorRef.current.state.doc; |
| 106 | + const { start, end } = highlightRange; |
| 107 | + const from = doc.line(start.line).from + start.character - 1; |
| 108 | + const to = doc.line(end.line).from + end.character - 1; |
| 109 | + const selection = EditorSelection.range(from, to); |
| 110 | + |
| 111 | + editorRef.current.view?.dispatch({ |
| 112 | + effects: [ |
| 113 | + EditorView.scrollIntoView(selection, { y: "center" }), |
| 114 | + ] |
| 115 | + }); |
| 116 | + // @note: we need to include `isEditorCreated` in the dependency array since |
| 117 | + // a race-condition can happen if the `highlightRange` is resolved before the |
| 118 | + // editor is created. |
| 119 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 120 | + }, [highlightRange, isEditorCreated]); |
| 121 | + |
| 122 | + const { theme } = useThemeNormalized(); |
| 123 | + |
| 124 | + return ( |
| 125 | + <ScrollArea className="h-full overflow-auto flex-1"> |
| 126 | + <CodeMirror |
| 127 | + className="relative" |
| 128 | + ref={editorRef} |
| 129 | + onCreateEditor={() => { |
| 130 | + setIsEditorCreated(true); |
| 131 | + }} |
| 132 | + value={source} |
| 133 | + extensions={extensions} |
| 134 | + readOnly={true} |
| 135 | + theme={theme === "dark" ? "dark" : "light"} |
| 136 | + > |
| 137 | + {editorRef.current && editorRef.current.view && currentSelection && ( |
| 138 | + <EditorContextMenu |
| 139 | + view={editorRef.current.view} |
| 140 | + selection={currentSelection} |
| 141 | + repoName={repoName} |
| 142 | + path={path} |
| 143 | + revisionName={revisionName} |
| 144 | + /> |
| 145 | + )} |
| 146 | + </CodeMirror> |
| 147 | + </ScrollArea> |
| 148 | + ) |
| 149 | +} |
| 150 | + |
0 commit comments