tinymce-docs/_includes/release-notes/51new-features.md

The following new features were added to the {{site.productname}} 5.1 version.

### Mobile

{{site.productname}} 5.1 provides an improved mobile editor, replacing the existing mobile editor with a touch friendly version on the silver theme.

The new mobile experience comes with a number of user interface changes in addition to the {{site.productname}} "desktop" experience:

* [Mobile devices now use the `silver` theme](#mobiledevicesnowusethesilvertheme).
* [Horizontal contextual menus on mobile](#horizontalcontextualmenusonmobile).
* [Side-scrolling toolbars on mobile](#side-scrollingtoolbarsonmobile).
* [Contextual keyboard settings](#contextualkeyboardsettings).
* [New mobile defaults for selected settings](#newmobiledefaultsforselectedsettings).
* [Table cell selection on mobile](#tablecellselectiononmobile).
* [Touch-friendly split buttons](#touch-friendlysplitbuttons).

The new mobile experience allows most of the {{site.productname}} plugins to work on mobile devices, except for:

* [Comments]({{site.baseurl}}/plugins/comments/).
* [Image tools]({{site.baseurl}}/plugins/imagetools/).
* [MoxieManager]({{site.baseurl}}/plugins/moxiemanager/).
* [Paste]({{site.baseurl}}/plugins/paste/).
* [Permanent Pen]({{site.baseurl}}/plugins/permanentpen/).
* [Print]({{site.baseurl}}/plugins/print/).

To ensure the mobile editor functions as intended, add the following `meta` tag to the `head` of pages using {{site.productname}}.

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

> Note: iPads do not use the `mobile` part of the {{site.productname}} init configuration. This is due to a constraint added by Apple to return the environment as a "desktop environment" for iPads. iPads users will receive the other changes to touch functionality, such as context toolbars and context menus.

#### Mobile devices now use the `silver` theme
The mobile experience provided for {{site.productname}} 4.7 through {{site.productname}} 5.0 has been deprecated in {{site.productname}} 5.1.

| **Legacy mobile experience**<br />( {{site.productname}} 4.7 through {{site.productname}} 5.0 ) | **New mobile experience**<br />( {{site.productname}} 5.1 + )                              |
| ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| ![{{site.productname}} legacy mobile experience]({{site.baseurl}}/images/legacy_mobile_exp.png) | ![{{site.productname}} 5.1+ mobile experience]({{site.baseurl}}/images/5_1_mobile_exp.png) |


To revert to the legacy mobile theme, add the mobile theme to the {{site.productname}} configuration, such as:

```js
tinymce.init({
  mobile: {
    theme: 'mobile'
  }
});
```

> **Note:** No enhancements have been made to the legacy mobile theme. all the changes described in these release notes relate to the `silver` theme on mobile devices.

For information on:
* Using the `silver` theme for mobile, see: [TinyMCE Mobile]({{site.baseurl}}/mobile/).
* Using the legacy `mobile` theme, see: [TinyMCE Mobile - The legacy mobile theme]({{site.baseurl}}/mobile/#thelegacymobiletheme).

#### Horizontal contextual menus on mobile
Contextual menus are now mobile friendly, with an update to be horizontal on mobile devices. Contextual menus will open when a long-press is used on mobile devices. They also [side-scroll](#side-scrollingtoolbarsonmobile) to allow larger lists of items to be available on mobile devices.

For example:

<img alt="Example of the side-scrolling toolbar and contextual toolbar" src="{{site.baseurl}}/images/side-scrolling-context-toolbar.png" style="display:block;margin-left:auto;margin-right:auto;max-width:50%;border: 1px solid #036DD5" />

#### Side-scrolling toolbars on mobile
Toolbars and [horizontal menus](#horizontalcontextualmenusonmobile) side-scroll using "swipe" gestures on mobile devices. This allows longer toolbars to be used without occupying too much screen space. This feature removes the need for a toolbar drawer on mobile devices.

#### Contextual keyboard settings
A new `inputMode` configuration setting for dialog components has been added to provide contextual onscreen keyboards on mobile devices. Dialogs in {{site.productname}}, the core {{site.productname}} plugins, and the premium {{site.productname}} plugins have been updated to use `inputMode`.

For information on using `inputMode`, see: [Dialog components - `inputMode`]({{site.baseurl}}/ui-components/dialogcomponents/#inputmode).

#### New mobile defaults for selected settings
These mobile-specific default values have been set to disable unsupported settings for mobile devices or to provide the best experience without configuration from developers.

The following settings have mobile-specific default values:

* [`menubar`]({{site.baseurl}}/configure/editor-appearance/#menubar) - defaults to `false` on mobile phones.
* [`toolbar_drawer`]({{site.baseurl}}/configure/editor-appearance/#toolbar_drawer) - defaults to `false` on mobile devices. The toolbar will [side-scroll by default](#sidescrollingtoolbarsonmobile).
* [`toolbar_sticky`]({{site.baseurl}}/configure/editor-appearance/#toolbar_sticky) - Sticky Toolbar is not supported on mobile devices and defaults to `false`.
* [`table_grid`]({{site.baseurl}}/plugins/table/#table_grid) - Table grid is not supported on mobile devices and defaults to `false`. When creating tables on mobile, a dialog is shown instead of the table grid.
* [`resize`]({{site.baseurl}}/configure/editor-appearance/#resize) - Resizing is not supported on mobile devices and defaults to `false`.
* [`object_resizing`]({{site.baseurl}}/configure/advanced-editing-behavior/#object_resizing) - Object resizing is not supported on mobile devices and defaults to `false`.

To override these mobile defaults, add the setting to the `mobile` configuration, such as:

```js
tinymce.init({
  selector: 'textarea',
  mobile: {
    menubar: true
  }
});
```

#### Table cell selection on mobile
The [table plugin]({{site.baseurl}}/plugins/table/) has been updated to provide _touch selection handles_ on touch devices. The touch selection handles allow users to select a range of table cells on touch devices.

For example:

<img alt="Touch selector handles for selecting multiple table cells" src="{{site.baseurl}}/images/table_cell_touch_selector_handles.png" style="display:block;margin-left:auto;margin-right:auto;max-width:50%;border: 1px solid #036DD5" />

#### Touch-friendly split buttons
The styling on [split buttons]({{site.baseurl}}/ui-components/typesoftoolbarbuttons/#splitbutton) has been updated to include more padding so they are easier to interact with on touch devices.


### Sticky Toolbar

A Sticky Toolbar (or Docking Toolbar), docks the toolbar and the menu to the top of the screen when scrolling down a web page until the editor is no longer visible.

For information on the Sticky Toolbars, see: [Enabling Sticky Toolbars]({{site.baseurl}}/configure/editor-appearance/#toolbar_sticky).

### General changes

#### Changes to the Env API for platform detection
New platform detection functions have been added to the [`Env` API]({{site.baseurl}}/api/tinymce/tinymce.env/), allowing for some older detection properties to be deprecated.

##### New Env API properties

| Property          | Type   | Description                                                   |
| ----------------- | ------ | ------------------------------------------------------------- |
| `browser.current` | String | Returns the current browser name.                             |
| `browser.version` | Object | Returns the current browser major and minor version.          |
| `os.current`      | String | Returns the current operating system name.                    |
| `os.version`      | Object | Returns the current operating system major and minor version. |

##### New Env methods

| Method                 | Type    | Description                                                          |
| ---------------------- | ------- | -------------------------------------------------------------------- |
| `browser.isEdge`       | Boolean | Returns `true` if the user's browser is Microsoft Edge.              |
| `browser.isChrome`     | Boolean | Returns `true` if the user's browser is Google Chrome.               |
| `browser.isIE`         | Boolean | Returns `true` if the user's browser is Microsoft Internet Explorer. |
| `browser.isOpera`      | Boolean | Returns `true` if the user's browser is Opera.                       |
| `browser.isFirefox`    | Boolean | Returns `true` if the user's browser is Firefox.                     |
| `browser.isSafari`     | Boolean | Returns `true` if the user's browser is Safari.                      |
| `os.isWindows`         | Boolean | Returns `true` if the user's operating system is Microsoft Windows.  |
| `os.isiOS`             | Boolean | Returns `true` if the user's operating system is iOS.                |
| `os.isAndroid`         | Boolean | Returns `true` if the user's operating system is Android.            |
| `os.isOSX`             | Boolean | Returns `true` if the user's operating system is Mac OS X.           |
| `os.isLinux`           | Boolean | Returns `true` if the user's operating system is Linux.              |
| `os.isSolaris`         | Boolean | Returns `true` if the user's operating system is Solaris.            |
| `os.isFreeBSD`         | Boolean | Returns `true` if the user's operating system is FreeBSD.            |
| `deviceType.isDesktop` | Boolean | Returns `true` if the user's device is a desktop device.             |
| `deviceType.isiPad`    | Boolean | Returns `true` if the user's device is an iPad.                      |
| `deviceType.isiPhone`  | Boolean | Returns `true` if the user's device is an iPhone.                    |
| `deviceType.isPhone`   | Boolean | Returns `true` if the user's device is a phone.                      |
| `deviceType.isTablet`  | Boolean | Returns `true` if the user's device is a tablet.                     |
| `deviceType.isTouch`   | Boolean | Returns `true` if the user's device is a touch device.               |
| `deviceType.isWebView` | Boolean | Returns `true` if the user's device is a WebView device.             |

For a list of deprecated `Env` APIs, see: [Deprecated API Properties - `tinymce.Env`](#deprecatedapiproperties-tinymceenv).

#### Added new `referrer_policy` setting
Used for setting the level referrer information sent when loading plugins and CSS. Referrer policies can be used to:

* Improve the privacy of end-users.
* Assist with server-side filtering of cross-origin requests for {{site.productname}} resources.

For information on using the `referrer_policy` setting, see: [Integration and setup options - `referrer_policy`]({{site.baseurl}}/configure/integration-and-setup/#referrer_policy).

#### Added a dark content css skin
A dark `content_css` skin has been added to compliment the dark user interface skin.

For example:

{% include codepen.html id="dark-mode" %}

For information on using the dark version of the default skin, see: [Customizing the editor UI - Skins]({{site.baseurl}}/general-configuration-guide/customize-ui/#skins).

#### Added border width to Table cell dialog
The table plugin has been updated to include a **Border width** field in the table **Cell dialog**. The field will accept any [valid CSS length](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Lengths).

For example:

<img alt="Cell Properties Dialog with new Border Width field" src="{{site.baseurl}}/images/border-width-cell-props.png" style="display:block;margin-left:auto;margin-right:auto;max-width:50%;border: 1px solid #036DD5" />

#### Changed the default `toolbar_drawer` to `floating`
The default for the `toolbar_drawer` setting has been changed from `false` to `floating`. For information on the `toolbar_drawer` setting, see: [User interface options - `toolbar_drawer`]({{site.baseurl}}/configure/editor-appearance/#toolbar_drawer).

#### Icon changes
In {{site.productname}} 5.0, the same icon (`paragraph`) was used for the toolbar buttons `visualchars` and `visualblocks`.
To improve the user experience:

* The `paragraph` icon has been renamed `visualchars` and is used for the `visualchars` toolbar button: ![`paragraph` renamed to `visualchars`]({{site.baseurl}}/images/icons/visualchars.svg)
* A new `visualblocks` icon is used for the `visualblocks` toolbar button: ![New visualblocks icon]({{site.baseurl}}/images/icons/visualblocks.svg)

#### Fixes to the positioning of inline dialogs and menus
Fixes for inline dialogs and menus have been included to:

* Position inline dialogs correctly when the page is scrolled.
* Reposition inline dialogs and menus when resizing {{site.productname}}.

### Premium Plugins

#### PowerPaste
The {{site.productname}} 5.1 release includes **PowerPaste** 5.2.0.

**PowerPaste** _5.0_ included a change to the `Remove Formatting` functionality to filter out inline style elements (such as `strong`, `b`, `em`, `i`, and `sub`), in-line with other editor functionality.

**PowerPaste** _5.1.1_ **reverses the _5.0_ change** and includes a new `powerpaste_clean_filtered_inline_elements` setting. This setting accepts a list of inline style elements to be filtered. These inline elements will be filtered on `clean` or `Remove Formatting` paste.

To retain the _5.0_ default inline style element filter, add the following setting to `tinymce.init`:
```js
powerpaste_clean_filtered_inline_elements: 'strong,em,b,i,u,strike,sup,sub,font'
```

For information on `powerpaste_clean_filtered_inline_elements`, see: [PowerPaste - `powerpaste_clean_filtered_inline_elements`]({{site.baseurl}}/plugins/powerpaste/#powerpaste_clean_filtered_inline_elements).

#### Page Embed
The {{site.productname}} 5.1 release includes **Page Embed** 1.0.1.

**Page Embed** 1.0.1 has been updated to include a touch event listener to allow embedded media to execute on mobile platforms.

#### Format Painter
The {{site.productname}} 5.1 release includes **Format Painter** 1.2.0.

**Format Painter** 1.2.0 has been updated to support the mobile platforms. The **Format Painter** will now function as expected for mobile users.

#### Checklist
The {{site.productname}} 5.1 release includes **Checklist** 1.0.1.

**Checklist** 1.0.1 includes a fix to allow checklist items to be toggled on an iPad.

#### Mentions
The {{site.productname}} 5.1 release includes **Mentions** 2.1.0.

**Mentions** 2.1.0 has been updated to allow for the inclusion of "extra" menu items, such as additional results or search items. For details, see: [Mentions - `mentions_fetch`]({{site.baseurl}}/plugins/mentions/#mentions_fetch).