@lblod/ember-rdfa-editor-lblod-plugins 16.3.0 → 17.0.0-dev.f473cdfb5868261b49cdae52ea2558970c082d01

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

@@ -1,22 +1,28 @@
-import { Fragment, NodeSpec } from '@lblod/ember-rdfa-editor';
+import { Fragment, NodeSpec, RdfaAttrs } from '@lblod/ember-rdfa-editor';
+import {
+  hasRdfaContentChild,
+  getRdfaAttrs,
+  rdfaAttrSpec,
+  renderRdfaAware,
+  getRdfaContentElement,
+} from '@lblod/ember-rdfa-editor/core/schema';
 import { StructureSpec } from '..';
 import { v4 as uuid } from 'uuid';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import {
   ELI,
+  RDF,
   SAY,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 import {
-  getNumberAttributeFromElement,
-  getNumberAttributesFromNode,
-  getNumberDocSpecFromNode,
+  hasOutgoingNamedNodeTriple,
+  hasRDFaAttribute,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+const rdfaAware = true;
+import {
+  constructStructureBodyNodeSpec,
   getNumberUtils,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
-
-const PLACEHOLDERS = {
-  body: 'article-structure-plugin.placeholder.paragraph.body',
-};
+} from '../utils/structure';
 
 export const articleParagraphSpec: StructureSpec = {
   name: 'article_paragraph',
@@ -31,106 +37,210 @@ export const articleParagraphSpec: StructureSpec = {
   },
   continuous: false,
   noUnwrap: true,
-  constructor: ({ schema, number, intl, state }) => {
-    const translationWithDocLang = getTranslationFunction(state);
-    const node = schema.node(
-      `article_paragraph`,
-      {
-        resource: `http://data.lblod.info/paragraphs/${uuid()}`,
-        number,
-      },
+  relationshipPredicate: SAY('hasParagraph'),
+  constructor: ({ schema, number }) => {
+    const numberConverted = number?.toString() ?? '1';
+    const paragraphRdfaId = uuid();
+    const numberRdfaId = uuid();
+    const bodyRdfaId = uuid();
+    const subject = `http://data.lblod.info/paragraphs/${paragraphRdfaId}`;
+    const paragraphAttrs: RdfaAttrs = {
+      __rdfaId: paragraphRdfaId,
+      rdfaNodeType: 'resource',
+      subject,
+      properties: [
+        {
+          predicate: ELI('number').prefixed,
+          object: sayDataFactory.literalNode(numberRdfaId),
+        },
+        {
+          predicate: SAY('body').prefixed,
+          object: sayDataFactory.literalNode(bodyRdfaId),
+        },
+      ],
+      backlinks: [],
+    };
+    const numberAttrs: RdfaAttrs = {
+      __rdfaId: numberRdfaId,
+      rdfaNodeType: 'literal',
+      backlinks: [
+        {
+          predicate: ELI('number').prefixed,
+          subject: sayDataFactory.literalNode(subject),
+        },
+      ],
+    };
+    const bodyAttrs: RdfaAttrs = {
+      __rdfaId: bodyRdfaId,
+      rdfaNodeType: 'literal',
+      backlinks: [
+        {
+          predicate: SAY('body').prefixed,
+          subject: sayDataFactory.literalNode(subject),
+        },
+      ],
+    };
+    const node = schema.node(`article_paragraph`, paragraphAttrs, [
+      schema.node('article_paragraph_number', {}, [
+        schema.text('§'),
+        schema.node(
+          'structure_header_number',
+          numberAttrs,
+          schema.text(numberConverted),
+        ),
+        schema.text('. '),
+      ]),
       schema.node(
-        'paragraph',
-        {},
-        schema.node('placeholder', {
-          placeholderText: translationWithDocLang(
-            PLACEHOLDERS.body,
-            intl?.t(PLACEHOLDERS.body) || '',
-          ),
-        }),
+        'article_paragraph_body',
+        bodyAttrs,
+        schema.node('paragraph', {}),
       ),
-    );
-    return { node, selectionConfig: { relativePos: 1, type: 'node' } };
+    ]);
+    return {
+      node,
+      selectionConfig: { rdfaId: bodyRdfaId, type: 'text' },
+      newResource: subject,
+    };
   },
-  ...getNumberUtils(),
+  ...getNumberUtils({
+    offset: 0,
+    convertNumber: (number) => number.toString(),
+  }),
 };
 
-const contentSelector = `span[property~='${SAY('body').prefixed}'],
-                         span[property~='${SAY('body').full}']`;
+export const article_paragraph_body = constructStructureBodyNodeSpec({
+  tag: 'span',
+  content: 'block+',
+  context: 'article_paragraph/',
+});
+
+export const article_paragraph_number: NodeSpec = {
+  content: 'text* structure_header_number text*',
+  inline: false,
+  editable: false,
+  toDOM(node) {
+    return ['span', { class: 'article-paragraph-number', ...node.attrs }, 0];
+  },
+  parseDOM: [
+    {
+      tag: 'span',
+      context: 'article_paragraph/',
+      getAttrs(element: HTMLElement) {
+        if (element.querySelector(`[property~="${ELI('number').prefixed}"]`)) {
+          return {};
+        }
+        return false;
+      },
+    },
+  ],
+};
 
 export const article_paragraph: NodeSpec = {
-  content: 'block*',
+  content: 'article_paragraph_number article_paragraph_body',
   inline: false,
   isolating: true,
+  editable: true,
   defining: true,
   attrs: {
+    ...rdfaAttrSpec({ rdfaAware }),
     typeof: {
       default: SAY('Paragraph').prefixed,
     },
-    property: {
-      default: SAY('hasParagraph').prefixed,
-    },
-    resource: {},
     number: {
       default: 1,
     },
     numberDisplayStyle: {
-      default: 'decimal', // decimal, roman
+      default: 'decimal',
     },
     startNumber: {
       default: null,
     },
   },
   toDOM(node) {
-    return [
-      'div',
-      {
-        property: node.attrs.property as string,
-        typeof: node.attrs.typeof as string,
-        resource: node.attrs.resource as string,
-        ...getNumberAttributesFromNode(node),
+    return renderRdfaAware({
+      renderable: node,
+      tag: 'div',
+      contentContainerTag: 'span',
+      rdfaContainerTag: 'span',
+      attrs: {
+        ...node.attrs,
+        class: 'say-editable',
       },
-      ['span', { contenteditable: false }, '§'],
-      getNumberDocSpecFromNode(node),
-      ['span', { contenteditable: false }, '. '],
-      ['span', { property: SAY('body').prefixed }, 0],
-    ];
+      content: 0,
+    });
   },
   parseDOM: [
     {
       tag: 'div',
+      context: 'article/article_body/',
       getAttrs(element: HTMLElement) {
-        const numberSpan = element.querySelector(`
-        span[property~='${ELI('number').prefixed}'],
-        span[property~='${ELI('number').full}']`);
+        const rdfaAttrs = getRdfaAttrs(element, { rdfaAware });
         if (
-          hasRDFaAttribute(element, 'property', SAY('hasParagraph')) &&
-          hasRDFaAttribute(element, 'typeof', SAY('Paragraph')) &&
-          element.getAttribute('resource') &&
-          element.querySelector(contentSelector) &&
-          numberSpan
+          hasOutgoingNamedNodeTriple(
+            rdfaAttrs,
+            RDF('type'),
+            SAY('Paragraph'),
+          ) &&
+          hasRdfaContentChild(element)
         ) {
-          const numberAttributes = getNumberAttributeFromElement(
-            element,
-            numberSpan,
-          );
-
-          return {
-            resource: element.getAttribute('resource'),
-            ...numberAttributes,
-          };
+          return rdfaAttrs;
+        }
+        return false;
+      },
+      contentElement: getRdfaContentElement,
+    },
+    // Older structures (without an explicit 'content' element) don't have a separate element
+    // around the paragraph number, so we manually create that to use as a content element
+    {
+      tag: 'div',
+      context: 'article/article_body/',
+      getAttrs(element: HTMLElement) {
+        const rdfaAttrs = getRdfaAttrs(element, { rdfaAware });
+        if (
+          hasOutgoingNamedNodeTriple(rdfaAttrs, RDF('type'), SAY('Paragraph'))
+        ) {
+          return rdfaAttrs;
         }
         return false;
       },
-      contentElement: contentSelector,
+      contentElement(node) {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+          throw new Error('content element is not an element');
+        }
+        let contentElem = node as HTMLElement;
+        if (
+          contentElem.lastElementChild &&
+          hasRDFaAttribute(
+            contentElem.lastElementChild,
+            'property',
+            SAY('body'),
+          )
+        ) {
+          const bodyElem = contentElem.lastElementChild;
+          const headingSpan = document.createElement('span');
+          const children = [...contentElem.childNodes];
+          // Just in case there's a non-element child after the body
+          let child: Node | undefined;
+          do {
+            child = children.pop();
+          } while (child && child.nodeType !== Node.ELEMENT_NODE);
+          headingSpan.replaceChildren(...children);
+
+          contentElem = document.createElement('div');
+          contentElem.replaceChildren(headingSpan, bodyElem);
+        }
+
+        return contentElem;
+      },
     },
     // Parsing rule for backwards compatibility (when content was not inside seperate say:body div)
     {
       tag: 'div',
+      context: 'article/article_body/',
       getAttrs(element: HTMLElement) {
         const numberSpan = element.querySelector(`
-        span[property~='${ELI('number').prefixed}'],
-        span[property~='${ELI('number').full}']`);
+          span[property~='${ELI('number').prefixed}'],
+          span[property~='${ELI('number').full}']`);
         if (
           hasRDFaAttribute(element, 'property', SAY('hasParagraph')) &&
           hasRDFaAttribute(element, 'typeof', SAY('Paragraph')) &&
@@ -138,7 +248,7 @@ export const article_paragraph: NodeSpec = {
           numberSpan
         ) {
           return {
-            resource: element.getAttribute('resource'),
+            subject: element.getAttribute('resource'),
             number: numberSpan.textContent,
           };
         }

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

@@ -1,15 +1,16 @@
-import { NodeSpec, PNode } from '@lblod/ember-rdfa-editor';
+import { PNode, RdfaAttrs } from '@lblod/ember-rdfa-editor';
 import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
   constructStructureNodeSpec,
-  getNumberDocSpecFromNode,
-  getNumberAttributesFromNode,
+  constructStructureHeaderNodeSpec,
   getNumberUtils,
-  getStructureHeaderAttrs,
 } from '../utils/structure';
+import { constructStructureHeader } from './structure-header';
 import { v4 as uuid } from 'uuid';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import {
+  ELI,
   EXT,
   SAY,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -33,50 +34,93 @@ export const articleSpec: StructureSpec = {
   },
   continuous: true,
   constructor: ({ schema, number, content, intl, state }) => {
+    const numberConverted = number?.toString() ?? '1';
     const translationWithDocLang = getTranslationFunction(state);
-    const node = schema.node(
-      `article`,
-      { resource: `http://data.lblod.info/articles/${uuid()}` },
-      [
-        schema.node(
-          'article_header',
-          { level: 4, number: number ?? 1 },
-          schema.node('placeholder', {
-            placeholderText: translationWithDocLang(
-              PLACEHOLDERS.title,
-              intl?.t(PLACEHOLDERS.title) || '',
-            ),
-          }),
-        ),
-        schema.node(
-          `article_body`,
-          {},
-          content ??
-            schema.node(
-              'paragraph',
-              {},
-              schema.node('placeholder', {
-                placeholderText: translationWithDocLang(
-                  PLACEHOLDERS.body,
-                  intl?.t(PLACEHOLDERS.body) || '',
-                ),
-              }),
-            ),
-        ),
-      ],
+    const articleUuid = uuid();
+    const titleRdfaId = uuid();
+    const headingRdfaId = uuid();
+    const numberRdfaId = uuid();
+    const bodyRdfaId = uuid();
+    const subject = `http://data.lblod.info/articles/${articleUuid}`;
+    const titleText = translationWithDocLang(
+      PLACEHOLDERS.title,
+      intl?.t(PLACEHOLDERS.title) || '',
     );
-    const selectionConfig: {
-      relativePos: number;
-      type: 'text' | 'node';
-    } = content
-      ? { relativePos: 5, type: 'text' }
-      : { relativePos: 6, type: 'node' };
+    const articleAttrs: RdfaAttrs = {
+      __rdfaId: articleUuid,
+      rdfaNodeType: 'resource',
+      subject,
+      properties: [
+        {
+          predicate: ELI('number').prefixed,
+          object: sayDataFactory.literalNode(numberRdfaId),
+        },
+        {
+          predicate: SAY('heading').prefixed,
+          object: sayDataFactory.literalNode(headingRdfaId),
+        },
+        {
+          predicate: EXT('title').prefixed,
+          object: sayDataFactory.literalNode(titleRdfaId),
+        },
+        {
+          predicate: SAY('body').prefixed,
+          object: sayDataFactory.literalNode(bodyRdfaId),
+        },
+      ],
+      backlinks: [],
+    };
+    const bodyAttrs: RdfaAttrs = {
+      __rdfaId: bodyRdfaId,
+      rdfaNodeType: 'literal',
+      backlinks: [
+        {
+          subject: sayDataFactory.literalNode(subject),
+          predicate: SAY('body').prefixed,
+        },
+      ],
+    };
+    const node = schema.node(`article`, articleAttrs, [
+      constructStructureHeader({
+        schema,
+        backlinkResource: subject,
+        titleRdfaId,
+        titleText,
+        headingRdfaId,
+        numberRdfaId,
+        number: numberConverted,
+        headerType: 'article_header',
+      }),
+      schema.node(
+        `article_body`,
+        bodyAttrs,
+        content ??
+          schema.node(
+            'paragraph',
+            {},
+            schema.node('placeholder', {
+              placeholderText: translationWithDocLang(
+                PLACEHOLDERS.body,
+                intl?.t(PLACEHOLDERS.body) || '',
+              ),
+            }),
+          ),
+      ),
+    ]);
+
     return {
       node,
-      selectionConfig,
+      selectionConfig: {
+        type: content ? 'text' : 'node',
+        rdfaId: bodyRdfaId,
+      },
+      newResource: subject,
     };
   },
-  ...getNumberUtils(1),
+  ...getNumberUtils({
+    offset: 1,
+    convertNumber: (number) => number.toString(),
+  }),
   content: ({ pos, state }) => {
     const node = unwrap(state.doc.nodeAt(pos));
     return node.child(1).content;
@@ -88,67 +132,16 @@ export const article = constructStructureNodeSpec({
   content: 'article_header article_body',
 });
 
-export const article_header: NodeSpec = {
-  content: 'text*|placeholder',
-  inline: false,
-  isolating: true,
-  defining: true,
-  attrs: {
-    number: {
-      default: 1,
-    },
-    numberDisplayStyle: {
-      default: 'decimal', // decimal, roman
-    },
-    startNumber: {
-      default: null,
-    },
-    property: {
-      default: SAY('heading').prefixed,
-    },
-  },
-  allowSplitByTable: false,
+export const article_header = constructStructureHeaderNodeSpec({
+  type: 'article_header',
+  includeLevel: false,
   outlineText: (node: PNode) => {
     const { number } = node.attrs;
     return `Artikel ${number as string}: ${node.textContent}`;
   },
-  toDOM(node) {
-    return [
-      'div',
-      {
-        property: node.attrs.property as string,
-        ...getNumberAttributesFromNode(node),
-      },
-      'Artikel ',
-      getNumberDocSpecFromNode(node),
-      ['span', { contenteditable: false }, ': '],
-      [
-        'span',
-        {
-          property: EXT('title').prefixed,
-        },
-        0,
-      ],
-    ];
-  },
-  parseDOM: [
-    {
-      tag: 'div',
-      getAttrs(element: HTMLElement) {
-        const headerAttrs = getStructureHeaderAttrs(element);
-
-        if (headerAttrs) {
-          return headerAttrs;
-        }
-
-        return false;
-      },
-      contentElement: `span[property~='${EXT('title').prefixed}'],
-                       span[property~='${EXT('title').full}']`,
-    },
-  ],
-};
+});
 
 export const article_body = constructStructureBodyNodeSpec({
   content: '(block|article_paragraph)+',
+  context: 'article//',
 });