cedar-embeddable-editor 1.0.15 → 1.1.0

package/README.md

@@ -137,6 +137,7 @@ There are other optional configuration parameters available for controlling vari
   "showHeader": true,
   "showFooter": true,
 
+  "languageMapPathPrefix": null,
   "defaultLanguage": "en",
   "fallbackLanguage": "en",
 
@@ -244,6 +245,65 @@ nonNullRequiredFieldValueCount: int
 isValid: boolean
 ```
 
+### Language Maps / Translations
+
+The application currently has two built-in language maps: `en` and `hu`. If you do not specify any language-related config option, the default `English` map will be used.
+
+If you wish to change the language to another built-in one (currently the only other language is `Hungarian`), specify the config like below:
+
+```json
+{
+  "defaultLanguage": "hu",
+  "fallbackLanguage": "en"
+}
+```
+
+You can use external language maps as well. In order to do this, specify a relative path to a folder containing the language file. The file should be named `x.json`, and should have the identical structure of the language map found in the source of the application:
+
+https://github.com/metadatacenter/cedar-embeddable-editor/blob/main/src/assets/i18n-cee/en.json
+
+In order to use an external language file, specify the config as follows:
+
+```json
+{
+  "languageMapPathPrefix": "/assets/i18n-cee/",
+  "defaultLanguage": "de",
+  "fallbackLanguage": "en"
+}
+```
+
+In the example above we want to use a `German` language file, which is located in the specified directory. Starting the path with `/` makes the path absolute. 
+
+In our case the `/assets/i18n-cee/de.json` will be loaded if present.
+
+If the file is missing, the `/assets/i18n-cee/en.json` will be used.
+
+If that file is also missing, the built-in `de` map would be the next. As this does not exist at this moment, the last option, the built-in `en` map will be used.
+
+Information about the loading process is logged onto the console with the `CEE TRACE` prefix. 
+
+### Listening for changes
+
+If you need to listen to data changes inside the embeddable editor, you can use the existing `change` DOM events. We added custom events in case of a multi-instance add, copy and delete operations, so you can listen to all the events on the instance.
+
+An example in Angular is:
+
+- `component.html`:
+```html
+<cedar-embeddable-editor
+  [config]="conf"
+  [templateObject]="template"
+  [instanceObject]="instance"
+  (change)="logChange($event)"
+></cedar-embeddable-editor>
+```
+
+- `component.ts`:
+```typescript
+  logChange(event) {
+    console.log('CHANGE', event);
+  }
+```
 
 ## Example Applications