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

package/addon/components/variable-plugin/template-variable-card.ts

@@ -0,0 +1,174 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { getOwner } from '@ember/application';
+import { task } from 'ember-concurrency';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import {
+  CodeListOption,
+  fetchCodeListOptions,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
+import { MULTI_SELECT_CODELIST_TYPE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { NodeSelection, PNode, ProseParser } from '@lblod/ember-rdfa-editor';
+import { ZONAL_URI } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
+
+type Args = {
+  controller: ProseController;
+};
+export default class EditorPluginsTemplateVariableCardComponent extends Component<Args> {
+  @tracked variableOptions: CodeListOption[] = [];
+  @tracked selectedVariableOption?: CodeListOption | CodeListOption[];
+  @tracked selectedVariable: { pos: number; node: PNode } | undefined;
+  @tracked showCard = false;
+  @tracked multiSelect = false;
+  mappingUri?: string;
+  zonalLocationCodelistUri: string;
+  endpoint: string;
+  nonZonalLocationCodelistUri: string;
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+    const config = getOwner(this)?.resolveRegistration(
+      'config:environment'
+    ) as {
+      templateVariablePlugin: {
+        zonalLocationCodelistUri: string;
+        endpoint: string;
+        nonZonalLocationCodelistUri: string;
+      };
+    };
+    const pluginConfig = config.templateVariablePlugin;
+    this.zonalLocationCodelistUri = pluginConfig.zonalLocationCodelistUri;
+    this.endpoint = pluginConfig.endpoint;
+    this.nonZonalLocationCodelistUri = pluginConfig.nonZonalLocationCodelistUri;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  insert() {
+    if (!this.selectedVariable || !this.selectedVariableOption) {
+      return;
+    }
+    let htmlToInsert: string;
+    if (Array.isArray(this.selectedVariableOption)) {
+      htmlToInsert = this.selectedVariableOption
+        .map((variable) => variable.value)
+        .join(', ');
+    } else {
+      htmlToInsert = unwrap(this.selectedVariableOption.value);
+    }
+    htmlToInsert = this.wrapVariableInHighlight(htmlToInsert);
+    const domParser = new DOMParser();
+    const htmlNode = domParser.parseFromString(htmlToInsert, 'text/html');
+    const contentFragment = ProseParser.fromSchema(
+      this.args.controller.schema
+    ).parseSlice(htmlNode, {
+      preserveWhitespace: false,
+    }).content;
+    const range = {
+      from: this.selectedVariable.pos + 1,
+      to: this.selectedVariable.pos + this.selectedVariable.node.nodeSize - 1,
+    };
+    this.controller.withTransaction((tr) => {
+      return tr.replaceWith(range.from, range.to, contentFragment);
+    });
+  }
+
+  wrapVariableInHighlight(text: string) {
+    return text.replace(
+      /\$\{(.+?)\}/g,
+      '<span class="mark-highlight-manual">${$1}</span>'
+    );
+  }
+
+  @action
+  selectionChanged() {
+    this.showCard = false;
+    this.selectedVariableOption = undefined;
+    const { selection } = this.controller.state;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.controller.schema.nodes.variable
+    ) {
+      const variable = {
+        node: selection.node,
+        pos: selection.from,
+      };
+      this.selectedVariable = variable;
+      if (variable) {
+        const type = variable.node.attrs.type as string;
+        if (type === 'codelist') {
+          const source =
+            (variable.node.attrs.source as string | undefined) ?? this.endpoint;
+          const codelistURI = variable.node.attrs.codelistResource as string;
+          void this.fetchCodeListOptions.perform(source, codelistURI);
+          this.showCard = true;
+        } else if (type === 'location') {
+          const source =
+            (variable.node.attrs.source as string | undefined) ?? this.endpoint;
+          const roadSignRegulation = findParentNodeOfType(
+            this.controller.schema.nodes.roadsign_regulation
+          )(selection);
+          const zonalityUri = roadSignRegulation?.node.attrs.zonality as
+            | string
+            | undefined;
+          if (zonalityUri === ZONAL_URI) {
+            void this.fetchCodeListOptions.perform(
+              source,
+              this.zonalLocationCodelistUri,
+              true
+            );
+          } else {
+            void this.fetchCodeListOptions.perform(
+              source,
+              this.nonZonalLocationCodelistUri,
+              true
+            );
+          }
+
+          this.showCard = true;
+        }
+      }
+    }
+  }
+
+  @action
+  updateVariableOption(variableOption: CodeListOption | CodeListOption[]) {
+    this.selectedVariableOption = variableOption;
+  }
+
+  fetchCodeListOptions = task(
+    async (endpoint: string, codelistUri: string, isLocation?: boolean) => {
+      const { type, options } = await fetchCodeListOptions(
+        endpoint,
+        codelistUri
+      );
+      if (isLocation) {
+        this.variableOptions = options.map((option) => ({
+          label: option.label,
+          value: this.wrapInLocation(unwrap(option.value)),
+        }));
+      } else {
+        this.variableOptions = options;
+      }
+      if (type === MULTI_SELECT_CODELIST_TYPE) {
+        this.multiSelect = true;
+      } else {
+        this.multiSelect = false;
+      }
+    }
+  );
+
+  wrapInLocation(value: string) {
+    return `
+      <span property="https://data.vlaanderen.be/ns/mobiliteit#plaatsbepaling">
+        ${value}
+      </span>
+    `;
+  }
+}

package/addon/components/variable-plugin/variable.hbs

@@ -0,0 +1,4 @@
+<AuPill @icon="pencil" @iconAlignment="right" class="variable">
+  <div {{did-insert this.didInsertContentWrapper}} {{did-update this.onNodeUpdate @node}}>
+  </div>
+</AuPill>

package/addon/components/variable-plugin/variable.ts

@@ -0,0 +1,250 @@
+/**
+ *
+ * Based on the footnotes example from https://github.com/ProseMirror/website
+ *
+ * Copyright (C) 2015-2017 by Marijn Haverbeke <marijnh@gmail.com> and others
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
+import Component from '@glimmer/component';
+import {
+  chainCommands,
+  createParagraphNear,
+  DOMSerializer,
+  EditorState,
+  keymap,
+  liftEmptyBlock,
+  newlineInCode,
+  NodeSelection,
+  RdfaEditorView,
+  redo,
+  Schema,
+  splitBlock,
+  StepMap,
+  Transaction,
+  undo,
+} from '@lblod/ember-rdfa-editor';
+import { date } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin/nodes';
+import {
+  isSome,
+  unwrap,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { insertHardBreak } from '@lblod/ember-rdfa-editor/commands/insert-hard-break';
+import { toggleMarkAddFirst } from '@lblod/ember-rdfa-editor/commands/toggle-mark-add-first';
+import {
+  link,
+  em,
+  strong,
+  underline,
+  strikethrough,
+} from '@lblod/ember-rdfa-editor/marks';
+import {
+  block_rdfa,
+  hard_break,
+  placeholder,
+  text,
+  paragraph,
+  repaired_block,
+} from '@lblod/ember-rdfa-editor/nodes';
+import {
+  inline_rdfa,
+  invisible_rdfa,
+} from '@lblod/ember-rdfa-editor/nodes/inline-rdfa';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import IntlService from 'ember-intl/services/intl';
+
+export default class Variable extends Component<EmberNodeArgs> {
+  @service declare intl: IntlService;
+  innerView: RdfaEditorView | null = null;
+
+  contentWrapper: Element | null = null;
+
+  get outerView() {
+    return this.args.view;
+  }
+
+  get node() {
+    return this.args.node;
+  }
+
+  get pos() {
+    return this.args.getPos();
+  }
+
+  get htmlContent() {
+    const fragment = DOMSerializer.fromSchema(this.schema).serializeFragment(
+      this.node.content,
+      {
+        document,
+      }
+    );
+    const div = document.createElement('div');
+    div.appendChild(fragment);
+    return htmlSafe(div.innerHTML);
+  }
+
+  get schema() {
+    return new Schema({
+      nodes: {
+        doc: {
+          content: 'block+',
+        },
+        paragraph,
+        date: date({
+          placeholder: {
+            insertDate: this.intl.t('date-plugin.insert.date'),
+            insertDateTime: this.intl.t('date-plugin.insert.datetime'),
+          },
+        }),
+        repaired_block,
+        placeholder,
+
+        text,
+
+        hard_break,
+        block_rdfa,
+        invisible_rdfa,
+      },
+      marks: {
+        inline_rdfa,
+        link,
+        em,
+        strong,
+        underline,
+        strikethrough,
+      },
+    });
+  }
+
+  @action
+  onFocus() {
+    const outerSelectionTr = this.outerView.state.tr;
+    const outerSelection = new NodeSelection(
+      this.outerView.state.doc.resolve(this.pos)
+    );
+    outerSelectionTr.setSelection(outerSelection);
+    this.outerView.dispatch(outerSelectionTr);
+  }
+
+  @action
+  didInsertContentWrapper(target: Element) {
+    this.contentWrapper = target;
+    this.innerView = new RdfaEditorView(this.contentWrapper, {
+      state: EditorState.create({
+        doc: this.node,
+        plugins: [
+          keymap({
+            'Mod-z': () =>
+              undo(this.outerView.state, this.outerView.dispatch.bind(this)),
+            'Mod-Z': () =>
+              undo(this.outerView.state, this.outerView.dispatch.bind(this)),
+            'Mod-y': () =>
+              redo(this.outerView.state, this.outerView.dispatch.bind(this)),
+            'Mod-Y': () =>
+              redo(this.outerView.state, this.outerView.dispatch.bind(this)),
+            'Mod-b': toggleMarkAddFirst(this.schema.marks.strong),
+            'Mod-B': toggleMarkAddFirst(this.schema.marks.strong),
+            'Mod-i': toggleMarkAddFirst(this.schema.marks.em),
+            'Mod-I': toggleMarkAddFirst(this.schema.marks.em),
+            'Mod-u': toggleMarkAddFirst(this.schema.marks.underline),
+            'Mod-U': toggleMarkAddFirst(this.schema.marks.underline),
+            Enter: chainCommands(
+              newlineInCode,
+              createParagraphNear,
+              liftEmptyBlock,
+              splitBlock,
+              insertHardBreak
+            ),
+          }),
+        ],
+        schema: this.schema,
+      }),
+      dispatchTransaction: this.dispatchInner,
+      handleDOMEvents: {
+        mousedown: () => {
+          // Kludge to prevent issues due to the fact that the whole
+          // footnote is node-selected (and thus DOM-selected) when
+          // the parent editor is focused.
+
+          if (this.outerView.hasFocus()) this.innerView?.focus();
+        },
+        focus: () => {
+          const outerSelectionTr = this.outerView.state.tr;
+          const outerSelection = new NodeSelection(
+            this.outerView.state.doc.resolve(this.pos)
+          );
+          outerSelectionTr.setSelection(outerSelection);
+          this.outerView.dispatch(outerSelectionTr);
+          if (this.innerView) {
+            this.args.controller.setEmbeddedView(this.innerView);
+          }
+        },
+      },
+    });
+  }
+
+  @action
+  onNodeUpdate() {
+    if (this.innerView) {
+      const state = this.innerView.state;
+      const start = this.node.content.findDiffStart(state.doc.content);
+      const end = this.node.content.findDiffEnd(state.doc.content);
+      if (isSome(start) && isSome(end)) {
+        let { a: endA, b: endB } = end;
+        const overlap = start - Math.min(endA, endB);
+        if (overlap > 0) {
+          endA += overlap;
+          endB += overlap;
+        }
+        this.innerView.dispatch(
+          state.tr
+            .replace(start, endB, this.node.slice(start, endA))
+            .setMeta('fromOutside', true)
+        );
+      }
+    }
+  }
+
+  dispatchInner = (tr: Transaction) => {
+    if (this.innerView) {
+      const { state, transactions } = this.innerView.state.applyTransaction(tr);
+      this.innerView.updateState(state);
+
+      if (!tr.getMeta('fromOutside')) {
+        const outerTr = this.outerView.state.tr,
+          offsetMap = StepMap.offset(this.pos + 1);
+        for (let i = 0; i < transactions.length; i++) {
+          const steps = transactions[i].steps;
+          for (let j = 0; j < steps.length; j++)
+            outerTr.step(unwrap(steps[j].map(offsetMap)));
+        }
+        if (outerTr.docChanged) this.outerView.dispatch(outerTr);
+      }
+    }
+  };
+
+  willDestroy(): void {
+    super.willDestroy();
+    this.innerView?.destroy();
+    this.innerView = null;
+  }
+}

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

@@ -1,7 +1,10 @@
 import {
   Command,
+  Fragment,
   NodeSelection,
   NodeType,
+  PNode,
+  Schema,
   Selection,
   TextSelection,
 } from '@lblod/ember-rdfa-editor';
@@ -9,56 +12,44 @@ 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';
 
 const insertStructure = (
   structureSpec: StructureSpec,
-  intl: IntlService
+  intl: IntlService,
+  content?: Fragment
 ): Command => {
   return (state, dispatch) => {
-    const { schema, selection } = state;
-    const container = findInsertionContainer(
+    const { schema, selection, doc } = state;
+    const insertionRange = findInsertionRange({
+      doc,
       selection,
-      schema.nodes[structureSpec.name]
-    );
-    if (!container) {
+      nodeType: schema.nodes[structureSpec.name],
+      schema,
+    });
+    if (!insertionRange) {
       return wrapStructureContent(structureSpec, intl)(state, dispatch);
     }
     if (dispatch) {
       const { node: newStructureNode, selectionConfig } =
-        structureSpec.constructor({ schema, intl });
+        structureSpec.constructor({ schema, intl, content });
       const transaction = state.tr;
-      let insertRange: { from: number; to: number };
-      if (
-        container.node.childCount === 1 &&
-        container.node.firstChild?.type === schema.nodes['paragraph'] &&
-        container.node.firstChild.firstChild?.type ===
-          schema.nodes['placeholder']
-      ) {
-        insertRange = {
-          from: container.pos + 1,
-          to: container.pos + container.node.nodeSize - 1,
-        };
-      } else {
-        insertRange = {
-          from: selection.$from.after(container.depth + 1),
-          to: selection.$from.after(container.depth + 1),
-        };
-      }
 
       transaction.replaceWith(
-        insertRange.from,
-        insertRange.to,
+        insertionRange.from,
+        insertionRange.to,
         newStructureNode
       );
       const newSelection =
         selectionConfig.type === 'node'
           ? NodeSelection.create(
               transaction.doc,
-              insertRange.from + selectionConfig.relativePos
+              insertionRange.from + selectionConfig.relativePos
             )
           : TextSelection.create(
               transaction.doc,
-              insertRange.from + selectionConfig.relativePos
+              insertionRange.from + selectionConfig.relativePos
             );
       transaction.setSelection(newSelection);
       transaction.scrollIntoView();
@@ -69,14 +60,50 @@ const insertStructure = (
   };
 };
 
-function findInsertionContainer(selection: Selection, nodeType: NodeType) {
+function findInsertionRange(args: {
+  doc: PNode;
+  selection: Selection;
+  nodeType: NodeType;
+  schema: Schema;
+}) {
+  const { doc, selection, nodeType, schema } = args;
   const { $from } = selection;
   for (let currentDepth = $from.depth; currentDepth >= 0; currentDepth--) {
     const currentAncestor = $from.node(currentDepth);
     const index = $from.index(currentDepth);
-    const pos = currentDepth > 0 ? $from.before(currentDepth) : -1;
     if (currentAncestor.canReplaceWith(index, index, nodeType)) {
-      return { node: currentAncestor, depth: currentDepth, pos };
+      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 nextContainerRange = findNodes(
+    doc,
+    selection.from,
+    true,
+    false,
+    ({ from }) => {
+      const node = doc.nodeAt(from);
+      if (node) {
+        if (node.canReplaceWith(node.childCount, node.childCount, nodeType)) {
+          return true;
+        }
+      }
+      return false;
+    }
+  ).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/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

@@ -1,8 +1,12 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import { Fragment, 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';
+import {
+  ELI,
+  SAY,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 const PLACEHOLDERS = {
   body: 'article-structure-plugin.placeholder.paragraph.body',
@@ -39,8 +43,11 @@ export const articleParagraphSpec: StructureSpec = {
   },
 };
 
+const contentSelector = `span[property~='${SAY('body').prefixed}'],
+                         span[property~='${SAY('body').full}']`;
+
 export const article_paragraph: NodeSpec = {
-  content: 'text*|placeholder',
+  content: 'inline*',
   inline: false,
   attrs: {
     resource: {},
@@ -77,6 +84,7 @@ export const article_paragraph: NodeSpec = {
           hasRDFaAttribute(element, 'property', SAY('hasParagraph')) &&
           hasRDFaAttribute(element, 'typeof', SAY('Paragraph')) &&
           element.getAttribute('resource') &&
+          element.querySelector(contentSelector) &&
           numberSpan
         ) {
           return {
@@ -86,8 +94,36 @@ export const article_paragraph: NodeSpec = {
         }
         return false;
       },
-      contentElement: `span[property~='${SAY('body').prefixed}'],
-                       span[property~='${SAY('body').full}']`,
+      contentElement: contentSelector,
+    },
+    // Parsing rule for backwards compatibility (when content was not inside seperate say:body div)
+    {
+      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;
+      },
+      getContent: (node, schema) => {
+        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

@@ -1,4 +1,4 @@
-import { NodeSpec } from '@lblod/ember-rdfa-editor';
+import { NodeSpec, PNode } from '@lblod/ember-rdfa-editor';
 import { StructureSpec } from '..';
 import {
   constructStructureBodyNodeSpec,
@@ -7,7 +7,12 @@ import {
 } 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';
+import {
+  ELI,
+  EXT,
+  SAY,
+  XSD,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 
 const PLACEHOLDERS = {
   title: 'article-structure-plugin.placeholder.article.heading',
@@ -88,6 +93,10 @@ export const article_header: NodeSpec = {
       default: SAY('heading').prefixed,
     },
   },
+  outlineText: (node: PNode) => {
+    const { number } = node.attrs;
+    return `Artikel ${number as string}: ${node.textContent}`;
+  },
   toDOM(node) {
     return [
       'div',
@@ -118,11 +127,12 @@ export const article_header: NodeSpec = {
         }
         return false;
       },
-      contentElement: `span[property~='${EXT('title').prefixed}']`,
+      contentElement: `span[property~='${EXT('title').prefixed}'],
+                       span[property~='${EXT('title').full}']`,
     },
   ],
 };
 
 export const article_body = constructStructureBodyNodeSpec({
-  content: '(paragraph|article_paragraph)+',
+  content: '(block|article_paragraph)+',
 });