@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.
- package/CHANGELOG.md +25 -1
- package/README.md +62 -24
- package/addon/components/snippet-plugin/search-modal.ts +4 -0
- package/addon/components/snippet-plugin/snippet-insert.hbs +1 -0
- package/addon/components/snippet-plugin/snippet-insert.ts +1 -0
- package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.hbs +80 -0
- package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.ts +98 -0
- package/addon/components/snippet-plugin/snippet-list/snippet-list-view.hbs +29 -0
- package/addon/components/snippet-plugin/snippet-list/snippet-list-view.ts +28 -0
- package/addon/components/snippet-plugin/snippet-list-select.hbs +16 -0
- package/addon/components/snippet-plugin/snippet-list-select.ts +27 -0
- package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.hbs +1 -1
- package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts +16 -55
- package/addon/components/variable-plugin/address/edit.hbs +35 -0
- package/addon/components/variable-plugin/address/edit.ts +96 -0
- package/addon/components/variable-plugin/address/insert.hbs +9 -0
- package/addon/components/variable-plugin/address/insert.ts +37 -0
- package/addon/components/variable-plugin/address/nodeview.hbs +19 -0
- package/addon/components/variable-plugin/address/nodeview.ts +31 -0
- package/addon/components/variable-plugin/number/insert.hbs +8 -6
- package/addon/components/variable-plugin/number/insert.ts +10 -0
- package/addon/components/variable-plugin/number/nodeview.hbs +2 -2
- package/addon/components/variable-plugin/utils/label-input.hbs +3 -3
- package/addon/helpers/in-array.ts +13 -0
- package/addon/plugins/snippet-plugin/index.ts +20 -0
- package/addon/plugins/snippet-plugin/utils/fetch-data.ts +117 -9
- package/addon/plugins/table-of-contents-plugin/nodes/table-of-contents.ts +23 -17
- package/addon/plugins/table-of-contents-plugin/utils/index.ts +1 -1
- package/addon/plugins/variable-plugin/utils/address-helpers.ts +112 -0
- package/addon/plugins/variable-plugin/variables/address.ts +322 -0
- package/addon/plugins/variable-plugin/variables/index.ts +1 -0
- package/addon/plugins/variable-plugin/variables/text.ts +1 -1
- package/addon/utils/constants.ts +7 -0
- package/addon/utils/namespace.ts +11 -0
- package/app/components/snippet-plugin/snippet-list/snippet-list-modal.js +1 -0
- package/app/components/snippet-plugin/snippet-list/snippet-list-view.js +1 -0
- package/app/components/snippet-plugin/snippet-list-select.js +1 -0
- package/app/components/{address-plugin/insert.js → variable-plugin/address/edit.js} +1 -1
- package/app/components/variable-plugin/address/insert.js +1 -0
- package/app/components/variable-plugin/address/nodeview.js +1 -0
- package/app/helpers/in-array.js +4 -0
- package/app/styles/snippet-plugin.scss +11 -0
- package/components/snippet-plugin/search-modal.d.ts +1 -0
- package/components/snippet-plugin/snippet-insert.d.ts +1 -0
- package/components/snippet-plugin/snippet-list/snippet-list-modal.d.ts +23 -0
- package/components/snippet-plugin/snippet-list/snippet-list-view.d.ts +10 -0
- package/components/snippet-plugin/snippet-list-select.d.ts +14 -0
- package/components/table-of-contents-plugin/ember-nodes/table-of-contents.d.ts +5 -12
- package/components/variable-plugin/address/edit.d.ts +23 -0
- package/components/variable-plugin/address/insert.d.ts +11 -0
- package/components/variable-plugin/address/nodeview.d.ts +14 -0
- package/components/variable-plugin/number/insert.d.ts +2 -0
- package/helpers/in-array.d.ts +9 -0
- package/package.json +4 -4
- package/plugins/snippet-plugin/index.d.ts +11 -0
- package/plugins/snippet-plugin/utils/fetch-data.d.ts +10 -1
- package/plugins/table-of-contents-plugin/utils/index.d.ts +1 -1
- package/plugins/variable-plugin/utils/address-helpers.d.ts +4 -0
- package/plugins/variable-plugin/variables/address.d.ts +23 -0
- package/plugins/variable-plugin/variables/index.d.ts +1 -0
- package/plugins/variable-plugin/variables/text.d.ts +0 -2
- package/translations/en-US.yaml +29 -3
- package/translations/nl-BE.yaml +28 -2
- package/types/global.d.ts +7 -0
- package/utils/constants.d.ts +3 -0
- package/utils/namespace.d.ts +1 -0
- package/addon/components/address-plugin/insert.hbs +0 -47
- package/addon/components/address-plugin/insert.ts +0 -100
- package/addon/components/address-plugin/types.ts +0 -26
- package/addon/components/address-plugin/utils.ts +0 -59
- package/components/address-plugin/insert.d.ts +0 -21
- package/components/address-plugin/types.d.ts +0 -25
- 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/
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
-
|
|
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
|
|
@@ -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,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
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 =
|
|
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) => {
|