@lblod/ember-rdfa-editor-lblod-plugins 22.2.1 → 22.2.2-dev.4e13adb111a8710927eedefb6e57ae8397b236c4

package/.changeset/tender-pants-tap.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+Update `snippet-preview` component to include a collapsible (by default not shown) preview of the snippet

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 22.2.2
+
+### Patch Changes
+
+- [#465](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/465) [`83b95db`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/83b95db9991f6b5ef090cd77765d8c09eac90db7) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Correctly export empty person nodes
+
+- [#465](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/465) [`be233e8`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/be233e8bc70aee1db00644ad6f956157da8d3a20) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Correctly export empty person node
+
 ## 22.2.1
 
 ### Patch Changes

package/addon/components/snippet-plugin/snippets/snippet-preview.gts

@@ -0,0 +1,93 @@
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
+import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
+import { NavUpIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import {
+  Snippet,
+  SnippetPluginConfig,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+import t from 'ember-intl/helpers/t';
+
+interface Signature {
+  Args: {
+    config: SnippetPluginConfig;
+    snippet: Snippet;
+    onInsert: (content: string, title: string) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class SnippetPreviewComponent extends Component<Signature> {
+  @tracked controller?: SayController;
+  @tracked isExpanded = false;
+
+  get snippet(): Snippet {
+    return this.args.snippet;
+  }
+
+  @action
+  onInsert() {
+    this.args.onInsert(
+      this.args.snippet.content?.toHTML() ?? '',
+      this.args.snippet.title ?? '',
+    );
+  }
+
+  @action
+  togglePreview() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  <template>
+    <div class='snippet-preview' ...attributes>
+      <div class='snippet-preview__header'>
+        <div
+          role='button'
+          title={{t 'snippet-plugin.modal.preview-button.title'}}
+          {{on 'click' this.togglePreview}}
+          {{! template-lint-disable require-presentational-children}}
+        >
+          <AuButton @skin='link' class='snippet-preview__toggle'>
+            {{#if this.isExpanded}}
+              <AuIcon @icon={{NavUpIcon}} @size='large' />
+            {{else}}
+              <AuIcon @icon={{NavDownIcon}} @size='large' />
+            {{/if}}
+          </AuButton>
+          {{! template-lint-disable no-heading-inside-button}}
+          <h3 class='snippet-preview__title'>
+            {{@snippet.title}}
+          </h3>
+        </div>
+        <div
+          role='button'
+          title={{t 'snippet-plugin.modal.select-button.title'}}
+          {{on 'click' this.onInsert}}
+          {{! template-lint-disable require-presentational-children}}
+        >
+          <AuButton class='snippet-preview__insert-button' @skin='naked'>
+            {{t 'snippet-plugin.modal.select-button.label'}}
+          </AuButton>
+        </div>
+
+      </div>
+      {{#if this.isExpanded}}
+        <div
+          class='say-editor say-content rdfa-annotations rdfa-annotations-highlight rdfa-annotations-hover snippet-preview__content'
+        >
+          {{#if @snippet.content}}
+            {{@snippet.content}}
+          {{else}}
+            <p class='au-u-italic'>{{t 'snippet-plugin.modal.no-content'}}</p>
+          {{/if}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -9,6 +9,7 @@ import {
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import {
   DOMOutputSpec,
+  EditorState,
   getRdfaAttrs,
   PNode,
   rdfaAttrSpec,
@@ -19,6 +20,11 @@ import type { ComponentLike } from '@glint/template';
 import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { renderRdfaAware } from '@lblod/ember-rdfa-editor/core/schema';
 import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+
+const TRANSLATION_FALLBACKS = {
+  nodeview_placeholder: 'persoon',
+};
 
 const rdfaAware = true;
 const parseDOM = [
@@ -50,7 +56,8 @@ const parseDOM = [
   },
 ];
 
-const toDOM = (node: PNode): DOMOutputSpec => {
+const serialize = (node: PNode, state: EditorState): DOMOutputSpec => {
+  const t = getTranslationFunction(state);
   const mandatee = node.attrs.mandatee as Mandatee;
   return renderRdfaAware({
     renderable: node,
@@ -59,7 +66,12 @@ const toDOM = (node: PNode): DOMOutputSpec => {
       ...node.attrs,
       'data-mandatee': JSON.stringify(mandatee),
     },
-    content: mandatee ? `${mandatee.fullName}` : '',
+    content: mandatee
+      ? `${mandatee.fullName}`
+      : t(
+          'variable-plugin.person.nodeview-placeholder',
+          TRANSLATION_FALLBACKS.nodeview_placeholder,
+        ),
   });
 };
 
@@ -85,7 +97,7 @@ const emberNodeConfig: EmberNodeConfig = {
       default: null,
     },
   },
-  toDOM,
+  serialize,
   parseDOM,
 };
 

package/app/styles/snippet-plugin.scss

@@ -34,51 +34,39 @@
 }
 
 .snippet-preview {
-  // double specificity fix
-  // https://stackoverflow.com/a/47781599/20388916
-  // compiles to .snippet-preview--container.snippet-preview--container { flex-direction: row; }
-  // need this to override the default flex-direction: column of the panel container
-  &--container {
-    &#{&} {
-      flex-direction: row;
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  background-color: var(--au-white);
+  border: 0.1rem solid var(--au-gray-200);
+  border-radius: var(--au-radius);
 
-  &--article {
-    flex-grow: 1;
+  &__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-    .say-editor__paper,
-    .say-editor__inner {
-      min-height: auto;
-      white-space: inherit;
+    > :nth-child(1) {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: $au-unit-small;
+      cursor: pointer;
     }
-
-    .say-editor,
-    .say-editor__inner {
-      padding: 0;
+    > :nth-child(2) {
+      border-left: 1px solid var(--au-gray-200);
+      padding: $au-unit-small;
+      cursor: pointer;
     }
   }
 
-  &--title {
+  &__title {
     color: var(--au-gray-700);
     font-weight: var(--au-medium);
   }
 
-  &--button {
-    border-left: 1px solid var(--au-gray-200);
-    display: flex;
-    align-items: center;
-  }
-
-  &--editor-overlay {
-    position: absolute !important;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  &--editor-container {
-    position: relative;
+  &__content {
+    padding: $au-unit-small $au-unit $au-unit-small $au-unit;
   }
 }
 

package/declarations/addon/components/snippet-plugin/snippets/snippet-preview.d.ts

@@ -1,14 +1,19 @@
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { Snippet, SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
-interface Args {
-    config: SnippetPluginConfig;
-    snippet: Snippet;
-    onInsert: (content: string, title: string) => void;
+interface Signature {
+    Args: {
+        config: SnippetPluginConfig;
+        snippet: Snippet;
+        onInsert: (content: string, title: string) => void;
+    };
+    Element: HTMLDivElement;
 }
-export default class SnippetPreviewComponent extends Component<Args> {
+export default class SnippetPreviewComponent extends Component<Signature> {
     controller?: SayController;
+    isExpanded: boolean;
     get snippet(): Snippet;
     onInsert(): void;
+    togglePreview(): void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "22.2.1",
+  "version": "22.2.2-dev.4e13adb111a8710927eedefb6e57ae8397b236c4",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -268,7 +268,7 @@ variable-plugin:
     to: to
   person:
     card-title: Insert person
-    nodeview-placeholder: person
+    nodeview-placeholder: Insert person
 
 table-of-contents-plugin:
   title: Table of Contents
@@ -297,11 +297,16 @@ snippet-plugin:
     active-lists: 'Active lists:'
   modal:
     title: Choose a snippet
-    select: Select
+    preview-button:
+      title: Show snippet preview
+    select-button:
+      label: Select
+      title: Insert snippet
     search:
       title: Filter on
       label: Snippet name
       placeholder: Type something...
+    no-content: Snippet does not contain any content
   snippet-list:
     open-modal: Manage snippet lists
     modal:

package/translations/nl-BE.yaml

@@ -272,7 +272,7 @@ variable-plugin:
     to: tot
   person:
     card-title: Persoon invoegen
-    nodeview-placeholder: persoon
+    nodeview-placeholder: Voeg persoon in
 dummy:
   validation-card:
     title: Documentvalidatie
@@ -296,11 +296,16 @@ snippet-plugin:
     active-lists: 'Actieve lijsten:'
   modal:
     title: Kies een fragment
-    select: Selecteer
+    preview-button:
+      title: Preview van fragment tonen
+    select-button:
+      label: Selecteer
+      title: Fragment invoegen
     search:
       title: Filter op
       label: Fragmentnaam
       placeholder: Typ iets...
+    no-content: Fragment bevat geen inhoud
   snippet-list:
     open-modal: Fragmentlijsten beheren
     modal:

package/addon/components/snippet-plugin/snippets/snippet-preview.hbs

@@ -1,18 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div
-  class='snippet-preview--container au-c-panel au-u-margin-right'
-  ...attributes
->
-  <div
-    class='snippet-preview--article au-u-padding au-u-padding-right-large rdfa-annotations rdfa-annotations-highlight rdfa-annotations-hover'
-  >
-    <h3 class='snippet-preview--title'>
-      {{@snippet.title}}
-    </h3>
-  </div>
-  <div class='snippet-preview--button au-u-padding-small'>
-    <AuButton @skin='naked' {{on 'click' this.onInsert}}>
-      {{t 'snippet-plugin.modal.select'}}
-    </AuButton>
-  </div>
-</div>

package/addon/components/snippet-plugin/snippets/snippet-preview.ts

@@ -1,31 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-import { SayController } from '@lblod/ember-rdfa-editor';
-import {
-  Snippet,
-  SnippetPluginConfig,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
-
-interface Args {
-  config: SnippetPluginConfig;
-  snippet: Snippet;
-  onInsert: (content: string, title: string) => void;
-}
-
-export default class SnippetPreviewComponent extends Component<Args> {
-  @tracked controller?: SayController;
-
-  get snippet(): Snippet {
-    return this.args.snippet;
-  }
-
-  @action
-  onInsert() {
-    this.args.onInsert(
-      this.args.snippet.content?.toHTML() ?? '',
-      this.args.snippet.title ?? '',
-    );
-  }
-}