@lblod/ember-rdfa-editor-lblod-plugins 3.0.0 → 4.0.2

package/CHANGELOG.md

@@ -7,6 +7,53 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [4.0.2] - 2023-04-04
+
+### Fixed
+- Prevent decision nodes regenerating when (de)serializing
+- Ensure editor is focused after inserting a citation
+- fix(citation): make plugin trigger correctly when `doc` is passed as an allowed nodeType
+
+### Added
+- docs: add examples on how to enable the citation plugin for the entire document
+ 
+## [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.
+
+### Dependencies
+- bump `ember-rdfa-editor` to v3.4.0
+
+## [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
+
 ## [3.0.0] - 2023-02-27
 
 ### Changed
@@ -344,7 +391,11 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v3.0.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.2...HEAD
+[4.0.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.1...v4.0.2
+[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

@@ -26,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
@@ -35,40 +34,100 @@ 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
+
+
+A common usecase is to have the plugin active in the entire document. Here's how to do that using each configuration type:
+
+```js
+import { citationPlugin } from "@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin";
+
+const configA = {
+   type: "nodes",
+   activeInNodeTypes(schema) {
+     // the root node of the document should always have the doc type
+     return new Set([schema.nodes.doc]);
+   }
+ };
+  
+const configB = {
+  type: "ranges",
+  activeInRanges(state) {
+    // a node's nodeSize follows the Prosemirror definition
+    // a non-leaf node's size is the sum of its children's sizes + 2
+    // so to get the last valid position "inside" a node, you need to subtract two from its nodeSize
+    // ref: https://prosemirror.net/docs/ref/#model.Node.nodeSize 
+    return [[0, state.doc.nodeSize - 2]];
+  }
+};
+```
 ### 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]
@@ -86,30 +145,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
@@ -134,68 +175,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
@@ -206,21 +269,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`.
@@ -228,10 +309,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
@@ -246,72 +326,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/structure-card.hbs

@@ -27,10 +27,13 @@
         </Item>
         <Item>
           {{#unless this.currentStructureType.noUnwrap}}
-            <AuToggleSwitch
-              @label={{t "article-structure-plugin.remove.content"}}
-              @checked={{this.removeStructureContent}}
-              @onChange={{this.setRemoveStructureContent}}/>
+            <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"

package/addon/components/citation-plugin/citation-card.hbs

@@ -11,6 +11,10 @@
       this.documentText
       this.documentLegislationType
     }}
+    {{did-update
+      this.update
+      this.activeDecoration
+    }}
     as |c|
   >
     <c.header>

package/addon/components/citation-plugin/citation-card.ts

@@ -42,6 +42,21 @@ export default class CitationCardComponent extends Component<Args> {
   @tracked decision: Decision | null = null;
   @tracked cardText: string | null = null;
   @tracked cardLegislationType: string | null = null;
+  @tracked documentLegislationType: Option<string>;
+  @tracked documentText: Option<string>;
+
+  @action
+  update() {
+    if (this.activeDecoration) {
+      const { legislationTypeUri, searchText } = this.activeDecoration?.spec;
+      if (legislationTypeUri !== this.documentLegislationType) {
+        this.documentLegislationType = legislationTypeUri;
+      }
+      if (searchText !== this.documentText) {
+        this.documentText = searchText;
+      }
+    }
+  }
 
   get controller(): SayController {
     return this.args.controller;
@@ -64,14 +79,6 @@ export default class CitationCardComponent extends Component<Args> {
     return this.decorations?.find(from, to)[0];
   }
 
-  get documentLegislationType(): Option<string> {
-    return this.activeDecoration?.spec.legislationTypeUri;
-  }
-
-  get documentText(): Option<string> {
-    return this.activeDecoration?.spec.searchText;
-  }
-
   get searchText(): string {
     return (this.cardText ?? this.documentText) || '';
   }
@@ -195,6 +202,7 @@ export default class CitationCardComponent extends Component<Args> {
           .scrollIntoView(),
       { view: this.controller.mainEditorView }
     );
+    this.controller.focus();
   }
 
   @action

package/addon/components/citation-plugin/citation-insert.ts

@@ -12,10 +12,7 @@ import {
   Decision,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/vlaamse-codex';
 import { citedText } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cited-text';
-import {
-  CitationPlugin,
-  CitationPluginConfig,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
+import { CitationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
 import {
   LEGISLATION_TYPE_CONCEPTS,
   LEGISLATION_TYPES,
@@ -25,7 +22,6 @@ import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 
 interface Args {
   controller: SayController;
-  plugin: CitationPlugin;
   config: CitationPluginConfig;
 }
 
@@ -80,18 +76,16 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
         this.controller.schema,
         this.controller.mainEditorState
       );
+      // if the doc node is included, the button should always be active
+      // the findParentNodeOfType util we import does NOT consider the doc node
+      // in its search.
+      if (nodeTypes.has(this.controller.schema.nodes.doc)) {
+        return false;
+      }
       return !findParentNodeOfType([...nodeTypes])(selection);
     }
   }
 
-  get plugin() {
-    return this.args.plugin;
-  }
-
-  get activeRanges() {
-    return this.plugin.getState(this.controller.mainEditorState)?.activeRanges;
-  }
-
   get controller() {
     return this.args.controller;
   }

package/addon/components/rdfa-date-plugin/card.ts

@@ -157,8 +157,8 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
     return null;
   }
 
-  get pickerDate(): Date {
-    return this.documentDate ?? new Date();
+  get pickerDate(): Option<Date> {
+    return this.documentDate;
   }
 
   @action

package/addon/components/table-of-contents-plugin/toolbar-button.ts

@@ -38,12 +38,43 @@ export default class TableOfContentsCardComponent extends Component<Args> {
       );
     } else {
       const { schema } = this.controller;
-      this.controller.withTransaction(
-        (tr) => {
-          return tr.replaceRangeWith(0, 0, schema.node('table_of_contents'));
-        },
-        { view: this.controller.mainEditorView }
-      );
+      const state = this.controller.activeEditorState;
+      let replacePosition: number | undefined = undefined;
+      state.doc.descendants((node, pos, parent, index) => {
+        if (
+          replacePosition === undefined &&
+          state.doc.canReplaceWith(
+            index,
+            index,
+            schema.nodes['table_of_contents']
+          )
+        ) {
+          replacePosition = pos;
+        } else if (
+          index === state.doc.childCount - 1 &&
+          replacePosition === undefined &&
+          state.doc.canReplaceWith(
+            index + 1,
+            index + 1,
+            schema.nodes['table_of_contents']
+          )
+        ) {
+          replacePosition = pos + node.nodeSize;
+        }
+        return false;
+      });
+      if (replacePosition !== undefined) {
+        this.controller.withTransaction(
+          (transaction) => {
+            return transaction.replaceWith(
+              replacePosition as number,
+              replacePosition as number,
+              schema.node('table_of_contents')
+            );
+          },
+          { view: this.controller.mainEditorView }
+        );
+      }
     }
   }
 }

package/addon/components/variable-plugin/insert-variable-card.hbs

@@ -1,8 +1,16 @@
 {{#if this.showCard}}
-  <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
+  <AuCard
+    @flex={{true}}
+    @divided={{true}}
+    @isOpenInitially={{true}}
+    @expandable={{true}}
+    @shadow={{true}}
+    @size='small'
+    as |c|
+  >
     <c.header>
-      <AuHeading @level="3" @skin="6">
-        {{t "variable-plugin.insert-variable"}}
+      <AuHeading @level='3' @skin='6'>
+        {{t 'variable-plugin.insert-variable'}}
       </AuHeading>
     </c.header>
     <c.content>
@@ -11,7 +19,8 @@
         @searchEnabled={{false}}
         @options={{this.variablesArray}}
         @selected={{this.selectedVariable}}
-        @onChange={{this.updateSelectedVariable}} as |variable|
+        @onChange={{this.updateSelectedVariable}}
+        as |variable|
       >
         {{variable.label}}
       </PowerSelect>
@@ -21,14 +30,19 @@
           @searchEnabled={{false}}
           @options={{this.subtypes}}
           @selected={{this.selectedSubtype}}
-          @onChange={{this.updateSubtype}} as |subtype|
+          @onChange={{this.updateSubtype}}
+          as |subtype|
         >
           {{subtype.label}}
         </PowerSelect>
       {{/if}}
-      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable)
-                                                          (and this.hasSubtype (not this.selectedSubtype))}}>{{t
-        "variable-plugin.button"}}</AuButton>
+      <AuButton
+        {{on 'click' this.insert}}
+        @disabled={{or
+          (not this.selectedVariable)
+          (and this.hasSubtype (not this.selectedSubtype))
+        }}
+      >{{t 'variable-plugin.button'}}</AuButton>
     </c.content>
   </AuCard>
-{{/if}}
+{{/if}}

package/addon/plugins/article-structure-plugin/structures/article-paragraph.ts

@@ -22,7 +22,7 @@ export const articleParagraphSpec: StructureSpec = {
     },
     remove: 'article-structure-plugin.remove.paragraph',
   },
-  continuous: true,
+  continuous: false,
   noUnwrap: true,
   constructor: ({ schema, number, intl }) => {
     const numberConverted = number?.toString() ?? '1';
@@ -76,7 +76,7 @@ export const article_paragraph: NodeSpec = {
         typeof: node.attrs.typeof as string,
         resource: node.attrs.resource as string,
       },
-      ['span', { contenteditable: false }, '$'],
+      ['span', { contenteditable: false }, '§'],
       [
         'span',
         {

package/addon/plugins/citation-plugin/index.ts

@@ -7,12 +7,14 @@ import {
   NodeType,
   PNode,
   ProsePlugin,
+  ResolvedPos,
   Schema,
 } from '@lblod/ember-rdfa-editor';
 import processMatch, {
   RegexpMatchArrayWithIndices,
 } from './utils/process-match';
 import { changedDescendants } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/changed-descendants';
+import { findParentNodeOfTypeClosestToPos } from '@curvenote/prosemirror-utils';
 
 const BASIC_MULTIPLANE_CHARACTER = '\u0021-\uFFFF'; // most of the characters used around the world
 
@@ -206,6 +208,7 @@ function calculateDecorationsInNodes(
     decsToAdd,
     schema,
     config.regex,
+    newDoc,
     decsToRemove,
     oldDecorations
   );
@@ -254,7 +257,12 @@ function calculateDecorationsInRanges(
   activeRanges: [number, number][]
 ): { decorations: DecorationSet; activeRanges: [number, number][] } {
   const decorationsToAdd: Decoration[] = [];
-  const collector = collectDecorations(decorationsToAdd, schema, config.regex);
+  const collector = collectDecorations(
+    decorationsToAdd,
+    schema,
+    config.regex,
+    doc
+  );
 
   for (const [start, end] of activeRanges) {
     doc.nodesBetween(start, end, collector);
@@ -269,15 +277,17 @@ function collectDecorations(
   decsToAdd: Decoration[],
   schema: CitationSchema,
   regex: RegExp = CITATION_REGEX,
+  doc: PNode,
   decsToRemove?: Decoration[],
   oldDecs?: DecorationSet
 ) {
   return function (node: PNode, pos: number): boolean {
-    if (
-      node.isText &&
-      node.text &&
-      !schema.marks.citation.isInSet(node.marks)
-    ) {
+    const resolvedPos: ResolvedPos = doc.resolve(pos);
+    const link = findParentNodeOfTypeClosestToPos(
+      resolvedPos,
+      schema.nodes.link
+    );
+    if (node.isText && node.text && !link) {
       if (decsToRemove && oldDecs) {
         decsToRemove.push(
           ...oldDecs.find(

package/addon/plugins/citation-plugin/utils/cited-text.ts

@@ -8,12 +8,13 @@ export function citedText(
   title: string,
   uri: string
 ): PNode {
-  return schema.text(title, [
-    unwrap(schema.marks.citation).create({
+  return unwrap(schema.nodes.link).create(
+    {
       href: uri,
       property: 'eli:cites',
       typeof: 'eli:LegalExpression',
       __rdfaId: uuid(),
-    }),
-  ]);
+    },
+    [schema.text(title)]
+  );
 }

package/addon/plugins/standard-template-plugin/utils/nodes.ts

@@ -127,14 +127,12 @@ export const article_container: NodeSpec = {
     {
       tag: 'div',
       getAttrs(element: HTMLElement) {
-        if (
-          hasRDFaAttribute(element, 'property', PROV('value')) &&
-          hasRDFaAttribute(element, 'typeof', BESLUIT('Besluit'))
-        ) {
+        if (hasRDFaAttribute(element, 'property', PROV('value'))) {
           return getRdfaAttrs(element);
         }
         return false;
       },
+      context: 'besluit/',
     },
   ],
 };
@@ -279,6 +277,7 @@ export const besluit_article_header: NodeSpec = {
 };
 
 export const besluit_article_content: NodeSpec = {
+  group: 'block',
   content: 'block+',
   inline: false,
   attrs: {
@@ -302,6 +301,7 @@ export const besluit_article_content: NodeSpec = {
         }
         return false;
       },
+      context: 'besluit_article//',
     },
   ],
 };

package/addon/plugins/variable-plugin/utils/constants.ts

@@ -57,6 +57,7 @@ export const DEFAULT_VARIABLE_TYPES: Record<string, VariableType> = {
       return unwrap(
         schema.nodes.date.createAndFill({
           mappingResource: `http://data.lblod.info/mappings/${uuidv4()}`,
+          value: null,
         })
       );
     },

package/app/styles/variable-plugin.scss

@@ -46,7 +46,7 @@
 .ember-node {
   .variable {
     [contenteditable] {
-      white-space: pre-wrap;
+      white-space: break-spaces;
       word-break: break-all;
       word-wrap: break-word;
       outline: 0px;

package/components/citation-plugin/citation-card.d.ts

@@ -18,13 +18,14 @@ export default class CitationCardComponent extends Component<Args> {
     decision: Decision | null;
     cardText: string | null;
     cardLegislationType: string | null;
+    documentLegislationType: Option<string>;
+    documentText: Option<string>;
+    update(): void;
     get controller(): SayController;
     get showCard(): false | Option<CitationDecoration>;
     get plugin(): CitationPlugin;
     get decorations(): import("prosemirror-view").DecorationSet | undefined;
     get activeDecoration(): Option<CitationDecoration>;
-    get documentLegislationType(): Option<string>;
-    get documentText(): Option<string>;
     get searchText(): string;
     get legislationTypes(): string[];
     get selectedLegislationType(): {

package/components/citation-plugin/citation-insert.d.ts

@@ -1,10 +1,9 @@
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { Article, Decision } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/vlaamse-codex';
-import { CitationPlugin, CitationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
+import { CitationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
 interface Args {
     controller: SayController;
-    plugin: CitationPlugin;
     config: CitationPluginConfig;
 }
 export default class EditorPluginsCitationInsertComponent extends Component<Args> {
@@ -20,8 +19,6 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
     };
     selectLegislationType(type: string): void;
     get disableInsert(): boolean;
-    get plugin(): CitationPlugin;
-    get activeRanges(): [number, number][] | undefined;
     get controller(): SayController;
     openModal(): void;
     closeModal(): void;

package/components/rdfa-date-plugin/card.d.ts

@@ -28,7 +28,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
     get dateFormatType(): string;
     get customDateFormatError(): ValidationError | null;
     get humanError(): string | null;
-    get pickerDate(): Date;
+    get pickerDate(): Option<Date>;
     showTooltip(): void;
     hideTooltip(): void;
     changeDate(date: Date): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "3.0.0",
+  "version": "4.0.2",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -63,7 +63,7 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@lblod/ember-rdfa-editor": "^3.2.0",
+    "@lblod/ember-rdfa-editor": "^3.4.1",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@tsconfig/ember": "^1.0.1",
@@ -143,7 +143,7 @@
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
-    "@lblod/ember-rdfa-editor": "^3.2.0",
+    "@lblod/ember-rdfa-editor": "^3.4.1",
     "ember-concurrency": "^2.3.7"
   },
   "engines": {

package/addon/plugins/citation-plugin/marks/citation.ts

@@ -1,27 +0,0 @@
-import { getRdfaAttrs, MarkSpec, rdfaAttrs } from '@lblod/ember-rdfa-editor';
-
-export const citation: MarkSpec = {
-  attrs: { test: { default: 'yeet' }, ...rdfaAttrs },
-  inclusive: false,
-  group: 'linkmarks',
-  excludes: 'linkmarks',
-  parseDOM: [
-    {
-      tag: 'a[href]',
-      getAttrs(dom) {
-        if (typeof dom === 'string') {
-          return false;
-        }
-        const type = dom.attributes.getNamedItem('typeof')?.value;
-        const property = dom.attributes.getNamedItem('property')?.value;
-        if (type === 'eli:LegalExpression' && property === 'eli:cites') {
-          return getRdfaAttrs(dom);
-        }
-        return false;
-      },
-    },
-  ],
-  toDOM(node) {
-    return ['a', { ...node.attrs, class: 'annotation' }, 0];
-  },
-};

package/plugins/citation-plugin/marks/citation.d.ts

@@ -1,2 +0,0 @@
-import { MarkSpec } from '@lblod/ember-rdfa-editor';
-export declare const citation: MarkSpec;