@lblod/ember-rdfa-editor-lblod-plugins 33.3.0 → 34.0.1

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();

package/addon/plugins/variable-plugin/utils/fetch-data.ts

@@ -1,6 +1,7 @@
 import {
   executeQuery,
   QueryResult,
+  sparqlEscapeUri,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
 
 export type CodeListOptions = {
@@ -9,30 +10,27 @@ export type CodeListOptions = {
 };
 
 export type CodeListOption = {
-  value?: string;
-  label?: string;
+  uri: string;
+  label: string;
 };
 
 function generateCodeListOptionsQuery(codelistUri: string): string {
-  const codeListOptionsQuery = `
+  const codeListOptionsQuery = /* sparql */ `
     PREFIX lblodMobiliteit: <http://data.lblod.info/vocabularies/mobiliteit/>
     PREFIX dct: <http://purl.org/dc/terms/>
     PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
     PREFIX schema: <http://schema.org/>
     PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
-    SELECT DISTINCT * WHERE { 
+    SELECT DISTINCT ?codelistOption ?label ?type ?position WHERE {
       <${codelistUri}> a lblodMobiliteit:Codelist.
-      ?codelistOptions skos:inScheme <${codelistUri}>.
-      ?codelistOptions skos:prefLabel ?value.
+      ?codelistOption skos:inScheme <${codelistUri}>.
+      ?codelistOption skos:prefLabel ?label.
       OPTIONAL {
-        ?codelistOptions schema:position ?position .
+        ?codelistOption schema:position ?position .
       }
       OPTIONAL {
         <${codelistUri}> dct:type ?type.
       }
-      OPTIONAL {
-        ?codelistOptions ext:summary ?label.
-      }
     }
     ORDER BY (!BOUND(?position)) ASC(?position)
   `;
@@ -57,11 +55,35 @@ export async function fetchCodeListOptions(
   };
 }
 
+export async function fetchCodelistOption(
+  endpoint: string,
+  codelistOptionUri: string,
+): Promise<Required<CodeListOption> | undefined> {
+  const response = await executeQuery({
+    endpoint,
+    query: /* sparql */ `
+      PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+      SELECT DISTINCT ?label WHERE {
+        ${sparqlEscapeUri(codelistOptionUri)}
+          skos:prefLabel ?label.
+      }
+    `,
+  });
+  const bindings = response.results.bindings;
+  if (!bindings.length) {
+    return;
+  }
+  return {
+    uri: codelistOptionUri,
+    label: bindings[0]['label'].value,
+  };
+}
+
 function parseCodelistOptions(queryResult: QueryResult): CodeListOption[] {
   const bindings = queryResult.results.bindings;
   return bindings.map((binding) => ({
-    value: binding['value']?.value,
-    label: binding['label'] ? binding['label'].value : binding['value']?.value,
+    uri: binding['codelistOption'].value,
+    label: binding['label'].value,
   }));
 }
 
@@ -76,7 +98,7 @@ function generateCodeListsByPublisherQuery(publisher?: string): string {
     PREFIX dct: <http://purl.org/dc/terms/>
     PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
     PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
-    SELECT DISTINCT * WHERE { 
+    SELECT DISTINCT * WHERE {
       ?uri a lblodMobilitiet:Codelist;
         skos:prefLabel ?label.
       ${
@@ -101,7 +123,7 @@ export async function fetchCodeListsByPublisher(
   });
   const bindings = codelistsOptionsQueryResult.results.bindings;
   return bindings.map((binding) => ({
-    uri: binding['uri']?.value,
-    label: binding['label']?.value,
+    uri: binding['uri'].value,
+    label: binding['label'].value,
   }));
 }

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

@@ -1,16 +1,3 @@
-import {
-  getOutgoingTriple,
-  hasOutgoingNamedNodeTriple,
-  hasRDFaAttribute,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import {
-  DCT,
-  EXT,
-  MOBILITEIT,
-  RDF,
-  VARIABLES,
-  XSD,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import {
   createEmberNodeSpec,
   createEmberNodeView,
@@ -18,215 +5,133 @@ import {
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import {
   DOMOutputSpec,
+  Fragment,
   PNode,
+  Schema,
+  TagParseRule,
   getRdfaAttrs,
   rdfaAttrSpec,
 } from '@lblod/ember-rdfa-editor';
-import {
-  hasRdfaVariableType,
-  isVariable,
-  parseLabel,
-  parseVariableInstance,
-  parseVariableSource,
-  parseVariableType,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/variable-attribute-parsers';
-import VariableNodeViewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/variable/nodeview';
 import type { ComponentLike } from '@glint/template';
-import { renderRdfaAware } from '@lblod/ember-rdfa-editor/core/schema';
+import {
+  getRdfaContentElement,
+  RdfaAttrs,
+  renderRdfaAware,
+} from '@lblod/ember-rdfa-editor/core/schema';
 import { recreateVariableUris } from '../utils/recreate-variable-uris';
-import { generateVariableInstanceUri } from '../utils/variable-helpers';
-import { createCodelistVariableAttrs } from '../actions/create-codelist-variable';
 import getClassnamesFromNode from '@lblod/ember-rdfa-editor/utils/get-classnames-from-node';
+import SayNodeSpec from '@lblod/ember-rdfa-editor/core/say-node-spec';
+import CodelistNodeviewComponent from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/codelist/nodeview';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
-const CONTENT_SELECTOR = '[data-content-container="true"]';
-
-const CONTENT_SELECTOR_LEGACY = `span[property~='${EXT('content').prefixed}'],
-                          span[property~='${EXT('content').full}']`;
 const rdfaAware = true;
 
-const parseDOM = [
+const parseDOM: TagParseRule[] = [
   {
     tag: 'span',
     getAttrs: (node: HTMLElement) => {
-      const attrs = getRdfaAttrs(node, { rdfaAware });
+      const attrs = getRdfaAttrs(node, { rdfaAware }) as RdfaAttrs;
       if (!attrs) {
         return false;
       }
       if (
         node.dataset.sayVariable &&
         node.dataset.sayVariableType === 'codelist' &&
-        node.querySelector(CONTENT_SELECTOR)
+        node.dataset.sayNodeVersion === '2'
       ) {
         const label = node.dataset.label;
         const source = node.dataset.source;
         const codelist = node.dataset.codelist;
+        const variable = node.dataset.variable;
+        const variableInstance = node.dataset.variableInstance;
         const selectionStyle = node.dataset.selectionStyle;
-        return { ...attrs, label, source, codelist, selectionStyle };
-      }
-      return false;
-    },
-    contentElement: CONTENT_SELECTOR,
-  },
-];
-
-const parseDOMLegacy = [
-  {
-    tag: 'span',
-    getAttrs: (node: HTMLElement) => {
-      const attrs = getRdfaAttrs(node, { rdfaAware });
-      if (!attrs || attrs.rdfaNodeType !== 'resource') {
-        return false;
-      }
-
-      if (
-        hasOutgoingNamedNodeTriple(
-          attrs,
-          RDF('type'),
-          VARIABLES('VariableInstance'),
-        ) &&
-        node.querySelector(CONTENT_SELECTOR) &&
-        hasRdfaVariableType(attrs, 'codelist')
-      ) {
-        const variableInstanceUri = attrs.subject;
-        const variableUri = getOutgoingTriple(attrs, VARIABLES('instanceOf'))
-          ?.object.value;
-        if (!variableInstanceUri || !variableUri) {
-          return false;
-        }
-
-        const codelistUri = getOutgoingTriple(attrs, MOBILITEIT('codelijst'))
-          ?.object.value;
-        const sourceUri = getOutgoingTriple(attrs, DCT('source'))?.object.value;
-        const selectionStyle = node.dataset.selectionStyle;
-        const label = getOutgoingTriple(attrs, DCT('title'))?.object.value;
-
-        return createCodelistVariableAttrs({
-          variable: variableUri,
-          variableInstance: variableInstanceUri,
+        return {
+          ...attrs,
           label,
-          // These attrs are required but it's possible for older documents to get into a broken
-          // state. We mark these as unknown so we can push the user to fix this as we can't do it.
-          source: sourceUri,
-          codelist: codelistUri,
+          source,
+          codelist,
           selectionStyle,
-        });
+          variable,
+          variableInstance,
+        };
       }
       return false;
     },
-    contentElement: CONTENT_SELECTOR,
-  },
-  {
-    tag: 'span',
-    getAttrs(node: HTMLElement) {
-      const attrs = getRdfaAttrs(node, { rdfaAware });
-      if (!attrs || attrs.rdfaNodeType !== 'resource') {
-        return false;
+    getContent: (node: HTMLElement, schema: Schema) => {
+      const contentContainer = getRdfaContentElement(node);
+      if (!contentContainer) {
+        return Fragment.fromArray([]);
       }
-
-      if (
-        hasOutgoingNamedNodeTriple(attrs, RDF('type'), EXT('Mapping')) &&
-        node.querySelector(CONTENT_SELECTOR) &&
-        hasRdfaVariableType(attrs, 'codelist')
-      ) {
-        const variableUri = attrs.subject;
-        const variableInstanceUri =
-          getOutgoingTriple(attrs, EXT('instance'))?.object.value ??
-          generateVariableInstanceUri();
-
-        const codelistUri = getOutgoingTriple(attrs, EXT('codelist'))?.object
-          .value;
-        const sourceUri = getOutgoingTriple(attrs, DCT('source'))?.object.value;
-        const selectionStyle = node.dataset.selectionStyle;
-        const label = getOutgoingTriple(attrs, EXT('label'))?.object.value;
-        return createCodelistVariableAttrs({
-          variable: variableUri,
-          variableInstance: variableInstanceUri,
-          label,
-          source: sourceUri,
-          codelist: codelistUri,
-          selectionStyle,
-        });
+      // We only retrieve the `children` here, as it skips the textnodes,
+      // we only want the nodes corresponding to `codelist_option` nodes.
+      const children = [...contentContainer.children].filter(
+        (child: HTMLElement) => child.dataset.sayType === 'codelist_option',
+      );
+      if (!children.length) {
+        return Fragment.empty;
       }
-      return false;
-    },
-    contentElement: CONTENT_SELECTOR,
-  },
-  {
-    tag: 'span',
-    getAttrs: (node: HTMLElement) => {
-      if (
-        isVariable(node) &&
-        node.querySelector(CONTENT_SELECTOR_LEGACY) &&
-        parseVariableType(node) === 'codelist'
-      ) {
-        const variableUri = node.getAttribute('resource');
-        if (!variableUri) {
-          return false;
-        }
-        const variableInstanceUri =
-          parseVariableInstance(node) ?? generateVariableInstanceUri();
 
-        const source = parseVariableSource(node) ?? undefined;
-        const selectionStyle = node.dataset.selectionStyle;
-        const codelistSpan = Array.from(node.children).find((el) =>
-          hasRDFaAttribute(el, 'property', EXT('codelist')),
+      const contentNodes = children.map((child: HTMLElement) => {
+        const attrs = getRdfaAttrs(child, { rdfaAware }) as RdfaAttrs;
+        return schema.nodes.codelist_option.create(
+          attrs,
+          schema.text(child.textContent ?? ''),
         );
-        const codelistUri =
-          codelistSpan?.getAttribute('resource') ??
-          codelistSpan?.getAttribute('content') ??
-          undefined;
-        const label = parseLabel(node) ?? undefined;
-
-        return createCodelistVariableAttrs({
-          variable: variableUri,
-          variableInstance: variableInstanceUri,
-          label,
-          source,
-          codelist: codelistUri,
-          selectionStyle,
-        });
-      }
-
-      return false;
+      });
+      return Fragment.fromArray(contentNodes);
     },
-    contentElement: CONTENT_SELECTOR_LEGACY,
   },
 ];
 
 const toDOM = (node: PNode): DOMOutputSpec => {
-  const { selectionStyle, label, codelist, source } = node.attrs;
-  const onlyContentType =
-    node.content.size === 1 && node.content.firstChild?.type;
-  const className =
-    onlyContentType &&
-    onlyContentType === onlyContentType.schema.nodes['placeholder']
-      ? ' say-variable'
-      : '';
-
+  const {
+    label = 'codelist',
+    codelist,
+    source,
+    humanReadableContent,
+    selectionStyle,
+    variable,
+    variableInstance,
+  } = node.attrs;
+  const className = humanReadableContent ? '' : ' say-variable';
+  const codelist_option_nodes = node.content.content;
+  const contentArray = [];
+  for (let i = 0; i < codelist_option_nodes.length; i++) {
+    const codelist_option_node = codelist_option_nodes[i];
+    contentArray.push(
+      unwrap(codelist_option_node.type.spec.toDOM)(codelist_option_node),
+    );
+    if (i !== codelist_option_nodes.length - 1) {
+      contentArray.push(', ');
+    }
+  }
   return renderRdfaAware({
     renderable: node,
+    tag: 'span',
     attrs: {
       class: `${getClassnamesFromNode(node)}${className}`,
       'data-say-variable': 'true',
       'data-say-variable-type': 'codelist',
-      'data-selection-style': selectionStyle as string,
+      'data-say-node-version': '2',
       'data-label': label as string | null,
       'data-codelist': codelist as string,
       'data-source': source as string,
+      'data-selection-style': selectionStyle as string,
+      'data-variable': variable as string,
+      'data-variable-instance': variableInstance as string,
     },
-    tag: 'span',
-    content: 0,
+    contentArray: contentArray.length ? contentArray : [label],
   });
 };
 
 const emberNodeConfig: EmberNodeConfig = {
   name: 'codelist',
-  component: VariableNodeViewComponent as unknown as ComponentLike,
+  component: CodelistNodeviewComponent as unknown as ComponentLike,
   inline: true,
   group: 'inline variable',
-  content: 'inline*',
+  content: 'codelist_option*',
   atom: true,
-  editable: true,
+  editable: false,
   recreateUriFunction: recreateVariableUris,
   draggable: false,
   needsFFKludge: true,
@@ -236,23 +141,44 @@ const emberNodeConfig: EmberNodeConfig = {
     label: {
       default: null,
     },
-    codelist: {
-      default: 'UNKNOWN',
-    },
-    source: {
-      default: 'UNKNOWN',
-    },
     selectionStyle: {
       default: null,
     },
-    datatype: {
-      default: XSD('string').namedNode,
+    codelist: {},
+    source: {},
+    variable: {
+      default: null,
+    },
+    variableInstance: {
+      default: null,
     },
   },
   classNames: ['say-codelist-variable'],
   toDOM,
-  parseDOM: [...parseDOM, ...parseDOMLegacy],
+  parseDOM,
 };
 
 export const codelist = createEmberNodeSpec(emberNodeConfig);
 export const codelistView = createEmberNodeView(emberNodeConfig);
+
+export const codelist_option: SayNodeSpec = {
+  inline: true,
+  atom: true,
+  content: 'text*',
+  selectable: false,
+  editable: false,
+  draggable: false,
+  attrs: {
+    ...rdfaAttrSpec({ rdfaAware }),
+  },
+  toDOM: (node) => {
+    return renderRdfaAware({
+      renderable: node,
+      attrs: {
+        'data-say-type': 'codelist_option',
+      },
+      tag: 'span',
+      content: node.textContent,
+    });
+  },
+};