fix: address Lexical editor TS/visual issues (#3229)

Co-authored-by: Sasho Mihajlov <sashomihajlov@Sashos-MacBook-Pro.local> Co-authored-by: Pavel Denisjuk <pavel@webiny.com>
webiny · Apr 22, 2023 · b14eaec · b14eaec
1 parent 384dd94
commit b14eaec
Show file tree

Hide file tree

Showing 19 changed files with 47 additions and 31 deletions.
diff --git a/apps/theme/theme.ts b/apps/theme/theme.ts
@@ -138,7 +138,7 @@ export const typography = {
             }
         }
     ],
-    lists: [{ id: "list", name: "list 1", tag: "ul", styles: { ...paragraphs, fontSize: 17 } }]
+    lists: [{ id: "list", name: "List 1", tag: "ul", styles: { ...paragraphs, fontSize: 17 } }]
 } as const; // https://github.com/emotion-js/emotion/issues/1373#issuecomment-498059774 ;
 
 // Theme object.

diff --git a/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx b/packages/app-page-builder/src/admin/plugins/pageDetails/header/Header.tsx
@@ -5,7 +5,7 @@ import { Typography } from "@webiny/ui/Typography";
 import { useConfigureWebsiteUrlDialog } from "~/admin/hooks/useConfigureWebsiteUrl";
 import { usePageBuilderSettings } from "~/admin/hooks/usePageBuilderSettings";
 import { useSiteStatus } from "~/admin/hooks/useSiteStatus";
-import { ReactComponent as LinkIcon } from "@material-design-icons/svg/round/link.svg";
+import { ReactComponent as OpenInNew } from "@material-design-icons/svg/round/open_in_new.svg";
 import { PbPageData } from "~/types";
 
 const HeaderTitle = styled.div`
@@ -41,6 +41,7 @@ const PageLink = styled.div`
     display: flex;
     align-items: center;
     height: 24px;
+    cursor: pointer;
 
     span {
         white-space: nowrap;
@@ -52,9 +53,9 @@ const PageLink = styled.div`
     svg {
         display: none;
         flex-shrink: 0;
-        width: 20px;
-        height: 20px;
-        margin-left: 8px;
+        width: 14px;
+        height: 14px;
+        margin-left: 2px;
         cursor: pointer;
     }
 
@@ -102,9 +103,9 @@ const Header: React.FC<HeaderProps> = props => {
                     <PageTitle>
                         <Typography use="headline6">{page.title}</Typography>
                     </PageTitle>
-                    <PageLink>
+                    <PageLink onClick={handlePreviewClick}>
                         <Typography use="caption">{url}</Typography>
-                        <LinkIcon onClick={handlePreviewClick} />
+                        <OpenInNew />
                     </PageLink>
                 </PageInfo>
                 <HeaderActions>

diff --git a/packages/app-page-builder/src/editor/plugins/elements/heading/elementText.ts b/packages/app-page-builder/src/editor/plugins/elements/heading/elementText.ts
@@ -17,10 +17,13 @@ const lexicalText = JSON.stringify({
                         version: 1
                     }
                 ],
+                styleId: "heading1",
+                name: "Heading 1",
                 direction: "ltr",
+                typographyStyles: {},
                 format: "",
                 indent: 0,
-                type: "heading",
+                type: "typography-el-node",
                 version: 1,
                 tag: "h1"
             }

diff --git a/packages/app-page-builder/src/editor/plugins/elements/paragraph/elementText.ts b/packages/app-page-builder/src/editor/plugins/elements/paragraph/elementText.ts
@@ -20,10 +20,14 @@ const lexicalText = JSON.stringify({
                         version: 1
                     }
                 ],
+                styleId: "paragraph1",
+                name: "Paragraph 1",
                 direction: "ltr",
+                typographyStyles: {},
                 format: "",
                 indent: 0,
-                type: "paragraph",
+                tag: "p",
+                type: "typography-el-node",
                 version: 1
             }
         ],

diff --git a/...emplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/...emplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -27,9 +27,11 @@ const CheckmarkIcon = styled(({ className }: { className?: string }) => (
     height: 100px;
 `;
 
-const Heading = styled.div(props => props.theme.styles.typography.headings.stylesById("heading1"));
+const Heading = styled.div(props =>
+    props.theme.styles.typography["headings"].stylesById("heading1")
+);
 const Message = styled.div(props =>
-    props.theme.styles.typography.paragraphs.stylesById("paragraph1")
+    props.theme.styles.typography["paragraphs"].stylesById("paragraph1")
 );
 
 const Wrapper = styled.div`

diff --git a/...-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx b/...-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx
@@ -20,7 +20,7 @@ interface Props {
 
 const RteFieldLabel = styled(FieldLabelStyled)`
     .rte-block-paragraph {
-        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
+        ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph1")};
         margin: 0;
     }
 `;

diff --git a/...-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx b/...-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx
@@ -21,7 +21,7 @@ export const StyledInput = styled.input`
     border-radius: ${props => props.theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
+    ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph1")};
 
     &:focus {
         border-color: ${props => props.theme.styles.colors["color2"]};

diff --git a/...template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx b/...template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx
@@ -12,7 +12,7 @@ interface SelectProps {
 }
 
 const StyledSelect = styled.select`
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
+    ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph1")};
     border: 1px solid ${props => props.theme.styles.colors["color5"]};
     background-color: ${props => props.theme.styles.colors["color5"]};
     width: 100%;

diff --git a/...mplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx b/...mplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx
@@ -19,7 +19,7 @@ const StyledTextarea = styled.textarea`
     border-radius: ${props => props.theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
+    ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph1")};
 
     &:focus {
         border-color: ${props => props.theme.styles.colors["color2"]};

diff --git a/...ws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx b/...ws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx
@@ -3,5 +3,5 @@ import styled from "@emotion/styled";
 export const Field = styled.div`
     width: 100%;
     box-sizing: border-box;
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")};
+    ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph1")};
 `;
diff --git a/...common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx b/...common/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldErrorMessage.tsx
@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 const Wrapper = styled.div`
     margin-left: 2px;
     margin-top: 5px;
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
+    ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph2")};
     color: ${props => props.theme.styles.colors["color1"]};
 
     ${props => props.theme.breakpoints["mobile-landscape"]} {

diff --git a/...ommon/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldHelperMessage.tsx b/...ommon/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldHelperMessage.tsx
@@ -4,7 +4,7 @@ export const FieldHelperMessage = styled.div`
     margin-left: 2px;
     margin-top: -5px;
     margin-bottom: 5px;
-    ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")};
+    ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph2")};
     color: ${props => props.theme.styles.colors["color2"]};
 
     ${props => props.theme.breakpoints["mobile-landscape"]} {

diff --git a/packages/cwp-template-aws/template/common/apps/theme/layouts/pages/Static/Footer.tsx b/packages/cwp-template-aws/template/common/apps/theme/layouts/pages/Static/Footer.tsx
@@ -77,7 +77,7 @@ const FooterLogo = styled.div`
     }
 
     .copy {
-        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")}
+        ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph2")}
         color: ${props => props.theme.styles.colors["color4"]}
     }
 `;

diff --git a/packages/cwp-template-aws/template/common/apps/theme/layouts/pages/Static/Header.tsx b/packages/cwp-template-aws/template/common/apps/theme/layouts/pages/Static/Header.tsx
@@ -24,7 +24,7 @@ const HeaderWrapper = styled.header`
     top: 0;
 
     a {
-        ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph1")}
+        ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph1")}
         color: ${props => props.theme.styles.colors["color1"]};
         text-decoration: none;
     }

diff --git a/packages/cwp-template-aws/template/common/apps/theme/theme.ts b/packages/cwp-template-aws/template/common/apps/theme/theme.ts
@@ -113,7 +113,7 @@ export const typography = {
             }
         }
     ],
-    lists: [{ id: "list", name: "list 1", tag: "ul", styles: { ...paragraphs, fontSize: 17 } }]
+    lists: [{ id: "list", name: "List 1", tag: "ul", styles: { ...paragraphs, fontSize: 17 } }]
 } as const; // https://github.com/emotion-js/emotion/issues/1373#issuecomment-498059774 ;
 
 // Buttons.

diff --git a/packages/lexical-editor/src/components/ToolbarActions/BulletListAction.tsx b/packages/lexical-editor/src/components/ToolbarActions/BulletListAction.tsx
@@ -20,7 +20,7 @@ export const BulletListAction = () => {
     const formatBulletList = () => {
         if (!isActive) {
             // will update the active state in the useEffect
-            editor.dispatchCommand(INSERT_UNORDERED_WEBINY_LIST_COMMAND, { themeStyleId: "list1" });
+            editor.dispatchCommand(INSERT_UNORDERED_WEBINY_LIST_COMMAND, { themeStyleId: "list" });
         } else {
             editor.dispatchCommand(REMOVE_WEBINY_LIST_COMMAND, undefined);
         }

diff --git a/packages/lexical-editor/src/nodes/TypographyElementNode.ts b/packages/lexical-editor/src/nodes/TypographyElementNode.ts
@@ -7,7 +7,6 @@ import {
     LexicalEditor,
     LexicalNode,
     NodeKey,
-    ParagraphNode,
     SerializedElementNode,
     Spread
 } from "lexical";
@@ -130,8 +129,13 @@ export class TypographyElementNode extends ElementNode {
         return false;
     }
 
-    override insertNewAfter(): ParagraphNode {
-        const newElement = $createParagraphNode();
+    override insertNewAfter(): TypographyElementNode {
+        const newElement = $createTypographyNode({
+            tag: this.__tag,
+            name: this.__name,
+            css: this.__css,
+            id: this.__styleId
+        });
         const direction = this.getDirection();
         newElement.setDirection(direction);
         this.insertAfter(newElement);

diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
@@ -44,6 +44,7 @@ export interface ThemeStyles {
     borderRadius?: number;
     typography: Typography;
     elements: Record<string, Record<string, any> | StylesObject>;
+
     [key: string]: any;
 }
 
@@ -62,6 +63,7 @@ interface DecoratedThemeStyles extends Omit<ThemeStyles, "typography"> {
     borderRadius?: number;
     typography: DecoratedTypography;
     elements: Record<string, Record<string, any> | StylesObject>;
+
     [key: string]: any;
 }
 
@@ -70,9 +72,7 @@ export interface BaseTheme {
     styles: ThemeStyles;
 }
 
-interface DecoratedTheme {
+export interface Theme {
     breakpoints: ThemeBreakpoints;
     styles: DecoratedThemeStyles;
 }
-
-export type Theme = DecoratedTheme;
diff --git a/typings/emotion/index.d.ts b/typings/emotion/index.d.ts
@@ -51,12 +51,14 @@ export interface ThemeStyles {
     borderRadius?: number;
     typography: Typography;
     elements: Record<string, Record<string, any> | StylesObject>;
+
     [key: string]: any;
 }
 
 /*
  * Decorated typography types
  */
+
 export type DecoratedThemeTypographyStyles = ThemeTypographyStyleItems & {
     stylesById: (id: string) => CSSObject | undefined;
 };
@@ -72,15 +74,15 @@ export interface BaseTheme {
     styles: ThemeStyles;
 }
 
-interface DecoratedTheme {
+export interface Theme {
     breakpoints: ThemeBreakpoints;
     styles: DecoratedThemeStyles;
 }
 
-export type Theme = DecoratedTheme;
+type WTheme = Theme;
 
 declare module "@emotion/react" {
     // Ignoring "@typescript-eslint/no-empty-interface" rule here.
     // eslint-disable-next-line
-    export interface Theme extends DecoratedTheme {}
+    export interface Theme extends WTheme {}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,7 +77,7 @@ const FooterLogo = styled.div` @@
         }
         .copy {
-            ${props => props.theme.styles.typography.paragraphs.stylesById("paragraph2")}
+            ${props => props.theme.styles.typography["paragraphs"].stylesById("paragraph2")}
             color: ${props => props.theme.styles.colors["color4"]}
         }
     `;
@@ Expand Down @@