Handle section breaks when pasted as dashes or from Word

blocks/edit/prose/index.js

@@ -1,8 +1,10 @@
 /* eslint-disable max-classes-per-file */
 import {
+ DOMParser,
  EditorState,
  EditorView,
  Schema,
+ TextSelection,
  baseSchema,
  history,
  buildKeymap,
@@ -17,6 +19,8 @@ import {
  liftListItem,
  sinkListItem,
  gapCursor,
+ InputRule,
+ inputRules,
  Y,
  WebsocketProvider,
  ySyncPlugin,
@@ -31,6 +35,7 @@ import prose2aem from '../../shared/prose2aem.js';
 import menu from './plugins/menu.js';
 import imageDrop from './plugins/imageDrop.js';
 import linkConverter from './plugins/linkConverter.js';
+import sectionPasteHandler from './plugins/sectionPasteHandler.js';
 import { COLLAB_ORIGIN, getDaAdmin } from '../../shared/constants.js';
 import { addLocNodes, getLocClass } from './loc-utils.js';
 
@@ -204,6 +209,36 @@ function generateColor(name, hRange = [0, 360], sRange = [60, 80], lRange = [40,
  return `#${f(0)}${f(8)}${f(4)}`;
 }
 
+export function getDashesInputRule() {
+ return new InputRule(
+ /^---[\n]$/,
+ (state, match, start, end) => {
+ const div = document.createElement('div');
+ div.append(document.createElement('hr'));
+ const newNodes = DOMParser.fromSchema(state.schema).parse(div);
+
+ const selection = TextSelection.create(state.doc, start, end);
+ dispatchTransaction(state.tr.setSelection(selection).replaceSelectionWith(newNodes));
+ },
+ );
+}
+
+// This function returns a modified inputrule plugin that triggers when the regex in the
+// rule matches and the Enter key is pressed
+export function getEnterInputRulesPlugin() {
+ const irsplugin = inputRules({ rules: [getDashesInputRule()] });
+
+ const hkd = (view, event) => {
+ if (event.key !== 'Enter') return false;
+ const { $cursor } = view.state.selection;
+ if ($cursor) return irsplugin.props.handleTextInput(view, $cursor.pos, $cursor.pos, '\n');
+ return false;
+ };
+ irsplugin.props.handleKeyDown = hkd; // Add the handleKeyDown function
+
+ return irsplugin;
+}
+
 export default function initProse({ editor, path }) {
  // Destroy ProseMirror if it already exists - GH-212
  if (window.view) delete window.view;
@@ -264,8 +299,10 @@ export default function initProse({ editor, path }) {
  menu,
  imageDrop(schema),
  linkConverter(schema),
+ sectionPasteHandler(schema),
  columnResizing(),
  tableEditing(),
+ getEnterInputRulesPlugin(),
  keymap(buildKeymap(schema)),
  keymap(baseKeymap),
  keymap({

blocks/edit/prose/plugins/sectionPasteHandler.js

@@ -0,0 +1,153 @@
+import { Plugin, Slice } from 'da-y-wrapper';
+
+function closeParagraph(paraContent, newContent) {
+ if (paraContent.length > 0) {
+ const newPara = {
+ type: 'paragraph',
+ content: [...paraContent],
+ };
+ newContent.push(newPara);
+ paraContent.length = 0;
+ }
+}
+
+/**
+ * Find section breaks in HTML pasted from desktop Word and add a horizontal rule
+ * after each one.
+ * In Desktop Word each section is represented as a top-level div element, right
+ * under the body element.
+ */
+function handleDesktopWordSectionBreaks(html) {
+ try {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, 'text/html');
+
+ if (doc.querySelector('meta[name="ProgId"]')?.content !== 'Word.Document') {
+ // This is not a word document
+ return html;
+ }
+
+ let modified = false;
+ // Add a hr element after all top-level div elements
+ const sections = doc.querySelectorAll('body > div');
+ sections.forEach((section) => {
+ if (section.nextElementSibling) {
+ // only add the hr if there is something after the section
+ section.after(doc.createElement('hr'));
+ modified = true;
+ }
+ });
+
+ if (!modified) {
+ return html;
+ }
+
+ const serializer = new XMLSerializer();
+ return serializer.serializeToString(doc);
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('Error handling desktop Word section breaks:', error);
+ return html;
+ }
+}
+
+/**
+ * Find section breaks in HTML pasted from Word online and add a horizontal rule
+ * after each one.
+ * In Word online section breaks are quite hard to identify, but it turns out that
+ * they seem to be indicated by a span element with a data-ccp-props attribute, of
+ * which one of the values is 'single'. This is quite brittle but right now seems
+ * to be the only way to find them. In the future Word online might provide a
+ * better way to identify section breaks.
+ */
+function handleWordOnlineSectionBreaks(html) {
+ try {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, 'text/html');
+
+ let modified = false;
+ // The span[data-ccp-props] are the magic indicator if one of the JSON values in there is the
+ // word 'single' then we need to add a section break.
+ const sections = doc.querySelectorAll('div > p > span[data-ccp-props]');
+ sections.forEach((section) => {
+ const props = JSON.parse(section.getAttribute('data-ccp-props'));
+ for (const key of Object.keys(props)) {
+ if (props[key] === 'single') {
+ const hr = doc.createElement('hr');
+ section.parentNode.after(hr);
+ modified = true;
+ break;
+ }
+ }
+ });
+
+ if (!modified) {
+ return html;
+ }
+
+ const serializer = new XMLSerializer();
+ return serializer.serializeToString(doc);
+ } catch (error) {
+ // eslint-disable-next-line no-console
+ console.error('Error handling Word online section breaks:', error);
+ return html;
+ }
+}
+
+/* When text is pasted, handle section breaks. */
+export default function sectionPasteHandler(schema) {
+ return new Plugin({
+ props: {
+ /* A section break entered in Word is not kept in the text of the document, but
+ * buried in the HTML that is pasted. This function uses highly specific ways to find
+ * these section breaks and adds a <hr/> element for them.
+ */
+ transformPastedHTML: (html) => {
+ const newHTML = handleDesktopWordSectionBreaks(html);
+ const newHTML2 = handleWordOnlineSectionBreaks(newHTML);
+ return newHTML2;
+ },
+
+ /* Convert 3 dashes on a line by itself (top level only) to a horizontal rule,
+ * which is then interpreted as a section break.
+ */
+ transformPasted: (slice) => {
+ const jslice = slice.toJSON();
+ const { content } = jslice;
+ if (!content) return slice;
+
+ const newContent = [];
+
+ for (const el of content) {
+ if (el.type !== 'paragraph') {
+ newContent.push(el);
+ } else {
+ const newParaCont = [];
+
+ for (const pc of el.content) {
+ if (pc.type !== 'text') {
+ newParaCont.push(pc);
+ } else if (pc.text.trim() === '---') {
+ closeParagraph(newParaCont, newContent);
+
+ newContent.push({ type: 'horizontal_rule' });
+ } else {
+ newParaCont.push(pc);
+ }
+ }
+
+ closeParagraph(newParaCont, newContent);
+ }
+ }
+
+ const newSlice = {
+ content: newContent,
+ openStart: slice.openStart,
+ openEnd: slice.openEnd,
+ };
+
+ return Slice.fromJSON(schema, newSlice);
+ },
+ },
+ });
+}

deps/da-y-wrapper/src/index.js

@@ -44,6 +44,8 @@ import {
 
 import { MenuItem, Dropdown, renderGrouped, blockTypeItem } from '../../prosemirror-menu/dist/index.js';
 
+import { InputRule, inputRules } from 'prosemirror-inputrules';
+
 // All exported
 export {
  EditorView,
@@ -87,6 +89,8 @@ export {
  sinkListItem,
  undo,
  redo,
+ InputRule,
+ inputRules,
  Y,
  WebsocketProvider,
  ySyncPlugin,

test/e2e/tests/edit.spec.js

@@ -108,6 +108,7 @@ test('Change document by switching anchors', async ({ page }, workerInfo) => {
  await page.waitForTimeout(3000);
  await expect(page.locator('div.ProseMirror')).toBeVisible();
  await expect(page.locator('div.ProseMirror')).toContainText('mytable');
+ await page.waitForTimeout(2000);
  await expect(page.locator('div.ProseMirror')).toContainText('k 2');
  await expect(page.locator('div.ProseMirror')).toContainText('v 2');
 

test/unit/blocks/edit/proseCollab.test.js

@@ -97,4 +97,35 @@ describe('Prose collab', () => {
  window.setInterval = savedSetInterval;
  }
  });
+
+ it('Test Enter InputRules plugin', () => {
+ const result = {};
+ const hti = (v, f, t, txt) => {
+ result.view = v;
+ result.from = f;
+ result.to = t;
+ result.text = txt;
+ return true;
+ };
+
+ const plugin = pi.getEnterInputRulesPlugin();
+ plugin.props.handleTextInput = hti;
+
+ const hkdFunc = plugin.props.handleKeyDown;
+
+ const mockView = { state: { selection: { $cursor: { pos: 12345 } } } };
+ const mockEvent = { key: 'Enter' };
+
+ expect(hkdFunc(mockView, mockEvent)).to.be.true;
+ expect(result.view).to.equal(mockView);
+ expect(result.from).to.equal(12345);
+ expect(result.to).to.equal(12345);
+ expect(result.text).to.equal('\n');
+ });
+
+ it('Test Dashes InputRule', () => {
+ const dir = pi.getDashesInputRule();
+ const { match } = dir;
+ expect(match.toString()).to.equal('/^---[\\n]$/');
+ });
 });