@webiny/react-rich-text-lexical-renderer 0.0.0-unstable.06b2ede40f

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# @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)
+
+A React component to render lexical editor data coming from Webiny Headless CMS and Webiny Form Builder.
+
+## 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).
+

package/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+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?: Partial<EditorTheme>;
+    nodes?: Klass<LexicalNode>[];
+}
+export declare const RichTextLexicalRenderer: (props: RichTextLexicalRenderer) => React.JSX.Element;
+export {};

package/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTextLexicalRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _appTheme = require("@webiny/app-theme");
+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?.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?.value),
+    theme: {
+      ...defaultTheme,
+      ...rendererTheme
+    },
+    nodes: props.nodes
+  });
+};
+const RichTextLexicalRenderer = props => {
+  return /*#__PURE__*/_react.default.createElement(_appTheme.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(LexicalRenderer, props));
+};
+exports.RichTextLexicalRenderer = RichTextLexicalRenderer;
+
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,36 @@
+{
+	"name": "@webiny/react-rich-text-lexical-renderer",
+	"version": "0.0.0-unstable.06b2ede40f",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"author": "Webiny Ltd",
+	"license": "MIT",
+	"dependencies": {
+		"@types/react": "18.2.79",
+		"@webiny/app-theme": "0.0.0-unstable.06b2ede40f",
+		"@webiny/lexical-editor": "0.0.0-unstable.06b2ede40f",
+		"@webiny/lexical-theme": "0.0.0-unstable.06b2ede40f",
+		"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": "0.0.0-unstable.06b2ede40f",
+		"@webiny/react-composition": "0.0.0-unstable.06b2ede40f",
+		"identity-obj-proxy": "3.0.0",
+		"prettier": "2.8.8"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "node ../cli/bin.js run build",
+		"watch": "node ../cli/bin.js run watch"
+	},
+	"gitHead": "06b2ede40fc2212a70eeafd74afd50b56fb0ce82"
+}