@lblod/ember-rdfa-editor-lblod-plugins 10.0.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +25 -1
  2. package/README.md +62 -24
  3. package/addon/components/snippet-plugin/search-modal.ts +4 -0
  4. package/addon/components/snippet-plugin/snippet-insert.hbs +1 -0
  5. package/addon/components/snippet-plugin/snippet-insert.ts +1 -0
  6. package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.hbs +80 -0
  7. package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.ts +98 -0
  8. package/addon/components/snippet-plugin/snippet-list/snippet-list-view.hbs +29 -0
  9. package/addon/components/snippet-plugin/snippet-list/snippet-list-view.ts +28 -0
  10. package/addon/components/snippet-plugin/snippet-list-select.hbs +16 -0
  11. package/addon/components/snippet-plugin/snippet-list-select.ts +27 -0
  12. package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.hbs +1 -1
  13. package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts +16 -55
  14. package/addon/components/variable-plugin/address/edit.hbs +35 -0
  15. package/addon/components/variable-plugin/address/edit.ts +96 -0
  16. package/addon/components/variable-plugin/address/insert.hbs +9 -0
  17. package/addon/components/variable-plugin/address/insert.ts +37 -0
  18. package/addon/components/variable-plugin/address/nodeview.hbs +19 -0
  19. package/addon/components/variable-plugin/address/nodeview.ts +31 -0
  20. package/addon/components/variable-plugin/number/insert.hbs +8 -6
  21. package/addon/components/variable-plugin/number/insert.ts +10 -0
  22. package/addon/components/variable-plugin/number/nodeview.hbs +2 -2
  23. package/addon/components/variable-plugin/utils/label-input.hbs +3 -3
  24. package/addon/helpers/in-array.ts +13 -0
  25. package/addon/plugins/snippet-plugin/index.ts +20 -0
  26. package/addon/plugins/snippet-plugin/utils/fetch-data.ts +117 -9
  27. package/addon/plugins/table-of-contents-plugin/nodes/table-of-contents.ts +23 -17
  28. package/addon/plugins/table-of-contents-plugin/utils/index.ts +1 -1
  29. package/addon/plugins/variable-plugin/utils/address-helpers.ts +112 -0
  30. package/addon/plugins/variable-plugin/variables/address.ts +322 -0
  31. package/addon/plugins/variable-plugin/variables/index.ts +1 -0
  32. package/addon/plugins/variable-plugin/variables/text.ts +1 -1
  33. package/addon/utils/constants.ts +7 -0
  34. package/addon/utils/namespace.ts +11 -0
  35. package/app/components/snippet-plugin/snippet-list/snippet-list-modal.js +1 -0
  36. package/app/components/snippet-plugin/snippet-list/snippet-list-view.js +1 -0
  37. package/app/components/snippet-plugin/snippet-list-select.js +1 -0
  38. package/app/components/{address-plugin/insert.js → variable-plugin/address/edit.js} +1 -1
  39. package/app/components/variable-plugin/address/insert.js +1 -0
  40. package/app/components/variable-plugin/address/nodeview.js +1 -0
  41. package/app/helpers/in-array.js +4 -0
  42. package/app/styles/snippet-plugin.scss +11 -0
  43. package/components/snippet-plugin/search-modal.d.ts +1 -0
  44. package/components/snippet-plugin/snippet-insert.d.ts +1 -0
  45. package/components/snippet-plugin/snippet-list/snippet-list-modal.d.ts +23 -0
  46. package/components/snippet-plugin/snippet-list/snippet-list-view.d.ts +10 -0
  47. package/components/snippet-plugin/snippet-list-select.d.ts +14 -0
  48. package/components/table-of-contents-plugin/ember-nodes/table-of-contents.d.ts +5 -12
  49. package/components/variable-plugin/address/edit.d.ts +23 -0
  50. package/components/variable-plugin/address/insert.d.ts +11 -0
  51. package/components/variable-plugin/address/nodeview.d.ts +14 -0
  52. package/components/variable-plugin/number/insert.d.ts +2 -0
  53. package/helpers/in-array.d.ts +9 -0
  54. package/package.json +4 -4
  55. package/plugins/snippet-plugin/index.d.ts +11 -0
  56. package/plugins/snippet-plugin/utils/fetch-data.d.ts +10 -1
  57. package/plugins/table-of-contents-plugin/utils/index.d.ts +1 -1
  58. package/plugins/variable-plugin/utils/address-helpers.d.ts +4 -0
  59. package/plugins/variable-plugin/variables/address.d.ts +23 -0
  60. package/plugins/variable-plugin/variables/index.d.ts +1 -0
  61. package/plugins/variable-plugin/variables/text.d.ts +0 -2
  62. package/translations/en-US.yaml +29 -3
  63. package/translations/nl-BE.yaml +28 -2
  64. package/types/global.d.ts +7 -0
  65. package/utils/constants.d.ts +3 -0
  66. package/utils/namespace.d.ts +1 -0
  67. package/addon/components/address-plugin/insert.hbs +0 -47
  68. package/addon/components/address-plugin/insert.ts +0 -100
  69. package/addon/components/address-plugin/types.ts +0 -26
  70. package/addon/components/address-plugin/utils.ts +0 -59
  71. package/components/address-plugin/insert.d.ts +0 -21
  72. package/components/address-plugin/types.d.ts +0 -25
  73. package/components/address-plugin/utils.d.ts +0 -9
package/CHANGELOG.md CHANGED
@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [11.0.0] - 2023-08-22
11
+
12
+ ### Added
13
+ - GN-4261: addition of an address variable
14
+ - GN-4262: addition of WGS84 coordinates to address variables
15
+ - Introduce internationalization in the table of contents node based on the document language.
16
+ - The whole table of contents node (include its entries) is now exported in its `serialize` method without the need of an `entries` attribute.
17
+ - GN-4461: update readme to specify needed imports for template comment
18
+
19
+ ### Changed
20
+ - Use one-way-binding in variable label input
21
+ - Use one-way-binding in number variable inputs
22
+ - Manage snippet list connection with template
23
+
24
+ ### Fixed
25
+ - GN-4404: ensure number-variable placeholders are consistent
26
+
27
+ ### Breaking
28
+ - Removal of old address-plugin
29
+ - Removal of the `entries` attribute from the table-of-contents prosemirror node. The node can now generate it's own outline in its `serialize` method.
30
+ ### Dependencies
31
+ - Bumps `@codemirror/view` from 6.12.0 to 6.16.0
32
+
10
33
  ## [10.0.0] - 2023-08-08
11
34
  ### Changed
12
35
  - remove unused code from template comment component
@@ -652,7 +675,7 @@ add onclick handler to pencil icon in variable plugin
652
675
 
653
676
  # Changelog
654
677
 
655
- [unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...HEAD
678
+ [unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v11.0.0...HEAD
656
679
  [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
657
680
  [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
658
681
  [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -668,6 +691,7 @@ add onclick handler to pencil icon in variable plugin
668
691
  [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
669
692
  [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
670
693
  [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
694
+ [11.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...v11.0.0
671
695
  [10.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.1...v10.0.0
672
696
  [9.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.0...v9.1.1
673
697
  [9.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.2...v9.1.0
package/README.md CHANGED
@@ -30,7 +30,6 @@ This addon contains the following editor plugins:
30
30
  * [table-of-contents-plugin](#table-of-contents-plugin)
31
31
  * [variable-plugin](#variable-plugin)
32
32
  * [validation-plugin](#validation-plugin)
33
- * [address-plugin](#address-plugin)
34
33
  * [template-comments-plugin](#template-comments-plugin)
35
34
 
36
35
  You can configure your editor like this:
@@ -203,7 +202,7 @@ This plugin needs to be added to the toolbar as a dropdown with the following sy
203
202
  <BesluitTypePlugin::ToolbarDropdown @controller={{this.controller}} @options={{this.config.besluitType}}/>
204
203
  ```
205
204
 
206
- You can need to specify the endpoint from which the plugin will fetch the types
205
+ You need to specify the endpoint from which the plugin will fetch the types in the config object
207
206
  ```js
208
207
  {
209
208
  endpoint: 'https://centrale-vindplaats.lblod.info/sparql',
@@ -261,7 +260,7 @@ Same goes for the `CitationInsert` component
261
260
  ```
262
261
 
263
262
 
264
- Being this.citationPlugin a tracked reference to the plugin created with the function exported from the package and the wished configuration
263
+ Make `this.citationPlugin` a tracked reference to the plugin created with the function exported from the package and the wished configuration
265
264
  ```js
266
265
  import { citationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
267
266
 
@@ -371,7 +370,7 @@ This plugin provides a card to modify dates that needs to be added to the editor
371
370
  @options={{this.config.date}}/>
372
371
  ```
373
372
 
374
- And a insert button to insert new dates that needs to be added to the insert part of the sidebar:
373
+ And an insert button to insert new dates that needs to be added to the insert part of the sidebar:
375
374
  ```hbs
376
375
  <RdfaDatePlugin::Insert
377
376
  @controller={{this.controller}}
@@ -397,17 +396,20 @@ inside an editor document.
397
396
  This plugin provides a card that needs to be added to the editor sidebar like:
398
397
 
399
398
  ```hbs
400
- <RoadsignRegulationPlugin::RoadsignRegulationCard @controller={{this.controller}}/>
399
+ <RoadsignRegulationPlugin::RoadsignRegulationCard
400
+ @controller={{this.controller}}
401
+ @options={{this.config.roadsignRegulation}}
402
+ />
401
403
  ```
402
404
 
403
- You will need to set the following configuration
405
+ You will need to set the following configuration in the config object
404
406
  ```js
405
407
  {
406
408
  endpoint: 'https://dev.roadsigns.lblod.info/sparql',
407
409
  imageBaseUrl: 'https://register.mobiliteit.vlaanderen.be/',
408
410
  }
409
411
  ```
410
- The `endpoint` from where the plugin will fetch the roadsigns, and the `imageBaseUrl` is a fallback for the images that don't have a baseUrl specified, probably you won't need it if your data is correctly constructed
412
+ The `endpoint` from where the plugin will fetch the roadsigns, and the `imageBaseUrl` is a fallback for the images that don't have a baseUrl specified, probably you won't need it if your data is correctly constructed.
411
413
 
412
414
  ## standard-template-plugin
413
415
 
@@ -447,7 +449,7 @@ In order to enable the plugin you need to add the table of contents button to th
447
449
  <TableOfContentsPlugin::ToolbarButton @controller={{this.editor}}/>
448
450
  ```
449
451
 
450
- ```
452
+ ```js
451
453
  tableOfContentsView(this.config.tableOfContents)(controller),
452
454
  ```
453
455
  ### Configuring the plugin with a custom config
@@ -466,6 +468,26 @@ For very custom setups, the plugin might be unable to find your scrollContainer
466
468
  },
467
469
  ```
468
470
 
471
+ ### Internationalization of the table of contents
472
+ The dynamic version of the table of contents is internationalized based on the current document language and using the `ember-intl` service.
473
+ The static (serialized) version of the table of contents can also be internationalized based on the current document language. For this to work correctly, the `emberApplication` prosemirror-plugin should be present.
474
+ You can add this plugin as follows to the controller/component in which the editor is initialized:
475
+ ```js
476
+ import { getOwner } from '@ember/application';
477
+ import { emberApplication } from '@lblod/ember-rdfa-editor/plugins/ember-application';
478
+ ...
479
+ plugins = [
480
+ ...
481
+ emberApplication(getOwner(this));
482
+ ...
483
+ ];
484
+ ...
485
+ ```
486
+ As an example, the `emberApplication` plugin has been added to the regulatory-statement route of the dummy app included in this addon.
487
+
488
+ The table of contents node needs this plugin to be able to translate the serialized version properly. If the plugin is not present, a default (dutch) version of the table of contents will be generated.
489
+
490
+
469
491
  ## variable-plugin
470
492
 
471
493
  Editor plugin which provides node-specs and components which allow you to insert and edit different types of variables in a document. The plugin provides the following variable types:
@@ -474,6 +496,7 @@ Editor plugin which provides node-specs and components which allow you to insert
474
496
  - date variable
475
497
  - codelist
476
498
  - location
499
+ - address
477
500
 
478
501
  Additional variable types can be added in the consuming application or addon.
479
502
 
@@ -488,6 +511,8 @@ import {
488
511
  numberView,
489
512
  text_variable,
490
513
  textVariableView,
514
+ address,
515
+ addressView
491
516
  } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
492
517
  ```
493
518
 
@@ -503,6 +528,7 @@ This addon includes an insert-component for each of these variable types:
503
528
  - `variable-plugin/date/insert`
504
529
  - `variable-plugin/location/insert`
505
530
  - `variable-plugin/codelist/insert`
531
+ - `variable-plugin/address/insert`
506
532
 
507
533
  Each of these components presents a custom UI which allows a user to insert a variable of the corresponding type in a document.
508
534
 
@@ -635,32 +661,39 @@ get codelistEditOptions() {
635
661
  }
636
662
  ```
637
663
 
664
+ #### The address variable
665
+ This addon provides a seperate edit component which allows users to search for an address and update the select address variable. Additionally, they can also choose whether to include the housenumber of an address.
666
+ You can add this edit-component to a template as follows:
667
+ ```hbs
668
+ <VariablePlugin::Address::Edit @controller={{this.controller}}/>
669
+ ```
670
+
638
671
  ## validation-plugin
639
672
 
640
673
  see [the plugin docs](addon/plugins/validation/README.md)
641
674
 
642
- ## address-plugin
643
-
644
- Editor plugin which allows you to insert address based on information from
645
-
646
- - https://basisregisters.vlaanderen.be/api/v1/adressen
647
- - https://geo.api.vlaanderen.be/geolocation/v4/Location
648
-
649
- For enabling it, you need to add the card provided by the plugin to the editor sidebar
650
-
651
- ```hbs
652
- <AddressPlugin::Insert @controller={{this.controller}} />
653
- ```
654
-
655
675
  ## template-comments-plugin
656
676
  A plugin to insert a template comment anywhere in the document.
657
677
  This is meant as a block of text for extra information to provide to a created template. It has
658
678
  the attribute `ext:TemplateComment`. This can (and should) be filtered out when publishing the document, as it is only meant as extra information while filling in a template.
659
- It supports basic text with indenting, list items and the marks.
679
+ It supports basic text with indenting, list items and marks.
660
680
 
661
- Add it to editor by adding `templateComment` to your schema and `templateComment: templateCommentView(controller)` as a nodeview.
681
+ Add it to editor by adding `templateComment` to your schema and
682
+ ```js
683
+ templateComment: templateCommentView(controller),
684
+ ```
685
+ as a nodeview.
662
686
 
663
- Logic to insert a template comment is added with
687
+ Import with:
688
+ ```js
689
+ import {
690
+ templateComment,
691
+ templateCommentView,
692
+ } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/template-comments-plugin';
693
+ ```
694
+
695
+
696
+ Button to insert a template comment is added with
664
697
  ```hbs
665
698
  <TemplateCommentsPlugin::Insert @controller={{this.controller}}/>
666
699
  ```
@@ -669,6 +702,11 @@ Buttons to remove and move it when selected can be shown with
669
702
  ```hbs
670
703
  <TemplateCommentsPlugin::EditCard @controller={{this.controller}}/>
671
704
  ```
705
+
706
+ Template comments have a specific style that can be imported in the stylesheet with
707
+ ```css
708
+ @import 'template-comments-plugin';
709
+ ```
672
710
  ## Contributing
673
711
 
674
712
  See the [Contributing](CONTRIBUTING.md) guide for details.
@@ -11,6 +11,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
11
11
 
12
12
  interface Args {
13
13
  config: SnippetPluginConfig;
14
+ assignedSnippetListsIds: string[];
14
15
  closeModal: () => void;
15
16
  }
16
17
 
@@ -61,6 +62,8 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
61
62
  abortSignal: abortController.signal,
62
63
  filter: {
63
64
  name: this.inputSearchText ?? undefined,
65
+ assignedSnippetListIds:
66
+ this.args.assignedSnippetListsIds ?? undefined,
64
67
  },
65
68
  pagination: {
66
69
  pageNumber: this.pageNumber,
@@ -83,6 +86,7 @@ export default class SnippetPluginSearchModalComponent extends Component<Args> {
83
86
  this.inputSearchText,
84
87
  this.pageNumber,
85
88
  this.pageSize,
89
+ this.args.assignedSnippetListsIds,
86
90
  ]);
87
91
 
88
92
  @action
@@ -14,4 +14,5 @@
14
14
  @closeModal={{this.closeModal}}
15
15
  @config={{this.config}}
16
16
  @onInsert={{this.onInsert}}
17
+ @assignedSnippetListsIds={{@assignedSnippetListsIds}}
17
18
  />
@@ -9,6 +9,7 @@ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plug
9
9
  interface Args {
10
10
  controller: SayController;
11
11
  config: SnippetPluginConfig;
12
+ assignedSnippetListsIds: string[];
12
13
  }
13
14
 
14
15
  export default class SnippetInsertComponent extends Component<Args> {
@@ -0,0 +1,80 @@
1
+ <AuModal
2
+ @modalOpen={{@open}}
3
+ @closeModal={{this.closeModal}}
4
+ @title={{t 'snippet-plugin.snippet-list.modal.title'}}
5
+ @size='large'
6
+ @padding='none'
7
+ as |modal|
8
+ >
9
+ <modal.Body>
10
+ <AuMainContainer class='snippet-modal--main-container' as |mc|>
11
+ <mc.sidebar>
12
+ <div class='au-c-sidebar'>
13
+ <div class='au-c-sidebar__content au-u-padding'>
14
+ <AuHeading @level='3' @skin='4' class='au-u-padding-bottom-small'>
15
+ {{t 'snippet-plugin.snippet-list.modal.search.title'}}
16
+ </AuHeading>
17
+ <AuLabel
18
+ class='au-margin-bottom-small'
19
+ for='searchTerm'
20
+ @inline={{false}}
21
+ @required={{false}}
22
+ @error={{false}}
23
+ @warning={{false}}
24
+ >
25
+ {{t 'snippet-plugin.snippet-list.modal.search.label'}}
26
+ </AuLabel>
27
+ <AuNativeInput
28
+ @type='text'
29
+ @width='block'
30
+ id='searchTerm'
31
+ value={{this.searchText}}
32
+ placeholder={{t 'snippet-plugin.snippet-list.modal.search.placeholder'}}
33
+ {{on 'input' this.setInputSearchText}}
34
+ />
35
+ </div>
36
+ </div>
37
+ </mc.sidebar>
38
+ <mc.content @scroll={{true}}>
39
+ <div class='au-u-padding-top snippet-modal--list-container'>
40
+ {{#if this.snippetListResource.isRunning}}
41
+ <div class='au-u-margin'>
42
+ <AuLoader @padding='large' />
43
+ <span class='au-u-hidden-visually'>
44
+ {{t 'snippet-plugin.alert.loading'}}
45
+ </span>
46
+ </div>
47
+ {{else}}
48
+ {{#if this.error}}
49
+ <SnippetPlugin::Helpers::AlertLoadError @error={{this.error}} />
50
+ {{else}}
51
+ {{#if this.snippetListResource.value.length}}
52
+ <SnippetPlugin::SnippetList::SnippetListView
53
+ @snippetLists={{this.snippetListResource.value}}
54
+ @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
55
+ @onChange={{this.onChange}}
56
+ />
57
+ {{else}}
58
+ <SnippetPlugin::Helpers::AlertNoItems />
59
+ {{/if}}
60
+ {{/if}}
61
+ {{/if}}
62
+ </div>
63
+ <AuToolbar @border='top' @size='large' @nowrap={{true}} @reverse={{true}}>
64
+ <AuButtonGroup>
65
+ <AuButton @skin='secondary' {{on 'click' this.closeModal}}>
66
+ {{t 'snippet-plugin.snippet-list.modal.button.cancel'}}
67
+ </AuButton>
68
+ <AuButton
69
+ @skin='primary'
70
+ {{on 'click' this.saveAndClose}}
71
+ @disabled={{@onSaveSnippetListIds.isRunning}}
72
+ >
73
+ {{t 'snippet-plugin.snippet-list.modal.button.update'}}
74
+ </AuButton>
75
+ </AuButtonGroup>
76
+ </AuToolbar>
77
+ </mc.content>
78
+ </AuMainContainer>
79
+ </modal.Body>
80
+ </AuModal>
@@ -0,0 +1,98 @@
1
+ import Component from '@glimmer/component';
2
+ import { assert } from '@ember/debug';
3
+ import { action } from '@ember/object';
4
+ import { restartableTask, Task, timeout } from 'ember-concurrency';
5
+ import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
6
+
7
+ import { tracked } from '@glimmer/tracking';
8
+
9
+ import { fetchSnippetLists } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/fetch-data';
10
+
11
+ import {
12
+ SnippetPluginConfig,
13
+ SnippetList,
14
+ } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
15
+
16
+ interface Args {
17
+ config: SnippetPluginConfig;
18
+ onSaveSnippetListIds: Task<Promise<void>, [snippetIds: string[]]>;
19
+ assignedSnippetListsIds: string[];
20
+ closeModal: () => void;
21
+ }
22
+
23
+ export default class SnippetListModalComponent extends Component<Args> {
24
+ // Filtering
25
+ @tracked inputSearchText: string | null = null;
26
+
27
+ // Display
28
+ @tracked error: unknown;
29
+
30
+ @tracked assignedSnippetListsIds: string[] = [
31
+ ...this.args.assignedSnippetListsIds,
32
+ ];
33
+
34
+ get config() {
35
+ return this.args.config;
36
+ }
37
+
38
+ get searchText() {
39
+ return this.inputSearchText;
40
+ }
41
+
42
+ @action
43
+ setInputSearchText(event: InputEvent) {
44
+ assert(
45
+ 'inputSearchText must be bound to an input element',
46
+ event.target instanceof HTMLInputElement,
47
+ );
48
+
49
+ this.inputSearchText = event.target.value;
50
+ }
51
+
52
+ @action
53
+ closeModal() {
54
+ this.args.closeModal();
55
+ }
56
+
57
+ @action
58
+ async saveAndClose() {
59
+ await this.snippetListResource.cancel();
60
+
61
+ await this.args.onSaveSnippetListIds.perform(this.assignedSnippetListsIds);
62
+ this.args.closeModal();
63
+ }
64
+
65
+ snippetListSearch = restartableTask(async () => {
66
+ await timeout(500);
67
+
68
+ const abortController = new AbortController();
69
+
70
+ try {
71
+ const queryResult = await fetchSnippetLists({
72
+ endpoint: this.args.config.endpoint,
73
+ abortSignal: abortController.signal,
74
+ filter: {
75
+ name: this.inputSearchText ?? undefined,
76
+ },
77
+ });
78
+
79
+ return queryResult.results;
80
+ } catch (error) {
81
+ this.error = error;
82
+ return [];
83
+ } finally {
84
+ abortController.abort();
85
+ }
86
+ });
87
+
88
+ snippetListResource = trackedTask<SnippetList[]>(
89
+ this,
90
+ this.snippetListSearch,
91
+ () => [this.inputSearchText],
92
+ );
93
+
94
+ @action
95
+ onChange(assignedSnippetListsIds: string[]) {
96
+ this.assignedSnippetListsIds = assignedSnippetListsIds;
97
+ }
98
+ }
@@ -0,0 +1,29 @@
1
+ <AuHeading @level='3' @skin='4'>
2
+ {{t 'snippet-plugin.snippet-list.modal.subtitle'}}
3
+ </AuHeading>
4
+ {{#if @snippetLists.length}}
5
+ <div class="snippet-lists-table">
6
+ <AuTable class="snippet-lists-table">
7
+ <:header>
8
+ <tr>
9
+ <th class="selectColumn">{{t 'snippet-plugin.snippet-list.modal.table.select'}}</th>
10
+ <th>{{t 'snippet-plugin.snippet-list.modal.table.list'}}</th>
11
+ </tr>
12
+ </:header>
13
+ <:body>
14
+ {{#each @snippetLists as |snippetList|}}
15
+ <tr>
16
+ <td class="selectColumn">
17
+ <AuControlCheckbox
18
+ @identifier={{snippetList.label}}
19
+ @onChange={{fn this.onChange snippetList.id}}
20
+ @checked={{in-array @assignedSnippetListsIds snippetList.id}}
21
+ />
22
+ </td>
23
+ <td>{{snippetList.label}}</td>
24
+ </tr>
25
+ {{/each}}
26
+ </:body>
27
+ </AuTable>
28
+ </div>
29
+ {{/if}}
@@ -0,0 +1,28 @@
1
+ import Component from '@glimmer/component';
2
+ import { action } from '@ember/object';
3
+
4
+ interface Args {
5
+ assignedSnippetListsIds: string[];
6
+ onChange: (assignedSnippetListsIds: string[]) => void;
7
+ closeModal: () => void;
8
+ }
9
+
10
+ export default class SnippetListViewComponent extends Component<Args> {
11
+ @action
12
+ onChange(snippetId: string, isSelected: boolean) {
13
+ if (isSelected) {
14
+ const newSnippetListIds = [
15
+ ...this.args.assignedSnippetListsIds,
16
+ snippetId,
17
+ ];
18
+
19
+ return this.args.onChange(newSnippetListIds);
20
+ }
21
+
22
+ const newSnippetListIds = this.args.assignedSnippetListsIds.filter(
23
+ (id) => id !== snippetId,
24
+ );
25
+
26
+ return this.args.onChange(newSnippetListIds);
27
+ }
28
+ }
@@ -0,0 +1,16 @@
1
+ <AuButton
2
+ @icon='unordered-list'
3
+ @skin='secondary'
4
+ @iconAlignment='left'
5
+ {{on 'click' this.openModal}}
6
+ >
7
+ {{t 'snippet-plugin.snippet-list.open-modal'}}
8
+ </AuButton>
9
+
10
+ <SnippetPlugin::SnippetList::SnippetListModal
11
+ @config={{@config}}
12
+ @assignedSnippetListsIds={{@assignedSnippetListsIds}}
13
+ @onSaveSnippetListIds={{@onSaveSnippetListIds}}
14
+ @open={{this.showModal}}
15
+ @closeModal={{this.closeModal}}
16
+ />
@@ -0,0 +1,27 @@
1
+ import { action } from '@ember/object';
2
+ import { Task } from 'ember-concurrency';
3
+
4
+ import Component from '@glimmer/component';
5
+ import { tracked } from '@glimmer/tracking';
6
+
7
+ import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
8
+
9
+ interface Args {
10
+ config: SnippetPluginConfig;
11
+ assignedSnippetListsIds: string[];
12
+ onSaveSnippetListIds: Task<Promise<void>, [snippetIds: string[]]>;
13
+ }
14
+
15
+ export default class SnippetListSelectComponent extends Component<Args> {
16
+ @tracked showModal = false;
17
+
18
+ @action
19
+ openModal() {
20
+ this.showModal = true;
21
+ }
22
+
23
+ @action
24
+ closeModal() {
25
+ this.showModal = false;
26
+ }
27
+ }
@@ -1,5 +1,5 @@
1
1
  <div class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'>
2
- <h3>{{t "table-of-contents-plugin.title"}}</h3>
2
+ <h3>{{this.title}}</h3>
3
3
  {{#if this.outline}}
4
4
  <TableOfContentsPlugin::EmberNodes::Outline
5
5
  @entries={{this.outline.entries}}
@@ -1,28 +1,36 @@
1
1
  import { action } from '@ember/object';
2
2
  import Component from '@glimmer/component';
3
- import { PNode } from '@lblod/ember-rdfa-editor';
4
3
  import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
5
4
  import { Selection } from '@lblod/ember-rdfa-editor';
6
- import { NodeWithPos } from '@curvenote/prosemirror-utils';
7
5
  import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin';
8
- type OutlineEntry = {
9
- content: string;
10
- pos: number;
11
- children?: OutlineEntry[];
12
- };
6
+ import { extractOutline } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils';
7
+ import { service } from '@ember/service';
8
+ import IntlService from 'ember-intl/services/intl';
13
9
  export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
10
+ @service declare intl: IntlService;
14
11
  get config() {
15
12
  return this.args.node.attrs['config'] as TableOfContentsConfig;
16
13
  }
17
14
 
15
+ get documentLanguage() {
16
+ return this.controller.documentLanguage;
17
+ }
18
+
19
+ get title() {
20
+ return this.intl.t('table-of-contents-plugin.title', {
21
+ locale: this.documentLanguage,
22
+ });
23
+ }
24
+
18
25
  get controller() {
19
26
  return this.args.controller;
20
27
  }
21
28
 
22
29
  get outline() {
23
- const entries = this.extractOutline({
30
+ const entries = extractOutline({
24
31
  node: this.controller.mainEditorState.doc,
25
32
  pos: -1,
33
+ config: this.config,
26
34
  });
27
35
 
28
36
  return {
@@ -30,53 +38,6 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
30
38
  };
31
39
  }
32
40
 
33
- extractOutline({ node, pos }: { node: PNode; pos: number }): OutlineEntry[] {
34
- let result: OutlineEntry[] = [];
35
- let parent: OutlineEntry | undefined;
36
- for (const option of this.config) {
37
- const { nodeHierarchy } = option;
38
- if (RegExp(`^${nodeHierarchy[0]}$`).exec(node.type.name)) {
39
- let i = 1;
40
- let currentNode: NodeWithPos | undefined = { node, pos };
41
- while (currentNode && i < nodeHierarchy.length) {
42
- let newCurrentNode: NodeWithPos | undefined;
43
- currentNode.node.forEach((child, offset) => {
44
- if (RegExp(`^${nodeHierarchy[i]}$`).exec(child.type.name)) {
45
- newCurrentNode = { pos: pos + offset, node: child };
46
- return;
47
- }
48
- });
49
- currentNode = newCurrentNode;
50
- i++;
51
- }
52
- if (currentNode) {
53
- const outlineText = currentNode.node.type.spec.outlineText as
54
- | ((node: PNode) => string)
55
- | undefined;
56
- const content =
57
- outlineText?.(currentNode.node) ?? currentNode.node.textContent;
58
- parent = {
59
- pos: currentNode.pos,
60
- content,
61
- };
62
- }
63
- }
64
- }
65
- const subResults: OutlineEntry[] = [];
66
- node.forEach((child, offset) => {
67
- subResults.push(
68
- ...this.extractOutline({ node: child, pos: pos + 1 + offset }),
69
- );
70
- });
71
- if (parent) {
72
- parent.children = subResults;
73
- result = [parent];
74
- } else {
75
- result = subResults;
76
- }
77
- return result;
78
- }
79
-
80
41
  @action
81
42
  moveToPosition(pos: number) {
82
43
  this.controller.withTransaction((tr) => {