@lblod/ember-rdfa-editor-lblod-plugins 28.0.0 → 28.1.0-dev.ed578cc3a5b1de900ca53bd1e5ebe4e950e51439

package/.changeset/kind-cooks-cross.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Add re-usable component for selecting a decision type

package/.changeset/lovely-carpets-grow.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Fix undo behaviour when changing decision type

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/besluit-type-plugin/besluit-type-form.gts

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { type BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import BesluitTypeSelect from '@lblod/ember-rdfa-editor-lblod-plugins/components/besluit-type-plugin/besluit-type-select';
+import { type BesluitTypeInstance } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/besluit-type-instances';
+
+interface Sig {
+  Args: {
+    types: BesluitType[];
+    selectedType?: BesluitTypeInstance;
+    setType: (selected: BesluitTypeInstance) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Sig> {
+  updateParentType = (selected: BesluitType) => {
+    this.args.setType({ parent: selected });
+  };
+
+  updateSubType = (selected: BesluitType) => {
+    if (this.args.selectedType) {
+      this.args.setType({
+        parent: this.args.selectedType.parent,
+        subType: selected,
+      });
+    }
+  };
+
+  updateSubSubType = (selected: BesluitType) => {
+    if (this.args.selectedType) {
+      this.args.setType({
+        parent: this.args.selectedType.parent,
+        subType: this.args.selectedType.subType,
+        subSubType: selected,
+      });
+    }
+  };
+
+  <template>
+    <div ...attributes>
+      <BesluitTypeSelect
+        @fieldNameTranslation='besluit-type-plugin.dt'
+        @besluitTypes={{@types}}
+        @onchange={{this.updateParentType}}
+        @selected={{@selectedType.parent}}
+        @showWarningWhenEmpty={{false}}
+      />
+      {{#if @selectedType.parent.subTypes.length}}
+        <BesluitTypeSelect
+          @fieldNameTranslation='besluit-type-plugin.sub-type'
+          @besluitTypes={{@selectedType.parent.subTypes}}
+          @onchange={{this.updateSubType}}
+          @selected={{@selectedType.subType}}
+          @showWarningWhenEmpty={{true}}
+        />
+      {{/if}}
+      {{#if @selectedType.subType.subTypes.length}}
+        <BesluitTypeSelect
+          @fieldNameTranslation='besluit-type-plugin.sub-type'
+          @besluitTypes={{@selectedType.subType.subTypes}}
+          @onchange={{this.updateSubSubType}}
+          @selected={{@selectedType.subSubType}}
+          @showWarningWhenEmpty={{true}}
+        />
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -0,0 +1,80 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import t from 'ember-intl/helpers/t';
+import PowerSelect from 'ember-power-select/components/power-select';
+import { v4 as uuidv4 } from 'uuid';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { type BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+
+interface Sig {
+  Args: {
+    fieldNameTranslation: string;
+    besluitTypes: BesluitType[];
+    selected?: BesluitType;
+    showWarningWhenEmpty: boolean;
+    onchange: (selected: BesluitType) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Sig> {
+  @tracked besluitTypes;
+
+  constructor(parent: unknown, args: Sig['Args']) {
+    super(parent, args);
+    this.besluitTypes = this.args.besluitTypes.sort((a, b) =>
+      a.label > b.label ? 1 : -1,
+    );
+  }
+
+  get showWarning() {
+    return this.args.showWarningWhenEmpty && !this.args.selected;
+  }
+
+  search = (term: string) => {
+    const lowerTerm = term.toLowerCase();
+    return this.args.besluitTypes.filter((besluitType) =>
+      besluitType.label.toLowerCase().includes(lowerTerm),
+    );
+  };
+
+  <template>
+    <div ...attributes>
+      {{#let (uuidv4) as |id|}}
+        <AuLabel for={{id}}>
+          {{t @fieldNameTranslation}}
+        </AuLabel>
+        <PowerSelect
+          id={{id}}
+          @renderInPlace={{true}}
+          @searchEnabled={{true}}
+          @searchMessage={{t 'besluit-type-plugin.search-message'}}
+          @noMatchesMessage={{t 'besluit-type-plugin.no-matches-message'}}
+          @search={{this.search}}
+          @options={{this.besluitTypes}}
+          @selected={{@selected}}
+          @onChange={{@onchange}}
+          as |besluitType|
+        >
+          {{besluitType.label}}
+        </PowerSelect>
+      {{/let}}
+      <p class='au-u-muted au-u-margin-tiny au-u-margin-bottom-small'>
+        {{@selected.definition}}
+      </p>
+      {{#if this.showWarning}}
+        <AuAlert
+          @icon={{AlertTriangleIcon}}
+          @title={{t 'besluit-type-plugin.alert-title'}}
+          @skin='warning'
+          @size='small'
+          class='au-u-margin-bottom-none au-u-margin-top-small'
+        >
+          <p>{{t 'besluit-type-plugin.alert-body'}}</p>
+        </AuAlert>
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -0,0 +1,191 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+// eslint-disable-next-line ember/no-at-ember-render-modifiers
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import { trackedFunction } from 'reactiveweb/function';
+import t from 'ember-intl/helpers/t';
+import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+import AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
+import AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+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';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import fetchBesluitTypes from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import {
+  BesluitTypeInstance,
+  checkBesluitTypeInstance,
+  mostSpecificBesluitType,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/besluit-type-instances';
+import BesluitTypeForm from '@lblod/ember-rdfa-editor-lblod-plugins/components/besluit-type-plugin/besluit-type-form';
+import { setBesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/set-besluit-type';
+
+type Args = {
+  controller: SayController;
+  options: BesluitTypePluginOptions;
+};
+
+export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
+  @tracked selectedTypeInstance?: BesluitTypeInstance;
+  @tracked cardExpanded = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  types = trackedFunction(this, async () => {
+    const types = await fetchBesluitTypes(
+      this.args.options.classificatieUri,
+      this.args.options.endpoint,
+    );
+    return types;
+  });
+
+  get currentBesluitRange() {
+    return getCurrentBesluitRange(this.controller);
+  }
+
+  get showCard() {
+    return !!this.currentBesluitRange;
+  }
+
+  get selectedType() {
+    return (
+      this.selectedTypeInstance &&
+      mostSpecificBesluitType(this.selectedTypeInstance)
+    );
+  }
+
+  toggleCard = () => {
+    this.cardExpanded = !this.cardExpanded;
+  };
+
+  setType = (type: BesluitTypeInstance) => {
+    this.selectedTypeInstance = type;
+    this.insertIfValid();
+  };
+
+  updateBesluitTypes = () => {
+    if (!this.types.isFinished || !this.currentBesluitRange) {
+      return;
+    }
+    if (!this.types.value) {
+      console.warn('Request for besluit types failed');
+      return;
+    }
+    const typeInstance = checkBesluitTypeInstance(
+      this.controller.mainEditorState,
+      this.types.value,
+    );
+    if (typeInstance) {
+      this.selectedTypeInstance = typeInstance;
+      this.cardExpanded = false;
+    } else {
+      this.cardExpanded = true;
+    }
+  };
+
+  insertIfValid() {
+    this.controller.doCommand((state, dispatch) => {
+      if (!this.selectedTypeInstance || !dispatch) {
+        return false;
+      }
+      const { result, transaction } = setBesluitType(
+        state,
+        this.selectedTypeInstance,
+      );
+      if (result.every((ok) => ok)) {
+        dispatch(transaction);
+        return true;
+      }
+      return false;
+    });
+  }
+
+  <template>
+    <div
+      {{didUpdate this.updateBesluitTypes @controller.mainEditorState}}
+      {{didUpdate this.updateBesluitTypes this.types.value}}
+    >
+      {{#if this.showCard}}
+        {{#if this.types.isError}}
+          <AuPill
+            @skin='error'
+            @icon={{CircleXIcon}}
+            @iconAlignment='left'
+            class='au-c-pill--link besluit-toolbar-pill'
+            {{on 'click' this.toggleCard}}
+            title={{t 'besluit-type-plugin.insert-dt'}}
+          >
+            {{t 'besluit-type-plugin.error-short'}}
+          </AuPill>
+        {{else}}
+          {{#if this.selectedType.label}}
+            <AuPill
+              @skin='link'
+              {{on 'click' this.toggleCard}}
+              title={{t 'besluit-type-plugin.insert-dt'}}
+            >
+              {{t 'besluit-type-plugin.dt'}}:
+              {{this.selectedType.label}}
+            </AuPill>
+          {{else}}
+            <AuPill
+              @icon={{AlertTriangleIcon}}
+              @iconAlignment='left'
+              @skin='link'
+              {{on 'click' this.toggleCard}}
+              title={{t 'besluit-type-plugin.insert-dt'}}
+            >
+              {{t 'besluit-type-plugin.insert-dt'}}
+            </AuPill>
+          {{/if}}
+        {{/if}}
+      {{/if}}
+      {{#if this.cardExpanded}}
+        <AuModal
+          @title={{t 'besluit-type-plugin.insert-dt'}}
+          @closeModal={{this.toggleCard}}
+          @modalOpen={{true}}
+          class='au-c-modal--overflow'
+          as |Modal|
+        >
+          <Modal.Body>
+            {{#if this.types.isError}}
+              <AuAlert
+                @title={{t 'besluit-type-plugin.error-title'}}
+                @skin='error'
+                @icon={{CrossIcon}}
+              >
+                <p>
+                  {{t 'besluit-type-plugin.error-first-body'}}
+                  {{! template-lint-disable no-bare-strings  }}
+                  <AuLinkExternal
+                    href='mailto:gelinktnotuleren@vlaanderen.be'
+                    @icon={{MailIcon}}
+                    @iconAlignment='left'
+                  >
+                    GelinktNotuleren@vlaanderen.be
+                  </AuLinkExternal>
+                  {{! template-lint-enable no-bare-strings  }}
+                  {{t 'besluit-type-plugin.error-rest-body'}}
+                </p>
+              </AuAlert>
+            {{else if this.types.value}}
+              <BesluitTypeForm
+                @types={{this.types.value}}
+                @selectedType={{this.selectedTypeInstance}}
+                @setType={{this.setType}}
+              />
+            {{/if}}
+          </Modal.Body>
+        </AuModal>
+      {{/if}}
+    </div>
+  </template>
+}

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/besluit-type-plugin/utils/besluit-type-instances.ts

@@ -0,0 +1,100 @@
+import { type EditorState } from '@lblod/ember-rdfa-editor';
+import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { type BesluitType } from './fetchBesluitTypes';
+import { type NamedNodeTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+
+export interface BesluitTypeInstance {
+  parent: BesluitType;
+  subType?: BesluitType;
+  subSubType?: BesluitType;
+}
+
+export function extractBesluitTypeUris(editorState: EditorState): string[] {
+  const besluitRange = getCurrentBesluitRange(editorState);
+  if (!besluitRange) {
+    return [];
+  }
+  return getOutgoingTripleList(besluitRange.node.attrs, RDF('type'))
+    .filter(
+      (type) =>
+        type.object.termType === 'NamedNode' &&
+        type.object.value.includes(
+          'https://data.vlaanderen.be/id/concept/BesluitType/',
+        ),
+    )
+    .map((type: NamedNodeTriple) => type?.object.value);
+}
+
+/**
+ * Finds a decision type in the document and checks that it represents a valid decision type
+ * according to the list of types passed in.
+ */
+export function checkBesluitTypeInstance(
+  editorState: EditorState,
+  types: BesluitType[],
+): BesluitTypeInstance | false {
+  const besluitTypes = extractBesluitTypeUris(editorState);
+
+  if (besluitTypes.length === 0) {
+    return false;
+  } else if (besluitTypes.length !== 1) {
+    console.warn(
+      "More than one decision type found for document, we don't support this and will just take the first one",
+      besluitTypes,
+    );
+  }
+  const typeHierarchy = findBesluitTypeHierarchy(types, besluitTypes[0]);
+
+  return (
+    !!typeHierarchy && {
+      parent: typeHierarchy[0],
+      subType: typeHierarchy[1],
+      subSubType: typeHierarchy[2],
+    }
+  );
+}
+
+function findBesluitTypeHierarchy(
+  types: BesluitType[],
+  uri: string,
+): BesluitType[] | undefined {
+  for (const type of types) {
+    if (type.uri === uri) {
+      return [type];
+    } else if (type.subTypes?.length) {
+      const subTypes = findBesluitTypeHierarchy(type.subTypes, uri);
+      if (subTypes) {
+        return [type, ...subTypes];
+      }
+    }
+  }
+  return;
+}
+
+/**
+ * Checks that the passed type instance has all of the necessary sub-types selected (and no more)
+ */
+export function isValidTypeChoice({
+  parent,
+  subType,
+  subSubType,
+}: BesluitTypeInstance) {
+  if (!parent.subTypes || parent.subTypes.length === 0) {
+    return !subType && !subSubType;
+  }
+  if (!subType) {
+    return false;
+  }
+  if (!subType.subTypes || subType.subTypes.length === 0) {
+    return !subSubType;
+  }
+  return !!subSubType;
+}
+
+export function mostSpecificBesluitType(
+  typeInstance: BesluitTypeInstance,
+): BesluitType {
+  return typeInstance.subSubType ?? typeInstance.subType ?? typeInstance.parent;
+}

package/addon/plugins/besluit-type-plugin/utils/set-besluit-type.ts

@@ -0,0 +1,57 @@
+import { type EditorState } from '@lblod/ember-rdfa-editor';
+import {
+  transactionCombinator,
+  type TransactionCombinatorResult,
+} from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import {
+  addPropertyToNode,
+  removePropertyFromNode,
+} from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { getCurrentBesluitURI } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import {
+  extractBesluitTypeUris,
+  isValidTypeChoice,
+  mostSpecificBesluitType,
+  type BesluitTypeInstance,
+} from './besluit-type-instances';
+import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+export function setBesluitType(
+  initialState: EditorState,
+  typeInstance: BesluitTypeInstance,
+): TransactionCombinatorResult<boolean> {
+  const transaction = initialState.tr;
+
+  const resource = getCurrentBesluitURI(initialState);
+  if (!resource || !isValidTypeChoice(typeInstance)) {
+    return {
+      result: [false],
+      initialState,
+      transaction,
+      transactions: [transaction],
+    };
+  }
+  const existingTypeUris = extractBesluitTypeUris(initialState);
+  const monads = existingTypeUris.map((existingUri) => {
+    return removePropertyFromNode({
+      resource,
+      property: {
+        predicate: RDF('type').full,
+        object: sayDataFactory.namedNode(existingUri),
+      },
+    });
+  });
+  monads.push(
+    addPropertyToNode({
+      resource,
+      property: {
+        predicate: RDF('type').full,
+        object: sayDataFactory.namedNode(
+          mostSpecificBesluitType(typeInstance).uri,
+        ),
+      },
+    }),
+  );
+  return transactionCombinator<boolean>(initialState)(monads);
+}

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;
   }