@lblod/ember-rdfa-editor-lblod-plugins 15.0.0 → 15.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 15.2.0
+
+### Minor Changes
+
+- [#362](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/362) [`47f2337`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/47f233767cd5f6169e2d4b8a3c71619d0718c035) Thanks [@piemonkey](https://github.com/piemonkey)! - Add incredibly small plugin for highlighting text as redacted
+
+## 15.1.0
+
+### Minor Changes
+
+- [#343](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/343) [`e9b428c`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e9b428cdffca32164ce9f2c03540dd5ad6a9ba19) Thanks [@dkozickis](https://github.com/dkozickis)! - GN-4130: Move styles for `data-editor-highlight`
+
+  Styles that were applied to elements with the `data-editor-highlight` attribute (used by `citation-plugin`) moved from
+  [editor repository](https://github.com/lblod/ember-rdfa-editor/pull/1013) to this repo as part of the `citation-plugin`.
+
+- [#351](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/351) [`f6fa933`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f6fa933569a70c3cc0f7d4348c4c8a121b77cd1f) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove explicit creation of `rdfa-id` attributes
+
+### Patch Changes
+
+- [`83cc1ae`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/83cc1ae8b3bba280aa001566e7d77109a2d43170) Thanks [@abeforgit](https://github.com/abeforgit)! - bump peerdep to allow editor v7
+
 ## 15.0.0
 
 ### Major Changes

package/README.md

@@ -810,6 +810,36 @@ Template comments have a specific style that can be imported in the stylesheet w
 @import 'template-comments-plugin';
 ```
 
+## confidentiality-plugin
+
+A very small plugin which allows for marking parts of text as redacted and including the styles to make this visible.
+
+To enable the plugin you need to add the `MarkSpec` to the `Schema`:
+
+``` js
+import { redacted } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/confidentiality-plugin/marks/redacted';
+// ...
+new Schema({
+  // ...
+  marks: {
+    // ...
+    redacted,
+  },
+});
+```
+
+You can then add the button to the toolbar, passing it the `SayController`:
+
+``` hbs
+<ConfidentialityPlugin::Toolbar @controller={{this.controller}} />
+```
+
+To see the redactions you'll need to add styles that target the `[property='ext:redacted']` selector, which can be done easily in Sass by importing the included stylesheet:
+
+``` scss
+@import 'confidentiality-plugin';
+```
+
 ## Embroider
 To use `@lblod/ember-rdfa-editor-lblod-plugins` with Embroider some extra Webpack configuration is needed, which you can import like this:
 

package/addon/components/confidentiality-plugin/redact.hbs

@@ -0,0 +1,6 @@
+<Toolbar::Mark
+  @icon="not-visible"
+  @title={{t 'confidentiality-plugin.redact'}}
+  @mark="redacted"
+  @controller={{@controller}}
+/>

package/addon/components/confidentiality-plugin/toolbar.hbs

@@ -0,0 +1 @@
+<ConfidentialityPlugin::Redact @controller={{@controller}}/>

package/addon/components/variable-plugin/number/nodeview.hbs

@@ -32,7 +32,6 @@
         @standOut={{true}} as |card|
       >
         <card.content>
-          {{! template-lint-disable no-down-event-binding }}
           <AuNativeInput
             value={{this.inputNumber}}
             placeholder={{t 'variable.number.type-number'}}

package/addon/plugins/citation-plugin/utils/cited-text.ts

@@ -1,7 +1,6 @@
 import { PNode } from '@lblod/ember-rdfa-editor';
 import { CitationSchema } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { v4 as uuid } from 'uuid';
 
 export function citedText(
   schema: CitationSchema,
@@ -13,7 +12,6 @@ export function citedText(
       href: uri,
       property: 'eli:cites',
       typeof: 'eli:LegalExpression',
-      __rdfaId: uuid(),
     },
     [schema.text(title)],
   );

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

@@ -0,0 +1 @@
+export { redacted } from './marks/redacted';

package/addon/plugins/confidentiality-plugin/marks/redacted.ts

@@ -0,0 +1,24 @@
+import { MarkSpec } from 'prosemirror-model';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+
+export const redacted: MarkSpec = {
+  toDOM(_node) {
+    return ['span', { property: EXT('redacted').prefixed }, 0];
+  },
+  parseDOM: [
+    {
+      tag: 'span',
+      getAttrs(value) {
+        if (typeof value === 'string') {
+          return false;
+        }
+        return (
+          hasRDFaAttribute(value, 'property', EXT('redacted')) && {
+            property: value.getAttribute('property'),
+          }
+        );
+      },
+    },
+  ],
+};

package/addon/plugins/decision-plugin/commands/insert-article-container.ts

@@ -4,7 +4,6 @@ import {
   NodeSelection,
   Transaction,
 } from '@lblod/ember-rdfa-editor';
-import { v4 as uuid } from 'uuid';
 import { besluitArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/nodes';
 import IntlService from 'ember-intl/services/intl';
 import { isNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
@@ -24,9 +23,7 @@ export default function insertArticleContainer({
     const { selection, schema } = state;
     const nodeToInsert = schema.node(
       'article_container',
-      {
-        __rdfaId: uuid(),
-      },
+      {},
       besluitArticleStructure.constructor({
         schema,
         intl,

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

@@ -3,7 +3,6 @@ import {
   NodeSelection,
   Transaction,
 } from '@lblod/ember-rdfa-editor';
-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';
@@ -21,7 +20,7 @@ export default function insertDescription({
     const { selection, schema } = state;
     const nodeToInsert = schema.node(
       'description',
-      { __rdfaId: uuid() },
+      {},
       schema.node(
         'paragraph',
         null,

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

@@ -4,7 +4,6 @@ import {
   NodeSelection,
   Transaction,
 } from '@lblod/ember-rdfa-editor';
-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';
@@ -23,7 +22,7 @@ export default function insertMotivation({
   return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
     const translationWithDocLang = getTranslationFunction(state);
     const { selection, schema } = state;
-    const nodeToInsert = schema.node('motivering', { __rdfaId: uuid() }, [
+    const nodeToInsert = schema.node('motivering', {}, [
       schema.node(
         'paragraph',
         null,

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

@@ -1,4 +1,3 @@
-import { v4 as uuid } from 'uuid';
 import { isNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import {
   EditorState,
@@ -21,7 +20,7 @@ export default function insertTitle({
     const { selection, schema } = state;
     const nodeToInsert = schema.node(
       'besluit_title',
-      { __rdfaId: uuid() },
+      {},
       schema.node(
         'paragraph',
         null,

package/addon/plugins/document-title-plugin/commands/insert-document-title.ts

@@ -1,6 +1,5 @@
 import { Command } from '@lblod/ember-rdfa-editor';
 import { findInsertionRange } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/_private/find-insertion-range';
-import { v4 as uuid } from 'uuid';
 
 interface InsertDocumentTitleArgs {
   placeholder: string;
@@ -27,7 +26,7 @@ export default function insertDocumentTitle({
         insertionRange.to,
         schema.node(
           'document_title',
-          { __rdfaId: uuid() },
+          {},
           schema.node(
             'paragraph',
             null,

package/addon/plugins/standard-template-plugin/utils/nodes.ts

@@ -188,16 +188,14 @@ export const besluitArticleStructure: StructureSpec = {
       `besluit_article`,
       {
         resource: `http://data.lblod.info/articles/${uuid()}`,
-        __rdfaId: uuid(),
       },
       [
         schema.node('besluit_article_header', {
           number: numberConverted,
-          __rdfaId: uuid(),
         }),
         schema.node(
           `besluit_article_content`,
-          { __rdfaId: uuid() },
+          {},
           content ??
             schema.node(
               'paragraph',

package/app/components/confidentiality-plugin/redact.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/confidentiality-plugin/redact';

package/app/components/confidentiality-plugin/toolbar.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/confidentiality-plugin/toolbar';

package/app/styles/citaten-plugin.scss

@@ -48,3 +48,158 @@
 .citaten--error-code {
   font-family: var(--au-font-tertiary);
 }
+
+// Start: Styling the highlight when detecting search term inside the editor
+@mixin hints($before, $after) {
+  .rdfa-annotations.show-rdfa-blocks [data-editor-highlight=true] {
+    &:before {
+      content: "#{$before}";
+    }
+
+    &:not([contenteditable=""]):after {
+      content: "#{$after}";
+    }
+  }
+}
+
+.rdfa-annotations {
+  &.show-rdfa-blocks {
+    [data-editor-highlight=true] {
+      position: relative;
+      border: 1px solid var(--au-gray-200);
+      display: block !important; // Override inline styles
+      margin: $au-unit-tiny;
+      padding: 0;
+
+      &:before {
+        @include au-font-size(1.2rem, 1.2);
+        font-family: var(--au-font);
+        font-weight: var(--au-medium);
+        letter-spacing: 0.01rem;
+        color: var(--au-gray-600);
+        text-transform: uppercase;
+        pointer-events: none;
+        content: attr(property) ' ' attr(typeof) ' ' attr(data-type);
+        position: relative;
+        right: auto;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        padding: $au-unit-tiny * 0.5;
+        transition: none;
+        border-bottom: 1px solid var(--au-gray-200);
+        background-color: var(--au-gray-100);
+        opacity: 1;
+      }
+
+      &:after {
+        @include au-font-size($say-smallest-font-size, 1.2);
+        font-family: var(--au-font);
+        font-weight: var(--au-regular);
+        letter-spacing: 0.01rem;
+        color: var(--au-gray-600);
+        text-transform: uppercase;
+        pointer-events: none;
+        position: relative;
+        right: auto;
+        bottom: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        padding: $au-unit-tiny * 0.5;
+        transition: none;
+        border-top: 1px solid var(--au-gray-200);
+        background-color: var(--au-white);
+        opacity: 1;
+        margin: 0;
+      }
+    }
+  }
+
+  [data-editor-highlight=true] {
+    &:not([contenteditable=""]) {
+      background-color: var(--au-gray-100);
+      border-bottom: 0.2rem dotted var(--au-gray-300);
+      padding-bottom: 0.2rem;
+      transition: background-color var(--au-transition);
+
+      &::selection {
+        background-color: var(--au-gray-300);
+      }
+
+      &:hover {
+        background-color: var(--au-gray-200);
+      }
+    }
+  }
+}
+
+@include hints("Selecteer de juiste optie", "Actie nodig");
+
+[data--language=en], [lang=en] {
+  @include hints("Select the correct option", "Action required");
+}
+
+.rdfa-annotations-hover:not(.show-rdfa-blocks) {
+  [data-editor-highlight="true"] {
+    &:not(ol):not(ul):not(li):not(span) {
+      position: relative;
+
+      &:before {
+        height: 100%;
+        top: 0;
+      }
+    }
+
+    &:not([contenteditable='']) {
+      &:hover {
+        border-bottom-color: tint($au-gray-600, 20);
+      }
+
+      &:before {
+        @include au-font-size(1.2rem, 1.2);
+        position: absolute;
+        transition: opacity $au-easing 0.5s, left $au-easing 0.2s;
+        right: calc(100% + #{$au-unit-large});
+        opacity: 0;
+        display: block;
+        margin-top: 0.2rem;
+        padding-right: $au-unit + $au-unit-small;
+        margin-right: -$au-unit + $au-unit-tiny;
+        width: $au-unit-huge * 1.5;
+        font-family: var(--au-font);
+        font-weight: var(--au-medium);
+        letter-spacing: 0.01rem;
+        text-transform: uppercase;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--au-gray-600);
+        pointer-events: none;
+        overflow: hidden;
+        min-height: 2rem;
+        border-right: 1px dashed var(--au-gray-300);
+        border-top: 1px dashed var(--au-gray-300);
+        z-index: var(--au-z-index-gamma);
+        background: var(--au-white) linear-gradient(
+            to right,
+            $au-white,
+            $au-white calc(100% - #{$au-unit + $au-unit-tiny}),
+            transparent calc(100% - #{$au-unit + $au-unit-tiny}),
+            transparent 100%
+        );
+      }
+    }
+  }
+
+  @include mq($until: 1280px) {
+    [data-editor-highlight='true'] {
+      &:before {
+        display: none !important;
+      }
+    }
+  }
+
+}
+
+// End: Styling the highlight when detecting search term inside the editor

package/app/styles/confidentiality-plugin.scss

@@ -0,0 +1,8 @@
+@import 'ember-appuniversum';
+
+.rdfa-annotations {
+  [property='ext:redacted'] {
+    background-color: var(--au-red-400);
+    border: 1px solid var(--au-red-600);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "15.0.0",
+  "version": "15.2.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -71,7 +71,7 @@
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@glint/template": "^1.1.0",
-    "@lblod/ember-rdfa-editor": "^6.1.0",
+    "@lblod/ember-rdfa-editor": "^7.0.1",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@tsconfig/ember": "^3.0.0",
@@ -122,14 +122,14 @@
     "ember-simple-auth": "4.2.2",
     "ember-source": "~4.12.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^4.16.1",
+    "ember-template-lint": "^5.11.2",
     "ember-try": "^2.0.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-ember": "^11.1.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-qunit": "^7.3.1",
+    "eslint-plugin-qunit": "^8.0.1",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
@@ -138,14 +138,14 @@
     "qunit-dom": "^2.0.0",
     "release-it": "^15.5.0",
     "sass": "^1.49.7",
-    "typescript": "~5.0.4",
+    "typescript": "~5.2.2",
     "webpack": "^5.74.0"
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
     "@ember/string": "3.x",
     "@glint/template": "^1.1.0",
-    "@lblod/ember-rdfa-editor": "^6.0.0",
+    "@lblod/ember-rdfa-editor": "^6.0.0 || ^7.0.1",
     "ember-concurrency": "2.x || ^3.1.0",
     "ember-modifier": "^3.2.7",
     "ember-power-select": "6.x || 7.x",

package/plugins/confidentiality-plugin/index.d.ts

@@ -0,0 +1 @@
+export { redacted } from './marks/redacted';

package/plugins/confidentiality-plugin/marks/redacted.d.ts

@@ -0,0 +1,2 @@
+import { MarkSpec } from 'prosemirror-model';
+export declare const redacted: MarkSpec;

package/translations/en-US.yaml

@@ -377,3 +377,6 @@ editor-plugins:
         contact: In case of persisting issues, contact <a href="mailto:{email}">{email}</a>.
     nodeview:
       placeholder: Insert address
+
+confidentiality-plugin:
+  redact: Redact

package/translations/nl-BE.yaml

@@ -381,3 +381,6 @@ editor-plugins:
         contact: Bij blijvende problemen, contacteer <a href="mailto:{email}">{email}</a>.
     nodeview:
       placeholder: Voeg adres in
+
+confidentiality-plugin:
+  redact: Redigeren