@lblod/ember-rdfa-editor-lblod-plugins 28.0.0 → 28.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 28.1.0
+
+### Minor Changes
+
+- [#549](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/549) [`ab33ef7`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/ab33ef7e9ef6d237457db61d217f5286362ed74d) Thanks [@piemonkey](https://github.com/piemonkey)! - Change preview list to asynchronously load previews
+
+### Patch Changes
+
+- [#551](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/551) [`f88d903`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f88d903697e4f689a09cf2d364bf8c5b81bbbb19) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Change number variable modal to clarify the upper number is also included in the range
+
+- [#552](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/552) [`4cf94fd`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/4cf94fd78616a141265f09e8b403923e8018cd05) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Rename "citeeropschrift" to "citaat"
+
 ## 28.0.0
 
 ### Major Changes

package/addon/components/common/documents/preview.gts

@@ -1,4 +1,5 @@
 import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
 import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
 import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
 import { NavUpIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up';
@@ -7,6 +8,8 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
+import { task } from 'ember-concurrency';
 import t from 'ember-intl/helpers/t';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { PreviewableDocument } from './types';
@@ -35,6 +38,9 @@ export default class DocumentPreview<
 
   @action
   togglePreview() {
+    if (!this.isExpanded && this.contentTask.isIdle && !this.contentTask.last) {
+      this.contentTask.perform();
+    }
     this.isExpanded = !this.isExpanded;
   }
 
@@ -46,6 +52,14 @@ export default class DocumentPreview<
     this.args.toggleFavourite?.(this.args.doc);
   };
 
+  contentTask = task(async () => {
+    const content = await this.args.doc.content;
+    return content && htmlSafe(content);
+  });
+  get content() {
+    return this.contentTask.last?.value;
+  }
+
   <template>
     <div
       class='snippet-preview {{if this.isExpanded "snippet-preview--expanded"}}'
@@ -54,7 +68,7 @@ export default class DocumentPreview<
       <div class='snippet-preview__header'>
         <div
           role='button'
-          title={{t 'snippet-plugin.modal.preview-button.title'}}
+          title={{t 'common.preview-list.preview-button.title'}}
           {{on 'click' this.togglePreview}}
           {{! template-lint-disable require-presentational-children}}
         >
@@ -86,12 +100,12 @@ export default class DocumentPreview<
         </div>
         <div
           role='button'
-          title={{t 'snippet-plugin.modal.select-button.title'}}
+          title={{t 'common.preview-list.select-button.title'}}
           {{on 'click' this.onInsert}}
           {{! template-lint-disable require-presentational-children}}
         >
           <AuButton class='snippet-preview__insert-button' @skin='naked'>
-            {{t 'snippet-plugin.modal.select-button.label'}}
+            {{t 'common.preview-list.select-button.label'}}
           </AuButton>
         </div>
 
@@ -100,10 +114,14 @@ export default class DocumentPreview<
         <div
           class='say-editor say-content rdfa-annotations rdfa-annotations-highlight rdfa-annotations-hover snippet-preview__content'
         >
-          {{#if @doc.content}}
-            {{@doc.content}}
+          {{#if this.content}}
+            {{this.content}}
+          {{else if this.contentTask.isRunning}}
+            <AuLoader @hideMessage={{true}}>
+              {{t 'common.search.loading'}}
+            </AuLoader>
           {{else}}
-            <p class='au-u-italic'>{{t 'snippet-plugin.modal.no-content'}}</p>
+            <p class='au-u-italic'>{{t 'common.preview-list.no-content'}}</p>
           {{/if}}
         </div>
       {{/if}}

package/addon/components/common/documents/types.ts

@@ -1,19 +1,4 @@
-import { htmlSafe } from '@ember/template';
-
-import { optionMapOr } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
-
-interface PreviewableDocumentArgs {
+export interface PreviewableDocument {
   title: string | null;
-  content: string | null;
-}
-
-export class PreviewableDocument {
-  content: SafeString | null;
-  title: string | null;
-
-  constructor({ title, content }: PreviewableDocumentArgs) {
-    this.content = optionMapOr(null, htmlSafe, content);
-    this.title = title;
-  }
+  content: string | Promise<string | null> | null;
 }

package/addon/components/snippet-plugin/nodes/snippet.gts

@@ -197,7 +197,7 @@ export default class SnippetNode extends Component<Signature> {
     }
     this.controller.doCommand(
       insertSnippet({
-        content: snippet.content?.toHTML() ?? '',
+        content: snippet.content ?? '',
         title: snippet.title ?? '',
         listProperties: {
           placeholderId: this.node.attrs.placeholderId,

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

@@ -64,7 +64,7 @@ export default class SnippetInsertComponent extends Component<Sig> {
     if (this.args.listProperties) {
       this.controller.doCommand(
         insertSnippet({
-          content: snippet.content?.toHTML() ?? '',
+          content: snippet.content ?? '',
           title: snippet.title ?? '',
           listProperties: this.args.listProperties,
           allowMultipleSnippets: this.args.allowMultipleSnippets,

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

@@ -1,11 +1,6 @@
-import { htmlSafe } from '@ember/template';
-
-import {
-  type Option,
-  optionMapOr,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { PreviewableDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/documents/types';
+import { type Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { dateValue } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
-import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
 
 export const DEFAULT_CONTENT_STRING = 'block+';
 
@@ -21,13 +16,13 @@ interface SnippetArgs {
   content: string | null;
 }
 
-export class Snippet {
-  content: SafeString | null;
+export class Snippet implements PreviewableDocument {
+  content: string | null;
   createdOn: string | null;
   title: string | null;
 
   constructor({ title, createdOn, content }: SnippetArgs) {
-    this.content = optionMapOr(null, htmlSafe, content);
+    this.content = content;
     this.createdOn = dateValue(createdOn ?? undefined);
     this.title = title;
   }

package/addon/plugins/snippet-plugin/utils/collate-imported-resources.ts

@@ -1,14 +1,17 @@
 import { IMPORTED_RESOURCES_ATTR } from '@lblod/ember-rdfa-editor/plugins/imported-resources';
 import { jsonParse } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { type Snippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import { optionMap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 export function collateImportedResources(snippets: Snippet[]): string[] {
   const domParser = new DOMParser();
   return [
     ...new Set(
       snippets.flatMap(({ content }) => {
-        const htmlNode =
-          content && domParser.parseFromString(content.toString(), 'text/html');
+        const htmlNode = optionMap(
+          (some) => domParser.parseFromString(some, 'text/html'),
+          content,
+        );
         const imports = jsonParse(
           htmlNode
             ?.querySelector('[data-say-document]')

package/declarations/addon/components/common/documents/preview.d.ts

@@ -17,5 +17,7 @@ export default class DocumentPreview<Doc extends PreviewableDocument> extends Co
     togglePreview(): void;
     get isFavourite(): boolean | undefined;
     toggleFavourite: (event: MouseEvent) => void;
+    contentTask: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<"" | import("@ember/template").SafeString | null>>;
+    get content(): "" | import("@ember/template").SafeString | null | undefined;
 }
 export {};

package/declarations/addon/components/common/documents/types.d.ts

@@ -1,11 +1,4 @@
-import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
-interface PreviewableDocumentArgs {
+export interface PreviewableDocument {
     title: string | null;
-    content: string | null;
+    content: string | Promise<string | null> | null;
 }
-export declare class PreviewableDocument {
-    content: SafeString | null;
-    title: string | null;
-    constructor({ title, content }: PreviewableDocumentArgs);
-}
-export {};

package/declarations/addon/plugins/snippet-plugin/index.d.ts

@@ -1,5 +1,5 @@
+import { PreviewableDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/documents/types';
 import { type Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
 export declare const DEFAULT_CONTENT_STRING = "block+";
 export type SnippetPluginConfig = {
     endpoint: string;
@@ -11,8 +11,8 @@ interface SnippetArgs {
     createdOn: string | null;
     content: string | null;
 }
-export declare class Snippet {
-    content: SafeString | null;
+export declare class Snippet implements PreviewableDocument {
+    content: string | null;
     createdOn: string | null;
     title: string | null;
     constructor({ title, createdOn, content }: SnippetArgs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "28.0.0",
+  "version": "28.1.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -12,6 +12,13 @@ common:
     asc: Sort ascending
     desc: Sort descending
   not-applicable: 'N/A'
+  preview-list:
+    preview-button:
+      title: Show preview
+    select-button:
+      label: Select
+      title: Insert
+    no-content: Does not contain any content
 
 structure-plugin:
   move-up: 'Move {structureName} up'
@@ -219,7 +226,7 @@ variable-plugin:
     minimum-placeholder: minimum value
     maximum: Maximum
     maximum-placeholder: maximum value
-    to: to
+    to: to and including
   person:
     card-title: Insert person
     nodeview-placeholder: Person
@@ -255,16 +262,10 @@ snippet-plugin:
     active-lists: 'Active lists:'
   modal:
     title: Choose a snippet from {snippetListNames}
-    preview-button:
-      title: Show snippet preview
-    select-button:
-      label: Select
-      title: Insert snippet
     search:
       title: Filter on
       label: Snippet name
       placeholder: Type something...
-    no-content: Snippet does not contain any content
   snippet-list:
     open-modal: Manage snippet lists
     modal:

package/translations/nl-BE.yaml

@@ -12,6 +12,13 @@ common:
     asc: Oplopend sorteren
     desc: Aflopend sorteren
   not-applicable: 'n.v.t.'
+  preview-list:
+    preview-button:
+      title: Preview tonen
+    select-button:
+      label: Selecteer
+      title: Invoegen
+    no-content: Bevat geen inhoud
 
 structure-plugin:
   move-up: '{structureName} naar boven verplaatsen'
@@ -43,10 +50,10 @@ structure-plugin:
 
 citaten-plugin:
   card:
-    title: Voeg citeeropschrift toe
+    title: Voeg citaat toe
     suggestions: Suggesties
   insert:
-    title: Citeeropschrift invoegen
+    title: Citaat invoegen
   search:
     term: Zoekterm
     government-search: Filter op bestuursorgaan
@@ -70,7 +77,7 @@ citaten-plugin:
     previous: Vorige pagina
     of: van
   references:
-    insert: Citeeropschrift invoegen
+    insert: Citaat invoegen
     details: Details
     refer-whole: Verwijs naar volledig document
     refer-article: Verwijs naar artikel
@@ -223,7 +230,7 @@ variable-plugin:
     minimum-placeholder: minimumwaarde
     maximum: Maximum
     maximum-placeholder: maximumwaarde
-    to: tot
+    to: tot en met
   person:
     card-title: Persoon invoegen
     nodeview-placeholder: Persoon
@@ -254,16 +261,10 @@ snippet-plugin:
     active-lists: 'Actieve lijsten:'
   modal:
     title: Kies een fragment uit {snippetListNames}
-    preview-button:
-      title: Preview van fragment tonen
-    select-button:
-      label: Selecteer
-      title: Fragment invoegen
     search:
       title: Filter op
       label: Fragmentnaam
       placeholder: Typ iets...
-    no-content: Fragment bevat geen inhoud
   snippet-list:
     open-modal: Fragmentlijsten beheren
     modal: