@lblod/ember-rdfa-editor-lblod-plugins 2.1.2 → 4.0.1

package/addon/components/rdfa-date-plugin/insert.ts

@@ -1,18 +1,16 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
-import { DateFormat } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin';
+import {
+  DateFormat,
+  DateOptions,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin';
 import { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 type Args = {
-  controller: ProseController;
-  widgetArgs: {
-    options: {
-      formats: [DateFormat];
-      allowCustomFormat: boolean;
-    };
-  };
+  controller: SayController;
+  options: DateOptions;
 };
 
 export default class RdfaDatePluginInsertComponent extends Component<Args> {
@@ -25,26 +23,20 @@ export default class RdfaDatePluginInsertComponent extends Component<Args> {
   }
 
   get formats(): DateFormat[] {
-    return this.args.widgetArgs.options.formats;
+    return this.args.options.formats;
   }
 
   get defaultDateFormat(): Option<string> {
     return this.formats[0].dateFormat;
   }
 
-  get defaultDateTimeFormat(): Option<string> {
-    return this.formats[0].dateTimeFormat;
-  }
-
   @action
-  insertDate(onlyDate: boolean) {
+  insertDate() {
     this.controller.withTransaction((tr) => {
       tr.replaceSelectionWith(
         this.schema.node('date', {
-          onlyDate,
-          format: onlyDate
-            ? this.defaultDateFormat
-            : this.defaultDateTimeFormat,
+          onlyDate: true,
+          format: this.defaultDateFormat,
         })
       );
       if (tr.selection.$anchor.nodeBefore) {
@@ -54,6 +46,6 @@ export default class RdfaDatePluginInsertComponent extends Component<Args> {
         tr.setSelection(new NodeSelection(resolvedPos));
       }
       return tr;
-    }, true);
+    });
   }
 }

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.ts

@@ -2,7 +2,7 @@ import { findParentNode } from '@curvenote/prosemirror-utils';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 
 /**
  * Card displaying a hint of the Date plugin
@@ -22,7 +22,7 @@ const acceptedTypes = [
 ];
 
 type Args = {
-  controller: ProseController;
+  controller: SayController;
 };
 
 export default class RoadsignRegulationCard extends Component<Args> {
@@ -48,7 +48,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
   }
 
   get showCard() {
-    const selection = this.controller.state.selection;
+    const selection = this.controller.mainEditorState.selection;
     const besluitNode = findParentNode((node) => {
       if (node.type === this.schema.nodes['besluit']) {
         const rdfTypes = (node.attrs['typeof'] as string | undefined)?.split(

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.ts

@@ -13,13 +13,13 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
 import RoadsignRegistryService from '@lblod/ember-rdfa-editor-lblod-plugins/services/roadsign-registry';
 import { assert } from '@ember/debug';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
 import Measure from '@lblod/ember-rdfa-editor-lblod-plugins/models/measure';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import { insertStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands';
 import { besluitArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/nodes';
 import IntlService from 'ember-intl/services/intl';
 import { ProseParser } from '@lblod/ember-rdfa-editor';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 const PAGE_SIZE = 10;
 const SIGN_TYPE_URI =
@@ -42,7 +42,7 @@ type Category = Option;
 
 type Args = {
   closeModal: () => void;
-  controller: ProseController;
+  controller: SayController;
 };
 
 export default class RoadsignRegulationCard extends Component<Args> {
@@ -306,7 +306,8 @@ export default class RoadsignRegulationCard extends Component<Args> {
     }).content;
 
     this.args.controller.doCommand(
-      insertStructure(besluitArticleStructure, this.intl, contentFragment)
+      insertStructure(besluitArticleStructure, this.intl, contentFragment),
+      { view: this.args.controller.mainEditorView }
     );
     this.args.closeModal();
   }

package/addon/components/roadsign-regulation-plugin/roadsigns-table.ts

@@ -2,7 +2,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { getOwner } from '@ember/application';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 type Args = Record<string, never>;
 export default class RoadsignsTable extends Component<Args> {

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

@@ -1,8 +1,8 @@
 import Component from '@glimmer/component';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 
 type Args = {
-  controller: ProseController;
+  controller: SayController;
 };
 export default class StandardTemplatePluginCardComponent extends Component<Args> {
   get controller() {

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

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import StandardTemplatePluginService from '@lblod/ember-rdfa-editor-lblod-plugins/services/standard-template-plugin';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 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';
@@ -14,7 +14,7 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 
 type Args = {
-  controller: ProseController;
+  controller: SayController;
 };
 
 const HACKY_LOOKUP: Record<string, Resource> = {
@@ -65,7 +65,7 @@ export default class TemplateProviderComponent extends Component<Args> {
   }
 
   templateIsApplicable(template: TemplateModel) {
-    const { $from } = this.controller.state.selection;
+    const { $from } = this.controller.mainEditorState.selection;
     const containsTypes =
       this.controller.externalContextStore
         .match(null, 'a')
@@ -95,7 +95,7 @@ export default class TemplateProviderComponent extends Component<Args> {
   @action
   async insert(template: TemplateModel) {
     await template.reload();
-    const selection = this.controller.state.selection;
+    const selection = this.controller.mainEditorState.selection;
     let insertRange: { from: number; to: number } = selection;
     const { $from, $to } = selection;
     const isInPlaceholder =
@@ -119,7 +119,8 @@ export default class TemplateProviderComponent extends Component<Args> {
         instantiateUuids(template.body),
         insertRange.from,
         insertRange.to
-      )
+      ),
+      { view: this.controller.mainEditorView }
     );
   }
 }

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -21,7 +21,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
 
   get outline() {
     const entries = this.extractOutline({
-      node: this.controller.state.doc,
+      node: this.controller.mainEditorState.doc,
       pos: -1,
     });
     return {

package/addon/components/table-of-contents-plugin/toolbar-button.ts

@@ -1,9 +1,9 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 
 type Args = {
-  controller: ProseController;
+  controller: SayController;
 };
 
 export default class TableOfContentsCardComponent extends Component<Args> {
@@ -17,7 +17,7 @@ export default class TableOfContentsCardComponent extends Component<Args> {
 
   get tableOfContentsRange() {
     let result: { from: number; to: number } | undefined;
-    this.controller.state.doc.descendants((node, pos) => {
+    this.controller.mainEditorState.doc.descendants((node, pos) => {
       if (node.type === this.controller.schema.nodes['table_of_contents']) {
         result = { from: pos, to: pos + node.nodeSize };
       }
@@ -30,14 +30,51 @@ export default class TableOfContentsCardComponent extends Component<Args> {
   toggle() {
     if (this.tableOfContentsRange) {
       const { from, to } = this.tableOfContentsRange;
-      this.controller.withTransaction((tr) => {
-        return tr.deleteRange(from, to);
-      });
+      this.controller.withTransaction(
+        (tr) => {
+          return tr.deleteRange(from, to);
+        },
+        { view: this.controller.mainEditorView }
+      );
     } else {
       const { schema } = this.controller;
-      this.controller.withTransaction((tr) => {
-        return tr.replaceRangeWith(0, 0, schema.node('table_of_contents'));
+      const state = this.controller.activeEditorState;
+      let replacePosition: number | undefined = undefined;
+      state.doc.descendants((node, pos, parent, index) => {
+        if (
+          replacePosition === undefined &&
+          state.doc.canReplaceWith(
+            index,
+            index,
+            schema.nodes['table_of_contents']
+          )
+        ) {
+          replacePosition = pos;
+        } else if (
+          index === state.doc.childCount - 1 &&
+          replacePosition === undefined &&
+          state.doc.canReplaceWith(
+            index + 1,
+            index + 1,
+            schema.nodes['table_of_contents']
+          )
+        ) {
+          replacePosition = pos + node.nodeSize;
+        }
+        return false;
       });
+      if (replacePosition !== undefined) {
+        this.controller.withTransaction(
+          (transaction) => {
+            return transaction.replaceWith(
+              replacePosition as number,
+              replacePosition as number,
+              schema.node('table_of_contents')
+            );
+          },
+          { view: this.controller.mainEditorView }
+        );
+      }
     }
   }
 }

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

@@ -1,8 +1,16 @@
 {{#if this.showCard}}
-  <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
+  <AuCard
+    @flex={{true}}
+    @divided={{true}}
+    @isOpenInitially={{true}}
+    @expandable={{true}}
+    @shadow={{true}}
+    @size='small'
+    as |c|
+  >
     <c.header>
-      <AuHeading @level="3" @skin="6">
-        {{t "variable-plugin.insert-variable"}}
+      <AuHeading @level='3' @skin='6'>
+        {{t 'variable-plugin.insert-variable'}}
       </AuHeading>
     </c.header>
     <c.content>
@@ -11,7 +19,8 @@
         @searchEnabled={{false}}
         @options={{this.variablesArray}}
         @selected={{this.selectedVariable}}
-        @onChange={{this.updateSelectedVariable}} as |variable|
+        @onChange={{this.updateSelectedVariable}}
+        as |variable|
       >
         {{variable.label}}
       </PowerSelect>
@@ -21,14 +30,19 @@
           @searchEnabled={{false}}
           @options={{this.subtypes}}
           @selected={{this.selectedSubtype}}
-          @onChange={{this.updateSubtype}} as |subtype|
+          @onChange={{this.updateSubtype}}
+          as |subtype|
         >
           {{subtype.label}}
         </PowerSelect>
       {{/if}}
-      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable)
-                                                          (and this.hasSubtype (not this.selectedSubtype))}}>{{t
-        "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}}
+{{/if}}

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

@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { task } from 'ember-concurrency';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import {
   DEFAULT_VARIABLE_TYPES,
   VariableType,
@@ -11,13 +11,11 @@ import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variabl
 import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
 type Args = {
-  controller: ProseController;
-  widgetArgs: {
-    options: {
-      publisher: string;
-      variableTypes: (VariableType | string)[];
-      defaultEndpoint: string;
-    };
+  controller: SayController;
+  options: {
+    publisher: string;
+    variableTypes: (VariableType | string)[];
+    defaultEndpoint: string;
   };
 };
 
@@ -33,7 +31,7 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
   constructor(parent: unknown, args: Args) {
     super(parent, args);
     const { publisher, variableTypes, defaultEndpoint } =
-      this.args.widgetArgs.options || {};
+      this.args.options || {};
     this.publisher = publisher;
     this.endpoint = defaultEndpoint;
     const variableTypesSelectedByUser = variableTypes ?? [
@@ -62,19 +60,26 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     this.variablesArray = variablesArray;
   }
 
+  get controller() {
+    return this.args.controller;
+  }
+
   @action
   insert() {
     if (!this.selectedVariable) {
       return;
     }
     const node = this.selectedVariable.constructor(
-      this.args.controller.schema,
+      this.controller.schema,
       this.endpoint,
       this.selectedSubtype
     );
-    this.args.controller.withTransaction((tr) => {
-      return tr.replaceSelectionWith(node);
-    });
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(node);
+      },
+      { view: this.controller.mainEditorView }
+    );
   }
 
   @action
@@ -109,7 +114,7 @@ export default class EditorPluginsInsertCodelistCardComponent extends Component<
     if (this.args.controller.inEmbeddedView) {
       return false;
     }
-    const { selection } = this.args.controller.state;
+    const { selection } = this.args.controller.mainEditorState;
     if (
       selection instanceof NodeSelection &&
       selection.node.type === this.args.controller.schema.nodes.variable

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

@@ -1,4 +1,4 @@
-<div {{did-update this.selectionChanged @controller.state}}>
+<div {{did-update this.selectionChanged @controller.mainEditorState}}>
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>

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

@@ -3,8 +3,7 @@ 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 { SayController } from '@lblod/ember-rdfa-editor';
 import {
   CodeListOption,
   fetchCodeListOptions,
@@ -13,9 +12,10 @@ import { MULTI_SELECT_CODELIST_TYPE } from '@lblod/ember-rdfa-editor-lblod-plugi
 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';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 type Args = {
-  controller: ProseController;
+  controller: SayController;
 };
 export default class EditorPluginsTemplateVariableCardComponent extends Component<Args> {
   @tracked variableOptions: CodeListOption[] = [];
@@ -74,9 +74,12 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
       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);
-    });
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceWith(range.from, range.to, contentFragment);
+      },
+      { view: this.controller.mainEditorView }
+    );
   }
 
   wrapVariableInHighlight(text: string) {
@@ -90,7 +93,7 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
   selectionChanged() {
     this.showCard = false;
     this.selectedVariableOption = undefined;
-    const { selection } = this.controller.state;
+    const { selection } = this.controller.mainEditorState;
     if (
       selection instanceof NodeSelection &&
       selection.node.type === this.controller.schema.nodes.variable

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

@@ -1,4 +1,9 @@
-<AuPill @icon="pencil" @iconAlignment="right" class="variable" {{on "click" this.onClick}}>
-  <div {{did-insert this.didInsertContentWrapper}} {{did-update this.onNodeUpdate @node}}>
-  </div>
+<AuPill @icon="pencil" @iconAlignment="right" class="variable">
+  <EmberNode::EmbeddedEditor 
+    @controller={{@controller}} 
+    @node={{@node}} 
+    @view={{@view}} 
+    @getPos={{@getPos}} 
+    @selected={{@selected}}
+  />
 </AuPill>

package/addon/models/instruction.ts

@@ -1,5 +1,5 @@
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
 import { IBindings } from 'fetch-sparql-endpoint';
+import { unwrap } from '../utils/option';
 
 export default class Instruction {
   constructor(

package/addon/models/measure.ts

@@ -1,6 +1,6 @@
 import { tracked } from '@glimmer/tracking';
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
 import { IBindings } from 'fetch-sparql-endpoint';
+import { unwrap } from '../utils/option';
 import Sign from './sign';
 
 export default class Measure {

package/addon/models/sign.ts

@@ -1,5 +1,5 @@
-import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
 import { IBindings } from 'fetch-sparql-endpoint';
+import { unwrap } from '../utils/option';
 
 export default class Sign {
   constructor(

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

@@ -7,13 +7,13 @@ import {
   Selection,
   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';
 import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 const moveSelectedStructure = (
   options: ArticleStructurePluginOptions,
   direction: 'up' | 'down',

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

@@ -1,13 +1,6 @@
-import {
-  Fragment,
-  PNode,
-  Schema,
-  WidgetSpec,
-  EditorState,
-} from '@lblod/ember-rdfa-editor';
+import { Fragment, PNode, Schema, EditorState } from '@lblod/ember-rdfa-editor';
 import IntlService from 'ember-intl/services/intl';
 import { Transaction } from '@lblod/ember-rdfa-editor';
-import { STRUCTURE_SPECS } from './structures';
 
 export type SpecName = string;
 
@@ -41,30 +34,7 @@ export type StructureSpec = {
   content?: (args: { pos: number; state: EditorState }) => Fragment;
   continuous: boolean;
   limitTo?: string;
+  noUnwrap?: 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

@@ -22,7 +22,8 @@ export const articleParagraphSpec: StructureSpec = {
     },
     remove: 'article-structure-plugin.remove.paragraph',
   },
-  continuous: true,
+  continuous: false,
+  noUnwrap: true,
   constructor: ({ schema, number, intl }) => {
     const numberConverted = number?.toString() ?? '1';
     const node = schema.node(
@@ -31,9 +32,13 @@ export const articleParagraphSpec: StructureSpec = {
         resource: `http://data.lblod.info/paragraphs/${uuid()}`,
         number: numberConverted,
       },
-      schema.node('placeholder', {
-        placeholderText: intl?.t(PLACEHOLDERS.body),
-      })
+      schema.node(
+        'paragraph',
+        {},
+        schema.node('placeholder', {
+          placeholderText: intl?.t(PLACEHOLDERS.body),
+        })
+      )
     );
     return { node, selectionConfig: { relativePos: 1, type: 'node' } };
   },
@@ -47,7 +52,7 @@ const contentSelector = `span[property~='${SAY('body').prefixed}'],
                          span[property~='${SAY('body').full}']`;
 
 export const article_paragraph: NodeSpec = {
-  content: 'inline*',
+  content: 'paragraph*',
   inline: false,
   isolating: true,
   defining: true,
@@ -71,13 +76,17 @@ export const article_paragraph: NodeSpec = {
         typeof: node.attrs.typeof as string,
         resource: node.attrs.resource as string,
       },
-      '$',
+      ['span', { contenteditable: false }, '§'],
       [
         'span',
-        { property: ELI('number').prefixed, datatype: XSD('integer').prefixed },
+        {
+          property: ELI('number').prefixed,
+          datatype: XSD('integer').prefixed,
+          contenteditable: false,
+        },
         node.attrs.number,
       ],
-      '. ',
+      ['span', { contenteditable: false }, '. '],
       ['span', { property: SAY('body').prefixed }, 0],
     ];
   },

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

@@ -6,13 +6,13 @@ import {
   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 '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 const PLACEHOLDERS = {
   title: 'article-structure-plugin.placeholder.article.heading',
@@ -106,10 +106,14 @@ export const article_header: NodeSpec = {
       'Artikel ',
       [
         'span',
-        { property: ELI('number').prefixed, datatype: XSD('string').prefixed },
+        {
+          property: ELI('number').prefixed,
+          datatype: XSD('string').prefixed,
+          contenteditable: false,
+        },
         node.attrs.number,
       ],
-      ': ',
+      ['span', { contenteditable: false }, ': '],
       [
         'span',
         {