|
| 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 | +function generateRandomComments(linesCount = 0) { |
| 17 | + return Array.from({ length: linesCount }).map(function (_v, lineNumber) { |
| 18 | + const rnd = Math.random(); |
| 19 | + |
| 20 | + let commentsCount; |
| 21 | + |
| 22 | + if (rnd < 0.05) { |
| 23 | + commentsCount = getRandomInt(100, 1000); |
| 24 | + } else if (rnd < 0.1) { |
| 25 | + commentsCount = getRandomInt(10, 100); |
| 26 | + } else if (rnd < 0.8) { |
| 27 | + commentsCount = 0; |
| 28 | + } else { |
| 29 | + commentsCount = getRandomInt(1, 10); |
| 30 | + } |
| 31 | + |
| 32 | + return Array.from<string>({ length: commentsCount }).map( |
| 33 | + (_v, index) => new LineComment({ lineNumber, author: 'Darth Programmius', text: `Comment #${index}` }), |
| 34 | + ); |
| 35 | + }); |
| 36 | +} |
| 37 | + |
| 38 | +type LineCommentsCollection = (undefined | LineComment[])[]; |
| 39 | + |
| 40 | +class LineComment { |
| 41 | + lineNumber: number; |
| 42 | + text: string; |
| 43 | + author: string; |
| 44 | + |
| 45 | + constructor({ lineNumber, text, author }: { lineNumber: number; text: string; author: string }) { |
| 46 | + this.lineNumber = lineNumber; |
| 47 | + this.text = text; |
| 48 | + this.author = author; |
| 49 | + } |
| 50 | +} |
| 51 | + |
| 52 | +class CommentsWidget extends WidgetType { |
| 53 | + line: Line; |
| 54 | + |
| 55 | + constructor(line: Line) { |
| 56 | + super(); |
| 57 | + this.line = line; |
| 58 | + } |
| 59 | + |
| 60 | + toDOM(view: EditorView): HTMLElement { |
| 61 | + const comments = (view.state.facet(lineCommentsFacet)[0] || [])[this.line.number - 1]; |
| 62 | + const elem = document.createElement('line-comments'); |
| 63 | + |
| 64 | + if (comments?.length) { |
| 65 | + elem.innerText = `💬 COMMENTS (${comments?.length || 0}) FOR LINE #${this.line.number}`; |
| 66 | + } |
| 67 | + |
| 68 | + return elem; |
| 69 | + } |
| 70 | +} |
| 71 | + |
| 72 | +function lineCommentsDecorations(state: EditorState) { |
| 73 | + const decorations = []; |
| 74 | + |
| 75 | + for (let i = 1; i <= state.doc.lines; i++) { |
| 76 | + const line = state.doc.line(i); |
| 77 | + decorations.push( |
| 78 | + Decoration.widget({ |
| 79 | + widget: new CommentsWidget(line), |
| 80 | + side: 10, |
| 81 | + // inlineOrder: true, |
| 82 | + // block: true, |
| 83 | + }).range(line.to), |
| 84 | + ); |
| 85 | + } |
| 86 | + |
| 87 | + return Decoration.set(decorations); |
| 88 | +} |
| 89 | + |
| 90 | +const lineCommentsStateField = StateField.define<DecorationSet>({ |
| 91 | + create(state) { |
| 92 | + return lineCommentsDecorations(state); |
| 93 | + }, |
| 94 | + update(_value, tr) { |
| 95 | + return lineCommentsDecorations(tr.state); |
| 96 | + // return tr.docChanged ? lineCommentsDecorations(tr.state) : value; |
| 97 | + }, |
| 98 | + provide(field) { |
| 99 | + return EditorView.decorations.from(field); |
| 100 | + }, |
| 101 | +}); |
| 102 | + |
| 103 | +const lineCommentsFacet = Facet.define<LineCommentsCollection>(); |
| 104 | + |
| 105 | +class CommentsCountGutterMarker extends GutterMarkerRS { |
| 106 | + line: BlockInfo; |
| 107 | + |
| 108 | + constructor(line: BlockInfo) { |
| 109 | + super(); |
| 110 | + this.line = line; |
| 111 | + } |
| 112 | + |
| 113 | + toDOM(view: EditorView) { |
| 114 | + const lineNumber = view.state.doc.lineAt(this.line.from).number; |
| 115 | + const comments = (view.state.facet(lineCommentsFacet)[0] || [])[lineNumber - 1]; |
| 116 | + const commentsCount = comments?.length || 0; |
| 117 | + const elem = document.createElement('comments-count'); |
| 118 | + |
| 119 | + elem.innerText = `${commentsCount > 99 ? '99+' : commentsCount}`; |
| 120 | + |
| 121 | + if (commentsCount > 99) { |
| 122 | + elem.className = 'cm-over-99'; |
| 123 | + } |
| 124 | + |
| 125 | + return elem; |
| 126 | + } |
| 127 | +} |
| 128 | + |
| 129 | +class CommentButtonGutterMarker extends GutterMarkerRS { |
| 130 | + line: BlockInfo; |
| 131 | + |
| 132 | + constructor(line: BlockInfo) { |
| 133 | + super(); |
| 134 | + this.line = line; |
| 135 | + } |
| 136 | + |
| 137 | + toDOM() { |
| 138 | + const elem = document.createElement('comment-button'); |
| 139 | + |
| 140 | + elem.innerText = `💬`; |
| 141 | + |
| 142 | + return elem; |
| 143 | + } |
| 144 | +} |
| 145 | + |
| 146 | +export function lineComments() { |
| 147 | + return [ |
| 148 | + lineCommentsFacet.compute(['doc'], (state) => generateRandomComments(state.doc.lines)), |
| 149 | + |
| 150 | + lineCommentsStateField, |
| 151 | + |
| 152 | + gutterRS({ |
| 153 | + class: 'cm-lineCommentsGutter', |
| 154 | + |
| 155 | + lineMarker(view, line) { |
| 156 | + const lineNumber = view.state.doc.lineAt(line.from).number; |
| 157 | + const comments = (view.state.facet(lineCommentsFacet)[0] || [])[lineNumber - 1]; |
| 158 | + const commentsCount = comments?.length || 0; |
| 159 | + |
| 160 | + return new (commentsCount === 0 ? CommentButtonGutterMarker : CommentsCountGutterMarker)(line); |
| 161 | + }, |
| 162 | + }), |
| 163 | + |
| 164 | + highlightActiveLineGutterRS(), |
| 165 | + |
| 166 | + EditorView.baseTheme({ |
| 167 | + '.cm-line': { |
| 168 | + '& line-comments': { |
| 169 | + display: 'block', |
| 170 | + backgroundColor: '#009bff40', |
| 171 | + paddingLeft: '1rem', |
| 172 | + marginRight: '-1rem', |
| 173 | + |
| 174 | + '& + br': { |
| 175 | + display: 'none', |
| 176 | + }, |
| 177 | + }, |
| 178 | + |
| 179 | + '& .cm-insertedLine + br': { |
| 180 | + display: 'none', |
| 181 | + }, |
| 182 | + }, |
| 183 | + |
| 184 | + '.cm-gutters.cm-gutters-rs': { |
| 185 | + backgroundColor: '#ffffff20', // '#ff000070', // 'transparent', |
| 186 | + |
| 187 | + '& .cm-lineCommentsGutter': { |
| 188 | + minWidth: '24px', |
| 189 | + textAlign: 'center', |
| 190 | + |
| 191 | + '& .cm-gutterElement': { |
| 192 | + cursor: 'pointer', |
| 193 | + |
| 194 | + '& comments-count': { |
| 195 | + display: 'block', |
| 196 | + backgroundColor: '#ffcd72c0', |
| 197 | + borderRadius: '50%', |
| 198 | + color: '#24292e', |
| 199 | + transform: 'scale(0.75)', |
| 200 | + fontWeight: '500', |
| 201 | + fontSize: '12px', |
| 202 | + |
| 203 | + '&.cm-over-99': { |
| 204 | + fontSize: '9.5px', |
| 205 | + }, |
| 206 | + }, |
| 207 | + |
| 208 | + '& comment-button': { |
| 209 | + opacity: '0.15', |
| 210 | + }, |
| 211 | + |
| 212 | + '&:hover': { |
| 213 | + '& comment-button': { |
| 214 | + opacity: '1', |
| 215 | + }, |
| 216 | + |
| 217 | + '& comments-count': { |
| 218 | + backgroundColor: '#ffa500', |
| 219 | + }, |
| 220 | + }, |
| 221 | + }, |
| 222 | + }, |
| 223 | + }, |
| 224 | + }), |
| 225 | + ]; |
| 226 | +} |
0 commit comments