@lblod/ember-rdfa-editor-lblod-plugins 2.1.2 → 4.0.1

package/.woodpecker/.release.yml

@@ -1,6 +1,6 @@
 pipeline:
   install:
-    image: danlynn/ember-cli:4.4.0
+    image: danlynn/ember-cli:4.8.0
     commands:
       - npm ci
   release:

package/.woodpecker/.test-scenarios.yml

@@ -0,0 +1,17 @@
+matrix:
+  scenario:
+    - ember-lts-3.28
+
+pipeline:
+  ${scenario}:
+    image: danlynn/ember-cli:4.8.0
+    commands:
+      - npm ci
+      - npx ember try:one ${scenario}
+
+when:
+  event:
+    - pull_request
+
+depends_on:
+  - test

package/.woodpecker/.test.yml

@@ -1,23 +1,23 @@
 
 pipeline:
   install:
-    image: danlynn/ember-cli:4.4.0
+    image: danlynn/ember-cli:4.8.0
     commands:
       - npm ci
   lint-js:
-    image: danlynn/ember-cli:4.4.0
+    image: danlynn/ember-cli:4.8.0
     group: lint
     commands:
       - npm run lint:js
   lint-hbs:
-    image: danlynn/ember-cli:4.4.0
+    image: danlynn/ember-cli:4.8.0
     group: lint
     commands:
       - npm run lint:hbs
   test:
-    image: danlynn/ember-cli:4.4.0
+    image: danlynn/ember-cli:4.8.0
     commands:
-      - npm run test:ember || exit 0
+      - npm run test:ember
 when:
   event:
     - pull_request

package/CHANGELOG.md

@@ -7,6 +7,62 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [4.0.1] - 2023-03-27
+
+### Dependencies
+- bump `ember-rdfa-editor` to v3.4.1
+
+## [4.0.0] - 2023-03-27
+
+### Fixed
+- Ensure citation suggestions are only updated when search-text or document-legislation-type updates.
+
+### Changed
+- Feature: make citation use the new link node
+- BREAKING: citation mark has been removed
+- Table of contents now is able to be inserted in the corresponding place instead of always being inserted at position 0
+- Change paragraph symbol to §
+- Update schema on dummy page to make articles insertable in empty document
+- Add padding to structure card
+- Placeholder text when inserting date
+
+### Removed:
+- Removal of prosemirror-plugin dependency of `CitationPlugin::CitationInsert` component.
+
+## [3.1.0] - 2023-03-02
+
+### Fixed
+- Article paragraph numbering is no longer continuous
+- Fixed white-space issue in variables
+### Changed
+- Use `AuModalContainer` component instead of  #ember-appuniversum-wormhole element in dummy app
+- Improved documentation of the plugins
+
+### Dependencies
+- bump `ember-rdfa-editor` to v3.3.0
+- bump `ember-rdfa-editor` to v3.4.0
+
+## [3.0.0] - 2023-02-27
+
+### Changed
+- Feature/allow paragraphs inside article paragraphs
+- Set selectable on false for structure-headers
+- BREAKING: the argument structure of plugin components has changed. `widgetArgs` is no longer in use, it's properties are now direct properties of the component `args`.
+ 
+### Added
+- Added a new option to the structures to not support unwrap and made the article paragraphs the first structure to use this option
+
+### Fixed
+- fix translation warnings
+
+### Removed
+- Remove insert date and time as it's no longer needed
+
+### Dependencies
+- Bumps `ember-power-select` to 6.0.1
+- Bumps `ember-source` to 4.8.4
+- Bumps `@lblod/ember-rdfa-editor` to 3.2.0
+ 
 ## [2.1.2] - 2023-02-15
 
 ### Fixed
@@ -323,6 +379,10 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.1...HEAD
+[4.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.0...v4.0.1
+[4.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v3.1.0...v4.0.0
+[3.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v3.0.0...v3.1.0
+[3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1

package/README.md

@@ -9,6 +9,7 @@ Ember v2 addon which bundles a collection of [ember-rdfa-editor](https://github.
 
 * Ember.js v3.28 or above
 * Embroider or ember-auto-import v2
+* Node 18 or above
 
 
 ## Installation
@@ -25,7 +26,6 @@ ember install ember-rdfa-editor-lblod-plugins
 This addon contains the following editor plugins:
 * besluit-type-plugin
 * citaten-plugin
-* generate-template-plugin
 * import-snippet-plugin
 * insert-variable-plugin
 * rdfa-date-plugin
@@ -34,40 +34,75 @@ This addon contains the following editor plugins:
 * table-of-contents-plugin
 * template-variable-plugin
 
-An array of plugin configurations can be passed to an instance of the ember-rdfa-editor in order to enable them.
-This is typically done in the following manner:
+You can configure your editor like this:
 ```hbs
-<Rdfa::RdfaEditor
-      class="au-c-rdfa-editor"
-      @profile={{@profile}}
-      @rdfaEditorInit={{this.rdfaEditorInit}}
-      @editorOptions={{this.editorOptions}}
-      @toolbarOptions={{this.toolbarOptions}}
+<EditorContainer
+  @editorOptions={{hash
+    showRdfa='true'
+    showRdfaHighlight='true'
+    showRdfaHover='true'
+    showPaper='true'
+    showToolbarBottom=null
+  }}
+  @showRdfaBlocks={{this.controller.showRdfaBlocks}}
+>
+  <:top>
+    {...}
+  </:top>
+  <:default>
+    <Editor
       @plugins={{this.plugins}}
-    />
+      @schema={{this.schema}}
+      @nodeViews={{this.nodeViews}}
+      @rdfaEditorInit={{this.rdfaEditorInit}}/>
+  </:default>
+  <:aside>
+    {...}
+  </:aside>
+</EditorContainer>
 ```
-Where `this.plugins` is an array of plugin configurations found in the backing class of the template shown above.
+You will have 2 anchor points where to put your plugins: `top` for a toolbar, and `aside` for plugin cards.
+
 
 ## besluit-type-plugin
 
 Plugin which allows a user to change the type of a [besluit](https://data.vlaanderen.be/ns/besluit#Besluit).
 
-This plugin can be configured in the following manner:
-
-```js
-  this.plugins = ["besluit"];
+This plugin needs to be added to the toolbar as a dropdown with the following syntax:
+```hbs
+  <BesluitTypePlugin::ToolbarDropdown @controller={{this.controller}}/>
 ```
+
 ## citaten-plugin
 Plugin which allows a user to insert references to a legal resource or legal expression into the document.
 
-This plugin can be configured in the following manner:
-
+This plugin provides a card that needs to be added to the sidebar of the editor like
+```hbs
+  <CitationPlugin::CitationCard 
+    @controller={{this.controller}} 
+    @plugin={{this.citationPlugin}}
+  />
+```
+Being this.citationPlugin a tracked reference to the plugin created with the function exported from the package and the wished configuration
 ```js
-  this.plugins = ["citaten"];
+  import { citationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
+
+  @tracked citationPlugin = citationPlugin({
+    type: 'nodes',
+    activeInNodeTypes(schema) {
+      return new Set([schema.nodes.motivering]);
+    },
+  });
 ```
 
+Configuration:
+  - type: it can be 'nodes' or 'ranges' if nodes is selected you are expected to pass the `activeInNodeTypes` function, otherwise you should pass the `activeInRanges` function
+  - activeInNodeTypes: it's a function that gets the prosemirror schema and the state of the actual instance of the editor and returns a `Set` of nodetypes where the plugin should be active
+  - activeInRanges: it's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
+  - regex: you can provide your custom regex to detect citations, if not the default one will be used
+
 ### Using the plugin
-This plugin can be triggered by typing one of the following in the correct RDFa context (the [besluit:motivering](http://data.vlaanderen.be/ns/besluit#motivering) of a [besluit:Besluit](https://data.vlaanderen.be/ns/besluit#Besluit)).
+If used with the example configuration provided this plugin can be triggered by typing one of the following in the correct RDFa context (the [besluit:motivering](http://data.vlaanderen.be/ns/besluit#motivering) of a [besluit:Besluit](https://data.vlaanderen.be/ns/besluit#Besluit)).
 
 * [specification]**decreet** [words to search for] *(e.g. "gemeentedecreet wijziging")*
 * **omzendbrief** [words to search for]
@@ -85,30 +120,12 @@ This plugin can be triggered by typing one of the following in the correct RDFa
 
 You should be able to add a reference manually by clicking on the `Insert` > `Insert reference` item in the Insert menu located on the top right of the editor. This will open the advanced search window. **Note** that this will only be avaliable in the proper context (see above in this section).
 
-## generate-template-plugin
-Plugin which provides an editor command which replaces resource URIs in a document by a generic template URI containing `${generateUuid()}`. This allows for the generation of template documents. Template documents can be used by other applications, these other applications can create an instance of a template by replacing the `${generateUuid()}` keywords by real URIs.
-
-This plugin can be configured in the following manner:
-
-```js
-  this.plugins = ["generate-template"];
-```
-
-The command can be used by executing:
-
-```js
-controller.executeCommand('generateTemplate', controller);
-```
-
-Where `controller` is an editor-controller.
-
 ## import-snippet-plugin
 Plugin allowing importing of external RDFA snippets and inserting it in the document.
 
-This plugin can be configured in the following manner:
-
-```js
-  this.plugins = ["import-snippet"];
+The plugin has a card that needs to be added to the sidebar:
+```hbs
+  <ImportSnippetPlugin::Card @controller={{this.controller}}/>
 ```
 
 ### Using the plugin
@@ -133,68 +150,90 @@ When opening a new document, users will get the option to either include the sni
 ## insert-variable-plugin
 Plugin which allows users to insert variable placeholders into a document.
 
+The plugin provides a card that needs to be attached to the editor sidebar like
+```hbs
+  <VariablePlugin::InsertVariableCard 
+    @controller={{this.controller}}
+    @options={{this.config.variable}}
+  />
+```
+
 ### Configuring the plugin
 
-The plugin can be configured through the following optional attributes:
+The plugin can be configured through the following optional attributes that can be added as a json to the options attribute of the card:
 - `publisher`: the URI of a specific codelist publisher which you can use if you want to filter the codelists by its publisher.
 - `defaultEndpoint`: The default endpoint where the codelists are fetched, this is also the variable that gets passed to the fetchSubtypes and template function
 - `variableTypes`: a custom list of variable types you want the plugin to use. This list can contain the following default variable types: `text`, `number`,`date`,`location` and `codelist`. Additionally this list can also contain custom variable types, configured by the following three sub-attributes:
   * `label`: the label of the custom variable type
   * `fetchSubTypes` (optional): a function which returns a list of possible variable values. The function takes two optional arguments: an `endpoint` and a `publisher`.
-  * `template`: function which returns an html template which should be resolved and inserted when inserting a variable of the custom variable type. The function takes two arguments: an `endpoint` and a `selectedVariableValue`.
+  * `constructor`: function which returns a prosemirror node to be inserted, the function takes three arguments, the prosemirror `schema`, the `endpoint` and the `selectedSubtype` if you are using subtypes.
 
 #### Example
 
 ```js
 {
-  name:'insert-variable',
-  options: {
-    publisher: 'http://data.lblod.info/id/bestuurseenheden/141d9d6b-54af-4d17-b313-8d1c30bc3f5b',
-    defaultEndpoint: 'https://dev.roadsigns.lblod.info/sparql',
-    variableTypes: [
-          'text',
-          'number',
-          'date',
-          'location',
-          'codelist',
+  publisher: 'http://data.lblod.info/id/bestuurseenheden/141d9d6b-54af-4d17-b313-8d1c30bc3f5b',
+  defaultEndpoint: 'https://dev.roadsigns.lblod.info/sparql',
+  variableTypes: [
+    'text',
+    'number',
+    'date',
+    'location',
+    'codelist',
+    {
+      label: 'Simple Variable',
+      constructor: (schema) => {
+        const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
+        const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+        return schema.node(
+          'variable',
           {
-            label: 'Simple Variable',
-            template: `
-              <span property="ext:content" datatype="ext:myNewType">
-                <span class="mark-highlight-manual">\${Simple variable}</span>
-              </span>
-            `,
+            mappingResource: mappingURI,
+            variableInstance,
+            type: 'Simple Variable',
           },
+          schema.node('placeholder', { placeholderText: 'text' })
+        );
+      },
+    },
+    {
+      label: 'Complex Variable',
+      fetchSubtypes: async (endpoint, publisher) => {
+        const subtypes = [
           {
-            label: 'Complex Variable',
-            fetchSubtypes: async (endpoint, publisher) => {
-              const codelists = [
-                {
-                  uri: '1',
-                  label: '1',
-                },
-                {
-                  uri: '2',
-                  label: '2',
-                },
-                {
-                  uri: '3',
-                  label: '3',
-                },
-              ];
-              return codelists;
-            },
-            template: (endpoint, selectedCodelist) => `
-              <span property="ext:codelist" resource="${selectedCodelist.uri}"></span>
-              <span property="dct:type" content="location"></span>
-              <span property="dct:source" resource="${endpoint}"></span>
-              <span property="ext:content" datatype="xsd:date">
-                <span class="mark-highlight-manual">\${${selectedCodelist.label}}</span>
-              </span>
-            `,
+            uri: '1',
+            label: '1',
           },
-        ],
-  }
+          {
+            uri: '2',
+            label: '2',
+          },
+          {
+            uri: '3',
+            label: '3',
+          },
+        ];
+        return subtypes;
+      },
+      constructor: (schema, endpoint, selectedSubtype) => {
+        const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
+        const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+        return schema.node(
+          'variable',
+          {
+            type: 'Complex Variable',
+            mappingResource: mappingURI,
+            subTypeResource: selectedSubtype?.uri,
+            variableInstance,
+            source: endpoint,
+          },
+          schema.node('placeholder', {
+            placeholderText: selectedSubtype?.label ?? '',
+          })
+        );
+      }
+    },
+  ],
 }
 ```
 ### Using the plugin
@@ -205,21 +244,39 @@ When the insert-variable-plugin is enabled, users will have the option to insert
 ## rdfa-date-plugin
 Plugin to insert and modify semantic dates and timestamps in an editor document.
 
-This plugin can be configured in the following manner:
+This plugin provides a card to modify dates that needs to be added to the editor sidebar like
 
-```js
-  this.plugins = ["rdfa-date"];
+```hbs
+  <RdfaDatePlugin::Card 
+    @controller={{this.controller}}
+    @options={{this.config.date}}/>
 ```
 
+And a insert button to insert new dates that needs to be added to the insert part of the sidebar:
+```hbs
+  <RdfaDatePlugin::Insert 
+    @controller={{this.controller}}
+    @options={{this.config.date}}
+  />
+```
 
+You will also need to add the date node with the following configuration (being the insertDate and insertDateTime the placeholder strings):
+```js
+  date: date({
+    placeholder: {
+      insertDate: this.intl.t('date-plugin.insert.date'),
+      insertDateTime: this.intl.t('date-plugin.insert.datetime'),
+    },
+  }),
+```
 
 ## roadsign-regulation-plugin
 A plugin that fetches data from the mow regulation and roadsign registry and allows users to insert roadsign regulations inside an editor document.
 
-This plugin can be configured in the following manner:
+This plugin provides a card that needs to be added to the editor sidebar like:
 
-```js
-  this.plugins = ["roadsign-regulation"];
+```hbs
+  <RoadsignRegulationPlugin::RoadsignRegulationCard @controller={{this.controller}}/>
 ```
 
 The default endpoint the plugin will query is https://roadsigns.lblod.info/sparql . This can be overwritten by setting `roadsignRegulationPlugin.endpoint` in your `config/environment.js`.
@@ -227,10 +284,9 @@ The default endpoint the plugin will query is https://roadsigns.lblod.info/sparq
 ## standard-template-plugin
 Plugin which allows users to insert standard templates in the editor. Depending on the position of the cursor or selected text, a dropdown will appear in the toolbar of the editor that lets you insert a template for the proper context at the location of the cursor.
 
-This plugin can be configured in the following manner:
-
-```js
-  this.plugins = ["standard-template"];
+In order to use this plugin you will need to add its card:
+```hbs
+  <StandardTemplatePlugin::Card @controller={{this.controller}}/>
 ```
 
 ### Template resource used by the plugin
@@ -245,72 +301,59 @@ When creating a template in your database, the following properties are used by
 
 ### Using the plugin
 
-
 The plugin will search for RDFa contexts in the content of the editor and the editor itself. Based on the contexts, the plugin will show possible templates to be added at the location of the cursor. E.g. if an element in the editor has the `typeof="besluit:BehandelingVanAgendapunt"` attribute, the plugin will show the templates related to [`besluit:BehandelingVanAgendapunt`](http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt) in the dropdown menu. This attribute can be set on an element in the content of the editor or predefined in the editor itself.
 
 ## table-of-contents-plugin
 
 Plugin implementing an auto-refreshing table of contents using an ember-rdfa-editor inline component.
 
-In order to enable the plugin you need to add `table-of-contents` to the list of plugins passed to the rdfa-editor. You can configure the plugin with a custom table of contents configuration.
-### Configuring the plugin with a custom config
+In order to enable the plugin you need to add the table of contents button to the toolbar and the table of contents node view to the list of editor node views. 
+```hbs
+  <TableOfContentsPlugin::ToolbarButton @controller={{this.editor}}/>
+```
 
-```js
-this.plugins = [
-  { name: 'table-of-contents', 
-    options: { 
-      config: {
-        sectionPredicate: 'https://say.data.gift/ns/hasPart',
-        value: {
-          predicate: 'https://say.data.gift/ns/heading',
-        },
-      },
-      {
-        sectionPredicate: 'https://say.data.gift/ns/hasParagraph',
-        value: '§',
-      }, 
-    } 
-  },
-]
+```
+  tableOfContentsView(this.config.tableOfContents)(controller),
 ```
 
-You can insert an instance of a table of contents using the `insert-component` command: 
+
+### Configuring the plugin with a custom config
+
+You can configure the nodeview with the hiearchy of the nodes
 
 ```js
-controller.executeCommand(
-      'insert-component',
-      'table-of-contents-plugin/inline-components/table-of-contents',
-      {
-        config: [
-          {
-            sectionPredicate: 'https://say.data.gift/ns/hasPart',
-            value: {
-              predicate: 'https://say.data.gift/ns/heading',
-            },
-          },
-          {
-            sectionPredicate: 'https://say.data.gift/ns/hasParagraph',
-            value: '§',
-          },
-        ],
-      },
-      {},
-      false
-    );
+{
+  nodeHierarchy: [
+    'title|chapter|section|subsection|article',
+    'structure_header|article_header',
+  ],
+},
 ```
+
+
 ## template-variable-plugin
 
 Editor plugin which allows you to interact with placeholders created by the insert-variable-plugin.
 
-### Configuring the plugin
+For enabling it, you need to add the card provided by the plugin to the editor sidebar
+```hbs
+  <VariablePlugin::TemplateVariableCard @controller={{this.controller}}/>
+```
 
-You can enable the plugin by adding it to the list of plugins:
+You will also need to add the variable node to the list of nodes of your prosemirror schema and the variable view to the list of nodeviews like `variable: variableView(controller)` imported from:
 
 ```js
-this.plugins = ['template-variable'];
+import {
+  variable,
+  variableView,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/nodes';
+
 ```
 
-Additionally, you can configure the plugin in your `environment.js` file:
+### Configuring the plugin
+
+
+You can configure the plugin in your `environment.js` file:
 
 ```js
 templateVariablePlugin: {

package/addon/components/article-structure-plugin/article-structure-card.hbs

@@ -1,4 +1,3 @@
-{{#unless @controller.inEmbeddedView}}
 <div>
   {{#each this.structureTypes as |structureType|}}
   <AuList::Item>
@@ -8,5 +7,4 @@
     </AuButton>
   </AuList::Item>
   {{/each}}
-</div>
-{{/unless}}
+</div>

package/addon/components/article-structure-plugin/article-structure-card.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { ProseController } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 import {
   ArticleStructurePluginOptions,
@@ -8,26 +7,33 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
 import { action } from '@ember/object';
 import { insertStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
+import { SayController } from '@lblod/ember-rdfa-editor';
 
 type Args = {
-  controller: ProseController;
-  widgetArgs: {
-    options: ArticleStructurePluginOptions;
-  };
+  controller: SayController;
+  options: ArticleStructurePluginOptions;
 };
 export default class EditorPluginsArticleStructureCardComponent extends Component<Args> {
   @service declare intl: IntlService;
 
   get structureTypes() {
-    return this.args.widgetArgs.options;
+    return this.args.options;
+  }
+
+  get controller() {
+    return this.args.controller;
   }
 
   @action
   insertStructure(spec: StructureSpec) {
-    this.args.controller.doCommand(insertStructure(spec, this.intl));
+    this.args.controller.doCommand(insertStructure(spec, this.intl), {
+      view: this.controller.mainEditorView,
+    });
     this.args.controller.focus();
   }
 
   canInsertStructure = (spec: StructureSpec) =>
-    this.args.controller.checkCommand(insertStructure(spec, this.intl));
+    this.args.controller.checkCommand(insertStructure(spec, this.intl), {
+      view: this.controller.mainEditorView,
+    });
 }

package/addon/components/article-structure-plugin/structure-card.hbs

@@ -26,10 +26,15 @@
           </AuButton>
         </Item>
         <Item>
-          <AuToggleSwitch 
-            @label={{t "article-structure-plugin.remove.content"}} 
-            @checked={{this.removeStructureContent}}
-            @onChange={{this.setRemoveStructureContent}}/>
+          {{#unless this.currentStructureType.noUnwrap}}
+            <div class="au-u-padding-tiny">
+              <AuToggleSwitch
+                @label={{t "article-structure-plugin.remove.content"}}
+                @checked={{this.removeStructureContent}}
+                @onChange={{this.setRemoveStructureContent}}
+              />
+            </div>
+          {{/unless}}
           <AuButton
             @icon="bin"
             @iconAlignment="left"