Skip to content

[7418] RTE control #4822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jvega190 wants to merge 19 commits into
base: develop
Choose a base branch
from
Open

[7418] RTE control #4822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e5593a2
[7418] RTE control updates
jvega190 Mar 11, 2026
40fa66b
Merge branch 'develop' of https://github.com/craftercms/studio-ui int…
Apr 1, 2026
d3951f1
[7418] Add rte validator, remove custom styles
Apr 1, 2026
64ad31a
[7418] Update to show menu bar in guest rte, fix rte editor focus not…
Apr 6, 2026
6e780f7
[7418] Guard against nullish setupId
Apr 6, 2026
9dbc52a
[7418] Update validator
Apr 6, 2026
113b34a
[7418] Update validator
Apr 6, 2026
1826182
[7418] Create loadAceEditorAssets util
Apr 6, 2026
7c6925a
[7418] Fix validator
Apr 6, 2026
cb4f3c1
[7418] Fix validator
Apr 6, 2026
985bc87
[7734] Experience Builder Ignores Content Constraints
Apr 7, 2026
b07c3db
[7734] Add comment
Apr 7, 2026
926fc69
[7734] Check length of actual text (not markup)
Apr 7, 2026
2df9915
Remove unused code (sent as param from XB's rte)
Apr 7, 2026
9a394aa
Prevent duplicate Ace/CSS injection during concurrent mounts.
jvega190 Apr 20, 2026
c50836a
[8635] Sync TinyMCE RTE language automatically with CrafterCMS global…
jvega190 May 7, 2026
969cdbe
Validate optional messages, remove unnecessary isRequired validation
jvega190 May 7, 2026
48b69c4
Merge branch 'develop' of https://github.com/craftercms/studio-ui int…
jvega190 May 7, 2026
b3fd27d
yarn.lock update after merge, update rte validator
jvega190 May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 32 additions & 8 deletions static-assets/js/tinymce-plugins/ace/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,31 @@

(function () {
const PLUGIN_NAME = 'acecode';
const BUTTON_TOOL_TIP = 'Toggle code view mode';

tinymce.addI18n('en', {
'code-editor': 'Code Editor',
'toggle-code-view': 'Toggle code view mode',
fullscreen: 'Fullscreen',
'exit-fullscreen': 'Exit fullscreen'
});
tinymce.addI18n('es', {
'code-editor': 'Editor de Código',
'toggle-code-view': 'Alternar el modo de vista de código',
fullscreen: 'Pantalla completa',
'exit-fullscreen': 'Salir de pantalla completa'
});
tinymce.addI18n('de', {
'code-editor': 'Code-Editor',
'toggle-code-view': 'Codeansichtsmodus umschalten',
fullscreen: 'Vollbild',
'exit-fullscreen': 'Vollbildmodus beenden'
});
tinymce.addI18n('ko_KR', {
'code-editor': '코드 편집기',
'toggle-code-view': '코드 보기 모드 전환',
fullscreen: '전체 화면',
'exit-fullscreen': '전체 화면 종료'
});
Comment thread
jvega190 marked this conversation as resolved.

tinymce.PluginManager.add(PLUGIN_NAME, function (editor, url) {
const aceModes = {
Expand Down Expand Up @@ -52,14 +76,14 @@
let isActive = true;
editor.ui.registry.addButton(PLUGIN_NAME, {
icon: 'sourcecode',
tooltip: BUTTON_TOOL_TIP,
tooltip: editor.translate('toggle-code-view'),
onAction: function () {
onAction(this, editor);
}
});
editor.ui.registry.addMenuItem(PLUGIN_NAME, {
icon: 'sourcecode',
text: 'Code Editor',
text: editor.translate('code-editor'),
onAction: function () {
onAction(this, editor);
}
Expand Down Expand Up @@ -94,12 +118,12 @@
aceContainer.innerHTML =
`<div class="inline-container-header">` +
`<button id="${aceID}-toggleCode" class="acecode-inline-btn toggle" ` +
` title="${BUTTON_TOOL_TIP}" type="button" tabIndex="-1" ` +
` title="${editor.translate('toggle-code-view')}" type="button" tabIndex="-1" ` +
'>' +
icons.sourceCode +
'</button>' +
`<button id="${aceID}-fullscreenMode" class="acecode-inline-btn fullscreen"` +
' title="Fullscreen" type="button" tabIndex="-1"' +
` title="${editor.translate('fullscreen')}" type="button" tabIndex="-1"` +
'>' +
icons.resize +
'</button></div>' +
Expand Down Expand Up @@ -154,7 +178,7 @@

const showDialog = function (editor, fullscreenMode) {
editor.windowManager.open({
title: 'Code Editor',
title: editor.translate('code-editor'),
size: 'large',
body: {
type: 'panel',
Expand All @@ -176,10 +200,10 @@
// Inline mode is the one used in forms (when on ICE inlineMode is set to false to always use modal)
if (inlineMode) {
if (fullscreenMode) {
dialogCloseIcon.setAttribute('title', 'Toggle code view mode');
dialogCloseIcon.setAttribute('title', editor.translate('toggle-code-view'));
dialogCloseIcon.querySelector('.tox-icon').innerHTML = icons.sourceCode;
} else {
dialogCloseIcon.setAttribute('title', 'Exit fullscreen');
dialogCloseIcon.setAttribute('title', editor.translate('exit-fullscreen'));
dialogCloseIcon.querySelector('.tox-icon').innerHTML = icons.resize;
}
}
Expand Down
2 changes: 1 addition & 1 deletion static-assets/js/tinymce-plugins/ace/plugin.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions ui/app/src/components/ContentTypeManagement/descriptors/controls/rte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const rteDescriptor: DescriptorContentType = {
title: defineMessage({ defaultMessage: 'Options' }),
fields: [
'height',
'maxlength',
'autoGrow',
'enableSpellCheck',
'rteConfiguration',
Expand All @@ -53,6 +54,13 @@ export const rteDescriptor: DescriptorContentType = {
defaultValue: undefined,
validations: immutableEmptyObject
},
maxlength: {
id: 'maxlength',
type: 'int',
name: defineMessage({ defaultMessage: 'Max Length' }),
defaultValue: undefined,
validations: immutableEmptyObject
},
autoGrow: {
id: 'autoGrow',
type: 'boolean',
Expand Down
1 change: 1 addition & 0 deletions ui/app/src/components/FormsEngine/FormsEngineDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export function FormsEngineDialog(props: FormsEngineDialogProps) {
maxWidth="xl"
title="Content Form"
data-area-id="forms-engine-dialog-root"
disableEnforceFocus={true} // This allows TinyMCE popups to gain focus (e.g. code editor, needs focus to be able to type in it)
Copy link
Copy Markdown
Member

@rart rart May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit of an issue. Please research MUI's dialog focus manager and talk to the robot to see if there's a way to sort of integrate and inform MUI of a dialog outside the MUI onces and get back to me. Talk to the robots for help too.

>
<FormsEngine
onMinimize={props.onMinimize}
Expand Down
Loading