GlennRicaud commented 5 years ago

Changes

From details in https://github.com/enonic/xp/issues/6929 and experiments, I gather that there are 5 modifications.

Change 1: Alignment 6.15: The alignment is stored on the figure element using with a hardcoded style. But from experiments, it was also stored on the image 7.0 There is now in addition an editor class (Why editor class?) stored only on the figure. And the image element does not have this style anymore. Why was this change made? The style value is still present, all the other elements do not have this class.
Change 2: HTML Area styles The HTML Editor does not save the scaling directly on the image anymore, but use a style parameter instead.
Change 3: Custom width A width that will be used on the style parameter of figure. (Can be ignored for this issue as it is an addition)
Change 4: Removal of keepSize In 7.0 you cannot do cropping based on the raw size of the image like in 6.15 (Is that intented?)
Change 5: Original style The original style will make the image be saved as an attachment link rather than an image link
Change 6: No built-in style There is no built-in styles.
Other changes There seems to be other changes like classes "captioned",...

Impacts

These changes should not have any impact on the processing of old data in LIVE/PREVIEW/INLINE mode. The processing of HTML is backward compatible (except 1 bug fix) (Details below in "Comparison of ProcessHTML between 6.15 and 7.0")

The only impact will be on the HTML Editor in Content Studio. When editing old data with the HTML editor, it will not have the correct alignment selected or any style selected Not sure if the display of the editor is backward compatible when displaying EDIT mode.

Solutions:

Solution 1: Make the editor backward compatible

Alignment: If no alignment class, find the alignment based on the style parameter (Since it is still used with the same value)
Style: There is no style by default
- Solution 1.1: Have a field for custom scaling in the editor (More liberty and backward compatibility)
- Solution 1.2: Try to find the equivalent style based on the scale property

Solution 2: Update the data

Alignment: Set the figure's class argument based on the old class or style parameter.
Style: Again there is no style by default. So not sure what to do here. To be discussed.

Editor + ProcessHTML examples

Examples to understand behaviour of the Editor and ProcessHTML in 6.15 (Image has a size of 645x430):

No Crop / No keep size ->
  <img alt="superhero_4.jpg" src="image://32169e70-49e1-444c-a6ac-d38f22438134" style="text-align:justify; width:100%" />
  -> _/image/32169e70-49e1-444c-a6ac-d38f22438134:17bd46164ad329c3a5d1996802e8c33c350006d4/full/superhero_4.jpg

No Crop / Keep size ->
  <img alt="superhero_4.jpg" src="image://32169e70-49e1-444c-a6ac-d38f22438134?keepSize=true" style="text-align:justify; width:auto" />
  -> _/image/32169e70-49e1-444c-a6ac-d38f22438134:17bd46164ad329c3a5d1996802e8c33c350006d4/full/superhero_4.jpg

Cinema / No Keep size ->
  <img alt="superhero_4.jpg" src="image://32169e70-49e1-444c-a6ac-d38f22438134?scale=21:9&amp;size=640" style="text-align:justify; width:100%" />
  -> _/image/32169e70-49e1-444c-a6ac-d38f22438134:17bd46164ad329c3a5d1996802e8c33c350006d4/block-768-324/superhero_4.jpg

Cinema / Keep size ->
  <img alt="superhero_4.jpg" src="image://32169e70-49e1-444c-a6ac-d38f22438134?scale=21:9&amp;keepSize=true" style="text-align:justify; width:auto" />
  -> _/image/32169e70-49e1-444c-a6ac-d38f22438134:17bd46164ad329c3a5d1996802e8c33c350006d4/block-645-270/superhero_4.jpg

Examples to understand behaviour of the Editor and ProcessHTML in 7.0 (Image has a size of 645x430):

No Style
  <img alt="superhero_4.jpg" src="image://32169e70-49e1-444c-a6ac-d38f22438134" />
  -> _/image/32169e70-49e1-444c-a6ac-d38f22438134:17bd46164ad329c3a5d1996802e8c33c350006d4/width-768/superhero_4.jpg

Comparison of ProcessHTML between 6.15 and 7.0.

5 possible cases and their equivalent if processed by 7.0

Process Html Link algo (In 6.15):

  For image links it will generate an Image URL with a specific scaling. The scaling is chosen as following
    If no param -> "full"  (1)    //WARNING: I have been told this is a bug and this behaviour is changed in 7.0.
    If scale param -> "block(W, H)"  (2)
      If keepSize param -> W = Original image width  (2.1)
      Else -> W = 768  (2.2)
    Else (no scale param)
      If keepSize param -> "full"  (3)
      Else -> "width(768)"  (4)   //WARNING: Strange case that is not really reproducible in 6.15.5 since there should not be any other parameter than keepSize and scale...

Process Html Link algo (In 7.0):

  For image links it will generate an Image URL with a specific scaling (AND FILTERING). The scaling is chosen as following:
    GetImageStyle
    GetAspectRatio
    If aspect ratio -> "block(W, H)" (2)
      If keepSize param -> W = Original image width (2.1)
      Else -> W = 768 (2.2)
    If keepSize param -> "full" (3)
    Else -> "width(768)" (1) (4)
  GetImageStyle:
    If style param -> Return style with this name
  GetAspectRatio:
    If image style with aspect ratio -> Return it
    Else if scale param -> Return it
  The filtering is chosen as following:
    If image style with filtering -> Return it

Conclusion: Today processHtml is fully backward compatible with 6.15 data. With this exception of the case of "no parameter" that should use "width(768)" (defined as a bug).

GlennRicaud commented 5 years ago

After meeting with Alan:

Migration:

Do alignment as defined in https://github.com/enonic/xp/issues/6929
- But keep style attribute
Do keepSize as defined in https://github.com/enonic/xp/issues/6929

Html Editor:

Pass unknown arguments (scale/keepSize) to the src attribute generated

GlennRicaud commented 5 years ago

Edit: The style has actually changed: Justify: No style Left: style="float: left; width: 40%;" Centered: style="margin: auto; width: 60%;" Right: style="float: right; width: 40%;"

The correct mapping is the following 6.X: <figure style="float:left; margin:15px; width:40%"> 7.0: <figure class="editor-align-left" style="float: left; width: 40%;">

6.X: <figure style="float:right; margin:15px; width:40%"> 7.0: <figure class="editor-align-right" style="float: right; width: 40%;">

6.X: <figure style="float:none; margin:auto; width:60%"> 7.0: <figure class="editor-align-center" style="margin: auto; width: 60%;">

6.X: <figure class="justify"> 7.0: <figure class="editor-align-justify">

GlennRicaud commented 5 years ago

Remaining to do on monday:

In the loop doing the gathering of processedReferences: Use algo from String:replaceAll and replace all image link with as only parameter keepSize by an attachment URL
in XSLT transformation, create second template for all figures where the attribute class is appended
" editor-style-original" if it contains a sub element img with a src starting with media://

GlennRicaud commented 5 years ago

If there was a keepSize, the width was not set on the style of the figure. Adapt to check startWith ""float:left; margin:15px" rather than equals "float:left; margin:15px; width:40%"

GlennRicaud commented 5 years ago

https://github.com/enonic/agile-dev/issues/16#issuecomment-467396768

enonic / xp

Dump migration - HTML Areas - HTML Area Styles #6962

Changes

Impacts

Solutions:

Editor + ProcessHTML examples

Comparison of ProcessHTML between 6.15 and 7.0.