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

package/addon/plugins/article-structure-plugin/commands/insert-structure.ts

@@ -0,0 +1,80 @@
+import {
+  Command,
+  NodeSelection,
+  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 { findAncestorOfType } from '../utils/structure';
+import wrapStructureContent from './wrap-structure-content';
+import IntlService from 'ember-intl/services/intl';
+
+const insertStructure = (
+  structureSpec: StructureSpec,
+  intl: IntlService
+): Command => {
+  return (state, dispatch) => {
+    const { schema, selection } = state;
+    const contextNodeTypes = structureSpec.context
+      .map((nodeType) => schema.nodes[nodeType])
+      .filter((nodeSpec) => !!nodeSpec);
+    const parent = findAncestorOfType(selection, ...contextNodeTypes);
+    if (!parent) {
+      return false;
+    }
+    const { depth } = parent;
+    const index = selection.$from.index(depth);
+    if (
+      !parent.node.canReplaceWith(
+        index + 1,
+        index + 1,
+        schema.nodes[structureSpec.name]
+      )
+    ) {
+      return wrapStructureContent(structureSpec, parent, intl)(state, dispatch);
+    }
+    if (dispatch) {
+      const { node: newStructureNode, selectionConfig } =
+        structureSpec.constructor({ schema, intl });
+      const transaction = state.tr;
+      let insertRange: { from: number; to: number };
+      if (
+        parent.node.childCount === 1 &&
+        parent.node.firstChild?.type === schema.nodes['paragraph'] &&
+        parent.node.firstChild.firstChild?.type === schema.nodes['placeholder']
+      ) {
+        insertRange = {
+          from: parent.pos + 1,
+          to: parent.pos + parent.node.nodeSize - 1,
+        };
+      } else {
+        insertRange = {
+          from: selection.$from.after(depth + 1),
+          to: selection.$from.after(depth + 1),
+        };
+      }
+
+      transaction.replaceWith(
+        insertRange.from,
+        insertRange.to,
+        newStructureNode
+      );
+      const newSelection =
+        selectionConfig.type === 'node'
+          ? NodeSelection.create(
+              transaction.doc,
+              insertRange.from + selectionConfig.relativePos
+            )
+          : TextSelection.create(
+              transaction.doc,
+              insertRange.from + selectionConfig.relativePos
+            );
+      transaction.setSelection(newSelection);
+      recalculateStructureNumbers(transaction, structureSpec);
+      dispatch(transaction);
+    }
+    return true;
+  };
+};
+
+export default insertStructure;

package/addon/plugins/article-structure-plugin/commands/move-selected-structure.ts

@@ -0,0 +1,130 @@
+import {
+  Command,
+  NodeSelection,
+  NodeType,
+  PNode,
+  Schema,
+  TextSelection,
+} from '@lblod/ember-rdfa-editor';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { ArticleStructurePluginOptions } from '..';
+import { findAncestorOfType } from '../utils/structure';
+import recalculateStructureNumbers from './recalculate-structure-numbers';
+import { findNodes } from '@lblod/ember-rdfa-editor/utils/position-utils';
+import IntlService from 'ember-intl/services/intl';
+const moveSelectedStructure = (
+  options: ArticleStructurePluginOptions,
+  direction: 'up' | 'down',
+  intl: IntlService
+): Command => {
+  return (state, dispatch) => {
+    const { doc, selection, schema } = state;
+    const structureSpecs = options.map((type) => schema.nodes[type.name]);
+    const currentStructure = findAncestorOfType(selection, ...structureSpecs);
+    if (!currentStructure || currentStructure.pos === -1) {
+      return false;
+    }
+    const insertionRange = calculateInsertionRange(
+      doc,
+      currentStructure.pos,
+      currentStructure.node.type,
+      direction,
+      schema
+    );
+    if (insertionRange === null || insertionRange === undefined) {
+      return false;
+    }
+    const isNodeSelection = selection instanceof NodeSelection;
+    const relativeSelectionOffset = selection.from - currentStructure.pos;
+    const currentStructureSpec = unwrap(
+      options.find((spec) => spec.name === currentStructure.node.type.name)
+    );
+    if (dispatch) {
+      const transaction = state.tr;
+      transaction.delete(
+        currentStructure.pos,
+        currentStructure.pos + currentStructure.node.nodeSize
+      );
+      const parent = doc.resolve(currentStructure.pos).parent;
+      if (parent.childCount === 1) {
+        transaction.insert(
+          currentStructure.pos,
+          schema.node(schema.nodes['placeholder'], {
+            placeholderText: intl.t(
+              'article-structure-plugin.placeholder.generic.body'
+            ),
+          })
+        );
+      }
+      const mappedFrom = transaction.mapping.map(insertionRange.from);
+      const mappedTo =
+        insertionRange.from === insertionRange.to
+          ? mappedFrom
+          : transaction.mapping.map(insertionRange.to);
+      transaction.replaceWith(mappedFrom, mappedTo, currentStructure.node);
+      const newSelectionPos = mappedFrom + relativeSelectionOffset;
+      const newSelection = isNodeSelection
+        ? NodeSelection.create(transaction.doc, newSelectionPos)
+        : TextSelection.create(transaction.doc, newSelectionPos);
+      transaction.setSelection(newSelection);
+      recalculateStructureNumbers(transaction, currentStructureSpec);
+      dispatch(transaction);
+    }
+    return true;
+  };
+};
+
+export function calculateInsertionRange(
+  doc: PNode,
+  pos: number, // position of structure we want to move
+  nodeType: NodeType,
+  direction: 'up' | 'down',
+  schema: Schema
+): { from: number; to: number } | null {
+  const resolvedPosition = doc.resolve(pos);
+  const containerNode = resolvedPosition.parent;
+  const index = resolvedPosition.index();
+  if (direction === 'up' && index !== 0) {
+    const position = resolvedPosition.posAtIndex(index - 1);
+    return { from: position, to: position };
+  } else if (direction === 'down' && index !== containerNode.childCount - 1) {
+    // We need to insert after the node below so we do index + 2 instead of index + 1
+    const position = resolvedPosition.posAtIndex(index + 2);
+    return { from: position, to: position };
+  } else {
+    const containerRange = findNodes(
+      doc,
+      pos,
+      true,
+      direction === 'up',
+      ({ from }) => {
+        const node = doc.nodeAt(from);
+        if (node && node !== containerNode) {
+          const indexToTest = direction === 'up' ? node.childCount : 0;
+          if (node.canReplaceWith(indexToTest, indexToTest, nodeType)) {
+            return true;
+          }
+        }
+        return false;
+      }
+    ).next().value;
+    if (containerRange) {
+      const { from, to } = containerRange;
+      const containerNode = doc.nodeAt(from);
+      if (!containerNode) return null;
+      if (
+        containerNode.firstChild?.type === schema.nodes['paragraph'] &&
+        containerNode.firstChild.firstChild?.type ===
+          schema.nodes['placeholder']
+      ) {
+        return { from: from + 1, to: to - 1 };
+      } else {
+        const position = direction === 'up' ? to - 1 : from + 1;
+        return { from: position, to: position };
+      }
+    }
+    return null;
+  }
+}
+
+export default moveSelectedStructure;

package/addon/plugins/article-structure-plugin/commands/recalculate-structure-numbers.ts

@@ -0,0 +1,26 @@
+import { PNode, Transaction } from '@lblod/ember-rdfa-editor';
+import { StructureSpec } from '..';
+
+export default function recalculateStructureNumbers(
+  transaction: Transaction,
+  ...structureSpecs: StructureSpec[]
+) {
+  const doc = transaction.doc;
+  const indices = new Array<number>(structureSpecs.length).fill(1);
+  const contexts: (PNode | null)[] = new Array<PNode | null>(
+    structureSpecs.length
+  ).fill(null);
+  doc.descendants((node, pos, parent) => {
+    structureSpecs.forEach((spec, i) => {
+      if (node.type.name === spec.name) {
+        if (!spec.continuous && !(parent === contexts[i])) {
+          indices[i] = 1;
+          contexts[i] = parent;
+        }
+        spec.updateNumber({ number: indices[i], pos, transaction });
+        indices[i] += 1;
+      }
+    });
+  });
+  return transaction;
+}

package/addon/plugins/article-structure-plugin/commands/remove-structure.ts

@@ -0,0 +1,21 @@
+import { Command, PNode } from '@lblod/ember-rdfa-editor';
+import { ArticleStructurePluginOptions } from '..';
+import recalculateStructureNumbers from './recalculate-structure-numbers';
+
+const removeStructure = (
+  structure: { pos: number; node: PNode },
+  options: ArticleStructurePluginOptions
+): Command => {
+  return (state, dispatch) => {
+    if (dispatch) {
+      const { pos, node } = structure;
+      const transaction = state.tr;
+      transaction.replace(pos, pos + node.nodeSize);
+      recalculateStructureNumbers(transaction, ...options);
+      dispatch(transaction);
+    }
+    return true;
+  };
+};
+
+export default removeStructure;

package/addon/plugins/article-structure-plugin/commands/unwrap-structure.ts

@@ -0,0 +1,40 @@
+import { Command, PNode } from '@lblod/ember-rdfa-editor';
+import {
+  ArticleStructurePluginOptions,
+  StructureSpec,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+import recalculateStructureNumbers from './recalculate-structure-numbers';
+
+const unwrapStructure = (
+  structure: {
+    pos: number;
+    node: PNode;
+    type: StructureSpec;
+  },
+  options: ArticleStructurePluginOptions
+): Command => {
+  return (state, dispatch) => {
+    const { doc } = state;
+    const { pos, node, type } = structure;
+    if (!type.content) {
+      return false;
+    }
+    const contentToUnwrap = type.content({ pos, state });
+
+    const resolvedPos = doc.resolve(pos);
+    const parent = resolvedPos.parent;
+    const index = resolvedPos.index();
+    if (!parent.canReplace(index, index + 1, contentToUnwrap)) {
+      return false;
+    }
+    if (dispatch) {
+      const transaction = state.tr;
+      transaction.replaceWith(pos, pos + node.nodeSize, contentToUnwrap);
+      recalculateStructureNumbers(transaction, ...options);
+      dispatch(transaction);
+    }
+    return true;
+  };
+};
+
+export default unwrapStructure;

package/addon/plugins/article-structure-plugin/commands/wrap-structure-content.ts

@@ -0,0 +1,66 @@
+import {
+  Command,
+  NodeSelection,
+  PNode,
+  TextSelection,
+} from '@lblod/ember-rdfa-editor';
+import { StructureSpec } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
+import IntlService from 'ember-intl/services/intl';
+import recalculateStructureNumbers from './recalculate-structure-numbers';
+
+const wrapStructureContent = (
+  structureSpec: StructureSpec,
+  parent: {
+    node: PNode;
+    pos: number;
+  },
+  intl: IntlService
+): Command => {
+  return (state, dispatch) => {
+    const { schema } = state;
+    const { node, pos } = parent;
+    if (
+      !node.canReplaceWith(0, node.childCount, schema.nodes[structureSpec.name])
+    ) {
+      return false;
+    }
+    const contentToWrap = node?.content;
+    let result: {
+      node: PNode;
+      selectionConfig: {
+        relativePos: number;
+        type: 'node' | 'text';
+      };
+    };
+    try {
+      result = structureSpec.constructor({
+        schema,
+        content: contentToWrap,
+        intl,
+      });
+    } catch (e) {
+      return false;
+    }
+    const { node: wrappingNode, selectionConfig } = result;
+    if (dispatch) {
+      const transaction = state.tr;
+      transaction.replaceWith(pos + 1, pos + node.nodeSize - 1, wrappingNode);
+      const newSelection =
+        selectionConfig.type === 'node'
+          ? NodeSelection.create(
+              transaction.doc,
+              pos + 1 + selectionConfig.relativePos
+            )
+          : TextSelection.create(
+              transaction.doc,
+              pos + 1 + selectionConfig.relativePos
+            );
+      transaction.setSelection(newSelection);
+      recalculateStructureNumbers(transaction, structureSpec);
+      dispatch(transaction);
+    }
+    return true;
+  };
+};
+
+export default wrapStructureContent;

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

@@ -0,0 +1,11 @@
+import { namespace } from './utils/namespace';
+
+export const SAY = namespace('https://say.data.gift/ns/', 'say');
+export const RDF = namespace(
+  'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
+  'rdf'
+);
+
+export const ELI = namespace('http://data.europa.eu/eli/ontology#', 'eli');
+export const XSD = namespace('http://www.w3.org/2001/XMLSchema#', 'xsd');
+export const EXT = namespace('http://mu.semte.ch/vocabularies/ext/', 'ext');

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

@@ -0,0 +1,70 @@
+import {
+  Fragment,
+  PNode,
+  Schema,
+  WidgetSpec,
+  EditorState,
+} from '@lblod/ember-rdfa-editor';
+import IntlService from 'ember-intl/services/intl';
+import { Transaction } from 'prosemirror-state';
+import { STRUCTURE_SPECS } from './structures';
+
+export type SpecName = string;
+
+export type StructureSpec = {
+  name: SpecName;
+  context: SpecName[];
+  translations: {
+    insert: string;
+    move: {
+      up: string;
+      down: string;
+    };
+    remove: string;
+  };
+  constructor: (args: {
+    schema: Schema;
+    number?: number;
+    intl?: IntlService;
+    content?: PNode | Fragment;
+  }) => {
+    node: PNode;
+    selectionConfig: {
+      relativePos: number;
+      type: 'node' | 'text';
+    };
+  };
+  updateNumber: (args: {
+    number: number;
+    pos: number;
+    transaction: Transaction;
+  }) => Transaction;
+  content?: (args: { pos: number; state: EditorState }) => Fragment;
+  continuous: boolean;
+};
+
+export type ArticleStructurePluginOptions = StructureSpec[];
+
+export const articleStructureInsertWidget: (
+  options?: ArticleStructurePluginOptions
+) => WidgetSpec = (options) => {
+  return {
+    componentName: 'article-structure-plugin/article-structure-card',
+    desiredLocation: 'insertSidebar',
+    widgetArgs: {
+      options: options ?? STRUCTURE_SPECS,
+    },
+  };
+};
+
+export const articleStructureContextWidget: (
+  options?: ArticleStructurePluginOptions
+) => WidgetSpec = (options) => {
+  return {
+    componentName: 'article-structure-plugin/structure-card',
+    desiredLocation: 'sidebar',
+    widgetArgs: {
+      options: options ?? STRUCTURE_SPECS,
+    },
+  };
+};

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

@@ -0,0 +1,94 @@
+import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import { StructureSpec } from '..';
+import { v4 as uuid } from 'uuid';
+import { ELI, SAY, XSD } from '../constants';
+import { hasRDFaAttribute } from '../utils/namespace';
+
+const PLACEHOLDERS = {
+  body: 'article-structure-plugin.placeholder.paragraph.body',
+};
+
+export const articleParagraphSpec: StructureSpec = {
+  name: 'article_paragraph',
+  context: ['article_body'],
+  translations: {
+    insert: 'article-structure-plugin.insert.paragraph',
+    move: {
+      up: 'article-structure-plugin.moveUp.paragraph',
+      down: 'article-structure-plugin.moveDown.paragraph',
+    },
+    remove: 'article-structure-plugin.remove.paragraph',
+  },
+  continuous: true,
+  constructor: ({ schema, number, intl }) => {
+    const numberConverted = number?.toString() ?? '1';
+    const node = schema.node(
+      `article_paragraph`,
+      {
+        resource: `http://data.lblod.info/paragraphs/${uuid()}`,
+        number: numberConverted,
+      },
+      schema.node('placeholder', {
+        placeholderText: intl?.t(PLACEHOLDERS.body),
+      })
+    );
+    return { node, selectionConfig: { relativePos: 1, type: 'node' } };
+  },
+  updateNumber: ({ number, pos, transaction }) => {
+    const numberConverted = number.toString();
+    return transaction.setNodeAttribute(pos, 'number', numberConverted);
+  },
+};
+
+export const article_paragraph: NodeSpec = {
+  content: 'text*|placeholder',
+  inline: false,
+  attrs: {
+    resource: {},
+    number: {
+      default: '1',
+    },
+  },
+  toDOM(node) {
+    return [
+      'div',
+      {
+        property: SAY('hasParagraph').prefixed,
+        typeof: SAY('Paragraph').prefixed,
+        resource: node.attrs.resource as string,
+      },
+      '$',
+      [
+        'span',
+        { property: ELI('number').prefixed, datatype: XSD('integer').prefixed },
+        node.attrs.number,
+      ],
+      '. ',
+      ['span', { property: SAY('body').prefixed }, 0],
+    ];
+  },
+  parseDOM: [
+    {
+      tag: 'div',
+      getAttrs(element: HTMLElement) {
+        const numberSpan = element.querySelector(`
+        span[property~='${ELI('number').prefixed}'],
+        span[property~='${ELI('number').full}']`);
+        if (
+          hasRDFaAttribute(element, 'property', SAY('hasParagraph')) &&
+          hasRDFaAttribute(element, 'typeof', SAY('Paragraph')) &&
+          element.getAttribute('resource') &&
+          numberSpan
+        ) {
+          return {
+            resource: element.getAttribute('resource'),
+            number: numberSpan.textContent,
+          };
+        }
+        return false;
+      },
+      contentElement: `span[property~='${SAY('body').prefixed}'],
+                       span[property~='${SAY('body').full}']`,
+    },
+  ],
+};

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

@@ -0,0 +1,129 @@
+import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import { StructureSpec } from '..';
+import {
+  constructStructureBodyNodeSpec,
+  constructStructureNodeSpec,
+  getStructureHeaderAttrs,
+} from '../utils/structure';
+import { v4 as uuid } from 'uuid';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { ELI, EXT, SAY, XSD } from '../constants';
+
+const PLACEHOLDERS = {
+  title: 'article-structure-plugin.placeholder.article.heading',
+  body: 'article-structure-plugin.placeholder.article.body',
+};
+export const articleSpec: StructureSpec = {
+  name: 'article',
+  context: ['title_body', 'chapter_body', 'section_body', 'subsection_body'],
+  translations: {
+    insert: 'article-structure-plugin.insert.article',
+    move: {
+      up: 'article-structure-plugin.moveUp.article',
+      down: 'article-structure-plugin.moveDown.article',
+    },
+    remove: 'article-structure-plugin.remove.article',
+  },
+  continuous: true,
+  constructor: ({ schema, number, content, intl }) => {
+    const numberConverted = number?.toString() ?? '1';
+    const node = schema.node(
+      `article`,
+      { resource: `http://data.lblod.info/articles/${uuid()}` },
+      [
+        schema.node(
+          'article_header',
+          { level: 4, number: numberConverted },
+          schema.node('placeholder', {
+            placeholderText: intl?.t(PLACEHOLDERS.title),
+          })
+        ),
+        schema.node(
+          `article_body`,
+          {},
+          content ??
+            schema.node(
+              'paragraph',
+              {},
+              schema.node('placeholder', {
+                placeholderText: intl?.t(PLACEHOLDERS.body),
+              })
+            )
+        ),
+      ]
+    );
+    const selectionConfig: {
+      relativePos: number;
+      type: 'text' | 'node';
+    } = content
+      ? { relativePos: 5, type: 'text' }
+      : { relativePos: 6, type: 'node' };
+    return {
+      node,
+      selectionConfig,
+    };
+  },
+  updateNumber: ({ number, pos, transaction }) => {
+    const numberConverted = number.toString();
+    return transaction.setNodeAttribute(pos + 1, 'number', numberConverted);
+  },
+  content: ({ pos, state }) => {
+    const node = unwrap(state.doc.nodeAt(pos));
+    return node.child(1).content;
+  },
+};
+
+export const article = constructStructureNodeSpec({
+  type: SAY('Article'),
+  content: 'article_header article_body',
+});
+
+export const article_header: NodeSpec = {
+  content: 'text*|placeholder',
+  inline: false,
+  attrs: {
+    number: {
+      default: '1',
+    },
+    property: {
+      default: SAY('heading').prefixed,
+    },
+  },
+  toDOM(node) {
+    return [
+      'div',
+      { property: node.attrs.property as string },
+      'Artikel ',
+      [
+        'span',
+        { property: ELI('number').prefixed, datatype: XSD('string').prefixed },
+        node.attrs.number,
+      ],
+      ': ',
+      [
+        '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}']`,
+    },
+  ],
+};
+
+export const article_body = constructStructureBodyNodeSpec({
+  content: '(paragraph|article_paragraph)+',
+});