@lblod/ember-rdfa-editor-lblod-plugins 1.0.0-beta.2 → 1.0.0-beta.3

package/CHANGELOG.md

@@ -12,6 +12,11 @@
 
 
 
+## 1.0.0-beta.3 (2023-01-23)
+
+add onclick handler to pencil icon in variable plugin
+
+
 ## 1.0.0-beta.2 (2023-01-23)
 
 #### :boom: Breaking Change

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

@@ -1,4 +1,4 @@
-<AuPill @icon="pencil" @iconAlignment="right" class="variable">
+<AuPill @icon="pencil" @iconAlignment="right" class="variable" {{on "click" this.onClick}}>
   <div {{did-insert this.didInsertContentWrapper}} {{did-update this.onNodeUpdate @node}}>
   </div>
 </AuPill>

package/addon/components/variable-plugin/variable.ts

@@ -38,6 +38,7 @@ import {
   RdfaEditorView,
   redo,
   Schema,
+  Selection,
   splitBlock,
   StepMap,
   Transaction,
@@ -145,6 +146,17 @@ export default class Variable extends Component<EmberNodeArgs> {
     this.outerView.dispatch(outerSelectionTr);
   }
 
+  @action
+  onClick() {
+    if (this.innerView && !this.innerView.hasFocus()) {
+      this.innerView.focus();
+      const tr = this.innerView.state.tr;
+      const selection = Selection.atEnd(tr.doc);
+      tr.setSelection(selection);
+      this.innerView.dispatch(tr);
+    }
+  }
+
   @action
   didInsertContentWrapper(target: Element) {
     this.contentWrapper = target;

package/components/au-native-input.d.ts

@@ -10,7 +10,7 @@ interface Args {
 }
 export default class AuNativeInput extends Component<Args> {
     constructor(owner: unknown, args: Args);
-    get width(): "" | "au-c-input--block";
+    get width(): "au-c-input--block" | "";
     get iconAlignment(): "" | "au-c-input-wrapper--left" | "au-c-input-wrapper--right";
     get error(): "" | "au-c-input--error";
     get warning(): "" | "au-c-input--warning";

package/components/variable-plugin/variable.d.ts

@@ -33,8 +33,9 @@ export default class Variable extends Component<EmberNodeArgs> {
     get node(): import("prosemirror-model").Node;
     get pos(): number;
     get htmlContent(): import("@ember/template/-private/handlebars").SafeString;
-    get schema(): Schema<"text" | "hard_break" | "date" | "invisible_rdfa" | "placeholder" | "paragraph" | "doc" | "block_rdfa" | "repaired_block", "em" | "link" | "strong" | "underline" | "inline_rdfa" | "strikethrough">;
+    get schema(): Schema<"text" | "hard_break" | "date" | "invisible_rdfa" | "paragraph" | "placeholder" | "doc" | "block_rdfa" | "repaired_block", "em" | "strong" | "link" | "underline" | "inline_rdfa" | "strikethrough">;
     onFocus(): void;
+    onClick(): void;
     didInsertContentWrapper(target: Element): void;
     onNodeUpdate(): void;
     dispatchInner: (tr: Transaction) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/addon/components/au-dropdown-pill.hbs

@@ -1,32 +0,0 @@
-<div class="au-c-dropdown" ...attributes>
-  <AuPill
-    @skin={{this.skin}}
-    @size={{@size}}
-    @actionIcon={{this.icon}}
-    @iconAlignment={{this.iconAlignment}}
-    @hideText={{@hideText}}
-    aria-haspopup="true"
-    aria-expanded="{{if this.dropdownOpen 'true' 'false'}}"
-    @onClickAction={{this.toggleDropdown}}
-    data-test-dropdown-button
-    data-au-dropdown-toggle
-  >
-    <span class="au-c-dropdown__name" data-test-dropdown-title>
-      {{@title}}
-    </span>
-  </AuPill>
-  <div
-    class="au-c-dropdown__menu {{this.alignment}} {{if this.dropdownOpen 'is-visible'}}"
-    role="menu"
-    tabindex="-1"
-    {{focus-trap
-      isActive=this.dropdownOpen
-      shouldSelfFocus=true
-      focusTrapOptions=(hash
-        clickOutsideDeactivates=this.clickOutsideDeactivates
-      )
-    }}
-  >
-    {{yield}}
-  </div>
-</div>

package/addon/components/au-dropdown-pill.ts

@@ -1,65 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-
-type Args = {
-  alignment: 'left' | 'right';
-  icon: string;
-  iconAlignment: 'left' | 'right';
-  skin?: string;
-};
-export default class AuDropdownPill extends Component<Args> {
-  @tracked dropdownOpen = false;
-
-  @action
-  openDropdown() {
-    this.dropdownOpen = true;
-  }
-
-  @action
-  closeDropdown() {
-    this.dropdownOpen = false;
-  }
-
-  @action
-  toggleDropdown() {
-    this.dropdownOpen = !this.dropdownOpen;
-  }
-
-  @action
-  clickOutsideDeactivates(event: InputEvent) {
-    const toggleButton = document.querySelector('[data-au-dropdown-toggle]');
-    const isClosedByToggleButton = toggleButton?.contains(
-      event.target as HTMLInputElement
-    );
-
-    if (!isClosedByToggleButton) {
-      this.closeDropdown();
-    }
-
-    return true;
-  }
-
-  // Dropdown alignment
-  get alignment() {
-    if (this.args.alignment == 'left') return 'au-c-dropdown__menu--left';
-    if (this.args.alignment == 'right') return 'au-c-dropdown__menu--right';
-    return '';
-  }
-
-  get skin() {
-    return this.args.skin || 'default';
-  }
-
-  // Set default button icon
-  get icon() {
-    if (this.args.icon) return this.args.icon;
-    else return 'chevron-down';
-  }
-
-  // Set default icon alignment
-  get iconAlignment() {
-    if (this.args.iconAlignment) return this.args.iconAlignment;
-    else return 'right';
-  }
-}

package/app/components/au-dropdown-pill.js

@@ -1 +0,0 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/au-dropdown-pill';

package/components/au-dropdown-pill.d.ts

@@ -1,19 +0,0 @@
-import Component from '@glimmer/component';
-type Args = {
-    alignment: 'left' | 'right';
-    icon: string;
-    iconAlignment: 'left' | 'right';
-    skin?: string;
-};
-export default class AuDropdownPill extends Component<Args> {
-    dropdownOpen: boolean;
-    openDropdown(): void;
-    closeDropdown(): void;
-    toggleDropdown(): void;
-    clickOutsideDeactivates(event: InputEvent): boolean;
-    get alignment(): "au-c-dropdown__menu--left" | "au-c-dropdown__menu--right" | "";
-    get skin(): string;
-    get icon(): string;
-    get iconAlignment(): "left" | "right";
-}
-export {};