Issue #3228778 by nod_, Wim Leers: Drupal-specific CKEditor 5 plugins should be able to use Drupal's JS translation API: Drupal.t()
(cherry picked from commit 6ec3148701)
merge-requests/776/merge
Lauri Eskola
parent
4711b76420
commit
d672dfa5b9
File diff suppressed because one or more lines are too long
|
|
@ -60,7 +60,6 @@ export default class DrupalLinkMediaUI extends Plugin {
|
|||
*/
|
||||
_createToolbarLinkMediaButton() {
|
||||
const { editor } = this;
|
||||
const { t } = editor;
|
||||
|
||||
editor.ui.componentFactory.add('drupalLinkMedia', (locale) => {
|
||||
const button = new ButtonView(locale);
|
||||
|
|
@ -69,7 +68,7 @@ export default class DrupalLinkMediaUI extends Plugin {
|
|||
|
||||
button.set({
|
||||
isEnabled: true,
|
||||
label: t('Link media'),
|
||||
label: Drupal.t('Link media'),
|
||||
icon: linkIcon,
|
||||
keystroke: LINK_KEYSTROKE,
|
||||
tooltip: true,
|
||||
|
|
|
|||
|
|
@ -29,11 +29,11 @@ export default class DrupalMediaEditing extends Plugin {
|
|||
}
|
||||
const { previewURL, themeError } = options;
|
||||
this.previewURL = previewURL;
|
||||
this.labelError = this.editor.t('Preview failed');
|
||||
this.labelError = Drupal.t('Preview failed');
|
||||
this.themeError =
|
||||
themeError ||
|
||||
`
|
||||
<p>${this.editor.t(
|
||||
<p>${Drupal.t(
|
||||
'An error occurred while trying to preview the media. Please save your work and reload this page.',
|
||||
)}<p>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -18,11 +18,10 @@ export default class DrupalMediaToolbar extends Plugin {
|
|||
|
||||
afterInit() {
|
||||
const editor = this.editor;
|
||||
const { t } = editor;
|
||||
const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
|
||||
|
||||
widgetToolbarRepository.register('drupalMedia', {
|
||||
ariaLabel: t('Drupal Media toolbar'),
|
||||
ariaLabel: Drupal.t('Drupal Media toolbar'),
|
||||
items: editor.config.get('drupalMedia.toolbar') || [],
|
||||
// Get the selected image or an image containing the figcaption with the selection inside.
|
||||
getRelatedElement: (selection) => getSelectedDrupalMediaWidget(selection),
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default class DrupalMediaUI extends Plugin {
|
|||
const buttonView = new ButtonView(locale);
|
||||
|
||||
buttonView.set({
|
||||
label: editor.t('Insert Drupal Media'),
|
||||
label: Drupal.t('Insert Drupal Media'),
|
||||
icon: mediaIcon,
|
||||
tooltip: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -58,14 +58,13 @@ export default class MediaImageTextAlternativeUi extends Plugin {
|
|||
*/
|
||||
_createButton() {
|
||||
const editor = this.editor;
|
||||
const t = editor.t;
|
||||
|
||||
editor.ui.componentFactory.add('mediaImageTextAlternative', (locale) => {
|
||||
const command = editor.commands.get('mediaImageTextAlternative');
|
||||
const view = new ButtonView(locale);
|
||||
|
||||
view.set({
|
||||
label: t('Override media image text alternative'),
|
||||
label: Drupal.t('Override media image text alternative'),
|
||||
icon: icons.lowVision,
|
||||
tooltip: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@ export default class TextAlternativeFormView extends View {
|
|||
constructor(locale) {
|
||||
super(locale);
|
||||
|
||||
const t = this.locale.t;
|
||||
|
||||
/**
|
||||
* Tracks information about the DOM focus in the form.
|
||||
*/
|
||||
|
|
@ -45,7 +43,7 @@ export default class TextAlternativeFormView extends View {
|
|||
* A button used to submit the form.
|
||||
*/
|
||||
this.saveButtonView = this._createButton(
|
||||
t('Save'),
|
||||
Drupal.t('Save'),
|
||||
icons.check,
|
||||
'ck-button-save',
|
||||
);
|
||||
|
|
@ -55,7 +53,7 @@ export default class TextAlternativeFormView extends View {
|
|||
* A button used to cancel the form.
|
||||
*/
|
||||
this.cancelButtonView = this._createButton(
|
||||
t('Cancel'),
|
||||
Drupal.t('Cancel'),
|
||||
icons.cancel,
|
||||
'ck-button-cancel',
|
||||
'cancel',
|
||||
|
|
@ -160,13 +158,12 @@ export default class TextAlternativeFormView extends View {
|
|||
* Labeled field view instance.
|
||||
*/
|
||||
_createLabeledInputView() {
|
||||
const t = this.locale.t;
|
||||
const labeledInput = new LabeledFieldView(
|
||||
this.locale,
|
||||
createLabeledInputText,
|
||||
);
|
||||
|
||||
labeledInput.label = t('Override text alternative');
|
||||
labeledInput.label = Drupal.t('Override text alternative');
|
||||
|
||||
return labeledInput;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<?php
|
||||
|
||||
declare(strict_types = 1);
|
||||
|
||||
namespace Drupal\Tests\ckeditor5\FunctionalJavascript;
|
||||
|
||||
use Drupal\language\Entity\ConfigurableLanguage;
|
||||
use Drupal\Tests\media\Traits\MediaTypeCreationTrait;
|
||||
|
||||
/**
|
||||
* Tests for CKEditor 5 plugins using Drupal's translation system.
|
||||
*
|
||||
* @group ckeditor5
|
||||
* @internal
|
||||
*/
|
||||
class JSTranslationTest extends CKEditor5TestBase {
|
||||
|
||||
use MediaTypeCreationTrait;
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected static $modules = [
|
||||
'language',
|
||||
'locale',
|
||||
'media_library',
|
||||
];
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function setUp(): void {
|
||||
parent::setUp();
|
||||
|
||||
// Create a sample media entity to be embedded.
|
||||
$this->createMediaType('image', ['id' => 'image', 'label' => 'Image']);
|
||||
}
|
||||
|
||||
/**
|
||||
* Integration test to ensure that CKEditor 5 Plugins translations are loaded.
|
||||
*/
|
||||
public function test(): void {
|
||||
$page = $this->getSession()->getPage();
|
||||
$assert_session = $this->assertSession();
|
||||
|
||||
$this->createNewTextFormat($page, $assert_session);
|
||||
$this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-drupalMedia'));
|
||||
$this->click('#edit-filters-media-embed-status');
|
||||
$assert_session->assertWaitOnAjaxRequest();
|
||||
$this->triggerKeyUp('.ckeditor5-toolbar-item-drupalMedia', 'ArrowDown');
|
||||
$assert_session->assertWaitOnAjaxRequest();
|
||||
$this->saveNewTextFormat($page, $assert_session);
|
||||
|
||||
$langcode = 'fr';
|
||||
ConfigurableLanguage::createFromLangcode($langcode)->save();
|
||||
$this->config('system.site')->set('default_langcode', $langcode)->save();
|
||||
|
||||
// Visit a page that will trigger a JavaScript file parsing for
|
||||
// translatable strings.
|
||||
$this->drupalGet('node/add');
|
||||
$this->assertNotEmpty($assert_session->waitForElement('css', '.ck-editor'));
|
||||
|
||||
// Ensure a string from the CKEditor 5 plugin is picked up by translation.
|
||||
// @see core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediatoolbar.js
|
||||
$locale_storage = $this->container->get('locale.storage');
|
||||
$string = $locale_storage->findString(['source' => 'Drupal Media toolbar', 'context' => '']);
|
||||
$this->assertNotEmpty($string, 'String from JavaScript file saved.');
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue