@lblod/ember-rdfa-editor-lblod-plugins 26.2.1 → 26.2.2-dev.062c765ac0d45deacd81d63752660fc56eefffa0

package/.changeset/fluffy-carrots-drum.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Redesign of fragment nodes

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 26.2.2
+
+### Patch Changes
+
+- [#522](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/522) [`2332962`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/23329624b10c10128c4b6cc438c2c5231579ab80) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Convert citation into a keyed plugin
+
+- [#518](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/518) [`3188ea3`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/3188ea3ce4723f188854e8c66b37b44b1790a62c) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Add rdfa to the person variable
+
 ## 26.2.1
 
 ### Patch Changes

package/addon/components/citation-plugin/citation-card.ts

@@ -11,11 +11,12 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import {
   CitationDecoration,
-  CitationPlugin,
   CitationPluginEmberComponentConfig,
+  CitationPluginState,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
 import {
   DecorationSet,
+  PluginKey,
   SayController,
   Transaction,
 } from '@lblod/ember-rdfa-editor';
@@ -32,10 +33,10 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 import { cleanCaches } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cache';
 import { SearchIcon } from '@appuniversum/ember-appuniversum/components/icons/search';
+import { citationPluginKey } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
 
 interface Args {
   controller: SayController;
-  plugin: CitationPlugin;
   config: CitationPluginEmberComponentConfig;
 }
 
@@ -76,8 +77,8 @@ export default class CitationCardComponent extends Component<Args> {
     return !this.controller.inEmbeddedView && this.activeDecoration;
   }
 
-  get plugin() {
-    return this.args.plugin;
+  get plugin(): PluginKey<CitationPluginState> {
+    return citationPluginKey;
   }
 
   get config() {

package/addon/components/citation-plugin/citations/legal-document-detail.ts

@@ -58,8 +58,6 @@ export default class LegalDocumentDetailComponent extends Component<Args> {
       });
       this.totalCount = results.totalCount;
 
-      console.log({ result: results.articles });
-
       return results.articles;
     } catch (e) {
       console.warn(e); // eslint-ignore-line no-console

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

@@ -8,6 +8,7 @@ import t from 'ember-intl/helpers/t';
 import AuIcon, {
   type AuIconSignature,
 } from '@appuniversum/ember-appuniversum/components/au-icon';
+import AuBadge from '@appuniversum/ember-appuniversum/components/au-badge';
 import { SynchronizeIcon } from '@appuniversum/ember-appuniversum/components/icons/synchronize';
 import { BinIcon } from '@appuniversum/ember-appuniversum/components/icons/bin';
 import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
@@ -219,7 +220,12 @@ export default class SnippetNode extends Component<Signature> {
       />
     {{else}}
       <div class='say-snippet-card'>
-        <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
+        <div class='say-snippet-title'>
+          <span class='au-c-badge au-c-badge--small say-snippet-title-icon'>
+            <AuIcon @icon='plus-text' />
+          </span>
+          {{this.node.attrs.title}}
+        </div>
         <div class='say-snippet-content'>{{yield}}</div>
         <div class='say-snippet-icons' contenteditable='false'>
           <SnippetButton

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

@@ -9,6 +9,7 @@ import {
   ProsePlugin,
   ResolvedPos,
   Schema,
+  PluginKey,
 } from '@lblod/ember-rdfa-editor';
 import processMatch, {
   RegexpMatchArrayWithIndices,
@@ -112,7 +113,7 @@ export interface CitationDecoration extends Decoration {
   spec: CitationDecorationSpec;
 }
 
-interface CitationPluginState {
+export interface CitationPluginState {
   highlights: DecorationSet;
   activeRanges: [number, number][];
 }
@@ -153,8 +154,13 @@ export type CitationPluginEmberComponentConfig = CitationPluginConfig & {
   defaultDecisionsGovernmentName?: string;
 };
 
+export const citationPluginKey: PluginKey<CitationPluginState> = new PluginKey(
+  'say-citation-plugin',
+);
+
 export function citationPlugin(config: CitationPluginConfig): CitationPlugin {
   const citation: CitationPlugin = new ProsePlugin({
+    key: citationPluginKey,
     state: {
       init(stateConfig: EditorStateConfig, state: EditorState) {
         return calculateCitationPluginState(state, config);

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

@@ -1,6 +1,9 @@
 import {
   EXT,
+  FOAF,
   RDF,
+  PERSOON,
+  PERSON,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import {
   createEmberNodeSpec,
@@ -51,22 +54,43 @@ const parseDOM = [
           return false;
         }
         let value: Person | undefined;
-        if (node.dataset.value) {
-          value = JSON.parse(node.dataset.value) as Person | undefined;
-        } else if (node.dataset.mandatee) {
-          const mandatee = JSON.parse(node.dataset.mandatee) as
-            | {
-                personUri: string;
-                firstName: string;
-                lastName: string;
-              }
-            | undefined;
-          if (mandatee) {
-            value = {
-              uri: mandatee.personUri,
-              firstName: mandatee.firstName,
-              lastName: mandatee.lastName,
-            };
+        const contentNode = node.querySelector(
+          '[data-content-container="true"]',
+        );
+        const aboutNode = contentNode?.querySelector(
+          `[property="${EXT('content').full}"],[property="${EXT('content').prefixed}]`,
+        );
+        if (aboutNode) {
+          const firstNameNode = aboutNode.querySelector(
+            `[property="${FOAF('gebruikteVoornaam').full}"],[property="${FOAF('gebruikteVoornaam').prefixed}"]`,
+          );
+          const lastNameNode = aboutNode.querySelector(
+            `[property="${PERSOON('familyName').full}"],[property="${PERSOON('familyName').prefixed}"]`,
+          );
+          value = {
+            uri: aboutNode.getAttribute('resource') || '',
+            firstName: firstNameNode?.textContent || '',
+            lastName: lastNameNode?.textContent || '',
+          };
+        } else {
+          // Backwards compatibility
+          if (node.dataset.value) {
+            value = JSON.parse(node.dataset.value) as Person | undefined;
+          } else if (node.dataset.mandatee) {
+            const mandatee = JSON.parse(node.dataset.mandatee) as
+              | {
+                  personUri: string;
+                  firstName: string;
+                  lastName: string;
+                }
+              | undefined;
+            if (mandatee) {
+              value = {
+                uri: mandatee.personUri,
+                firstName: mandatee.firstName,
+                lastName: mandatee.lastName,
+              };
+            }
           }
         }
         return {
@@ -87,11 +111,9 @@ const serialize = (node: PNode, state: EditorState): DOMOutputSpec => {
   return renderRdfaAware({
     renderable: node,
     tag: 'span',
-    attrs: {
-      'data-value': JSON.stringify(person),
-    },
+    attrs: {},
     content: person
-      ? `${person.firstName} ${person.lastName}`
+      ? generatePersonHtml(person)
       : t(
           'variable-plugin.person.nodeview-placeholder',
           TRANSLATION_FALLBACKS.nodeview_placeholder,
@@ -99,6 +121,32 @@ const serialize = (node: PNode, state: EditorState): DOMOutputSpec => {
   });
 };
 
+function generatePersonHtml(person: Person): DOMOutputSpec {
+  return [
+    'span',
+    {
+      property: EXT('content').full,
+      resource: person.uri,
+      typeof: PERSON('Person').full,
+    },
+    [
+      'span',
+      {
+        property: FOAF('gebruikteVoornaam').full,
+      },
+      person.firstName,
+    ],
+    ' ',
+    [
+      'span',
+      {
+        property: PERSOON('familyName').full,
+      },
+      person.lastName,
+    ],
+  ];
+}
+
 const emberNodeConfig: EmberNodeConfig = {
   name: 'person-variable',
   component: PersonNodeViewComponent as unknown as ComponentLike,

package/addon/utils/constants.ts

@@ -46,6 +46,11 @@ export const SRO = namespace(
   'https://data.vlaanderen.be/ns/slimmeraadpleegomgeving#',
   'sro',
 );
+export const PERSOON = namespace(
+  'http://data.vlaanderen.be/ns/persoon#',
+  'persoon',
+);
+export const PERSON = namespace('http://www.w3.org/ns/person#', 'person');
 export const BESTUURSPERIODES = {
   '2012-2019':
     'http://data.lblod.info/id/concept/Bestuursperiode/845dbc7f-139e-4632-b200-f90e180f1dba',

package/app/styles/snippet-plugin.scss

@@ -90,10 +90,17 @@
   border: 1px solid var(--au-blue-300);
   border-radius: var(--au-radius);
   .say-snippet-title {
-    background-color: var(--au-blue-300);
+    background-color: var(--au-gray-100);
+    border-radius: 0.1em 0.1em 0 0;
     font-size: 1.6rem;
     font-weight: var(--au-medium);
     padding: 5px;
+    border-bottom: 1px solid var(--au-blue-300);
+    color: var(--au-blue-700);
+    .say-snippet-title-icon {
+      background-color: var(--au-blue-300);
+      color: black;
+    }
   }
   .say-snippet-content {
     padding: 20px;
@@ -143,6 +150,19 @@
   }
 }
 
+.ember-node.say-active:has(> .say-snippet-card) {
+  outline: none;
+}
+
+.ember-node.say-active > .say-snippet-card {
+  border-color: var(--au-blue-700);
+  border-width: 0.2rem;
+  > .say-snippet-title {
+    border-bottom-color: var(--au-blue-700);
+    border-bottom-width: 0.2rem;
+  }
+}
+
 .say-snippet-placeholder {
   display: flex;
   flex-direction: row;

package/declarations/addon/components/citation-plugin/citation-card.d.ts

@@ -1,12 +1,11 @@
 import Component from '@glimmer/component';
 import { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { CitationDecoration, CitationPlugin, CitationPluginEmberComponentConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
-import { DecorationSet, SayController } from '@lblod/ember-rdfa-editor';
+import { CitationDecoration, CitationPluginEmberComponentConfig, CitationPluginState } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
+import { DecorationSet, PluginKey, SayController } from '@lblod/ember-rdfa-editor';
 import { Article } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/article';
 import { LegalDocument } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legal-documents';
 interface Args {
     controller: SayController;
-    plugin: CitationPlugin;
     config: CitationPluginEmberComponentConfig;
 }
 export default class CitationCardComponent extends Component<Args> {
@@ -25,7 +24,7 @@ export default class CitationCardComponent extends Component<Args> {
     update(): void;
     get controller(): SayController;
     get showCard(): false | Option<CitationDecoration>;
-    get plugin(): CitationPlugin;
+    get plugin(): PluginKey<CitationPluginState>;
     get config(): CitationPluginEmberComponentConfig;
     get decorations(): DecorationSet | undefined;
     get activeDecoration(): Option<CitationDecoration>;

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

@@ -1,4 +1,4 @@
-import { Decoration, DecorationSet, EditorState, InlineDecorationSpec, NodeType, PNode, ProsePlugin, Schema } from '@lblod/ember-rdfa-editor';
+import { Decoration, DecorationSet, EditorState, InlineDecorationSpec, NodeType, PNode, ProsePlugin, Schema, PluginKey } from '@lblod/ember-rdfa-editor';
 /**
  * The monster regex that makes the citation plugin trigger to show `CitationCard`.
  * In restructuring, I've made sure that I didn't abstract away any of the capturing groups,
@@ -15,7 +15,7 @@ export interface CitationDecorationSpec extends InlineDecorationSpec {
 export interface CitationDecoration extends Decoration {
     spec: CitationDecorationSpec;
 }
-interface CitationPluginState {
+export interface CitationPluginState {
     highlights: DecorationSet;
     activeRanges: [number, number][];
 }
@@ -43,5 +43,5 @@ export type CitationPluginEmberComponentConfig = CitationPluginConfig & {
     decisionsEndpoint?: string;
     defaultDecisionsGovernmentName?: string;
 };
+export declare const citationPluginKey: PluginKey<CitationPluginState>;
 export declare function citationPlugin(config: CitationPluginConfig): CitationPlugin;
-export {};

package/declarations/addon/utils/constants.d.ts

@@ -18,6 +18,8 @@ export declare const MANDAAT: (s: string) => import("@lblod/ember-rdfa-editor-lb
 export declare const FOAF: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
 export declare const LOCN: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
 export declare const SRO: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
+export declare const PERSOON: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
+export declare const PERSON: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
 export declare const BESTUURSPERIODES: {
     '2012-2019': string;
     '2019-2024': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "26.2.1",
+  "version": "26.2.2-dev.062c765ac0d45deacd81d63752660fc56eefffa0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/pnpm-lock.yaml

@@ -4977,7 +4977,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
 
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}