[WIP] Add lineComments CodeMirror extension - inline widget

Author: VasylMarchuk

app/utils/code-mirror-line-comments.ts

@@ -37,11 +37,7 @@ class CommentsWidget extends WidgetType {
 
   toDOM(view: EditorView): HTMLElement {
     const comments = (view.state.facet(lineCommentsFacet)[0] || [])[this.line.number - 1];
-
     const elem = document.createElement('line-comments');
-    elem.style.display = 'block';
-    elem.style.backgroundColor = '#009bff80';
-    elem.style.paddingLeft = '1rem';
 
     if (comments?.length) {
       elem.innerText = `💬 COMMENTS (${comments?.length || 0}) FOR LINE #${this.line.number}`;
@@ -60,8 +56,8 @@ function lineCommentsDecorations(state: EditorState) {
       Decoration.widget({
         widget: new CommentsWidget(line),
         side: 10,
-        inlineOrder: true,
-        block: true,
+        // inlineOrder: true,
+        // block: true,
       }).range(line.to),
     );
   }
@@ -96,7 +92,12 @@ class CommentsCountGutterMarker extends GutterMarkerRS {
     const lineNumber = view.state.doc.lineAt(this.line.from).number;
     const comments = (view.state.facet(lineCommentsFacet)[0] || [])[lineNumber - 1];
     const elem = document.createElement('comments-count');
-    elem.innerText = `${comments?.length}`;
+    const commentsCount = comments?.length || 0;
+    elem.innerText = `${commentsCount > 99 ? '99+' : commentsCount}`;
+
+    if (commentsCount > 99) {
+      elem.className = 'cm-over-99';
+    }
 
     return elem;
   }
@@ -121,11 +122,25 @@ class CommentButtonGutterMarker extends GutterMarkerRS {
 export function lineComments() {
   return [
     lineCommentsFacet.compute(['doc'], function (state) {
-      return Array.from({ length: state.doc.lines }).map((_v, lineNumber) =>
-        Array.from<string>({ length: Math.random() < 0.4 ? getRandomInt(0, 6) : 0 }).map(
+      return Array.from({ length: state.doc.lines }).map(function (_v, lineNumber) {
+        const rnd = Math.random();
+
+        let commentsCount;
+
+        if (rnd < 0.05) {
+          commentsCount = getRandomInt(100, 255);
+        } else if (rnd < 0.1) {
+          commentsCount = getRandomInt(10, 99);
+        } else if (rnd < 0.8) {
+          commentsCount = 0;
+        } else {
+          commentsCount = getRandomInt(1, 9);
+        }
+
+        return Array.from<string>({ length: commentsCount }).map(
           (_v, index) => new LineComment({ lineNumber, author: 'Darth Programmius', text: `Comment #${index}` }),
-        ),
-      );
+        );
+      });
     }),
     lineCommentsStateField,
     gutterRS({
@@ -140,8 +155,25 @@ export function lineComments() {
     }),
     highlightActiveLineGutterRS(),
     EditorView.baseTheme({
+      '.cm-line': {
+        '& line-comments': {
+          display: 'block',
+          backgroundColor: '#009bff40',
+          paddingLeft: '1rem',
+          marginRight: '-1rem',
+
+          '& + br': {
+            display: 'none',
+          },
+        },
+
+        '& .cm-insertedLine + br': {
+          display: 'none',
+        },
+      },
+
       '.cm-gutters.cm-gutters-rs': {
-        backgroundColor: '#ff000070', // 'transparent',
+        backgroundColor: '#ffffff20', // '#ff000070', // 'transparent',
 
         '& .cm-custom-gutter-rs': {
           minWidth: '24px',
@@ -150,14 +182,32 @@ export function lineComments() {
           '& .cm-gutterElement': {
             cursor: 'pointer',
 
+            '& comments-count': {
+              display: 'block',
+              backgroundColor: '#ffcd72c0',
+              borderRadius: '50%',
+              color: '#24292e',
+              transform: 'scale(0.75)',
+              fontWeight: '500',
+              fontSize: '12px',
+
+              '&.cm-over-99': {
+                fontSize: '9.5px',
+              },
+            },
+
             '& comment-button': {
-              opacity: '0.2',
+              opacity: '0.15',
             },
 
             '&:hover': {
               '& comment-button': {
                 opacity: '1',
               },
+
+              '& comments-count': {
+                backgroundColor: '#ffa500',
+              },
             },
           },
         },

app/utils/code-mirror-themes.ts

@@ -18,7 +18,7 @@ const BASE_STYLE = {
   '.cm-lineNumbers': {
     '& .cm-gutterElement': {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       justifyContent: 'flex-end',
       padding: '0 0.5rem 0 1rem',
       fontSize: '0.875em',
@@ -30,11 +30,15 @@ const BASE_STYLE = {
   '.cm-foldGutter': {
     '& .cm-gutterElement': {
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       justifyContent: 'center',
       fontSize: '0.875em',
       minWidth: '1.2rem',
       color: '#94a3b8',
+
+      '& svg': {
+        marginTop: '0.3rem',
+      },
     },
   },