TINY-11147: Merge remote-tracking branch 'origin/main' into release/7

.changes/unreleased/acid-TINY-11291-2024-10-09.yaml

@@ -0,0 +1,6 @@
+project: acid
+kind: Changed
+body: Moved aria-label from RGB Form label to input
+time: 2024-10-09T15:34:58.784641+11:00
+custom:
+  Issue: TINY-11291

.changes/unreleased/tinymce-GH-9599-2024-07-25.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Added
+body: Added support for using raw CSS in the list of possible colours, using the `color_map_raw` property.
+time: 2024-07-25T10:42:28.314139+08:00
+custom:
+  Issue: GH-9788

.changes/unreleased/tinymce-TINY-11137-2024-10-01.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Fixed
+body: The `toolbar-sticky-offset` would still be applied after entering fullscreen mode.
+time: 2024-10-01T16:27:44.670057+02:00
+custom:
+  Issue: TINY-11137

.changes/unreleased/tinymce-TINY-11153-2024-10-03.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Fixed
+body: Closing a nested modal dialog would lose focus from the editor.
+time: 2024-10-03T05:39:21.982118585+02:00
+custom:
+  Issue: TINY-11153

.changes/unreleased/tinymce-TINY-11217-2024-09-10.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Added
+body: Added new default `li` element styles to the content CSS to prevent child list elements from inheriting certain parent list item styles.
+time: 2024-09-10T21:52:35.043994+10:00
+custom:
+  Issue: TINY-11217

.changes/unreleased/tinymce-TINY-11273-2024-09-24.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Fixed
+body: Autocompleter would not activate after applying an inline format like font size in some cases.
+time: 2024-09-24T18:14:17.009975+02:00
+custom:
+  Issue: TINY-11273

.changes/unreleased/tinymce-TINY-11291-2024-10-09.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Improved
+body: Improved color picker aria support.
+time: 2024-10-09T15:35:37.979796+11:00
+custom:
+  Issue: TINY-11291

.changes/unreleased/tinymce-TINY-11313-2024-10-01.yaml

@@ -0,0 +1,7 @@
+project: tinymce
+kind: Fixed
+body: Text and background color toolbar buttons would not be fully greyed out in readonly
+  mode.
+time: 2024-10-01T18:11:07.535161+02:00
+custom:
+  Issue: TINY-11313

.changes/unreleased/tinymce-TINY-11395-2024-10-17.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Fixed
+body: Inability to type '{' character on German keyboard layouts.
+time: 2024-10-17T12:00:38.34871+11:00
+custom:
+  Issue: TINY-11395

SECURITY.md

@@ -18,7 +18,7 @@ Tiny Technologies, Inc. supports the following community versions of TinyMCE:
 
 | Version | Supported                      |
 |---------| ------------------------------ |
-| 7.3.x   | ✔                       |
+| 7.4.x   | ✔                       |
 | 6.8.x   | ✔                       |
 | 5.10.x  | ✖                       |
 | Other   | ✖                       |

build.properties

@@ -1 +1 @@
-primaryBranch=release/7
+primaryBranch=main

modules/acid/src/main/ts/ephox/acid/gui/components/RgbForm.ts

@@ -134,15 +134,16 @@ const rgbFormFactory = (
     const helptext = translate(translatePrefix + 'range');
 
     const pLabel = FormField.parts.label({
-      dom: { tag: 'label', attributes: { 'aria-label': description }},
+      dom: { tag: 'label' },
       components: [ GuiFactory.text(label) ]
     });
 
     const pField = FormField.parts.field({
       data,
       factory: Input,
       inputAttributes: {
-        type: 'text',
+        'type': 'text',
+        'aria-label': description,
         ...name === 'hex' ? { 'aria-live': 'polite' } : {}
       },
       inputClasses: [ getClass('textfield') ],

modules/oxide/src/less/skins/content/default/content.less

@@ -79,3 +79,4 @@ code {
     padding-right: 1rem;
   }
 }
+

modules/oxide/src/less/skins/ui/dark/content.less

@@ -21,3 +21,5 @@ body {
 table {
   border-collapse: collapse;
 }
+
+@color-active: @color-tint;

modules/oxide/src/less/skins/ui/dark/skin.less

@@ -32,4 +32,4 @@
 
 @edit-area-border-color: #FFFFFF;
 
-@color-active: darken(desaturate(@color-tint, 20%), 5%);
+@color-active: @color-tint;

modules/oxide/src/less/theme/components/comments/comment.less

@@ -2,10 +2,10 @@
 // Tiny Comments
 //
 
-@comment-selected-background-color: lighten(@color-active, 30%);
+@comment-selected-background-color: contrast(@text-color, lighten(@color-active, 30%), mix(@color-active, @color-black, 20%));
 @comment-selected-border-color: @color-active;
 
-@comment-background-color: contrast(@background-color, @background-color, lighten(@background-color, 5%));
+@comment-background-color: @background-color;
 @comment-border-radius: @panel-border-radius;
 @comment-border: 1px solid @border-color;
 @comment-box-shadow: 0 4px 8px 0 fade(@color-black, 10%);
@@ -255,7 +255,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
-    margin-top: @pad-md;
+    margin-top: @pad-sm;
   }
 
   .tox-comment__gradient::after {

modules/oxide/src/less/theme/components/statusbar/statusbar.less

@@ -59,7 +59,6 @@
     flex: 1 1 auto;
     height: @statusbar-text-height;
     justify-content: space-between;
-    overflow: hidden;
 
     @media @breakpoint-gt-sm {
       &.tox-statusbar__text-container-3-cols > .tox-statusbar__help-text,

modules/oxide/src/less/theme/components/toolbar-button/toolbar-split-button.less

@@ -3,7 +3,7 @@
 //
 
 @toolbar-split-button-chevron-touch-padding: 4px;
-@toolbar-split-color-preview-opacity: 0.6;
+@toolbar-split-color-preview-opacity: 0.3;
 
 .tox {
   .tox-split-button {
@@ -92,8 +92,8 @@
     }
   }
 
-  .tox-split-button.tox-tbtn--disabled svg #tox-icon-text-color__color,
-  .tox-split-button.tox-tbtn--disabled svg #tox-icon-highlight-bg-color__color {
+  .tox-split-button.tox-tbtn--disabled svg .tox-icon-text-color__color,
+  .tox-split-button.tox-tbtn--disabled svg .tox-icon-highlight-bg-color__color {
     opacity: @toolbar-split-color-preview-opacity;
   }
 }

modules/oxide/src/less/theme/content-ui.less

@@ -26,3 +26,4 @@
 @import 'content/table/table';
 @import 'content/visualblocks/visualblocks';
 @import 'content/visualchars/visualchars';
+@import 'content/list/list';

modules/oxide/src/less/theme/content/comments/comments.less

@@ -2,10 +2,10 @@
 // Comments
 //
 
-@document-comment-color: lighten(@color-active, 20%); 
+@document-comment-color: if(@content-ui-darkmode = true, mix(@color-active, @color-black, 20%), lighten(@color-active, 20%)); 
 @document-comment-active-color: @color-active;
 @document-comment-background-color: @document-comment-color;
-@document-comment-active-background-color: @document-comment-active-color;
+@document-comment-active-background-color: if(@content-ui-darkmode = true, mix(@color-active, @color-black, 20%), @document-comment-active-color);
 @document-comment-outline-color: @document-comment-color;
 @document-comment-active-outline-color: @document-comment-active-color;
 @document-comment-outline-width: @object-block-selected-outline-width;

modules/oxide/src/less/theme/content/list/list.less

@@ -0,0 +1,17 @@
+//
+// List
+//
+
+li {
+  & when (@content-ui-darkmode = true) {
+    color: @color-white
+  }
+
+  & when (@content-ui-darkmode = false) {
+    color: @color-black
+  }
+  background-color: transparent;
+  font-style: normal;
+  font-weight: normal;
+  font-family:  @font-stack;
+}

modules/tinymce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinymce",
-  "version": "7.4.2",
+  "version": "7.5.0",
   "private": true,
   "repository": {
     "type": "git",

modules/tinymce/src/core/demo/ts/demo/FullDemo.ts

@@ -125,7 +125,19 @@ export default (): void => {
     toolbar: 'undo redo sidebar1 fontsizeinput | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | align lineheight fontsize fontfamily blocks styles insertfile | styles | ' +
     'bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons table codesample code language | ltr rtl',
     contextmenu: 'link linkchecker image table lists configurepermanentpen',
-
+    color_map_raw: [
+      'var(--black)', 'Black',
+      'var(--gray)', 'Gray',
+      'var(--white)', 'White',
+      'var(--red)', 'Red',
+      'var(--yellow)', 'Yellow',
+      'var(--green)', 'Green',
+      'var(--blue)', 'Blue',
+      'hsb(0, 100%, 100%)', 'White hsb',
+      'hsl(0, 100%, 50%)', 'Red hsl',
+      '#ff00ff', 'Pink', // Example of adding a custom color
+      '#00ffff', 'Cyan'
+    ],
     // Multiple toolbar array
     // toolbar: ['undo redo sidebar1 align fontsize insertfile | fontfamily blocks styles insertfile | styles | bold italic',
     // 'alignleft aligncenter alignright alignjustify | print preview media | forecolor backcolor emoticons table codesample code | ltr rtl',

modules/tinymce/src/core/main/ts/api/NotificationManager.ts

@@ -155,10 +155,16 @@ const NotificationManager = (editor: Editor): NotificationManager => {
       });
     });
 
-    editor.addShortcut('alt+F12', 'Focus to notification', () =>
-      getTopNotification()
-        .map((notificationApi) => SugarElement.fromDom(notificationApi.getEl()))
-        .each((elm) => Focus.focus(elm)));
+    editor.on('keydown', (e) => {
+      // TODO: TINY-11429 Remove this once we remove the use of keycodes
+      const isF12 = e.key?.toLowerCase() === 'f12' || e.keyCode === 123;
+      if (e.altKey && isF12) {
+        e.preventDefault();
+        getTopNotification()
+          .map((notificationApi) => SugarElement.fromDom(notificationApi.getEl()))
+          .each((elm) => Focus.focus(elm));
+      }
+    });
   };
 
   registerEvents(editor);

modules/tinymce/src/core/main/ts/autocomplete/AutocompleteUtils.ts

@@ -9,4 +9,4 @@ export const getText = (rng: Range): string =>
   Zwsp.trim(rng.toString().replace(/\u00A0/g, ' '));
 
 export const isWhitespace = (chr: string): boolean =>
-  chr !== '' && ' \u00a0\f\n\r\t\v'.indexOf(chr) !== -1;
+  chr !== '' && ' \u00a0\ufeff\f\n\r\t\v'.indexOf(chr) !== -1;

modules/tinymce/src/core/test/ts/browser/NotificationManagerTest.ts

@@ -2,7 +2,7 @@ import { FocusTools } from '@ephox/agar';
 import { afterEach, beforeEach, context, describe, it } from '@ephox/bedrock-client';
 import { Arr } from '@ephox/katamari';
 import { Focus, Insert, Remove, SugarElement, SugarShadowDom } from '@ephox/sugar';
-import { LegacyUnit, TinyContentActions, TinyDom, TinyHooks } from '@ephox/wrap-mcagar';
+import { LegacyUnit, TinyDom, TinyHooks } from '@ephox/wrap-mcagar';
 import { assert } from 'chai';
 
 import Editor from 'tinymce/core/api/Editor';
@@ -151,7 +151,12 @@ describe('browser.tinymce.core.NotificationManagerTest', () => {
 
         const hasFocus = (node: Node) => Focus.search(SugarElement.fromDom(node)).isSome();
 
-        TinyContentActions.keystroke(editor, 123, { alt: true });
+        editor.getBody().dispatchEvent(new KeyboardEvent('keydown', {
+          key: 'F12',
+          altKey: true,
+          bubbles: true
+        }));
+
         await FocusTools.pTryOnSelector('Assert focus should be on notification 1', root, '.tox-notification');
         assert.isTrue(hasFocus(n1.getEl()), 'Focus should be on notification 1');