@lblod/ember-rdfa-editor-lblod-plugins 0.4.1 → 1.0.0-alpha.2

package/CHANGELOG.md

@@ -7,6 +7,52 @@
 
 
 
+
+
+## 1.0.0-alpha.2 (2023-01-03)
+
+#### :boom: Breaking Change
+* [#38](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/38) Folder restructure ([@elpoelma](https://github.com/elpoelma))
+
+#### :rocket: Enhancement
+* [#40](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/40) Major rework of article-structure plugin ([@elpoelma](https://github.com/elpoelma))
+* [#39](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/39) Remove paragraphs from toc ([@lagartoverde](https://github.com/lagartoverde))
+
+#### :bug: Bug Fix
+* [#37](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/37) Fix besluit plugin numbering ([@elpoelma](https://github.com/elpoelma))
+
+#### :house: Internal
+* [#41](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/41) Update editor to 1.0.0-alpha.13 ([@elpoelma](https://github.com/elpoelma))
+* [#38](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/38) Folder restructure ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 2
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+- Oscar Rodriguez Villalobos ([@lagartoverde](https://github.com/lagartoverde))
+
+## 1.0.0-alpha.1 (2022-12-22)
+
+#### :rocket: Enhancement
+* [#35](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/35) converting the besluit-plugin to new API ([@usrtim](https://github.com/usrtim))
+* [#34](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/34) Add and convert citation plugin ([@abeforgit](https://github.com/abeforgit))
+* [#32](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/32) Convert table-of-contents plugin to prosemirror based editor. ([@elpoelma](https://github.com/elpoelma))
+* [#33](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/33) feature/dev utils ([@abeforgit](https://github.com/abeforgit))
+* [#31](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/31) Convert roadsign-regulation plugin to prosemirror based editor. ([@elpoelma](https://github.com/elpoelma))
+* [#28](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/28) Convert insert-variable plugin to prosemirror based editor. ([@elpoelma](https://github.com/elpoelma))
+* [#29](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/29) Convert template-variable plugin to prosemirror based editor. ([@elpoelma](https://github.com/elpoelma))
+* [#20](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/20) Convert standard-template plugin to prosemirror based editor plugin ([@elpoelma](https://github.com/elpoelma))
+* [#19](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/19) Convert import-snippet plugin to prosemirror based editor plugin ([@elpoelma](https://github.com/elpoelma))
+* [#18](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/18) Convert besluit-type plugin to prosemirror based editor plugin ([@elpoelma](https://github.com/elpoelma))
+* [#17](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/17) Convert rdfa-date plugin to prosemirror based editor plugin ([@elpoelma](https://github.com/elpoelma))
+
+#### :house: Internal
+* [#26](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/26) Convert besluit-type, import-snippet, rdfa-date and standard-template plugins to typescript ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 4
+- Arne Bertrand ([@abeforgit](https://github.com/abeforgit))
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+- Oscar Rodriguez Villalobos ([@lagartoverde](https://github.com/lagartoverde))
+- [@usrtim](https://github.com/usrtim)
+
 ## 0.4.1 (2022-12-02)
 
 #### :bug: Bug Fix

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

@@ -0,0 +1,10 @@
+<div>
+  {{#each this.structureTypes as |structureType|}}
+  <AuList::Item>
+    <AuButton @icon="add" @iconAlignment="left" @skin="link" @disabled={{not (this.canInsertStructure structureType)}}
+      {{on 'click' (fn this.insertStructure structureType)}}>
+      {{t structureType.translations.insert}}
+    </AuButton>
+  </AuList::Item>
+  {{/each}}
+</div>

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

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+import {
+  ArticleStructurePluginOptions,
+  StructureSpec,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+import { action } from '@ember/object';
+import { insertStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
+
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    options: ArticleStructurePluginOptions;
+  };
+};
+export default class EditorPluginsArticleStructureCardComponent extends Component<Args> {
+  @service declare intl: IntlService;
+
+  get structureTypes() {
+    return this.args.widgetArgs.options;
+  }
+
+  @action
+  insertStructure(spec: StructureSpec) {
+    this.args.controller.doCommand(insertStructure(spec, this.intl));
+    this.args.controller.focus();
+  }
+
+  canInsertStructure = (spec: StructureSpec) =>
+    this.args.controller.checkCommand(insertStructure(spec, this.intl));
+}

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

@@ -0,0 +1,46 @@
+{{#unless this.isOutsideStructure}}
+  <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
+    <c.header class="au-u-hidden-visually">
+      <AuHeading @level="3" @skin="6">{{t "article-structure-plugin.title.structureCard"}}</AuHeading>
+    </c.header>
+    <c.content class="au-c-content--small">
+      <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny" as |Item|>
+        <Item>
+          <AuButton
+            @icon="chevron-up"
+            @iconAlignment="left"
+            @skin="link"
+            @disabled={{not this.canMoveUp}}
+            {{on 'click' (fn this.moveStructure 'up')}}>
+            {{t this.currentStructureType.translations.move.up}}
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon="chevron-down"
+            @iconAlignment="left"
+            @skin="link"
+            @disabled={{not this.canMoveDown}}
+            {{on 'click' (fn this.moveStructure 'down')}}>
+            {{t this.currentStructureType.translations.move.down}}
+          </AuButton>
+        </Item>
+        <Item>
+          <AuToggleSwitch 
+            @label={{t "article-structure-plugin.remove.content"}} 
+            @checked={{this.removeStructureContent}}
+            @onChange={{this.setRemoveStructureContent}}/>
+          <AuButton
+            @icon="bin"
+            @iconAlignment="left"
+            @skin="link"
+            @alert={{true}}
+            @disabled={{not this.canRemoveStructure}}
+            {{on 'click' this.removeStructure}}>
+            {{t this.currentStructureType.translations.remove}}
+          </AuButton>
+        </Item>
+      </AuList>
+    </c.content>
+  </AuCard>
+{{/unless}}

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

@@ -0,0 +1,124 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+import {
+  moveSelectedStructure,
+  removeStructure,
+  unwrapStructure,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
+import { ArticleStructurePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    options: ArticleStructurePluginOptions;
+  };
+};
+
+export default class EditorPluginsStructureCardComponent extends Component<Args> {
+  @service declare intl: IntlService;
+  @tracked removeStructureContent = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  moveStructure(direction: 'up' | 'down') {
+    this.controller.doCommand(
+      moveSelectedStructure(this.structureTypes, direction, this.intl)
+    );
+    this.controller.focus();
+  }
+
+  @action
+  removeStructure() {
+    if (this.structure && this.currentStructureType) {
+      if (this.removeStructureContent) {
+        this.controller.doCommand(
+          removeStructure(this.structure, this.structureTypes)
+        );
+      } else {
+        this.controller.doCommand(
+          unwrapStructure(
+            {
+              ...this.structure,
+              type: this.currentStructureType,
+            },
+            this.structureTypes
+          )
+        );
+      }
+    }
+    this.controller.focus();
+  }
+
+  @action
+  setRemoveStructureContent(value: boolean) {
+    this.removeStructureContent = value;
+  }
+
+  get structureTypes() {
+    return this.args.widgetArgs.options;
+  }
+
+  get structureNodeSpecs() {
+    return this.structureTypes.map(
+      (type) => this.controller.schema.nodes[type.name]
+    );
+  }
+
+  get structure() {
+    const currentSelection = this.controller.state.selection;
+    return findAncestorOfType(currentSelection, ...this.structureNodeSpecs);
+  }
+
+  get currentStructureType() {
+    if (this.structure) {
+      const { node: structureNode } = this.structure;
+      return this.structureTypes.find(
+        (spec) => spec.name === structureNode.type.name
+      );
+    }
+    return;
+  }
+
+  get isOutsideStructure() {
+    return !this.structure;
+  }
+
+  get canMoveDown() {
+    return this.controller.checkCommand(
+      moveSelectedStructure(this.structureTypes, 'down', this.intl)
+    );
+  }
+
+  get canMoveUp() {
+    return this.controller.checkCommand(
+      moveSelectedStructure(this.structureTypes, 'up', this.intl)
+    );
+  }
+
+  get canRemoveStructure() {
+    if (this.structure && this.currentStructureType) {
+      if (this.removeStructureContent) {
+        return true;
+      } else {
+        return this.controller.checkCommand(
+          unwrapStructure(
+            {
+              ...this.structure,
+              type: this.currentStructureType,
+            },
+            this.structureTypes
+          )
+        );
+      }
+    }
+    return false;
+  }
+}

package/addon/components/au-native-input.hbs

@@ -0,0 +1,30 @@
+{{#if @icon}}
+  <span class='au-c-input-wrapper {{this.iconAlignment}} {{this.width}}'>
+    <input
+      type={{this.type}}
+      class='au-c-input
+        {{this.error}}
+        {{this.warning}}
+        {{this.width}}
+        {{this.disabled}}'
+      disabled={{@disabled}}
+      ...attributes
+    />
+    {{#if (eq @iconAlignment 'right')}}
+      <AuIcon @icon={{@icon}} @alignment='right' />
+    {{else}}
+      <AuIcon @icon={{@icon}} @alignment='left' />
+    {{/if}}
+  </span>
+{{else}}
+  <input
+    type={{this.type}}
+    class='au-c-input
+      {{this.error}}
+      {{this.warning}}
+      {{this.width}}
+      {{this.disabled}}'
+    disabled={{@disabled}}
+    ...attributes
+  />
+{{/if}}

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

@@ -0,0 +1,47 @@
+import Component from '@glimmer/component';
+
+interface Args {
+  width?: 'block';
+  iconAlignment?: 'left' | 'right';
+  error?: boolean;
+  warning?: boolean;
+  disabled?: boolean;
+  type?: string;
+  icon?: string;
+}
+
+export default class AuNativeInput extends Component<Args> {
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+  }
+
+  get width() {
+    if (this.args.width == 'block') return 'au-c-input--block';
+    else return '';
+  }
+
+  get iconAlignment() {
+    if (this.args.iconAlignment == 'left') return 'au-c-input-wrapper--left';
+    if (this.args.iconAlignment == 'right') return 'au-c-input-wrapper--right';
+    else return '';
+  }
+
+  get error() {
+    if (this.args.error) return 'au-c-input--error';
+    else return '';
+  }
+
+  get warning() {
+    if (this.args.warning) return 'au-c-input--warning';
+    else return '';
+  }
+
+  get disabled() {
+    if (this.args.disabled) return 'is-disabled';
+    else return '';
+  }
+
+  get type() {
+    return this.args.type || 'text';
+  }
+}

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

@@ -0,0 +1,44 @@
+{{#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

@@ -0,0 +1,138 @@
+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/components/besluit-plugin/besluit-plugin-card.hbs

@@ -0,0 +1,20 @@
+<AuList::Item>
+  <AuButton
+    @icon="add"
+    @iconAlignment="left"
+    @skin="link"
+    @disabled={{this.hasTitle}}
+    {{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>

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

@@ -0,0 +1,40 @@
+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 { ProseController } from '@lblod/ember-rdfa-editor';
+
+type Args = {
+  controller: ProseController;
+};
+
+export default class BesluitPluginCardComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  focus() {
+    this.controller.focus();
+  }
+  @action
+  insertArticle() {
+    this.controller.checkAndDoCommand(insertArticle(this.controller, ''));
+    this.focus();
+  }
+
+  @action
+  insertTitle() {
+    this.controller.doCommand(insertTitle(this.controller, ''));
+    this.focus();
+  }
+
+  get hasTitle() {
+    return !this.controller.checkCommand(insertTitle(this.controller, ''));
+  }
+
+  get disableArticleInsert() {
+    return !this.controller.checkCommand(insertArticle(this.controller, ''));
+  }
+}

package/addon/components/besluit-type-plugin/{besluit-type-select.js → besluit-type-select.ts}

@@ -1,18 +1,22 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+type Args = {
+  besluitTypes: BesluitType[];
+};
 
-export default class BesluitTypePluginBesluitTypeSelectComponent extends Component {
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Args> {
   @tracked besluitTypes;
-  constructor() {
-    super(...arguments);
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
     this.besluitTypes = this.args.besluitTypes.sort((a, b) =>
       a.label > b.label ? 1 : -1
     );
   }
 
   @action
-  search(term) {
+  search(term: string) {
     const lowerTerm = term.toLowerCase();
     return this.args.besluitTypes.filter((besluitType) =>
       besluitType.label.toLowerCase().includes(lowerTerm)

package/addon/components/besluit-type-plugin/toolbar-dropdown.hbs

@@ -1,3 +1,4 @@
+<div {{did-update this.updateBesluitTypes @controller.state}}>
 {{#if this.showCard}}
   {{#if this.loadDataTaskInstance.isError}}
     <AuPill
@@ -81,3 +82,4 @@
     </Modal.Body>
   </AuModal>
 {{/if}}
+</div>