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

package/README.md

@@ -1,107 +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]} />;
-```
+_This README file is automatically generated during the publish process._

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 { 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?: Record<string, any>;
+    theme: 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,20 @@
-"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 _appTheme = require("@webiny/app-theme");
-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 === 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);
   };
-  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),
+  return /*#__PURE__*/React.createElement(LexicalHtmlRenderer, {
+    value: getValue(props?.value),
+    theme: props.theme,
     nodes: props.nodes
   });
 };
-var 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);
 };
-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","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": "0.0.0-unstable.c7dec08bb0",
+	"version": "0.0.0-unstable.df7a8bb475",
+	"type": "module",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -9,28 +10,30 @@
 	"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/lexical-editor": "0.0.0-unstable.df7a8bb475",
+		"@webiny/lexical-theme": "0.0.0-unstable.df7a8bb475",
+		"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/build-tools": "0.0.0-unstable.df7a8bb475",
+		"@webiny/react-composition": "0.0.0-unstable.df7a8bb475",
 		"identity-obj-proxy": "3.0.0",
-		"prettier": "2.8.3",
-		"theme": "0.0.0"
+		"prettier": "3.6.2",
+		"vitest": "3.2.4"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
-	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch"
+	"adio": {
+		"ignore": {
+			"src": [
+				"@webiny/app-theme"
+			]
+		}
 	},
-	"gitHead": "c7dec08bb095467cca6a61381bd399d66b7bb147"
+	"gitHead": "df7a8bb4755a1da047f0af8c56bdb649cc81bf7d"
 }