|
| 1 | +import { BlockInfo, Decoration, EditorView, WidgetType, type DecorationSet } from '@codemirror/view'; |
| 2 | +import { EditorState, Facet, Line, StateField } from '@codemirror/state'; |
| 3 | +import { |
| 4 | + gutter as gutterRS, |
| 5 | + GutterMarker as GutterMarkerRS, |
| 6 | + highlightActiveLineGutter as highlightActiveLineGutterRS, |
| 7 | +} from 'codecrafters-frontend/utils/code-mirror-gutter-rs'; |
| 8 | + |
| 9 | +function getRandomInt(inclusiveMin: number, exclusiveMax: number) { |
| 10 | + const minCeiled = Math.ceil(inclusiveMin); |
| 11 | + const maxFloored = Math.floor(exclusiveMax); |
| 12 | + |
| 13 | + return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); |
| 14 | +} |
| 15 | + |
| 16 | +type LineCommentsCollection = (undefined | LineComment[])[]; |
| 17 | + |
| 18 | +class LineComment { |
| 19 | + lineNumber: number; |
| 20 | + text: string; |
| 21 | + author: string; |
| 22 | + |
| 23 | + constructor({ lineNumber, text, author }: { lineNumber: number; text: string; author: string }) { |
| 24 | + this.lineNumber = lineNumber; |
| 25 | + this.text = text; |
| 26 | + this.author = author; |
| 27 | + } |
| 28 | +} |
| 29 | + |
| 30 | +class CommentsWidget extends WidgetType { |
| 31 | + line: Line; |
| 32 | + |
| 33 | + constructor(line: Line) { |
| 34 | + super(); |
| 35 | + this.line = line; |
| 36 | + } |
| 37 | + |
| 38 | + toDOM(view: EditorView): HTMLElement { |
| 39 | + const comments = (view.state.facet(lineCommentsFacet)[0] || [])[this.line.number - 1]; |
| 40 | + |
| 41 | + const elem = document.createElement('line-comments'); |
| 42 | + elem.style.display = 'block'; |
| 43 | + elem.style.backgroundColor = '#009bff80'; |
| 44 | + elem.style.paddingLeft = '1rem'; |
| 45 | + |
| 46 | + if (comments?.length) { |
| 47 | + elem.innerText = `💬 COMMENTS (${comments?.length || 0}) FOR LINE #${this.line.number}`; |
| 48 | + } |
| 49 | + |
| 50 | + return elem; |
| 51 | + } |
| 52 | +} |
| 53 | + |
| 54 | +function lineCommentsDecorations(state: EditorState) { |
| 55 | + const decorations = []; |
| 56 | + |
| 57 | + for (let i = 1; i <= state.doc.lines; i++) { |
| 58 | + const line = state.doc.line(i); |
| 59 | + decorations.push( |
| 60 | + Decoration.widget({ |
| 61 | + widget: new CommentsWidget(line), |
| 62 | + side: 10, |
| 63 | + inlineOrder: true, |
| 64 | + block: true, |
| 65 | + }).range(line.to), |
| 66 | + ); |
| 67 | + } |
| 68 | + |
| 69 | + return Decoration.set(decorations); |
| 70 | +} |
| 71 | + |
| 72 | +const lineCommentsStateField = StateField.define<DecorationSet>({ |
| 73 | + create(state) { |
| 74 | + return lineCommentsDecorations(state); |
| 75 | + }, |
| 76 | + update(_value, tr) { |
| 77 | + return lineCommentsDecorations(tr.state); |
| 78 | + // return tr.docChanged ? lineCommentsDecorations(tr.state) : value; |
| 79 | + }, |
| 80 | + provide(field) { |
| 81 | + return EditorView.decorations.from(field); |
| 82 | + }, |
| 83 | +}); |
| 84 | + |
| 85 | +const lineCommentsFacet = Facet.define<LineCommentsCollection>(); |
| 86 | + |
| 87 | +class CommentsCountGutterMarker extends GutterMarkerRS { |
| 88 | + line: BlockInfo; |
| 89 | + |
| 90 | + constructor(line: BlockInfo) { |
| 91 | + super(); |
| 92 | + this.line = line; |
| 93 | + } |
| 94 | + |
| 95 | + toDOM(view: EditorView) { |
| 96 | + const lineNumber = view.state.doc.lineAt(this.line.from).number; |
| 97 | + const comments = (view.state.facet(lineCommentsFacet)[0] || [])[lineNumber - 1]; |
| 98 | + const elem = document.createElement('comments-count'); |
| 99 | + elem.innerText = `${comments?.length}`; |
| 100 | + |
| 101 | + return elem; |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +class CommentButtonGutterMarker extends GutterMarkerRS { |
| 106 | + line: BlockInfo; |
| 107 | + |
| 108 | + constructor(line: BlockInfo) { |
| 109 | + super(); |
| 110 | + this.line = line; |
| 111 | + } |
| 112 | + |
| 113 | + toDOM() { |
| 114 | + const elem = document.createElement('comment-button'); |
| 115 | + elem.innerText = `💬`; |
| 116 | + |
| 117 | + return elem; |
| 118 | + } |
| 119 | +} |
| 120 | + |
| 121 | +export function lineComments() { |
| 122 | + return [ |
| 123 | + lineCommentsFacet.compute(['doc'], function (state) { |
| 124 | + return Array.from({ length: state.doc.lines }).map((_v, lineNumber) => |
| 125 | + Array.from<string>({ length: Math.random() < 0.4 ? getRandomInt(0, 6) : 0 }).map( |
| 126 | + (_v, index) => new LineComment({ lineNumber, author: 'Darth Programmius', text: `Comment #${index}` }), |
| 127 | + ), |
| 128 | + ); |
| 129 | + }), |
| 130 | + lineCommentsStateField, |
| 131 | + gutterRS({ |
| 132 | + class: 'cm-custom-gutter-rs', |
| 133 | + renderEmptyElements: true, |
| 134 | + lineMarker(view, line) { |
| 135 | + const lineNumber = view.state.doc.lineAt(line.from).number; |
| 136 | + const comments = (view.state.facet(lineCommentsFacet)[0] || [])[lineNumber - 1]; |
| 137 | + |
| 138 | + return comments?.length === 0 ? new CommentButtonGutterMarker(line) : new CommentsCountGutterMarker(line); |
| 139 | + }, |
| 140 | + }), |
| 141 | + highlightActiveLineGutterRS(), |
| 142 | + EditorView.baseTheme({ |
| 143 | + '.cm-gutters.cm-gutters-rs': { |
| 144 | + backgroundColor: '#ff000070', // 'transparent', |
| 145 | + |
| 146 | + '& .cm-custom-gutter-rs': { |
| 147 | + minWidth: '24px', |
| 148 | + textAlign: 'center', |
| 149 | + |
| 150 | + '& .cm-gutterElement': { |
| 151 | + cursor: 'pointer', |
| 152 | + |
| 153 | + '& comment-button': { |
| 154 | + opacity: '0.2', |
| 155 | + }, |
| 156 | + |
| 157 | + '&:hover': { |
| 158 | + '& comment-button': { |
| 159 | + opacity: '1', |
| 160 | + }, |
| 161 | + }, |
| 162 | + }, |
| 163 | + }, |
| 164 | + }, |
| 165 | + }), |
| 166 | + ]; |
| 167 | +} |
0 commit comments