@lblod/ember-rdfa-editor-lblod-plugins 22.2.2 → 22.2.3-dev.806b2598cde7ac68553f1a3fc19a9e8985ec0807

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,11 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 22.2.3
+
+### Patch Changes
+
+- [#469](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/469) [`52c22d6`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/52c22d6042a5c8e7bc88094625c3b1136d1dcdc9) Thanks [@elpoelma](https://github.com/elpoelma)! - Remove constraint on mandatee table insertion. Mandatee table can now be inserted everywhere in a document.
+
 ## 22.2.2
 
 ### Patch Changes

package/addon/components/mandatee-table-plugin/insert.gts

@@ -3,8 +3,6 @@ import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
-import { not } from 'ember-truth-helpers';
-import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
 import { action } from '@ember/object';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/_private/option';
 import t from 'ember-intl/helpers/t';
@@ -17,9 +15,6 @@ export default class InsertMandateeTableComponent extends Component<Sig> {
   get controller() {
     return this.args.controller;
   }
-  get decisionRange() {
-    return getCurrentBesluitRange(this.controller);
-  }
 
   @action
   insert() {
@@ -33,10 +28,6 @@ export default class InsertMandateeTableComponent extends Component<Sig> {
     });
   }
 
-  get canInsert() {
-    return Boolean(this.decisionRange);
-  }
-
   <template>
     <li class='au-c-list__item'>
       <AuButton
@@ -44,7 +35,6 @@ export default class InsertMandateeTableComponent extends Component<Sig> {
         @icon={{AddIcon}}
         @iconAlignment='left'
         @skin='link'
-        @disabled={{not this.canInsert}}
       >
         {{t 'mandatee-table-plugin.insert.title'}}
       </AuButton>

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

@@ -0,0 +1,96 @@
+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 {{if this.isExpanded "snippet-preview--expanded"}}'
+      ...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/app/styles/snippet-plugin.scss

@@ -34,51 +34,44 @@
 }
 
 .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);
+
+  &--expanded {
+    > .snippet-preview__header {
+      border-bottom: 0.1rem solid var(--au-gray-200);
     }
   }
+  &__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
-  &--article {
-    flex-grow: 1;
-
-    .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/mandatee-table-plugin/insert.d.ts

@@ -8,8 +8,6 @@ interface Sig {
 }
 export default class InsertMandateeTableComponent extends Component<Sig> {
     get controller(): SayController;
-    get decisionRange(): import("@lblod/ember-rdfa-editor/plugins/datastore").ElementPNode | undefined;
     insert(): void;
-    get canInsert(): boolean;
 }
 export {};

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.2",
+  "version": "22.2.3-dev.806b2598cde7ac68553f1a3fc19a9e8985ec0807",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -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

@@ -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 ?? '',
-    );
-  }
-}