feat(editor): add hard break plugin

Author: cdskill

apps/sandbox/src/app/app.spec.ts

@@ -4,6 +4,7 @@ import {
   CODE_BLOCK_PLUGIN_DEFAULT_OPTIONS,
   ClearFormattingPlugin,
   CodeBlockPlugin,
+  HardBreakPlugin,
   HEADINGS_PLUGIN_DEFAULT_OPTIONS,
   HeadingsPlugin,
   HISTORY_PLUGIN_DEFAULT_OPTIONS,
@@ -213,6 +214,122 @@ describe('App', () => {
     editor.unmount(host);
   });
 
+  it('should expose hard break commands through the public plugin', () => {
+    const editor = createRteEditor({
+      content: '<p>Angular RTE</p>',
+      plugins: [HardBreakPlugin],
+    });
+    const host = document.createElement('div');
+
+    editor.mount(host);
+
+    expect(HardBreakPlugin.key).toBe('hardBreak');
+    expect(editor.canExecute('insertHardBreak')).toBeTrue();
+    expect(editor.execute('insertHardBreak')).toBeTrue();
+    expect(editor.html()).toBe('<p><br>Angular RTE</p>');
+
+    editor.unmount(host);
+  });
+
+  it('should parse serialized hard breaks through the public plugin', () => {
+    const editor = createRteEditor({
+      content: '<p>Line one<br>Line two</p>',
+      plugins: [HardBreakPlugin],
+    });
+    const host = document.createElement('div');
+
+    editor.mount(host);
+
+    expect(editor.html()).toBe('<p>Line one<br>Line two</p>');
+
+    editor.unmount(host);
+  });
+
+  it('should insert hard breaks with Shift+Enter', () => {
+    const editor = createRteEditor({
+      content: '<p>Angular RTE</p>',
+      plugins: [HardBreakPlugin],
+    });
+    const host = document.createElement('div');
+
+    editor.mount(host);
+
+    const surface = host.querySelector('.ProseMirror');
+    const shiftEnterEvent = new KeyboardEvent('keydown', {
+      bubbles: true,
+      cancelable: true,
+      key: 'Enter',
+      shiftKey: true,
+    });
+
+    surface?.dispatchEvent(shiftEnterEvent);
+
+    expect(shiftEnterEvent.defaultPrevented).toBeTrue();
+    expect(editor.html()).toBe('<p><br>Angular RTE</p>');
+
+    editor.unmount(host);
+  });
+
+  it('should keep Shift+Enter out of code blocks', () => {
+    const editor = createRteEditor({
+      content:
+        '<pre><code class="language-typescript">const answer = 42;</code></pre>',
+      plugins: [
+        CodeBlockPlugin.configure({
+          languages: ['plaintext', 'typescript'],
+          defaultLanguage: 'typescript',
+        }),
+        HardBreakPlugin,
+      ],
+    });
+    const host = document.createElement('div');
+
+    editor.mount(host);
+
+    const surface = host.querySelector('.ProseMirror');
+    const shiftEnterEvent = new KeyboardEvent('keydown', {
+      bubbles: true,
+      cancelable: true,
+      key: 'Enter',
+      shiftKey: true,
+    });
+
+    surface?.dispatchEvent(shiftEnterEvent);
+
+    expect(shiftEnterEvent.defaultPrevented).toBeFalse();
+    expect(editor.canExecute('insertHardBreak')).toBeFalse();
+    expect(editor.html()).toBe(
+      '<pre><code class="language-typescript">const answer = 42;</code></pre>',
+    );
+
+    editor.unmount(host);
+  });
+
+  it('should preserve code block line breaks when clearing formatting with hard breaks enabled', () => {
+    const editor = createRteEditor({
+      content:
+        '<pre><code class="language-typescript">const first = 1;&#10;const second = 2;</code></pre>',
+      plugins: [
+        CodeBlockPlugin.configure({
+          languages: ['plaintext', 'typescript'],
+          defaultLanguage: 'typescript',
+        }),
+        HardBreakPlugin,
+        ClearFormattingPlugin,
+      ],
+    });
+    const host = document.createElement('div');
+
+    editor.mount(host);
+
+    expect(editor.execute('clearFormatting')).toBeTrue();
+    expect(editor.html()).toBe(
+      '<p>const first = 1;<br>const second = 2;</p>',
+    );
+
+    editor.unmount(host);
+  });
+
   it('should parse serialized code blocks through the public plugin', () => {
     const snippet = [
       'package main',

apps/sandbox/src/app/sandbox-editor.ts

@@ -3,6 +3,7 @@ import {
   BlockquotePlugin,
   ClearFormattingPlugin,
   CodeBlockPlugin,
+  HardBreakPlugin,
   HeadingsPlugin,
   HistoryPlugin,
   LinkPlugin,
@@ -81,6 +82,7 @@ export class SandboxEditor {
         languages: SANDBOX_CODE_BLOCK_LANGUAGE_VALUES,
         defaultLanguage: SANDBOX_DEFAULT_CODE_BLOCK_LANGUAGE,
       }),
+      HardBreakPlugin,
       ClearFormattingPlugin,
       SandboxCodeHighlightPlugin,
       HistoryPlugin.configure({

libs/editor/src/index.ts

@@ -6,6 +6,7 @@ export * from './lib/editor/toolbar';
 export * from './lib/plugins/blockquote';
 export * from './lib/plugins/clear-formatting';
 export * from './lib/plugins/code-block';
+export * from './lib/plugins/hard-break';
 export * from './lib/plugins/history';
 export * from './lib/plugins/headings';
 export * from './lib/plugins/link';

libs/editor/src/lib/plugins/hard-break.ts

@@ -0,0 +1,57 @@
+import { NodeSpec, NodeType } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+
+import { createRtePlugin, RteCommandHandler, RtePlugin } from './rte-plugin';
+
+const hardBreakNode: NodeSpec = {
+  inline: true,
+  group: 'inline',
+  selectable: false,
+  linebreakReplacement: true,
+  parseDOM: [{ tag: 'br' }],
+  toDOM: () => ['br'],
+  leafText: () => '\n',
+};
+
+export const HardBreakPlugin = createRtePlugin({
+  key: 'hardBreak',
+  nodes: {
+    hardBreak: hardBreakNode,
+  },
+  commands: (schema) => ({
+    insertHardBreak: createInsertHardBreakCommand(schema.nodes['hardBreak']),
+  }),
+  shortcuts: (schema) => ({
+    'Shift-Enter': createInsertHardBreakCommand(schema.nodes['hardBreak']),
+  }),
+});
+
+export const HardBreakKit: readonly RtePlugin[] = [HardBreakPlugin];
+
+function createInsertHardBreakCommand(
+  hardBreak: NodeType,
+): RteCommandHandler {
+  return (state, dispatch) => {
+    if (!canInsertHardBreak(state, hardBreak)) {
+      return false;
+    }
+
+    if (dispatch) {
+      dispatch(
+        state.tr.replaceSelectionWith(hardBreak.create()).scrollIntoView(),
+      );
+    }
+
+    return true;
+  };
+}
+
+function canInsertHardBreak(state: EditorState, hardBreak: NodeType): boolean {
+  const { $from, $to } = state.selection;
+
+  return (
+    $from.sameParent($to) &&
+    $from.parent.inlineContent &&
+    $from.parent.canReplaceWith($from.index(), $to.index(), hardBreak)
+  );
+}