Commit c73e97fb authored by Jochen Roth's avatar Jochen Roth Committed by Christian Kuhn
Browse files

[TASK] Use CodeMirror for backend layout code preview

Currently the preview of the generated code for
a backend layout uses only <code> tag.
To streamline the ui this will use the t3editor
if installed to display the generated code

Resolves: #94222
Releases: master
Change-Id: I1df1d03af120c50662ec5806c067b9af49c85dc5
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69308

Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent c2ba4543
......@@ -65,7 +65,8 @@ export class GridEditor {
protected selectorDocHeaderSave: string = '.t3js-grideditor-savedok';
protected selectorDocHeaderSaveClose: string = '.t3js-grideditor-savedokclose';
protected selectorConfigPreview: string = '.t3js-grideditor-preview-config';
protected selectorConfigPreviewButton: string = '.t3js-grideditor-preview-button';
protected selectorPreviewArea: string = '.t3js-tsconfig-preview-area';
protected selectorCodeMirror: string = '.t3js-grideditor-preview-config .CodeMirror';
/**
* Remove all markup
......@@ -91,9 +92,6 @@ export class GridEditor {
this.nameLabel = config !== null ? config.nameLabel : 'Name';
this.columnLabel = config !== null ? config.columnLabel : 'Column';
this.targetElement = $(this.selectorEditor);
$(this.selectorConfigPreview).hide();
$(this.selectorConfigPreviewButton).empty().append(TYPO3.lang['button.showPageTsConfig']);
this.initializeEvents();
this.drawTable();
......@@ -115,7 +113,6 @@ export class GridEditor {
$(document).on('click', this.selectorLinkShrinkLeft, this.linkShrinkLeftHandler);
$(document).on('click', this.selectorLinkExpandDown, this.linkExpandDownHandler);
$(document).on('click', this.selectorLinkShrinkUp, this.linkShrinkUpHandler);
$(document).on('click', this.selectorConfigPreviewButton, this.configPreviewButtonHandler);
}
/**
......@@ -267,23 +264,6 @@ export class GridEditor {
this.writeConfig(this.export2LayoutRecord());
}
/**
*
* @param {Event} e
*/
protected configPreviewButtonHandler = (e: Event) => {
e.preventDefault();
const $preview = $(this.selectorConfigPreview);
const $button = $(this.selectorConfigPreviewButton);
if ($preview.is(':visible')) {
$button.empty().append(TYPO3.lang['button.showPageTsConfig']);
$(this.selectorConfigPreview).slideUp();
} else {
$button.empty().append(TYPO3.lang['button.hidePageTsConfig']);
$(this.selectorConfigPreview).slideDown();
}
}
/**
* Create a new cell from defaultCell
* @returns {Object}
......@@ -306,8 +286,8 @@ export class GridEditor {
config += '\t\t\t' + line + '\n';
}
}
$(this.selectorConfigPreview).find('code').empty().append(
'mod.web_layout.BackendLayouts {\n' +
let content = 'mod.web_layout.BackendLayouts {\n' +
' exampleKey {\n' +
' title = Example\n' +
' icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif\n' +
......@@ -315,8 +295,17 @@ export class GridEditor {
config.replace(new RegExp('\t', 'g'), ' ') +
' }\n' +
' }\n' +
'}\n',
'}\n';
$(this.selectorConfigPreview).find(this.selectorPreviewArea).empty().append(
content
);
// Update CodeMirror content if instantiated
const codemirror: any = document.querySelector(this.selectorCodeMirror);
if (codemirror) {
codemirror.CodeMirror.setValue(content)
}
}
/**
......
......@@ -16,6 +16,7 @@
namespace TYPO3\CMS\Backend\Form\Element;
use TYPO3\CMS\Core\TypoScript\Parser\TypoScriptParser;
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
use TYPO3\CMS\Core\Utility\GeneralUtility;
/**
......@@ -67,6 +68,34 @@ class BackendLayoutWizardElement extends AbstractFormElement
$fieldWizardHtml = $fieldWizardResult['html'];
$resultArray = $this->mergeChildReturnIntoExistingResult($resultArray, $fieldWizardResult, false);
// Use CodeMirror if available
if (ExtensionManagementUtility::isLoaded('t3editor')) {
$codeMirrorConfig = [
'label' => $lang->getLL('buttons.pageTsConfig'),
'panel' => 'top',
'mode' => 'TYPO3/CMS/T3editor/Mode/typoscript/typoscript',
'nolazyload' => 'true',
'options' => GeneralUtility::jsonEncodeForHtmlAttribute([
'height' => 'auto',
'readOnly' => 'true'
], false),
];
$editor = '
<typo3-t3editor-codemirror class="t3js-grideditor-preview-config grideditor-preview" ' . GeneralUtility::implodeAttributes($codeMirrorConfig, true) . '>
<textarea class="t3js-tsconfig-preview-area"></textarea>
</typo3-t3editor-codemirror>';
$resultArray['stylesheetFiles'][] = 'EXT:t3editor/Resources/Public/JavaScript/Contrib/codemirror/lib/codemirror.css';
$resultArray['stylesheetFiles'][] = 'EXT:t3editor/Resources/Public/Css/t3editor.css';
$resultArray['requireJsModules'][] = ['TYPO3/CMS/T3editor/Element/CodeMirrorElement' => null];
} else {
$editor = '
<label>' . htmlspecialchars($lang->getLL('buttons.pageTsConfig')) . '</label>
<div class="t3js-grideditor-preview-config grideditor-preview">
<textarea class="t3js-tsconfig-preview-area form-control" rows="25"></textarea>
</div>';
}
$json = (string)json_encode($this->rows, JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS);
$html = [];
$html[] = '<div class="formengine-field-item t3js-formengine-field-item">';
......@@ -135,8 +164,7 @@ class BackendLayoutWizardElement extends AbstractFormElement
$html[] = '</tr>';
$html[] = '<tr>';
$html[] = '<td colspan="2">';
$html[] = '<a href="#" class="btn btn-default btn-sm t3js-grideditor-preview-button"></a>';
$html[] = '<pre class="t3js-grideditor-preview-config grideditor-preview"><code></code></pre>';
$html[] = $editor;
$html[] = '</td>';
$html[] = '</tr>';
$html[] = '</table>';
......
......@@ -127,12 +127,6 @@ Have a nice day.</source>
<trans-unit id="login.donate" resname="login.donate">
<source>Donate</source>
</trans-unit>
<trans-unit id="button.showPageTsConfig" resname="button.showPageTsConfig">
<source>Show PageTS-Config</source>
</trans-unit>
<trans-unit id="button.hidePageTsConfig" resname="button.hidePageTsConfig">
<source>Hide PageTS-Config</source>
</trans-unit>
<trans-unit id="formEngine.databaseRecordErrorInlineChildChild" resname="formEngine.databaseRecordErrorInlineChildChild">
<source>The record with uid %2$s from table %1$s could not be retrieved from the database. This data inconsistency can occur if
a base record has been deleted but the intermediate record from table %3$s with uid %4$s still points to it. To fix
......
......@@ -135,6 +135,9 @@
<trans-unit id="buttons.reviewFailedValidationFields" resname="buttons.reviewFailedValidationFields">
<source>Review fields with failed validations</source>
</trans-unit>
<trans-unit id="buttons.pageTsConfig" resname="buttons.pageTsConfig">
<source>PageTS Config</source>
</trans-unit>
</body>
</file>
</xliff>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment