Fix/wysiwyg changes (#8884)

* Only set styling on code-block when editing

* CKEditor fixes

Adds op-uc-figure--content fix for tables,
Adds op-uc-container to preview,

* Left align figure content by default, making the changes in appearance less severe

* Revert wrapping table in op-uc-figure--content in edit mdoe

* Update CSS Classes spec

* Resize figcaption together with image

* Add underlines to headings on wiki pages

* Remove word breaking from tables

* Left align images in editor

* Avoid break inside all figures, including images

* linting

* restrict lines under headings to h1 only

* remove ckeditor changes

* adapt spec to altered l10n string

* revert expected css classes since ckeditor remains unchanged

Co-authored-by: ulferts <jens.ulferts@googlemail.com>

docker-compose.yml

@@ -84,6 +84,7 @@ services:
     command: "npm run serve"
     volumes:
       - ".:/home/dev/openproject"
+      - "../commonmark-ckeditor-build/build/:/home/dev/openproject/frontend/src/vendor/ckeditor/"
     ports:
       - "4200:4200"
     environment:

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

@@ -7,6 +7,7 @@
   width: 100%
   max-width: 100%
   position: relative
+  break-inside: avoid
 
   @include styled-scroll-bar
 
@@ -32,14 +33,14 @@
     flex-shrink: 1
     width: 100%
     display: flex
-    justify-content:  center
+    justify-content:  flex-start
+    overflow: auto
+    max-height: 100%
+
   &--description
     flex-basis: auto
     flex-grow: 1
     flex-shrink: 0
     padding: 0.75rem
-    width: 100%
+    max-width: 100%
     text-align: center
-
-  &.table
-    display: flex !important

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

@@ -1,3 +1,7 @@
 .op-uc-image
   max-width: 100%;
   max-height: 100%;
+
+  // Needed to override built-in ckeditor styles
+  @at-root .op-uc-container .image &
+    margin: 0

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

@@ -14,8 +14,8 @@
 
   &--cell
     text-align: left
+    min-width: 3em;
     padding: 0.75rem
-    word-break: break-all
 
     &:not(:last-child):not([colspan])
       border-right: 1px solid rgba(0, 0, 0, 0.1)

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

@@ -3,7 +3,7 @@
 .op-uc-h3,
 .op-uc-h4,
 .op-uc-h5,
-.op-uc-h6,
+.op-uc-h6
   --falloff: var(--op-uc-heading-falloff)
   color: inherit
   line-height: 1.6em
@@ -19,6 +19,14 @@
   &:hover .op-uc-link_permalink
     display: inline-flex
 
+.op-uc-h1
+  margin-bottom: 0.5rem
+  border-bottom: 1px solid #dadada
+
+  .op-uc-container_reduced-headings
+    border-bottom: none
+    margin-bottom: 0
+
 .op-uc-h1
   font-size: var(--op-uc-heading-base)
 .op-uc-h2
@@ -31,14 +39,14 @@
   font-size: calc(var(--op-uc-heading-base) * var(--falloff) * var(--falloff) * var(--falloff) * var(--falloff))
   
 .op-uc-p
-  font: inherit;
+  font: inherit
   margin: 0
   line-height: 1.6em
   color: inherit
 
 .op-uc-blockquote
   display: block
-  margin: 0;
+  margin: 0
   border-left: 3px solid #e0e0e0
   padding: 0.8rem 1.2rem 0 1.2rem
   overflow: hidden

spec/features/work_packages/new/new_work_package_spec.rb

@@ -308,7 +308,7 @@ describe 'new work package', js: true do
       create_work_package_globally(type_bug, project.name)
 
       date_field = wp_page.edit_field(:combinedDate)
-      date_field.expect_value("no start date - no end date")
+      date_field.expect_value("no start date - no finish date")
 
       click_on 'Cancel'
     end