@squiz/formatted-text-editor 1.21.1-alpha.41 → 1.21.1-alpha.43

package/lib/EditorToolbar/Tools/Image/ImageModal.js

@@ -11,10 +11,11 @@ const Extensions_1 = require("../../../Extensions/Extensions");
 const ImageModal = ({ onCancel, onSubmit }) => {
     const selection = (0, react_2.useCurrentSelection)();
     const currentImage = selection?.node;
+    const currentImageAttrs = { ...currentImage?.attrs };
     const formData = {
         imageType: currentImage?.type.name === Extensions_1.NodeName.AssetImage ? Extensions_1.NodeName.AssetImage : Extensions_1.NodeName.Image,
-        image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImage?.attrs : {},
-        assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImage?.attrs : {},
+        image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImageAttrs : {},
+        assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImageAttrs : {},
     };
     return (react_1.default.createElement(FormModal_1.default, { title: "Image", onCancel: onCancel },
         react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));

package/lib/EditorToolbar/Tools/Link/LinkModal.js

@@ -16,8 +16,8 @@ const LinkModal = ({ onCancel, onSubmit }) => {
     const data = {
         linkType: marks[0]?.type?.name === Extensions_1.MarkName.AssetLink ? Extensions_1.MarkName.AssetLink : Extensions_1.MarkName.Link,
         text: selectedText,
-        link: marks.find((mark) => mark.type.name === 'link')?.attrs || {},
-        assetLink: marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink)?.attrs || {},
+        link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
+        assetLink: { ...marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink)?.attrs },
         range: { from: selection.from, to: selection.to },
     };
     return (react_1.default.createElement(FormModal_1.default, { title: "Link", onCancel: onCancel },

package/lib/Extensions/PreformattedExtension/PreformattedExtension.js

@@ -24,9 +24,13 @@ let PreformattedExtension = class PreformattedExtension extends core_1.NodeExten
             attrs: {
                 ...extra.defaults(),
             },
-            parseDOM: [...(override.parseDOM ?? [])],
+            parseDOM: [
+                {
+                    tag: 'pre',
+                },
+            ],
             toDOM: (node) => {
-                return [`pre`, extra.dom(node), 0];
+                return ['pre', extra.dom(node), 0];
             },
         };
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.41",
+  "version": "1.21.1-alpha.43",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "d42eea53de5e9ccc4e3b3e59f45fffa06baaa00f"
+  "gitHead": "061e03f271b17ef1449370217bc5ee3dd92c0f62"
 }

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { screen, fireEvent, waitForElementToBeRemoved, act } from '@testing-library/react';
+import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
 import { renderWithEditor, select } from '../../../../tests';
@@ -82,10 +82,43 @@ describe('ImageButton', () => {
     await openModal();
     fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/303.jpg' } });
     fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: 'Updated cats!' } });
+
+    // wait for the new image dimensions to be calculated
+    await waitFor(() => expect(screen.getByLabelText('Height')).toHaveValue(2));
+
+    // verify the content matches what was initially set prior to applying
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'image',
+          attrs: {
+            alt: 'hi',
+            crop: null,
+            height: null,
+            width: null,
+            rotate: null,
+            src: 'https://httpcats.com/529.jpg',
+            title: '',
+            fileName: null,
+            resizable: false,
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+
+    // apply the changes
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
 
+    // asset the content has been updated
     expect(getJsonContent()).toEqual({
       type: 'paragraph',
       attrs: expect.any(Object),

package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx

@@ -11,8 +11,8 @@ beforeEach(() => {
 });
 const mockSubmitFunction = jest.fn();
 const mockCancelFunction = jest.fn();
-const setup = () => {
-  const utils = renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+const setup = async () => {
+  const utils = await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
   const sourceInput = screen.getByRole('textbox', { name: /source/i }) as HTMLInputElement;
   const altInput = screen.getByRole('textbox', { name: /alt/i }) as HTMLInputElement;
   const widthInput = screen.getByRole('spinbutton', { name: /Width/i }) as HTMLInputElement;
@@ -34,7 +34,7 @@ describe('ImageModal', () => {
   });
 
   it('Populates the source field when a source is supplied', async () => {
-    const { sourceInput } = setup();
+    const { sourceInput } = await setup();
     fireEvent.change(sourceInput, { target: { value: 'https://httpcats.com/302.jpg' } });
     await waitFor(() => {
       expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
@@ -42,7 +42,7 @@ describe('ImageModal', () => {
   });
 
   it('Renders empty width and height fields if the image source is empty', async () => {
-    const { sourceInput, widthInput, heightInput } = setup();
+    const { sourceInput, widthInput, heightInput } = await setup();
     fireEvent.change(sourceInput, { target: { value: '' } });
     await waitFor(() => {
       expect(widthInput.value).toBe('');
@@ -51,7 +51,7 @@ describe('ImageModal', () => {
   });
 
   it('Updates the height field with aspect ratio based value from width', async () => {
-    const { widthInput, heightInput } = setup();
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(widthInput, { target: { value: '300' } });
     await waitFor(() => {
       expect(widthInput.value).toBe('300');
@@ -60,7 +60,7 @@ describe('ImageModal', () => {
   });
 
   it('Updates the width field with aspect ratio based value from height', async () => {
-    const { widthInput, heightInput } = setup();
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(heightInput, { target: { value: '100' } });
     await waitFor(() => {
       expect(heightInput.value).toBe('100');
@@ -68,8 +68,8 @@ describe('ImageModal', () => {
     });
   });
 
-  it('Does not change the width when height is changed and aspect ratio link is off', () => {
-    const { widthInput, heightInput } = setup();
+  it('Does not change the width when height is changed and aspect ratio link is off', async () => {
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(heightInput, { target: { value: '100' } });
     expect(heightInput.value).toBe('100');
     expect(widthInput.value).toBe('177.78');
@@ -79,8 +79,8 @@ describe('ImageModal', () => {
     expect(widthInput.value).toBe('177.78');
   });
 
-  it('Does not change the height when width is changed and aspect ratio link is off', () => {
-    const { widthInput, heightInput } = setup();
+  it('Does not change the height when width is changed and aspect ratio link is off', async () => {
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(widthInput, { target: { value: '450' } });
     expect(widthInput.value).toBe('450');
     expect(heightInput.value).toBe('253.13');
@@ -90,8 +90,8 @@ describe('ImageModal', () => {
     expect(heightInput.value).toBe('253.13');
   });
 
-  it('Changes the icon when aspect ratio button is toggled', () => {
-    renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+  it('Changes the icon when aspect ratio button is toggled', async () => {
+    await setup();
     expect(screen.getByTestId('InsertLinkRoundedIcon')).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
     expect(screen.queryByTestId('InsertLinkRoundedIcon')).not.toBeInTheDocument();
@@ -99,7 +99,7 @@ describe('ImageModal', () => {
   });
 
   it('Returns relevant error message if the width is not higher than 0', async () => {
-    const { widthInput } = setup();
+    const { widthInput } = await setup();
 
     fireEvent.change(widthInput, { target: { value: '0' } });
     fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
@@ -110,7 +110,7 @@ describe('ImageModal', () => {
   });
 
   it('Returns relevant error message if the height is not higher than 0', async () => {
-    const { heightInput } = setup();
+    const { heightInput } = await setup();
 
     fireEvent.change(heightInput, { target: { value: '0' } });
     fireEvent.click(screen.getByRole('button', { name: /Apply/i }));

package/src/EditorToolbar/Tools/Image/ImageModal.tsx

@@ -14,10 +14,11 @@ type ImageModalProps = {
 const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
   const selection = useCurrentSelection() as NodeSelection;
   const currentImage = selection?.node;
+  const currentImageAttrs = { ...currentImage?.attrs };
   const formData = {
     imageType: currentImage?.type.name === NodeName.AssetImage ? NodeName.AssetImage : NodeName.Image,
-    image: currentImage?.type?.name === NodeName.Image ? currentImage?.attrs : {},
-    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImage?.attrs : {},
+    image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
+    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
   };
 
   return (

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -58,6 +58,27 @@ describe('LinkButton', () => {
     await openModal();
     fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.example.org/updated-link' } });
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link' } });
+
+    // verify the content matches what was initially set prior to applying.
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Sample link',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
+            },
+          ],
+        },
+        { type: 'text', text: ' with some other content.' },
+      ],
+    });
+
+    // apply the changes.
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -21,8 +21,8 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
   const data = {
     linkType: marks[0]?.type?.name === MarkName.AssetLink ? MarkName.AssetLink : MarkName.Link,
     text: selectedText,
-    link: marks.find((mark) => mark.type.name === 'link')?.attrs || {},
-    assetLink: marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs || {},
+    link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
+    assetLink: { ...marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs },
     range: { from: selection.from, to: selection.to },
   };
 

package/src/Extensions/PreformattedExtension/PreformattedExtension.spec.ts

@@ -0,0 +1,41 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetLinkExtension', () => {
+  it('Parses HTML content with preformatted text', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<pre>This is some preformatted text</pre>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'preformatted',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'This is some preformatted text',
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'preformatted',
+            content: [
+              {
+                type: 'text',
+                text: 'This is some preformatted text',
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toBe('<pre style="">This is some preformatted text</pre>');
+  });
+});

package/src/Extensions/PreformattedExtension/PreformattedExtension.ts

@@ -30,9 +30,13 @@ export class PreformattedExtension extends NodeExtension {
       attrs: {
         ...extra.defaults(),
       },
-      parseDOM: [...(override.parseDOM ?? [])],
+      parseDOM: [
+        {
+          tag: 'pre',
+        },
+      ],
       toDOM: (node: ProsemirrorNode) => {
-        return [`pre`, extra.dom(node), 0];
+        return ['pre', extra.dom(node), 0];
       },
     };
   }