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

package/CHANGELOG.md

@@ -12,6 +12,25 @@
 
 
 
+
+## 1.0.0-beta.4 (2023-01-24)
+
+#### :bug: Bug Fix
+* [#72](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/72) Enable word-break as break-all on variable contenteditable ([@elpoelma](https://github.com/elpoelma))
+* [#71](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/71) Avoid writing out p tags for nodes different than paragraph ([@elpoelma](https://github.com/elpoelma))
+
+#### :house: Internal
+* [#73](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/73) Make besluit title optional ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 1
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+
+
+## 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/besluit-plugin/besluit-plugin-card.hbs

@@ -1,20 +1,8 @@
-<AuList::Item>
-  <AuButton
-    @icon="add"
-    @iconAlignment="left"
-    @skin="link"
-    @disabled={{this.hasTitle}}
-    {{on 'click' this.insertTitle}}>
+{{#if this.canInsertTitle}}
+<AuAlert class="title-alert" @skin="warning" @closable={{false}} @icon="alert-triangle" @title={{t "besluit-plugin.missing-title-warning"}}>
+  <AuButton @iconAlignment="left" @skin="link-secondary" @disabled={{not this.canInsertTitle}} {{on 'click'
+    this.insertTitle}}>
     {{t "besluit-plugin.insert.decision-title"}}
   </AuButton>
-</AuList::Item>
-<AuList::Item>
-  <AuButton
-    @icon="add"
-    @iconAlignment="left"
-    @skin="link"
-    @disabled={{this.disableArticleInsert}}
-    {{on "click" this.insertArticle}}>
-    {{t "besluit-plugin.insert.article"}}
-  </AuButton>
-</AuList::Item>
+</AuAlert>
+{{/if}}

package/addon/components/besluit-plugin/besluit-plugin-card.ts

@@ -1,16 +1,16 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import {
-  insertTitle,
-  insertArticle,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin/commands';
+import { insertTitle } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin/commands';
 import { ProseController } from '@lblod/ember-rdfa-editor';
+import { inject as service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
 
 type Args = {
   controller: ProseController;
 };
 
 export default class BesluitPluginCardComponent extends Component<Args> {
+  @service declare intl: IntlService;
   get controller() {
     return this.args.controller;
   }
@@ -18,23 +18,14 @@ export default class BesluitPluginCardComponent extends Component<Args> {
   focus() {
     this.controller.focus();
   }
-  @action
-  insertArticle() {
-    this.controller.checkAndDoCommand(insertArticle(this.controller, ''));
-    this.focus();
-  }
 
   @action
   insertTitle() {
-    this.controller.doCommand(insertTitle(this.controller, ''));
+    this.controller.doCommand(insertTitle(this.intl));
     this.focus();
   }
 
-  get hasTitle() {
-    return !this.controller.checkCommand(insertTitle(this.controller, ''));
-  }
-
-  get disableArticleInsert() {
-    return !this.controller.checkCommand(insertArticle(this.controller, ''));
+  get canInsertTitle() {
+    return this.controller.checkCommand(insertTitle(this.intl));
   }
 }

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/addon/plugins/article-structure-plugin/commands/insert-structure.ts

@@ -14,6 +14,7 @@ import wrapStructureContent from './wrap-structure-content';
 import IntlService from 'ember-intl/services/intl';
 import { findNodes } from '@lblod/ember-rdfa-editor/utils/position-utils';
 import { containsOnlyPlaceholder } from '../utils/structure';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 
 const insertStructure = (
   structureSpec: StructureSpec,
@@ -22,14 +23,18 @@ const insertStructure = (
 ): Command => {
   return (state, dispatch) => {
     const { schema, selection, doc } = state;
+    if (wrapStructureContent(structureSpec, intl)(state, dispatch)) {
+      return true;
+    }
     const insertionRange = findInsertionRange({
       doc,
       selection,
       nodeType: schema.nodes[structureSpec.name],
       schema,
+      limitTo: structureSpec.limitTo,
     });
     if (!insertionRange) {
-      return wrapStructureContent(structureSpec, intl)(state, dispatch);
+      return false;
     }
     if (dispatch) {
       const { node: newStructureNode, selectionConfig } =
@@ -65,8 +70,9 @@ function findInsertionRange(args: {
   selection: Selection;
   nodeType: NodeType;
   schema: Schema;
+  limitTo?: string;
 }) {
-  const { doc, selection, nodeType, schema } = args;
+  const { doc, selection, nodeType, schema, limitTo } = args;
   const { $from } = selection;
   for (let currentDepth = $from.depth; currentDepth >= 0; currentDepth--) {
     const currentAncestor = $from.node(currentDepth);
@@ -80,21 +86,30 @@ function findInsertionRange(args: {
       }
     }
   }
-  const nextContainerRange = findNodes(
-    doc,
-    selection.from,
-    true,
-    false,
-    ({ from }) => {
+  const limitContainer = limitTo
+    ? findParentNodeOfType(schema.nodes[limitTo])(selection)
+    : null;
+
+  const limitContainerRange = limitContainer
+    ? {
+        from: limitContainer.pos,
+        to: limitContainer.pos + limitContainer.node.nodeSize,
+      }
+    : { from: 0, to: doc.nodeSize };
+  const filterFunction = ({ from, to }: { from: number; to: number }) => {
+    if (from >= limitContainerRange.from && to <= limitContainerRange.to) {
       const node = doc.nodeAt(from);
       if (node) {
         if (node.canReplaceWith(node.childCount, node.childCount, nodeType)) {
           return true;
         }
       }
-      return false;
     }
-  ).next().value;
+    return false;
+  };
+  const nextContainerRange =
+    findNodes(doc, selection.from, true, false, filterFunction).next().value ??
+    findNodes(doc, selection.from, true, true, filterFunction).next().value;
   if (nextContainerRange) {
     const { from, to } = nextContainerRange;
     const containerNode = doc.nodeAt(from);

package/addon/plugins/article-structure-plugin/commands/move-selected-structure.ts

@@ -4,6 +4,7 @@ import {
   NodeType,
   PNode,
   Schema,
+  Selection,
   TextSelection,
 } from '@lblod/ember-rdfa-editor';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
@@ -12,6 +13,7 @@ import { findAncestorOfType } from '../utils/structure';
 import recalculateStructureNumbers from './recalculate-structure-numbers';
 import { findNodes } from '@lblod/ember-rdfa-editor/utils/position-utils';
 import IntlService from 'ember-intl/services/intl';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 const moveSelectedStructure = (
   options: ArticleStructurePluginOptions,
   direction: 'up' | 'down',
@@ -24,21 +26,24 @@ const moveSelectedStructure = (
     if (!currentStructure || currentStructure.pos === -1) {
       return false;
     }
-    const insertionRange = calculateInsertionRange(
+    const currentStructureSpec = unwrap(
+      options.find((spec) => spec.name === currentStructure.node.type.name)
+    );
+    const insertionRange = calculateInsertionRange({
       doc,
-      currentStructure.pos,
-      currentStructure.node.type,
+      pos: currentStructure.pos,
+      nodeType: currentStructure.node.type,
+      selection: state.selection,
       direction,
-      schema
-    );
+      schema,
+      limitTo: currentStructureSpec.limitTo,
+    });
     if (insertionRange === null || insertionRange === undefined) {
       return false;
     }
     const isNodeSelection = selection instanceof NodeSelection;
     const relativeSelectionOffset = selection.from - currentStructure.pos;
-    const currentStructureSpec = unwrap(
-      options.find((spec) => spec.name === currentStructure.node.type.name)
-    );
+
     if (dispatch) {
       const transaction = state.tr;
       transaction.delete(
@@ -75,13 +80,16 @@ const moveSelectedStructure = (
   };
 };
 
-export function calculateInsertionRange(
-  doc: PNode,
-  pos: number, // position of structure we want to move
-  nodeType: NodeType,
-  direction: 'up' | 'down',
-  schema: Schema
-): { from: number; to: number } | null {
+export function calculateInsertionRange(args: {
+  doc: PNode;
+  pos: number; // position of structure we want to move
+  selection: Selection;
+  nodeType: NodeType;
+  direction: 'up' | 'down';
+  schema: Schema;
+  limitTo?: string;
+}): { from: number; to: number } | null {
+  const { doc, pos, selection, nodeType, direction, schema, limitTo } = args;
   const resolvedPosition = doc.resolve(pos);
   const containerNode = resolvedPosition.parent;
   const index = resolvedPosition.index();
@@ -93,17 +101,29 @@ export function calculateInsertionRange(
     const position = resolvedPosition.posAtIndex(index + 2);
     return { from: position, to: position };
   } else {
+    const limitContainer = limitTo
+      ? findParentNodeOfType(schema.nodes[limitTo])(selection)
+      : null;
+
+    const limitContainerRange = limitContainer
+      ? {
+          from: limitContainer.pos,
+          to: limitContainer.pos + limitContainer.node.nodeSize,
+        }
+      : { from: 0, to: doc.nodeSize };
     const containerRange = findNodes(
       doc,
       pos,
       true,
       direction === 'up',
-      ({ from }) => {
-        const node = doc.nodeAt(from);
-        if (node && node !== containerNode) {
-          const indexToTest = direction === 'up' ? node.childCount : 0;
-          if (node.canReplaceWith(indexToTest, indexToTest, nodeType)) {
-            return true;
+      ({ from, to }) => {
+        if (from >= limitContainerRange.from && to <= limitContainerRange.to) {
+          const node = doc.nodeAt(from);
+          if (node && node !== containerNode) {
+            const indexToTest = direction === 'up' ? node.childCount : 0;
+            if (node.canReplaceWith(indexToTest, indexToTest, nodeType)) {
+              return true;
+            }
           }
         }
         return false;

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

@@ -13,7 +13,6 @@ export type SpecName = string;
 
 export type StructureSpec = {
   name: SpecName;
-  // context: SpecName[];
   translations: {
     insert: string;
     move: {
@@ -41,6 +40,7 @@ export type StructureSpec = {
   }) => Transaction;
   content?: (args: { pos: number; state: EditorState }) => Fragment;
   continuous: boolean;
+  limitTo?: string;
 };
 
 export type ArticleStructurePluginOptions = StructureSpec[];

package/addon/plugins/besluit-plugin/commands/index.ts

@@ -1,4 +1 @@
-export { default as insertArticle } from './insert-article';
 export { default as insertTitle } from './insert-title';
-export { default as moveArticle } from './move-article';
-export { default as recalculateArticleNumbers } from './recalculate-article-numbers';

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

@@ -1,65 +1,40 @@
-import {
-  Command,
-  ProseController,
-  TextSelection,
-} from '@lblod/ember-rdfa-editor';
-import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { Command, NodeSelection } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
 
-export default function insertTitle(
-  controller: ProseController,
-  title: string
-): Command {
+export default function insertTitle(intl: IntlService): Command {
   return function (state, dispatch) {
-    const selection = controller.state.selection;
-    const limitedDatastore = controller.datastore.limitToRange(
-      controller.state,
-      selection.from,
-      selection.to
-    );
-
-    const besluit = [
-      ...limitedDatastore
-        .match(null, 'a', 'besluit:Besluit')
-        .asSubjectNodeMapping(),
-    ][0];
-
-    const besluitRange = besluit?.nodes[0];
-
-    if (!besluit || !besluitRange) {
+    const { selection, schema } = state;
+    const besluit = findParentNodeOfType(schema.nodes.besluit)(selection);
+    if (!besluit) {
       return false;
     }
-
-    const titleQuad = controller.datastore
-      .match(
-        `>${besluit.term.value}`,
-        '>http://data.europa.eu/eli/ontology#title'
-      )
-      .asQuadResultSet()
-      .first();
-    if (titleQuad) {
+    if (!besluit.node.canReplaceWith(0, 0, schema.nodes.title)) {
       return false;
     }
 
     if (dispatch) {
-      const range = {
-        from: besluitRange.from + 1,
-        to: besluitRange.from + 1,
-      };
-      const articleHtml = `
-      <h4 class="h4" property="eli:title" datatype="xsd:string">${
-        title
-          ? title
-          : '<span class="mark-highlight-manual">Geef titel besluit op</span>'
-      }</h4>
-    `;
-      controller.doCommand(insertHtml(articleHtml, range.from, range.to));
-      controller.withTransaction((tr) => {
-        const selection = TextSelection.near(
-          controller.state.doc.resolve(range.from)
-        );
-        return tr.setSelection(selection).scrollIntoView();
-      });
-      dispatch(state.tr.scrollIntoView());
+      const tr = state.tr;
+      tr.insert(
+        besluit.pos + 1,
+        schema.node(
+          'title',
+          null,
+          schema.node(
+            'paragraph',
+            null,
+            schema.node('placeholder', {
+              placeholderText: intl.t(
+                'besluit-plugin.placeholder.decision-title'
+              ),
+            })
+          )
+        )
+      );
+      // Select placeholder in title
+      const selection = new NodeSelection(tr.doc.resolve(besluit.pos + 3));
+      tr.setSelection(selection);
+      dispatch(tr);
     }
 
     return true;

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

@@ -2,10 +2,5 @@ import { WidgetSpec } from '@lblod/ember-rdfa-editor';
 
 export const besluitPluginCardWidget: WidgetSpec = {
   componentName: 'besluit-plugin/besluit-plugin-card',
-  desiredLocation: 'insertSidebar',
-};
-
-export const besluitContextCardWidget: WidgetSpec = {
-  componentName: 'besluit-plugin/besluit-context-card',
   desiredLocation: 'sidebar',
 };

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

@@ -58,11 +58,11 @@ export const description: NodeSpec = {
     },
   },
   toDOM(node) {
-    return ['p', node.attrs, 0];
+    return ['div', node.attrs, 0];
   },
   parseDOM: [
     {
-      tag: 'p',
+      tag: 'div,p',
       getAttrs(element: HTMLElement) {
         if (hasRDFaAttribute(element, 'property', ELI('description'))) {
           return getRdfaAttrs(element);
@@ -87,11 +87,11 @@ export const motivering: NodeSpec = {
     },
   },
   toDOM(node) {
-    return ['p', node.attrs, 0];
+    return ['div', node.attrs, 0];
   },
   parseDOM: [
     {
-      tag: 'div,p',
+      tag: 'div',
       getAttrs(element: HTMLElement) {
         if (hasRDFaAttribute(element, 'property', BESLUIT('motivering'))) {
           return getRdfaAttrs(element);
@@ -177,6 +177,7 @@ export const besluitArticleStructure: StructureSpec = {
     },
     remove: 'article-structure-plugin.remove.article',
   },
+  limitTo: 'besluit',
   constructor: ({ schema, number, content, intl }) => {
     const numberConverted = number?.toString() ?? '1';
     const node = schema.node(
@@ -235,7 +236,7 @@ export const besluit_article_header: NodeSpec = {
     delete toplevelAttrs.number;
     delete toplevelAttrs.datatype;
     return [
-      'p',
+      'div',
       toplevelAttrs,
       'Artikel ',
       [
@@ -247,7 +248,7 @@ export const besluit_article_header: NodeSpec = {
   },
   parseDOM: [
     {
-      tag: 'p',
+      tag: 'p,div',
       getAttrs(element: HTMLElement) {
         const numberNode = element.querySelector(
           `span[property~='${ELI('number').prefixed}'],
@@ -295,7 +296,7 @@ export const besluit_article_content: NodeSpec = {
 
 export const besluit: NodeSpec = {
   group: 'block',
-  content: 'block*title{1}block*description?block*motivering?block*',
+  content: 'block*title?block*description?block*motivering?block*',
   inline: false,
   attrs: {
     ...rdfaAttrs,

package/app/styles/besluit-plugin.scss

@@ -0,0 +1,3 @@
+.title-alert .au-c-button {
+    padding: 0;
+}

package/app/styles/variable-plugin.scss

@@ -47,6 +47,7 @@
   .variable {
     [contenteditable] {
       white-space: pre-wrap;
+      word-break: break-all;
       word-wrap: break-word;
       outline: 0px;
     }

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

@@ -1,14 +1,14 @@
 import Component from '@glimmer/component';
 import { ProseController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
 type Args = {
     controller: ProseController;
 };
 export default class BesluitPluginCardComponent extends Component<Args> {
+    intl: IntlService;
     get controller(): ProseController;
     focus(): void;
-    insertArticle(): void;
     insertTitle(): void;
-    get hasTitle(): boolean;
-    get disableArticleInsert(): boolean;
+    get canInsertTitle(): boolean;
 }
 export {};

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.4",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -62,7 +62,7 @@
     "@embroider/test-setup": "^1.6.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@lblod/ember-rdfa-editor": "^1.0.0-beta.5",
+    "@lblod/ember-rdfa-editor": "^1.0.0-beta.6",
     "@rdfjs/types": "^1.1.0",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@tsconfig/ember": "^1.0.1",
@@ -144,7 +144,7 @@
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.2.0",
-    "@lblod/ember-rdfa-editor": "^1.0.0-beta.5",
+    "@lblod/ember-rdfa-editor": "^1.0.0-beta.6",
     "ember-concurrency": "^2.3.7"
   },
   "engines": {

package/plugins/article-structure-plugin/commands/move-selected-structure.d.ts

@@ -1,9 +1,16 @@
-import { Command, NodeType, PNode, Schema } from '@lblod/ember-rdfa-editor';
+import { Command, NodeType, PNode, Schema, Selection } from '@lblod/ember-rdfa-editor';
 import { ArticleStructurePluginOptions } from '..';
 import IntlService from 'ember-intl/services/intl';
 declare const moveSelectedStructure: (options: ArticleStructurePluginOptions, direction: 'up' | 'down', intl: IntlService) => Command;
-export declare function calculateInsertionRange(doc: PNode, pos: number, // position of structure we want to move
-nodeType: NodeType, direction: 'up' | 'down', schema: Schema): {
+export declare function calculateInsertionRange(args: {
+    doc: PNode;
+    pos: number;
+    selection: Selection;
+    nodeType: NodeType;
+    direction: 'up' | 'down';
+    schema: Schema;
+    limitTo?: string;
+}): {
     from: number;
     to: number;
 } | null;

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

@@ -34,6 +34,7 @@ export type StructureSpec = {
         state: EditorState;
     }) => Fragment;
     continuous: boolean;
+    limitTo?: string;
 };
 export type ArticleStructurePluginOptions = StructureSpec[];
 export declare const articleStructureInsertWidget: (options?: ArticleStructurePluginOptions) => WidgetSpec;

package/plugins/besluit-plugin/commands/index.d.ts

@@ -1,4 +1 @@
-export { default as insertArticle } from './insert-article';
 export { default as insertTitle } from './insert-title';
-export { default as moveArticle } from './move-article';
-export { default as recalculateArticleNumbers } from './recalculate-article-numbers';

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

@@ -1,2 +1,3 @@
-import { Command, ProseController } from '@lblod/ember-rdfa-editor';
-export default function insertTitle(controller: ProseController, title: string): Command;
+import { Command } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+export default function insertTitle(intl: IntlService): Command;

package/plugins/besluit-plugin/index.d.ts

@@ -1,3 +1,2 @@
 import { WidgetSpec } from '@lblod/ember-rdfa-editor';
 export declare const besluitPluginCardWidget: WidgetSpec;
-export declare const besluitContextCardWidget: WidgetSpec;

package/translations/en-US.yaml

@@ -57,15 +57,11 @@ besluit-type-plugin:
   error-first-body: "An error occured while fetching the decision types. Try again later. If this problem persists, please contact"
   error-rest-body: ". For more specific details about this problem, inspect the browser console."
 besluit-plugin:
-  card:
-    title: Edit decision
+  missing-title-warning: This decision is missing a title
   insert:
-    article: Insert article
     decision-title: Insert decision title
-  action:
-    delete-article: Delete article
-    article-up: Move article up
-    article-down: Move article down
+  placeholder:
+    decision-title: Insert decision title
 date-plugin:
   insert:
     date: "Insert date"

package/translations/nl-BE.yaml

@@ -57,15 +57,11 @@ besluit-type-plugin:
   error-first-body: "Er was een probleem bij het ophalen van de besluittypes. Probeer later opnieuw. Bij blijvende problemen, contacteer"
   error-rest-body: ". Voor meer specifieke details, controleer de console in de browser."
 besluit-plugin:
-  card:
-    title: Artikels bewerken
+  missing-title-warning: Dit besluit heeft geen titel
   insert:
-    article: Voeg artikel in
     decision-title: Voeg besluittitel in
-  action:
-    delete-article: Artikel verwijderen
-    article-up: Artikel naar boven verplaatsen
-    article-down: Artikel naar beneden verplaatsen
+  placeholder:
+    decision-title: Geef titel besluit op
 date-plugin:
   insert:
     date: "Datum invoegen"

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/addon/components/besluit-plugin/besluit-context-card.hbs

@@ -1,44 +0,0 @@
-{{#if this.activeArticle}}
-  <AuCard
-    @shadow={{true}}
-    @size="flush" as |c|>
-    <c.header class="au-u-hidden-visually">
-      <AuHeading @level="3" @skin="6">
-        {{t "besluit-plugin.card.title"}}
-      </AuHeading>
-    </c.header>
-    <c.content class="au-c-content--small">
-      <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny">
-        <AuList::Item>
-          <AuButton
-            @icon="bin"
-            @iconAlignment="left"
-            @skin="link"
-            {{on 'click' this.deleteArticle}}>
-            {{t "besluit-plugin.action.delete-article"}}
-          </AuButton>
-        </AuList::Item>
-        <AuList::Item>
-          <AuButton
-            @icon="nav-up"
-            @iconAlignment="left"
-            @skin="link"
-            @disabled={{this.disableMoveUp}}
-            {{on 'click' this.moveUpArticle}}>
-            {{t "besluit-plugin.action.article-up"}}
-          </AuButton>
-        </AuList::Item>
-        <AuList::Item>
-          <AuButton
-            @icon="nav-down"
-            @iconAlignment="left"
-            @skin="link"
-            @disabled={{this.disableMoveDown}}
-            {{on 'click' this.moveDownArticle}}>
-            {{t "besluit-plugin.action.article-down"}}
-          </AuButton>
-        </AuList::Item>
-      </AuList>
-    </c.content>
-  </AuCard>
-{{/if}}

package/addon/components/besluit-plugin/besluit-context-card.ts

@@ -1,138 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-import {
-  moveArticle,
-  recalculateArticleNumbers,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin/commands';
-import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
-import { ProseController } from '@lblod/ember-rdfa-editor';
-
-interface Args {
-  controller: ProseController;
-}
-
-export default class BesluitContextCardComponent extends Component<Args> {
-  @tracked articleElement?: ResolvedPNode;
-
-  constructor(parent: unknown, args: Args) {
-    super(parent, args);
-  }
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get doc() {
-    return this.controller.state.doc;
-  }
-  focus() {
-    this.controller.focus();
-  }
-
-  @action
-  deleteArticle() {
-    if (this.activeArticle && this.besluitURI) {
-      const { from, to } = this.activeArticle.range;
-      this.controller.withTransaction((tr) => {
-        return tr.delete(from, to);
-      });
-      this.focus();
-      recalculateArticleNumbers(this.controller, this.besluitURI);
-    }
-  }
-
-  @action
-  moveUpArticle() {
-    if (this.besluitURI && this.activeArticle) {
-      this.controller.doCommand(
-        moveArticle(
-          this.controller,
-          this.besluitURI,
-          this.activeArticle.uri,
-          true
-        )
-      );
-    }
-  }
-
-  @action
-  moveDownArticle() {
-    if (this.besluitURI && this.activeArticle) {
-      this.controller.doCommand(
-        moveArticle(
-          this.controller,
-          this.besluitURI,
-          this.activeArticle.uri,
-          false
-        )
-      );
-    }
-  }
-
-  get disableMoveUp() {
-    if (this.besluitURI && this.activeArticle) {
-      return !this.controller.checkCommand(
-        moveArticle(
-          this.controller,
-          this.besluitURI,
-          this.activeArticle.uri,
-          true
-        )
-      );
-    }
-    return true;
-  }
-
-  get disableMoveDown() {
-    if (this.besluitURI && this.activeArticle) {
-      return !this.controller.checkCommand(
-        moveArticle(
-          this.controller,
-          this.besluitURI,
-          this.activeArticle.uri,
-          false
-        )
-      );
-    }
-    return true;
-  }
-
-  get besluitURI() {
-    const { from, to } = this.controller.state.selection;
-
-    const limitedDatastore = this.controller.datastore.limitToRange(
-      this.controller.state,
-      from,
-      to
-    );
-    return limitedDatastore
-      .match(null, 'a', 'besluit:Besluit')
-      .asQuadResultSet()
-      .first()?.subject.value;
-  }
-
-  get activeArticle() {
-    if (this.besluitURI) {
-      const { from, to } = this.controller.state.selection;
-
-      const limitedDatastore = this.controller.datastore.limitToRange(
-        this.controller.state,
-        from,
-        to
-      );
-      const dsResult = [
-        ...limitedDatastore
-          .match(null, 'a', 'besluit:Artikel')
-          .asSubjectNodeMapping(),
-      ][0];
-      if (dsResult) {
-        return {
-          uri: dsResult.term.value,
-          range: dsResult.nodes[0],
-        };
-      }
-    }
-    return;
-  }
-}

package/addon/plugins/besluit-plugin/commands/get-article-nodes-for-besluit.ts

@@ -1,30 +0,0 @@
-import { ProseController } from '@lblod/ember-rdfa-editor';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-
-export default function getArticleNodesForBesluit(
-  controller: ProseController,
-  besluitUri?: string
-) {
-  if (!besluitUri) {
-    const selection = controller.state.selection;
-    besluitUri = controller.datastore
-      .limitToRange(controller.state, selection.from, selection.to)
-      .match(null, 'a', 'besluit:Besluit')
-      .asQuadResultSet()
-      .first()?.subject.value;
-  }
-  if (!besluitUri) {
-    return;
-  }
-  const articles = controller.datastore
-    .match(`>${besluitUri}`, 'eli:has_part')
-    .asObjectNodeMapping();
-  return [
-    ...articles.map((article) => {
-      return {
-        uri: article.term.value,
-        range: unwrap(article.nodes.shift()),
-      };
-    }),
-  ];
-}

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

@@ -1,70 +0,0 @@
-import { v4 as uuid } from 'uuid';
-import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
-import { ProseController, TextSelection } from '@lblod/ember-rdfa-editor';
-import { Command } from '@lblod/ember-rdfa-editor';
-import recalculateArticleNumbers from './recalculate-article-numbers';
-
-export default function insertArticle(
-  controller: ProseController,
-  articleContent: string
-): Command {
-  return function (_state, dispatch) {
-    const selection = controller.state.selection;
-    const limitedDatastore = controller.datastore.limitToRange(
-      controller.state,
-      selection.from,
-      selection.to
-    );
-    const besluitSubject = limitedDatastore
-      .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
-      .asQuadResultSet()
-      .first()?.subject;
-
-    if (!besluitSubject) {
-      return false;
-    }
-    const containerRange = [
-      ...controller.datastore
-        .match(besluitSubject, 'prov:value')
-        .asPredicateNodeMapping(),
-    ][0].nodes[0];
-
-    if (!containerRange) {
-      return false;
-    }
-    if (dispatch) {
-      const range = {
-        from: containerRange.to - 1,
-        to: containerRange.to - 1,
-      };
-      const articleUri = `http://data.lblod.info/artikels/${uuid()}`;
-      const articleHtml = `
-      <div property="eli:has_part" prefix="mobiliteit: https://data.vlaanderen.be/ns/mobiliteit#" typeof="besluit:Artikel" resource="${articleUri}">
-        <div>
-          Artikel
-          <span property="eli:number" datatype="xsd:string">
-            <span class="mark-highlight-manual">nummer</span>
-          </span></div>
-        <span style="display:none;" property="eli:language" resource="http://publications.europa.eu/resource/authority/language/NLD" typeof="skos:Concept">&nbsp;</span>
-        <div property="prov:value" datatype="xsd:string">
-        ${
-          articleContent
-            ? articleContent
-            : '<span class="mark-highlight-manual">Voer inhoud in</span>'
-        }
-        </div>
-      </div>
-    `;
-      controller.doCommand(insertHtml(articleHtml, range.from, range.to));
-      recalculateArticleNumbers(controller, besluitSubject.value);
-      controller.withTransaction((tr) => {
-        const selection = TextSelection.near(
-          controller.state.doc.resolve(range.from)
-        );
-        return tr.setSelection(selection).scrollIntoView();
-      });
-      controller.focus();
-    }
-    return true;
-  };
-}

package/addon/plugins/besluit-plugin/commands/move-article.ts

@@ -1,69 +0,0 @@
-import {
-  Command,
-  ProseController,
-  Selection,
-  TextSelection,
-} from '@lblod/ember-rdfa-editor';
-import recalculateArticleNumbers from './recalculate-article-numbers';
-import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import getArticleNodesForBesluit from './get-article-nodes-for-besluit';
-
-export default function moveArticleCommand(
-  controller: ProseController,
-  besluitUri: string,
-  articleUri: string,
-  moveUp: boolean
-): Command {
-  return (_state, dispatch) => {
-    const articles = getArticleNodesForBesluit(controller, besluitUri);
-    if (!articles) {
-      return false;
-    }
-    const articleIndex = articles.findIndex(({ uri }) => uri === articleUri);
-
-    if (
-      articleIndex === -1 ||
-      (moveUp && articleIndex === 0) ||
-      (!moveUp && articleIndex === articles.length - 1)
-    ) {
-      return false;
-    }
-
-    if (dispatch) {
-      let articleA: ResolvedPNode;
-      let articleB: ResolvedPNode;
-
-      if (moveUp) {
-        articleA = unwrap(articles[articleIndex - 1]).range;
-        articleB = unwrap(articles[articleIndex]).range;
-      } else {
-        articleA = unwrap(articles[articleIndex]).range;
-        articleB = unwrap(articles[articleIndex + 1]).range;
-      }
-      const articleBNode = unwrap(controller.state.doc.nodeAt(articleB.from));
-      controller.withTransaction((tr) => {
-        tr.delete(articleB.from, articleB.to);
-        return tr.replaceRangeWith(articleA.from, articleA.from, articleBNode);
-      });
-      recalculateArticleNumbers(controller, besluitUri);
-      let selection: Selection;
-      if (moveUp) {
-        selection = TextSelection.near(
-          controller.state.doc.resolve(articleA.from)
-        );
-      } else {
-        selection = TextSelection.near(
-          controller.state.doc.resolve(
-            articleA.from + articleB.to - articleB.from
-          )
-        );
-      }
-      controller.withTransaction((tr) => {
-        return tr.setSelection(selection);
-      });
-      controller.focus();
-    }
-    return true;
-  };
-}

package/addon/plugins/besluit-plugin/commands/recalculate-article-numbers.ts

@@ -1,44 +0,0 @@
-import { ProseController } from '@lblod/ember-rdfa-editor';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import getArticleNodesForBesluit from './get-article-nodes-for-besluit';
-
-export default function recalculateArticleNumbers(
-  controller: ProseController,
-  besluitUri: string
-) {
-  const articles = getArticleNodesForBesluit(controller, besluitUri);
-  if (articles) {
-    for (let i = 0; i < articles.length; i++) {
-      const article = unwrap(articles[i]);
-      replaceNumberIfNeeded(controller, article, i);
-    }
-  }
-}
-
-function replaceNumberIfNeeded(
-  controller: ProseController,
-  article: { uri: string; range: { from: number; to: number } },
-  index: number
-) {
-  const articleNumberObject = [
-    ...controller.datastore
-      .match(`>${article.uri}`, '>http://data.europa.eu/eli/ontology#number')
-      .asObjectNodeMapping(),
-  ][0];
-  if (!articleNumberObject) {
-    return;
-  }
-  const articleNumber = Number(articleNumberObject.term.value);
-  const articleNumberRange = unwrap(articleNumberObject.nodes[0]);
-  const articleNumberExpected = index + 1;
-
-  if (articleNumber !== articleNumberExpected) {
-    controller.withTransaction((tr) => {
-      return tr.insertText(
-        articleNumberExpected.toString(),
-        articleNumberRange.from,
-        articleNumberRange.to
-      );
-    });
-  }
-}

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 {};

package/components/besluit-plugin/besluit-context-card.d.ts

@@ -1,24 +0,0 @@
-import Component from '@glimmer/component';
-import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
-import { ProseController } from '@lblod/ember-rdfa-editor';
-interface Args {
-    controller: ProseController;
-}
-export default class BesluitContextCardComponent extends Component<Args> {
-    articleElement?: ResolvedPNode;
-    constructor(parent: unknown, args: Args);
-    get controller(): ProseController;
-    get doc(): import("prosemirror-model").Node;
-    focus(): void;
-    deleteArticle(): void;
-    moveUpArticle(): void;
-    moveDownArticle(): void;
-    get disableMoveUp(): boolean;
-    get disableMoveDown(): boolean;
-    get besluitURI(): string | undefined;
-    get activeArticle(): {
-        uri: string;
-        range: ResolvedPNode;
-    } | undefined;
-}
-export {};

package/plugins/besluit-plugin/commands/get-article-nodes-for-besluit.d.ts

@@ -1,5 +0,0 @@
-import { ProseController } from '@lblod/ember-rdfa-editor';
-export default function getArticleNodesForBesluit(controller: ProseController, besluitUri?: string): {
-    uri: string;
-    range: import("@lblod/ember-rdfa-editor/addon/plugins/datastore").TextPNode | import("@lblod/ember-rdfa-editor/addon/plugins/datastore").ElementPNode;
-}[] | undefined;

package/plugins/besluit-plugin/commands/insert-article.d.ts

@@ -1,3 +0,0 @@
-import { ProseController } from '@lblod/ember-rdfa-editor';
-import { Command } from '@lblod/ember-rdfa-editor';
-export default function insertArticle(controller: ProseController, articleContent: string): Command;

package/plugins/besluit-plugin/commands/move-article.d.ts

@@ -1,2 +0,0 @@
-import { Command, ProseController } from '@lblod/ember-rdfa-editor';
-export default function moveArticleCommand(controller: ProseController, besluitUri: string, articleUri: string, moveUp: boolean): Command;

package/plugins/besluit-plugin/commands/recalculate-article-numbers.d.ts

@@ -1,2 +0,0 @@
-import { ProseController } from '@lblod/ember-rdfa-editor';
-export default function recalculateArticleNumbers(controller: ProseController, besluitUri: string): void;