feat(Localize Selected): add LocalizeItAction for localizing selected…

[JPilson]

Feature: Localize Selected Text

Body:

Implement a new feature for the IntelliJ IDEA plugin named LocalizeItAction. The main objective of Localize Action is to localize the selected text within the editor without having to open the plugin to add a new one. The action flow should

follow:

1. User Selects a Text (String Value).
2. User Invokes the menu , and Select the Localize-it option.
3. If valid, showcase a dialog to add the selected text as a localized string key to the project.
4. Then user can update the keys and translation

Should the selected text be empty or the project null, the action will be dismissed and do nothing.

The LocalizeItAction class extends the IntelliJ IDEA's AnAction class

[marhali]

Hello, thanks for your contribution ✌️

There is already a quick action to create a new translation from within the code editor. Right-Click > Show Context Actions > Extract translation or ⌥ + ↵ > Extract translation

This action should target all literal expressions and support both key and value extraction. Let me now, if this is something we should add on top of it :)

[JPilson]

Hello, thanks for your contribution ✌️

There is already a quick action to create a new translation from within the code editor. Right-Click > Show Context Actions > Extract translation or ⌥ + ↵ > Extract translation

This action should target all literal expressions and support both key and value extraction. Let me now, if this is something we should add on top of it :)

Hey, thanks for quick reply I never noticed that there was something in the context actions, but I just noticed that it does not work inside template in a Vue project....

<template>
    <Btn text="Select" @click="getPicks"/>
</template>

If wanted to extract Select from the Btn the extract is not available maybe that something it should have.

What do you think we have it available inside the Vue Template ?

[srcmkr]

@JPilson Can confirm this for Angular project, WebStorm 2023.3

[JPilson]

So ,. @marhali shall I adpt it to work on templates?

[marhali]

Yes, the context-based approach might be missing some cases to support translation extraction (e.g. XmlText, XmlAttributeValue, ...).

Your approach with the general "Localize it" action is always based on the selected text, right? I'm open to a discussion on how this functionality should be implemented/extended.

[marhali]

@JPilson Can confirm this for Angular project, WebStorm 2023.3

Is this a complete example? Wouldn't you also need to call an i18n service? For example $i18n.t(...) ?

[JPilson]

Yes indeed , I would have to replace the selected string with i18n.t() , I can work on it in the coming days

[srcmkr]

Is this a complete example? Wouldn't you also need to call an i18n service? For example $i18n.t(...) ?

Sure, for ngx-translate there are common two ways:

In HTML by "pipe": {{'modal.connect.message_placeholder'|translate}}

For example:

<button (click)="ExecuteSearch()" class="btn btn-primary">
    {{'buttons.button_search'|translate}}
</button>

with Parameter: {{'modal.connect.message_placeholder'|translate: {key: value} }} JSON: "message_placeholder": "I want to use {{key}}"

in Typescript / Code behind:

export class MyClass {
  constructor( private translate:TranslateService ) {}
  ...
  myFunction(value: string) {
    let translatedString = this.translate.instant('modal.connect.message_placeholder');
    let parameterTranslate = this.translate.instant('modal.connect.message_placeholder', {key: value} ),
  }
}

Both options are often used within one component (HTML + code behind).

[JPilson]

@marhali these last commits brings the following changes:

Implement selectable text replacement with i18n keys

Add i18n flavor template setting

• Adds component: flavorTemplate in ProjectSettingsState The flavorTemplate has been introduced in ProjectSettingsState to allow developers to customize the i18n string replacement format. In addition, the LocalizeItAction class has been simplified by refactoring commented details into JavaDocs and adding methods to replace selected text and build replacement strings. A new utility class, DocumentUtil, checks the document type during string replacement.
  • This new component allows developers to customize the i18n string replacement format.

This is valid for Vue, JS/TS... but not for Angular. Based on what @srcmkr shared it seems that Angular deals with i18n in bit diff way so this solution still needs to properly support Angular.

ABOUT UNIT TESTs NO tests were written yet , but If that is needed before this solution is used I can do it on the next weekend.

[marhali]

I will integrate this into the main branch... I18n flavour template is definitely a useful feature - thanks 👍

[JPilson]

@marhali my pleasure to contribute