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

package/CHANGELOG.md

@@ -7,12 +7,18 @@ 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
-
-### Added
 - Addition of a precompile step to woodpecker PR check
+
 ### Fixed
 - fix type error due to bad tsconfig
 ### Changed
@@ -542,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.3.0...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
@@ -558,6 +564,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
+[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

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

@@ -2,19 +2,13 @@ import {
   Command,
   Fragment,
   NodeSelection,
-  NodeType,
-  PNode,
-  Schema,
-  Selection,
   TextSelection,
 } from '@lblod/ember-rdfa-editor';
 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';
-import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { findInsertionRange } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/_private/find-insertion-range';
 
 const insertStructure = (
   structureSpec: StructureSpec,
@@ -28,7 +22,7 @@ const insertStructure = (
     }
     const insertionRange = findInsertionRange({
       doc,
-      selection,
+      $from: selection.$from,
       nodeType: schema.nodes[structureSpec.name],
       schema,
       limitTo: structureSpec.limitTo,
@@ -65,75 +59,4 @@ const insertStructure = (
   };
 };
 
-function findInsertionRange(args: {
-  doc: PNode;
-  selection: Selection;
-  nodeType: NodeType;
-  schema: Schema;
-  limitTo?: string;
-}) {
-  const { doc, selection, nodeType, schema, limitTo } = args;
-  const { $from } = selection;
-  for (let currentDepth = $from.depth; currentDepth >= 0; currentDepth--) {
-    const currentAncestor = $from.node(currentDepth);
-    const index = $from.index(currentDepth);
-    if (currentAncestor.canReplaceWith(index, index, nodeType)) {
-      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 limitContainer = limitTo
-    ? findParentNodeOfType(schema.nodes[limitTo])(selection)
-    : null;
-
-  const limitContainerRange = limitContainer
-    ? {
-        from: limitContainer.pos,
-        to: limitContainer.pos + limitContainer.node.nodeSize,
-      }
-    : { from: 0, to: doc.nodeSize };
-  const filterFunction = ({ from, to }: { from: number; to: number }) => {
-    if (from >= limitContainerRange.from && to <= limitContainerRange.to) {
-      const node = doc.nodeAt(from);
-      if (node) {
-        if (node.canReplaceWith(node.childCount, node.childCount, nodeType)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-  const nextContainerRange =
-    findNodes({
-      doc,
-      start: selection.from,
-      visitParentUpwards: true,
-      reverse: false,
-      filter: filterFunction,
-    }).next().value ??
-    findNodes({
-      doc,
-      start: selection.from,
-      visitParentUpwards: true,
-      reverse: true,
-      filter: filterFunction,
-    }).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;
-}
-
 export default insertStructure;

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

@@ -0,0 +1,45 @@
+import { Command } from '@lblod/ember-rdfa-editor';
+import { findInsertionRange } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/_private/find-insertion-range';
+import { v4 as uuid } from 'uuid';
+
+interface InsertDocumentTitleArgs {
+  placeholder: string;
+}
+export default function insertDocumentTitle({
+  placeholder,
+}: InsertDocumentTitleArgs): Command {
+  return function (state, dispatch) {
+    const { schema } = state;
+    const insertionRange = findInsertionRange({
+      doc: state.doc,
+      $from: state.doc.resolve(0),
+      nodeType: schema.nodes.document_title,
+      schema,
+    });
+    if (!insertionRange) {
+      return false;
+    }
+
+    if (dispatch) {
+      const tr = state.tr;
+      tr.replaceWith(
+        insertionRange.from,
+        insertionRange.to,
+        schema.node(
+          'document_title',
+          { __rdfaId: uuid() },
+          schema.node(
+            'paragraph',
+            null,
+            schema.node('placeholder', {
+              placeholderText: placeholder,
+            })
+          )
+        )
+      );
+      dispatch(tr);
+    }
+
+    return true;
+  };
+}

package/addon/plugins/document-title-plugin/nodes/document-title.ts

@@ -0,0 +1,36 @@
+import { NodeSpec, getRdfaAttrs, rdfaAttrs } from '@lblod/ember-rdfa-editor';
+
+import { ELI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+
+export const document_title: NodeSpec = {
+  content: 'paragraph{1}',
+  inline: false,
+  defining: true,
+  canSplit: false,
+  group: '',
+  attrs: {
+    ...rdfaAttrs,
+    property: {
+      default: 'eli:title',
+    },
+    datatype: {
+      default: 'xsd:string',
+    },
+  },
+  toDOM(node) {
+    return ['h4', node.attrs, 0];
+  },
+  parseDOM: [
+    {
+      tag: 'h1,h2,h3,h4,h5',
+      getAttrs(element: HTMLElement) {
+        if (hasRDFaAttribute(element, 'property', ELI('title'))) {
+          return getRdfaAttrs(element);
+        }
+        return false;
+      },
+    },
+  ],
+};

package/addon/plugins/document-title-plugin/nodes/index.ts

@@ -0,0 +1 @@
+export { document_title } from './document-title';

package/addon/utils/_private/find-insertion-range.ts

@@ -0,0 +1,77 @@
+import { findParentNodeClosestToPos } from '@curvenote/prosemirror-utils';
+import { NodeType, PNode, ResolvedPos, Schema } from '@lblod/ember-rdfa-editor';
+import { containsOnlyPlaceholder } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
+import { findNodes } from '@lblod/ember-rdfa-editor/utils/position-utils';
+
+export function findInsertionRange(args: {
+  doc: PNode;
+  $from: ResolvedPos;
+  nodeType: NodeType;
+  schema: Schema;
+  limitTo?: string;
+}) {
+  const { doc, $from, nodeType, schema, limitTo } = args;
+  for (let currentDepth = $from.depth; currentDepth >= 0; currentDepth--) {
+    const currentAncestor = $from.node(currentDepth);
+    const index = $from.index(currentDepth);
+    if (currentAncestor.canReplaceWith(index, index, nodeType)) {
+      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 limitContainer = limitTo
+    ? findParentNodeClosestToPos(
+        $from,
+        (node) => node.type === schema.nodes[limitTo]
+      )
+    : null;
+
+  const limitContainerRange = limitContainer
+    ? {
+        from: limitContainer.pos,
+        to: limitContainer.pos + limitContainer.node.nodeSize,
+      }
+    : { from: 0, to: doc.nodeSize };
+  const filterFunction = ({ from, to }: { from: number; to: number }) => {
+    if (from >= limitContainerRange.from && to <= limitContainerRange.to) {
+      const node = doc.nodeAt(from);
+      if (node) {
+        if (node.canReplaceWith(node.childCount, node.childCount, nodeType)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  const nextContainerRange =
+    findNodes({
+      doc,
+      start: $from.pos,
+      visitParentUpwards: true,
+      reverse: false,
+      filter: filterFunction,
+    }).next().value ??
+    findNodes({
+      doc,
+      start: $from.pos,
+      visitParentUpwards: true,
+      reverse: true,
+      filter: filterFunction,
+    }).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/app/components/document-title-plugin/insert-title-card.js

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

package/app/styles/document-title-plugin.scss

@@ -0,0 +1,9 @@
+[property='eli:title']:before {
+  content: 'Document-titel' !important;
+}
+
+[lang='en-US'] {
+  [property='eli:title']:before {
+    content: 'Document title' !important;
+  }
+}

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

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+type Args = {
+    controller: SayController;
+};
+export default class InsertTitleCardComponent extends Component<Args> {
+    intl: IntlService;
+    insertTitle(): void;
+    get canInsertTitle(): boolean;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "8.3.0",
+  "version": "8.4.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": "^3.10.0",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@tsconfig/ember": "^1.0.1",

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

@@ -0,0 +1,6 @@
+import { Command } from '@lblod/ember-rdfa-editor';
+interface InsertDocumentTitleArgs {
+    placeholder: string;
+}
+export default function insertDocumentTitle({ placeholder, }: InsertDocumentTitleArgs): Command;
+export {};

package/plugins/document-title-plugin/nodes/document-title.d.ts

@@ -0,0 +1,2 @@
+import { NodeSpec } from '@lblod/ember-rdfa-editor';
+export declare const document_title: NodeSpec;

package/plugins/document-title-plugin/nodes/index.d.ts

@@ -0,0 +1 @@
+export { document_title } from './document-title';

package/translations/en-US.yaml

@@ -179,6 +179,11 @@ date-plugin:
     required: 'This field cannot be empty'
     fractions: 'Fractions of a second, such as S or T, are not supported.'
     unknown: 'Invalid format'
+
+document-title-plugin:
+  document-title-placeholder: Enter document title
+  insert-title: Insert document title
+
 variable:
   number:
     placeholder: number

package/translations/nl-BE.yaml

@@ -184,6 +184,10 @@ date-plugin:
     fractions: "Fracties van seconden, zoals S en T, zijn niet ondersteund."
     unknown: "Ongeldig formaat"
 
+document-title-plugin:
+  document-title-placeholder: Geef document-titel op
+  insert-title: Document-titel invoegen
+
 validation-plugin:
   default-fix-message: Oplossen
 

package/utils/_private/find-insertion-range.d.ts

@@ -0,0 +1,11 @@
+import { NodeType, PNode, ResolvedPos, Schema } from '@lblod/ember-rdfa-editor';
+export declare function findInsertionRange(args: {
+    doc: PNode;
+    $from: ResolvedPos;
+    nodeType: NodeType;
+    schema: Schema;
+    limitTo?: string;
+}): {
+    from: number;
+    to: number;
+} | null;