@lblod/ember-rdfa-editor-lblod-plugins 19.3.1 → 20.0.0

package/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.eslintcache

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 20.0.0
+
+### Major Changes
+
+- [#440](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/440) [`8c242fe2eda10725e2bce59a77c86e905b6878b9`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8c242fe2eda10725e2bce59a77c86e905b6878b9) Thanks [@abeforgit](https://github.com/abeforgit)! - Convert plugins that used decision nodes to work on any nodes that have the rdf decision type
+
+### Minor Changes
+
+- [#440](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/440) [`8c242fe2eda10725e2bce59a77c86e905b6878b9`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8c242fe2eda10725e2bce59a77c86e905b6878b9) Thanks [@abeforgit](https://github.com/abeforgit)! - Add new structure node using a nodeview approach
+
+### Patch Changes
+
+- [#441](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/441) [`45aad15462f89eede7cd2633ccf129189367d8db`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/45aad15462f89eede7cd2633ccf129189367d8db) Thanks [@piemonkey](https://github.com/piemonkey)! - Fix docker image builds
+
 ## 19.3.1
 
 ### Patch Changes

package/addon/components/besluit-topic-plugin/besluit-topic-toolbar-dropdown.ts

@@ -2,7 +2,6 @@ import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
-import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { trackedFunction } from 'ember-resources/util/function';
 import { ELI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
@@ -48,6 +47,13 @@ export default class BesluitTopicToolbarDropdownComponent extends Component<Args
   get doc() {
     return this.controller.mainEditorState.doc;
   }
+  get decisionRange() {
+    return getCurrentBesluitRange(this.controller);
+  }
+
+  get showCard() {
+    return !!this.decisionRange;
+  }
 
   topics = trackedFunction(this, async () => {
     const result = await fetchBesluitTopics({
@@ -74,11 +80,7 @@ export default class BesluitTopicToolbarDropdownComponent extends Component<Args
       return;
     }
 
-    const besluit = findAncestorOfType(
-      this.controller.mainEditorState.selection,
-      this.controller.schema.nodes['besluit'],
-    );
-
+    const besluit = this.decisionRange;
     if (!besluit) {
       console.warn(
         `We have a besluit URI (${currentBesluitURI}), but can't find a besluit ancestor`,
@@ -114,10 +116,6 @@ export default class BesluitTopicToolbarDropdownComponent extends Component<Args
     }
   }
 
-  get showCard() {
-    return !!getCurrentBesluitRange(this.controller);
-  }
-
   @action
   upsertBesluitTopic(selected: BesluitTopic[]) {
     this.besluitTopicsSelected = selected;

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -4,11 +4,9 @@ import { action } from '@ember/object';
 import { addProperty, removeProperty } from '@lblod/ember-rdfa-editor/commands';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
-import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
 import fetchBesluitTypes, {
   BesluitType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
-import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { trackedFunction } from 'ember-resources/util/function';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
@@ -18,6 +16,7 @@ import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/i
 import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
 import { CircleXIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-x';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
 
 type Args = {
   controller: SayController;
@@ -65,20 +64,8 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     return types;
   });
 
-  get currentBesluitRange(): ResolvedPNode | undefined {
-    const selection = this.controller.mainEditorState.selection;
-    const besluit = findAncestorOfType(
-      selection,
-      this.controller.schema.nodes['besluit'],
-    );
-    if (!besluit) {
-      return undefined;
-    }
-    return {
-      node: besluit.node,
-      from: besluit.start - 1,
-      to: besluit.start + besluit.node.nodeSize - 1,
-    };
+  get currentBesluitRange() {
+    return getCurrentBesluitRange(this.controller);
   }
 
   get currentBesluitURI() {
@@ -98,10 +85,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     if (!this.currentBesluitURI || !this.types.value) {
       return;
     }
-    const besluit = findAncestorOfType(
-      this.controller.mainEditorState.selection,
-      this.controller.schema.nodes['besluit'],
-    );
+    const besluit = this.currentBesluitRange;
     if (!besluit) {
       console.warn(
         `We have a besluit URI (${this.currentBesluitURI}), but can't find a besluit ancestor`,

package/addon/components/decision-plugin/decision-plugin-card.gts

@@ -0,0 +1,231 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import {
+  insertMotivation,
+  insertArticleContainer,
+  insertDescription,
+  insertTitle,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands';
+import type { PNode, SayController, Selection } from '@lblod/ember-rdfa-editor';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { findAncestors } from '@lblod/ember-rdfa-editor/utils/position-utils';
+import {
+  getOutgoingTriple,
+  hasOutgoingNamedNodeTriple,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import {
+  BESLUIT,
+  ELI,
+  PROV,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { NodeWithPos } from '@curvenote/prosemirror-utils';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { on } from '@ember/modifier';
+import { not } from 'ember-truth-helpers';
+import t from 'ember-intl/helpers/t';
+import { TemplateOnlyComponent } from '@ember/component/template-only';
+
+interface DecisionCardOptions {
+  articleUriGenerator?: () => string;
+}
+interface Sig {
+  Args: {
+    controller: SayController;
+    options?: DecisionCardOptions;
+  };
+}
+
+export default class DecisionPluginCard extends Component<Sig> {
+  @service declare intl: IntlService;
+
+  get controller() {
+    return this.args.controller;
+  }
+  get selection(): Selection {
+    return this.controller.mainEditorState.selection;
+  }
+
+  get decisionNodeLocation(): NodeWithPos | null {
+    return (
+      findAncestors(this.selection.$from, (node: PNode) => {
+        return hasOutgoingNamedNodeTriple(
+          node.attrs,
+          RDF('type'),
+          BESLUIT('Besluit'),
+        );
+      })[0] ?? null
+    );
+  }
+
+  @action
+  focus() {
+    this.controller.focus();
+  }
+  get canInsertTitle() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(this.decisionNodeLocation.node.attrs, ELI('title'))
+    );
+  }
+  @action
+  insertTitle() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertTitle({
+          placeholderText: this.intl.t(
+            'besluit-plugin.placeholder.decision-title',
+          ),
+          decisionLocation: this.decisionNodeLocation,
+        }),
+        { view: this.controller.mainEditorView },
+      );
+    }
+    this.focus();
+  }
+  get canInsertDescription() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(
+        this.decisionNodeLocation.node.attrs,
+        ELI('description'),
+      )
+    );
+  }
+  @action
+  insertDescription() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertDescription({
+          placeholderText: this.intl.t(
+            'besluit-plugin.placeholder.decision-description',
+          ),
+          decisionLocation: this.decisionNodeLocation,
+        }),
+        {
+          view: this.controller.mainEditorView,
+        },
+      );
+    }
+    this.focus();
+  }
+
+  get canInsertMotivation() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(
+        this.decisionNodeLocation.node.attrs,
+        BESLUIT('motivering'),
+      )
+    );
+  }
+
+  @action
+  insertMotivation() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertMotivation({
+          intl: this.intl,
+          decisionLocation: this.decisionNodeLocation,
+        }),
+        {
+          view: this.controller.mainEditorView,
+        },
+      );
+    }
+    this.focus();
+  }
+
+  get missingArticleBlock() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(this.decisionNodeLocation.node.attrs, PROV('value'))
+    );
+  }
+  @action
+  insertArticleBlock() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertArticleContainer({
+          intl: this.intl,
+          decisionLocation: this.decisionNodeLocation,
+          articleUriGenerator: this.args.options?.articleUriGenerator,
+        }),
+        {
+          view: this.controller.mainEditorView,
+        },
+      );
+    }
+    this.focus();
+  }
+
+  <template>
+    {{#if this.canInsertTitle}}
+      <ValidationCard
+        @enabled={{this.canInsertTitle}}
+        @title={{t 'besluit-plugin.missing-title-warning'}}
+        @onClickFix={{this.insertTitle}}
+      >
+        {{t 'besluit-plugin.insert.decision-title'}}
+      </ValidationCard>
+    {{/if}}
+    {{#if this.canInsertDescription}}
+      <ValidationCard
+        @enabled={{this.canInsertDescription}}
+        @title={{t 'besluit-plugin.missing-description-warning'}}
+        @onClickFix={{this.insertDescription}}
+      >
+        {{t 'besluit-plugin.insert.description'}}
+      </ValidationCard>
+    {{/if}}
+    {{#if this.canInsertMotivation}}
+      <ValidationCard
+        @enabled={{this.canInsertMotivation}}
+        @title={{t 'besluit-plugin.missing-motivation-warning'}}
+        @onClickFix={{this.insertMotivation}}
+      >
+        {{t 'besluit-plugin.insert.motivation'}}
+      </ValidationCard>
+    {{/if}}
+    {{#if this.missingArticleBlock}}
+      <ValidationCard
+        @enabled={{this.missingArticleBlock}}
+        @title={{t 'besluit-plugin.missing-article-block-warning'}}
+        @onClickFix={{this.insertArticleBlock}}
+      >
+        {{t 'besluit-plugin.insert.article-block'}}
+      </ValidationCard>
+    {{/if}}
+  </template>
+}
+interface ValidationCardSig {
+  Args: {
+    enabled: boolean;
+    onClickFix: () => void;
+    title: string;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+const ValidationCard: TemplateOnlyComponent<ValidationCardSig> = <template>
+  <AuAlert
+    class='say-validation-alert'
+    @skin='warning'
+    @closable={{false}}
+    @icon={{AlertTriangleIcon}}
+    @title={{@title}}
+  >
+    <AuButton
+      @iconAlignment='left'
+      @skin='link-secondary'
+      @disabled={{not @enabled}}
+      {{on 'click' @onClickFix}}
+    >
+      {{yield}}
+    </AuButton>
+  </AuAlert>
+</template>;

package/addon/components/decision-plugin/insert-article.gts

@@ -0,0 +1,81 @@
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import insertArticle from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands/insert-article-command';
+import { buildArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/utils/build-article-structure';
+import t from 'ember-intl/helpers/t';
+import { not } from 'ember-truth-helpers';
+
+export interface InsertArticleOptions {
+  uriGenerator?: () => string;
+}
+interface Sig {
+  Args: { controller: SayController; options?: InsertArticleOptions };
+}
+export default class InsertArticleComponent extends Component<Sig> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+  get decisionRange() {
+    return getCurrentBesluitRange(this.controller);
+  }
+  get decisionLocation() {
+    return this.decisionRange
+      ? { pos: this.decisionRange.from, node: this.decisionRange.node }
+      : null;
+  }
+  get canInsert() {
+    if (!this.decisionLocation) {
+      return false;
+    }
+    const article = buildArticleStructure(
+      this.schema,
+      this.args.options?.uriGenerator,
+    );
+    return this.controller.checkCommand(
+      insertArticle({ node: article, decisionLocation: this.decisionLocation }),
+    );
+  }
+
+  @action
+  doInsert() {
+    const structureNode = buildArticleStructure(
+      this.schema,
+      this.args.options?.uriGenerator,
+    );
+    if (!structureNode) {
+      return;
+    }
+    if (!this.decisionLocation) {
+      return;
+    }
+    this.controller.doCommand(
+      insertArticle({
+        node: structureNode,
+        decisionLocation: this.decisionLocation,
+      }),
+    );
+    this.controller.focus();
+  }
+
+  <template>
+    <li class='au-csidebar-list__item'>
+      <AuButton
+        @icon='add'
+        @iconAlignment='left'
+        @skin='link'
+        @disabled={{not this.canInsert}}
+        {{on 'click' this.doInsert}}
+      >
+        {{t 'besluit-plugin.insert.article'}}
+      </AuButton>
+    </li>
+  </template>
+}

package/addon/components/hover-tooltip.gts

@@ -0,0 +1,68 @@
+import { hash } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FunctionBasedModifier, modifier } from 'ember-modifier';
+import { Velcro } from 'ember-velcro';
+import { Signature as VelcroModifierSignature } from 'ember-velcro/modifiers/velcro';
+import { ModifierLike } from '@glint/template';
+export type Placement = VelcroModifierSignature['Args']['Named']['placement'];
+
+interface HoverModifierSig {
+  Element: HTMLElement;
+}
+interface Sig {
+  Args: { placement?: Placement };
+  Blocks: {
+    hover: [
+      hover: {
+        velcroHook: ModifierLike<Velcro['velcroHook']>;
+        handleHover: ModifierLike<FunctionBasedModifier<HoverModifierSig>>;
+      },
+    ];
+    tooltip: [loop: ModifierLike<Velcro['velcroLoop']>];
+  };
+}
+
+export default class HoverTooltip extends Component<Sig> {
+  hover = modifier<HoverModifierSig>(
+    (element) => {
+      element.addEventListener('mouseenter', this.showTooltip);
+      element.addEventListener('mouseleave', this.hideTooltip);
+      element.addEventListener('focus', this.showTooltip);
+      element.addEventListener('blur', this.hideTooltip);
+      return () => {
+        element.removeEventListener('mouseenter', this.showTooltip);
+        element.removeEventListener('mouseleave', this.hideTooltip);
+        element.removeEventListener('focus', this.showTooltip);
+        element.removeEventListener('blur', this.hideTooltip);
+      };
+    },
+    { eager: false },
+  );
+  @tracked tooltipOpen = false;
+
+  get placement(): Placement | undefined {
+    return this.args.placement ?? 'top';
+  }
+
+  showTooltip = () => {
+    this.tooltipOpen = true;
+  };
+
+  hideTooltip = () => {
+    this.tooltipOpen = false;
+  };
+  <template>
+    <Velcro @placement={{this.placement}} as |velcro|>
+      {{#let velcro.loop as |loop|}}
+        {{yield
+          (hash velcroHook=velcro.hook handleHover=(modifier this.hover))
+          to='hover'
+        }}
+        {{#if this.tooltipOpen}}
+          {{yield loop to='tooltip'}}
+        {{/if}}
+      {{/let}}
+    </Velcro>
+  </template>
+}

package/addon/components/prosemirror-editor.hbs

@@ -0,0 +1,15 @@
+{{! @glint-nocheck: not typesafe yet }}
+{{! template-lint-disable no-bare-strings  }}
+{{#if @inline}}
+  <span
+    {{did-insert this.handleInit}}
+    {{did-update this.onContentUpdate @content}}
+    ...attributes
+  />
+{{else}}
+  <div
+    {{did-insert this.handleInit}}
+    {{did-update this.onContentUpdate @content}}
+    ...attributes
+  />
+{{/if}}

package/addon/components/prosemirror-editor.ts

@@ -0,0 +1,98 @@
+import {
+  EditorState,
+  NodeSelection,
+  ProseParser,
+  SayController,
+  SayView,
+  Schema,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+type Args = {
+  onInit?(view: SayView): void;
+  onUpdate?(content: string): void;
+  onFocus?(view: SayView): void;
+  getPos(): number;
+  schema: Schema;
+  content?: string;
+  inline?: boolean;
+  controller: SayController;
+  outerView: SayView;
+};
+
+export default class ProseMirrorEditor extends Component<Args> {
+  view?: SayView;
+
+  initialContent: string;
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    this.initialContent = this.args.content || '';
+  }
+  get outerView(): SayView {
+    return this.args.outerView;
+  }
+  @action
+  handleInit(target: HTMLElement) {
+    const state = EditorState.create({ schema: this.args.schema });
+    const parser = ProseParser.fromSchema(this.args.schema);
+
+    this.view = new SayView(
+      { mount: target },
+      {
+        state,
+        domParser: parser,
+        dispatchTransaction: this.dispatch,
+        handleDOMEvents: {
+          mousedown: () => {
+            // Kludge to prevent issues due to the fact that the whole
+            // footnote is node-selected (and thus DOM-selected) when
+            // the parent editor is focused.
+
+            if (this.outerView.hasFocus()) this.view?.focus();
+          },
+          focus: () => {
+            const pos = this.args.getPos();
+            if (pos !== undefined) {
+              const outerSelectionTr = this.outerView.state.tr;
+              const outerSelection = new NodeSelection(
+                this.outerView.state.doc.resolve(pos),
+              );
+              outerSelectionTr.setSelection(outerSelection);
+              this.outerView.dispatch(outerSelectionTr);
+            }
+
+            if (this.view) {
+              this.args.controller.setActiveView(this.view);
+              this.args.onFocus?.(this.view);
+            }
+          },
+        },
+      },
+    );
+    if (this.args.content) {
+      this.view.setHtmlContent(this.initialContent);
+    }
+    this.args.onInit?.(this.view);
+  }
+
+  @action
+  onContentUpdate() {
+    if (this.view) {
+      const newContent = this.args.content;
+      const currentContent = this.view.htmlContent;
+      if (currentContent !== newContent) {
+        this.view.setHtmlContent(newContent ?? '');
+      }
+    }
+  }
+
+  dispatch = (tr: Transaction) => {
+    if (this.view) {
+      const newState = this.view.state.apply(tr);
+      this.view.updateState(newState);
+      this.args.onUpdate?.(this.view.htmlContent);
+    }
+  };
+}

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.ts

@@ -1,4 +1,3 @@
-import { findParentNode } from '@curvenote/prosemirror-utils';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -6,6 +5,7 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
 import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
 
 /**
  * Card displaying a hint of the Date plugin
@@ -53,24 +53,21 @@ export default class RoadsignRegulationCard extends Component<Args> {
   }
 
   get showCard() {
-    const selection = this.controller.mainEditorState.selection;
-    const besluitNode = findParentNode((node) => {
-      if (node.type === this.schema.nodes['besluit']) {
-        const properties = node.attrs.properties as OutgoingTriple[];
-        const decisionHasAcceptedType = Boolean(
-          properties.find((property) => {
-            const { predicate, object } = property;
-            return (
-              RDF('type').matches(predicate) &&
-              object.termType === 'NamedNode' &&
-              acceptedTypes.includes(object.value)
-            );
-          }),
-        );
-        return decisionHasAcceptedType;
-      }
+    const decisionRange = getCurrentBesluitRange(this.controller);
+    if (!decisionRange) {
       return false;
-    })(selection);
-    return !!besluitNode;
+    }
+    const decisionNode = decisionRange.node;
+    const properties: OutgoingTriple[] = decisionNode.attrs.properties;
+
+    const decisionHasAcceptedType = properties.some((property) => {
+      const { predicate, object } = property;
+      return (
+        RDF('type').matches(predicate) &&
+        object.termType === 'NamedNode' &&
+        acceptedTypes.includes(object.value)
+      );
+    });
+    return decisionHasAcceptedType;
   }
 }