@webiny/react-rich-text-lexical-renderer 0.0.0-unstable.085ff6572f

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,107 @@
+# @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]} />;
+```

package/index.d.ts

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

package/index.js

@@ -0,0 +1,30 @@
+"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) {
+    if (!value) {
+      return null;
+    }
+    return typeof (props === null || props === void 0 ? void 0 : 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),
+    nodes: props.nodes
+  });
+};
+var RichTextLexicalRenderer = function RichTextLexicalRenderer(props) {
+  return /*#__PURE__*/_react.default.createElement(_appTheme.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(LexicalRenderer, props));
+};
+exports.RichTextLexicalRenderer = RichTextLexicalRenderer;

package/index.js.map

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

package/package.json

@@ -0,0 +1,36 @@
+{
+	"name": "@webiny/react-rich-text-lexical-renderer",
+	"version": "0.0.0-unstable.085ff6572f",
+	"main": "index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webiny/webiny-js.git"
+	},
+	"author": "Webiny Ltd",
+	"license": "MIT",
+	"dependencies": {
+		"@babel/runtime": "7.20.13",
+		"@types/react": "17.0.39",
+		"@webiny/app-theme": "0.0.0-unstable.085ff6572f",
+		"@webiny/lexical-editor": "0.0.0-unstable.085ff6572f",
+		"react": "17.0.2"
+	},
+	"devDependencies": {
+		"@testing-library/react": "12.1.5",
+		"@webiny/cli": "0.0.0-unstable.085ff6572f",
+		"@webiny/project-utils": "0.0.0-unstable.085ff6572f",
+		"@webiny/react-composition": "0.0.0-unstable.085ff6572f",
+		"identity-obj-proxy": "3.0.0",
+		"prettier": "2.8.3",
+		"theme": "0.0.0"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"gitHead": "085ff6572f6bb6a76d218088b06d9f4ef92bbea7"
+}