1 files changed, 174 insertions, 1 deletions

diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index 2ed955a56b6..08a956bf90f 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -1,18 +1,38 @@
 .ProseMirror {
+  width: calc(100% - 4px);
   padding-top: $gl-spacing-scale-4;
+  padding-left: calc(#{$gl-spacing-scale-5} - 2px);
+  padding-right: $gl-spacing-scale-5;
+  margin: 2px;
   min-height: 140px;
   max-height: 55vh;
+  position: static;
   overflow-y: auto;
+  transition: box-shadow ease-in-out 0.15s;
+
+  .gl-dark & {
+    width: calc(100% - 6px);
+    margin: 2px 3px;
+    padding-left: calc(#{$gl-spacing-scale-5} - 3px);
+  }
 
   ::selection {
     background-color: transparent;
   }
 
+  &:focus {
+    @include gl-focus;
+  }
+
   &:not(.ProseMirror-hideselection) .content-editor-selection,
   a.ProseMirror-selectednode,
   span.ProseMirror-selectednode {
     background-color: $blue-100;
-    box-shadow: 0 2px 0 $blue-100,  0 -2px 0 $blue-100;
+    box-shadow: 0 2px 0 $blue-100, 0 -2px 0 $blue-100;
+  }
+
+  pre > code {
+    background-color: transparent;
   }
 
   td,
@@ -44,6 +64,48 @@
     pointer-events: none;
   }
 
+  .image-resize-container {
+    position: relative;
+  }
+
+  .image-resize {
+    display: inline-block;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: $blue-200;
+    outline: 1px solid $white;
+  }
+
+  .image-resize-nw {
+    top: -4px;
+    left: -4px;
+    cursor: nw-resize;
+  }
+
+  .image-resize-ne {
+    top: -4px;
+    right: -4px;
+    cursor: ne-resize;
+  }
+
+  .image-resize-sw {
+    bottom: 4px;
+    left: -4px;
+    cursor: sw-resize;
+  }
+
+  .image-resize-se {
+    bottom: 4px;
+    right: -4px;
+    cursor: se-resize;
+  }
+
+  img.ProseMirror-selectednode {
+    outline: 2px solid $blue-200;
+    outline-offset: -2px;
+  }
+
   video {
     max-width: 400px;
   }
@@ -78,6 +140,81 @@
     }
   }
 
+  .suggestion-added,
+  .suggestion-deleted,
+  .suggestion-added-input {
+    white-space: pre-wrap;
+
+    > code {
+      white-space: pre-wrap;
+      padding: 0;
+      display: flex;
+    }
+  }
+
+  .suggestion-added-input {
+    > code {
+      display: block;
+      margin-left: 120px;
+      background-color: transparent !important;
+    }
+  }
+
+  .suggestion-added,
+  .suggestion-deleted {
+    background-color: $line-added;
+    width: 100%;
+
+    > code {
+      border-left: 100px solid $line-number-new;
+      padding-left: 20px;
+      border-radius: 0;
+      background-color: inherit !important;
+    }
+
+    > code::before {
+      content: attr(data-line-number);
+      position: absolute;
+      width: 100px;
+      margin-left: -120px;
+      text-align: right;
+      padding-right: 10px;
+      padding-left: 10px;
+
+      @include gl-text-secondary;
+    }
+
+    > code::after {
+      content: '+';
+      position: absolute;
+      margin-left: -20px;
+      width: 20px;
+      text-align: center;
+
+      @include gl-text-secondary;
+    }
+  }
+
+  .suggestion-added > code {
+    color: rgba($white, 0);
+  }
+
+  .suggestion-deleted {
+    background-color: $line-removed;
+    cursor: not-allowed;
+
+    > code {
+      border-color: $line-number-old;
+    }
+
+    > code::before {
+      padding-right: 60px;
+    }
+
+    > code::after {
+      content: '-';
+    }
+  }
 
   .dl-content {
     width: 100%;
@@ -135,6 +272,31 @@
   }
 }
 
+.gl-dark .ProseMirror {
+  .suggestion-added-input,
+  .suggestion-deleted {
+    > code {
+      color: $gray-50;
+    }
+  }
+
+  .suggestion-deleted,
+  .suggestion-added {
+    > code::before,
+    > code::after {
+      color: $gray-400;
+    }
+  }
+}
+
+// Fixes a problem with the layout shifting
+// when switching between Markdown and the
+// Richtext editor due to a loosly defined
+// style in typography.scss
+.md > .ProseMirror {
+  margin: 2px;
+}
+
 .table-creator-grid-item {
   box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
     inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100,
@@ -179,6 +341,17 @@
   min-width: auto;
 }
 
+.content-editor-suggestions-dropdown {
+  .gl-new-dropdown-panel {
+    width: max-content;
+  }
+
+  li.focused div.gl-new-dropdown-item-content {
+    @include gl-focus($inset: true);
+    @include gl-bg-gray-50;
+  }
+}
+
 .bubble-menu-form {
   min-width: 320px;
 }