@lblod/ember-rdfa-editor-lblod-plugins 4.0.1 → 5.0.0

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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: Solve duplicate node title
+- properly initialize ember-intl
+
+## [4.0.2] - 2023-04-04
+
+### Fixed
+- Prevent decision nodes regenerating when (de)serializing
+- Ensure editor is focused after inserting a citation
+- fix(citation): make plugin trigger correctly when `doc` is passed as an allowed nodeType
+
+### Added
+- docs: add examples on how to enable the citation plugin for the entire document
+ 
 ## [4.0.1] - 2023-03-27
 
 ### Dependencies
@@ -29,6 +53,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed:
 - Removal of prosemirror-plugin dependency of `CitationPlugin::CitationInsert` component.
 
+### Dependencies
+- bump `ember-rdfa-editor` to v3.4.0
+
 ## [3.1.0] - 2023-03-02
 
 ### Fixed
@@ -40,7 +67,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Dependencies
 - bump `ember-rdfa-editor` to v3.3.0
-- bump `ember-rdfa-editor` to v3.4.0
 
 ## [3.0.0] - 2023-02-27
 
@@ -379,7 +405,9 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.1...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.0...HEAD
+[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
 [3.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v3.0.0...v3.1.0

package/README.md

@@ -101,6 +101,31 @@ Configuration:
   - activeInRanges: it's a function that gets the state of the actual instance of the editor and returns an array of ranges for the plugin to be active in, for example `[[0,50], [70,100]]`
   - regex: you can provide your custom regex to detect citations, if not the default one will be used
 
+
+A common usecase is to have the plugin active in the entire document. Here's how to do that using each configuration type:
+
+```js
+import { citationPlugin } from "@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin";
+
+const configA = {
+   type: "nodes",
+   activeInNodeTypes(schema) {
+     // the root node of the document should always have the doc type
+     return new Set([schema.nodes.doc]);
+   }
+ };
+  
+const configB = {
+  type: "ranges",
+  activeInRanges(state) {
+    // a node's nodeSize follows the Prosemirror definition
+    // a non-leaf node's size is the sum of its children's sizes + 2
+    // so to get the last valid position "inside" a node, you need to subtract two from its nodeSize
+    // ref: https://prosemirror.net/docs/ref/#model.Node.nodeSize 
+    return [[0, state.doc.nodeSize - 2]];
+  }
+};
+```
 ### Using the plugin
 If used with the example configuration provided this plugin can be triggered by typing one of the following in the correct RDFa context (the [besluit:motivering](http://data.vlaanderen.be/ns/besluit#motivering) of a [besluit:Besluit](https://data.vlaanderen.be/ns/besluit#Besluit)).
 

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/citation-plugin/citation-card.ts

@@ -202,6 +202,7 @@ export default class CitationCardComponent extends Component<Args> {
           .scrollIntoView(),
       { view: this.controller.mainEditorView }
     );
+    this.controller.focus();
   }
 
   @action

package/addon/components/citation-plugin/citation-insert.ts

@@ -76,6 +76,12 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
         this.controller.schema,
         this.controller.mainEditorState
       );
+      // if the doc node is included, the button should always be active
+      // the findParentNodeOfType util we import does NOT consider the doc node
+      // in its search.
+      if (nodeTypes.has(this.controller.schema.nodes.doc)) {
+        return false;
+      }
       return !findParentNodeOfType([...nodeTypes])(selection);
     }
   }

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,36 @@
+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);
+    };
+  });
+
+  @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/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,
@@ -127,14 +127,12 @@ export const article_container: NodeSpec = {
     {
       tag: 'div',
       getAttrs(element: HTMLElement) {
-        if (
-          hasRDFaAttribute(element, 'property', PROV('value')) &&
-          hasRDFaAttribute(element, 'typeof', BESLUIT('Besluit'))
-        ) {
+        if (hasRDFaAttribute(element, 'property', PROV('value'))) {
           return getRdfaAttrs(element);
         }
         return false;
       },
+      context: 'besluit/',
     },
   ],
 };
@@ -279,6 +277,7 @@ export const besluit_article_header: NodeSpec = {
 };
 
 export const besluit_article_content: NodeSpec = {
+  group: 'block',
   content: 'block+',
   inline: false,
   attrs: {
@@ -302,13 +301,14 @@ export const besluit_article_content: NodeSpec = {
         }
         return false;
       },
+      context: 'besluit_article//',
     },
   ],
 };
 
 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/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.1",
+  "version": "5.0.0",
   "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/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

@@ -23,13 +23,22 @@ article-structure-plugin:
   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
+    help-text: Verwijder de hoofding, en alle inhoud tot aan de volgende hoofding van hetzelfde niveau
   placeholder:
     generic:
       heading: Voeg titel in
@@ -168,4 +177,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