@webiny/react-rich-text-lexical-renderer 0.0.0-unstable.c7dec08bb0 → 0.0.0-unstable.e53eceafb5

package/README.md

@@ -9,7 +9,8 @@ A React component to render lexical editor data coming from Webiny Headless CMS
 
 ## About
 
-Webiny uses Lexical editor https://lexical.dev/ as a go to Rich Text Editor, with some additional plugins. To speed up the rendering of data for developers, we created this component.
+Webiny uses Lexical editor https://lexical.dev/ as a go to Rich Text Editor, with some additional plugins. To speed up
+the rendering of data for developers, we created this component.
 
 ## Install
 
@@ -28,7 +29,7 @@ yarn add @webiny/react-rich-text-lexical-renderer
 Fetch your data from Headless CMS, then pass it to the component like this:
 
 ```tsx
-import { RichTextRenderer } from "@webiny/react-rich-text-renderer";
+import {RichTextRenderer} from "@webiny/react-rich-text-renderer";
 
 // Load content from Headless CMS (here we show what your content might look like).
 const content = {
@@ -55,16 +56,16 @@ const content = {
                 version: 1
             }
         ],
-            direction: "ltr",
-            format: "",
-            indent: 0,
-            type: "root",
-            version: 1
+        direction: "ltr",
+        format: "",
+        indent: 0,
+        type: "root",
+        version: 1
     }
 }
 
 // Mount the component
-<RichTextLexicalRenderer value={content} />;
+<RichTextLexicalRenderer value={content}/>;
 ```
 
 ## Adding your custom lexical nodes for rendering
@@ -74,18 +75,22 @@ You can add custom lexical nodes for rendering your content:
 ```tsx
 
 class MyCustomNode extends LexicalNode {
-    ...
+...
 }
 
 // Mount the component
-<RichTextLexicalRenderer value={content} nodes={[MyCustomNode]} />;
+<RichTextLexicalRenderer value={content} nodes={[MyCustomNode]}/>;
 ```
 
 ## Adding your custom typography theme.
 
-You can override Webiny default typography theme that is used by lexical editor by providing your custom typography object.
+You can override Webiny default typography theme that is used by lexical editor by providing your custom typography
+object.
+
+Please [ read our docs ](https://www.webiny.com/docs/page-builder/theming/theme-object) and check
+our [theme object on GitHub](hhttps://github.com/webiny/webiny-js/blob/v5.35.0/packages/cwp-template-aws/template/common/apps/theme/theme.ts)
+before add you custom theme.
 
-Please [ read our docs ](https://www.webiny.com/docs/page-builder/theming/theme-object) and check our [theme object on GitHub](hhttps://github.com/webiny/webiny-js/blob/v5.35.0/packages/cwp-template-aws/template/common/apps/theme/theme.ts) before add you custom theme.
 ```tsx
 
 const myTheme = {
@@ -96,12 +101,70 @@ const myTheme = {
                     id: "custom_heading1",
                     name: "Custom Heading 1",
                     tag: "h1",
-                    styles: { ...headings, fontWeight: "bold", fontSize: 48 }
+                    styles: {...headings, fontWeight: "bold", fontSize: 48}
                 }]
         }
     }
 }
 
 // Mount the component
-<RichTextLexicalRenderer value={content}  theme={myTheme} nodes={[MyCustomNode]} />;
+<RichTextLexicalRenderer value={content} theme={myTheme} nodes={[MyCustomNode]}/>;
+```
+
+## Resolve the mismatch of the versions in the React v18 application
+
+When you try to use `RichTextLexicalRenderer` component in React `v18` application you will see this error on the
+screen:
+
+![React application error for mismatch of the React versions](./images/react-renderer-versisons-conflict-error.png)
+
+This is because our `@webiny/react-rich-text-lexical-renderer` package and the React application have
+different versions of React. Our rich text renderer component is using `v17.0.2`, and the React application is
+using `v18.x.x`.
+
+> You can check which React versions are requested by various dependencies by running the following command:
+> - `yarn why react` for `yarn` users.
+> - `npm ls react` for `npm` users.
+
+To resolve this problem, we need to force all dependencies to use the same version of React.
+
+### Instructions for `yarn` users
+
+To force `yarn` to resolve dependencies across the project to the exact versions we're looking for, use
+the `resolutions` field in the root `package.json` file.
+
+```json package.json
+{
+  ...
+  "resolutions": {
+    "react": "18.x.x"
+  },
+  ...
+}
 ```
+
+Once the `resolutions` field is defined, run `yarn` to apply the new config.
+
+To learn more about the `resolutions` field, please check
+this [yarn documentation article](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/).
+
+### Instructions for `npm` users
+
+The `npm` supports the same functionality as `yarn` with the `overrides` field name. You need to add `overrides`
+field in `package.json` file.
+
+```json package.json
+{
+  ...
+  "overrides": {
+    "react": "^18.x.x"
+  },
+  ...
+}
+```
+
+Once the `overrides` field is defined, run `npm install` to apply the new config.
+
+To learn more about the `overrides` field, please check
+this [npm documentation article](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides).
+

package/index.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-import { LexicalNode, LexicalValue, Klass } from "@webiny/lexical-editor/types";
-declare type RendererLexicalValue = LexicalValue | Record<string, any> | null | undefined;
+import type { LexicalNode, LexicalValue, Klass } from "@webiny/lexical-editor/types";
+import type { EditorTheme } from "@webiny/lexical-theme";
+type RendererLexicalValue = LexicalValue | Record<string, any> | null | undefined;
 interface RichTextLexicalRenderer {
     value: RendererLexicalValue;
-    theme?: Record<string, any>;
+    theme?: Partial<EditorTheme>;
     nodes?: Klass<LexicalNode>[];
 }
-export declare const RichTextLexicalRenderer: React.FC<RichTextLexicalRenderer>;
+export declare const RichTextLexicalRenderer: (props: RichTextLexicalRenderer) => React.JSX.Element;
 export {};

package/index.js

@@ -1,30 +1,46 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RichTextLexicalRenderer = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
-var _lexicalEditor = require("@webiny/lexical-editor");
+var _react = _interopRequireWildcard(require("react"));
 var _appTheme = require("@webiny/app-theme");
-var LexicalRenderer = function LexicalRenderer(props) {
-  var _useTheme = (0, _appTheme.useTheme)(),
-    theme = _useTheme.theme;
-  var getValue = function getValue(value) {
+var _lexicalEditor = require("@webiny/lexical-editor");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const defaultTheme = {
+  styles: {},
+  emotionMap: {}
+};
+const LexicalRenderer = props => {
+  const {
+    theme
+  } = (0, _appTheme.useTheme)();
+  const getValue = value => {
     if (!value) {
       return null;
     }
-    return typeof (props === null || props === void 0 ? void 0 : props.value) === "string" ? props.value : JSON.stringify(props.value);
+    return typeof props?.value === "string" ? props.value : JSON.stringify(props.value);
   };
+  const rendererTheme = (0, _react.useMemo)(() => {
+    return {
+      ...props?.theme,
+      ...theme
+    };
+  }, [props?.theme, theme]);
   return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalHtmlRenderer, {
-    value: getValue(props === null || props === void 0 ? void 0 : props.value),
-    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props === null || props === void 0 ? void 0 : props.theme), theme),
+    value: getValue(props?.value),
+    theme: {
+      ...defaultTheme,
+      ...rendererTheme
+    },
     nodes: props.nodes
   });
 };
-var RichTextLexicalRenderer = function RichTextLexicalRenderer(props) {
+const RichTextLexicalRenderer = props => {
   return /*#__PURE__*/_react.default.createElement(_appTheme.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(LexicalRenderer, props));
 };
-exports.RichTextLexicalRenderer = RichTextLexicalRenderer;
+exports.RichTextLexicalRenderer = RichTextLexicalRenderer;
+
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LexicalRenderer","props","useTheme","theme","getValue","value","JSON","stringify","nodes","RichTextLexicalRenderer"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalNode, LexicalValue, Klass } from \"@webiny/lexical-editor/types\";\nimport { LexicalHtmlRenderer } from \"@webiny/lexical-editor\";\nimport { ThemeProvider, useTheme } from \"@webiny/app-theme\";\n\ntype RendererLexicalValue = LexicalValue | Record<string, any> | null | undefined;\n\ninterface RichTextLexicalRenderer {\n    value: RendererLexicalValue;\n    theme?: Record<string, any>;\n    nodes?: Klass<LexicalNode>[];\n}\n\nconst LexicalRenderer: React.FC<RichTextLexicalRenderer> = props => {\n    const { theme } = useTheme();\n\n    const getValue = (value: RendererLexicalValue): string | null => {\n        if (!value) {\n            return null;\n        }\n        return typeof props?.value === \"string\" ? props.value : JSON.stringify(props.value);\n    };\n\n    return (\n        <LexicalHtmlRenderer\n            value={getValue(props?.value)}\n            theme={{ ...props?.theme, ...theme }}\n            nodes={props.nodes}\n        />\n    );\n};\n\nexport const RichTextLexicalRenderer: React.FC<RichTextLexicalRenderer> = props => {\n    return (\n        <ThemeProvider>\n            <LexicalRenderer {...props} />\n        </ThemeProvider>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AAUA,IAAMA,eAAkD,GAAG,SAArDA,eAAkD,CAAGC,KAAK,EAAI;EAChE,gBAAkB,IAAAC,kBAAQ,GAAE;IAApBC,KAAK,aAALA,KAAK;EAEb,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,KAA2B,EAAoB;IAC7D,IAAI,CAACA,KAAK,EAAE;MACR,OAAO,IAAI;IACf;IACA,OAAO,QAAOJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,KAAK,MAAK,QAAQ,GAAGJ,KAAK,CAACI,KAAK,GAAGC,IAAI,CAACC,SAAS,CAACN,KAAK,CAACI,KAAK,CAAC;EACvF,CAAC;EAED,oBACI,6BAAC,kCAAmB;IAChB,KAAK,EAAED,QAAQ,CAACH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,KAAK,CAAE;IAC9B,KAAK,8DAAOJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,KAAK,GAAKA,KAAK,CAAG;IACrC,KAAK,EAAEF,KAAK,CAACO;EAAM,EACrB;AAEV,CAAC;AAEM,IAAMC,uBAA0D,GAAG,SAA7DA,uBAA0D,CAAGR,KAAK,EAAI;EAC/E,oBACI,6BAAC,uBAAa,qBACV,6BAAC,eAAe,EAAKA,KAAK,CAAI,CAClB;AAExB,CAAC;AAAC"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_appTheme","_lexicalEditor","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","defaultTheme","styles","emotionMap","LexicalRenderer","props","theme","useTheme","getValue","value","JSON","stringify","rendererTheme","useMemo","createElement","LexicalHtmlRenderer","nodes","RichTextLexicalRenderer","ThemeProvider","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ThemeProvider, useTheme } from \"@webiny/app-theme\";\nimport type { LexicalNode, LexicalValue, Klass } from \"@webiny/lexical-editor/types\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport { LexicalHtmlRenderer } from \"@webiny/lexical-editor\";\n\ntype RendererLexicalValue = LexicalValue | Record<string, any> | null | undefined;\n\ninterface RichTextLexicalRenderer {\n    value: RendererLexicalValue;\n    theme?: Partial<EditorTheme>;\n    nodes?: Klass<LexicalNode>[];\n}\n\nconst defaultTheme: EditorTheme = {\n    styles: {},\n    emotionMap: {}\n};\n\nconst LexicalRenderer = (props: RichTextLexicalRenderer) => {\n    const { theme } = useTheme();\n\n    const getValue = (value: RendererLexicalValue): string | null => {\n        if (!value) {\n            return null;\n        }\n        return typeof props?.value === \"string\" ? props.value : JSON.stringify(props.value);\n    };\n\n    const rendererTheme = useMemo(() => {\n        return { ...props?.theme, ...theme };\n    }, [props?.theme, theme]);\n\n    return (\n        <LexicalHtmlRenderer\n            value={getValue(props?.value)}\n            theme={{ ...defaultTheme, ...rendererTheme }}\n            nodes={props.nodes}\n        />\n    );\n};\n\nexport const RichTextLexicalRenderer = (props: RichTextLexicalRenderer) => {\n    return (\n        <ThemeProvider>\n            <LexicalRenderer {...props} />\n        </ThemeProvider>\n    );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAGA,IAAAE,cAAA,GAAAF,OAAA;AAA6D,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAU7D,MAAMW,YAAyB,GAAG;EAC9BC,MAAM,EAAE,CAAC,CAAC;EACVC,UAAU,EAAE,CAAC;AACjB,CAAC;AAED,MAAMC,eAAe,GAAIC,KAA8B,IAAK;EACxD,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EAE5B,MAAMC,QAAQ,GAAIC,KAA2B,IAAoB;IAC7D,IAAI,CAACA,KAAK,EAAE;MACR,OAAO,IAAI;IACf;IACA,OAAO,OAAOJ,KAAK,EAAEI,KAAK,KAAK,QAAQ,GAAGJ,KAAK,CAACI,KAAK,GAAGC,IAAI,CAACC,SAAS,CAACN,KAAK,CAACI,KAAK,CAAC;EACvF,CAAC;EAED,MAAMG,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,OAAO;MAAE,GAAGR,KAAK,EAAEC,KAAK;MAAE,GAAGA;IAAM,CAAC;EACxC,CAAC,EAAE,CAACD,KAAK,EAAEC,KAAK,EAAEA,KAAK,CAAC,CAAC;EAEzB,oBACI9B,MAAA,CAAAW,OAAA,CAAA2B,aAAA,CAAClC,cAAA,CAAAmC,mBAAmB;IAChBN,KAAK,EAAED,QAAQ,CAACH,KAAK,EAAEI,KAAK,CAAE;IAC9BH,KAAK,EAAE;MAAE,GAAGL,YAAY;MAAE,GAAGW;IAAc,CAAE;IAC7CI,KAAK,EAAEX,KAAK,CAACW;EAAM,CACtB,CAAC;AAEV,CAAC;AAEM,MAAMC,uBAAuB,GAAIZ,KAA8B,IAAK;EACvE,oBACI7B,MAAA,CAAAW,OAAA,CAAA2B,aAAA,CAACnC,SAAA,CAAAuC,aAAa,qBACV1C,MAAA,CAAAW,OAAA,CAAA2B,aAAA,CAACV,eAAe,EAAKC,KAAQ,CAClB,CAAC;AAExB,CAAC;AAACc,OAAA,CAAAF,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/react-rich-text-lexical-renderer",
-	"version": "0.0.0-unstable.c7dec08bb0",
+	"version": "0.0.0-unstable.e53eceafb5",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -9,28 +9,28 @@
 	"author": "Webiny Ltd",
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.20.13",
-		"@types/react": "17.0.39",
-		"@webiny/app-theme": "0.0.0-unstable.c7dec08bb0",
-		"@webiny/lexical-editor": "0.0.0-unstable.c7dec08bb0",
-		"react": "17.0.2"
+		"@types/react": "18.2.79",
+		"@webiny/app-theme": "0.0.0-unstable.e53eceafb5",
+		"@webiny/lexical-editor": "0.0.0-unstable.e53eceafb5",
+		"@webiny/lexical-theme": "0.0.0-unstable.e53eceafb5",
+		"react": "18.2.0"
 	},
 	"devDependencies": {
-		"@testing-library/react": "12.1.5",
-		"@webiny/cli": "0.0.0-unstable.c7dec08bb0",
-		"@webiny/project-utils": "0.0.0-unstable.c7dec08bb0",
-		"@webiny/react-composition": "0.0.0-unstable.c7dec08bb0",
+		"@emotion/react": "11.10.8",
+		"@testing-library/react": "15.0.7",
+		"@webiny/app-theme": "0.0.0",
+		"@webiny/project-utils": "0.0.0-unstable.e53eceafb5",
+		"@webiny/react-composition": "0.0.0-unstable.e53eceafb5",
 		"identity-obj-proxy": "3.0.0",
-		"prettier": "2.8.3",
-		"theme": "0.0.0"
+		"prettier": "2.8.8"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
 	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
+		"build": "node ../cli/bin.js run build",
+		"watch": "node ../cli/bin.js run watch"
 	},
-	"gitHead": "c7dec08bb095467cca6a61381bd399d66b7bb147"
+	"gitHead": "e53eceafb5ce1a3872c9b4548939bb2eae5b1aef"
 }