Only set styling on code-block when editing (#8880)

* Only set styling on code-block when editing

* Only overflow code blocks in view mode

* Update code-block styles to wrap text in edit mode

* Fixed language indicator for code blocks

* Fix spec class

frontend/src/global_styles/content/user-content/_code-block.sass

@@ -0,0 +1,32 @@
+.op-uc-code-block
+  break-inside: avoid
+  display: block
+  margin: 0
+  padding: 1rem
+  overflow-x: auto
+  overflow-y: hidden
+  background-color: #fafafa
+  border: 1px solid #dadada
+
+  > *
+    background-color: transparent
+    border: none
+
+  @at-root .op-uc-container_editing &
+    overflow: visible
+    white-space: pre-wrap
+
+  &--language
+    margin-top: 0.5rem
+    margin-bottom: -0.5rem
+    text-align: right
+    font-style: italic
+
+.op-uc-code
+  font-family: Consolas, "Liberation Mono", Courier, monospace
+  font-weight: normal
+  color: #333739
+  background-color: #fafafa
+  border: 1px solid #dadada
+  padding: 0.125em 0.3125em
+  break-inside: avoid

frontend/src/global_styles/content/user-content/_index.sass

@@ -1,5 +1,6 @@
 @import 'mixins'
 @import 'typography'
+@import 'code-block'
 @import 'figure'
 @import 'image'
 @import 'table'

frontend/src/global_styles/content/user-content/_typography.sass

@@ -46,23 +46,6 @@
 
   @include user-content-children
 
-.op-uc-code-block
-  break-inside: avoid
-  display: block
-  margin: 0
-  padding: 1rem
-  background-color: #fafafa
-  border: 1px solid #dadada
-
-.op-uc-code
-  font-family: Consolas, "Liberation Mono", Courier, monospace
-  font-weight: normal
-  color: #333739
-  background-color: #fafafa
-  border: 1px solid #dadada
-  padding: 0.125em 0.3125em
-  break-inside: avoid
-
 .op-uc-link
   color: var(--content-link-color)
   font-size: 1em

spec/features/wysiwyg/macros/code_block_macro_spec.rb

@@ -68,11 +68,11 @@ describe 'Wysiwyg code block macro',
 
           # Expect first macro saved to editor
           expect(container).to have_selector('.op-uc-code-block', text: snippet)
-          expect(container).to have_selector('.op-ckeditor--code-block-language', text: 'ruby')
+          expect(container).to have_selector('.op-uc-code-block--language', text: 'ruby')
 
           editor.set_markdown "#{expected}\n#{expected}"
           expect(container).to have_selector('.op-uc-code-block', text: snippet, count: 2)
-          expect(container).to have_selector('.op-ckeditor--code-block-language', text: 'ruby', count: 2)
+          expect(container).to have_selector('.op-uc-code-block--language', text: 'ruby', count: 2)
         end
 
         click_on 'Save'
@@ -88,7 +88,7 @@ describe 'Wysiwyg code block macro',
 
         editor.in_editor do |container,|
           expect(container).to have_selector('.op-uc-code-block', text: snippet, count: 2)
-          expect(container).to have_selector('.op-ckeditor--code-block-language', text: 'ruby', count: 2)
+          expect(container).to have_selector('.op-uc-code-block--language', text: 'ruby', count: 2)
         end
       end
 
@@ -146,7 +146,7 @@ describe 'Wysiwyg code block macro',
 
           # Expect macro saved to editor
           expect(container).to have_selector('.op-uc-code-block', text: snippet)
-          expect(container).to have_selector('.op-ckeditor--code-block-language', text: 'ruby')
+          expect(container).to have_selector('.op-uc-code-block--language', text: 'ruby')
         end
 
         # Save wiki page
@@ -168,13 +168,13 @@ describe 'Wysiwyg code block macro',
 
         editor.in_editor do |container,|
           expect(container).to have_selector('.op-uc-code-block', text: snippet)
-          expect(container).to have_selector('.op-ckeditor--code-block-language', text: 'ruby')
+          expect(container).to have_selector('.op-uc-code-block--language', text: 'ruby')
 
           widget = container.find('.op-uc-code-block')
           page.driver.browser.action.double_click(widget.native).perform
           expect(page).to have_selector('.op-modal--macro-modal')
 
-          expect(page).to have_selector('.op-ckeditor--code-block-language', text: 'ruby')
+          expect(page).to have_selector('.op-uc-code-block--language', text: 'ruby')
           expect(page).to have_selector('.cm-keyword', text: 'def')
           expect(page).to have_selector('.cm-def', text: 'foobar')
         end