@lblod/ember-rdfa-editor-lblod-plugins 8.2.2 → 8.4.0

package/.woodpecker/.test.yml

@@ -6,6 +6,7 @@ steps:
       - git diff -wb --name-only origin/master..HEAD | grep CHANGELOG.md
     when:
       event: pull_request
+      evaluate: 'not (CI_COMMIT_PULL_REQUEST_LABELS contains "dependabot")'
   install:
     image: danlynn/ember-cli:4.8.0
     commands:
@@ -26,6 +27,10 @@ steps:
     group: check
     commands:
       - ember test
+  precompile:
+    image: danlynn/ember-cli:4.8.0
+    commands:
+      - ember ts:precompile
 
 
   release:

package/CHANGELOG.md

@@ -7,6 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.4.0] - 2023-07-06
+
+### Changed
+
+- revert editor bump to 4.0.0, bump to 3.10.0 instead
+- Addition of document-title plugin
+
+## [8.3.0] - 2023-07-06
+### Added
+- Insert the snippet
+- Addition of a precompile step to woodpecker PR check
+
+### Fixed
+- fix type error due to bad tsconfig
+### Changed
+- Woodpecker: do not run changelog-check when PR contains `dependabot` label
+- Made the number variable also show placeholders
+- Extract SPARQL query tools
+
+### Dependencies
+- Bumps `@types/rdfjs__data-model` from 2.0.1 to 2.0.4
+- Bumps `eslint-plugin-ember` from 11.4.6 to 11.9.0
+- Bumps `@typescript-eslint/eslint-plugin` from 5.45.0 to 5.60.1
+- Bumps `ember-velcro` to 2.1.0
+- Bumps `@lblod/ember-rdfa-editor` to 4.0.0
+- Bumps `ember-resources` from 5.6.2 to 6.1.1
+
 ## [8.2.2] - 2023-06-28
 
 ### Fixed
@@ -59,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Change problematic type in citation that made it to break with new ember
 
+
 ## [8.0.0] - 2023-06-15
 ### Fixed
 - Bump `@lblod/ember-rdfa-editor` package to fix annotation not present for some structures
@@ -520,7 +548,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.2...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.0...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -536,6 +564,8 @@ add onclick handler to pencil icon in variable plugin
 [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
+[8.4.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.3.0...v8.4.0
+[8.3.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.2...v8.3.0
 [8.2.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.1...v8.2.2
 [8.2.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.0...v8.2.1
 [8.2.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.1.0...v8.2.0

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

@@ -206,47 +206,24 @@
             {{/if}}
           {{/if}}
           {{#if this.decisionResource.value.length}}
-            {{! Pagination in the footer of the dialog }}
-            <div class='citaten--container-footer au-u-background-gray-100'>
-              <AuToolbar @border='top' @size='large' @nowrap={{true}}>
-                <div class='au-c-pagination'>
-                  <p>
-                    <span class='au-u-hidden-visually'>{{t
-                        'citaten-plugin.search.results'
-                      }}</span>
-                    <strong>
-                      {{this.rangeStart}}
-                      -
-                      {{this.rangeEnd}}
-                    </strong>
-                    {{t 'citaten-plugin.pagination.of'}}
-                    {{this.totalCount}}
-                  </p>
-                  <div class='au-c-pagination__list-item'>
-                    {{#unless this.isFirstPage}}
-                      <AuButton
-                        @skin='link'
-                        @icon='nav-left'
-                        @iconAlignment='left'
-                        {{on 'click' this.previousPage}}
-                      >
-                        {{t 'citaten-plugin.pagination.previous'}}
-                      </AuButton>
-                    {{/unless}}
-                    {{#unless this.isLastPage}}
-                      <AuButton
-                        @skin='link'
-                        @icon='nav-right'
-                        @iconAlignment='right'
-                        {{on 'click' this.nextPage}}
-                      >
-                        {{t 'citaten-plugin.pagination.next'}}
-                      </AuButton>
-                    {{/unless}}
-                  </div>
-                </div>
-              </AuToolbar>
-            </div>
+            {{#let
+              (pagination
+                page=this.pageNumber
+                pageSize=this.pageSize
+                count=this.totalCount
+              )
+              as |pg|
+            }}
+              <Pagination::PaginationView
+                @totalCount={{pg.count}}
+                @rangeStart={{pg.pageStart}}
+                @rangeEnd={{pg.pageEnd}}
+                @onNextPage={{this.nextPage}}
+                @onPreviousPage={{this.previousPage}}
+                @isFirstPage={{not pg.hasPreviousPage}}
+                @isLastPage={{not pg.hasNextPage}}
+              />
+            {{/let}}
           {{/if}}
         </mc.content>
       </AuMainContainer>

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

@@ -108,23 +108,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     return this.inputSearchText ?? this.text;
   }
 
-  get rangeStart() {
-    return this.pageNumber * this.pageSize + 1;
-  }
-
-  get rangeEnd() {
-    const end = this.rangeStart + this.pageSize - 1;
-    return end > this.totalCount ? this.totalCount : end;
-  }
-
-  get isFirstPage() {
-    return this.pageNumber == 0;
-  }
-
-  get isLastPage() {
-    return this.rangeEnd == this.totalCount;
-  }
-
   resourceSearch = restartableTask(async () => {
     await timeout(500);
     this.error = null;

package/addon/components/document-title-plugin/insert-title-card.hbs

@@ -0,0 +1,5 @@
+<AuList::Item>
+  <AuButton @icon="add" @iconAlignment="left" @skin="link" {{on 'click' this.insertTitle}} @disabled={{not this.canInsertTitle}}>
+    {{t "document-title-plugin.insert-title"}}
+  </AuButton>
+</AuList::Item>

package/addon/components/document-title-plugin/insert-title-card.ts

@@ -0,0 +1,41 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+import insertDocumentTitle from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/document-title-plugin/commands/insert-document-title';
+
+type Args = {
+  controller: SayController;
+};
+export default class InsertTitleCardComponent extends Component<Args> {
+  @service declare intl: IntlService;
+
+  @action
+  insertTitle() {
+    this.args.controller.doCommand(
+      insertDocumentTitle({
+        placeholder: this.intl.t(
+          'document-title-plugin.document-title-placeholder'
+        ),
+      }),
+      {
+        view: this.args.controller.mainEditorView,
+      }
+    );
+    this.args.controller.focus();
+  }
+
+  get canInsertTitle() {
+    return this.args.controller.checkCommand(
+      insertDocumentTitle({
+        placeholder: this.intl.t(
+          'document-title-plugin.document-title-placeholder'
+        ),
+      }),
+      {
+        view: this.args.controller.mainEditorView,
+      }
+    );
+  }
+}

package/addon/components/pagination/pagination-view.hbs

@@ -0,0 +1,39 @@
+<div class='au-u-background-gray-100'>
+  <AuToolbar @border='top' @size='large' @nowrap={{true}}>
+    <div class='au-c-pagination'>
+      <p>
+        <span class='au-u-hidden-visually'>
+          {{t 'pagination.results'}}</span>
+        <strong>
+          {{@rangeStart}}
+          -
+          {{@rangeEnd}}
+        </strong>
+        {{t 'pagination.of'}}
+        {{@totalCount}}
+      </p>
+      <div class='au-u-flex'>
+        {{#unless @isFirstPage}}
+          <AuButton
+            @skin='link'
+            @icon='nav-left'
+            @iconAlignment='left'
+            {{on 'click' @onPreviousPage}}
+          >
+            {{t 'pagination.previous'}}
+          </AuButton>
+        {{/unless}}
+        {{#unless @isLastPage}}
+          <AuButton
+            @skin='link'
+            @icon='nav-right'
+            @iconAlignment='right'
+            {{on 'click' @onNextPage}}
+          >
+            {{t 'pagination.next'}}
+          </AuButton>
+        {{/unless}}
+      </div>
+    </div>
+  </AuToolbar>
+</div>

package/addon/components/snippet-plugin/helpers/alert-load-error.hbs

@@ -0,0 +1,22 @@
+<AuAlert
+  @title='{{t "snippet-plugin.modal.alert.error-title"}}'
+  @skin='error'
+  @icon='alert-triangle'
+  @closable={{false}}
+  class='au-u-margin au-u-margin-top-none'
+  ...attributes
+>
+  <p>{{t 'snippet-plugin.modal.alert.error-intro'}}</p>
+  <code class='au-u-error snippet-modal--error-code'>{{@error}}</code>
+  <p>
+    {{t 'snippet-plugin.modal.alert.error-outro'}}
+    <AuLinkExternal
+      href='mailto:Gelinkt-Notuleren@vlaanderen.be'
+      @icon='mail'
+      @iconAlignment='left'
+    >
+      {{! template-lint-disable no-bare-strings  }}
+      Gelinkt-Notuleren@vlaanderen.be
+    </AuLinkExternal>.
+  </p>
+</AuAlert>

package/addon/components/snippet-plugin/helpers/alert-no-items.hbs

@@ -0,0 +1,8 @@
+<AuAlert
+  @title={{t 'snippet-plugin.modal.alert.no-results'}}
+  @skin='warning'
+  @icon='cross'
+  @closable={{false}}
+  class='au-u-margin au-u-margin-top-none'
+  ...attributes
+/>

package/addon/components/snippet-plugin/search-modal.hbs

@@ -0,0 +1,83 @@
+<AuModal
+  @modalOpen={{@open}}
+  @closeModal={{this.closeModal}}
+  @title={{t 'snippet-plugin.modal.title'}}
+  @size='large'
+  @padding='none'
+  as |modal|
+>
+  <modal.Body>
+    <AuMainContainer class='snippet-modal--main-container' as |mc|>
+      <mc.sidebar>
+        <div class='au-c-sidebar'>
+          <div class='au-c-sidebar__content au-u-padding'>
+            <AuHeading @level='3' @skin='4' class='au-u-padding-bottom-small'>
+              {{t 'snippet-plugin.modal.search.title'}}
+            </AuHeading>
+            <AuLabel
+              class='au-margin-bottom-small'
+              for='searchTerm'
+              @inline={{false}}
+              @required={{false}}
+              @error={{false}}
+              @warning={{false}}
+            >
+              {{t 'snippet-plugin.modal.search.label'}}
+            </AuLabel>
+            <AuNativeInput
+              @type='text'
+              @width='block'
+              id='searchTerm'
+              value={{this.searchText}}
+              placeholder={{t 'snippet-plugin.modal.search.placeholder'}}
+              {{on 'input' this.setInputSearchText}}
+            />
+          </div>
+        </div>
+      </mc.sidebar>
+      <mc.content @scroll={{true}}>
+        <div class='au-u-padding-top snippet-modal--list-container'>
+          {{#if this.snippetsResource.isRunning}}
+            <div class='au-u-margin'>
+              <AuLoader @padding='large' />
+              <span class='au-u-hidden-visually'>
+                {{t 'snippet-plugin.alert.loading'}}
+              </span>
+            </div>
+          {{else}}
+            {{#if this.error}}
+              <SnippetPlugin::Helpers::AlertLoadError @error={{this.error}} />
+            {{else}}
+              {{#if this.snippetsResource.value.length}}
+                <SnippetPlugin::Snippets::SnippetList
+                  @snippets={{this.snippetsResource.value}}
+                  @onInsert={{@onInsert}}
+                />
+              {{else}}
+                <SnippetPlugin::Helpers::AlertNoItems />
+              {{/if}}
+            {{/if}}
+          {{/if}}
+        </div>
+        {{#if this.snippetsResource.value.length}}
+          {{#let
+            (pagination
+              page=this.pageNumber pageSize=this.pageSize count=this.totalCount
+            )
+            as |pg|
+          }}
+            <Pagination::PaginationView
+              @totalCount={{pg.count}}
+              @rangeStart={{pg.pageStart}}
+              @rangeEnd={{pg.pageEnd}}
+              @onNextPage={{this.nextPage}}
+              @onPreviousPage={{this.previousPage}}
+              @isFirstPage={{not pg.hasPreviousPage}}
+              @isLastPage={{not pg.hasNextPage}}
+            />
+          {{/let}}
+        {{/if}}
+      </mc.content>
+    </AuMainContainer>
+  </modal.Body>
+</AuModal>

package/addon/components/snippet-plugin/search-modal.ts

@@ -0,0 +1,97 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+
+import { tracked } from '@glimmer/tracking';
+
+import { fetchSnippets } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/fetch-data';
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+
+interface Args {
+  config: SnippetPluginConfig;
+  closeModal: () => void;
+}
+
+export default class SnippetPluginSearchModalComponent extends Component<Args> {
+  // Filtering
+  @tracked inputSearchText: string | null = null;
+
+  // Display
+  @tracked error: unknown;
+
+  // Pagination
+  @tracked pageNumber = 0;
+  @tracked pageSize = 20;
+  @tracked totalCount = 0;
+
+  get config() {
+    return this.args.config;
+  }
+
+  get searchText() {
+    return this.inputSearchText;
+  }
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    assert(
+      'inputSearchText must be bound to an input element',
+      event.target instanceof HTMLInputElement
+    );
+
+    this.inputSearchText = event.target.value;
+  }
+
+  @action
+  async closeModal() {
+    await this.snippetsResource.cancel();
+    this.args.closeModal();
+  }
+
+  snippetsSearch = restartableTask(async () => {
+    await timeout(500);
+
+    const abortController = new AbortController();
+
+    try {
+      const queryResult = await fetchSnippets({
+        endpoint: this.args.config.endpoint,
+        abortSignal: abortController.signal,
+        filter: {
+          name: this.inputSearchText ?? undefined,
+        },
+        pagination: {
+          pageNumber: this.pageNumber,
+          pageSize: this.pageSize,
+        },
+      });
+
+      this.totalCount = queryResult.totalCount;
+
+      return queryResult.results;
+    } catch (error) {
+      this.error = error;
+      return [];
+    } finally {
+      abortController.abort();
+    }
+  });
+
+  snippetsResource = trackedTask(this, this.snippetsSearch, () => [
+    this.inputSearchText,
+    this.pageNumber,
+    this.pageSize,
+  ]);
+
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+}

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

@@ -0,0 +1,17 @@
+<AuList::Item>
+  <AuButton
+    @icon='add'
+    @iconAlignment='left'
+    @skin='link'
+    {{on 'click' this.openModal}}
+  >
+    {{t 'snippet-plugin.insert.title'}}
+  </AuButton>
+</AuList::Item>
+
+<SnippetPlugin::SearchModal
+  @open={{this.showModal}}
+  @closeModal={{this.closeModal}}
+  @config={{this.config}}
+  @onInsert={{this.onInsert}}
+/>

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

@@ -0,0 +1,50 @@
+import { action } from '@ember/object';
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { ProseParser, SayController } from '@lblod/ember-rdfa-editor';
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+
+interface Args {
+  controller: SayController;
+  config: SnippetPluginConfig;
+}
+
+export default class SnippetInsertComponent extends Component<Args> {
+  @tracked showModal = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get config() {
+    return this.args.config;
+  }
+
+  @action
+  openModal() {
+    this.controller.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+
+  @action
+  onInsert(content: string) {
+    const domParser = new DOMParser();
+
+    this.closeModal();
+
+    this.controller.withTransaction((tr) => {
+      return tr.replaceSelectionWith(
+        ProseParser.fromSchema(this.controller.schema).parse(
+          domParser.parseFromString(content, 'text/html')
+        )
+      );
+    });
+  }
+}

package/addon/components/snippet-plugin/snippets/snippet-list.hbs

@@ -0,0 +1,12 @@
+{{#if @snippets.length}}
+  <AuList @direction='vertical'>
+    {{#each @snippets as |snippet|}}
+      <AuList::Item>
+        <SnippetPlugin::Snippets::SnippetPreview
+          @snippet={{snippet}}
+          @onInsert={{@onInsert}}
+        />
+      </AuList::Item>
+    {{/each}}
+  </AuList>
+{{/if}}

package/addon/components/snippet-plugin/snippets/snippet-preview.hbs

@@ -0,0 +1,27 @@
+<div
+  class='snippet-preview--container au-c-panel au-u-margin-right'
+  ...attributes
+>
+  <div
+    class='snippet-preview--article au-u-padding au-u-padding-right-large rdfa-annotations rdfa-annotations-highlight rdfa-annotations-hover'
+  >
+    <h3 class='snippet-preview--title au-u-margin-bottom'>
+      {{@snippet.title}}
+    </h3>
+    <div class="snippet-preview--editor-container">
+      <div class="say-container__main">
+        <div class="say-editor">
+          <div class="say-editor__inner say-content">
+            {{this.snippet.content}}
+          </div>
+        </div>
+      </div>
+      <div class="snippet-preview--editor-overlay"></div>
+    </div>
+  </div>
+  <div class='snippet-preview--button au-u-padding-small'>
+    <AuButton @skin='naked' {{on 'click' this.onInsert}}>
+      {{t 'snippet-plugin.modal.select'}}
+    </AuButton>
+  </div>
+</div>

package/addon/components/snippet-plugin/snippets/snippet-preview.ts

@@ -0,0 +1,28 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import {
+  Snippet,
+  SnippetPluginConfig,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+
+interface Args {
+  config: SnippetPluginConfig;
+  snippet: Snippet;
+  onInsert: (content: string) => void;
+}
+
+export default class SnippetPreviewComponent extends Component<Args> {
+  @tracked controller?: SayController;
+
+  get snippet(): Snippet {
+    return this.args.snippet;
+  }
+
+  @action
+  onInsert() {
+    this.args.onInsert(this.args.snippet.content?.toHTML() ?? '');
+  }
+}

package/addon/helpers/pagination.ts

@@ -0,0 +1,40 @@
+import { helper } from '@ember/component/helper';
+
+import { isSome } from '../utils/option';
+
+interface PaginationArguments {
+  count: number;
+  pageSize: number;
+  page: number;
+}
+
+export function pagination({
+  page = 0,
+  count = 0,
+  pageSize = 20,
+}: PaginationArguments) {
+  const totalPages = count / pageSize;
+  const pageStart = page * pageSize + 1;
+  const pageEnd = Math.min((page + 1) * pageSize, count);
+  const nextPage = page < totalPages - 1 ? page + 1 : null;
+  const previousPage = page > 0 ? page - 1 : null;
+  const hasPreviousPage = isSome(previousPage);
+  const hasNextPage = isSome(nextPage);
+
+  return {
+    count,
+    pageSize,
+    page,
+    totalPages,
+    pageStart,
+    pageEnd,
+    nextPage,
+    previousPage,
+    hasPreviousPage,
+    hasNextPage,
+  };
+}
+
+export default helper<unknown[], PaginationArguments>((_, named) =>
+  pagination(named)
+);