@lblod/ember-rdfa-editor-lblod-plugins 22.5.1 → 22.5.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 22.5.2
+
+### Patch Changes
+
+- [#476](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/476) [`6de71f8`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/6de71f8b57e1cf5297445e288e0221707f1fbc7c) Thanks [@piemonkey](https://github.com/piemonkey)! - Add configuration option to snippet plugin to set the allowed content
+
+- [#479](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/479) [`4755750`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/47557501ed745a274cc062bd59234736bc278ded) Thanks [@piemonkey](https://github.com/piemonkey)! - Fix bug where snippet hover buttons were not always functional on Chrome
+
 ## 22.5.1
 
 ### Patch Changes

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

@@ -3,8 +3,12 @@ import { on } from '@ember/modifier';
 import SearchModal from '../search-modal';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { TemplateOnlyComponent } from '@ember/component/template-only';
 import t from 'ember-intl/helpers/t';
-import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
+import { not } from 'ember-truth-helpers';
+import AuIcon, {
+  type AuIconSignature,
+} from '@appuniversum/ember-appuniversum/components/au-icon';
 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';
@@ -23,6 +27,33 @@ import {
 import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { createAndInsertSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/nodes/snippet';
 
+interface ButtonSig {
+  Args: {
+    isActive: boolean;
+    onClick: () => void;
+    icon: AuIconSignature['Args']['icon'];
+    helpText: string;
+  };
+  Element: HTMLButtonElement;
+}
+
+const SnippetButton: TemplateOnlyComponent<ButtonSig> = <template>
+  <button
+    class='say-snippet-button {{if @isActive "" "say-snippet-hidden"}}'
+    disabled={{(not @isActive)}}
+    type='button'
+    {{on 'click' @onClick}}
+    ...attributes
+  >
+    {{#if @isActive}}
+      <AuIcon @icon={{@icon}} @size='large' {{on 'click' @onClick}} />
+      <div class='say-snippet-button-text'>
+        {{t @helpText}}
+      </div>
+    {{/if}}
+  </button>
+</template>;
+
 interface Signature {
   Args: EmberNodeArgs;
   Blocks: {
@@ -44,6 +75,7 @@ export default class SnippetNode extends Component<Signature> {
     this.showModal = false;
   }
   openModal() {
+    this.controller.focus();
     this.showModal = true;
   }
   @action
@@ -130,44 +162,32 @@ export default class SnippetNode extends Component<Signature> {
     );
     this.closeModal();
   }
+
   <template>
     <div class='say-snippet-card'>
       <div class='say-snippet-title'>{{this.node.attrs.title}}</div>
       <div class='say-snippet-content'>{{yield}}</div>
-      {{#if this.isActive}}
-        <div class='say-snippet-icons'>
-          <button
-            class='say-snippet-button'
-            type='button'
-            {{on 'click' this.editFragment}}
-          >
-            <AuIcon @icon={{SynchronizeIcon}} @size='large' />
-            <div class='say-snippet-button-text'>
-              {{t 'snippet-plugin.snippet-node.change-fragment'}}
-            </div>
-          </button>
-          <button
-            class='say-snippet-button say-snippet-remove-button'
-            type='button'
-            {{on 'click' this.deleteFragment}}
-          >
-            <AuIcon @icon={{BinIcon}} />
-            <div class='say-snippet-button-text'>
-              {{t 'snippet-plugin.snippet-node.remove-fragment'}}
-            </div>
-          </button>
-          <button
-            class='say-snippet-button'
-            type='button'
-            {{on 'click' this.addFragment}}
-          >
-            <AuIcon @icon={{AddIcon}} />
-            <div class='say-snippet-button-text'>
-              {{t 'snippet-plugin.snippet-node.add-fragment'}}
-            </div>
-          </button>
-        </div>
-      {{/if}}
+      <div class='say-snippet-icons' contenteditable='false'>
+        <SnippetButton
+          @icon={{SynchronizeIcon}}
+          @helpText='snippet-plugin.snippet-node.change-fragment'
+          @onClick={{this.editFragment}}
+          @isActive={{this.isActive}}
+        />
+        <SnippetButton
+          @icon={{BinIcon}}
+          @helpText='snippet-plugin.snippet-node.remove-fragment'
+          @onClick={{this.deleteFragment}}
+          @isActive={{this.isActive}}
+          class='say-snippet-remove-button'
+        />
+        <SnippetButton
+          @icon={{AddIcon}}
+          @helpText='snippet-plugin.snippet-node.add-fragment'
+          @onClick={{this.addFragment}}
+          @isActive={{this.isActive}}
+        />
+      </div>
 
     </div>
     <SearchModal

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

@@ -7,8 +7,11 @@ import {
 import { dateValue } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
 
+export const DEFAULT_CONTENT_STRING = 'block+';
+
 export type SnippetPluginConfig = {
   endpoint: string;
+  allowedContent?: string;
 };
 
 interface SnippetArgs {

package/addon/plugins/snippet-plugin/nodes/snippet.ts

@@ -33,6 +33,7 @@ import {
 import { hasOutgoingNamedNodeTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { jsonParse } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import {
+  DEFAULT_CONTENT_STRING,
   type ImportedResourceMap,
   type SnippetPluginConfig,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
@@ -195,7 +196,7 @@ const emberNodeConfig = (options: SnippetPluginConfig): EmberNodeConfig => ({
     config: { default: options },
   },
   component: SnippetComponent,
-  content: 'block+',
+  content: options.allowedContent || DEFAULT_CONTENT_STRING,
   serialize(node) {
     return renderRdfaAware({
       renderable: node,

package/app/styles/snippet-plugin.scss

@@ -140,6 +140,11 @@ div[typeof='besluitpublicatie:Documentonderdeel']
       border-radius: 4px;
       color: var(--au-blue-700);
       cursor: pointer;
+      &.say-snippet-hidden {
+        color: transparent;
+        border: none;
+        cursor: auto;
+      }
       &.say-snippet-remove-button {
         color: var(--au-red-600);
         border-color: var(--au-red-600);

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

@@ -1,7 +1,9 @@
 import { type Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
+export declare const DEFAULT_CONTENT_STRING = "block+";
 export type SnippetPluginConfig = {
     endpoint: string;
+    allowedContent?: string;
 };
 interface SnippetArgs {
     title: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "22.5.1",
+  "version": "22.5.2",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",