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

package/addon/components/standard-template-plugin/template-provider.ts

@@ -6,10 +6,41 @@ import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
 import TemplateModel from '@lblod/ember-rdfa-editor-lblod-plugins/models/template';
 import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
 import instantiateUuids from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/instantiate-uuids';
+import { PNode, ResolvedPos } from '@lblod/ember-rdfa-editor';
+import { BESLUIT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import {
+  pnodeHasRdfaAttribute,
+  Resource,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 type Args = {
   controller: ProseController;
 };
+
+const HACKY_LOOKUP: Record<string, Resource> = {
+  'http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt': BESLUIT(
+    'BehandelingVanAgendapunt'
+  ),
+  'http://data.vlaanderen.be/ns/besluit#Besluit': BESLUIT('Besluit'),
+  'http://data.vlaanderen.be/ns/besluit#Artikel': BESLUIT('Artikel'),
+};
+
+export function findAncestors(
+  pos: ResolvedPos,
+  predicate: (node: PNode) => boolean = () => true
+) {
+  const result: { node: PNode; pos: number }[] = [];
+  let depth = pos.depth;
+  while (depth >= 0) {
+    const parent = pos.node(depth);
+    if (predicate(parent)) {
+      result.push({ node: parent, pos: pos.before(depth) });
+    }
+    depth -= 1;
+  }
+  return result;
+}
+
 export default class TemplateProviderComponent extends Component<Args> {
   @service declare standardTemplatePlugin: StandardTemplatePluginService;
 
@@ -34,17 +65,29 @@ export default class TemplateProviderComponent extends Component<Args> {
   }
 
   templateIsApplicable(template: TemplateModel) {
-    const containsTypes = this.controller.datastore
-      .match(null, 'a')
-      .dataset.some((quad) => {
-        return template.contexts.includes(quad.object.value);
-      });
-
-    const containsDisabledTypes = this.controller.datastore
-      .match(null, 'a')
-      .dataset.some((quad) =>
-        template.disabledInContexts.includes(quad.object.value)
-      );
+    const { $from } = this.controller.state.selection;
+    const containsTypes =
+      this.controller.externalContextStore
+        .match(null, 'a')
+        .dataset.some((quad) => {
+          return template.contexts.includes(quad.object.value);
+        }) ||
+      findAncestors($from, (node) => {
+        return template.contexts.some((type) =>
+          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type])
+        );
+      }).length;
+    const containsDisabledTypes =
+      this.controller.externalContextStore
+        .match(null, 'a')
+        .dataset.some((quad) => {
+          return template.disabledInContexts.includes(quad.object.value);
+        }) ||
+      findAncestors($from, (node) => {
+        return template.disabledInContexts.some((type) =>
+          pnodeHasRdfaAttribute(node, 'typeof', HACKY_LOOKUP[type])
+        );
+      }).length;
 
     return containsTypes && !containsDisabledTypes;
   }

package/addon/components/{insert-variable-plugin → variable-plugin}/insert-variable-card.hbs

@@ -1,9 +1,8 @@
-<div {{did-update this.selectionChanged @controller.state}}>
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>
       <AuHeading @level="3" @skin="6">
-        {{t "insert-variable-plugin.variable"}}
+        {{t "variable-plugin.insertVariable"}}
       </AuHeading>
     </c.header>
     <c.content>
@@ -27,8 +26,9 @@
           {{subtype.label}}
         </PowerSelect>
       {{/if}}
-      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable) (and this.hasSubtype (not this.selectedSubtype))}}>{{t "insert-variable-plugin.button"}}</AuButton>
+      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable)
+                                                          (and this.hasSubtype (not this.selectedSubtype))}}>{{t
+        "variable-plugin.button"}}</AuButton>
     </c.content>
   </AuCard>
 {{/if}}
-</div>

package/addon/components/{insert-variable-plugin → variable-plugin}/insert-variable-card.ts

@@ -2,14 +2,14 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
-import { v4 as uuidv4 } from 'uuid';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
-import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
 import {
   DEFAULT_VARIABLE_TYPES,
   VariableType,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/insert-variable-plugin/utils/constants';
-import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/insert-variable-plugin/utils/fetch-data';
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
+import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { NodeSelection } from '@lblod/ember-rdfa-editor';
 type Args = {
   controller: ProseController;
   widgetArgs: {
@@ -24,7 +24,6 @@ type Args = {
 export default class EditorPluginsInsertCodelistCardComponent extends Component<Args> {
   @tracked variablesArray: VariableType[];
   @tracked selectedVariable?: VariableType;
-  @tracked showCard = true;
   @tracked hasSubtype = false;
   @tracked selectedSubtype?: CodeList;
   @tracked subtypes?: CodeList[];
@@ -68,19 +67,14 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     if (!this.selectedVariable) {
       return;
     }
-    const uri = `http://data.lblod.info/mappings/${uuidv4()}`;
-    let variableContent;
-    if (typeof this.selectedVariable.template === 'function') {
-      variableContent = this.selectedVariable.template(
-        this.endpoint,
-        this.selectedSubtype
-      );
-    } else {
-      variableContent = this.selectedVariable.template;
-    }
-    const htmlToInsert = `<span resource="${uri}" typeof="ext:Mapping">${variableContent}</span>`;
-    const { from, to } = this.args.controller.state.selection;
-    this.args.controller.doCommand(insertHtml(htmlToInsert, from, to));
+    const node = this.selectedVariable.constructor(
+      this.args.controller.schema,
+      this.endpoint,
+      this.selectedSubtype
+    );
+    this.args.controller.withTransaction((tr) => {
+      return tr.replaceSelectionWith(node);
+    });
   }
 
   @action
@@ -111,24 +105,21 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     this.selectedSubtype = subtype;
   }
 
-  @action
-  selectionChanged() {
-    const currentSelection = this.args.controller.state.selection;
-    this.showCard = false;
-    const limitedDatastore = this.args.controller.datastore.limitToRange(
-      this.args.controller.state,
-      currentSelection.from,
-      currentSelection.to
-    );
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const quad = limitedDatastore
-      .match(null, 'a', 'ext:Mapping')
-      .asQuadResultSet()
-      .first();
-    if (quad) {
-      this.showCard = false;
+  get showCard() {
+    if (this.args.controller.inEmbeddedView) {
+      return false;
+    }
+    const { selection } = this.args.controller.state;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.args.controller.schema.nodes.variable
+    ) {
+      return false;
     } else {
-      this.showCard = true;
+      const variable = findParentNodeOfType(
+        this.args.controller.schema.nodes.variable
+      )(selection);
+      return !variable;
     }
   }
 }

package/addon/components/{template-variable-plugin → variable-plugin}/template-variable-card.hbs

@@ -3,7 +3,7 @@
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>
       <AuHeading @level="3" @skin="6">
-        Maatregel parameters
+        {{t "variable-plugin.enterVariableValue"}}
       </AuHeading>
     </c.header>
     <c.content>
@@ -12,8 +12,8 @@
           @allowClear={{false}}
           @searchEnabled={{false}}
           @options={{this.variableOptions}}
-          @selected={{this.selectedVariable}}
-          @onChange={{this.updateVariable}} as |variable|
+          @selected={{this.selectedVariableOption}}
+          @onChange={{this.updateVariableOption}} as |variable|
         >
           {{variable.label}}
         </PowerSelectMultiple>
@@ -22,13 +22,13 @@
           @allowClear={{false}}
           @searchEnabled={{false}}
           @options={{this.variableOptions}}
-          @selected={{this.selectedVariable}}
-          @onChange={{this.updateVariable}} as |variable|
+          @selected={{this.selectedVariableOption}}
+          @onChange={{this.updateVariableOption}} as |variable|
         >
           {{variable.label}}
         </PowerSelect>
       {{/if}}
-      <AuButton {{on 'click' this.insert}} @disabled={{not this.selectedVariable}}>Voeg in</AuButton>
+      <AuButton {{on 'click' this.insert}} @disabled={{not this.selectedVariableOption}}>Voeg in</AuButton>
     </c.content>
   </AuCard>
 {{/if}}

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,5 +1,6 @@
 import {
   Command,
+  Fragment,
   NodeSelection,
   NodeType,
   PNode,
@@ -16,7 +17,8 @@ import { containsOnlyPlaceholder } from '../utils/structure';
 
 const insertStructure = (
   structureSpec: StructureSpec,
-  intl: IntlService
+  intl: IntlService,
+  content?: Fragment
 ): Command => {
   return (state, dispatch) => {
     const { schema, selection, doc } = state;
@@ -31,7 +33,7 @@ const insertStructure = (
     }
     if (dispatch) {
       const { node: newStructureNode, selectionConfig } =
-        structureSpec.constructor({ schema, intl });
+        structureSpec.constructor({ schema, intl, content });
       const transaction = state.tr;
 
       transaction.replaceWith(