@squiz/formatted-text-editor 1.21.1-alpha.2 → 1.21.1-alpha.21

package/src/ui/Modal/Modal.tsx

@@ -2,6 +2,7 @@ import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } fro
 import { createPortal } from 'react-dom';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { FocusTrap } from '@mui/base';
+import clsx from 'clsx';
 
 export type ModalProps = {
   title: string;
@@ -50,7 +51,7 @@ const Modal = (
   return createPortal(
     <>
       <FocusTrap open>
-        <div ref={ref} className={`squiz-fte-modal-wrapper ${className ? className : ''}`} tabIndex={-1}>
+        <div ref={ref} className={clsx('squiz-fte-modal-wrapper', className)} tabIndex={-1}>
           <div className="w-modal-sm my-6 mx-auto">
             <div className="squiz-fte-modal">
               <div className="squiz-fte-modal-header p-6 pb-2">

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,6 +1,6 @@
 .toolbar-dropdown {
   &__button {
-    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    @apply flex items-center font-base text-md font-semibold text-gray-600 rounded;
     align-self: center;
 
     height: 2rem;

package/src/ui/_forms.scss

@@ -13,4 +13,18 @@
       box-shadow: none;
     }
   }
+  &-invalid-form-field {
+    .squiz-fte-form-control {
+      @apply border-red-300 bg-no-repeat;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
+      background-position: top 0.25rem right 0.25rem;
+      background-size: 1.5rem;
+    }
+  }
+  &-form-error {
+    @apply text-red-300;
+    font-size: 13px;
+    line-height: 1.23;
+    padding-top: 0.25rem;
+  }
 }

package/src/ui/_typography.scss

@@ -0,0 +1,46 @@
+a {
+  @apply text-blue-300;
+  text-decoration: underline;
+}
+
+h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+
+h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}

package/src/utils/converters/mocks/squizNodeJson.mock.ts

@@ -0,0 +1,252 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { RemirrorJSON } from '@remirror/core';
+
+export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
+  {
+    children: [
+      {
+        type: 'text',
+        value: 'Hello ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Mr Bean',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        font: {
+          bold: true,
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: ', nice to ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'meet you',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: '.',
+      },
+      {
+        children: [],
+        attributes: {
+          alt: 'Test',
+          height: '150',
+          width: '200',
+          src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+          title: '',
+          resizable: 'false',
+        },
+        type: 'tag',
+        tag: 'img',
+      },
+    ],
+    type: 'tag',
+    tag: 'p',
+  },
+];
+
+export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
+  {
+    value: 'Hello world!',
+    type: 'text',
+  },
+  {
+    value: 'Another one...',
+    type: 'text',
+  },
+];
+
+type NodeExample = {
+  description: string;
+  remirrorNode: RemirrorJSON;
+  squizNode: FormattedTextModels.v1.FormattedText;
+};
+
+export const sharedNodeExamples: NodeExample[] = [
+  {
+    description: 'Asset link',
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+    squizNode: [
+      {
+        type: 'link-to-matrix-asset',
+        target: '_blank',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+        children: [{ type: 'text', value: 'Hello' }],
+      },
+    ],
+  },
+  {
+    description: 'Asset link with formatting applied inside of the link',
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        { type: 'bold' },
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+    squizNode: [
+      {
+        type: 'link-to-matrix-asset',
+        target: '_blank',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+        children: [
+          {
+            type: 'tag',
+            tag: 'span',
+            font: { bold: true },
+            children: [{ type: 'text', value: 'Hello' }],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const squizOnlyNodeExamples: NodeExample[] = [
+  {
+    description: 'Asset link with formatting applied inside, outside and with multiple levels of nesting',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        font: { bold: true },
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                font: { italics: true },
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    font: { underline: true },
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      // reverse operation covered by "Asset link with formatting applied inside of the link".
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        { type: 'underline' },
+        { type: 'italic' },
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+        { type: 'bold' },
+      ],
+    },
+  },
+  {
+    description: 'Asset link with multiple levels of un-necessary nesting',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      // reverse operation covered by "Asset link".
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+  },
+];