diff --git a/content/getting-started/10.accessibility.md b/content/getting-started/10.accessibility.md index ec80b484..ca793c85 100644 --- a/content/getting-started/10.accessibility.md +++ b/content/getting-started/10.accessibility.md @@ -17,13 +17,15 @@ You can navigate through Directus Studio entirely with your keyboard. The Skip M - Apply edits in modals/drawers/popovers with `meta` + `enter`. - Cancel/exit modals/drawers/popovers with the `escape` key. -Special shortcuts for the TinyMCE/WYSIWYG Editor: +Special shortcuts for the WYSIWYG editor: -- `alt` + `F10` Focus/jump to toolbar -- Arrow Keys: Navigate left/right through toolbar -- `Esc`: Return to the editor content area +- Use `Tab` to move focus into and through the toolbar, and arrow keys to move between adjacent tools. +- Press `Esc` to return focus to the editor content area. +- Standard formatting shortcuts apply in the content area, for example `meta` + `b` (bold), `meta` + `i` (italic), and `meta` + `k` (insert link). -Read more: https://www.tiny.cloud/docs/tinymce/6/tinymce-and-screenreaders/ + + +The WYSIWYG editor was rebuilt on [Tiptap](https://tiptap.dev) in Directus 12. See the [Version 12 breaking changes](/releases/breaking-changes/version-12#wysiwyg-editor-rebuilt-on-tiptap) for details. ### Things to keep in mind diff --git a/content/guides/01.data-model/3.interfaces.md b/content/guides/01.data-model/3.interfaces.md index ef22d7a9..9a5995c8 100644 --- a/content/guides/01.data-model/3.interfaces.md +++ b/content/guides/01.data-model/3.interfaces.md @@ -87,17 +87,21 @@ Textarea input for longer plain text. ![A What You See Is What You Get (WYSIWYG) form input that has a toolbar for formatting](/img/262f71a7-8cc8-4402-85b9-b80dbc2a60ba.webp) -The What You See Is What You Get (WYSIWYG) editor provides a text area with rich formatting options in the toolbar. - -| Configuration | Options | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Types | `Text` | -| Toolbar | Allows for customization of visible formatting options | -| Folder | Default folder to store uploaded files. Does not affect existing files. | -| Soft Limit | Used to limit the number of characters within the Data Studio. | -| Static Access Token | Token appended to asset URLs when displaying in the editor. | -| Custom Formats | JSON array of formatting that is passed to the `style_formats` config option of the WYSIWYG editor instance. [TinyMCE Documentation](https://www.tiny.cloud/docs/demo/format-custom/) | -| Options Override | JSON object to override the default config option of the WYSIWYG editor instance. [TinyMCE Documentation](https://www.tiny.cloud/docs/configure/) | +The What You See Is What You Get (WYSIWYG) editor provides a text area with rich formatting options in the toolbar. Content is stored as HTML. + +| Configuration | Options | +| ------------------- | ------------------------------------------------------------------------------ | +| Types | `Text` | +| Toolbar | Allows for customization of visible formatting options. | +| Folder | Default folder to store uploaded files. Does not affect existing files. | +| Soft Limit | Used to limit the number of characters within the Data Studio. | +| Static Access Token | Token appended to asset URLs when displaying in the editor. | +| Custom Formats | JSON array of custom formatting styles to add to the editor's formatting menu. | +| Options Override | Deprecated and no longer applied. See the note below. | + +::callout{icon="i-lucide-info"} +**The editor's engine changed in Directus 12.** The WYSIWYG interface is now built on [Tiptap](https://tiptap.dev). Existing fields keep working without migration, but stored HTML is normalized to the editor's supported markup on first edit, and the **Options Override** (`tinymceOverrides`) option is deprecated. See the [Version 12 breaking changes](/releases/breaking-changes/version-12#wysiwyg-editor-rebuilt-on-tiptap) for details. +:: ### Markdown diff --git a/content/releases/2.changelog.md b/content/releases/2.changelog.md index 8a9c6746..4ed1dcff 100644 --- a/content/releases/2.changelog.md +++ b/content/releases/2.changelog.md @@ -10,6 +10,13 @@ Each month, some of the Directus team talk through what’s new including core r [Watch The Changelog on Directus TV.](https://directus.com/tv/the-changelog) +## July 2026 + + + +- Directus 12.2.0 has a potential breaking change: the WYSIWYG (rich text) interface is now built on [Tiptap](https://tiptap.dev) instead of TinyMCE. Existing fields keep working, but stored HTML is normalized to supported markup on first edit and the **Options Override** (`tinymceOverrides`) option is deprecated. See the [Version 12 breaking changes](/releases/breaking-changes/version-12#wysiwyg-editor-rebuilt-on-tiptap). +- Rebuilt the WYSIWYG editor on Tiptap, an actively maintained and license-compatible library, with a redesigned toolbar that collapses overflowing tools into a Show More menu. + ## March 2026 - [Directus 11.16.0](https://github.com/directus/directus/releases/tag/v11.16.0) has some potential breaking changes: existing `draft`-keyed versions have their display name standardized to "Draft"; `@directus/visual-editing` must be updated to v2.0.0; `requestPasswordReset` now returns `Forbidden` for external auth users. diff --git a/content/releases/3.breaking-changes/3.version-12.md b/content/releases/3.breaking-changes/3.version-12.md index 295e9877..02b949f5 100644 --- a/content/releases/3.breaking-changes/3.version-12.md +++ b/content/releases/3.breaking-changes/3.version-12.md @@ -4,6 +4,36 @@ title: Version 12 description: Breaking changes may require action on your part before upgrading. --- +## Version 12.2.0 + + + +### WYSIWYG editor rebuilt on Tiptap + +The WYSIWYG interface (`input-rich-text-html`) has replaced its TinyMCE editor with [Tiptap](https://tiptap.dev). The interface id, option keys, and HTML storage format are unchanged, so existing fields continue to work without migration. Two changes may require action. + +#### Content is normalized on first edit + +The editor's schema now defines which HTML it can represent. When you open an existing value, change it, and save, markup the schema does not support is normalized or removed. This only happens when a field is edited and saved. Values you do not touch are left as they are. + +Most common HTML is preserved, including: + +- Semantic tags such as `
`, `
`, `
`/`
`, `
`/``, `
`/`
`/`
`, ``, and ``. +- `class`, `id`, `data-*`, and `aria-*` attributes on supported elements. + +The following are changed or dropped on save: + +- HTML comments. +- Inline `style` values outside the editor's supported set. +- `