@lblod/ember-rdfa-editor-lblod-plugins 7.1.0 → 8.0.1

package/CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.0.1] - 2023-06-15
+### Fixed
+- Change problematic type in citation that made it to break with new ember
+
+
+## [8.0.0] - 2023-06-15
+### Fixed
+- Bump `@lblod/ember-rdfa-editor` package to fix annotation not present for some structures
+- Change variable label to be stored in the data-attributes and solve bug with date not getting a default label
+
+### Added
+- navigation links in TOC of readme
+- support for option labels in Variable-plugin
+- Generic rdfa variables input plugin - HTML only input
+- Number variable - support min/max
+
+### Breaking
+- Add label to variables
+ 
+### Dependencies
+- Bumps `webpack` from 5.75.0 to 5.76.0
+- Move `tracked-toolbox` to dependencies
+- Bumps `prettier` from 2.8.0 to 2.8.8
+- Bumps `minimist` from 0.2.2 to 0.2.4
+- Bumps `socket.io-parser` from 4.2.1 to 4.2.4
+- Bumps `decode-uri-component` from 0.2.0 to 0.2.2
+- Bumps loader-utils from 1.0.4 to 2.0.4
+- Bumps handlebars-loader from 1.7.2 to 1.7.3
+
 ## [7.1.0] - 2023-05-18
 
 ### Added
@@ -444,7 +473,9 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.1...HEAD
+[8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
+[8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
 [7.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v6.1.0...v7.0.0
 [6.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v6.0.0...v6.1.0

package/README.md

@@ -19,17 +19,18 @@ ember install ember-rdfa-editor-lblod-plugins
 
 This addon contains the following editor plugins:
 
-* besluit-type-plugin
-* citaten-plugin
-* decision-plugin
-* import-snippet-plugin
-* insert-variable-plugin
-* rdfa-date-plugin
-* roadsign-regulation-plugin
-* standard-template-plugin
-* table-of-contents-plugin
-* template-variable-plugin
-* validation-plugin
+* [besluit-type-plugin](#besluit-type-plugin)
+* [citaten-plugin](#citaten-plugin)
+* [decision-plugin](#decision-plugin)
+* [import-snippet-plugin](#import-snippet-plugin)
+* [insert-variable-plugin](#insert-variable-plugin)
+* [rdfa-date-plugin](#rdfa-date-plugin)
+* [roadsign-regulation-plugin](#roadsign-regulation-plugin)
+* [standard-template-plugin](#standard-template-plugin)
+* [table-of-contents-plugin](#table-of-contents-plugin)
+* [template-variable-plugin](#template-variable-plugin)
+* [validation-plugin](#validation-plugin)
+* [address-plugin](#address-plugin)
 
 You can configure your editor like this:
 ```hbs

package/addon/components/generic-rdfa-variable/insert-menu.hbs

@@ -0,0 +1,30 @@
+<Toolbar::Button
+  @title={{t 'generic-rdfa-variable.menu.insert'}}
+  @icon='html-plus'
+  {{on 'click' this.showModal}}
+/>
+<AuModal
+  @modalOpen={{this.modalOpen}}
+  @closeModal={{this.onCancel}}
+  @initialFocus={{false}}
+  class='generic-rdfa-plugin-modal'
+>
+  <:title>{{t 'generic-rdfa-variable.menu.insert'}}</:title>
+  <:body>
+    <div
+      class='generic-rdfa-variable-textarea-wrapper'
+      {{did-insert this.setupHtmlEditor}}
+    >
+    </div>
+  </:body>
+  <:footer>
+    <AuButtonGroup>
+      <AuButton @skin='primary' {{on 'click' this.onInsert}}>
+        {{t 'generic-rdfa-variable.modal.insert'}}
+      </AuButton>
+      <AuButton @skin='secondary' {{on 'click' this.onCancel}}>
+        {{t 'generic-rdfa-variable.modal.cancel'}}
+      </AuButton>
+    </AuButtonGroup>
+  </:footer>
+</AuModal>

package/addon/components/generic-rdfa-variable/insert-menu.ts

@@ -0,0 +1,97 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { tracked } from 'tracked-built-ins';
+
+import { DOMParser as ProseParser } from 'prosemirror-model';
+
+import { basicSetup, EditorView } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { html } from '@codemirror/lang-html';
+import { tooltips } from '@codemirror/view';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class GenericRdfaVariableInsertMenu extends Component<Args> {
+  @tracked modalOpen = false;
+  private htmlEditor?: EditorView;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  @action
+  showModal() {
+    this.modalOpen = true;
+  }
+
+  @action
+  closeModal() {
+    this.modalOpen = false;
+
+    // The recommended way to focus the editor is to call `this.controller.focus()` before opening the modal
+    // e.g. in the `showModal` fn, then `focus-trap` inside modal will record it as the element that should
+    // be focused when `focus-trap` is deactivated (modal is closed).
+    //
+    // However, for some reason, this doesn't work in this case. Maybe because `initialFocus` is false, maybe
+    // because of something else, I wasn't able to get to the bottom of it.
+    //
+    // So, we're doing it the other way here: we wait for the modal to close, wait for the `focus-trap` to
+    // deactivate, and then focus the editor.
+    setTimeout(() => {
+      this.controller.focus();
+    }, 0);
+  }
+
+  @action
+  onCancel() {
+    this.closeModal();
+  }
+
+  @action
+  setupHtmlEditor(element: HTMLElement) {
+    this.htmlEditor = new EditorView({
+      state: EditorState.create({
+        extensions: [
+          basicSetup,
+          html(),
+          tooltips({ position: 'absolute', parent: element }),
+        ],
+      }),
+      parent: element,
+    });
+
+    this.htmlEditor.focus();
+  }
+
+  @action
+  onInsert() {
+    if (!this.htmlEditor) {
+      return;
+    }
+
+    const editorContent = this.htmlEditor.state.sliceDoc();
+
+    if (!editorContent) {
+      return;
+    }
+
+    const domParser = new DOMParser();
+
+    this.controller.withTransaction((tr) => {
+      return tr.replaceSelectionWith(
+        ProseParser.fromSchema(this.schema).parse(
+          domParser.parseFromString(editorContent, 'text/html')
+        )
+      );
+    });
+
+    this.closeModal();
+  }
+}

package/addon/components/rdfa-date-plugin/date.hbs

@@ -0,0 +1,9 @@
+<AuPill @icon="pencil" @iconAlignment="right" class="variable" {{on 'click' this.onClick}}>
+
+  {{this.humanReadableDate}}
+  {{#if @node.attrs.label}}
+    <span class="label">
+      ({{@node.attrs.label}})
+    </span>
+  {{/if}}
+</AuPill>

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

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import {
+  DecorationSource,
+  NodeSelection,
+  PNode,
+  SayController,
+  SayView,
+} from '@lblod/ember-rdfa-editor';
+import { action } from '@ember/object';
+import {
+  formatDate,
+  validateDateFormat,
+} from '../../plugins/rdfa-date-plugin/utils';
+import { DateOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin';
+
+type Args = {
+  getPos: () => number | undefined;
+  node: PNode;
+  updateAttribute: (attr: string, value: unknown) => void;
+  controller: SayController;
+  view: SayView;
+  selected: boolean;
+  contentDecorations?: DecorationSource;
+};
+
+export default class VariableComponent extends Component<Args> {
+  @action
+  onClick() {
+    const tr = this.args.controller.activeEditorState.tr;
+    tr.setSelection(
+      NodeSelection.create(
+        this.args.controller.activeEditorState.doc,
+        this.args.getPos() as number
+      )
+    );
+    this.args.controller.activeEditorView.dispatch(tr);
+  }
+
+  get humanReadableDate() {
+    const value = this.args.node.attrs.value as string;
+    const format = this.args.node.attrs.format as string;
+    if (value) {
+      if (validateDateFormat(format).type === 'ok') {
+        return formatDate(new Date(value), format);
+      } else {
+        return 'Ongeldig formaat';
+      }
+    } else {
+      const options = this.args.node.type.spec.options as DateOptions;
+      return (this.args.node.attrs.onlyDate as boolean)
+        ? options.placeholder.insertDate
+        : options.placeholder.insertDateTime;
+    }
+  }
+}

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

@@ -36,6 +36,25 @@
           {{subtype.label}}
         </PowerSelect>
       {{/if}}
+      <AuFormRow>
+        <AuLabel for='label'>
+          {{t 'variable-plugin.label'}}
+        </AuLabel>
+        <AuInput
+          id="label"
+          placeholder={{t 'variable-plugin.labelPlaceholder'}}
+          @type="text"
+          @width="block"
+          @value={{this.variableLabel}}
+          {{on "input" this.updateVariableLabel}}
+        />
+      </AuFormRow>
+      {{#if (eq this.type 'number')}}
+        <VariablePlugin::NumberSettings
+          @minimumValue={{this.extraAttributes.minimumValue}}
+          @maximumValue={{this.extraAttributes.maximumValue}}
+        />
+      {{/if}}
       <AuButton
         {{on 'click' this.insert}}
         @disabled={{or

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

@@ -25,6 +25,8 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
   @tracked hasSubtype = false;
   @tracked selectedSubtype?: CodeList;
   @tracked subtypes?: CodeList[];
+  @tracked variableLabel?: string;
+  @tracked extraAttributes: Record<string, unknown> = {};
   publisher: string;
   endpoint: string;
 
@@ -64,16 +66,30 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     return this.args.controller;
   }
 
+  @action
+  updateVariableLabel(event: InputEvent) {
+    this.variableLabel = (event.target as HTMLInputElement).value;
+  }
+
   @action
   insert() {
     if (!this.selectedVariable) {
       return;
     }
-    const node = this.selectedVariable.constructor(
-      this.controller.schema,
-      this.endpoint,
-      this.selectedSubtype
-    );
+
+    const node = this.selectedVariable.constructor({
+      schema: this.controller.schema,
+      codelist: this.selectedSubtype,
+      label: this.variableLabel !== '' ? this.variableLabel : undefined,
+      attributes: {
+        source: this.endpoint,
+        ...this.extraAttributes,
+      },
+    });
+
+    this.variableLabel = '';
+    this.extraAttributes = {};
+
     this.controller.withTransaction(
       (tr) => {
         return tr.replaceSelectionWith(node);
@@ -108,6 +124,11 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
   @action
   updateSubtype(subtype: CodeList) {
     this.selectedSubtype = subtype;
+    this.extraAttributes = {};
+  }
+
+  get type() {
+    return this.selectedVariable?.label;
   }
 
   get showCard() {

package/addon/components/variable-plugin/number-settings.hbs

@@ -0,0 +1,31 @@
+<div class='number-settings'>
+  <AuFormRow>
+    {{#let (unique-id) as |id|}}
+      <AuLabel for={{id}}>
+        {{t 'variable-plugin.number.minimum'}}
+      </AuLabel>
+      <AuInput
+        id={{id}}
+        @value={{@minimumValue}}
+        placeholder={{t 'variable-plugin.number.minimum-placeholder'}}
+        @width='block'
+        @type='number'
+      />
+    {{/let}}
+  </AuFormRow>
+  <div class='to'><span>{{t 'variable-plugin.number.to'}}</span></div>
+  <AuFormRow>
+    {{#let (unique-id) as |id|}}
+      <AuLabel for={{id}}>
+        {{t 'variable-plugin.number.maximum'}}
+      </AuLabel>
+      <AuInput
+        id={{id}}
+        @value={{@maximumValue}}
+        placeholder={{t 'variable-plugin.number.maximum-placeholder'}}
+        @width='block'
+        @type='number'
+      />
+    {{/let}}
+  </AuFormRow>
+</div>

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

@@ -7,6 +7,9 @@
       </AuHeading>
     </c.header>
     <c.content>
+      <AuLabel for='label'>
+        {{this.label}}
+      </AuLabel>
       {{#if this.multiSelect}}
         <PowerSelectMultiple
           @allowClear={{false}}

package/addon/components/variable-plugin/template-variable-card.ts

@@ -24,6 +24,7 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
   @tracked selectedVariable: { pos: number; node: PNode } | undefined;
   @tracked showCard = false;
   @tracked multiSelect = false;
+  @tracked label?: string;
   mappingUri?: string;
 
   get controller() {
@@ -93,6 +94,7 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
           const codelistURI = variable.node.attrs.codelistResource as string;
           void this.fetchCodeListOptions.perform(source, codelistURI);
           this.showCard = true;
+          this.label = variable.node.attrs.label as string;
         } else if (type === 'location') {
           const source =
             (variable.node.attrs.source as string | undefined) ??
@@ -103,6 +105,7 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
           const zonalityUri = roadSignRegulation?.node.attrs.zonality as
             | string
             | undefined;
+          this.label = variable.node.attrs.label as string;
           if (zonalityUri === ZONAL_URI) {
             void this.fetchCodeListOptions.perform(
               source,

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

@@ -1,9 +1,15 @@
-<AuPill @icon="pencil" @iconAlignment="right" class="variable">
+<AuPill @icon="pencil" @iconAlignment="right" class="variable" {{on 'click' this.onClick}}>
   <EmberNode::EmbeddedEditor 
     @controller={{@controller}} 
     @node={{@node}} 
     @view={{@view}} 
     @getPos={{@getPos}} 
     @selected={{@selected}}
+    @initEditor={{this.initEditor}}
   />
+  {{#if @node.attrs.label}}
+    <span class="label">
+      ({{@node.attrs.label}})
+    </span>
+  {{/if}}
 </AuPill>

package/addon/components/variable-plugin/variable.ts

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import {
+  NodeSelection,
+  SayController,
+  SayView,
+} from '@lblod/ember-rdfa-editor';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class VariableComponent extends Component<Args> {
+  @tracked innerView?: SayView;
+
+  @action
+  onClick() {
+    if (this.innerView) {
+      if (this.innerView.state.doc.firstChild?.type.name === 'placeholder') {
+        this.innerView.focus();
+        // Use request animation frame to only change the selection when the focus has been established
+        window.requestAnimationFrame(() => {
+          if (this.innerView) {
+            const tr = this.innerView.state.tr;
+            tr.setSelection(NodeSelection.create(this.innerView?.state.doc, 0));
+            this.innerView?.dispatch(tr);
+          }
+        });
+      } else {
+        this.innerView.focus();
+      }
+    }
+  }
+  @action
+  initEditor(view: SayView) {
+    this.innerView = view;
+  }
+}

package/addon/plugins/citation-plugin/utils/vlaamse-codex.ts

@@ -5,8 +5,7 @@ import {
   Option,
   optionMapOr,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import Ember from 'ember';
-import SafeString = Ember.Handlebars.SafeString;
+type SafeString = ReturnType<typeof htmlSafe>;
 
 interface DecisionArgs {
   uri: string;