@lblod/ember-rdfa-editor-lblod-plugins 2.1.1 → 3.0.0

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

@@ -1,9 +1,12 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import { NodeSelection, PNode } 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 {
   formatContainsTime,
   validateDateFormat,
@@ -21,13 +24,8 @@ import {
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 type Args = {
-  controller: ProseController;
-  widgetArgs: {
-    options: {
-      formats: [DateFormat];
-      allowCustomFormat: boolean;
-    };
-  };
+  controller: SayController;
+  options: DateOptions;
 };
 const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
 export default class RdfaDatePluginCardComponent extends Component<Args> {
@@ -39,7 +37,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
   tooltipOpen = false;
 
   get formats(): DateFormat[] {
-    return this.args.widgetArgs.options.formats;
+    return this.args.options.formats;
   }
 
   get controller() {
@@ -47,13 +45,13 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
   }
 
   get selection() {
-    return this.controller.getState(true).selection;
+    return this.controller.activeEditorState.selection;
   }
 
   get selectedDateNode(): Option<PNode> {
     if (
       this.selection instanceof NodeSelection &&
-      this.selection.node.type === this.args.controller.schema.nodes['date']
+      this.selection.node.type === this.controller.schema.nodes['date']
     ) {
       return this.selection.node;
     } else {
@@ -178,15 +176,13 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
     if (pos) {
       this.controller.withTransaction((tr) => {
         return tr.setNodeAttribute(pos, 'value', date.toISOString());
-      }, true);
+      });
     }
   }
 
   @action
   changeIncludeTime(includeTime: boolean) {
-    console.log('Include time', includeTime);
     if (this.isCustom) {
-      console.log("but it's custom");
       return;
     }
     const dateFormatType = this.documentDateFormatType;
@@ -209,7 +205,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
         .setNodeAttribute(pos, 'format', dateFormat)
         .setNodeAttribute(pos, 'custom', custom)
         .setNodeAttribute(pos, 'onlyDate', !formatContainsTime(dateFormat));
-    }, true);
+    });
   }
 
   @action
@@ -221,7 +217,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
     if (formatKey === 'custom') {
       this.controller.withTransaction((tr) => {
         return tr.setNodeAttribute(pos, 'custom', true);
-      }, true);
+      });
     } else {
       const format = this.formats.find((format) => format.key === formatKey);
       if (format) {
@@ -243,7 +239,7 @@ export default class RdfaDatePluginCardComponent extends Component<Args> {
         return tr
           .setNodeAttribute(pos, 'format', format)
           .setNodeAttribute(pos, 'onlyDate', !formatContainsTime(format));
-      }, true);
+      });
     }
   }
 

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

@@ -7,12 +7,3 @@
     {{t "date-plugin.insert.date"}}
   </AuButton>
 </AuList::Item>
-<AuList::Item>
-  <AuButton
-    @icon="add"
-    @iconAlignment="left"
-    @skin="link"
-    {{on 'click' (fn this.insertDate false)}}>
-    {{t "date-plugin.insert.datetime"}}
-  </AuButton>
-</AuList::Item>

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,20 @@ 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'));
-      });
+      this.controller.withTransaction(
+        (tr) => {
+          return tr.replaceRangeWith(0, 0, schema.node('table_of_contents'));
+        },
+        { view: this.controller.mainEditorView }
+      );
     }
   }
 }

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

@@ -23,6 +23,7 @@ export const articleParagraphSpec: StructureSpec = {
     remove: 'article-structure-plugin.remove.paragraph',
   },
   continuous: true,
+  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],
     ];
   },