@lblod/ember-rdfa-editor-lblod-plugins 1.0.0-beta.1 → 1.0.0-beta.2

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

@@ -6,7 +6,7 @@ import {
   EditorState,
 } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
-import { Transaction } from 'prosemirror-state';
+import { Transaction } from '@lblod/ember-rdfa-editor';
 import { STRUCTURE_SPECS } from './structures';
 
 export type SpecName = string;

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

@@ -117,8 +117,12 @@ export const article_paragraph: NodeSpec = {
         return false;
       },
       getContent: (node, schema) => {
-        const content = node.lastChild?.textContent ?? '';
-        return Fragment.from(schema.text(content));
+        const content = node.lastChild?.textContent;
+        if (content) {
+          return Fragment.from(schema.text(content));
+        } else {
+          return Fragment.empty;
+        }
       },
     },
   ],

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

@@ -134,5 +134,5 @@ export const article_header: NodeSpec = {
 };
 
 export const article_body = constructStructureBodyNodeSpec({
-  content: '(paragraph|article_paragraph)+',
+  content: '(block|article_paragraph)+',
 });

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

@@ -74,9 +74,8 @@ export const chapterSpec: StructureSpec = {
 export const chapter = constructStructureNodeSpec({
   type: SAY('Chapter'),
   content: 'structure_header chapter_body',
-  group: 'block',
 });
 
 export const chapter_body = constructStructureBodyNodeSpec({
-  content: '(section|paragraph)+|(article|paragraph)+',
+  content: '(section|block)+|(article|block)+',
 });

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

@@ -77,5 +77,5 @@ export const section = constructStructureNodeSpec({
 });
 
 export const section_body = constructStructureBodyNodeSpec({
-  content: '(subsection|paragraph)+|(article|paragraph)+',
+  content: '(subsection|block)+|(article|block)+',
 });

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

@@ -78,5 +78,5 @@ export const subsection = constructStructureNodeSpec({
 });
 
 export const subsection_body = constructStructureBodyNodeSpec({
-  content: '(article|paragraph)+',
+  content: '(article|block)+',
 });

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

@@ -74,9 +74,8 @@ export const titleSpec: StructureSpec = {
 export const title = constructStructureNodeSpec({
   type: SAY('Title'),
   content: 'structure_header title_body',
-  group: 'block',
 });
 
 export const title_body = constructStructureBodyNodeSpec({
-  content: '(chapter|paragraph)+|(article|paragraph)+',
+  content: '(chapter|block)+|(article|block)+',
 });

package/addon/plugins/citation-plugin/index.ts

@@ -5,20 +5,17 @@ import {
   EditorStateConfig,
   InlineDecorationSpec,
   MarkSpec,
+  NodeType,
   PNode,
   ProsePlugin,
   Schema,
   WidgetSpec,
 } from '@lblod/ember-rdfa-editor';
-import {
-  datastoreKey,
-  ProseStore,
-} from '@lblod/ember-rdfa-editor/plugins/datastore';
 import processMatch, {
   RegexpMatchArrayWithIndices,
 } from './utils/process-match';
-import { expect } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { citation } from './marks/citation';
+import { changedDescendants } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/changed-descendants';
 
 const BASIC_MULTIPLANE_CHARACTER = '\u0021-\uFFFF'; // most of the characters used around the world
 
@@ -60,54 +57,6 @@ export interface CitationDecoration extends Decoration {
   spec: CitationDecorationSpec;
 }
 
-function calculateDecorations(
-  schema: CitationSchema,
-  doc: PNode,
-  activeRanges: [number, number][]
-) {
-  const decorations: Decoration[] = [];
-
-  for (const [start, end] of activeRanges) {
-    doc.nodesBetween(start, end, (node: PNode, pos: number): boolean => {
-      if (
-        node.isText &&
-        node.text &&
-        !schema.marks.citation.isInSet(node.marks)
-      ) {
-        for (const match of node.text.matchAll(CITATION_REGEX)) {
-          const processedMatch = processMatch(
-            match as RegexpMatchArrayWithIndices
-          );
-
-          if (processedMatch) {
-            const { text, legislationTypeUri, searchTextMatch } =
-              processedMatch;
-            const { start: matchStart, end: matchEnd } = searchTextMatch;
-            const decorationStart = pos + matchStart;
-            const decorationEnd = pos + matchEnd;
-            decorations.push(
-              Decoration.inline(
-                decorationStart,
-                decorationEnd,
-
-                {
-                  'data-editor-highlight': 'true',
-                },
-                {
-                  searchText: text,
-                  legislationTypeUri,
-                }
-              )
-            );
-          }
-        }
-      }
-      return true;
-    });
-  }
-  return DecorationSet.create(doc, decorations);
-}
-
 interface CitationPluginState {
   highlights: DecorationSet;
   activeRanges: [number, number][];
@@ -115,63 +64,6 @@ interface CitationPluginState {
 
 export type CitationPlugin = ProsePlugin<CitationPluginState>;
 
-function citationPlugin({
-  activeIn = defaultActiveIn,
-}: CitationPluginConfig): CitationPlugin {
-  const citation: CitationPlugin = new ProsePlugin({
-    state: {
-      init(stateConfig: EditorStateConfig, state: EditorState) {
-        const { doc, schema } = state;
-        const activeRanges = activeIn(
-          state,
-          expect(
-            'the datastore plugin is required for this plugin',
-            datastoreKey.getState(state)
-          )()
-        );
-        return {
-          highlights: calculateDecorations(schema, doc, activeRanges),
-          activeRanges,
-        };
-      },
-      apply(tr, set, oldState, newState) {
-        const { doc, schema } = newState;
-        const activeRanges = activeIn(
-          newState,
-          expect(
-            'the datastore plugin is required for this plugin',
-            datastoreKey.getState(newState)
-          )()
-        );
-        return {
-          highlights: calculateDecorations(schema, doc, activeRanges),
-          activeRanges,
-        };
-      },
-    },
-    props: {
-      decorations(state): DecorationSet | undefined {
-        return citation.getState(state)?.highlights;
-      },
-    },
-  });
-  return citation;
-}
-
-function defaultActiveIn(
-  state: EditorState,
-  datastore: ProseStore
-): [number, number][] {
-  const result: [number, number][] = [];
-  for (const { from, to } of datastore
-    .match(null, 'besluit:motivering')
-    .asPredicateNodeMapping()
-    .nodes()) {
-    result.push([from, to]);
-  }
-  return result;
-}
-
 export interface CitationPluginBundle {
   plugin: ProsePlugin<CitationPluginState>;
   widgets: {
@@ -183,12 +75,31 @@ export interface CitationPluginBundle {
   };
 }
 
-export interface CitationPluginConfig {
-  activeIn?(state: EditorState, datastore: ProseStore): [number, number][];
+export interface CitationPluginNodeConfig {
+  type: 'nodes';
+  regex?: RegExp;
+
+  activeInNodeTypes(schema: Schema, state: EditorState): Set<NodeType>;
+}
+
+export interface CitationPluginRangeConfig {
+  type: 'ranges';
+  regex?: RegExp;
+
+  activeInRanges(state: EditorState): [number, number][];
 }
 
+export type CitationPluginConfig =
+  | CitationPluginNodeConfig
+  | CitationPluginRangeConfig;
+
 export function setupCitationPlugin(
-  config: CitationPluginConfig = {}
+  config: CitationPluginConfig = {
+    type: 'nodes',
+    activeInNodeTypes(schema): Set<NodeType> {
+      return new Set([schema.nodes.doc]);
+    },
+  }
 ): CitationPluginBundle {
   const plugin = citationPlugin(config);
   return {
@@ -214,3 +125,163 @@ export function setupCitationPlugin(
     },
   };
 }
+
+function citationPlugin(config: CitationPluginConfig): CitationPlugin {
+  const citation: CitationPlugin = new ProsePlugin({
+    state: {
+      init(stateConfig: EditorStateConfig, state: EditorState) {
+        return calculateCitationPluginState(state, config);
+      },
+      apply(tr, set, oldState, newState) {
+        return calculateCitationPluginState(newState, config, oldState);
+      },
+    },
+    props: {
+      decorations(state): DecorationSet | undefined {
+        return citation.getState(state)?.highlights;
+      },
+    },
+  });
+  return citation;
+}
+
+function calculateCitationPluginState(
+  state: EditorState,
+  config: CitationPluginConfig,
+  oldState?: EditorState
+) {
+  const { doc, schema } = state;
+  let activeRanges;
+  let highlights;
+  if (config.type === 'ranges') {
+    activeRanges = config.activeInRanges(state);
+    const calculatedDecs = calculateDecorationsInRanges(
+      config,
+      schema,
+      doc,
+      activeRanges
+    );
+    highlights = calculatedDecs.decorations;
+  } else {
+    const nodes = config.activeInNodeTypes(schema, state);
+    const calculatedDecs = calculateDecorationsInNodes(
+      config,
+      schema,
+      nodes,
+      doc,
+      oldState?.doc
+    );
+    activeRanges = calculatedDecs.activeRanges;
+    highlights = calculatedDecs.decorations;
+  }
+  return {
+    highlights,
+    activeRanges,
+  };
+}
+
+function calculateDecorationsInNodes(
+  config: CitationPluginConfig,
+  schema: CitationSchema,
+  nodes: Set<NodeType>,
+  newDoc: PNode,
+  oldDoc?: PNode
+): { decorations: DecorationSet; activeRanges: [number, number][] } {
+  const activeRanges: [number, number][] = [];
+  const decorations: Decoration[] = [];
+  const collector = collectDecorations(decorations, schema, config.regex);
+  if (nodes.has(newDoc.type)) {
+    oldDoc
+      ? changedDescendants(oldDoc, newDoc, 0, collector)
+      : newDoc.descendants(collector);
+    activeRanges.push([0, newDoc.nodeSize]);
+  } else {
+    oldDoc
+      ? changedDescendants(
+          oldDoc,
+          newDoc,
+          0,
+
+          (node, pos) => {
+            if (nodes.has(node.type)) {
+              node.nodesBetween(0, node.nodeSize - 2, collector, pos + 1);
+              activeRanges.push([pos, pos + node.nodeSize]);
+              return false;
+            }
+            return true;
+          }
+        )
+      : newDoc.descendants((node, pos) => {
+          if (nodes.has(node.type)) {
+            node.nodesBetween(0, node.nodeSize - 2, collector, pos + 1);
+            activeRanges.push([pos, pos + node.nodeSize]);
+            return false;
+          }
+          return true;
+        });
+  }
+  return {
+    decorations: DecorationSet.create(newDoc, decorations),
+    activeRanges,
+  };
+}
+
+function calculateDecorationsInRanges(
+  config: CitationPluginConfig,
+  schema: CitationSchema,
+  doc: PNode,
+  activeRanges: [number, number][]
+): { decorations: DecorationSet; activeRanges: [number, number][] } {
+  const decorations: Decoration[] = [];
+  const collector = collectDecorations(decorations, schema, config.regex);
+
+  for (const [start, end] of activeRanges) {
+    doc.nodesBetween(start, end, collector);
+  }
+  return {
+    decorations: DecorationSet.create(doc, decorations),
+    activeRanges: activeRanges,
+  };
+}
+
+function collectDecorations(
+  decorations: Decoration[],
+  schema: CitationSchema,
+  regex: RegExp = CITATION_REGEX
+) {
+  return function (node: PNode, pos: number): boolean {
+    if (
+      node.isText &&
+      node.text &&
+      !schema.marks.citation.isInSet(node.marks)
+    ) {
+      for (const match of node.text.matchAll(regex)) {
+        const processedMatch = processMatch(
+          match as RegexpMatchArrayWithIndices
+        );
+
+        if (processedMatch) {
+          const { text, legislationTypeUri, searchTextMatch } = processedMatch;
+          const { start: matchStart, end: matchEnd } = searchTextMatch;
+          const decorationStart = pos + matchStart;
+          const decorationEnd = pos + matchEnd;
+          decorations.push(
+            Decoration.inline(
+              decorationStart,
+              decorationEnd,
+
+              {
+                'data-editor-highlight': 'true',
+              },
+              {
+                searchText: text,
+                legislationTypeUri,
+              }
+            )
+          );
+        }
+      }
+    }
+    return true;
+  };
+}

package/addon/plugins/rdfa-date-plugin/index.ts

@@ -1,11 +1,50 @@
 import { WidgetSpec } from '@lblod/ember-rdfa-editor';
 
-export const rdfaDateCardWidget: WidgetSpec = {
-  componentName: 'rdfa-date-plugin/card',
-  desiredLocation: 'sidebar',
+export const defaultDateFormats: DateFormat[] = [
+  {
+    label: 'Short small Date',
+    key: 'short',
+    dateFormat: 'dd/MM/yy',
+    dateTimeFormat: 'dd/MM/yy HH:mm',
+  },
+  {
+    label: 'Long Date',
+    key: 'long',
+    dateFormat: 'EEEE dd MMMM yyyy',
+    dateTimeFormat: 'EEEE dd MMMM yyyy at HH:mm',
+  },
+];
+
+const defaultOptions = {
+  formats: defaultDateFormats,
+  allowCustomFormat: true,
+};
+
+export const rdfaDateCardWidget: (options?: DatePluginOptions) => WidgetSpec = (
+  options
+) => {
+  return {
+    componentName: 'rdfa-date-plugin/card',
+    desiredLocation: 'sidebar',
+    widgetArgs: {
+      options: options ? options : defaultOptions,
+    },
+  };
 };
 
 export const rdfaDateInsertWidget: WidgetSpec = {
   componentName: 'rdfa-date-plugin/insert',
   desiredLocation: 'insertSidebar',
 };
+
+export type DateFormat = {
+  label: string;
+  key: string;
+  dateFormat: string;
+  dateTimeFormat: string;
+};
+
+type DatePluginOptions = {
+  formats: DateFormat[];
+  allowCustomFormat: boolean;
+};

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

@@ -0,0 +1,127 @@
+import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import {
+  DCT,
+  EXT,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { formatDate } from '../utils';
+
+export type DateOptions = {
+  placeholder: {
+    insertDate: string;
+    insertDateTime: string;
+  };
+};
+const date: (options: DateOptions) => NodeSpec = (options) => {
+  return {
+    group: 'inline',
+    inline: true,
+    attrs: {
+      mappingResource: {
+        default: null,
+      },
+      value: {
+        default: null,
+      },
+      format: {
+        default: 'dd/mm/yyyy',
+      },
+      onlyDate: {
+        default: true,
+      },
+    },
+    selectable: true,
+    leafText: (node) => {
+      const { value, onlyDate, format } = node.attrs;
+      const humanReadableDate = value
+        ? formatDate(new Date(value), format)
+        : onlyDate
+        ? options.placeholder.insertDate
+        : options.placeholder.insertDateTime;
+      return humanReadableDate;
+    },
+    toDOM: (node) => {
+      const { value, onlyDate, format, mappingResource } = node.attrs;
+      const datatype = onlyDate ? XSD('date') : XSD('dateTime');
+      const humanReadableDate = value
+        ? formatDate(new Date(value), format)
+        : onlyDate
+        ? options.placeholder.insertDate
+        : options.placeholder.insertDateTime;
+      const dateAttrs = {
+        datatype: datatype.prefixed,
+        property: EXT('content').prefixed,
+        'data-format': format as string,
+        ...(!!value && { content: value as string }),
+      };
+      if (mappingResource) {
+        return [
+          'span',
+          {
+            resource: mappingResource as string,
+            typeof: EXT('Mapping').prefixed,
+            class: 'date',
+          },
+          ['span', { property: DCT('type').prefixed, content: 'date' }],
+          ['span', dateAttrs, humanReadableDate],
+        ];
+      } else {
+        return ['span', { class: 'date', ...dateAttrs }, humanReadableDate];
+      }
+    },
+    parseDOM: [
+      {
+        tag: 'span',
+        getAttrs: (node: HTMLElement) => {
+          if (
+            hasRDFaAttribute(node, 'datatype', XSD('date')) ||
+            hasRDFaAttribute(node, 'datatype', XSD('dateTime'))
+          ) {
+            const onlyDate = hasRDFaAttribute(node, 'datatype', XSD('date'));
+            return {
+              value: node.getAttribute('content'),
+              onlyDate,
+              format: node.dataset.format,
+            };
+          }
+          return false;
+        },
+      },
+      {
+        tag: 'span',
+        getAttrs: (node: HTMLElement) => {
+          if (hasRDFaAttribute(node, 'typeof', EXT('Mapping'))) {
+            const mappingResource = node.getAttribute('resource');
+            if (!mappingResource) {
+              return false;
+            }
+            const variableType = [...node.children]
+              .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
+              ?.getAttribute('content');
+            const datatype = [...node.children]
+              .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
+              ?.getAttribute('datatype');
+            if (variableType === 'date' && datatype) {
+              const onlyDate = !![...node.children].find((el) =>
+                hasRDFaAttribute(el, 'datatype', XSD('date'))
+              );
+              const dateNode = [...node.children].find((el) =>
+                hasRDFaAttribute(el, 'property', EXT('content'))
+              );
+              return {
+                mappingResource,
+                onlyDate,
+                value: dateNode?.getAttribute('content'),
+                format: dateNode?.getAttribute('data-format'),
+              };
+            }
+          }
+          return false;
+        },
+      },
+    ],
+  };
+};
+
+export default date;

package/addon/plugins/rdfa-date-plugin/nodes/index.ts

@@ -0,0 +1 @@
+export { default as date, DateOptions } from './date';

package/addon/plugins/rdfa-date-plugin/utils.ts

@@ -0,0 +1,10 @@
+import { formatWithOptions } from 'date-fns/fp';
+import { nlBE } from 'date-fns/locale';
+
+export function formatDate(date: Date, format: string) {
+  try {
+    return formatWithOptions({ locale: nlBE }, format)(date);
+  } catch (e) {
+    return '';
+  }
+}