@lblod/ember-rdfa-editor-lblod-plugins 33.4.0 → 34.0.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 34.0.2
+
+### Patch Changes
+
+- [`49c09bd`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/49c09bd0836b639afbfb8056807c3e8e765349f2) Thanks [@elpoelma](https://github.com/elpoelma)! - codelist: fix issue with `selectedCodelistOption` in case of multi-select codelist
+
+## 34.0.1
+
+### Patch Changes
+
+- [#615](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/615) [`29ed983`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/29ed98336174e12667195f4b28cb9502b10cb479) Thanks [@elpoelma](https://github.com/elpoelma)! - Add missing `toDOM` method to `codelist_option` nodespec
+
+## 34.0.0
+
+### Major Changes
+
+- [#610](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/610) [`2f70345`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2f7034552c477920d75ebf9dfff0f84bac7fba9a) Thanks [@elpoelma](https://github.com/elpoelma)! - Introduce new `codelist` variable which stores either a single or multiple `codelist_option` nodes.
+  Each `codelist_option` node is a resource node which represents a selected codelist-option, and a variable instance.
+  The `codelist` variable node itself is more of a container node and does not store any RDFa.
+  The old `codelist` variable node is renamed to `legacy_codelist`, and can still be used with the existing `codelist-edit` widget.
+  `legacy_codelist` nodes will not be automatically converted to new `codelist` nodes, as we lack the necessary information to do so (codelist-option URIs).
+
 ## 33.4.0
 
 ### Minor Changes

package/addon/components/variable-plugin/codelist/edit.gts

@@ -13,9 +13,11 @@ import {
 import { MULTI_SELECT_CODELIST_TYPE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
 import { trackedFunction } from 'reactiveweb/function';
-import { updateCodelistVariable } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/codelist-utils';
+import {
+  updateCodelistVariable,
+  updateCodelistVariableLegacy,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/codelist-utils';
 import { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { tracked } from '@glimmer/tracking';
 import AuCard from '@appuniversum/ember-appuniversum/components/au-card';
 import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
 import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
@@ -23,6 +25,7 @@ import PowerSelectMultiple from 'ember-power-select/components/power-select-mult
 import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
 import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import { tracked } from '@glimmer/tracking';
 
 export type CodelistEditOptions = {
   endpoint: string;
@@ -35,17 +38,26 @@ type Sig = {
 };
 
 export default class CodelistEditComponent extends Component<Sig> {
-  @tracked selectedCodelistOption?: CodeListOption | CodeListOption[];
+  @tracked
+  selectedCodelistOption?: CodeListOption | CodeListOption[];
 
   get controller() {
     return this.args.controller;
   }
 
+  get isLegacyCodelist() {
+    return (
+      this.selectedCodelist?.node.type ===
+      this.controller.schema.nodes.legacy_codelist
+    );
+  }
+
   get selectedCodelist() {
     const { selection } = this.controller.mainEditorState;
     if (
       selection instanceof NodeSelection &&
-      selection.node.type === this.controller.schema.nodes.codelist
+      (selection.node.type === this.controller.schema.nodes.codelist ||
+        selection.node.type === this.controller.schema.nodes.legacy_codelist)
     ) {
       const codelist = {
         node: selection.node,
@@ -86,6 +98,10 @@ export default class CodelistEditComponent extends Component<Sig> {
     return this.selectedCodelist?.node.attrs.label as string | undefined;
   }
 
+  get schema() {
+    return this.args.controller.schema;
+  }
+
   codelistOptions = trackedFunction(this, async () => {
     let result: CodeListOptions | undefined;
     if (this.source && this.codelistUri) {
@@ -95,6 +111,29 @@ export default class CodelistEditComponent extends Component<Sig> {
     // Normally we'd do this with a `trackedReset`, but this gave us `write-after-read` dev-errors at the time of writing this.
     // TODO: convert this back to a `trackedReset` (or an alternative) once possible.
     this.selectedCodelistOption = undefined;
+    const codelistNode = this.selectedCodelist?.node;
+    let multiSelect: boolean;
+    const localSelectionStyle = this.selectedCodelist?.node.attrs
+      .selectionStyle as string;
+    if (localSelectionStyle) {
+      multiSelect = localSelectionStyle === 'multi';
+    } else {
+      multiSelect = result?.type === MULTI_SELECT_CODELIST_TYPE;
+    }
+    if (
+      !this.isLegacyCodelist &&
+      codelistNode &&
+      codelistNode.children.length > 0
+    ) {
+      const options = codelistNode.children.map((child) => ({
+        uri: child.attrs['subject'],
+        label: child.textContent,
+      }));
+      this.selectedCodelistOption = multiSelect ? options : options[0];
+    } else {
+      this.selectedCodelistOption = undefined;
+    }
+
     return result;
   });
 
@@ -112,11 +151,19 @@ export default class CodelistEditComponent extends Component<Sig> {
     if (!this.selectedCodelist || !this.selectedCodelistOption) {
       return;
     }
-    updateCodelistVariable(
-      this.selectedCodelist,
-      this.selectedCodelistOption,
-      this.controller,
-    );
+    if (this.isLegacyCodelist) {
+      updateCodelistVariableLegacy(
+        this.selectedCodelist,
+        this.selectedCodelistOption,
+        this.controller,
+      );
+    } else {
+      updateCodelistVariable(
+        this.selectedCodelist,
+        this.selectedCodelistOption,
+        this.controller,
+      );
+    }
   }
 
   @action

package/addon/components/variable-plugin/codelist/{insert.ts → insert.gts}

@@ -10,6 +10,13 @@ import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { trackedFunction } from 'reactiveweb/function';
 import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
+import PowerSelect from 'ember-power-select/components/power-select';
+import AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
+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 LabelInput from '../utils/label-input';
 import { createCodelistVariable } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/actions/create-codelist-variable';
 
 export type CodelistInsertOptions = {
@@ -25,14 +32,14 @@ type Args = {
 
 interface SelectStyle {
   label: string;
-  value: string;
+  value: 'single' | 'multi';
 }
 
 export default class CodelistInsertComponent extends Component<Args> {
   @service declare intl: IntlService;
   @tracked selectedCodelist?: CodeList;
-  @tracked label?: string;
-  @tracked selectedStyleValue = 'single';
+  @tracked label: string = '';
+  @tracked selectedStyleValue: 'single' | 'multi' = 'single';
 
   get controller() {
     return this.args.controller;
@@ -58,11 +65,11 @@ export default class CodelistInsertComponent extends Component<Args> {
     const singleSelect = {
       label: this.intl.t('variable.codelist.single-select'),
       value: 'single',
-    };
+    } as const;
     const multiSelect = {
       label: this.intl.t('variable.codelist.multi-select'),
       value: 'multi',
-    };
+    } as const;
     return [singleSelect, multiSelect];
   }
 
@@ -84,6 +91,9 @@ export default class CodelistInsertComponent extends Component<Args> {
   @action
   insert() {
     const codelistResource = this.selectedCodelist?.uri;
+    if (!codelistResource) {
+      return;
+    }
     const label =
       this.label ??
       this.selectedCodelist?.label ??
@@ -96,10 +106,10 @@ export default class CodelistInsertComponent extends Component<Args> {
       selectionStyle: this.selectedStyleValue,
       codelist: codelistResource,
       source,
-      label,
+      label: label ?? this.selectedCodelist?.label,
     });
 
-    this.label = undefined;
+    this.label = '';
     this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
       view: this.controller.mainEditorView,
     });
@@ -114,4 +124,39 @@ export default class CodelistInsertComponent extends Component<Args> {
   selectStyle(style: SelectStyle) {
     this.selectedStyleValue = style.value;
   }
+
+  <template>
+    {{#if this.codelistData.value}}
+      <PowerSelect
+        @allowClear={{false}}
+        @searchEnabled={{true}}
+        @searchField='label'
+        @options={{this.codelistData.value}}
+        @selected={{this.selectedCodelist}}
+        @onChange={{this.selectCodelist}}
+        as |codelist|
+      >
+        {{codelist.label}}
+      </PowerSelect>
+      <PowerSelect
+        @allowClear={{false}}
+        @searchEnabled={{false}}
+        @options={{this.selectionStyles}}
+        @selected={{this.selectedStyle}}
+        @onChange={{this.selectStyle}}
+        as |style|
+      >
+        {{style.label}}
+      </PowerSelect>
+      <AuFormRow>
+        <LabelInput @label={{this.label}} @updateLabel={{this.updateLabel}} />
+      </AuFormRow>
+      <AuButton
+        {{on 'click' this.insert}}
+        @disabled={{not this.selectedCodelist}}
+      >
+        {{t 'variable-plugin.button'}}
+      </AuButton>
+    {{/if}}
+  </template>
 }

package/addon/components/variable-plugin/codelist/nodeview.gts

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import {
+  DecorationSource,
+  PNode,
+  SayController,
+  SayView,
+} from '@lblod/ember-rdfa-editor';
+import getClassnamesFromNode from '@lblod/ember-rdfa-editor/utils/get-classnames-from-node';
+import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+import { on } from '@ember/modifier';
+
+type Args = {
+  getPos: () => number | undefined;
+  node: PNode;
+  selectNode: () => void;
+  updateAttribute: (attr: string, value: unknown) => void;
+  controller: SayController;
+  view: SayView;
+  selected: boolean;
+  contentDecorations?: DecorationSource;
+};
+
+export default class CodelistNodeviewComponent extends Component<Args> {
+  get filled() {
+    return this.args.node.childCount !== 0;
+  }
+
+  get humanReadableCodelistOption() {
+    if (this.filled) {
+      return this.args.node.children
+        .map((child) => child.textContent)
+        .join(', ');
+    } else {
+      return this.args.node.attrs['label'];
+    }
+  }
+
+  get class() {
+    return getClassnamesFromNode(this.args.node);
+  }
+
+  <template>
+    <AuPill class='{{this.class}} say-pill atomic' {{on 'click' @selectNode}}>
+      <span class='{{unless this.filled "unfilled-variable"}}'>
+        {{this.humanReadableCodelistOption}}
+      </span>
+    </AuPill>
+  </template>
+}

package/addon/components/variable-plugin/location/edit.ts

@@ -8,9 +8,8 @@ import {
 import { MULTI_SELECT_CODELIST_TYPE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
 import { findParentNode } from '@curvenote/prosemirror-utils';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
-import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { trackedFunction } from 'reactiveweb/function';
-import { updateCodelistVariable } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/codelist-utils';
+import { updateCodelistVariableLegacy } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/codelist-utils';
 import { tracked } from '@glimmer/tracking';
 import {
   ZONALITY_OPTIONS,
@@ -52,7 +51,7 @@ export default class LocationEditComponent extends Component<Args> {
     if (!this.selectedLocation || !this.selectedLocationOption) {
       return;
     }
-    updateCodelistVariable(
+    updateCodelistVariableLegacy(
       this.selectedLocation,
       this.selectedLocationOption,
       this.controller,
@@ -126,8 +125,8 @@ export default class LocationEditComponent extends Component<Args> {
         : this.options.nonZonalLocationCodelistUri,
     );
     result.options = result.options.map((option) => ({
+      uri: option.uri,
       label: option.label,
-      value: unwrap(option.value),
     }));
     // This a workaround/hack to be able to reset the `selected` option after the `locationOptions` change.
     // Normally we'd do this with a `trackedReset`, but this gave us `write-after-read` dev-errors at the time of writing this.

package/addon/plugins/roadsign-regulation-plugin/actions/insert-measure.ts

@@ -38,7 +38,6 @@ import { createTextVariable } from '../../variable-plugin/actions/create-text-va
 import { generateVariableInstanceUri } from '../../variable-plugin/utils/variable-helpers';
 import { createNumberVariable } from '../../variable-plugin/actions/create-number-variable';
 import { createDateVariable } from '../../variable-plugin/actions/create-date-variable';
-import { createCodelistVariable } from '../../variable-plugin/actions/create-codelist-variable';
 import { createClassicLocationVariable } from '../../variable-plugin/actions/create-classic-location-variable';
 import { isTrafficSignal, TrafficSignal } from '../schemas/traffic-signal';
 import { MobilityMeasureDesign } from '../schemas/mobility-measure-design';
@@ -46,6 +45,7 @@ import {
   isVariableInstance,
   VariableInstance,
 } from '../schemas/variable-instance';
+import { createCodelistVariable } from '../../variable-plugin/actions/create-codelist-variable';
 
 type InsertMeasureArgs = {
   arDesignUri?: string;

package/addon/plugins/roadsign-regulation-plugin/schemas/variable.ts

@@ -3,7 +3,7 @@ import { z } from 'zod';
 const BaseVariableSchema = z.object({
   uri: z.string(),
   label: z.string(),
-  source: z.string().optional(),
+  source: z.string(),
 });
 export const TextVariableSchema = BaseVariableSchema.extend({
   type: z.literal('text'),

package/addon/plugins/variable-plugin/actions/create-codelist-variable.ts

@@ -1,53 +1,44 @@
 import { Schema } from '@lblod/ember-rdfa-editor';
 import {
   DCT,
-  MOBILITEIT,
   RDF,
+  SKOS,
   VARIABLES,
-  XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { AllOrNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
 import {
   FullTriple,
   IncomingTriple,
+  OutgoingTriple,
 } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 
 type CreateCodelistVariableArgs = {
   schema: Schema;
-  value?: string;
 } & CreateCodelistVariableAttrsArgs;
 
 export function createCodelistVariable(args: CreateCodelistVariableArgs) {
-  const { schema, value, label } = args;
+  const { schema } = args;
   const attrs = createCodelistVariableAttrs(args);
-  return schema.nodes.codelist.create(
-    attrs,
-    value
-      ? schema.text(value)
-      : schema.node('placeholder', {
-          placeholderText: label,
-        }),
-  );
+  return schema.nodes.codelist.create(attrs);
 }
 
 type CreateCodelistVariableAttrsArgs = {
+  selectionStyle?: 'single' | 'multi';
   label?: string;
-  source?: string;
-  codelist?: string;
-  selectionStyle?: string;
+  source: string;
+  codelist: string;
 } & AllOrNone<{ variable: string; variableInstance: string }>;
 
 export function createCodelistVariableAttrs({
-  variable,
-  variableInstance,
+  selectionStyle,
   label,
   source,
   codelist,
-  selectionStyle,
+  variable,
+  variableInstance,
 }: CreateCodelistVariableAttrsArgs) {
   const externalTriples: FullTriple[] = [];
-  const backlinks: IncomingTriple[] = [];
   if (variable) {
     externalTriples.push(
       {
@@ -66,34 +57,60 @@ export function createCodelistVariableAttrs({
         object: sayDataFactory.literal('codelist'),
       },
     );
-    if (codelist) {
-      externalTriples.push({
-        subject: sayDataFactory.namedNode(variableInstance),
-        predicate: MOBILITEIT('codelijst').full,
-        object: sayDataFactory.namedNode(codelist),
-      });
-    }
-    if (source) {
-      externalTriples.push({
-        subject: sayDataFactory.namedNode(variableInstance),
-        predicate: DCT('source').full,
-        object: sayDataFactory.namedNode(source),
-      });
-    }
-    backlinks.push({
-      subject: sayDataFactory.resourceNode(variableInstance),
-      predicate: RDF('value').full,
-    });
   }
 
   return {
     rdfaNodeType: 'literal',
-    datatype: XSD('string').namedNode,
     externalTriples,
-    backlinks,
+    selectionStyle,
     source,
     codelist,
     label,
-    selectionStyle,
+    variable,
+    variableInstance,
+  };
+}
+
+type CreateCodelistOptionNodeArgs = {
+  schema: Schema;
+  text: string;
+} & CreateCodelistOptionNodeAttrsArgs;
+
+export function createCodelistOptionNode(args: CreateCodelistOptionNodeArgs) {
+  const { schema, text } = args;
+  const attrs = createCodelistOptionNodeAttrs(args);
+  return schema.nodes.codelist_option.create(attrs, schema.text(text));
+}
+
+type CreateCodelistOptionNodeAttrsArgs = {
+  subject: string;
+  text: string;
+  variableInstance?: string;
+};
+
+function createCodelistOptionNodeAttrs({
+  subject,
+  text,
+  variableInstance,
+}: CreateCodelistOptionNodeAttrsArgs) {
+  const backlinks: IncomingTriple[] = [];
+  if (variableInstance) {
+    backlinks.push({
+      subject: sayDataFactory.resourceNode(variableInstance),
+      predicate: RDF('value').full,
+    });
+  }
+  const properties: OutgoingTriple[] = [
+    {
+      predicate: SKOS('prefLabel').full,
+      object: sayDataFactory.literal(text),
+    },
+  ];
+
+  return {
+    rdfaNodeType: 'resource',
+    subject,
+    properties,
+    backlinks,
   };
 }

package/addon/plugins/variable-plugin/actions/create-legacy-codelist-variable.ts

@@ -0,0 +1,101 @@
+import { Schema } from '@lblod/ember-rdfa-editor';
+import {
+  DCT,
+  MOBILITEIT,
+  RDF,
+  VARIABLES,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { AllOrNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
+import {
+  FullTriple,
+  IncomingTriple,
+} from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+
+type CreateLegacyCodelistVariableArgs = {
+  schema: Schema;
+  value?: string;
+} & CreateLegacyCodelistVariableAttrsArgs;
+
+export function createLegacyCodelistVariable(
+  args: CreateLegacyCodelistVariableArgs,
+) {
+  const { schema, value, label } = args;
+  const attrs = createLegacyCodelistVariableAttrs(args);
+  return schema.nodes.legacy_codelist.create(
+    attrs,
+    value
+      ? schema.text(value)
+      : schema.node('placeholder', {
+          placeholderText: label,
+        }),
+  );
+}
+
+type CreateLegacyCodelistVariableAttrsArgs = {
+  label?: string;
+  source?: string;
+  codelist?: string;
+  selectionStyle?: string;
+} & AllOrNone<{ variable: string; variableInstance: string }>;
+
+export function createLegacyCodelistVariableAttrs({
+  variable,
+  variableInstance,
+  label,
+  source,
+  codelist,
+  selectionStyle,
+}: CreateLegacyCodelistVariableAttrsArgs) {
+  const externalTriples: FullTriple[] = [];
+  const backlinks: IncomingTriple[] = [];
+  if (variable) {
+    externalTriples.push(
+      {
+        subject: sayDataFactory.namedNode(variableInstance),
+        predicate: RDF('type').full,
+        object: sayDataFactory.namedNode(VARIABLES('VariableInstance').full),
+      },
+      {
+        subject: sayDataFactory.namedNode(variableInstance),
+        predicate: VARIABLES('instanceOf').full,
+        object: sayDataFactory.namedNode(variable),
+      },
+      {
+        subject: sayDataFactory.namedNode(variableInstance),
+        predicate: DCT('type').full,
+        object: sayDataFactory.literal('codelist'),
+      },
+    );
+    if (codelist) {
+      externalTriples.push({
+        subject: sayDataFactory.namedNode(variableInstance),
+        predicate: MOBILITEIT('codelijst').full,
+        object: sayDataFactory.namedNode(codelist),
+      });
+    }
+    if (source) {
+      externalTriples.push({
+        subject: sayDataFactory.namedNode(variableInstance),
+        predicate: DCT('source').full,
+        object: sayDataFactory.namedNode(source),
+      });
+    }
+    backlinks.push({
+      subject: sayDataFactory.resourceNode(variableInstance),
+      predicate: RDF('value').full,
+    });
+  }
+
+  return {
+    rdfaNodeType: 'literal',
+    datatype: XSD('string').namedNode,
+    externalTriples,
+    backlinks,
+    source,
+    codelist,
+    label,
+    selectionStyle,
+  };
+}

package/addon/plugins/variable-plugin/utils/codelist-utils.ts

@@ -1,8 +1,9 @@
 // This file contains helpers for both the codelist and location variable types
 
-import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { CodeListOption } from './fetch-data';
 import { PNode, ProseParser, SayController } from '@lblod/ember-rdfa-editor';
+import { createCodelistOptionNode } from '../actions/create-codelist-variable';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 /**
  *
@@ -27,12 +28,46 @@ export function updateCodelistVariable(
   },
   selectedOption: CodeListOption | CodeListOption[],
   controller: SayController,
+) {
+  const selectedOptions = Array.isArray(selectedOption)
+    ? selectedOption
+    : [selectedOption];
+  const variableInstance = selectedCodelist.node.attrs['variableInstance'] as
+    | string
+    | undefined;
+  const codelistOptionNodes = selectedOptions.map((option) =>
+    createCodelistOptionNode({
+      schema: controller.schema,
+      text: option.label,
+      subject: option.uri,
+      variableInstance,
+    }),
+  );
+  const range = {
+    from: selectedCodelist.pos + 1,
+    to: selectedCodelist.pos + selectedCodelist.node.nodeSize - 1,
+  };
+  controller.withTransaction((tr) => {
+    return tr.replaceWith(range.from, range.to, codelistOptionNodes);
+  });
+}
+
+/**
+ * @deprecated use `updateCodelistVariable` instead
+ */
+export function updateCodelistVariableLegacy(
+  selectedCodelist: {
+    node: PNode;
+    pos: number;
+  },
+  selectedOption: CodeListOption | CodeListOption[],
+  controller: SayController,
 ) {
   let htmlToInsert: string;
   if (Array.isArray(selectedOption)) {
-    htmlToInsert = selectedOption.map((option) => option.value).join(', ');
+    htmlToInsert = selectedOption.map((option) => option.label).join(', ');
   } else {
-    htmlToInsert = unwrap(selectedOption.value);
+    htmlToInsert = unwrap(selectedOption.label);
   }
   htmlToInsert = wrapVariableInHighlight(htmlToInsert);
   const domParser = new DOMParser();