@valbuild/ui 0.13.3 → 0.15.0

package/dist/valbuild-ui.cjs.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
 var Lexical_dev = {};
 var hasRequiredLexical_dev;
 function requireLexical_dev() {
@@ -16224,6 +16227,7 @@ function requireLexicalErrorBoundary_prod() {
 }
 const LexicalErrorBoundary = process.env.NODE_ENV === "development" ? requireLexicalErrorBoundary_dev() : requireLexicalErrorBoundary_prod();
 var LexicalErrorBoundary_1 = LexicalErrorBoundary;
+const LexicalErrorBoundary$1 = /* @__PURE__ */ getDefaultExportFromCjs(LexicalErrorBoundary_1);
 var LexicalHistoryPlugin_dev = {};
 var LexicalHistory_dev = {};
 var hasRequiredLexicalHistory_dev;
@@ -17164,25 +17168,9 @@ function requireLexicalText() {
   LexicalText_1 = LexicalText;
   return LexicalText_1;
 }
-var reactDomExports = {};
-var reactDom = {
-  get exports() {
-    return reactDomExports;
-  },
-  set exports(v) {
-    reactDomExports = v;
-  }
-};
+var reactDom = { exports: {} };
 var reactDom_production_min = {};
-var schedulerExports = {};
-var scheduler = {
-  get exports() {
-    return schedulerExports;
-  },
-  set exports(v) {
-    schedulerExports = v;
-  }
-};
+var scheduler = { exports: {} };
 var scheduler_production_min = {};
 /**
  * @license React
@@ -17903,16 +17891,14 @@ function requireScheduler_development() {
 var hasRequiredScheduler;
 function requireScheduler() {
   if (hasRequiredScheduler)
-    return schedulerExports;
+    return scheduler.exports;
   hasRequiredScheduler = 1;
-  (function(module2) {
-    if (process.env.NODE_ENV === "production") {
-      module2.exports = requireScheduler_production_min();
-    } else {
-      module2.exports = requireScheduler_development();
-    }
-  })(scheduler);
-  return schedulerExports;
+  if (process.env.NODE_ENV === "production") {
+    scheduler.exports = requireScheduler_production_min();
+  } else {
+    scheduler.exports = requireScheduler_development();
+  }
+  return scheduler.exports;
 }
 /**
  * @license React
@@ -45960,30 +45946,28 @@ function requireReactDom_development() {
 var hasRequiredReactDom;
 function requireReactDom() {
   if (hasRequiredReactDom)
-    return reactDomExports;
+    return reactDom.exports;
   hasRequiredReactDom = 1;
-  (function(module2) {
-    function checkDCE() {
-      if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
-        return;
-      }
-      if (process.env.NODE_ENV !== "production") {
-        throw new Error("^_^");
-      }
-      try {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-      } catch (err) {
-        console.error(err);
-      }
+  function checkDCE() {
+    if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
+      return;
     }
-    if (process.env.NODE_ENV === "production") {
-      checkDCE();
-      module2.exports = requireReactDom_production_min();
-    } else {
-      module2.exports = requireReactDom_development();
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error("^_^");
+    }
+    try {
+      __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+    } catch (err) {
+      console.error(err);
     }
-  })(reactDom);
-  return reactDomExports;
+  }
+  if (process.env.NODE_ENV === "production") {
+    checkDCE();
+    reactDom.exports = requireReactDom_production_min();
+  } else {
+    reactDom.exports = requireReactDom_development();
+  }
+  return reactDom.exports;
 }
 var LexicalDragon_dev = {};
 var hasRequiredLexicalDragon_dev;
@@ -48597,15 +48581,7 @@ const Underline = ({ className }) => {
   );
 };
 const Underline$1 = Underline;
-var classnamesExports = {};
-var classnames = {
-  get exports() {
-    return classnamesExports;
-  },
-  set exports(v) {
-    classnamesExports = v;
-  }
-};
+var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -48652,7 +48628,8 @@ var classnames = {
     }
   })();
 })(classnames);
-const classNames = classnamesExports;
+var classnamesExports = classnames.exports;
+const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const Button = ({
   variant = "primary",
   onClick,
@@ -49193,25 +49170,25 @@ function toLexicalNode(node) {
 }
 function toLexicalHeadingNode(heading) {
   const node = LexicalRichText_1.$createHeadingNode(heading.tag);
-  node.setFormat(heading.format);
-  node.setIndent(heading.indent);
-  node.setDirection(heading.direction);
+  node.setFormat(heading.format || "");
+  node.setIndent(heading.indent || 0);
+  node.setDirection(heading.direction || "ltr");
   node.append(...heading.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalParagraphNode(paragraph) {
   const node = Lexical_1.$createParagraphNode();
-  node.setFormat(paragraph.format);
-  node.setIndent(paragraph.indent);
-  node.setDirection(paragraph.direction);
+  node.setFormat(paragraph.format || "");
+  node.setIndent(paragraph.indent || 0);
+  node.setDirection(paragraph.direction || "ltr");
   node.append(...paragraph.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalListItemNode(listItem) {
   const node = LexicalList_1.$createListItemNode();
-  node.setFormat(listItem.format);
-  node.setIndent(listItem.indent);
-  node.setDirection(listItem.direction);
+  node.setFormat(listItem.format || "");
+  node.setIndent(listItem.indent || 0);
+  node.setDirection(listItem.direction || "ltr");
   node.setValue(listItem.value);
   node.setChecked(listItem.checked);
   node.append(...listItem.children.map((child) => toLexicalNode(child)));
@@ -49219,9 +49196,9 @@ function toLexicalListItemNode(listItem) {
 }
 function toLexicalListNode(list) {
   const node = LexicalList_1.$createListNode(list.listType, list.start);
-  node.setFormat(list.format);
-  node.setIndent(list.indent);
-  node.setDirection(list.direction);
+  node.setFormat(list.format || "");
+  node.setIndent(list.indent || 0);
+  node.setDirection(list.direction || "ltr");
   node.append(...list.children.map((child) => toLexicalNode(child)));
   return node;
 }
@@ -49230,8 +49207,8 @@ function toLexicalTextNode(text) {
   node.setFormat(text.format);
   text.indent && node.setIndent(text.indent);
   text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style);
-  node.setDetail(text.detail);
+  node.setStyle(text.style || "");
+  node.setDetail(text.detail || 0);
   return node;
 }
 const RichTextEditor = ({
@@ -49282,7 +49259,7 @@ const RichTextEditor = ({
       {
         contentEditable: /* @__PURE__ */ jsxRuntime.jsx(LexicalContentEditable, { className: "relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" }),
         placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary", children: "Enter some text..." }),
-        ErrorBoundary: LexicalErrorBoundary_1
+        ErrorBoundary: LexicalErrorBoundary$1
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(LexicalListPlugin_1.ListPlugin, {}),
@@ -49319,24 +49296,8 @@ function FormContainer({
     }
   );
 }
-var propTypesExports = {};
-var propTypes = {
-  get exports() {
-    return propTypesExports;
-  },
-  set exports(v) {
-    propTypesExports = v;
-  }
-};
-var reactIsExports = {};
-var reactIs = {
-  get exports() {
-    return reactIsExports;
-  },
-  set exports(v) {
-    reactIsExports = v;
-  }
-};
+var propTypes = { exports: {} };
+var reactIs = { exports: {} };
 var reactIs_production_min = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -49607,16 +49568,14 @@ function requireReactIs_development() {
 var hasRequiredReactIs;
 function requireReactIs() {
   if (hasRequiredReactIs)
-    return reactIsExports;
+    return reactIs.exports;
   hasRequiredReactIs = 1;
-  (function(module2) {
-    if (process.env.NODE_ENV === "production") {
-      module2.exports = requireReactIs_production_min();
-    } else {
-      module2.exports = requireReactIs_development();
-    }
-  })(reactIs);
-  return reactIsExports;
+  if (process.env.NODE_ENV === "production") {
+    reactIs.exports = requireReactIs_production_min();
+  } else {
+    reactIs.exports = requireReactIs_development();
+  }
+  return reactIs.exports;
 }
 /*
 object-assign
@@ -50283,6 +50242,8 @@ if (process.env.NODE_ENV !== "production") {
 } else {
   propTypes.exports = requireFactoryWithThrowingShims()();
 }
+var propTypesExports = propTypes.exports;
+const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
 function _extends$2() {
   _extends$2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -50365,8 +50326,8 @@ var AlignJustify = React.forwardRef(function(_ref, ref) {
   }));
 });
 AlignJustify.propTypes = {
-  color: propTypesExports.string,
-  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number])
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 AlignJustify.displayName = "AlignJustify";
 const AlignJustify$1 = AlignJustify;
@@ -50443,8 +50404,8 @@ var UploadCloud = React.forwardRef(function(_ref, ref) {
   }));
 });
 UploadCloud.propTypes = {
-  color: propTypesExports.string,
-  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number])
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 UploadCloud.displayName = "UploadCloud";
 const UploadCloud$1 = UploadCloud;
@@ -50520,8 +50481,8 @@ var X = React.forwardRef(function(_ref, ref) {
   }));
 });
 X.propTypes = {
-  color: propTypesExports.string,
-  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number])
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 X.displayName = "X";
 const X$1 = X;

package/dist/valbuild-ui.esm.js

@@ -1,5 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback, forwardRef } from "react";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
 var Lexical_dev = {};
 var hasRequiredLexical_dev;
 function requireLexical_dev() {
@@ -16222,6 +16225,7 @@ function requireLexicalErrorBoundary_prod() {
 }
 const LexicalErrorBoundary = process.env.NODE_ENV === "development" ? requireLexicalErrorBoundary_dev() : requireLexicalErrorBoundary_prod();
 var LexicalErrorBoundary_1 = LexicalErrorBoundary;
+const LexicalErrorBoundary$1 = /* @__PURE__ */ getDefaultExportFromCjs(LexicalErrorBoundary_1);
 var LexicalHistoryPlugin_dev = {};
 var LexicalHistory_dev = {};
 var hasRequiredLexicalHistory_dev;
@@ -17162,25 +17166,9 @@ function requireLexicalText() {
   LexicalText_1 = LexicalText;
   return LexicalText_1;
 }
-var reactDomExports = {};
-var reactDom = {
-  get exports() {
-    return reactDomExports;
-  },
-  set exports(v) {
-    reactDomExports = v;
-  }
-};
+var reactDom = { exports: {} };
 var reactDom_production_min = {};
-var schedulerExports = {};
-var scheduler = {
-  get exports() {
-    return schedulerExports;
-  },
-  set exports(v) {
-    schedulerExports = v;
-  }
-};
+var scheduler = { exports: {} };
 var scheduler_production_min = {};
 /**
  * @license React
@@ -17901,16 +17889,14 @@ function requireScheduler_development() {
 var hasRequiredScheduler;
 function requireScheduler() {
   if (hasRequiredScheduler)
-    return schedulerExports;
+    return scheduler.exports;
   hasRequiredScheduler = 1;
-  (function(module) {
-    if (process.env.NODE_ENV === "production") {
-      module.exports = requireScheduler_production_min();
-    } else {
-      module.exports = requireScheduler_development();
-    }
-  })(scheduler);
-  return schedulerExports;
+  if (process.env.NODE_ENV === "production") {
+    scheduler.exports = requireScheduler_production_min();
+  } else {
+    scheduler.exports = requireScheduler_development();
+  }
+  return scheduler.exports;
 }
 /**
  * @license React
@@ -45958,30 +45944,28 @@ function requireReactDom_development() {
 var hasRequiredReactDom;
 function requireReactDom() {
   if (hasRequiredReactDom)
-    return reactDomExports;
+    return reactDom.exports;
   hasRequiredReactDom = 1;
-  (function(module) {
-    function checkDCE() {
-      if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
-        return;
-      }
-      if (process.env.NODE_ENV !== "production") {
-        throw new Error("^_^");
-      }
-      try {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-      } catch (err) {
-        console.error(err);
-      }
+  function checkDCE() {
+    if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === "undefined" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== "function") {
+      return;
     }
-    if (process.env.NODE_ENV === "production") {
-      checkDCE();
-      module.exports = requireReactDom_production_min();
-    } else {
-      module.exports = requireReactDom_development();
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error("^_^");
+    }
+    try {
+      __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+    } catch (err) {
+      console.error(err);
     }
-  })(reactDom);
-  return reactDomExports;
+  }
+  if (process.env.NODE_ENV === "production") {
+    checkDCE();
+    reactDom.exports = requireReactDom_production_min();
+  } else {
+    reactDom.exports = requireReactDom_development();
+  }
+  return reactDom.exports;
 }
 var LexicalDragon_dev = {};
 var hasRequiredLexicalDragon_dev;
@@ -48595,15 +48579,7 @@ const Underline = ({ className }) => {
   );
 };
 const Underline$1 = Underline;
-var classnamesExports = {};
-var classnames = {
-  get exports() {
-    return classnamesExports;
-  },
-  set exports(v) {
-    classnamesExports = v;
-  }
-};
+var classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -48650,7 +48626,8 @@ var classnames = {
     }
   })();
 })(classnames);
-const classNames = classnamesExports;
+var classnamesExports = classnames.exports;
+const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const Button = ({
   variant = "primary",
   onClick,
@@ -49191,25 +49168,25 @@ function toLexicalNode(node) {
 }
 function toLexicalHeadingNode(heading) {
   const node = LexicalRichText_1.$createHeadingNode(heading.tag);
-  node.setFormat(heading.format);
-  node.setIndent(heading.indent);
-  node.setDirection(heading.direction);
+  node.setFormat(heading.format || "");
+  node.setIndent(heading.indent || 0);
+  node.setDirection(heading.direction || "ltr");
   node.append(...heading.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalParagraphNode(paragraph) {
   const node = Lexical_1.$createParagraphNode();
-  node.setFormat(paragraph.format);
-  node.setIndent(paragraph.indent);
-  node.setDirection(paragraph.direction);
+  node.setFormat(paragraph.format || "");
+  node.setIndent(paragraph.indent || 0);
+  node.setDirection(paragraph.direction || "ltr");
   node.append(...paragraph.children.map((child) => toLexicalNode(child)));
   return node;
 }
 function toLexicalListItemNode(listItem) {
   const node = LexicalList_1.$createListItemNode();
-  node.setFormat(listItem.format);
-  node.setIndent(listItem.indent);
-  node.setDirection(listItem.direction);
+  node.setFormat(listItem.format || "");
+  node.setIndent(listItem.indent || 0);
+  node.setDirection(listItem.direction || "ltr");
   node.setValue(listItem.value);
   node.setChecked(listItem.checked);
   node.append(...listItem.children.map((child) => toLexicalNode(child)));
@@ -49217,9 +49194,9 @@ function toLexicalListItemNode(listItem) {
 }
 function toLexicalListNode(list) {
   const node = LexicalList_1.$createListNode(list.listType, list.start);
-  node.setFormat(list.format);
-  node.setIndent(list.indent);
-  node.setDirection(list.direction);
+  node.setFormat(list.format || "");
+  node.setIndent(list.indent || 0);
+  node.setDirection(list.direction || "ltr");
   node.append(...list.children.map((child) => toLexicalNode(child)));
   return node;
 }
@@ -49228,8 +49205,8 @@ function toLexicalTextNode(text) {
   node.setFormat(text.format);
   text.indent && node.setIndent(text.indent);
   text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style);
-  node.setDetail(text.detail);
+  node.setStyle(text.style || "");
+  node.setDetail(text.detail || 0);
   return node;
 }
 const RichTextEditor = ({
@@ -49280,7 +49257,7 @@ const RichTextEditor = ({
       {
         contentEditable: /* @__PURE__ */ jsx(LexicalContentEditable, { className: "relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" }),
         placeholder: /* @__PURE__ */ jsx("div", { className: "absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary", children: "Enter some text..." }),
-        ErrorBoundary: LexicalErrorBoundary_1
+        ErrorBoundary: LexicalErrorBoundary$1
       }
     ),
     /* @__PURE__ */ jsx(LexicalListPlugin_1.ListPlugin, {}),
@@ -49317,24 +49294,8 @@ function FormContainer({
     }
   );
 }
-var propTypesExports = {};
-var propTypes = {
-  get exports() {
-    return propTypesExports;
-  },
-  set exports(v) {
-    propTypesExports = v;
-  }
-};
-var reactIsExports = {};
-var reactIs = {
-  get exports() {
-    return reactIsExports;
-  },
-  set exports(v) {
-    reactIsExports = v;
-  }
-};
+var propTypes = { exports: {} };
+var reactIs = { exports: {} };
 var reactIs_production_min = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -49605,16 +49566,14 @@ function requireReactIs_development() {
 var hasRequiredReactIs;
 function requireReactIs() {
   if (hasRequiredReactIs)
-    return reactIsExports;
+    return reactIs.exports;
   hasRequiredReactIs = 1;
-  (function(module) {
-    if (process.env.NODE_ENV === "production") {
-      module.exports = requireReactIs_production_min();
-    } else {
-      module.exports = requireReactIs_development();
-    }
-  })(reactIs);
-  return reactIsExports;
+  if (process.env.NODE_ENV === "production") {
+    reactIs.exports = requireReactIs_production_min();
+  } else {
+    reactIs.exports = requireReactIs_development();
+  }
+  return reactIs.exports;
 }
 /*
 object-assign
@@ -50281,6 +50240,8 @@ if (process.env.NODE_ENV !== "production") {
 } else {
   propTypes.exports = requireFactoryWithThrowingShims()();
 }
+var propTypesExports = propTypes.exports;
+const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
 function _extends$2() {
   _extends$2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -50363,8 +50324,8 @@ var AlignJustify = forwardRef(function(_ref, ref) {
   }));
 });
 AlignJustify.propTypes = {
-  color: propTypesExports.string,
-  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number])
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 AlignJustify.displayName = "AlignJustify";
 const AlignJustify$1 = AlignJustify;
@@ -50441,8 +50402,8 @@ var UploadCloud = forwardRef(function(_ref, ref) {
   }));
 });
 UploadCloud.propTypes = {
-  color: propTypesExports.string,
-  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number])
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 UploadCloud.displayName = "UploadCloud";
 const UploadCloud$1 = UploadCloud;
@@ -50518,8 +50479,8 @@ var X = forwardRef(function(_ref, ref) {
   }));
 });
 X.propTypes = {
-  color: propTypesExports.string,
-  size: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.number])
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 X.displayName = "X";
 const X$1 = X;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.13.3",
+  "version": "0.15.0",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -65,27 +65,27 @@ function toLexicalNode(node: ValNode): LexicalNode {
 
 function toLexicalHeadingNode(heading: ValHeadingNode): LexicalNode {
   const node = $createHeadingNode(heading.tag);
-  node.setFormat(heading.format);
-  node.setIndent(heading.indent);
-  node.setDirection(heading.direction);
+  node.setFormat(heading.format || "");
+  node.setIndent(heading.indent || 0);
+  node.setDirection(heading.direction || "ltr");
   node.append(...heading.children.map((child) => toLexicalNode(child)));
   return node;
 }
 
 function toLexicalParagraphNode(paragraph: ValParagraphNode): LexicalNode {
   const node = $createParagraphNode();
-  node.setFormat(paragraph.format);
-  node.setIndent(paragraph.indent);
-  node.setDirection(paragraph.direction);
+  node.setFormat(paragraph.format || "");
+  node.setIndent(paragraph.indent || 0);
+  node.setDirection(paragraph.direction || "ltr");
   node.append(...paragraph.children.map((child) => toLexicalNode(child)));
   return node;
 }
 
 function toLexicalListItemNode(listItem: ValListItemNode): LexicalNode {
   const node = $createListItemNode();
-  node.setFormat(listItem.format);
-  node.setIndent(listItem.indent);
-  node.setDirection(listItem.direction);
+  node.setFormat(listItem.format || "");
+  node.setIndent(listItem.indent || 0);
+  node.setDirection(listItem.direction || "ltr");
   node.setValue(listItem.value);
   node.setChecked(listItem.checked);
   node.append(...listItem.children.map((child) => toLexicalNode(child)));
@@ -94,9 +94,9 @@ function toLexicalListItemNode(listItem: ValListItemNode): LexicalNode {
 
 function toLexicalListNode(list: ValListNode): LexicalNode {
   const node = $createListNode(list.listType, list.start);
-  node.setFormat(list.format);
-  node.setIndent(list.indent);
-  node.setDirection(list.direction);
+  node.setFormat(list.format || "");
+  node.setIndent(list.indent || 0);
+  node.setDirection(list.direction || "ltr");
   node.append(...list.children.map((child) => toLexicalNode(child)));
   return node;
 }
@@ -106,8 +106,8 @@ function toLexicalTextNode(text: ValTextNode): LexicalNode {
   node.setFormat(text.format as any); // TODO: why is text.format numbers when we are trying it out?
   text.indent && node.setIndent(text.indent);
   text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style);
-  node.setDetail(text.detail);
+  node.setStyle(text.style || "");
+  node.setDetail(text.detail || 0);
   return node;
 }
 

package/src/components/ValWindow.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { RichText as RichTextType, SourcePath } from "@valbuild/core";
 import { RichTextEditor } from "../exports";
 import { FormContainer } from "./forms/FormContainer";
 import { ImageForm } from "./forms/ImageForm";
@@ -72,34 +73,37 @@ export const RichText: Story = {
         }}
       >
         <RichTextEditor
-          richtext={{
-            children: [
-              {
-                children: [
-                  {
-                    detail: 0,
-                    format: 0,
-                    mode: "normal",
-                    style: "",
-                    text: "Heading 1",
-                    type: "text",
-                    version: 1,
-                  },
-                ],
-                direction: "ltr",
-                format: "",
-                indent: 0,
-                type: "heading",
-                version: 1,
-                tag: "h1",
-              },
-            ],
-            direction: "ltr",
-            format: "",
-            indent: 0,
-            type: "root",
-            version: 1,
-          }}
+          richtext={
+            {
+              valPath: "/foo" as SourcePath,
+              children: [
+                {
+                  children: [
+                    {
+                      detail: 0,
+                      format: 0,
+                      mode: "normal",
+                      style: "",
+                      text: "Heading 1",
+                      type: "text",
+                      version: 1,
+                    },
+                  ],
+                  direction: "ltr",
+                  format: "",
+                  indent: 0,
+                  type: "heading",
+                  version: 1,
+                  tag: "h1",
+                },
+              ],
+              direction: "ltr",
+              format: "",
+              indent: 0,
+              type: "root",
+              version: 1,
+            } as RichTextType
+          }
         />
       </FormContainer>
     ),

package/src/stories/RichTextEditor.stories.tsx

@@ -3,6 +3,7 @@ import {
   RichTextEditorProps,
 } from "../components/RichTextEditor/RichTextEditor";
 import { Meta, Story } from "@storybook/react";
+import { RichText, SourcePath } from "@valbuild/core";
 
 export default {
   title: "RichTextEditor",
@@ -17,6 +18,7 @@ export const DropdownStory = Template.bind({});
 
 DropdownStory.args = {
   richtext: {
+    valPath: "/test" as SourcePath,
     children: [
       {
         children: [
@@ -310,5 +312,5 @@ DropdownStory.args = {
     indent: 0,
     type: "root",
     version: 1,
-  },
+  } as RichText,
 };