@webiny/react-rich-text-lexical-renderer 0.0.0-unstable.99666aeb00 → 0.0.0-unstable.a9593f74dd

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +77 -14
  2. package/index.d.ts +2 -2
  3. package/index.js +6 -4
  4. package/index.js.map +1 -1
  5. package/package.json +9 -9
package/README.md CHANGED
@@ -9,7 +9,8 @@ A React component to render lexical editor data coming from Webiny Headless CMS
9
9
 
10
10
  ## About
11
11
 
12
- 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.
12
+ Webiny uses Lexical editor https://lexical.dev/ as a go to Rich Text Editor, with some additional plugins. To speed up
13
+ the rendering of data for developers, we created this component.
13
14
 
14
15
  ## Install
15
16
 
@@ -28,7 +29,7 @@ yarn add @webiny/react-rich-text-lexical-renderer
28
29
  Fetch your data from Headless CMS, then pass it to the component like this:
29
30
 
30
31
  ```tsx
31
- import { RichTextRenderer } from "@webiny/react-rich-text-renderer";
32
+ import {RichTextRenderer} from "@webiny/react-rich-text-renderer";
32
33
 
33
34
  // Load content from Headless CMS (here we show what your content might look like).
34
35
  const content = {
@@ -55,16 +56,16 @@ const content = {
55
56
  version: 1
56
57
  }
57
58
  ],
58
- direction: "ltr",
59
- format: "",
60
- indent: 0,
61
- type: "root",
62
- version: 1
59
+ direction: "ltr",
60
+ format: "",
61
+ indent: 0,
62
+ type: "root",
63
+ version: 1
63
64
  }
64
65
  }
65
66
 
66
67
  // Mount the component
67
- <RichTextLexicalRenderer value={content} />;
68
+ <RichTextLexicalRenderer value={content}/>;
68
69
  ```
69
70
 
70
71
  ## Adding your custom lexical nodes for rendering
@@ -74,18 +75,22 @@ You can add custom lexical nodes for rendering your content:
74
75
  ```tsx
75
76
 
76
77
  class MyCustomNode extends LexicalNode {
77
- ...
78
+ ...
78
79
  }
79
80
 
80
81
  // Mount the component
81
- <RichTextLexicalRenderer value={content} nodes={[MyCustomNode]} />;
82
+ <RichTextLexicalRenderer value={content} nodes={[MyCustomNode]}/>;
82
83
  ```
83
84
 
84
85
  ## Adding your custom typography theme.
85
86
 
86
- You can override Webiny default typography theme that is used by lexical editor by providing your custom typography object.
87
+ You can override Webiny default typography theme that is used by lexical editor by providing your custom typography
88
+ object.
89
+
90
+ Please [ read our docs ](https://www.webiny.com/docs/page-builder/theming/theme-object) and check
91
+ 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)
92
+ before add you custom theme.
87
93
 
88
- 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.
89
94
  ```tsx
90
95
 
91
96
  const myTheme = {
@@ -96,12 +101,70 @@ const myTheme = {
96
101
  id: "custom_heading1",
97
102
  name: "Custom Heading 1",
98
103
  tag: "h1",
99
- styles: { ...headings, fontWeight: "bold", fontSize: 48 }
104
+ styles: {...headings, fontWeight: "bold", fontSize: 48}
100
105
  }]
101
106
  }
102
107
  }
103
108
  }
104
109
 
105
110
  // Mount the component
106
- <RichTextLexicalRenderer value={content} theme={myTheme} nodes={[MyCustomNode]} />;
111
+ <RichTextLexicalRenderer value={content} theme={myTheme} nodes={[MyCustomNode]}/>;
112
+ ```
113
+
114
+ ## Resolve the mismatch of the versions in the React v18 application
115
+
116
+ When you try to use `RichTextLexicalRenderer` component in React `v18` application you will see this error on the
117
+ screen:
118
+
119
+ ![React application error for mismatch of the React versions](./images/react-renderer-versisons-conflict-error.png)
120
+
121
+ This is because our `@webiny/react-rich-text-lexical-renderer` package and the React application have
122
+ different versions of React. Our rich text renderer component is using `v17.0.2`, and the React application is
123
+ using `v18.x.x`.
124
+
125
+ > You can check which React versions are requested by various dependencies by running the following command:
126
+ > - `yarn why react` for `yarn` users.
127
+ > - `npm ls react` for `npm` users.
128
+
129
+ To resolve this problem, we need to force all dependencies to use the same version of React.
130
+
131
+ ### Instructions for `yarn` users
132
+
133
+ To force `yarn` to resolve dependencies across the project to the exact versions we're looking for, use
134
+ the `resolutions` field in the root `package.json` file.
135
+
136
+ ```json package.json
137
+ {
138
+ ...
139
+ "resolutions": {
140
+ "react": "18.x.x"
141
+ },
142
+ ...
143
+ }
107
144
  ```
145
+
146
+ Once the `resolutions` field is defined, run `yarn` to apply the new config.
147
+
148
+ To learn more about the `resolutions` field, please check
149
+ this [yarn documentation article](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/).
150
+
151
+ ### Instructions for `npm` users
152
+
153
+ The `npm` supports the same functionality as `yarn` with the `overrides` field name. You need to add `overrides`
154
+ field in `package.json` file.
155
+
156
+ ```json package.json
157
+ {
158
+ ...
159
+ "overrides": {
160
+ "react": "^18.x.x"
161
+ },
162
+ ...
163
+ }
164
+ ```
165
+
166
+ Once the `overrides` field is defined, run `npm install` to apply the new config.
167
+
168
+ To learn more about the `overrides` field, please check
169
+ this [npm documentation article](https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides).
170
+
package/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ /// <reference types="react" />
2
2
  import { LexicalNode, LexicalValue, Klass } from "@webiny/lexical-editor/types";
3
3
  declare type RendererLexicalValue = LexicalValue | Record<string, any> | null | undefined;
4
4
  interface RichTextLexicalRenderer {
@@ -6,5 +6,5 @@ interface RichTextLexicalRenderer {
6
6
  theme?: Record<string, any>;
7
7
  nodes?: Klass<LexicalNode>[];
8
8
  }
9
- export declare const RichTextLexicalRenderer: React.FC<RichTextLexicalRenderer>;
9
+ export declare const RichTextLexicalRenderer: (props: RichTextLexicalRenderer) => JSX.Element;
10
10
  export {};
package/index.js CHANGED
@@ -16,15 +16,17 @@ var LexicalRenderer = function LexicalRenderer(props) {
16
16
  if (!value) {
17
17
  return null;
18
18
  }
19
- return typeof (props === null || props === void 0 ? void 0 : props.value) === "string" ? props.value : JSON.stringify(props.value);
19
+ return typeof props?.value === "string" ? props.value : JSON.stringify(props.value);
20
20
  };
21
21
  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalHtmlRenderer, {
22
- value: getValue(props === null || props === void 0 ? void 0 : props.value),
23
- theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props === null || props === void 0 ? void 0 : props.theme), theme),
22
+ value: getValue(props?.value),
23
+ theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props?.theme), theme),
24
24
  nodes: props.nodes
25
25
  });
26
26
  };
27
27
  var RichTextLexicalRenderer = function RichTextLexicalRenderer(props) {
28
28
  return /*#__PURE__*/_react.default.createElement(_appTheme.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(LexicalRenderer, props));
29
29
  };
30
- exports.RichTextLexicalRenderer = RichTextLexicalRenderer;
30
+ exports.RichTextLexicalRenderer = RichTextLexicalRenderer;
31
+
32
+ //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +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"}
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_lexicalEditor","_appTheme","LexicalRenderer","props","_useTheme","useTheme","theme","getValue","value","JSON","stringify","default","createElement","LexicalHtmlRenderer","_objectSpread2","nodes","RichTextLexicalRenderer","ThemeProvider","exports"],"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 = (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 return (\n <LexicalHtmlRenderer\n value={getValue(props?.value)}\n theme={{ ...props?.theme, ...theme }}\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,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAUA,IAAMG,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,oBACIX,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACZ,cAAA,CAAAa,mBAAmB;IAChBL,KAAK,EAAED,QAAQ,CAACJ,KAAK,EAAEK,KAAK,CAAE;IAC9BF,KAAK,MAAAQ,cAAA,CAAAH,OAAA,MAAAG,cAAA,CAAAH,OAAA,MAAOR,KAAK,EAAEG,KAAK,GAAKA,KAAK,CAAG;IACrCS,KAAK,EAAEZ,KAAK,CAACY;EAAM,CACtB,CAAC;AAEV,CAAC;AAEM,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAIb,KAA8B,EAAK;EACvE,oBACIN,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACX,SAAA,CAAAgB,aAAa,qBACVpB,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACV,eAAe,EAAKC,KAAQ,CAClB,CAAC;AAExB,CAAC;AAACe,OAAA,CAAAF,uBAAA,GAAAA,uBAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webiny/react-rich-text-lexical-renderer",
3
- "version": "0.0.0-unstable.99666aeb00",
3
+ "version": "0.0.0-unstable.a9593f74dd",
4
4
  "main": "index.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -9,19 +9,19 @@
9
9
  "author": "Webiny Ltd",
10
10
  "license": "MIT",
11
11
  "dependencies": {
12
- "@babel/runtime": "7.20.13",
12
+ "@babel/runtime": "7.22.6",
13
13
  "@types/react": "17.0.39",
14
- "@webiny/app-theme": "0.0.0-unstable.99666aeb00",
15
- "@webiny/lexical-editor": "0.0.0-unstable.99666aeb00",
14
+ "@webiny/app-theme": "0.0.0-unstable.a9593f74dd",
15
+ "@webiny/lexical-editor": "0.0.0-unstable.a9593f74dd",
16
16
  "react": "17.0.2"
17
17
  },
18
18
  "devDependencies": {
19
19
  "@testing-library/react": "12.1.5",
20
- "@webiny/cli": "0.0.0-unstable.99666aeb00",
21
- "@webiny/project-utils": "0.0.0-unstable.99666aeb00",
22
- "@webiny/react-composition": "0.0.0-unstable.99666aeb00",
20
+ "@webiny/cli": "0.0.0-unstable.a9593f74dd",
21
+ "@webiny/project-utils": "0.0.0-unstable.a9593f74dd",
22
+ "@webiny/react-composition": "0.0.0-unstable.a9593f74dd",
23
23
  "identity-obj-proxy": "3.0.0",
24
- "prettier": "2.8.3",
24
+ "prettier": "2.8.8",
25
25
  "theme": "0.0.0"
26
26
  },
27
27
  "publishConfig": {
@@ -32,5 +32,5 @@
32
32
  "build": "yarn webiny run build",
33
33
  "watch": "yarn webiny run watch"
34
34
  },
35
- "gitHead": "99666aeb00056c56292eeb5dbb6aba7fda2439e2"
35
+ "gitHead": "a9593f74ddf9ce93263eadb0ddc0807ed343f5ee"
36
36
  }