Fix bunch of errors that are logged in console (#4281)

* Fix bunch of errors that are loged in console

* Typings

.changeset/nasty-fishes-sit.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Remove attributes error, pill reference, editor js error

src/components/Attributes/Attributes.tsx

@@ -77,7 +77,7 @@ export const Attributes: React.FC<AttributesProps> = ({
           <Accordion defaultValue="attributes-accordion">
             <Accordion.Item value="attributes-accordion">
               <Accordion.Trigger
-                buttonDataTestId="attributes-expand"
+                data-testid="attributes-expand"
                 flexWrap="wrap"
                 alignItems="flex-start"
               >

src/components/Pill/Pill.tsx

@@ -21,16 +21,24 @@ const useStyles = makeStyles<{
 // Main purpose of this component is to override default Pill component
 // from macaw-ui to add custom styles
 // TODO: migrate to Pill component from new macaw-ui when it will be ready
-export const Pill = ({ color, ...props }: PillProps) => {
-  const { theme: currentTheme } = useTheme();
-  const backgroundColor = getStatusColor(color, currentTheme);
-  const classes = useStyles({
-    color: backgroundColor.startsWith("#")
-      ? backgroundColor
-      : vars.colors.background[backgroundColor],
-  });
+export const Pill = React.forwardRef<HTMLDivElement, PillProps>(
+  ({ color, ...props }, ref) => {
+    const { theme: currentTheme } = useTheme();
+    const backgroundColor = getStatusColor(color, currentTheme);
+    const classes = useStyles({
+      color: backgroundColor.startsWith("#")
+        ? backgroundColor
+        : vars.colors.background[backgroundColor],
+    });
 
-  return (
-    <MacawuiPill {...props} className={clsx(classes.pill, props.className)} />
-  );
-};
+    return (
+      <MacawuiPill
+        {...props}
+        ref={ref}
+        className={clsx(classes.pill, props.className)}
+      />
+    );
+  },
+);
+
+Pill.displayName = "Pill";

src/components/RichTextEditor/ReactEditorJS.tsx

@@ -0,0 +1,70 @@
+import EditorJS, {
+  EditorConfig,
+  OutputData,
+  ToolConstructable,
+} from "@editorjs/editorjs";
+import Paragraph from "@editorjs/paragraph";
+import {
+  EditorCore,
+  Props as ReactEditorJSProps,
+  ReactEditorJS as BaseReactEditorJS,
+} from "@react-editor-js/core";
+import React from "react";
+
+// Source of @react-editor-js
+class ClientEditorCore implements EditorCore {
+  private readonly _editorJS: EditorJS;
+
+  constructor({ tools, ...config }: EditorConfig) {
+    const extendTools = {
+      // default tools
+      paragraph: {
+        class: Paragraph,
+        inlineToolbar: true,
+      } as unknown as ToolConstructable,
+      ...tools,
+    };
+
+    this._editorJS = new EditorJS({
+      tools: extendTools,
+      ...config,
+    });
+  }
+
+  public async clear() {
+    await this._editorJS.clear();
+  }
+
+  public async save() {
+    return this._editorJS.save();
+  }
+
+  public async destroy() {
+    try {
+      await this._editorJS.destroy();
+    } catch (e) {
+      /*
+        Dismiss that error.
+        Sometimes instance is already unmounted while Editor wants to destroy it.
+        Editorjs does this properly so this error does not break anything
+       */
+    }
+  }
+
+  public async render(data: OutputData) {
+    await this._editorJS.render(data);
+  }
+}
+
+export type Props = Omit<ReactEditorJSProps, "factory">;
+
+function ReactEditorJSClient(props: Props) {
+  const factory = React.useCallback(
+    (config: EditorConfig) => new ClientEditorCore(config),
+    [],
+  );
+
+  return <BaseReactEditorJS factory={factory} {...props} />;
+}
+
+export const ReactEditorJS = ReactEditorJSClient;

src/components/RichTextEditor/RichTextEditor.tsx

@@ -6,10 +6,10 @@ import { EditorCore, Props as ReactEditorJSProps } from "@react-editor-js/core";
 import { Box } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
-import { createReactEditorJS } from "react-editor-js";
 
 import { tools } from "./consts";
 import { useHasRendered } from "./hooks";
+import { ReactEditorJS } from "./ReactEditorJS";
 import useStyles from "./styles";
 
 export type EditorJsProps = Omit<ReactEditorJSProps, "factory">;
@@ -29,8 +29,6 @@ export interface RichTextEditorProps extends Omit<EditorJsProps, "onChange"> {
   onChange?: () => void;
 }
 
-const ReactEditorJS = createReactEditorJS();
-
 const RichTextEditor: React.FC<RichTextEditorProps> = ({
   id: defaultId,
   disabled,

src/components/RichTextEditor/consts.ts

@@ -31,7 +31,7 @@ export const tools: Record<string, ToolConstructable | ToolSettings> = {
   paragraph: {
     class: Paragraph,
     inlineToolbar,
-  },
+  } as unknown as ToolConstructable,
   strikethrough: createGenericInlineTool({
     sanitize: {
       s: {},

src/products/components/ProductOrganization/ProductOrganization.tsx

@@ -125,14 +125,15 @@ export const ProductOrganization: React.FC<
               <Text variant="bodyEmp">
                 <FormattedMessage id="anK7jD" defaultMessage="Product Type" />
               </Text>
-              <Text variant="caption">
-                <Link
-                  href={productTypeUrl(productType?.id) ?? ""}
-                  disabled={!productType?.id}
-                >
-                  {productType?.name ?? "..."}
-                </Link>
-              </Text>
+              {productType?.id ? (
+                <Text variant="caption">
+                  <Link href={productTypeUrl(productType?.id) ?? ""}>
+                    {productType?.name ?? "..."}
+                  </Link>
+                </Text>
+              ) : (
+                <Text variant="caption">{productType?.name ?? "..."}</Text>
+              )}
             </Box>
           </Box>
         )}

types.d.ts

@@ -18,3 +18,5 @@ declare interface Window {
     IS_CLOUD_INSTANCE?: string;
   };
 }
+
+declare module "@editorjs/paragraph" {}