@squiz/formatted-text-editor 1.65.0 → 1.66.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.66.0
+
+### Minor Changes
+
+- a5b0869: Update fte toolbar to max height 100% so that it can be flexible at any width and position placeholder
+
+## 1.65.1
+
+### Patch Changes
+
+- 402e8b1: Fixed issue where some Remirror text alignment options (eg. start and end) were not correctly transformed to Squiz formatted text structure.
+
 ## 1.65.0
 
 ### Minor Changes

package/lib/index.css

@@ -822,6 +822,7 @@
   outline-width: 0px;
 }
 .squiz-fte-scope.squiz-fte-scope__editor .remirror-editor p {
+  position: relative;
   display: block;
 }
 .squiz-fte-scope.squiz-fte-scope__editor--bordered {
@@ -909,7 +910,7 @@
 }
 .squiz-fte-scope .header-toolbar.show-toolbar {
   opacity: 1;
-  max-height: 15vh;
+  max-height: 108px;
 }
 .squiz-fte-scope__floating-popover {
   display: flex;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -29,8 +29,18 @@ const resolveNodeTag = (node) => {
 exports.resolveNodeTag = resolveNodeTag;
 const resolveFormattingOptions = (node) => {
     const formattingOptions = {};
-    if (node.attrs.nodeTextAlignment) {
-        formattingOptions.alignment = node.attrs.nodeTextAlignment;
+    const textAlignment = node.attrs.nodeTextAlignment;
+    const textAlignmentMap = {
+        none: undefined,
+        left: 'left',
+        right: 'right',
+        center: 'center',
+        start: 'left',
+        end: 'right',
+        justify: 'justify',
+    };
+    if (textAlignment && textAlignmentMap[textAlignment]) {
+        formattingOptions.alignment = textAlignmentMap[textAlignment];
     }
     return formattingOptions;
 };

package/package.json

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

package/src/Editor/_editor.scss

@@ -23,6 +23,7 @@
     }
 
     p {
+      position: relative; // ensures that the placeholder text is positioned correctly
       /* Make sure content aligned with "text-align: justify" is justified */
       @apply block;
     }

package/src/EditorToolbar/_toolbar.scss

@@ -32,6 +32,6 @@
 
   &.show-toolbar {
     opacity: 1;
-    max-height: 15vh;
+    max-height: 108px; // this should mean at least 3 icons can git vertically if needed
   }
 }

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

@@ -6,6 +6,7 @@ import { sharedNodeExamples } from '../mocks/squizNodeJson.mock';
 import { ParagraphExtension, SupExtension } from 'remirror/extensions';
 
 type FormattedText = FormattedTextModels.v1.FormattedText;
+type FormattingOptions = FormattedTextModels.v1.FormattingOptions;
 
 describe('remirrorNodeToSquizNode', () => {
   it('should convert a simple Remirror node to a Squiz component JSON object', async () => {
@@ -397,50 +398,60 @@ describe('remirrorNodeToSquizNode', () => {
     expect(result).toEqual(expected);
   });
 
-  describe('preserve text formatting', () => {
-    it('should preserve text alignment', async () => {
-      const content: RemirrorJSON = {
-        type: 'doc',
-        content: [
-          {
-            type: 'paragraph',
-            attrs: {
-              nodeIndent: null,
-              nodeTextAlignment: 'center',
-              nodeLineHeight: null,
-              style: '',
+  describe('preserve text formatting - %s', () => {
+    it.each([
+      ['left', { alignment: 'left' } as FormattingOptions],
+      ['right', { alignment: 'right' } as FormattingOptions],
+      ['center', { alignment: 'center' } as FormattingOptions],
+      ['justify', { alignment: 'justify' } as FormattingOptions],
+      ['start', { alignment: 'left' } as FormattingOptions],
+      ['end', { alignment: 'right' } as FormattingOptions],
+      ['none', undefined],
+      [undefined, undefined],
+    ])(
+      'should preserve text alignment',
+      async (remirrorTextAlignment: string | undefined, expectedFormattingOptions: FormattingOptions | undefined) => {
+        const content: RemirrorJSON = {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              attrs: {
+                nodeIndent: null,
+                nodeTextAlignment: remirrorTextAlignment,
+                nodeLineHeight: null,
+                style: '',
+              },
+              content: [
+                {
+                  type: 'text',
+                  text: 'Hello world!',
+                },
+              ],
             },
-            content: [
+          ],
+        };
+
+        const { editor } = await renderWithEditor(null, { content });
+
+        const expected: FormattedText = [
+          {
+            children: [
               {
                 type: 'text',
-                text: 'Hello world!',
+                value: 'Hello world!',
               },
             ],
+            formattingOptions: expectedFormattingOptions,
+            type: 'tag',
+            tag: 'p',
           },
-        ],
-      };
-
-      const { editor } = await renderWithEditor(null, { content });
-
-      const expected: FormattedText = [
-        {
-          children: [
-            {
-              type: 'text',
-              value: 'Hello world!',
-            },
-          ],
-          formattingOptions: {
-            alignment: 'center',
-          },
-          type: 'tag',
-          tag: 'p',
-        },
-      ];
+        ];
 
-      const result = remirrorNodeToSquizNode(editor.doc);
-      expect(result).toEqual(expected);
-    });
+        const result = remirrorNodeToSquizNode(editor.doc);
+        expect(result).toEqual(expected);
+      },
+    );
   });
 
   it('should handle invalid Remirror node provided', () => {

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

@@ -14,6 +14,8 @@ type FormattedText = FormattedTextModels.v1.FormattedText;
 type FormattedNode = FormattedTextModels.v1.FormattedNodes;
 type FormattedNodeFontProperties = FormattedTextModels.v1.FormattedNodeFontProperties;
 type FormattedNodeWithChildren = Extract<FormattedNode, { children: FormattedNode[] }>;
+type RemirrorTextAlignment = Exclude<Remirror.Attributes['nodeTextAlignment'], undefined>;
+type FormattedTextAlignment = FormattingOptions['alignment'];
 
 export const resolveNodeTag = (node: ProsemirrorNode): string => {
   if (node.type.name === NodeName.Text) {
@@ -46,9 +48,19 @@ export const resolveNodeTag = (node: ProsemirrorNode): string => {
 
 const resolveFormattingOptions = (node: ProsemirrorNode): FormattingOptions => {
   const formattingOptions: FormattingOptions = {};
+  const textAlignment = node.attrs.nodeTextAlignment as RemirrorTextAlignment | undefined;
+  const textAlignmentMap: Record<RemirrorTextAlignment, FormattedTextAlignment> = {
+    none: undefined,
+    left: 'left',
+    right: 'right',
+    center: 'center',
+    start: 'left',
+    end: 'right',
+    justify: 'justify',
+  };
 
-  if (node.attrs.nodeTextAlignment) {
-    formattingOptions.alignment = node.attrs.nodeTextAlignment;
+  if (textAlignment && textAlignmentMap[textAlignment]) {
+    formattingOptions.alignment = textAlignmentMap[textAlignment];
   }
 
   return formattingOptions;