@lblod/ember-rdfa-editor-lblod-plugins 9.0.2 → 9.1.0

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [9.1.0] - 2023-07-29
+
+### Added
+- template-comments plugin
+  - A plugin to insert and edit template comments (as a "block")
+  - can be inserted anywhere
+  - have a specific rdfa-attribute so they can be removed at publishing
+
+
 ## [9.0.2] - 2023-07-28
 ### Dependencies
 - Bumps `release-it` from 15.5.0 to 15.11.0
@@ -598,7 +607,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.2...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.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
@@ -614,6 +623,7 @@ 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
+[9.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.2...v9.1.0
 [9.0.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.1...v9.0.2
 [9.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.0...v9.0.1
 [9.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.1...v9.0.0

package/README.md

@@ -32,6 +32,7 @@ This addon contains the following editor plugins:
 * [template-variable-plugin](#template-variable-plugin)
 * [validation-plugin](#validation-plugin)
 * [address-plugin](#address-plugin)
+* [template-comments-plugin](#template-comments-plugin)
 
 You can configure your editor like this:
 ```hbs
@@ -626,6 +627,23 @@ For enabling it, you need to add the card provided by the plugin to the editor s
 <AddressPlugin::Insert @controller={{this.controller}} />
 ```
 
+## template-comments-plugin
+A plugin to insert a template comment anywhere in the document.  
+This is meant as a block of text for extra information to provide to a created template. It has
+the attribute `ext:TemplateComment`. This can (and should) be filtered out when publishing the document, as it is only meant as extra information while filling in a template.  
+It supports basic text with indenting, list items and the marks strong (bold), strikethrough and underline. Italic is not possible as the text is italic by default.
+
+Add it to editor by adding `...templateCommentNodes` to your schema and `templateComment: templateCommentView(controller)` as a nodeview.
+
+Logic to insert a template comment is added with
+```hbs
+<TemplateCommentsPlugin::Insert @controller={{this.controller}}/>
+```
+
+Buttons to remove and move it when selected can be shown with
+```hbs
+<TemplateCommentsPlugin::EditCard @controller={{this.controller}}/>
+```
 ## Contributing
 
 See the [Contributing](CONTRIBUTING.md) guide for details.

package/addon/components/template-comments-plugin/edit-card.hbs

@@ -0,0 +1,50 @@
+{{#if this.isInsideComment}}
+  <AuCard
+    @flex={{true}}
+    @divided={{true}}
+    @expandable={{false}}
+    @shadow={{true}}
+    @size='flush' as |c|
+  >
+    <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='arrow-up'
+            @iconAlignment='left'
+            @skin='link'
+            @alert={{true}}
+            {{on 'click' this.moveUp}}
+          >
+            {{t 'template-comments-plugin.edit.move-up'}}
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon='bin'
+            @iconAlignment='left'
+            @skin='link'
+            @alert={{true}}
+            {{on 'click' this.remove}}
+          >
+            {{t 'template-comments-plugin.edit.remove'}}
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon='arrow-down'
+            @iconAlignment='left'
+            @skin='link'
+            @alert={{true}}
+            {{on 'click' this.moveDown}}
+          >
+            {{t 'template-comments-plugin.edit.move-down'}}
+          </AuButton>
+        </Item>
+      </AuList>
+    </c.content>
+  </AuCard>
+{{/if}}

package/addon/components/template-comments-plugin/edit-card.ts

@@ -0,0 +1,104 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor/addon';
+import { TextSelection } from '@lblod/ember-rdfa-editor';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class TemplateCommentsPluginEditCardComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get commentType() {
+    return this.controller.schema.nodes.templateComment;
+  }
+
+  get templateComment() {
+    const { selection } = this.controller.mainEditorState;
+    return findParentNodeOfType(this.commentType)(selection);
+  }
+
+  get isInsideComment() {
+    return !!this.templateComment;
+  }
+
+  @action
+  remove() {
+    const comment = this.templateComment;
+    if (!comment) return;
+    const { node: node, pos: pos } = comment;
+    this.controller.withTransaction((tr) => {
+      tr.replace(pos, pos + node.nodeSize);
+      return tr;
+    });
+  }
+
+  /* Move the template comment before the node left of this */
+  @action
+  moveUp() {
+    const comment = this.templateComment;
+    if (!comment) return;
+    const { node: node, pos: pos } = comment;
+    const resolvedPos = this.controller.mainEditorState.doc.resolve(pos);
+    const nodeBefore = resolvedPos.nodeBefore;
+    if (!nodeBefore) return;
+    const amountToMove = -nodeBefore.nodeSize;
+    const initialCursorPos =
+      this.controller.mainEditorState.selection.$head.pos;
+    const newPos = pos + amountToMove;
+    const newCursorPos = initialCursorPos + amountToMove;
+    this.controller.withTransaction((tr) => {
+      tr.delete(pos, pos + node.nodeSize);
+      tr.insert(newPos, node);
+      const mappedSelection = TextSelection.create(
+        tr.doc,
+        newCursorPos,
+        newCursorPos,
+      );
+      tr.setSelection(mappedSelection);
+      this.controller.focus();
+      return tr;
+    });
+  }
+
+  /* Move the template comment after the node right of this */
+  @action
+  moveDown() {
+    const comment = this.templateComment;
+    if (!comment) return;
+
+    const { node: commentNode, pos: startPos } = comment;
+    const posAfterComment = startPos + commentNode.nodeSize;
+    const resolvedPos =
+      this.controller.mainEditorState.doc.resolve(posAfterComment);
+    const nodeAfterComment = resolvedPos.nodeAfter;
+    if (!nodeAfterComment) return;
+
+    const amountToMove = commentNode.nodeSize + nodeAfterComment.nodeSize;
+
+    const newPos = startPos + amountToMove;
+    const initialCursorPos =
+      this.controller.mainEditorState.selection.$head.pos;
+    const newCursorPos = initialCursorPos + amountToMove;
+
+    this.controller.withTransaction((tr) => {
+      tr.insert(newPos, commentNode);
+      // do delete after setting the selection,
+      //so the selection position can be easily constructed
+      const mappedSelection = TextSelection.create(
+        tr.doc,
+        newCursorPos,
+        newCursorPos,
+      );
+      tr.setSelection(mappedSelection);
+      tr.delete(startPos, startPos + commentNode.nodeSize);
+
+      this.controller.focus();
+      return tr;
+    });
+  }
+}

package/addon/components/template-comments-plugin/insert.hbs

@@ -0,0 +1,11 @@
+<AuList::Item>
+  <AuButton
+    @icon='add'
+    @iconAlignment='left'
+    @skin='link'
+    @disabled={{not this.canInsert}}
+    {{on 'click' this.doInsert}}
+  >
+    {{t 'template-comments-plugin.insert.title'}}
+  </AuButton>
+</AuList::Item>

package/addon/components/template-comments-plugin/insert.ts

@@ -0,0 +1,81 @@
+import { findParentNode } from '@curvenote/prosemirror-utils';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { Command, SayController } from '@lblod/ember-rdfa-editor';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class TemplateCommentsPluginInsertCardComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+
+  get canInsert() {
+    return this.controller.checkCommand(this.insertCommand());
+  }
+
+  @action
+  doInsert() {
+    this.controller.doCommand(this.insertCommand());
+  }
+
+  /* insert before the first node in the selection
+   * This avoids splitting up existing nodes and follows the logic
+   * that a comment is desired before the place of the cursor
+   */
+  insertCommand(): Command {
+    return (state, dispatch) => {
+      if (!this.controller || this.controller.inEmbeddedView) return false;
+
+      const selection = this.controller.mainEditorState.selection;
+      const parent = findParentNode((node) => {
+        return (
+          node.type !== this.controller.schema.nodes.text &&
+          node.type !== this.controller.schema.nodes.placeholder
+        );
+      })(selection);
+      const newTemplateNode = this.schema.nodes.templateComment.createAndFill();
+      if (!newTemplateNode) return false;
+
+      if (!parent) {
+        // if no parent, selection is somewhere at the top of doc, so insert at start of doc
+        if (dispatch) {
+          const transaction = state.tr
+            .insert(0, newTemplateNode)
+            .scrollIntoView();
+
+          dispatch(transaction);
+          this.controller.focus();
+        }
+        return true;
+      }
+
+      // get the parent of parent
+      // check what content is allowed (contentMatchAt) by using the "index"
+      // check if template comment is allowed as comment.
+      // In principle this should be the same as `CanAppend`, but this seems to work better.
+      const insertPos = parent.pos;
+      const resolvedPos = state.doc.resolve(insertPos);
+      const parentAboveInsertion = resolvedPos.parent;
+      const indexInParent = resolvedPos.index();
+      const allowedContent = parentAboveInsertion.contentMatchAt(indexInParent);
+      const allowed = allowedContent.matchType(newTemplateNode.type);
+      if (!allowed) return false;
+      if (dispatch) {
+        const transaction = state.tr
+          .insert(insertPos, newTemplateNode)
+          .scrollIntoView();
+
+        dispatch(transaction);
+        this.controller.focus();
+      }
+      return true;
+    };
+  }
+}

package/addon/components/template-comments-plugin/template-comment.hbs

@@ -0,0 +1,13 @@
+<AuAlert
+  @size='small'
+  @title={{t 'template-comments-plugin.long-title'}}
+  @skin='info'
+  @icon='circle-info'
+  class='template-comment {{
+    if this.selectionInside 'ProseMirror-selectednode'
+  }} default-cursor'
+>
+  <em class='text-cursor'>
+    {{yield}}
+  </em>
+</AuAlert>

package/addon/components/template-comments-plugin/template-comment.ts

@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { PluginConfig, inputRules } from '@lblod/ember-rdfa-editor';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import {
+  bullet_list_input_rule,
+  ordered_list_input_rule,
+} from '@lblod/ember-rdfa-editor/plugins/list';
+import { baseKeymap } from '@lblod/ember-rdfa-editor/core/keymap';
+
+export default class TemplateCommentsPluginTemplateCommentComponent extends Component<EmberNodeArgs> {
+  get outerView() {
+    return this.args.view;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+
+  get selectionInside() {
+    const { pos: selectPos } = this.controller.mainEditorState.selection.$from;
+    const nodePos = this.args.getPos();
+    const startSelectionInsideNode =
+      nodePos !== undefined &&
+      selectPos > nodePos &&
+      selectPos < nodePos + this.args.node.nodeSize;
+    return startSelectionInsideNode;
+  }
+
+  get keymap() {
+    const keymap = baseKeymap(this.schema);
+    // bind ctrl+i to nothing, so it still gets catched by prosemirror
+    // otherwise the browser will see this as a key pressed, which can be confusing for user.
+    return {
+      ...keymap,
+      'Mod-i': () => true,
+      'Mod-I': () => true,
+    };
+  }
+
+  get plugins(): PluginConfig {
+    return [
+      inputRules({
+        rules: [
+          bullet_list_input_rule(this.schema.nodes.bullet_list),
+          ordered_list_input_rule(this.schema.nodes.ordered_list),
+        ],
+      }),
+    ];
+  }
+}

package/addon/plugins/template-comments-plugin/index.ts

@@ -0,0 +1,5 @@
+export {
+  templateComment,
+  templateCommentView,
+  templateCommentNodes,
+} from './node';

package/addon/plugins/template-comments-plugin/node.ts

@@ -0,0 +1,61 @@
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import {
+  createEmberNodeSpec,
+  createEmberNodeView,
+  EmberNodeConfig,
+} from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { paragraphWithConfig } from '@lblod/ember-rdfa-editor/nodes/paragraphWithConfig';
+
+export const emberNodeConfig: () => EmberNodeConfig = () => {
+  return {
+    name: 'template-comment',
+    componentPath: 'template-comments-plugin/template-comment',
+    inline: false,
+    group: 'block',
+    content: '(templateCommentParagraph | list)+',
+    draggable: false,
+    selectable: true,
+    isolating: true,
+    atom: false,
+    attrs: {},
+    toDOM() {
+      return [
+        'div',
+        {
+          typeof: EXT('TemplateComment').prefixed,
+        },
+        [
+          'i',
+          {},
+          ['h3', {}, 'toelichtingsbepaling'],
+          ['div', { property: EXT('content').prefixed }, 0],
+        ],
+      ];
+    },
+    parseDOM: [
+      {
+        tag: 'div',
+        getAttrs(element: HTMLElement) {
+          if (hasRDFaAttribute(element, 'typeof', EXT('TemplateComment'))) {
+            return {};
+          }
+          return false;
+        },
+        contentElement: `div[property~='${EXT('content').prefixed}'],
+        div[property~='${EXT('content').full}']`,
+      },
+    ],
+  };
+};
+
+export const templateComment = createEmberNodeSpec(emberNodeConfig());
+export const templateCommentView = createEmberNodeView(emberNodeConfig());
+export const templateCommentNodes = {
+  templateComment: templateComment,
+  templateCommentParagraph: paragraphWithConfig({
+    marks: 'strong underline strikethrough',
+    // don't add to any groups, so it is only allowed for template comment
+    group: '',
+  }),
+};

package/app/components/template-comments-plugin/comment-editor.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/comment-editor';

package/app/components/template-comments-plugin/edit-card.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/edit-card';

package/app/components/template-comments-plugin/insert-template-comment.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/insert-template-comment';

package/app/components/template-comments-plugin/insert.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/insert';

package/app/components/template-comments-plugin/template-comment.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/template-comments-plugin/template-comment';

package/app/styles/template-comments-plugin.scss

@@ -0,0 +1,40 @@
+@import "ember-appuniversum";
+
+.template-comment {
+  color: var(--au-blue-900);
+
+  .au-c-alert__content {
+    margin-top: 0;
+
+    ::selection {
+      background-color: var(--au-blue-300);
+    }
+  }
+
+  background-color: var(--au-blue-200);
+
+  .au-c-alert__icon {
+    background-color: var(--au-blue-200);
+  }
+
+  .au-c-alert__message {
+    color: var(--au-gray-900);
+
+    p {
+      white-space: break-spaces;
+      word-wrap: break-word;
+    }
+  }
+
+  &.ProseMirror-selectednode {
+    outline: 2px solid var(--au-blue-500);
+  }
+}
+
+.default-cursor {
+  cursor: default;
+}
+
+.text-cursor {
+  cursor: text;
+}

package/components/template-comments-plugin/edit-card.d.ts

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor/addon';
+type Args = {
+    controller: SayController;
+};
+export default class TemplateCommentsPluginEditCardComponent extends Component<Args> {
+    get controller(): SayController;
+    get commentType(): import("prosemirror-model").NodeType;
+    get templateComment(): {
+        pos: number;
+        start: number;
+        depth: number;
+        node: import("prosemirror-model").Node;
+    } | undefined;
+    get isInsideComment(): boolean;
+    remove(): void;
+    moveUp(): void;
+    moveDown(): void;
+}
+export {};

package/components/template-comments-plugin/insert.d.ts

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { Command, SayController } from '@lblod/ember-rdfa-editor';
+type Args = {
+    controller: SayController;
+};
+export default class TemplateCommentsPluginInsertCardComponent extends Component<Args> {
+    get controller(): SayController;
+    get schema(): import("prosemirror-model").Schema<any, any>;
+    get canInsert(): boolean;
+    doInsert(): void;
+    insertCommand(): Command;
+}
+export {};

package/components/template-comments-plugin/template-comment.d.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { PluginConfig } from '@lblod/ember-rdfa-editor';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+export default class TemplateCommentsPluginTemplateCommentComponent extends Component<EmberNodeArgs> {
+    get outerView(): import("@lblod/ember-rdfa-editor").SayView;
+    get controller(): import("@lblod/ember-rdfa-editor").SayController;
+    get schema(): import("prosemirror-model").Schema<any, any>;
+    get selectionInside(): boolean;
+    get keymap(): {
+        'Mod-i': () => boolean;
+        'Mod-I': () => boolean;
+    };
+    get plugins(): PluginConfig;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -69,7 +69,7 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@lblod/ember-rdfa-editor": "^4.0.0",
+    "@lblod/ember-rdfa-editor": "^4.2.0",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@tsconfig/ember": "^3.0.0",
@@ -148,7 +148,7 @@
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
-    "@lblod/ember-rdfa-editor": "^4.0.0",
+    "@lblod/ember-rdfa-editor": "^4.2.0",
     "ember-concurrency": "^2.3.7"
   },
   "overrides": {

package/plugins/rdfa-date-plugin/nodes/date.d.ts

@@ -1,3 +1,3 @@
 import { DateOptions } from '..';
-export declare const date: (options: DateOptions) => import("prosemirror-model").NodeSpec;
+export declare const date: (options: DateOptions) => import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
 export declare const dateView: (options: DateOptions) => (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

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

@@ -1,5 +1,5 @@
 import { EmberNodeConfig } from '@lblod/ember-rdfa-editor/utils/ember-node';
 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 table_of_contents: (config: TableOfContentsConfig) => import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
 export declare const tableOfContentsView: (config: TableOfContentsConfig) => (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/plugins/template-comments-plugin/index.d.ts

@@ -0,0 +1 @@
+export { templateComment, templateCommentView, templateCommentNodes, } from './node';

package/plugins/template-comments-plugin/node.d.ts

@@ -0,0 +1,8 @@
+import { EmberNodeConfig } from '@lblod/ember-rdfa-editor/utils/ember-node';
+export declare const emberNodeConfig: () => EmberNodeConfig;
+export declare const templateComment: import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
+export declare const templateCommentView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;
+export declare const templateCommentNodes: {
+    templateComment: import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
+    templateCommentParagraph: import("prosemirror-model").NodeSpec;
+};

package/plugins/variable-plugin/nodes.d.ts

@@ -33,5 +33,5 @@ export declare const contentToDom: ({ content, type, node, }: {
 export declare const parseAttributes: (node: HTMLElement) => false | Attrs;
 export declare const attributesToDOM: (node: PNode, content?: string | null) => DOMOutputSpec;
 export declare const emberNodeConfig: EmberNodeConfig;
-export declare const variable: import("prosemirror-model").NodeSpec;
+export declare const variable: import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
 export declare const variableView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/plugins/variable-plugin/number.d.ts

@@ -1,2 +1,2 @@
-export declare const number: import("prosemirror-model").NodeSpec;
+export declare const number: import("@lblod/ember-rdfa-editor/core/say-node-spec").default;
 export declare const numberView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/translations/en-US.yaml

@@ -252,6 +252,15 @@ snippet-plugin:
       error-intro: 'An error occurred while loading results'
       error-outro: In case this problem keeps occurring, please contact
 
+template-comments-plugin:
+  long-title: Template comment or example
+  insert:
+    title: Add template comment or example
+  edit:
+    remove: Remove template comment or example
+    move-up: Move comment up
+    move-down: Move comment down
+
 pagination:
   next: Next page
   previous: Previous page

package/translations/nl-BE.yaml

@@ -256,6 +256,14 @@ snippet-plugin:
       error-intro: "Er is een fout opgetreden tijdens het laden van de resultaten:"
       error-outro: Moest dit probleem aanhouden, neem contact op met
 
+template-comments-plugin:
+  long-title: Toelichtings- of voorbeeldbepaling
+  insert:
+    title: Toelichtings- of voorbeeldbepaling invoegen
+  edit:
+    remove: Verwijder Toelichtings- of voorbeeldbepaling
+    move-down: Toelichtings- of voorbeeldbepaling naar onder
+    move-up: Toelichtings- of voorbeeldbepaling naar boven
 pagination:
   next: Volgende pagina
   previous: Vorige pagina