feat: image and span block updated, remove devtools from build

package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "1.2.95",
+  "version": "1.2.96",
   "type": "module",
   "repository": {
     "type": "git",

src/core/components/ChaiBuilderEditor.tsx

@@ -1,6 +1,5 @@
 import "react-quill/dist/quill.snow.css";
 import "../index.css";
-import { DevTools } from "jotai-devtools";
 import i18n from "../locales/load.ts";
 import { FlagsProvider } from "flagged";
 import React, { useEffect, useMemo } from "react";
@@ -112,7 +111,6 @@ const ChaiBuilderEditor: React.FC<ChaiBuilderEditorProps> = (props: ChaiBuilderE
     <div className="h-screen w-screen">
       <ErrorBoundary fallback={<FallbackError />} onError={onErrorFn}>
         <FlagsProvider features={{ ...FEATURE_TOGGLES, ..._flags }}>
-          <DevTools />
           <SmallScreenMessage />
           <ChaiBuilderComponent {...props} />
           <PreviewScreen />

src/core/components/settings/SettingsPanel.tsx

@@ -19,19 +19,15 @@ function BlockAttributesToggle() {
   }
   return (
     <>
-      {showAttributes ? (
-        <>
-          <div
-            onClick={() => setShowAttributes(!showAttributes)}
-            className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline">
-            <span>{t("Attributes")}</span>
-            <span>
-              <ChevronDown className={"h-4 w-4 text-gray-500 " + (showAttributes ? "rotate-180" : "")} />
-            </span>
-          </div>
-          {showAttributes && <BlockAttributesEditor />}
-        </>
-      ) : null}
+      <div
+        onClick={() => setShowAttributes(!showAttributes)}
+        className="flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline">
+        <span>{t("Attributes")}</span>
+        <span>
+          <ChevronDown className={"h-4 w-4 text-gray-500 " + (showAttributes ? "rotate-180" : "")} />
+        </span>
+      </div>
+      {showAttributes && <BlockAttributesEditor />}
     </>
   );
 }

src/core/index.css

@@ -133,6 +133,14 @@ select:focus {
   @apply border-border outline-none ring-1 ring-transparent !important;
 }
 
+.rjsf [type="checkbox"] {
+  @apply !w-6 !p-0;
+}
+
+.rjsf [type="checkbox"]:checked {
+  @apply bg-primary;
+}
+
 /* ------------------------ Props Editor ------------------------ */
 
 .array-item-list > :not([hidden]) ~ :not([hidden]) {

src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "./index.css";
 import ChaiBuilderCustom from "./EditorCustom.tsx";
+import { DevTools } from "jotai-devtools";
 
 async function enableMocking() {
   if (import.meta.env.MODE !== "development") {
@@ -42,6 +43,7 @@ const router = createBrowserRouter([
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
+      <DevTools />
       <RouterProvider router={router} />
     </React.StrictMode>,
   );

src/web-blocks/lightbox-link.tsx

@@ -6,7 +6,6 @@ import EmptySlot from "./empty-slot.tsx";
 import { addForcedClasses } from "./helper.ts";
 import { ChaiBlockStyles, ChaiRenderBlockProps } from "../core/types/types.ts";
 
-
 type LightBoxLinkProps = {
   href: string;
   hrefType: string;
@@ -67,28 +66,28 @@ const LightBoxLinkBlock = (props: ChaiRenderBlockProps<LightBoxLinkProps>) => {
 };
 const Config = {
   type: "LightBoxLink",
-  label: "web_blocks.lightbox_link",
+  label: "Lightbox Link",
   category: "core",
   icon: ImageIcon,
   group: "basic",
   props: {
     styles: Styles({ default: "" }),
-    content: SingleLineText({ title: "web_blocks.content", default: "Link text or drop blocks inside" }),
-    href: SingleLineText({ title: "web_blocks.href", default: "" }),
+    content: SingleLineText({ title: "Content", default: "Link text or drop blocks inside" }),
+    href: SingleLineText({ title: "Href", default: "" }),
     hrefType: SelectOption({
-      title: "web_blocks.type",
+      title: "Type",
       default: "video",
       options: [
-        { value: "video", title: "web_blocks.video" },
-        { value: "iframe", title: "web_blocks.iframe" },
-        { value: "inline", title: "web_blocks.inline" },
-        { value: "ajax", title: "web_blocks.ajax" },
+        { value: "video", title: "Video" },
+        { value: "iframe", title: "Iframe" },
+        { value: "inline", title: "Inline" },
+        { value: "ajax", title: "Ajax" },
       ],
     }),
-    autoplay: Checkbox({ title: "web_blocks.autoplay", default: false }),
-    maxWidth: Numeric({ title: "web_blocks.max_width", default: "" }),
-    backdropColor: SingleLineText({ title: "backdrop_color", default: "" }),
-    galleryName: SingleLineText({ title: "web_blocks.gallery_name", default: "" }),
+    autoplay: Checkbox({ title: "Autoplay", default: false }),
+    maxWidth: Numeric({ title: "Max Width", default: "" }),
+    backdropColor: SingleLineText({ title: "Backdrop Color", default: "" }),
+    galleryName: SingleLineText({ title: "Gallery Name", default: "" }),
   },
   canAcceptBlock: (type: string) => type !== "Link" && type !== "LightBoxLink",
 };

src/web-blocks/span.tsx

@@ -17,7 +17,7 @@ const SpanBlock = (
     ...styles,
     ...blockProps,
     "data-ai-key": "content",
-    dangerouslySetInnerHTML: { __html: content },
+    dangerouslySetInnerHTML: { __html: content || "" },
   });
 };
 
@@ -28,7 +28,7 @@ const Config = {
   group: "typography",
   props: {
     styles: Styles({ default: "" }),
-    content: MultilineText({ title: "web_blocks.content", default: "" }),
+    content: MultilineText({ title: "Content", default: "" }),
   },
   canAcceptBlock: () => true,
 };