Release notes for Optimizely CMS and Customized Commerce updates

Steps to reproduce:

1. Create an Alloy site
2. Go to On Page Edit mode and click an overlay for an XhtmlString property.
3. Switch to all properties edit.
4. Open a TinyMCE dialog in the editor, e.g. code or codesample.
5. Switch back to On Page Edit.
6. Click the overlay for the XhtmlString property again.
7. Open a TinyMCE dialog in the editor, e.g. code or codesample.

It can also be reproduced by opening the edit modes in the opposite order APE -> OPE -> APE. The key is loading editors in both APE/OPE before opening the first dialog.

Expected
The dialog is displayed correctly.

Actual
Dialog is broken and unusable.

Steps to reproduce

1. Edit an XhtmlString property using the TinyMce editor.
2. Capture an image (Image1) to the Clipboard (e.g., open an image file in Paint then copy its content).
3. Paste the image into the TinyMce editor > A new media item is created with the default name "image.png".
4. Repeat steps 2 & 3 above for another image (Image2).

Expected:
Create new media item of Image2.

Actual:
Replace image.png media version (Image1 -> Image2).

Observed: Testing results in standard editor of TinyMce 4.8.2 via https://www.tiny.cloud/docs/demo/full-featured/ as below.
1. When copy & paste the same image content, it results the same Blob image's GUID in img src URL.
2. When copy & paste different image content, it results different Blob image's GUID in img src URL.

  <img src="blob:https://s.codepen.io/71f0c448-da0a-43e1-86f3-b322d9c4d1ba" width="187" height="187" />
  <img src="blob:https://s.codepen.io/71f0c448-da0a-43e1-86f3-b322d9c4d1ba" width="220" height="220" />
  <img src="blob:https://s.codepen.io/f803a890-1cb4-4ff2-be9f-acf8b2ec1762" width="199" height="124" />

Steps to reproduce

1. In MS Edge, open a content item with an XHTML property.
2. Drag and drop an image to the editor.
3. Select image > Go to Media button is displayed.
4. Click this button.

Expected:
It opens the image in edit mode.

Actual:
It opens the image in edit mode but the Go to Media button is still present.

When creating any page / block containing an XHTML property using TinyMCE version 2, if the editor uses full screen mode while in required properties mode, an element of the Episerver interface overlays the editor window.

Steps to reproduce

1) Create a page / block type containing an XHTML property configured to use the full screen TinyMce plugin.
2) Mark the property with a [Required] attribute / mark it as required in Episerver Admin mode.
3) Create a new page / block of that type.
4) Use the full screen tool bar button.

Expected:
The new block area should not be visible.

Actual:
The New block area overlays the text editor window.

Steps to reproduce

1. Create an Editorial block.
2. Go to On-page Edit View or All Properties mode.
3. Drag and drop a content item into the Main body of the block.

Expected:
A content link displays in the Main body.

Actual:
A content link doesn't display in the Main body.

Note:

• Site is deployed from Visual Studio.
• The TinyMCE Toolbar is in the simple form.

Steps to reproduce:
1. Use the MS Edge browser.
2. Open Alloy Plan.
3. Click an image in the Main body XHTML area.

Expected:
Image should be selected and show the "Go to media" button.

Actual:
Selection flickers and becomes unselected. No "Go to media" button is shown.

This is fixed in TinyMCE 4.7.13 so we need to upgrade our dependency.
https://www.tinymce.com/docs/changelog/?ctrl#version4713may162018

Steps to reproduce:
1. Go to CMS Edit mode, open the Alloy Plan page.
2. At the Main body field's editor, click the Fullscreen button.
3. Click the back button to exit Fullscreen mode.
4. Open the Alloy Plan page again.
5. Choose the Content tab.

Expected:
There should be a vertical scroll bar on the right, for the editing window.

Actual:
The vertical scroll bar is disabled and hidden.

Deprecate the Plugins method as it's been causing a lot of misunderstandings and problems. Instead, there is a method called ClearPlugins. Users can use it like this:

.ClearPlugins().AddPlugin("epi-link");

Steps to reproduce

1. Install an empty Alloy site.
2. Set up a block and page:

public class ProductPage
{
   ...
   [Display(Name = "Test Block", Order = 45)]
    public virtual TeaserBlock TestBlock { get; set; }
}
public class TeaserBlock
{
   ...
   [CultureSpecific]
   [Display(
GroupName = SystemTabNames.Content,
Order = 5)]
  public virtual XhtmlString TestXhtmlString { get; set; }
}

3. Set up the TinyMce configuration:

config.Default()
.BlockFormats("Header1=h1")
.ContentCss("/Assets/css/editor.css");
 
config.For<TeaserBlock>(t => t.TestXhtmlString)
.BlockFormats("Header1=h1;Header2=h2")
.ContentCss("/Assets/css/editor.css");

4. Go to "Alloy Plan" page -> "Content" tab and observer the format option of TestXhtmlString.

Expected: Shows 2 formats: h1 and h2

Actual: Only shows 1 format, h1