@webiny/react-rich-text-lexical-renderer 5.44.1-beta.1 → 5.45.0-beta.0

package/README.md

@@ -1,170 +1,11 @@
 # @webiny/react-rich-text-lexical-renderer
 
-[![](https://img.shields.io/npm/dw/@webiny/react-rich-textlexical-renderer.svg)](https://www.npmjs.com/package/@webiny/react-rich-text-lexical-renderer)
-[![](https://img.shields.io/npm/v/@webiny/react-rich-text-lexical-renderer.svg)](https://www.npmjs.com/package/@webiny/react-rich-text-lexical-renderer)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
 
-A React component to render lexical editor data coming from Webiny Headless CMS and Webiny Form Builder.
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
 
-## 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.
-
-## Install
-
-```
-npm install --save @webiny/react-rich-text-lexical-renderer
-```
-
-Or if you prefer yarn:
-
-```
-yarn add @webiny/react-rich-text-lexical-renderer
-```
-
-## Usage
-
-Fetch your data from Headless CMS, then pass it to the component like this:
-
-```tsx
-import {RichTextRenderer} from "@webiny/react-rich-text-renderer";
-
-// Load content from Headless CMS (here we show what your content might look like).
-const content = {
-    root: {
-        children: [
-            {
-                children: [
-                    {
-                        detail: 0,
-                        format: 0,
-                        mode: "normal",
-                        style: "",
-                        text: "A well written paragraph of text can bring so much joy!",
-                        type: "text",
-                        version: 1
-                    }
-                ],
-                direction: "ltr",
-                styles: [],
-                format: "",
-                indent: 0,
-                tag: "p",
-                type: "paragraph-element",
-                version: 1
-            }
-        ],
-        direction: "ltr",
-        format: "",
-        indent: 0,
-        type: "root",
-        version: 1
-    }
-}
-
-// Mount the component
-<RichTextLexicalRenderer value={content}/>;
-```
-
-## Adding your custom lexical nodes for rendering
-
-You can add custom lexical nodes for rendering your content:
-
-```tsx
-
-class MyCustomNode extends LexicalNode {
-...
-}
-
-// Mount the component
-<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.
-
-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 = {
-    styles: {
-        typography: {
-            headings: [
-                {
-                    id: "custom_heading1",
-                    name: "Custom Heading 1",
-                    tag: "h1",
-                    styles: {...headings, fontWeight: "bold", fontSize: 48}
-                }]
-        }
-    }
-}
-
-// Mount the component
-<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).
+---
 
+_This README file is automatically generated during the publish process._

package/index.d.ts

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

package/index.js

@@ -1,39 +1,20 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-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 = _interopRequireWildcard(require("react"));
-var _appTheme = require("@webiny/app-theme");
-var _lexicalEditor = require("@webiny/lexical-editor");
-var defaultTheme = {
-  styles: {},
-  emotionMap: {}
-};
-var LexicalRenderer = function LexicalRenderer(props) {
-  var _useTheme = (0, _appTheme.useTheme)(),
-    theme = _useTheme.theme;
-  var getValue = function getValue(value) {
+import React from "react";
+import { LexicalHtmlRenderer } from "@webiny/lexical-editor";
+const LexicalRenderer = props => {
+  const getValue = value => {
     if (!value) {
       return null;
     }
     return typeof props?.value === "string" ? props.value : JSON.stringify(props.value);
   };
-  var rendererTheme = (0, _react.useMemo)(function () {
-    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props?.theme), theme);
-  }, [props?.theme, theme]);
-  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalHtmlRenderer, {
+  return /*#__PURE__*/React.createElement(LexicalHtmlRenderer, {
     value: getValue(props?.value),
-    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultTheme), rendererTheme),
+    theme: props.theme,
     nodes: props.nodes
   });
 };
-var RichTextLexicalRenderer = exports.RichTextLexicalRenderer = function RichTextLexicalRenderer(props) {
-  return /*#__PURE__*/_react.default.createElement(_appTheme.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(LexicalRenderer, props));
+export const RichTextLexicalRenderer = props => {
+  return /*#__PURE__*/React.createElement(LexicalRenderer, props);
 };
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_appTheme","_lexicalEditor","defaultTheme","styles","emotionMap","LexicalRenderer","props","_useTheme","useTheme","theme","getValue","value","JSON","stringify","rendererTheme","useMemo","_objectSpread2","default","createElement","LexicalHtmlRenderer","nodes","RichTextLexicalRenderer","exports","ThemeProvider"],"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;AAUA,IAAMG,YAAyB,GAAG;EAC9BC,MAAM,EAAE,CAAC,CAAC;EACVC,UAAU,EAAE,CAAC;AACjB,CAAC;AAED,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA8B,EAAK;EACxD,IAAAC,SAAA,GAAkB,IAAAC,kBAAQ,EAAC,CAAC;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK;EAEb,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,KAA2B,EAAoB;IAC7D,IAAI,CAACA,KAAK,EAAE;MACR,OAAO,IAAI;IACf;IACA,OAAO,OAAOL,KAAK,EAAEK,KAAK,KAAK,QAAQ,GAAGL,KAAK,CAACK,KAAK,GAAGC,IAAI,CAACC,SAAS,CAACP,KAAK,CAACK,KAAK,CAAC;EACvF,CAAC;EAED,IAAMG,aAAa,GAAG,IAAAC,cAAO,EAAC,YAAM;IAChC,WAAAC,cAAA,CAAAC,OAAA,MAAAD,cAAA,CAAAC,OAAA,MAAYX,KAAK,EAAEG,KAAK,GAAKA,KAAK;EACtC,CAAC,EAAE,CAACH,KAAK,EAAEG,KAAK,EAAEA,KAAK,CAAC,CAAC;EAEzB,oBACIZ,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACjB,cAAA,CAAAkB,mBAAmB;IAChBR,KAAK,EAAED,QAAQ,CAACJ,KAAK,EAAEK,KAAK,CAAE;IAC9BF,KAAK,MAAAO,cAAA,CAAAC,OAAA,MAAAD,cAAA,CAAAC,OAAA,MAAOf,YAAY,GAAKY,aAAa,CAAG;IAC7CM,KAAK,EAAEd,KAAK,CAACc;EAAM,CACtB,CAAC;AAEV,CAAC;AAEM,IAAMC,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,SAA1BA,uBAAuBA,CAAIf,KAA8B,EAAK;EACvE,oBACIT,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAClB,SAAA,CAAAuB,aAAa,qBACV1B,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACb,eAAe,EAAKC,KAAQ,CAClB,CAAC;AAExB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","LexicalHtmlRenderer","LexicalRenderer","props","getValue","value","JSON","stringify","createElement","theme","nodes","RichTextLexicalRenderer"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Klass, LexicalNode, LexicalValue } from \"@webiny/lexical-editor/types.js\";\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: EditorTheme;\n    nodes?: Klass<LexicalNode>[];\n}\n\nconst LexicalRenderer = (props: RichTextLexicalRenderer) => {\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}\n            nodes={props.nodes}\n        />\n    );\n};\n\nexport const RichTextLexicalRenderer = (props: RichTextLexicalRenderer) => {\n    return <LexicalRenderer {...props} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,mBAAmB,QAAQ,wBAAwB;AAU5D,MAAMC,eAAe,GAAIC,KAA8B,IAAK;EACxD,MAAMC,QAAQ,GAAIC,KAA2B,IAAoB;IAC7D,IAAI,CAACA,KAAK,EAAE;MACR,OAAO,IAAI;IACf;IACA,OAAO,OAAOF,KAAK,EAAEE,KAAK,KAAK,QAAQ,GAAGF,KAAK,CAACE,KAAK,GAAGC,IAAI,CAACC,SAAS,CAACJ,KAAK,CAACE,KAAK,CAAC;EACvF,CAAC;EAED,oBACIL,KAAA,CAAAQ,aAAA,CAACP,mBAAmB;IAChBI,KAAK,EAAED,QAAQ,CAACD,KAAK,EAAEE,KAAK,CAAE;IAC9BI,KAAK,EAAEN,KAAK,CAACM,KAAM;IACnBC,KAAK,EAAEP,KAAK,CAACO;EAAM,CACtB,CAAC;AAEV,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAIR,KAA8B,IAAK;EACvE,oBAAOH,KAAA,CAAAQ,aAAA,CAACN,eAAe,EAAKC,KAAQ,CAAC;AACzC,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@webiny/react-rich-text-lexical-renderer",
-	"version": "5.44.1-beta.1",
+	"version": "5.45.0-beta.0",
+	"type": "module",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -10,27 +11,29 @@
 	"license": "MIT",
 	"dependencies": {
 		"@types/react": "18.2.79",
-		"@webiny/app-theme": "5.44.1-beta.1",
-		"@webiny/lexical-editor": "5.44.1-beta.1",
-		"@webiny/lexical-theme": "5.44.1-beta.1",
+		"@webiny/lexical-editor": "5.45.0-beta.0",
+		"@webiny/lexical-theme": "5.45.0-beta.0",
 		"react": "18.2.0"
 	},
 	"devDependencies": {
 		"@emotion/react": "11.10.8",
 		"@testing-library/react": "15.0.7",
-		"@webiny/app-theme": "0.0.0",
-		"@webiny/project-utils": "5.44.1-beta.1",
-		"@webiny/react-composition": "5.44.1-beta.1",
+		"@webiny/build-tools": "5.45.0-beta.0",
+		"@webiny/react-composition": "5.45.0-beta.0",
 		"identity-obj-proxy": "3.0.0",
-		"prettier": "2.8.8"
+		"prettier": "3.6.2",
+		"vitest": "4.0.18"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "node ../cli/bin.js run build",
-		"watch": "node ../cli/bin.js run watch"
+	"adio": {
+		"ignore": {
+			"src": [
+				"@webiny/app-theme"
+			]
+		}
 	},
-	"gitHead": "ff5f085c417040291d39fdbe5153067f3a23ed86"
+	"gitHead": "b85c33cfbe7c02c130445c918d913ef4b2c09cb2"
 }