@lblod/ember-rdfa-editor-lblod-plugins 16.2.0 → 16.3.0-dev.424040daafe67476c487af50caab14603f802c25

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/.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,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 16.3.0
+
+### Minor Changes
+
+- [#406](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/406) [`d07eb52`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d07eb52f7be0c08ae5bb563d69020574f0931088) Thanks [@elpoelma](https://github.com/elpoelma)! - Drop support for `@lblod/ember-rdfa-editor` `10.x` range.
+  This support was initially introduce to support `10.x` alpha releases of the editor.
+  We managed to release the new editor version as a `9.x` minor release (and the `10.x` releases are thus obsolete).
+
 ## 16.2.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/structure-card.hbs

@@ -93,7 +93,7 @@
                 type="number"
                 min="1"
               />
-          {{/let}}
+            {{/let}}
           </AuFormRow>
           <AuButton
             @iconAlignment="left"

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

@@ -36,11 +36,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 +83,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 +124,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/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,8 @@ 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';
 
 type Args = {
   controller: SayController;
@@ -83,7 +76,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 +94,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 +200,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.ts

@@ -14,7 +14,11 @@ import {
   CitationPlugin,
   CitationPluginEmberComponentConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
-import { SayController, Transaction } from '@lblod/ember-rdfa-editor';
+import {
+  DecorationSet,
+  SayController,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
 import { citedText } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cited-text';
 import {
   LEGISLATION_TYPE_CONCEPTS,
@@ -77,7 +81,7 @@ export default class CitationCardComponent extends Component<Args> {
     return this.args.config;
   }
 
-  get decorations() {
+  get decorations(): DecorationSet | undefined {
     return this.plugin.getState(this.controller.mainEditorState)?.highlights;
   }
 

package/addon/components/import-snippet-plugin/card.ts

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { action } from '@ember/object';
 import { ProseParser } from '@lblod/ember-rdfa-editor';
-import { SayController } from '@lblod/ember-rdfa-editor';
+import { SayController } from '@lblod/ember-rdfa-editor/index';
 import ImportRdfaSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/services/import-rdfa-snippet';
 import { RdfaSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/services/import-rdfa-snippet';
 import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
@@ -10,6 +10,11 @@ import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 type Args = {
   controller: SayController;
 };
+
+type InsertRange = {
+  from: number;
+  to: number;
+};
 export default class ImportSnippetPluginCard extends Component<Args> {
   @service declare importRdfaSnippet: ImportRdfaSnippet;
 
@@ -21,7 +26,7 @@ export default class ImportSnippetPluginCard extends Component<Args> {
     return this.importRdfaSnippet.snippetsForType('roadsign');
   }
 
-  get insertRange() {
+  get insertRange(): InsertRange {
     const { selection } = this.controller.mainEditorState;
     const besluit = findParentNodeOfType(this.controller.schema.nodes.besluit)(
       selection,

package/addon/components/snippet-plugin/search-modal.hbs

@@ -41,7 +41,7 @@
             <div class='au-u-margin'>
               <AuLoader @padding='large' />
               <span class='au-u-hidden-visually'>
-                {{t 'snippet-plugin.alert.loading'}}
+                {{t 'snippet-plugin.modal.alert.loading'}}
               </span>
             </div>
           {{else}}

package/addon/components/snippet-plugin/snippet-insert-rdfa.hbs

@@ -0,0 +1,6 @@
+<SnippetPlugin::SnippetInsert
+  @config={{this.config}}
+  @controller={{this.controller}}
+  @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+  @disabled={{not this.showInsert}}
+/>

package/addon/components/snippet-plugin/snippet-insert-rdfa.ts

@@ -0,0 +1,78 @@
+import { isResourceNode } from '@lblod/ember-rdfa-editor/utils/node-utils';
+import Component from '@glimmer/component';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { findParentNodeClosestToPos } from '@curvenote/prosemirror-utils';
+import {
+  getAssignedSnippetListsIdsFromProperties,
+  getSnippetListIdsProperties,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
+import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+
+interface Args {
+  controller: SayController;
+  config: SnippetPluginConfig;
+  node: ResolvedPNode;
+}
+
+export default class SnippetInsertRdfaComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get config() {
+    return this.args.config;
+  }
+
+  get node() {
+    return this.args.node;
+  }
+
+  get showInsert() {
+    return this.assignedSnippetListsIds.length > 0;
+  }
+
+  get snippetListIdsProperty(): OutgoingTriple[] | undefined {
+    const activeNode = this.node.value;
+    const activeNodeSnippetListIds = getSnippetListIdsProperties(activeNode);
+
+    if (activeNodeSnippetListIds.length > 0) {
+      return activeNodeSnippetListIds;
+    }
+
+    const doc = this.controller.mainEditorState.doc;
+
+    if (this.node.pos < 0) {
+      return undefined;
+    }
+
+    const pos = doc.resolve(this.node.pos);
+
+    let parentNode = findParentNodeClosestToPos(pos, (node) =>
+      isResourceNode(node),
+    );
+
+    while (parentNode) {
+      const properties = getSnippetListIdsProperties(parentNode.node);
+
+      if (properties.length > 0) {
+        return properties;
+      }
+
+      parentNode = findParentNodeClosestToPos(
+        doc.resolve(parentNode.pos),
+        (node) => isResourceNode(node),
+      );
+    }
+
+    return undefined;
+  }
+
+  get assignedSnippetListsIds(): string[] {
+    return getAssignedSnippetListsIdsFromProperties(
+      this.snippetListIdsProperty,
+    );
+  }
+}

package/addon/components/snippet-plugin/snippet-insert.hbs

@@ -3,6 +3,7 @@
     @icon='add'
     @iconAlignment='left'
     @skin='link'
+    @disabled={{this.disabled}}
     {{on 'click' this.openModal}}
   >
     {{t 'snippet-plugin.insert.title'}}

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

@@ -3,13 +3,20 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { ProseParser, SayController, Slice } from '@lblod/ember-rdfa-editor';
+import { htmlToDoc } from '@lblod/ember-rdfa-editor/utils/_private/html-utils';
+import {
+  ProseParser,
+  SayController,
+  Slice,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
 import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
 
 interface Args {
   controller: SayController;
   config: SnippetPluginConfig;
   assignedSnippetListsIds: string[];
+  disabled?: boolean;
 }
 
 export default class SnippetInsertComponent extends Component<Args> {
@@ -51,15 +58,26 @@ export default class SnippetInsertComponent extends Component<Args> {
     const documentDiv = parsed.querySelector('div[data-say-document="true"]');
 
     this.closeModal();
+    const parser = ProseParser.fromSchema(this.controller.schema);
 
     if (documentDiv) {
-      return this.controller.withTransaction((tr) =>
-        tr.replaceSelection(this.createSliceFromElement(documentDiv)),
-      );
+      return this.controller.withTransaction((tr: Transaction) => {
+        return tr.replaceSelectionWith(
+          htmlToDoc(content, {
+            schema: this.controller.schema,
+            parser,
+            editorView: this.controller.mainEditorView,
+          }),
+        );
+      });
     }
 
     this.controller.withTransaction((tr) =>
       tr.replaceSelection(this.createSliceFromElement(parsed)),
     );
   }
+
+  get disabled() {
+    return this.args.disabled ?? false;
+  }
 }

package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.hbs

@@ -41,7 +41,7 @@
             <div class='au-u-margin'>
               <AuLoader @padding='large' />
               <span class='au-u-hidden-visually'>
-                {{t 'snippet-plugin.alert.loading'}}
+                {{t 'snippet-plugin.modal.alert.loading'}}
               </span>
             </div>
           {{else}}

package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.ts

@@ -12,6 +12,7 @@ import {
   SnippetPluginConfig,
   SnippetList,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { trackedReset } from 'tracked-toolbox';
 
 interface Args {
   config: SnippetPluginConfig;
@@ -27,9 +28,8 @@ export default class SnippetListModalComponent extends Component<Args> {
   // Display
   @tracked error: unknown;
 
-  @tracked assignedSnippetListsIds: string[] = [
-    ...this.args.assignedSnippetListsIds,
-  ];
+  @trackedReset('args.assignedSnippetListsIds')
+  assignedSnippetListsIds: string[] = [...this.args.assignedSnippetListsIds];
 
   get config() {
     return this.args.config;

package/addon/components/snippet-plugin/snippet-list/snippet-list-view.hbs

@@ -14,8 +14,7 @@
         {{#each @snippetLists as |snippetList|}}
           <tr>
             <td class="selectColumn">
-              <AuControlCheckbox
-                @identifier={{snippetList.label}}
+              <AuCheckbox
                 @onChange={{fn this.onChange snippetList.id}}
                 @checked={{in-array @assignedSnippetListsIds snippetList.id}}
               />

package/addon/components/snippet-plugin/snippet-list-select-rdfa.hbs

@@ -0,0 +1,7 @@
+{{#if this.isResourceNode}}
+<SnippetPlugin::SnippetListSelect
+  @config={{this.config}}
+  @assignedSnippetListsIds={{this.assignedSnippetListsIds}}
+  @onSaveSnippetListIds={{this.saveChanges}}
+/>
+{{/if}}