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

package/CHANGELOG.md

@@ -10,6 +10,25 @@
 
 
 
+
+## 1.0.0-beta.1 (2023-01-17)
+
+#### :rocket: Enhancement
+* [#27](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/27) Conversion of plugins to prosemirror based editor ([@elpoelma](https://github.com/elpoelma))
+* [#54](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/54) Move table-of-contents toggle to toolbar ([@elpoelma](https://github.com/elpoelma))
+* [#46](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/46) Update insert-structure command so it looks forward for the next best position to insert ([@elpoelma](https://github.com/elpoelma))
+
+#### :bug: Bug Fix
+* [#59](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/59) Rename verwijzing to citeeropschrift ([@elpoelma](https://github.com/elpoelma))
+* [#56](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/56) Add space before 'met zonale geldigheid' ([@elpoelma](https://github.com/elpoelma))
+
+#### :house: Internal
+* [#61](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/61) Update editor to 1.0.0-beta.2 ([@elpoelma](https://github.com/elpoelma))
+* [#60](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/60) Update editor to 1.0.0-beta.1 ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 1
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+
 ## 1.0.0-alpha.3 (2023-01-09)
 
 #### :house: Internal

package/addon/components/citation-plugin/citation-card.hbs

@@ -106,13 +106,13 @@
     </c.footer>
   </AuCard>
 {{/if}}
-
 <CitationPlugin::Citations::SearchModal
   @open={{this.showModal}}
   @closeModal={{this.closeModal}}
   @insertDecisionCitation={{this.insertDecisionCitation}}
   @insertArticleCitation={{this.insertArticleCitation}}
   @selectedDecision={{this.decision}}
-  @legislationTypeUri={{this.legislationTypeUri}}
+  @legislationTypeUri={{this.selectedLegislationTypeUri}}
+  @selectLegislationType={{this.selectLegislationType}}
   @text={{this.searchText}}
 />

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

@@ -15,6 +15,8 @@
   @closeModal={{this.closeModal}}
   @insertDecisionCitation={{this.insertDecisionCitation}}
   @insertArticleCitation={{this.insertArticleCitation}}
-  @legislationTypeUri={{this.legislationTypeUri}}
+  @legislationTypeUri={{this.selectedLegislationTypeUri}}
+
+  @selectLegislationType={{this.selectLegislationType}}
   @text={{this.text}}
 />

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

@@ -13,7 +13,11 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/vlaamse-codex';
 import { citedText } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cited-text';
 import { CitationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
-import { LEGISLATION_TYPES } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+import {
+  LEGISLATION_TYPE_CONCEPTS,
+  LEGISLATION_TYPES,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 interface Args {
   controller: ProseController;
@@ -24,6 +28,28 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
   @tracked showModal = false;
   @tracked legislationTypeUri = LEGISLATION_TYPES.decreet;
   @tracked text = '';
+  @tracked legislationType: string | null = null;
+
+  get selectedLegislationTypeUri(): string {
+    return this.selectedLegislationType.value;
+  }
+
+  get selectedLegislationType() {
+    const type = this.legislationType;
+    const found = LEGISLATION_TYPE_CONCEPTS.find((c) => c.value === type);
+    return found || unwrap(LEGISLATION_TYPE_CONCEPTS[0]);
+  }
+
+  @action
+  selectLegislationType(type: string) {
+    type = type.toLowerCase();
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.label.toLowerCase() === type
+    );
+    this.legislationType = found
+      ? found.value
+      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
+  }
 
   get disableInsert() {
     if (!this.activeRanges) {

package/addon/components/citation-plugin/citations/search-modal.hbs

@@ -40,7 +40,7 @@
                 @searchMessage={{t 'citaten-plugin.search.placeholder'}}
                 @options={{this.legislationTypes}}
                 @selected={{this.legislationSelected}}
-                @onChange={{this.selectLegislationType}}
+                @onChange={{@selectLegislationType}}
                 as |type|
               >
                 {{type}}

package/addon/components/citation-plugin/citations/search-modal.ts

@@ -47,13 +47,12 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
   // Vlaamse Codex currently doesn't contain captions and content of decisions
   // @tracked isEnabledSearchCaption = false
   // @tracked isEnabledSearchContent = false
-  @tracked legislationTypeUri: string;
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
   @tracked totalCount = 0;
   @tracked decisions = [];
   @tracked error: unknown;
-  @tracked selectedDecision: Decision | null;
+  @tracked selectedDecision: Decision | null = null;
   @tracked documentDateFrom: Date | null = null;
   @tracked documentDateTo: Date | null = null;
   @tracked publicationDateFrom: Date | null = null;
@@ -62,11 +61,8 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
   minDate = new Date('1930-01-01T12:00:00');
   maxDate = new Date(`${new Date().getFullYear() + 10}-01-01T12:00:00`);
 
-  constructor(owner: unknown, args: Args) {
-    super(owner, args);
-    this.selectedDecision = this.args.selectedDecision;
-    this.legislationTypeUri =
-      this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
+  get legislationTypeUri() {
+    return this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
   }
 
   get datePickerLocalization() {
@@ -174,17 +170,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     this.inputSearchText = (event.target as HTMLInputElement).value;
   }
 
-  @action
-  selectLegislationType(type: string) {
-    type = type.toLowerCase();
-    const found = LEGISLATION_TYPE_CONCEPTS.find(
-      (c) => c.label.toLowerCase() === type
-    );
-    this.legislationTypeUri = found
-      ? found.value
-      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
-  }
-
   @action
   updateDocumentDateFrom(_isoDate: unknown, date: Date) {
     this.documentDateFrom = date;

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.ts

@@ -260,7 +260,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
           }</span>
           <span style="margin-left:0;margin-top:0;">${
             sign.zonality === POTENTIALLY_ZONAL_URI && zonality === ZONAL_URI
-              ? 'met zonale geldigheid'
+              ? ' met zonale geldigheid'
               : ''
           }
           </span>

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

@@ -3,9 +3,8 @@ import Component from '@glimmer/component';
 import { PNode } from '@lblod/ember-rdfa-editor';
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { Selection } from '@lblod/ember-rdfa-editor';
-import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
+import { NodeWithPos } from '@curvenote/prosemirror-utils';
+import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin';
 type OutlineEntry = {
   content: string;
   pos: number;
@@ -33,34 +32,32 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
   extractOutline({ node, pos }: { node: PNode; pos: number }): OutlineEntry[] {
     let result: OutlineEntry[] = [];
     let parent: OutlineEntry | undefined;
-    const properties = getRdfaAttribute(node, 'property').pop();
-    const resource = getRdfaAttribute(node, 'resource').pop();
-    if (properties && resource) {
-      for (const tocConfigEntry of this.config) {
-        if (
-          tocConfigEntry.sectionPredicate.some((pred) =>
-            properties.includes(pred)
-          )
-        ) {
-          if (typeof tocConfigEntry.value === 'string') {
-            parent = { content: tocConfigEntry.value, pos };
-            break;
-          } else {
-            const range = [
-              ...this.args.controller.datastore
-                .match(`>${resource}`, `>${tocConfigEntry.value.predicate}`)
-                .asPredicateNodeMapping()
-                .nodes(),
-            ][0];
-            if (range) {
-              const node = unwrap(this.controller.state.doc.nodeAt(range.from));
-              parent = {
-                content: node.textContent,
-                pos: range.from,
-              };
-              break;
+    for (const option of this.config) {
+      const { nodeHierarchy } = option;
+      if (RegExp(`^${nodeHierarchy[0]}$`).exec(node.type.name)) {
+        let i = 1;
+        let currentNode: NodeWithPos | undefined = { node, pos };
+        while (currentNode && i < nodeHierarchy.length) {
+          let newCurrentNode: NodeWithPos | undefined;
+          currentNode.node.forEach((child, offset) => {
+            if (RegExp(`^${nodeHierarchy[i]}$`).exec(child.type.name)) {
+              newCurrentNode = { pos: pos + offset, node: child };
+              return;
             }
-          }
+          });
+          currentNode = newCurrentNode;
+          i++;
+        }
+        if (currentNode) {
+          const outlineText = currentNode.node.type.spec.outlineText as
+            | ((node: PNode) => string)
+            | undefined;
+          const content =
+            outlineText?.(currentNode.node) ?? currentNode.node.textContent;
+          parent = {
+            pos: currentNode.pos,
+            content,
+          };
         }
       }
     }

package/addon/components/table-of-contents-plugin/toolbar-button.hbs

@@ -0,0 +1,8 @@
+<label class="au-c-toggle-switch">
+  <input type="checkbox" 
+         checked={{this.toggled}} 
+         class="au-c-toggle-switch__input au-u-hidden-visually" 
+         {{on "input" this.toggle}}/>
+  <span class="au-c-toggle-switch__toggle"></span>
+  <span class="au-c-toggle-switch__label">{{t "table-of-contents-plugin.toggle" }}</span>
+</label>

package/addon/components/table-of-contents-plugin/{card.ts → toolbar-button.ts}

@@ -1,16 +1,9 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import {
-  TableOfContentsConfig,
-  TABLE_OF_CONTENTS_DEFAULT_CONFIG,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 
 type Args = {
   controller: ProseController;
-  widgetArgs: {
-    config: TableOfContentsConfig;
-  };
 };
 
 export default class TableOfContentsCardComponent extends Component<Args> {
@@ -33,10 +26,6 @@ export default class TableOfContentsCardComponent extends Component<Args> {
     return result;
   }
 
-  get config() {
-    return this.args.widgetArgs.config ?? TABLE_OF_CONTENTS_DEFAULT_CONFIG;
-  }
-
   @action
   toggle() {
     if (this.tableOfContentsRange) {
@@ -47,13 +36,7 @@ export default class TableOfContentsCardComponent extends Component<Args> {
     } else {
       const { schema } = this.controller;
       this.controller.withTransaction((tr) => {
-        return tr.replaceRangeWith(
-          0,
-          0,
-          schema.node('table_of_contents', {
-            config: this.config,
-          })
-        );
+        return tr.replaceRangeWith(0, 0, schema.node('table_of_contents'));
       });
     }
   }

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

@@ -2,6 +2,8 @@ import {
   Command,
   NodeSelection,
   NodeType,
+  PNode,
+  Schema,
   Selection,
   TextSelection,
 } from '@lblod/ember-rdfa-editor';
@@ -9,56 +11,43 @@ import recalculateStructureNumbers from './recalculate-structure-numbers';
 import { StructureSpec } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
 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';
 
 const insertStructure = (
   structureSpec: StructureSpec,
   intl: IntlService
 ): Command => {
   return (state, dispatch) => {
-    const { schema, selection } = state;
-    const container = findInsertionContainer(
+    const { schema, selection, doc } = state;
+    const insertionRange = findInsertionRange({
+      doc,
       selection,
-      schema.nodes[structureSpec.name]
-    );
-    if (!container) {
+      nodeType: schema.nodes[structureSpec.name],
+      schema,
+    });
+    if (!insertionRange) {
       return wrapStructureContent(structureSpec, intl)(state, dispatch);
     }
     if (dispatch) {
       const { node: newStructureNode, selectionConfig } =
         structureSpec.constructor({ schema, intl });
       const transaction = state.tr;
-      let insertRange: { from: number; to: number };
-      if (
-        container.node.childCount === 1 &&
-        container.node.firstChild?.type === schema.nodes['paragraph'] &&
-        container.node.firstChild.firstChild?.type ===
-          schema.nodes['placeholder']
-      ) {
-        insertRange = {
-          from: container.pos + 1,
-          to: container.pos + container.node.nodeSize - 1,
-        };
-      } else {
-        insertRange = {
-          from: selection.$from.after(container.depth + 1),
-          to: selection.$from.after(container.depth + 1),
-        };
-      }
 
       transaction.replaceWith(
-        insertRange.from,
-        insertRange.to,
+        insertionRange.from,
+        insertionRange.to,
         newStructureNode
       );
       const newSelection =
         selectionConfig.type === 'node'
           ? NodeSelection.create(
               transaction.doc,
-              insertRange.from + selectionConfig.relativePos
+              insertionRange.from + selectionConfig.relativePos
             )
           : TextSelection.create(
               transaction.doc,
-              insertRange.from + selectionConfig.relativePos
+              insertionRange.from + selectionConfig.relativePos
             );
       transaction.setSelection(newSelection);
       transaction.scrollIntoView();
@@ -69,14 +58,50 @@ const insertStructure = (
   };
 };
 
-function findInsertionContainer(selection: Selection, nodeType: NodeType) {
+function findInsertionRange(args: {
+  doc: PNode;
+  selection: Selection;
+  nodeType: NodeType;
+  schema: Schema;
+}) {
+  const { doc, selection, nodeType, schema } = args;
   const { $from } = selection;
   for (let currentDepth = $from.depth; currentDepth >= 0; currentDepth--) {
     const currentAncestor = $from.node(currentDepth);
     const index = $from.index(currentDepth);
-    const pos = currentDepth > 0 ? $from.before(currentDepth) : -1;
     if (currentAncestor.canReplaceWith(index, index, nodeType)) {
-      return { node: currentAncestor, depth: currentDepth, pos };
+      if (containsOnlyPlaceholder(schema, currentAncestor)) {
+        return { from: $from.start(currentDepth), to: $from.end(currentDepth) };
+      } else {
+        const insertPos = $from.after(currentDepth + 1);
+        return { from: insertPos, to: insertPos };
+      }
+    }
+  }
+  const nextContainerRange = findNodes(
+    doc,
+    selection.from,
+    true,
+    false,
+    ({ from }) => {
+      const node = doc.nodeAt(from);
+      if (node) {
+        if (node.canReplaceWith(node.childCount, node.childCount, nodeType)) {
+          return true;
+        }
+      }
+      return false;
+    }
+  ).next().value;
+  if (nextContainerRange) {
+    const { from, to } = nextContainerRange;
+    const containerNode = doc.nodeAt(from);
+    if (containerNode) {
+      if (containsOnlyPlaceholder(schema, containerNode)) {
+        return { from: from + 1, to: to - 1 };
+      } else {
+        return { from: to - 1, to: to - 1 };
+      }
     }
   }
   return null;

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

@@ -1,8 +1,12 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import { Fragment, NodeSpec } from '@lblod/ember-rdfa-editor';
 import { StructureSpec } from '..';
 import { v4 as uuid } from 'uuid';
-import { ELI, SAY, XSD } from '../constants';
-import { hasRDFaAttribute } from '../utils/namespace';
+import {
+  ELI,
+  SAY,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 const PLACEHOLDERS = {
   body: 'article-structure-plugin.placeholder.paragraph.body',
@@ -39,8 +43,11 @@ export const articleParagraphSpec: StructureSpec = {
   },
 };
 
+const contentSelector = `span[property~='${SAY('body').prefixed}'],
+                         span[property~='${SAY('body').full}']`;
+
 export const article_paragraph: NodeSpec = {
-  content: 'text*|placeholder',
+  content: 'inline*',
   inline: false,
   attrs: {
     resource: {},
@@ -67,6 +74,29 @@ export const article_paragraph: NodeSpec = {
     ];
   },
   parseDOM: [
+    {
+      tag: 'div',
+      getAttrs(element: HTMLElement) {
+        const numberSpan = element.querySelector(`
+        span[property~='${ELI('number').prefixed}'],
+        span[property~='${ELI('number').full}']`);
+        if (
+          hasRDFaAttribute(element, 'property', SAY('hasParagraph')) &&
+          hasRDFaAttribute(element, 'typeof', SAY('Paragraph')) &&
+          element.getAttribute('resource') &&
+          element.querySelector(contentSelector) &&
+          numberSpan
+        ) {
+          return {
+            resource: element.getAttribute('resource'),
+            number: numberSpan.textContent,
+          };
+        }
+        return false;
+      },
+      contentElement: contentSelector,
+    },
+    // Parsing rule for backwards compatibility (when content was not inside seperate say:body div)
     {
       tag: 'div',
       getAttrs(element: HTMLElement) {
@@ -86,8 +116,10 @@ export const article_paragraph: NodeSpec = {
         }
         return false;
       },
-      contentElement: `span[property~='${SAY('body').prefixed}'],
-                       span[property~='${SAY('body').full}']`,
+      getContent: (node, schema) => {
+        const content = node.lastChild?.textContent ?? '';
+        return Fragment.from(schema.text(content));
+      },
     },
   ],
 };

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

@@ -1,4 +1,4 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import { NodeSpec, PNode } from '@lblod/ember-rdfa-editor';
 import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
@@ -7,7 +7,12 @@ import {
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import { ELI, EXT, SAY, XSD } from '../constants';
+import {
+  ELI,
+  EXT,
+  SAY,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 const PLACEHOLDERS = {
   title: 'article-structure-plugin.placeholder.article.heading',
@@ -88,6 +93,10 @@ export const article_header: NodeSpec = {
       default: SAY('heading').prefixed,
     },
   },
+  outlineText: (node: PNode) => {
+    const { number } = node.attrs;
+    return `Artikel ${number as string}: ${node.textContent}`;
+  },
   toDOM(node) {
     return [
       'div',
@@ -118,7 +127,8 @@ export const article_header: NodeSpec = {
         }
         return false;
       },
-      contentElement: `span[property~='${EXT('title').prefixed}']`,
+      contentElement: `span[property~='${EXT('title').prefixed}'],
+                       span[property~='${EXT('title').full}']`,
     },
   ],
 };

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

@@ -6,7 +6,7 @@ import {
   romanize,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
-import { SAY } from '../constants';
+import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 const PLACEHOLDERS = {
   title: 'article-structure-plugin.placeholder.chapter.heading',

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

@@ -6,7 +6,7 @@ import {
 import { v4 as uuid } from 'uuid';
 import { StructureSpec } from '..';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import { SAY } from '../constants';
+import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 const PLACEHOLDERS = {
   title: 'article-structure-plugin.placeholder.section.heading',

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

@@ -1,5 +1,10 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
-import { ELI, EXT, SAY, XSD } from '../constants';
+import { NodeSpec, PNode } from '@lblod/ember-rdfa-editor';
+import {
+  ELI,
+  EXT,
+  SAY,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { getStructureHeaderAttrs } from '../utils/structure';
 
 const TAG_TO_LEVEL = new Map([
@@ -9,7 +14,6 @@ const TAG_TO_LEVEL = new Map([
   ['h4', 4],
   ['h5', 5],
   ['h6', 6],
-  ['span', 6],
 ]);
 
 export const structure_header: NodeSpec = {
@@ -19,7 +23,6 @@ export const structure_header: NodeSpec = {
     property: {
       default: SAY('heading').prefixed,
     },
-
     number: {
       default: '1',
     },
@@ -27,6 +30,10 @@ export const structure_header: NodeSpec = {
       default: 1,
     },
   },
+  outlineText: (node: PNode) => {
+    const { number } = node.attrs;
+    return `${number as string}. ${node.textContent}`;
+  },
   toDOM(node) {
     return [
       `h${node.attrs.level as number}`,

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

@@ -6,7 +6,7 @@ import {
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
-import { SAY } from '../constants';
+import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 const PLACEHOLDERS = {
   title: 'article-structure-plugin.placeholder.subsection.heading',

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

@@ -6,7 +6,7 @@ import {
   romanize,
 } from '../utils/structure';
 import { v4 as uuid } from 'uuid';
-import { SAY } from '../constants';
+import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 const PLACEHOLDERS = {
   heading: 'article-structure-plugin.placeholder.generic.heading',

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

@@ -1,7 +1,20 @@
-import { NodeSpec, NodeType, Selection } from '@lblod/ember-rdfa-editor';
+import {
+  NodeSpec,
+  NodeType,
+  PNode,
+  Schema,
+  Selection,
+} from '@lblod/ember-rdfa-editor';
 import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
-import { ELI, RDF, SAY } from '../constants';
-import { hasRDFaAttribute, Resource } from './namespace';
+import {
+  ELI,
+  RDF,
+  SAY,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  hasRDFaAttribute,
+  Resource,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 export function constructStructureNodeSpec(config: {
   type: Resource;
@@ -102,12 +115,11 @@ export function findAncestorOfType(selection: Selection, ...types: NodeType[]) {
 }
 
 export function getStructureHeaderAttrs(element: HTMLElement) {
-  const numberNode = element.children[0];
-  if (
-    hasRDFaAttribute(element, 'property', SAY('heading')) &&
-    numberNode &&
-    hasRDFaAttribute(numberNode, 'property', ELI('number'))
-  ) {
+  const numberNode = element.querySelector(
+    `[property~="${ELI('number').prefixed}"],
+     [property~="${ELI('number').full}"]`
+  );
+  if (hasRDFaAttribute(element, 'property', SAY('heading')) && numberNode) {
     return {
       number: numberNode.textContent,
     };
@@ -160,3 +172,11 @@ export function romanize(num: number) {
   }
   return Array(+digits.join('') + 1).join('M') + roman;
 }
+
+export function containsOnlyPlaceholder(schema: Schema, node: PNode) {
+  return (
+    node.childCount === 1 &&
+    node.firstChild?.type === schema.nodes['paragraph'] &&
+    node.firstChild.firstChild?.type === schema.nodes['placeholder']
+  );
+}

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

@@ -127,7 +127,7 @@ function citationPlugin({
           expect(
             'the datastore plugin is required for this plugin',
             datastoreKey.getState(state)
-          )
+          )()
         );
         return {
           highlights: calculateDecorations(schema, doc, activeRanges),
@@ -141,7 +141,7 @@ function citationPlugin({
           expect(
             'the datastore plugin is required for this plugin',
             datastoreKey.getState(newState)
-          )
+          )()
         );
         return {
           highlights: calculateDecorations(schema, doc, activeRanges),

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

@@ -1,14 +1,10 @@
 import { WidgetSpec } from '@lblod/ember-rdfa-editor';
-import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
 
-export function tableOfContentsWidget(
-  config?: TableOfContentsConfig
-): WidgetSpec {
-  return {
-    componentName: 'table-of-contents-plugin/card',
-    desiredLocation: 'sidebar',
-    widgetArgs: {
-      config,
-    },
-  };
-}
+export type TableOfContentsConfig = {
+  nodeHierarchy: string[];
+}[];
+
+export const tableOfContentsWidget: WidgetSpec = {
+  componentName: 'table-of-contents-plugin/toolbar-button',
+  desiredLocation: 'toolbarRight',
+};

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

@@ -1,53 +1,46 @@
-import { optionMapOr } from '@lblod/ember-rdfa-editor/utils/option';
 import {
   createEmberNodeSpec,
   createEmberNodeView,
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
-import {
-  TableOfContentsConfig,
-  TABLE_OF_CONTENTS_DEFAULT_CONFIG,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
+import { TableOfContentsConfig } from '..';
 
-export const emberNodeConfig: EmberNodeConfig = {
-  name: 'table-of-contents',
-  componentPath: 'table-of-contents-plugin/ember-nodes/table-of-contents',
-  inline: false,
-  group: 'table_of_contents',
-  atom: true,
-  attrs: {
-    config: {
-      default: TABLE_OF_CONTENTS_DEFAULT_CONFIG,
-      serialize: (node) => {
-        return JSON.stringify(node.attrs['config']);
+export const emberNodeConfig: (
+  config: TableOfContentsConfig
+) => EmberNodeConfig = (config) => {
+  return {
+    name: 'table-of-contents',
+    componentPath: 'table-of-contents-plugin/ember-nodes/table-of-contents',
+    inline: false,
+    group: 'table_of_contents',
+    atom: true,
+    attrs: {
+      config: {
+        default: config,
       },
     },
-  },
-  parseDOM: [
-    {
-      tag: 'div',
-      getAttrs(element: HTMLElement) {
-        if (
-          element.dataset['emberNode'] === 'table-of-contents' ||
-          // Ensure backwards compatibility
-          element.dataset['inlineComponent'] ===
-            'inline-components/table-of-contents' ||
-          (element.classList.contains('inline-component') &&
-            element.classList.contains('inline-components/table-of-contents'))
-        ) {
-          return {
-            config: optionMapOr(
-              TABLE_OF_CONTENTS_DEFAULT_CONFIG,
-              JSON.parse,
-              element.getAttribute('config')
-            ) as TableOfContentsConfig,
-          };
-        }
-        return false;
+    parseDOM: [
+      {
+        tag: 'div',
+        getAttrs(element: HTMLElement) {
+          if (
+            element.dataset['emberNode'] === 'table-of-contents' ||
+            // Ensure backwards compatibility
+            element.dataset['inlineComponent'] ===
+              'inline-components/table-of-contents' ||
+            (element.classList.contains('inline-component') &&
+              element.classList.contains('inline-components/table-of-contents'))
+          ) {
+            return {};
+          }
+          return false;
+        },
       },
-    },
-  ],
+    ],
+  };
 };
 
-export const table_of_contents = createEmberNodeSpec(emberNodeConfig);
-export const tableOfContentsView = createEmberNodeView(emberNodeConfig);
+export const table_of_contents = (config: TableOfContentsConfig) =>
+  createEmberNodeSpec(emberNodeConfig(config));
+export const tableOfContentsView = (config: TableOfContentsConfig) =>
+  createEmberNodeView(emberNodeConfig(config));

package/addon/{plugins/article-structure-plugin → utils}/constants.ts

@@ -1,4 +1,4 @@
-import { namespace } from './utils/namespace';
+import { namespace } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 export const SAY = namespace('https://say.data.gift/ns/', 'say');
 export const RDF = namespace(

package/app/components/table-of-contents-plugin/{card.js → toolbar-button.js}

@@ -1 +1 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/table-of-contents-plugin/card';
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/table-of-contents-plugin/toolbar-button';

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

@@ -12,6 +12,13 @@ export default class EditorPluginsCitationInsertComponent extends Component<Args
     showModal: boolean;
     legislationTypeUri: string;
     text: string;
+    legislationType: string | null;
+    get selectedLegislationTypeUri(): string;
+    get selectedLegislationType(): {
+        label: string;
+        value: string;
+    };
+    selectLegislationType(type: string): void;
     get disableInsert(): boolean;
     get plugin(): CitationPlugin;
     get activeRanges(): [number, number][] | undefined;

package/components/citation-plugin/citations/search-modal.d.ts

@@ -11,7 +11,6 @@ interface Args {
 }
 export default class EditorPluginsCitationsSearchModalComponent extends Component<Args> {
     intl: IntlService;
-    legislationTypeUri: string;
     pageNumber: number;
     pageSize: number;
     totalCount: number;
@@ -25,7 +24,7 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     inputSearchText: string | null;
     minDate: Date;
     maxDate: Date;
-    constructor(owner: unknown, args: Args);
+    get legislationTypeUri(): string;
     get datePickerLocalization(): {
         buttonLabel: string;
         selectedDateMessage: string;
@@ -51,7 +50,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     resourceSearch: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<Decision[]>>;
     decisionResource: import("ember-resources/util/ember-concurrency").TaskInstance<unknown>;
     setInputSearchText(event: InputEvent): void;
-    selectLegislationType(type: string): void;
     updateDocumentDateFrom(_isoDate: unknown, date: Date): void;
     updateDocumentDateTo(_isoDate: unknown, date: Date): void;
     updatePublicationDateFrom(_isoDate: unknown, date: Date): void;

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

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { PNode } from '@lblod/ember-rdfa-editor';
 import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
-import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
+import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin';
 type OutlineEntry = {
     content: string;
     pos: number;

package/components/table-of-contents-plugin/{card.d.ts → toolbar-button.d.ts}

@@ -1,11 +1,7 @@
 import Component from '@glimmer/component';
-import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 type Args = {
     controller: ProseController;
-    widgetArgs: {
-        config: TableOfContentsConfig;
-    };
 };
 export default class TableOfContentsCardComponent extends Component<Args> {
     get toggled(): boolean;
@@ -14,7 +10,6 @@ export default class TableOfContentsCardComponent extends Component<Args> {
         from: number;
         to: number;
     } | undefined;
-    get config(): TableOfContentsConfig;
     toggle(): void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-beta.1",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -56,13 +56,13 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@appuniversum/ember-appuniversum": "^1.5.0",
+    "@appuniversum/ember-appuniversum": "^2.2.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.7.0",
     "@embroider/test-setup": "^1.6.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@lblod/ember-rdfa-editor": "^1.0.0-alpha.13",
+    "@lblod/ember-rdfa-editor": "^1.0.0-beta.2",
     "@rdfjs/types": "^1.1.0",
     "@release-it-plugins/lerna-changelog": "^5.0.0",
     "@tsconfig/ember": "^1.0.1",
@@ -143,8 +143,8 @@
     "webpack": "^5.72.1"
   },
   "peerDependencies": {
-    "@appuniversum/ember-appuniversum": "^1.5.0",
-    "@lblod/ember-rdfa-editor": "^1.0.0-alpha.13",
+    "@appuniversum/ember-appuniversum": "^2.2.0",
+    "@lblod/ember-rdfa-editor": "^1.0.0-beta.2",
     "ember-concurrency": "^2.3.7"
   },
   "engines": {

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

@@ -1,5 +1,5 @@
-import { NodeSpec, NodeType, Selection } from '@lblod/ember-rdfa-editor';
-import { Resource } from './namespace';
+import { NodeSpec, NodeType, PNode, Schema, Selection } from '@lblod/ember-rdfa-editor';
+import { Resource } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 export declare function constructStructureNodeSpec(config: {
     type: Resource;
     content: string;
@@ -12,9 +12,10 @@ export declare function findAncestorOfType(selection: Selection, ...types: NodeT
     pos: number;
     start: number;
     depth: number;
-    node: import("prosemirror-model").Node;
+    node: PNode;
 } | undefined;
 export declare function getStructureHeaderAttrs(element: HTMLElement): false | {
     number: string | null;
 };
 export declare function romanize(num: number): string;
+export declare function containsOnlyPlaceholder(schema: Schema, node: PNode): boolean;

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

@@ -1,3 +1,5 @@
 import { WidgetSpec } from '@lblod/ember-rdfa-editor';
-import { TableOfContentsConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils/constants';
-export declare function tableOfContentsWidget(config?: TableOfContentsConfig): WidgetSpec;
+export type TableOfContentsConfig = {
+    nodeHierarchy: string[];
+}[];
+export declare const tableOfContentsWidget: WidgetSpec;

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

@@ -1,4 +1,5 @@
 import { EmberNodeConfig } from '@lblod/ember-rdfa-editor/utils/ember-node';
-export declare const emberNodeConfig: EmberNodeConfig;
-export declare const table_of_contents: import("prosemirror-model").NodeSpec;
-export declare const tableOfContentsView: (controller: import("@lblod/ember-rdfa-editor/addon").ProseController) => import("prosemirror-view").NodeViewConstructor;
+import { TableOfContentsConfig } from '..';
+export declare const emberNodeConfig: (config: TableOfContentsConfig) => EmberNodeConfig;
+export declare const table_of_contents: (config: TableOfContentsConfig) => import("prosemirror-model").NodeSpec;
+export declare const tableOfContentsView: (config: TableOfContentsConfig) => (controller: import("@lblod/ember-rdfa-editor/addon").ProseController) => import("prosemirror-view").NodeViewConstructor;

package/translations/nl-BE.yaml

@@ -1,10 +1,10 @@
 citaten-plugin:
   card:
-    title: Voeg verwijzing toe
+    title: Voeg citeeropschrift toe
     suggestions: Suggesties
 
   insert:
-    title: Verwijzing invoegen
+    title: Citeeropschrift invoegen
 
   search:
     term: Zoekterm
@@ -30,7 +30,7 @@ citaten-plugin:
     of: van
 
   references:
-    insert: Verwijzing invoegen
+    insert: Citeeropschrift invoegen
     details: Details
     refer-whole: Verwijs naar volledig document
     refer-article: Verwijs naar artikel

package/utils/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const SAY: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
+export declare const RDF: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
+export declare const ELI: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
+export declare const XSD: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;
+export declare const EXT: (s: string) => import("@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace").Resource;

package/addon/components/table-of-contents-plugin/card.hbs

@@ -1,16 +0,0 @@
-<AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
-  <c.content class="au-c-content--small">
-    <label
-      class="au-c-toggle-switch"
-    >
-      <input
-        type="checkbox"
-        checked={{this.toggled}}
-        class="au-c-toggle-switch__input au-u-hidden-visually"
-        {{on "input" this.toggle}}
-      />
-      <span class="au-c-toggle-switch__toggle"></span>
-      <span class="au-c-toggle-switch__label">{{t "table-of-contents-plugin.toggle" }}</span>
-    </label>
-  </c.content>
-</AuCard>

package/addon/plugins/table-of-contents-plugin/utils/constants.ts

@@ -1,17 +0,0 @@
-export type TableOfContentsConfig = {
-  sectionPredicate: string[];
-  value:
-    | string
-    | {
-        predicate: string;
-      };
-}[];
-
-export const TABLE_OF_CONTENTS_DEFAULT_CONFIG: TableOfContentsConfig = [
-  {
-    sectionPredicate: ['https://say.data.gift/ns/hasPart', 'say:hasPart'],
-    value: {
-      predicate: 'https://say.data.gift/ns/heading',
-    },
-  },
-];

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

@@ -1,5 +0,0 @@
-export declare const SAY: (s: string) => import("./utils/namespace").Resource;
-export declare const RDF: (s: string) => import("./utils/namespace").Resource;
-export declare const ELI: (s: string) => import("./utils/namespace").Resource;
-export declare const XSD: (s: string) => import("./utils/namespace").Resource;
-export declare const EXT: (s: string) => import("./utils/namespace").Resource;

package/plugins/table-of-contents-plugin/utils/constants.d.ts

@@ -1,7 +0,0 @@
-export type TableOfContentsConfig = {
-    sectionPredicate: string[];
-    value: string | {
-        predicate: string;
-    };
-}[];
-export declare const TABLE_OF_CONTENTS_DEFAULT_CONFIG: TableOfContentsConfig;