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
pull/8890/head
Benjamin Bädorf 4 years ago committed by GitHub
parent c517e3b2a1
commit 7c36920ab8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 32
      frontend/src/global_styles/content/user-content/_code-block.sass
  2. 1
      frontend/src/global_styles/content/user-content/_index.sass
  3. 17
      frontend/src/global_styles/content/user-content/_typography.sass
  4. 719
      frontend/src/vendor/ckeditor/ckeditor.js
  5. 2
      frontend/src/vendor/ckeditor/ckeditor.js.map
  6. 12
      spec/features/wysiwyg/macros/code_block_macro_spec.rb

@ -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

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

@ -46,23 +46,6 @@
@include user-content-children @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 .op-uc-link
color: var(--content-link-color) color: var(--content-link-color)
font-size: 1em font-size: 1em

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

Loading…
Cancel
Save