@squiz/formatted-text-editor 1.68.1 → 1.69.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.69.0
+
+### Minor Changes
+
+- 6b8b464: Added support for SHIFT + ENTER line breaks to FTE
+
 ## 1.68.1
 
 ### Patch Changes

package/lib/Extensions/Extensions.d.ts

@@ -6,6 +6,7 @@ export declare enum NodeName {
     CodeBlock = "codeBlock",
     AssetImage = "assetImage",
     Text = "text",
+    hardBreak = "hardBreak",
     Unsupported = "unsupportedNode"
 }
 export declare enum MarkName {

package/lib/Extensions/Extensions.js

@@ -18,6 +18,7 @@ var NodeName;
     NodeName["CodeBlock"] = "codeBlock";
     NodeName["AssetImage"] = "assetImage";
     NodeName["Text"] = "text";
+    NodeName["hardBreak"] = "hardBreak";
     NodeName["Unsupported"] = "unsupportedNode";
 })(NodeName = exports.NodeName || (exports.NodeName = {}));
 var MarkName;
@@ -35,6 +36,7 @@ const createExtensions = (context, browserContext) => {
             new extensions_1.ItalicExtension(),
             new extensions_1.NodeFormattingExtension({ indents: [] }),
             new extensions_1.ParagraphExtension(),
+            new extensions_1.HardBreakExtension(),
             new PreformattedExtension_1.PreformattedExtension(),
             new CodeBlockExtension_1.ExtendedCodeBlockExtension({ defaultWrap: true }),
             new extensions_1.UnderlineExtension(),

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -28,6 +28,7 @@ const getNodeType = (node) => {
         span: Extensions_1.NodeName.Text,
         strong: Extensions_1.NodeName.Text,
         code: Extensions_1.NodeName.CodeBlock,
+        br: Extensions_1.NodeName.hardBreak,
     };
     if (typeMap[node.type]) {
         return typeMap[node.type];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.68.1",
+  "version": "1.69.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

package/src/Editor/Editor.spec.tsx

@@ -233,6 +233,29 @@ describe('Formatted text editor', () => {
     expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
   });
 
+  it('Applies line break within text content when SHIFT+ENTER is used', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(null, {
+      content: 'Some nonsense content here',
+    });
+
+    await act(() => editor.jumpTo('end'));
+    await act(() => editor.press('Shift-Enter'));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Some nonsense content here',
+        },
+        {
+          type: 'hardBreak',
+        },
+      ],
+    });
+  });
+
   it('should allow text to be pasted into the editor', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
       content: 'Some nonsense content here',

package/src/Extensions/Extensions.ts

@@ -13,6 +13,7 @@ import {
   PlaceholderExtension,
   HorizontalRuleExtension,
   TextExtension,
+  HardBreakExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -32,6 +33,7 @@ export enum NodeName {
   CodeBlock = 'codeBlock',
   AssetImage = 'assetImage',
   Text = 'text',
+  hardBreak = 'hardBreak',
   Unsupported = 'unsupportedNode',
 }
 
@@ -50,6 +52,7 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
       new ItalicExtension(),
       new NodeFormattingExtension({ indents: [] }),
       new ParagraphExtension(),
+      new HardBreakExtension(),
       new PreformattedExtension(),
       new ExtendedCodeBlockExtension({ defaultWrap: true }),
       new UnderlineExtension(),

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.spec.ts

@@ -131,8 +131,7 @@ describe('htmlToSquizNode', () => {
     [
       'nested block level tags are un-nested/normalised to a supported structure',
       "<div><p>Div tags are not support, <p>Nested block element also aren't</p></p>" +
-        '<span>Span tags are not supported</span><br />' +
-        'Break lines also, you got it, not supported.',
+        '<span>Span tags are not supported</span>',
       [
         {
           children: [
@@ -163,7 +162,7 @@ describe('htmlToSquizNode', () => {
           children: [
             {
               type: 'text',
-              value: 'Span tags are not supported Break lines also, you got it, not supported.',
+              value: 'Span tags are not supported',
             },
           ],
           tag: 'p',

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts

@@ -112,6 +112,30 @@ describe('remirrorNodeToSquizNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle line break formatting', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'hardBreak',
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'br',
+        children: [],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle images', async () => {
     const content: RemirrorJSON = {
       type: 'doc',

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts

@@ -213,6 +213,29 @@ describe('squizNodeToRemirrorNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle line breaks', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [],
+        type: 'tag',
+        tag: 'br',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: expect.any(Object),
+          type: 'hardBreak',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle pre formatted text', () => {
     const squizComponentJSON: FormattedText = [
       {

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -33,6 +33,7 @@ const getNodeType = (node: FormattedNodes): string => {
     span: NodeName.Text,
     strong: NodeName.Text,
     code: NodeName.CodeBlock,
+    br: NodeName.hardBreak,
   };
 
   if (typeMap[node.type]) {

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -26,6 +26,7 @@ describe('getNodeNamesByGroup', () => {
       'listItem',
       'orderedList',
       'horizontalRule',
+      'hardBreak',
     ]);
   });
 });