@lblod/ember-rdfa-editor-lblod-plugins 16.4.0 → 17.0.0-dev.f473cdfb5868261b49cdae52ea2558970c082d01

package/.changeset/afraid-tips-visit.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Remove `@import "ember-appuniversum"` statements from plugin sass modules in order to prevent style overrding.

package/.changeset/chilly-ravens-think.md

@@ -0,0 +1,6 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+- Addition of the `say-template-comment` class to the static version of template comments.
+- Addition of some extra styles to the `say-template-comment` class.

package/.changeset/hot-owls-laugh.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+GN-4650: Fix behavior of "Insert snippet" button

package/.changeset/olive-pets-cheer.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+GN-4650: Snippet selection placeholder in template

package/.changeset/smooth-fireants-doubt.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Add helper function to help with locale selection and add translation note to readme

package/.changeset/tall-carrots-ring.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Fix template-comment padding

package/.changeset/wet-baboons-serve.md

@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor-lblod-plugins": minor
+---
+
+Ensure that variables are node-selected/focused after insertion

package/.changeset/witty-suns-speak.md

@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor-lblod-plugins": patch
+---
+
+Allow to insert structure even if insertion range does not have RDFA attributes.  

package/.woodpecker/.release-commit.yml

@@ -0,0 +1,18 @@
+steps:
+  install:
+    image: node:20-slim
+    commands:
+      - corepack enable
+      - pnpm i --frozen-lockfile
+  version:
+    image: node:20-slim
+    commands:
+      - npm version --no-git-tag-version $(npm pkg get version | sed 's/"//g')-dev.${CI_COMMIT_SHA}
+  release:
+    image: plugins/npm
+    settings:
+      token:
+        from_secret: npm_access_token
+      tag: dev
+when:
+  - event: push

package/.woodpecker/.release.yml

@@ -0,0 +1,21 @@
+steps:
+  install:
+    image: node:20-slim
+    commands:
+      - corepack enable
+      - pnpm i --frozen-lockfile
+  release:
+    image: plugins/npm
+    settings:
+      token:
+        from_secret: npm_access_token
+  push-tagged-build:
+    image: plugins/docker
+    settings:
+      repo: lblod/ember-rdfa-editor-lblod-plugins
+      tags: '${CI_COMMIT_TAG##v}'
+      purge: true
+    secrets: [docker_username, docker_password]
+when:
+  event: tag
+  ref: refs/tags/v*

package/.woodpecker/.verify-pr.yml

@@ -0,0 +1,30 @@
+steps:
+  install:
+    image: node:20-slim
+    commands:
+      - corepack enable
+      - pnpm i --frozen-lockfile
+  lint-js:
+    image: node:20-slim
+    group: lint
+    commands:
+      - corepack enable
+      - pnpm lint:js
+  lint-hbs:
+    image: node:20-slim
+    group: lint
+    commands:
+      - corepack enable
+      - pnpm lint:hbs
+  test:
+    image: danlynn/ember-cli:4.12.1
+    commands:
+      - corepack enable
+      - pnpm test:ember
+  precompile:
+    image: node:20-slim
+    commands:
+      - corepack enable
+      - pnpm prepack
+when:
+  - evaluate: 'CI_PIPELINE_EVENT == "pull_request" && not (CI_COMMIT_PULL_REQUEST_LABELS contains "dependabot")'

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 17.0.0
+
+### Major Changes
+
+- [#407](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/407) [`f2a7660`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f2a7660d32c6c54016c0547cd71e25ae239168a8) Thanks [@piemonkey](https://github.com/piemonkey)! - BREAKING: Update ember-appuniversum dependency to 3.4.1 in order to support the use of inline svg components for e.g. embeddable
+
+### Minor Changes
+
+- [#407](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/407) [`d4b8814`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d4b8814df14a5f66354ce3948db898c928a658a7) Thanks [@piemonkey](https://github.com/piemonkey)! - Modernise typescript configuration
+
+### Patch Changes
+
+- [#407](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/407) [`f7d257b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f7d257bbc03e7b7f9375ade79a08f9e103e0c3df) Thanks [@piemonkey](https://github.com/piemonkey)! - Update deprecated use of AppUniversum
+
 ## 16.4.0
 
 ### Minor Changes

package/Dockerfile

@@ -1,12 +1,14 @@
-FROM madnificent/ember:4.12.1-node_18 as builder
+FROM node:20-slim AS builder
 
 LABEL maintainer="info@redpencil.io"
 
+RUN corepack enable
+RUN corepack prepare pnpm@latest-8 --activate
 WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm ci
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm i --frozen-lockfile
 COPY . .
-RUN ember build -prod
+RUN pnpm build
 
 FROM semtech/static-file-service:0.2.0
 COPY --from=builder /app/dist /data

package/addon/commands/index.ts

@@ -0,0 +1 @@
+export { default as replaceSelectionWithAndSelectNode } from './replace-selection-and-select-node';

package/addon/commands/replace-selection-and-select-node.ts

@@ -0,0 +1,24 @@
+import { Command, NodeSelection, PNode } from '@lblod/ember-rdfa-editor';
+
+const replaceSelectionWithAndSelectNode = (node: PNode): Command => {
+  return (state, dispatch) => {
+    if (!node.type.spec.selectable) {
+      return false;
+    }
+
+    if (dispatch) {
+      const tr = state.tr;
+      tr.replaceSelectionWith(node);
+      if (tr.selection.$anchor.nodeBefore) {
+        const resolvedPos = tr.doc.resolve(
+          tr.selection.anchor - tr.selection.$anchor.nodeBefore?.nodeSize,
+        );
+        tr.setSelection(new NodeSelection(resolvedPos));
+      }
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+
+export default replaceSelectionWithAndSelectNode;

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

@@ -1,7 +1,8 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div>
   {{#each this.structureTypes as |structureType|}}
   <li class="au-c-list__item">
-    <AuButton @icon="add" @iconAlignment="left" @skin="link" @disabled={{not (this.canInsertStructure structureType)}}
+    <AuButton @icon={{this.AddIcon}} @iconAlignment="left" @skin="link" @disabled={{not (this.canInsertStructure structureType)}}
       {{on 'click' (fn this.insertStructure structureType)}}>
       {{t structureType.translations.insert}}
     </AuButton>

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

@@ -8,12 +8,14 @@ import {
 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';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 type Args = {
   controller: SayController;
   options: ArticleStructurePluginOptions;
 };
 export default class EditorPluginsArticleStructureCardComponent extends Component<Args> {
+  AddIcon = AddIcon;
   @service declare intl: IntlService;
 
   get structureTypes() {

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#unless this.isOutsideStructure}}
   <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
     <c.header class="au-u-hidden-visually">
@@ -7,7 +8,7 @@
       <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny" as |Item|>
         <Item>
           <AuButton
-            @icon="chevron-up"
+            @icon={{this.ChevronUpIcon}}
             @iconAlignment="left"
             @skin="link"
             @disabled={{not this.canMoveUp}}
@@ -17,7 +18,7 @@
         </Item>
         <Item>
           <AuButton
-            @icon="chevron-down"
+            @icon={{this.ChevronDownIcon}}
             @iconAlignment="left"
             @skin="link"
             @disabled={{not this.canMoveDown}}
@@ -30,7 +31,7 @@
             <HoverTooltip>
               <:hover as |hover|>
                 <AuButton
-                  @icon="bin"
+                  @icon={{this.BinIcon}}
                   @iconAlignment="left"
                   @skin="link"
                   @alert={{true}}
@@ -55,7 +56,7 @@
             <HoverTooltip>
               <:hover as |hover|>
                 <AuButton
-                  @icon="bin"
+                  @icon={{this.BinIcon}}
                   @iconAlignment="left"
                   @skin="link"
                   aria-describedby="remove-content-tooltip"
@@ -93,7 +94,7 @@
                 type="number"
                 min="1"
               />
-          {{/let}}
+            {{/let}}
           </AuFormRow>
           <AuButton
             @iconAlignment="left"
@@ -115,4 +116,4 @@
       </AuList>
     </c.content>
   </AuCard>
-{{/unless}}
+{{/unless}}

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

@@ -12,6 +12,9 @@ import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugi
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
+import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
+import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
+import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
 
 type Args = {
   controller: SayController;
@@ -19,6 +22,9 @@ type Args = {
 };
 
 export default class EditorPluginsStructureCardComponent extends Component<Args> {
+  BinIcon = BinIcon;
+  ChevronDownIcon = ChevronDownIcon;
+  ChevronUpIcon = ChevronUpIcon;
   @service declare intl: IntlService;
   @tracked removeStructureContent = false;
   @tracked startNumber: number | null = null;
@@ -36,11 +42,45 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
     this.controller.focus();
   }
 
+  @action
+  removeStructure(withContent: boolean) {
+    if (this.structure && this.currentStructureType) {
+      if (withContent || this.currentStructureType.noUnwrap) {
+        this.controller.doCommand(
+          removeStructure(this.structure, this.structureTypes),
+          { view: this.controller.mainEditorView },
+        );
+      } else {
+        this.controller.doCommand(
+          unwrapStructure(
+            {
+              ...this.structure,
+              type: this.currentStructureType,
+            },
+            this.structureTypes,
+          ),
+          { view: this.controller.mainEditorView },
+        );
+      }
+    }
+    this.controller.focus();
+  }
+
+  @action
+  setRemoveStructureContent(value: boolean) {
+    this.removeStructureContent = value;
+  }
+
   @action
   setStructureStartNumber() {
-    if (this.startNumber) {
+    if (this.startNumber && this.structure && this.currentStructureType) {
       this.controller.doCommand(
-        setStructureStartNumber(this.structureTypes, this.startNumber),
+        setStructureStartNumber(
+          this.structure,
+          this.structureTypes,
+          this.startNumber,
+        ),
+        { view: this.controller.mainEditorView },
       );
 
       this.startNumber = null;
@@ -49,11 +89,14 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
 
   @action
   resetStructureStartNumber() {
-    this.controller.doCommand(
-      setStructureStartNumber(this.structureTypes, null),
-    );
+    if (this.structure) {
+      this.controller.doCommand(
+        setStructureStartNumber(this.structure, this.structureTypes, null),
+        { view: this.controller.mainEditorView },
+      );
 
-    this.startNumber = null;
+      this.startNumber = null;
+    }
   }
 
   get structureNumber() {
@@ -87,35 +130,6 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
     this.startNumber = parseInt(target.value);
   };
 
-  @action
-  removeStructure(withContent: boolean) {
-    if (this.structure && this.currentStructureType) {
-      if (withContent || this.currentStructureType.noUnwrap) {
-        this.controller.doCommand(
-          removeStructure(this.structure, this.structureTypes),
-          { view: this.controller.mainEditorView },
-        );
-      } else {
-        this.controller.doCommand(
-          unwrapStructure(
-            {
-              ...this.structure,
-              type: this.currentStructureType,
-            },
-            this.structureTypes,
-          ),
-          { view: this.controller.mainEditorView },
-        );
-      }
-    }
-    this.controller.focus();
-  }
-
-  @action
-  setRemoveStructureContent(value: boolean) {
-    this.removeStructureContent = value;
-  }
-
   get structureTypes() {
     return this.args.options;
   }

package/addon/components/au-native-input.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if @icon}}
   <span class='au-c-input-wrapper {{this.iconAlignment}} {{this.width}}'>
     <input

package/addon/components/au-native-input.ts

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { ComponentLike } from '@glint/template';
 
 interface Args {
   width?: 'block';
@@ -7,7 +8,7 @@ interface Args {
   warning?: boolean;
   disabled?: boolean;
   type?: string;
-  icon?: string;
+  icon?: ComponentLike;
 }
 
 export default class AuNativeInput extends Component<Args> {

package/addon/components/besluit-type-plugin/besluit-type-select.hbs

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div ...attributes>
   <PowerSelect
     @renderInPlace={{true}}
@@ -16,7 +17,7 @@
   {{#if @showWarningWhenEmpty}}
     {{#unless @selected}}
       <AuAlert
-        @icon="alert-triangle"
+        @icon={{this.AlertTriangleIcon}}
         @title={{t "besluit-type-plugin.alert-title"}}
         @skin="warning"
         @size="small"
@@ -25,4 +26,4 @@
       </AuAlert>
     {{/unless}}
   {{/if}}
-</div>
+</div>

package/addon/components/besluit-type-plugin/besluit-type-select.ts

@@ -2,11 +2,15 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+
 type Args = {
   besluitTypes: BesluitType[];
 };
 
 export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Args> {
+  AlertTriangleIcon = AlertTriangleIcon;
+
   @tracked besluitTypes;
   constructor(parent: unknown, args: Args) {
     super(parent, args);

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <div
   {{did-update this.updateBesluitTypes @controller.mainEditorState}}
   {{did-update this.updateBesluitTypes this.types.value}}
@@ -6,7 +7,7 @@
     {{#if this.types.isError}}
       <AuPill
         @skin='error'
-        @icon='circle-x'
+        @icon={{this.CircleXIcon}}
         @iconAlignment='left'
         class='au-c-pill--link besluit-toolbar-pill'
         {{on 'click' this.toggleCard}}
@@ -26,7 +27,7 @@
         </AuPill>
       {{else}}
         <AuPill
-          @icon='alert-triangle'
+          @icon={{this.AlertTriangleIcon}}
           @iconAlignment='left'
           @skin='link'
           {{on 'click' this.toggleCard}}
@@ -51,14 +52,14 @@
           <AuAlert
             @title={{t 'besluit-type-plugin.error-title'}}
             @skin='error'
-            @icon='cross'
+            @icon={{this.CrossIcon}}
           >
             <p>
               {{t 'besluit-type-plugin.error-first-body'}}
               {{! template-lint-disable no-bare-strings  }}
               <AuLinkExternal
                 href='mailto:gelinktnotuleren@vlaanderen.be'
-                @icon='mail'
+                @icon={{this.MailIcon}}
                 @iconAlignment='left'
               >
                 GelinktNotuleren@vlaanderen.be

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

@@ -1,13 +1,10 @@
 import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import {
-  addType,
-  removeType,
-} from '@lblod/ember-rdfa-editor/commands/type-commands';
+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 { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
 import fetchBesluitTypes, {
   BesluitType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
@@ -15,12 +12,12 @@ import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugi
 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';
-
-declare module 'ember__owner' {
-  export default interface Owner {
-    resolveRegistration(name: string): unknown;
-  }
-}
+import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+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';
 
 type Args = {
   controller: SayController;
@@ -28,6 +25,10 @@ type Args = {
 };
 
 export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
+  CircleIcon = CircleXIcon;
+  MailIcon = MailIcon;
+  CrossIcon = CrossIcon;
+  AlertTriangleIcon = AlertTriangleIcon;
   /**
    * Actual besluit type selected
    * @property besluitType
@@ -83,7 +84,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
   get currentBesluitURI() {
     if (this.currentBesluitRange) {
       const node = unwrap(this.doc.nodeAt(this.currentBesluitRange.from));
-      return getRdfaAttribute(node, 'resource').pop();
+      return node.attrs['subject'] as string | undefined;
     }
     return;
   }
@@ -101,11 +102,21 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
       this.controller.mainEditorState.selection,
       this.controller.schema.nodes['besluit'],
     );
-    const besluitTypeof = besluit?.node.attrs.typeof as string;
-    const besluitTypesUris = besluitTypeof.split(' ');
-    const besluitTypeRelevant = besluitTypesUris.find((type) =>
-      type.includes('https://data.vlaanderen.be/id/concept/BesluitType/'),
-    );
+    if (!besluit) {
+      console.warn(
+        `We have a besluit URI (${this.currentBesluitURI}), but can't find a besluit ancestor`,
+      );
+      return;
+    }
+    const besluitTypes = getOutgoingTripleList(besluit.node.attrs, RDF('type'));
+    const besluitTypeRelevant = besluitTypes.find(
+      (type) =>
+        type.object.termType === 'NamedNode' &&
+        type.object.value.includes(
+          'https://data.vlaanderen.be/id/concept/BesluitType/',
+        ),
+    )?.object.value;
+
     if (besluitTypeRelevant) {
       this.previousBesluitType = besluitTypeRelevant;
       const besluitType = this.findBesluitTypeByURI(besluitTypeRelevant);
@@ -197,16 +208,33 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
   }
 
   insert() {
-    if (this.besluitType && this.currentBesluitRange) {
+    const resource =
+      (this.currentBesluitRange &&
+        'node' in this.currentBesluitRange &&
+        (this.currentBesluitRange.node.attrs.subject as string)) ||
+      undefined;
+    if (this.besluitType && resource) {
       this.cardExpanded = false;
       if (this.previousBesluitType) {
         this.controller.doCommand(
-          removeType(this.currentBesluitRange.from, this.previousBesluitType),
+          removeProperty({
+            resource,
+            property: {
+              predicate: RDF('type').full,
+              object: sayDataFactory.namedNode(this.previousBesluitType),
+            },
+          }),
           { view: this.controller.mainEditorView },
         );
       }
       this.controller.doCommand(
-        addType(this.currentBesluitRange.from, this.besluitType.uri),
+        addProperty({
+          resource,
+          property: {
+            predicate: RDF('type').full,
+            object: sayDataFactory.namedNode(this.besluitType.uri),
+          },
+        }),
         { view: this.controller.mainEditorView },
       );
     }

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 {{#if this.showCard}}
   <AuCard
     @flex={{true}}
@@ -58,7 +59,7 @@
             @warning={{false}}
           >{{t 'citaten-plugin.search.term'}}</AuLabel>
           <AuNativeInput
-            @icon='search'
+            @icon={{this.SearchIcon}}
             @type='text'
             @width='block'
             @iconAlignment='right'
@@ -71,7 +72,7 @@
         <AuFormRow>
           <AuButton
             @skin='link'
-            @icon='search'
+            @icon={{this.SearchIcon}}
             @iconAlignment='left'
             {{on 'click' this.openSearchModal}}
           >{{t 'citaten-plugin.search.advanced'}}</AuButton>