[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),
     );
   }
@@ -140,8 +136,25 @@ export function lineComments() {
     }),
     highlightActiveLineGutterRS(),
     EditorView.baseTheme({
+      '.cm-line': {
+        '& line-comments': {
+          display: 'block',
+          backgroundColor: '#009bff80',
+          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 +163,26 @@ export function lineComments() {
           '& .cm-gutterElement': {
             cursor: 'pointer',
 
+            '& comments-count': {
+              display: 'block',
+              backgroundColor: '#ffcd72c0',
+              borderRadius: '50%',
+              color: 'black',
+              transform: 'scale(0.7)',
+              fontWeight: 'bold',
+            },
+
             '& 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',