@lblod/ember-rdfa-editor-lblod-plugins 24.2.3 → 24.3.0-dev.c8ea222380a5835c40b49c8a0e5b3fe09208623f

package/.changeset/fuzzy-pillows-relax.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Ensure that the event handlers of snippet actions are only triggered once

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 24.3.0
+
+### Minor Changes
+
+- [#493](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/493) [`1e596e1`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/1e596e1db4d201ed2cba0713808d918944c51eb6) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Redesign structure nodes v1
+
+### Patch Changes
+
+- [#492](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/492) [`76b6ecb`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/76b6ecb4ff09ec18088448fd6da69b9e69f34a7c) Thanks [@elpoelma](https://github.com/elpoelma)! - Disable `rdfaAware` setting for heading nodes in dummy app
+
 ## 24.2.3
 
 ### Patch Changes

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

@@ -32,7 +32,6 @@ import { recalculateNumbers } from '@lblod/ember-rdfa-editor-lblod-plugins/plugi
 interface ButtonSig {
   Args: {
     isActive: boolean;
-    onClick: () => void;
     icon: AuIconSignature['Args']['icon'];
     helpText: string;
   };
@@ -41,13 +40,8 @@ interface ButtonSig {
 
 const SnippetButton: TemplateOnlyComponent<ButtonSig> = <template>
   {{#if @isActive}}
-    <button
-      class='say-snippet-button'
-      type='button'
-      {{on 'click' @onClick}}
-      ...attributes
-    >
-      <AuIcon @icon={{@icon}} @size='large' {{on 'click' @onClick}} />
+    <button class='say-snippet-button' type='button' ...attributes>
+      <AuIcon @icon={{@icon}} @size='large' />
       <div class='say-snippet-button-text'>
         {{t @helpText}}
       </div>
@@ -169,13 +163,13 @@ export default class SnippetNode extends Component<Signature> {
         <SnippetButton
           @icon={{SynchronizeIcon}}
           @helpText='snippet-plugin.snippet-node.change-fragment'
-          @onClick={{this.editFragment}}
+          {{on 'click' this.editFragment}}
           @isActive={{this.isActive}}
         />
         <SnippetButton
           @icon={{BinIcon}}
           @helpText='snippet-plugin.snippet-node.remove-fragment'
-          @onClick={{this.deleteFragment}}
+          {{on 'click' this.deleteFragment}}
           @isActive={{this.isActive}}
           class='say-snippet-remove-button'
         />
@@ -183,7 +177,7 @@ export default class SnippetNode extends Component<Signature> {
           <SnippetButton
             @icon={{AddIcon}}
             @helpText='snippet-plugin.snippet-node.add-fragment'
-            @onClick={{this.addFragment}}
+            {{on 'click' this.addFragment}}
             @isActive={{this.isActive}}
           />
         {{/if}}

package/app/styles/structure-plugin.scss

@@ -7,12 +7,18 @@
   white-space: normal;
 }
 .say-structure__header {
-  background-color: var(--au-gray-200);
+  background-color: var(--au-gray-100);
   display: flex;
   gap: 5px;
   flex-direction: row;
-  h4 {
+  padding-left: 0.7rem;
+  border-bottom: 1px solid var(--au-gray-300);
+  border-radius: 0.1em 0.1em 0 0;
+
+  h5 {
     margin: 0;
+    font-weight: var(--au-medium);
+    font-size: var(--au-h-functional);
   }
   .say-structure__title {
     flex-grow: 1;
@@ -29,15 +35,15 @@
     word-break: break-word;
     word-wrap: break-word;
   }
-  padding: var(--au-small);
 }
 .say-structure__content {
+  padding: 0.7rem;
+  padding-right: 3rem;
   [data-slot] {
     white-space: break-spaces;
     word-break: break-word;
     word-wrap: break-word;
   }
-  padding: var(--au-small);
 }
 
 .say-structure__content.say-empty {
@@ -51,3 +57,16 @@
     }
   }
 }
+
+.ember-node.say-active:has(> .say-structure) {
+  outline: none;
+}
+
+.ember-node.say-active > .say-structure {
+  border-color: var(--au-blue-700);
+  border-width: 0.2rem;
+  > .say-structure__header {
+    border-bottom-color: var(--au-blue-700);
+    border-bottom-width: 0.2rem;
+  }
+}

package/package.json

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