@crystallize/design-system 1.11.7 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @crystallize/design-system
 
+## 1.12.0
+
+### Minor Changes
+
+- a47bba7: The rich text editor is now able to deal with more invalid initial states.
+
+### Patch Changes
+
+- a47bba7: Updated to Storybook 7.0.7
+
 ## 1.11.7
 
 ### Patch Changes

package/dist/index.js

@@ -4390,10 +4390,27 @@ var import_list = require("@lexical/list");
 var import_LexicalHorizontalRuleNode = require("@lexical/react/LexicalHorizontalRuleNode");
 var import_rich_text = require("@lexical/rich-text");
 var import_table = require("@lexical/table");
+
+// src/rich-text-editor/model/parse-initial-state.ts
+function parseInitialState({ richText }) {
+  let richTextArray = Array.isArray(richText) ? richText : [richText];
+  richTextArray = richTextArray.map((rootNode) => {
+    if (!rootNode.kind || rootNode.kind === "inline") {
+      return {
+        type: "paragraph",
+        kind: "block",
+        children: [rootNode]
+      };
+    }
+    return rootNode;
+  });
+  return richTextArray;
+}
+
+// src/rich-text-editor/model/crystallize-to-lexical.ts
 function composeInitialState({ richText }) {
   return function setLexicalState() {
     const root = (0, import_lexical.$getRoot)();
-    const richTextArray = Array.isArray(richText) ? richText : [richText];
     function handleNode({
       crystallizeContentNode,
       lexicalParent
@@ -4535,7 +4552,9 @@ function composeInitialState({ richText }) {
         lexicalParent.append(lexicalNode);
       }
     }
-    richTextArray.forEach((crystallizeContentNode) => handleNode({ crystallizeContentNode, lexicalParent: root }));
+    parseInitialState({ richText }).forEach(
+      (crystallizeContentNode) => handleNode({ crystallizeContentNode, lexicalParent: root })
+    );
   };
 }
 function getLexicalTextFormat(node) {

package/dist/index.mjs

@@ -4336,10 +4336,27 @@ import { $createListItemNode, $createListNode } from "@lexical/list";
 import { $createHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
 import { $createTableCellNode, $createTableNode, $createTableRowNode } from "@lexical/table";
+
+// src/rich-text-editor/model/parse-initial-state.ts
+function parseInitialState({ richText }) {
+  let richTextArray = Array.isArray(richText) ? richText : [richText];
+  richTextArray = richTextArray.map((rootNode) => {
+    if (!rootNode.kind || rootNode.kind === "inline") {
+      return {
+        type: "paragraph",
+        kind: "block",
+        children: [rootNode]
+      };
+    }
+    return rootNode;
+  });
+  return richTextArray;
+}
+
+// src/rich-text-editor/model/crystallize-to-lexical.ts
 function composeInitialState({ richText }) {
   return function setLexicalState() {
     const root = $getRoot();
-    const richTextArray = Array.isArray(richText) ? richText : [richText];
     function handleNode({
       crystallizeContentNode,
       lexicalParent
@@ -4481,7 +4498,9 @@ function composeInitialState({ richText }) {
         lexicalParent.append(lexicalNode);
       }
     }
-    richTextArray.forEach((crystallizeContentNode) => handleNode({ crystallizeContentNode, lexicalParent: root }));
+    parseInitialState({ richText }).forEach(
+      (crystallizeContentNode) => handleNode({ crystallizeContentNode, lexicalParent: root })
+    );
   };
 }
 function getLexicalTextFormat(node) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.7",
+  "version": "1.12.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -58,20 +58,20 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.0.0-beta.14",
-    "@storybook/addon-backgrounds": "7.0.0-beta.14",
-    "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.0.0-beta.14",
-    "@storybook/addon-highlight": "7.0.0-beta.14",
-    "@storybook/addon-interactions": "7.0.0-beta.14",
-    "@storybook/addon-links": "7.0.0-beta.14",
-    "@storybook/addon-measure": "7.0.0-beta.14",
-    "@storybook/addon-outline": "7.0.0-beta.14",
+    "@storybook/addon-actions": "7.0.7",
+    "@storybook/addon-backgrounds": "7.0.7",
+    "@storybook/addon-docs": "7.0.7",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-highlight": "7.0.7",
+    "@storybook/addon-interactions": "7.0.7",
+    "@storybook/addon-links": "7.0.7",
+    "@storybook/addon-measure": "7.0.7",
+    "@storybook/addon-outline": "7.0.7",
     "@storybook/addons": "^6.5.15",
-    "@storybook/react": "7.0.0-beta.14",
-    "@storybook/react-vite": "7.0.0-beta.14",
+    "@storybook/react": "7.0.7",
+    "@storybook/react-vite": "7.0.7",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "7.0.0-beta.14",
+    "@storybook/theming": "7.0.7",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -83,14 +83,14 @@
     "concurrently": "^7.6.0",
     "hex-rgb": "4.3.0",
     "postcss": "^8.4.21",
-    "storybook": "7.0.0-beta.14",
+    "storybook": "7.0.7",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.0.5",
     "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
-    "vite": "^4.2.1",
-    "vitest": "^0.30.1",
+    "vite": "4.3.4",
+    "vitest": "0.30.1",
     "tsconfig": "0.0.0"
   },
   "keywords": [
@@ -116,7 +116,7 @@
     "build:storybook": "storybook build -s public",
     "build:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --minify",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
-    "build": "pnpm build:tw && pnpm build:tsup && pnpm build:storybook",
+    "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
     "dev:storybook": "storybook dev -p 6006 --no-open -s public",

package/src/rich-text-editor/model/crystallize-to-lexical.ts

@@ -15,13 +15,12 @@ import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
 import { $createTableCellNode, $createTableNode, $createTableRowNode } from '@lexical/table';
 
 import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
+import { parseInitialState } from './parse-initial-state';
 
 export function composeInitialState({ richText }: { richText: CrystallizeRichText }) {
   return function setLexicalState() {
     const root = $getRoot();
 
-    const richTextArray = Array.isArray(richText) ? richText : [richText];
-
     function handleNode({
       crystallizeContentNode,
       lexicalParent,
@@ -196,7 +195,9 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
       }
     }
 
-    richTextArray.forEach(crystallizeContentNode => handleNode({ crystallizeContentNode, lexicalParent: root }));
+    parseInitialState({ richText }).forEach(crystallizeContentNode =>
+      handleNode({ crystallizeContentNode, lexicalParent: root }),
+    );
   };
 }
 

package/src/rich-text-editor/model/parse-initial-state.test.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+
+import type { CrystallizeRichText } from '../rich-text-editor';
+import { parseInitialState } from './parse-initial-state';
+
+describe('RichTextEditor parseInitialState', () => {
+  it('ensures that the initial state is an array', async () => {
+    expect(
+      parseInitialState({
+        richText: {
+          kind: 'block',
+          type: 'paragraph',
+          textContent: 'hello',
+        },
+      }),
+    ).toEqual([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'hello',
+      },
+    ]);
+  });
+
+  it('ensures that all root nodes are block elements', async () => {
+    expect(
+      parseInitialState({
+        richText: [
+          {
+            kind: 'inline',
+            textContent: 'hello',
+          },
+        ],
+      }),
+    ).toEqual([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            textContent: 'hello',
+          },
+        ],
+      } as CrystallizeRichText,
+    ]);
+  });
+});

package/src/rich-text-editor/model/parse-initial-state.ts

@@ -0,0 +1,20 @@
+import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
+
+export function parseInitialState({ richText }: { richText: CrystallizeRichText }): CrystallizeRichTextNode[] {
+  let richTextArray = Array.isArray(richText) ? richText : [richText];
+
+  // Ensure all root items are block elements
+  richTextArray = richTextArray.map(rootNode => {
+    if (!rootNode.kind || rootNode.kind === 'inline') {
+      return {
+        type: 'paragraph',
+        kind: 'block',
+        children: [rootNode],
+      };
+    }
+
+    return rootNode;
+  });
+
+  return richTextArray;
+}

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -459,3 +459,16 @@ export const CustomTranslation: Story = {
     },
   },
 };
+
+export const Bug: Story = {
+  args: {
+    initialData: [
+      {
+        kind: 'inline',
+        type: null,
+        textContent:
+          'Krigsårene frem mot 1814 inneholder noen av de mest dramatiske begivenhetene i både dansk og norsk historie. I denne boken finner du for første gang en samlet fremstilling av krigsårene mellom 1807 og 1814 fra et felles dansk-norsk perspektiv.Dette verket er et sentralt bidrag i markeringen av 200-årsjubileet for grunnloven og den dansk-norske skilsmissen, skrevet av en dansk og en norsk historiker. I boken forteller de om krigsbegivenhetene både til lands og til sjøs, hvordan de ble opplevd blant ulike samfunnslag fra elitene i København, Christiania og Kiel, til husmenn i Østerdalen, bønder på Lolland-Falster og småhandelsfolk i Slesvig-Holstein.1814 var det moderne Norges fødsel. Norge ble selvstendig med en av Europas mest liberale grunnlover, og både selvstendigheten og grunnloven fikk leve videre selv om Norge mot slutten av året ble forent med Sverige i en løs union. Politisk sett gjorde dette Norge til en av Napoleonskrigenes vinnere, men ""mirakelåret"" 1814 ble født av et nederlag.',
+      },
+    ],
+  },
+};