Unverified Commit d672dfa5 authored by lauriii's avatar lauriii
Browse files

Issue #3228778 by nod_, Wim Leers: Drupal-specific CKEditor 5 plugins should...

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 6ec31487)
parent 4711b764
......@@ -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;
}
......
<?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.');
}
}
Markdown is supported
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