@lblod/ember-rdfa-editor-lblod-plugins 7.0.0 → 8.0.0

package/addon/plugins/decision-plugin/commands/insert-motivation.ts

@@ -8,16 +8,17 @@ import { v4 as uuid } from 'uuid';
 import { isNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { transactionCompliesWithShapes } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation/utils/transaction-complies-with-shapes';
 import { findInsertionPosInAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/find-insertion-pos-in-ancestor-of-type';
+import IntlService from 'ember-intl/services/intl';
 
 interface InsertMotivationArgs {
-  placeholderText?: string;
+  intl: IntlService;
   validateShapes?: Set<string>;
 }
 
 export default function insertMotivation({
+  intl,
   validateShapes,
-  placeholderText = 'Insert motivation',
-}: InsertMotivationArgs = {}): Command {
+}: InsertMotivationArgs): Command {
   return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
     const { selection, schema } = state;
     const nodeToInsert = schema.node('motivering', { __rdfaId: uuid() }, [
@@ -25,9 +26,63 @@ export default function insertMotivation({
         'paragraph',
         null,
         schema.node('placeholder', {
-          placeholderText,
+          placeholderText: intl.t('besluit-plugin.placeholder.government-body'),
         })
       ),
+      schema.node(
+        'heading',
+        {
+          level: 5,
+        },
+        [schema.text(intl.t('besluit-plugin.text.authority'))]
+      ),
+      schema.node('bullet_list', null, [
+        schema.node('list_item', null, [
+          schema.node('paragraph', null, [
+            schema.node('placeholder', {
+              placeholderText: intl.t(
+                'besluit-plugin.placeholder.legal-jurisdiction'
+              ),
+            }),
+          ]),
+        ]),
+      ]),
+      schema.node(
+        'heading',
+        {
+          level: 5,
+        },
+        [schema.text(intl.t('besluit-plugin.text.legal-context'))]
+      ),
+      schema.node('bullet_list', null, [
+        schema.node('list_item', null, [
+          schema.node('paragraph', null, [
+            schema.node('placeholder', {
+              placeholderText: intl.t(
+                'besluit-plugin.placeholder.insert-legal-context'
+              ),
+            }),
+          ]),
+        ]),
+      ]),
+      schema.node(
+        'heading',
+        {
+          level: 5,
+        },
+        [schema.text(intl.t('besluit-plugin.text.factual-context'))]
+      ),
+      schema.node('bullet_list', null, [
+        schema.node('list_item', null, [
+          schema.node('paragraph', null, [
+            schema.node('placeholder', {
+              placeholderText: intl.t(
+                'besluit-plugin.placeholder.insert-factual-context'
+              ),
+            }),
+          ]),
+        ]),
+      ]),
     ]);
     // how the offset between the insertion point and the point where the cursor should end up
     const cursorOffset = 2;
@@ -47,8 +102,6 @@ export default function insertMotivation({
       return false;
     }
     if (dispatch) {
-      console.log('inserts in ', insertionPos);
-      console.log('selection on ', insertionPos + cursorOffset);
       const selectionPos = tr.doc.resolve(insertionPos + cursorOffset);
       // const targetPos = tr.doc.resolve(insertionPos + cursorOffset + 1);
       // TODO figure out why I cant just set a nodeSelection here

package/addon/plugins/decision-plugin/utils/validation-rules.ts

@@ -0,0 +1,11 @@
+import { Schema } from '@lblod/ember-rdfa-editor';
+
+export const atLeastOneArticleContainer = (schema: Schema) => ({
+  name: 'at-least-one-article-container',
+  focusNodeType: schema.nodes.besluit,
+  path: ['article_container'],
+  message: 'Document must contain at least one article container.',
+  constraints: {
+    minCount: 1,
+  },
+});

package/addon/plugins/rdfa-date-plugin/nodes/date.ts

@@ -1,4 +1,8 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
 import {
   DCT,
   EXT,
@@ -7,128 +11,160 @@ import {
 import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { DateOptions } from '..';
 import { formatDate, validateDateFormat } from '../utils';
+import { PNode } from '@lblod/ember-rdfa-editor';
 
-const date: (options: DateOptions) => NodeSpec = (options) => {
-  return {
-    group: 'inline',
-    inline: true,
-    attrs: {
-      mappingResource: {
-        default: null,
-      },
-      value: {},
-      format: {
-        default: options.formats[0].dateFormat,
-      },
-      onlyDate: {
-        default: true,
-      },
-      custom: {
-        default: false,
-      },
+const emberNodeConfig = (options: DateOptions): EmberNodeConfig => ({
+  name: 'date',
+  group: 'inline',
+  componentPath: 'rdfa-date-plugin/date',
+  inline: true,
+  selectable: true,
+  draggable: false,
+  atom: true,
+  defining: false,
+  options,
+  attrs: {
+    mappingResource: {
+      default: null,
     },
-    selectable: true,
-    leafText: (node) => {
-      const { value, onlyDate, format } = node.attrs;
-      const humanReadableDate = value
-        ? formatDate(new Date(value), format)
-        : onlyDate
-        ? options.placeholder.insertDate
-        : options.placeholder.insertDateTime;
-      return humanReadableDate;
+    humanReadableDate: {
+      default: options.placeholder.insertDate,
     },
-    toDOM: (node) => {
-      const { value, onlyDate, format, mappingResource, custom } = node.attrs;
-      const datatype = onlyDate ? XSD('date') : XSD('dateTime');
-      let humanReadableDate: string;
-      if (value) {
-        if (validateDateFormat(format).type === 'ok') {
-          humanReadableDate = formatDate(new Date(value), format);
-        } else {
-          humanReadableDate = 'Ongeldig formaat';
-        }
-      } else {
-        humanReadableDate = onlyDate
-          ? options.placeholder.insertDate
-          : options.placeholder.insertDateTime;
-      }
-      const dateAttrs = {
-        datatype: datatype.prefixed,
-        property: EXT('content').prefixed,
-        'data-format': format as string,
-        'data-custom': custom ? 'true' : 'false',
-        ...(!!value && { content: value as string }),
-      };
-      if (mappingResource) {
-        return [
-          'span',
-          {
-            resource: mappingResource as string,
-            typeof: EXT('Mapping').prefixed,
-            class: 'date',
-          },
-          ['span', { property: DCT('type').prefixed, content: 'date' }],
-          ['span', dateAttrs, humanReadableDate],
-        ];
+    value: {},
+    format: {
+      default: options.formats[0].dateFormat,
+    },
+    onlyDate: {
+      default: true,
+    },
+    custom: {
+      default: false,
+    },
+    label: {
+      default: '',
+    },
+  },
+  leafText: (node: PNode) => {
+    const { value, onlyDate, format } = node.attrs;
+    const humanReadableDate = value
+      ? formatDate(new Date(value), format)
+      : onlyDate
+      ? options.placeholder.insertDate
+      : options.placeholder.insertDateTime;
+    return humanReadableDate;
+  },
+  toDOM: (node) => {
+    const { value, onlyDate, format, mappingResource, custom, label } =
+      node.attrs;
+    const datatype = onlyDate ? XSD('date') : XSD('dateTime');
+    let humanReadableDate: string;
+    if (value) {
+      if (validateDateFormat(format).type === 'ok') {
+        humanReadableDate = formatDate(new Date(value), format);
       } else {
-        return ['span', { class: 'date', ...dateAttrs }, humanReadableDate];
+        humanReadableDate = 'Ongeldig formaat';
       }
+    } else {
+      humanReadableDate = (onlyDate as boolean)
+        ? options.placeholder.insertDate
+        : options.placeholder.insertDateTime;
+    }
+    const dateAttrs = {
+      datatype: datatype.prefixed,
+      property: EXT('content').prefixed,
+      'data-format': format as string,
+      'data-custom': custom ? 'true' : 'false',
+      ...(!!value && { content: value as string }),
+    };
+    if (mappingResource) {
+      return [
+        'span',
+        {
+          resource: mappingResource as string,
+          typeof: EXT('Mapping').prefixed,
+          class: 'date',
+          'data-label': label as string,
+        },
+        ['span', { property: DCT('type').prefixed, content: 'date' }],
+        ['span', dateAttrs, humanReadableDate],
+      ];
+    } else {
+      return ['span', { class: 'date', ...dateAttrs }, humanReadableDate];
+    }
+  },
+  parseDOM: [
+    {
+      tag: 'span',
+      getAttrs: (node: HTMLElement) => {
+        if (
+          hasRDFaAttribute(node, 'datatype', XSD('date')) ||
+          hasRDFaAttribute(node, 'datatype', XSD('dateTime'))
+        ) {
+          const onlyDate = hasRDFaAttribute(node, 'datatype', XSD('date'));
+          return {
+            value: node.getAttribute('content') ?? new Date().toISOString(),
+            onlyDate,
+            format: node.dataset.format,
+            custom: node.dataset.custom === 'true',
+          };
+        }
+        return false;
+      },
     },
-    parseDOM: [
-      {
-        tag: 'span',
-        getAttrs: (node: HTMLElement) => {
-          if (
-            hasRDFaAttribute(node, 'datatype', XSD('date')) ||
-            hasRDFaAttribute(node, 'datatype', XSD('dateTime'))
-          ) {
-            const onlyDate = hasRDFaAttribute(node, 'datatype', XSD('date'));
+    {
+      tag: 'span',
+      getAttrs: (node: HTMLElement) => {
+        if (hasRDFaAttribute(node, 'typeof', EXT('Mapping'))) {
+          const mappingResource = node.getAttribute('resource');
+          if (!mappingResource) {
+            return false;
+          }
+          const variableType = [...node.children]
+            .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
+            ?.getAttribute('content');
+          const datatype = [...node.children]
+            .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
+            ?.getAttribute('datatype');
+          if (variableType === 'date' && datatype) {
+            const onlyDate = !![...node.children].find((el) =>
+              hasRDFaAttribute(el, 'datatype', XSD('date'))
+            );
+            const dateNode = [...node.children].find((el) =>
+              hasRDFaAttribute(el, 'property', EXT('content'))
+            ) as HTMLElement | undefined;
+            let humanReadableDate: string;
+            const value = dateNode?.getAttribute('content');
+            const format = dateNode?.dataset.format;
+            if (value && format) {
+              if (validateDateFormat(format).type === 'ok') {
+                humanReadableDate = formatDate(new Date(value), format);
+              } else {
+                humanReadableDate = 'Ongeldig formaat';
+              }
+            } else {
+              humanReadableDate = onlyDate
+                ? options.placeholder.insertDate
+                : options.placeholder.insertDateTime;
+            }
+            const label = node.getAttribute('data-label') || variableType;
             return {
-              value: node.getAttribute('content') ?? new Date().toISOString(),
+              mappingResource,
               onlyDate,
-              format: node.dataset.format,
-              custom: node.dataset.custom === 'true',
+              humanReadableDate,
+              value: value,
+              format: format,
+              custom: dateNode?.dataset.custom === 'true',
+              label,
             };
           }
-          return false;
-        },
-      },
-      {
-        tag: 'span',
-        getAttrs: (node: HTMLElement) => {
-          if (hasRDFaAttribute(node, 'typeof', EXT('Mapping'))) {
-            const mappingResource = node.getAttribute('resource');
-            if (!mappingResource) {
-              return false;
-            }
-            const variableType = [...node.children]
-              .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
-              ?.getAttribute('content');
-            const datatype = [...node.children]
-              .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
-              ?.getAttribute('datatype');
-            if (variableType === 'date' && datatype) {
-              const onlyDate = !![...node.children].find((el) =>
-                hasRDFaAttribute(el, 'datatype', XSD('date'))
-              );
-              const dateNode = [...node.children].find((el) =>
-                hasRDFaAttribute(el, 'property', EXT('content'))
-              ) as HTMLElement | undefined;
-              return {
-                mappingResource,
-                onlyDate,
-                value:
-                  dateNode?.getAttribute('content') ?? new Date().toISOString(),
-                format: dateNode?.dataset.format,
-                custom: dateNode?.dataset.custom === 'true',
-              };
-            }
-          }
-          return false;
-        },
+        }
+        return false;
       },
-    ],
-  };
-};
+    },
+  ],
+});
 
-export default date;
+export const date = (options: DateOptions) =>
+  createEmberNodeSpec(emberNodeConfig(options));
+export const dateView = (options: DateOptions) =>
+  createEmberNodeView(emberNodeConfig(options));

package/addon/plugins/validation/README.md

@@ -77,7 +77,7 @@ position in the path
 
 
 
-### `minCount: number`
+### minCount
 
 - type: `number`
 - meaning: the specified shape must occur at least as many times as the specified amount in the focusNode

package/addon/plugins/validation/index.ts

@@ -141,13 +141,7 @@ export function validation(
         const schemaChanged = oldState.schema !== newState.schema;
         if (schemaChanged) {
           const spec = compileSpec(configurator, newState.schema);
-          const newValidation = doValidation(
-            tr,
-            oldPluginState,
-            oldState,
-            newState,
-            spec
-          );
+          const newValidation = doValidation(newState, spec);
           tr.setMeta('validated', newValidation);
           tr.setMeta('firstPass', false);
           return { spec, report: newValidation };
@@ -166,13 +160,7 @@ export function validation(
             tr.setMeta('firstPass', false);
             return cachedValidation;
           }
-          const newValidation = doValidation(
-            tr,
-            oldPluginState,
-            oldState,
-            newState,
-            spec
-          );
+          const newValidation = doValidation(newState, spec);
           tr.setMeta('validated', newValidation);
           tr.setMeta('firstPass', false);
           return { spec, report: newValidation };
@@ -230,9 +218,6 @@ interface ValidationContext {
  * @param spec
  */
 function doValidation(
-  tr: Transaction,
-  oldPluginState: ValidationState,
-  oldState: EditorState,
   newState: EditorState,
   spec: ValidationSpec
 ): ValidationReport {

package/addon/plugins/variable-plugin/nodes.ts

@@ -9,10 +9,55 @@ import {
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { v4 as uuidv4 } from 'uuid';
+import {
+  MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY,
+  MAXIMUM_VALUE_PNODE_KEY,
+  MINIMUM_VALUE_HTML_ATTRIBUTE_KEY,
+  MINIMUM_VALUE_PNODE_KEY,
+} from './utils/constants';
+import { PNode } from '@lblod/ember-rdfa-editor';
 
-const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'], 
+const CONTENT_SELECTOR = `span[property~='${EXT('content').prefixed}'],
                           span[property~='${EXT('content').full}']`;
 
+export const getHTMLNodeExtraAttributes = ({
+  node,
+  type,
+}: {
+  node: HTMLElement;
+  type: string;
+}) => {
+  if (type === 'number') {
+    return {
+      [MINIMUM_VALUE_PNODE_KEY]:
+        node.getAttribute(MINIMUM_VALUE_HTML_ATTRIBUTE_KEY) ?? null,
+      [MAXIMUM_VALUE_PNODE_KEY]:
+        node.getAttribute(MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY) ?? null,
+    };
+  }
+
+  return {};
+};
+
+export const getPNodeExtraAttributes = ({
+  node,
+  type,
+}: {
+  node: PNode;
+  type: string;
+}) => {
+  if (type === 'number') {
+    return {
+      [MINIMUM_VALUE_HTML_ATTRIBUTE_KEY]:
+        (node.attrs[MINIMUM_VALUE_PNODE_KEY] as string) ?? null,
+      [MAXIMUM_VALUE_HTML_ATTRIBUTE_KEY]:
+        (node.attrs[MAXIMUM_VALUE_PNODE_KEY] as string) ?? null,
+    };
+  }
+
+  return {};
+};
+
 const emberNodeConfig: EmberNodeConfig = {
   name: 'variable',
   componentPath: 'variable-plugin/variable',
@@ -39,6 +84,15 @@ const emberNodeConfig: EmberNodeConfig = {
     datatype: {
       default: null,
     },
+    label: {
+      default: '',
+    },
+    minimumValue: {
+      default: null,
+    },
+    maximumValue: {
+      default: null,
+    },
   },
   toDOM: (node) => {
     const {
@@ -48,12 +102,17 @@ const emberNodeConfig: EmberNodeConfig = {
       type,
       datatype,
       source,
+      label,
     } = node.attrs;
+
     const sourceSpan = source
       ? [
           [
             'span',
-            { property: DCT('source').prefixed, resource: source as string },
+            {
+              property: DCT('source').prefixed,
+              resource: source as string,
+            },
           ],
         ]
       : [];
@@ -73,6 +132,8 @@ const emberNodeConfig: EmberNodeConfig = {
       {
         resource: mappingResource as string,
         typeof: EXT('Mapping').prefixed,
+        'data-label': label as string,
+        ...getPNodeExtraAttributes({ node, type: type as string }),
       },
       [
         'span',
@@ -115,10 +176,11 @@ const emberNodeConfig: EmberNodeConfig = {
           const type = [...node.children]
             .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
             ?.getAttribute('content');
+          const label = node.getAttribute('data-label') || type;
           const datatype = [...node.children]
             .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
             ?.getAttribute('datatype');
-          if (!mappingResource) {
+          if (!mappingResource || !type) {
             return false;
           }
           return {
@@ -130,8 +192,11 @@ const emberNodeConfig: EmberNodeConfig = {
             source,
             type,
             datatype,
+            label,
+            ...getHTMLNodeExtraAttributes({ type, node }),
           };
         }
+
         return false;
       },
       contentElement: CONTENT_SELECTOR,