@squiz/formatted-text-editor 1.34.1-alpha.1 → 1.34.1-alpha.10

package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CheckIcon from '@mui/icons-material/Check';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 
 type DropdownButtonProps = {
   children?: JSX.Element;
@@ -7,9 +7,10 @@ type DropdownButtonProps = {
   isDisabled: boolean;
   isActive: boolean;
   label: string;
+  icon?: JSX.Element;
 };
 
-const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => {
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => {
   return (
     <button
       aria-label={label}
@@ -20,8 +21,11 @@ const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }
       disabled={isDisabled}
       className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
     >
-      <span>{children || label}</span>
-      {isActive && <CheckIcon className="dropdown-button-icon" />}
+      <div className="dropdown-button-label">
+        {icon && icon}
+        {children || label}
+      </div>
+      {isActive && <CheckRoundedIcon className="dropdown-button-icon" />}
     </button>
   );
 };

package/src/ui/ToolbarDropdownButton/_toolbar-dropdown-button.scss

@@ -11,4 +11,15 @@
   &:focus {
     background-color: rgba(black, 0.04);
   }
+
+  svg {
+    font-size: 18px;
+  }
+
+  .dropdown-button-label {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    gap: 5px;
+  }
 }

package/src/ui/_typography.scss

@@ -44,3 +44,29 @@ h6 {
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+
+.code-block,
+.preformatted {
+  display: flex;
+
+  .material-symbols-rounded {
+    @apply text-gray-700 text-xlg;
+    pointer-events: none;
+    margin-right: 0.375rem;
+  }
+
+  .block-divider {
+    @apply bg-gray-200;
+    width: 4px;
+    border-radius: 0.75rem;
+    margin-right: 0.625rem;
+  }
+
+  code,
+  pre {
+    @apply text-gray-700;
+    font-size: 0.75rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}

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

@@ -74,6 +74,43 @@ describe('remirrorNodeToSquizNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle code block formatting', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: 'js',
+            wrap: true,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'code',
+        children: [{ type: 'text', value: 'Hello world' }],
+        attributes: {
+          language: 'js',
+        },
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle images', async () => {
     const content: RemirrorJSON = {
       type: 'doc',

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

@@ -16,10 +16,14 @@ type FormattedNodeFontProperties = FormattedTextModels.v1.FormattedNodeFontPrope
 type FormattedNodeWithChildren = Extract<FormattedNode, { children: FormattedNode[] }>;
 
 export const resolveNodeTag = (node: ProsemirrorNode): string => {
-  if (node.type.name === 'text') {
+  if (node.type.name === NodeName.Text) {
     return 'span';
   }
 
+  if (node.type.name === NodeName.CodeBlock) {
+    return 'code';
+  }
+
   if (node.type.spec?.toDOM) {
     const domNode = node.type.spec.toDOM(node);
 
@@ -92,9 +96,13 @@ const transformFragment = (fragment: Fragment): FormattedText => {
 };
 
 const transformNode = (node: ProsemirrorNode): FormattedNode => {
-  const attributes = node.type.name === NodeName.Image ? transformAttributes(node.attrs) : undefined;
   const formattingOptions = undefinedIfEmpty(resolveFormattingOptions(node));
   const font = undefinedIfEmpty(resolveFontOptions(node));
+  const attributes =
+    node.type.name === NodeName.Image || node.type.name === NodeName.CodeBlock
+      ? transformAttributes(node.attrs)
+      : undefined;
+
   let transformedNode: FormattedNode = { type: 'text', value: node.text || '' };
 
   // Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.

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

@@ -139,10 +139,10 @@ describe('squizNodeToRemirrorNode', () => {
             },
           ],
           type: 'tag',
-          tag: 'code',
+          tag: 'video',
         },
       ],
-      'Unsupported node type provided: tag (tag: code)',
+      'Unsupported node type provided: tag (tag: video)',
     ],
     [
       'Unsupported node type',
@@ -192,6 +192,43 @@ describe('squizNodeToRemirrorNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle code block text', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: 'code',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: 'markup',
+            wrap: true,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world!',
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle images', () => {
     const squizComponentJSON: FormattedText = [
       {

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

@@ -26,6 +26,7 @@ const getNodeType = (node: FormattedNodes): string => {
     p: 'paragraph',
     a: NodeName.Text,
     span: NodeName.Text,
+    code: NodeName.CodeBlock,
   };
 
   if (typeMap[node.type]) {
@@ -53,6 +54,11 @@ const getNodeAttributes = (node: FormattedNodes): Attrs => {
       src: node.attributes?.src,
       title: node.attributes?.title,
     };
+  } else if (node.type === 'tag' && node.tag === 'code') {
+    return {
+      language: node.attributes?.language || 'markup',
+      wrap: node.attributes?.wrap || true,
+    };
   } else if (node.type === 'matrix-image') {
     return {
       matrixAssetId: node.matrixAssetId,

package/src/utils/getMarkNamesByGroup.spec.ts

@@ -0,0 +1,20 @@
+import { EditorSchema, ExtensionTag } from '@remirror/core';
+import { renderWithEditor } from '../../tests';
+import { getMarkNamesByGroup } from './getMarkNamesByGroup';
+
+describe('getMarkNamesGroup', () => {
+  it('Should return expected extensions with "FormattingMark" tag', async () => {
+    const { editor } = await renderWithEditor(null);
+    const schema: EditorSchema = editor.schema;
+    const formattingMarkNames = getMarkNamesByGroup(schema, ExtensionTag.FormattingMark);
+    const otherMarkNames = Object.values(schema.marks)
+      .map((mark) => mark.name)
+      .filter((mark) => !formattingMarkNames.includes(mark));
+
+    // This tag is used by the clear formatting extension.
+    // Marks in the first array will be transformed to a paragraph when formatting is cleared.
+    // Mark in the second array will be left as-is.
+    expect(formattingMarkNames).toEqual(['bold', 'italic', 'underline']);
+    expect(otherMarkNames).toEqual(['assetLink', 'link']);
+  });
+});

package/src/utils/getMarkNamesByGroup.ts

@@ -0,0 +1,7 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+
+export const getMarkNamesByGroup = (schema: EditorSchema, group: ExtensionTagType): string[] => {
+  return Object.values(schema.marks)
+    .filter((mark) => mark.spec.group?.includes(group))
+    .map((mark) => mark.name);
+};

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -0,0 +1,20 @@
+import { EditorSchema, ExtensionTag } from '@remirror/core';
+import { renderWithEditor } from '../../tests';
+import { getNodeNamesByGroup } from './getNodeNamesByGroup';
+
+describe('getNodeNamesByGroup', () => {
+  it('Should return expected extensions with "FormattingNode" tag', async () => {
+    const { editor } = await renderWithEditor(null);
+    const schema: EditorSchema = editor.schema;
+    const formattingNodeNames = getNodeNamesByGroup(schema, ExtensionTag.FormattingNode);
+    const otherNodeNames = Object.values(schema.nodes)
+      .map((node) => node.name)
+      .filter((node) => !formattingNodeNames.includes(node));
+
+    // This tag is used by the clear formatting extension.
+    // Nodes in the first array will be transformed to a paragraph when formatting is cleared.
+    // Nodes in the second array will be left as-is.
+    expect(formattingNodeNames).toEqual(['paragraph', 'heading', 'preformatted']);
+    expect(otherNodeNames).toEqual(['assetImage', 'doc', 'text', 'codeBlock', 'image']);
+  });
+});

package/src/utils/getNodeNamesByGroup.ts

@@ -0,0 +1,7 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+
+export const getNodeNamesByGroup = (schema: EditorSchema, group: ExtensionTagType): string[] => {
+  return Object.values(schema.nodes)
+    .filter((node) => node.spec.group?.includes(group))
+    .map((node) => node.name);
+};

package/tailwind.config.cjs

@@ -27,9 +27,6 @@ module.exports = {
         'heading-3': ['1.125rem', '1.375rem'],
         'heading-4': ['1rem', '1.25rem'],
       },
-      fontFamily: {
-        base: 'Open Sans, Arial, sans-serif',
-      },
       boxShadow: {
         outline: '0 0 0 1px rgba(0,0,0,0.10)',
         sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
@@ -75,6 +72,10 @@ module.exports = {
           300: '#0774d2',
           400: '#044985',
         },
+        teal: {
+          100: '#E6F4F6',
+          400: '#024752',
+        },
         red: {
           300: '#d72321',
         },