@lblod/ember-rdfa-editor-lblod-plugins 4.0.2 → 5.0.1

package/CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.0.1] - 2023-04-07
+### Fixed
+- fix deprecated use of modifier without specifying eagerness
+- add missing translations
+- make application route in dummy app a javascript file to avoid [issues](https://github.com/typed-ember/ember-cli-typescript/issues/780)
+
+## [5.0.0] - 2023-04-07
+
+### Added
+- add a hover-tooltip utility component
+- docs: add tooltips to the remove structure buttons
+
+### Changed
+- Change date labels based on designer feedback
+- split out structure removal card into two buttons
+
+### Fixed
+- BREAKING: Rename decision title node from title to besluit_title to avoid conflicts
+- properly initialize ember-intl
+
 ## [4.0.2] - 2023-04-04
 
 ### Fixed
@@ -35,6 +55,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update schema on dummy page to make articles insertable in empty document
 - Add padding to structure card
 - Placeholder text when inserting date
+- Feature/improve toc scroll
 
 ### Removed:
 - Removal of prosemirror-plugin dependency of `CitationPlugin::CitationInsert` component.
@@ -391,7 +412,9 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.2...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.1...HEAD
+[5.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.0...v5.0.1
+[5.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.2...v5.0.0
 [4.0.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.1...v4.0.2
 [4.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.0...v4.0.1
 [4.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v3.1.0...v4.0.0

package/addon/components/article-structure-plugin/structure-card.hbs

@@ -26,24 +26,58 @@
           </AuButton>
         </Item>
         <Item>
-          {{#unless this.currentStructureType.noUnwrap}}
-            <div class="au-u-padding-tiny">
-              <AuToggleSwitch
-                @label={{t "article-structure-plugin.remove.content"}}
-                @checked={{this.removeStructureContent}}
-                @onChange={{this.setRemoveStructureContent}}
-              />
-            </div>
-          {{/unless}}
-          <AuButton
-            @icon="bin"
-            @iconAlignment="left"
-            @skin="link"
-            @alert={{true}}
-            @disabled={{not this.canRemoveStructure}}
-            {{on 'click' this.removeStructure}}>
-            {{t this.currentStructureType.translations.remove}}
-          </AuButton>
+          <AuButtonGroup>
+            <HoverTooltip>
+              <:hover as |hover|>
+                <AuButton
+                  @icon="bin"
+                  @iconAlignment="left"
+                  @skin="link"
+                  @alert={{true}}
+                  @disabled={{this.currentStructureType.noUnwrap}}
+                  aria-describedby="remove-tooltip"
+                  {{hover.velcroHook}}
+                  {{hover.handleHover}}
+                  {{on 'click' (fn this.removeStructure false)}}>
+                  {{this.remove}}
+                </AuButton>
+              </:hover>
+              <:tooltip as |tooltip|>
+                <AuPill
+                  id="remove-tooltip"
+                  role="tooltip"
+                  {{tooltip}}
+                >
+                  {{t 'article-structure-plugin.remove.help-text'}}
+                </AuPill>
+              </:tooltip>
+            </HoverTooltip>
+            <HoverTooltip>
+              <:hover as |hover|>
+                <AuButton
+                  @icon="bin"
+                  @iconAlignment="left"
+                  @skin="link"
+                  aria-describedby="remove-content-tooltip"
+                  @alert={{true}}
+                  {{hover.velcroHook}}
+                  {{hover.handleHover}}
+                  {{on 'click' (fn this.removeStructure true)}}>
+                  {{this.removeWithContent}}
+                </AuButton>
+              </:hover>
+              <:tooltip as |tooltip|>
+                <AuPill
+                  id="remove-content-tooltip"
+                  role="tooltip"
+                  {{tooltip}}
+                >
+                  {{t 'article-structure-plugin.remove-with-content.help-text'}}
+                </AuPill>
+              </:tooltip>
+            </HoverTooltip>
+
+          </AuButtonGroup>
         </Item>
       </AuList>
     </c.content>

package/addon/components/article-structure-plugin/structure-card.ts

@@ -35,9 +35,9 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
   }
 
   @action
-  removeStructure() {
+  removeStructure(withContent: boolean) {
     if (this.structure && this.currentStructureType) {
-      if (this.removeStructureContent || this.currentStructureType.noUnwrap) {
+      if (withContent || this.currentStructureType.noUnwrap) {
         this.controller.doCommand(
           removeStructure(this.structure, this.structureTypes),
           { view: this.controller.mainEditorView }
@@ -88,6 +88,27 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
     return;
   }
 
+  get remove() {
+    const translation = this.currentStructureType?.translations?.remove;
+    if (translation) {
+      return this.intl.t(translation);
+    } else {
+      return this.intl.t('article-structure-plugin.remove.default');
+    }
+  }
+
+  get removeWithContent() {
+    const translation =
+      this.currentStructureType?.translations?.removeWithContent;
+    if (translation) {
+      return this.intl.t(translation);
+    } else {
+      return this.intl.t(
+        'article-structure-plugin.remove-with-content.default'
+      );
+    }
+  }
+
   get isOutsideStructure() {
     return !this.structure;
   }

package/addon/components/hover-tooltip.hbs

@@ -0,0 +1,8 @@
+<Velcro @placement={{this.placement}} as |velcro|>
+  {{#let velcro.loop as |loop|}}
+    {{yield (hash velcroHook=velcro.hook handleHover=(modifier this.hover)) to='hover' }}
+    {{#if this.tooltipOpen}}
+      {{yield loop to='tooltip'}}
+    {{/if}}
+  {{/let}}
+</Velcro>

package/addon/components/hover-tooltip.ts

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { tracked } from '@glimmer/tracking';
+
+interface Args {
+  placement?: string;
+}
+
+export default class HoverTooltip extends Component<Args> {
+  hover = modifier(
+    (element) => {
+      element.addEventListener('mouseenter', this.showTooltip);
+      element.addEventListener('mouseleave', this.hideTooltip);
+      element.addEventListener('focus', this.showTooltip);
+      element.addEventListener('blur', this.hideTooltip);
+      return () => {
+        element.removeEventListener('mouseenter', this.showTooltip);
+        element.removeEventListener('mouseleave', this.hideTooltip);
+        element.removeEventListener('focus', this.showTooltip);
+        element.removeEventListener('blur', this.hideTooltip);
+      };
+    },
+    { eager: false }
+  );
+
+  @tracked tooltipOpen = false;
+
+  get placement() {
+    return this.args.placement ?? 'top';
+  }
+
+  showTooltip = () => {
+    this.tooltipOpen = true;
+  };
+
+  hideTooltip = () => {
+    this.tooltipOpen = false;
+  };
+}

package/addon/components/rdfa-date-plugin/card.hbs

@@ -47,7 +47,7 @@
           {{#each this.formats as |format|}}
             <AuFormRow>
               <AuControlRadio
-                @label={{format.label}}
+                @label={{if format.label format.label (if this.onlyDate format.dateFormat format.dateTimeFormat)}}
                 @identifier={{format.key}}
                 @name="dateFormat"
                 @value={{format.key}}

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -83,7 +83,22 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
       const selection = Selection.near(resolvedPos, 1);
       if (selection) {
         tr.setSelection(selection);
-        tr.scrollIntoView();
+        const coords = this.controller.mainEditorView.coordsAtPos(
+          selection.from
+        );
+        const config = this.config[0];
+        if (config.scrollContainer) {
+          const scrollContainer: HTMLElement = config.scrollContainer;
+          const alreadyScrolled = scrollContainer.scrollTop;
+          const MAGIC_NUMBER_TOPBAR_HEIGHT: number =
+            config.scrollingPadding ?? 150;
+          scrollContainer.scrollTo(
+            0,
+            coords.top + alreadyScrolled - MAGIC_NUMBER_TOPBAR_HEIGHT
+          );
+        } else {
+          tr.scrollIntoView();
+        }
       }
       return tr;
     });

package/addon/plugins/article-structure-plugin/index.ts

@@ -1,6 +1,11 @@
-import { Fragment, PNode, Schema, EditorState } from '@lblod/ember-rdfa-editor';
+import {
+  EditorState,
+  Fragment,
+  PNode,
+  Schema,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
-import { Transaction } from '@lblod/ember-rdfa-editor';
 
 export type SpecName = string;
 
@@ -8,11 +13,12 @@ export type StructureSpec = {
   name: SpecName;
   translations: {
     insert: string;
-    move: {
-      up: string;
-      down: string;
+    move?: {
+      up?: string;
+      down?: string;
     };
-    remove: string;
+    remove?: string;
+    removeWithContent?: string;
   };
   constructor: (args: {
     schema: Schema;

package/addon/plugins/article-structure-plugin/structures/article-paragraph.ts

@@ -21,6 +21,7 @@ export const articleParagraphSpec: StructureSpec = {
       down: 'article-structure-plugin.move-down.paragraph',
     },
     remove: 'article-structure-plugin.remove.paragraph',
+    removeWithContent: 'article-structure-plugin.remove-with-content.paragraph',
   },
   continuous: false,
   noUnwrap: true,

package/addon/plugins/article-structure-plugin/structures/article.ts

@@ -27,6 +27,7 @@ export const articleSpec: StructureSpec = {
       down: 'article-structure-plugin.move-down.article',
     },
     remove: 'article-structure-plugin.remove.article',
+    removeWithContent: 'article-structure-plugin.remove-with-content.article',
   },
   continuous: true,
   constructor: ({ schema, number, content, intl }) => {

package/addon/plugins/article-structure-plugin/structures/chapter.ts

@@ -22,6 +22,7 @@ export const chapterSpec: StructureSpec = {
       down: 'article-structure-plugin.move-down.chapter',
     },
     remove: 'article-structure-plugin.remove.chapter',
+    removeWithContent: 'article-structure-plugin.remove-with-content.chapter',
   },
   constructor: ({ schema, number, content, intl }) => {
     const numberConverted = romanize(number ?? 1);

package/addon/plugins/article-structure-plugin/structures/section.ts

@@ -22,6 +22,7 @@ export const sectionSpec: StructureSpec = {
       down: 'article-structure-plugin.move-down.section',
     },
     remove: 'article-structure-plugin.remove.section',
+    removeWithContent: 'article-structure-plugin.remove-with-content.section',
   },
   constructor: ({ schema, number, content, intl }) => {
     const numberConverted = romanize(number || 1);

package/addon/plugins/article-structure-plugin/structures/subsection.ts

@@ -23,6 +23,8 @@ export const subsectionSpec: StructureSpec = {
       down: 'article-structure-plugin.move-down.subsection',
     },
     remove: 'article-structure-plugin.remove.subsection',
+    removeWithContent:
+      'article-structure-plugin.remove-with-content.subsection',
   },
   constructor: ({ schema, number, intl, content }) => {
     const numberConverted = romanize(number ?? 1);

package/addon/plugins/article-structure-plugin/structures/title.ts

@@ -22,6 +22,7 @@ export const titleSpec: StructureSpec = {
       down: 'article-structure-plugin.move-down.title',
     },
     remove: 'article-structure-plugin.remove.title',
+    removeWithContent: 'article-structure-plugin.remove-with-content.title',
   },
   constructor: ({ schema, number, content, intl }) => {
     const numberConverted = romanize(number ?? 1);

package/addon/plugins/besluit-plugin/commands/insert-title.ts

@@ -10,7 +10,7 @@ export default function insertTitle(intl: IntlService): Command {
     if (!besluit) {
       return false;
     }
-    if (!besluit.node.canReplaceWith(0, 0, schema.nodes.title)) {
+    if (!besluit.node.canReplaceWith(0, 0, schema.nodes.besluit_title)) {
       return false;
     }
 
@@ -19,7 +19,7 @@ export default function insertTitle(intl: IntlService): Command {
       tr.insert(
         besluit.pos + 1,
         schema.node(
-          'title',
+          'besluit_title',
           { __rdfaId: uuid() },
           schema.node(
             'paragraph',

package/addon/plugins/rdfa-date-plugin/index.ts

@@ -1,12 +1,10 @@
 export const defaultDateFormats: DateFormat[] = [
   {
-    label: 'Short Date',
     key: 'short',
     dateFormat: 'dd/MM/yy',
     dateTimeFormat: 'dd/MM/yy HH:mm',
   },
   {
-    label: 'Long Date',
     key: 'long',
     dateFormat: 'EEEE dd MMMM yyyy',
     dateTimeFormat: 'PPPPp',
@@ -14,7 +12,7 @@ export const defaultDateFormats: DateFormat[] = [
 ];
 
 export type DateFormat = {
-  label: string;
+  label?: string;
   key: string;
   dateFormat: string;
   dateTimeFormat: string;

package/addon/plugins/standard-template-plugin/index.ts

@@ -1,6 +1,6 @@
 import {
   besluit,
-  title,
+  besluit_title,
   description,
   motivering,
   article_container,
@@ -13,7 +13,7 @@ import {
 
 export const besluitNodes = {
   besluit,
-  title,
+  besluit_title,
   description,
   motivering,
   article_container,

package/addon/plugins/standard-template-plugin/utils/nodes.ts

@@ -16,7 +16,7 @@ import { StructureSpec } from '../../article-structure-plugin';
 import { v4 as uuid } from 'uuid';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
-export const title: NodeSpec = {
+export const besluit_title: NodeSpec = {
   content: 'paragraph+',
   inline: false,
   defining: true,
@@ -308,7 +308,7 @@ export const besluit_article_content: NodeSpec = {
 
 export const besluit: NodeSpec = {
   group: 'block',
-  content: 'block*title?block*description?block*motivering?block*',
+  content: 'block*besluit_title?block*description?block*motivering?block*',
   inline: false,
   defining: true,
   isolating: true,

package/addon/plugins/table-of-contents-plugin/index.ts

@@ -1,3 +1,5 @@
 export type TableOfContentsConfig = {
   nodeHierarchy: string[];
+  scrollContainer?: HTMLElement;
+  scrollingPadding?: number;
 }[];

package/app/components/hover-tooltip.js

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

package/components/article-structure-plugin/structure-card.d.ts

@@ -11,7 +11,7 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
     removeStructureContent: boolean;
     get controller(): SayController;
     moveStructure(direction: 'up' | 'down'): void;
-    removeStructure(): void;
+    removeStructure(withContent: boolean): void;
     setRemoveStructureContent(value: boolean): void;
     get structureTypes(): ArticleStructurePluginOptions;
     get structureNodeSpecs(): import("prosemirror-model").NodeType[];
@@ -22,6 +22,8 @@ export default class EditorPluginsStructureCardComponent extends Component<Args>
         node: import("prosemirror-model").Node;
     } | undefined;
     get currentStructureType(): import("@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin").StructureSpec | undefined;
+    get remove(): string;
+    get removeWithContent(): string;
     get isOutsideStructure(): boolean;
     get canMoveDown(): boolean;
     get canMoveUp(): boolean;

package/components/hover-tooltip.d.ts

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+interface Args {
+    placement?: string;
+}
+export default class HoverTooltip extends Component<Args> {
+    hover: import("ember-modifier").FunctionBasedModifier<{
+        Args: {
+            Named: Record<string, unknown>;
+            Positional: unknown[];
+        };
+        Element: Element;
+    }>;
+    tooltipOpen: boolean;
+    get placement(): string;
+    showTooltip: () => void;
+    hideTooltip: () => void;
+}
+export {};

package/package.json

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

package/plugins/article-structure-plugin/index.d.ts

@@ -1,16 +1,16 @@
-import { Fragment, PNode, Schema, EditorState } from '@lblod/ember-rdfa-editor';
+import { EditorState, Fragment, PNode, Schema, Transaction } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
-import { Transaction } from '@lblod/ember-rdfa-editor';
 export type SpecName = string;
 export type StructureSpec = {
     name: SpecName;
     translations: {
         insert: string;
-        move: {
-            up: string;
-            down: string;
+        move?: {
+            up?: string;
+            down?: string;
         };
-        remove: string;
+        remove?: string;
+        removeWithContent?: string;
     };
     constructor: (args: {
         schema: Schema;

package/plugins/rdfa-date-plugin/index.d.ts

@@ -1,6 +1,6 @@
 export declare const defaultDateFormats: DateFormat[];
 export type DateFormat = {
-    label: string;
+    label?: string;
     key: string;
     dateFormat: string;
     dateTimeFormat: string;

package/plugins/standard-template-plugin/index.d.ts

@@ -1,6 +1,6 @@
 export declare const besluitNodes: {
     besluit: import("prosemirror-model").NodeSpec;
-    title: import("prosemirror-model").NodeSpec;
+    besluit_title: import("prosemirror-model").NodeSpec;
     description: import("prosemirror-model").NodeSpec;
     motivering: import("prosemirror-model").NodeSpec;
     article_container: import("prosemirror-model").NodeSpec;

package/plugins/standard-template-plugin/utils/nodes.d.ts

@@ -1,6 +1,6 @@
 import { NodeSpec } from '@lblod/ember-rdfa-editor';
 import { StructureSpec } from '../../article-structure-plugin';
-export declare const title: NodeSpec;
+export declare const besluit_title: NodeSpec;
 export declare const description: NodeSpec;
 export declare const motivering: NodeSpec;
 export declare const article_container: NodeSpec;

package/plugins/table-of-contents-plugin/index.d.ts

@@ -1,3 +1,5 @@
 export type TableOfContentsConfig = {
     nodeHierarchy: string[];
+    scrollContainer?: HTMLElement;
+    scrollingPadding?: number;
 }[];

package/translations/en-US.yaml

@@ -7,6 +7,7 @@ article-structure-plugin:
     section: Insert section
     subsection: Insert subsection
   move-up:
+    default: Move structure up
     paragraph: Move paragraph up
     article: Move article up
     title: Move title up
@@ -14,6 +15,7 @@ article-structure-plugin:
     section: Move section up
     subsection: Move subsection up
   move-down:
+    default: Move structure down
     paragraph: Move paragraph down
     article: Move article down
     title: Move title down
@@ -23,13 +25,23 @@ article-structure-plugin:
   title:
     structure-card: Structure Card
   remove:
+    default: Remove structure
     article: Remove Article
     paragraph: Remove Paragraph
     subsection: Remove subsection
     section: Remove section
     chapter: Remove chapter
     title: Remove title
-    content: Remove content
+    help-text: Remove the heading, but keep the content
+  remove-with-content:
+    default: Remove structure with content
+    article: Remove Article with content
+    paragraph: Remove Paragraph with content
+    subsection: Remove subsection with content
+    section: Remove section with content
+    chapter: Remove chapter with content
+    title: Remove title with content
+    help-text: Remove the heading, and also remove all content up to the next heading of the same level
   placeholder:
     generic:
       heading: Insert title
@@ -166,4 +178,4 @@ variable-plugin:
 
 table-of-contents-plugin:
   title: Table of Contents
-  toggle: Show Table of Contents
+  toggle: Show Table of Contents

package/translations/nl-BE.yaml

@@ -13,6 +13,7 @@ article-structure-plugin:
     chapter: Hoofdstuk naar boven verplaatsen
     section: Afdeling naar boven verplaatsen
     subsection: Onderafdeling naar boven verplaatsen
+    default: Structuur naar boven verplaatsen
   move-down:
     paragraph: Paragraaf naar beneden verplaatsen
     article: Artikel naar beneden verplaatsen
@@ -20,16 +21,27 @@ article-structure-plugin:
     chapter: Hoofdstuk naar beneden verplaatsen
     section: Afdeling naar beneden verplaatsen
     subsection: Onderafdeling naar beneden verplaatsen
+    default: Structuur naar beneden verplaatsen
   title:
     structure-card: Structuur card
   remove:
+    default: Structuur verwijderen
     article: Artikel verwijderen
     paragraph: Paragraaf verwijderen
     subsection: Onderafdeling verwijderen
     section: Afdeling verwijderen
     chapter: Hoofdstuk verwijderen
     title: Titel verwijderen
-    content: Inhoud verwijderen
+    help-text: Verwijder de hoofding, maar behoud de inhoud
+  remove-with-content:
+    default: Structuur verwijderen met inhoud
+    article: Artikel en inhoud verwijderen
+    subsection: Onderafdeling en inhoud verwijderen
+    section: Afdeling en inhoud verwijderen
+    chapter: Hoofdstuk en inhoud verwijderen
+    title: Titel en inhoud verwijderen
+    paragraph: Paragraaf en inhoud verwijderen
+    help-text: Verwijder de hoofding, en alle inhoud tot aan de volgende hoofding van hetzelfde niveau
   placeholder:
     generic:
       heading: Voeg titel in
@@ -168,4 +180,4 @@ table-of-contents-plugin:
 variable-plugin:
   insert-variable: Voeg variabele in
   button: Voeg in
-  enter-variable-value: Selecteer waarde
+  enter-variable-value: Selecteer waarde