@crystallize/design-system 1.16.1 → 1.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.16.1",
+  "version": "1.16.3",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/button/button.css

@@ -92,10 +92,10 @@
 }
 
 .c-btn-xs {
-  @apply h-6 py-2 px-4;
+  @apply h-6 px-4 py-2 text-[12px] leading-[0];
 
   .c-btn__loading-spinner {
-    @apply left-[3px];
+    @apply left-[2px];
   }
 }
 

package/src/button/button.tsx

@@ -65,6 +65,11 @@ const buttonStyles = cva('c-btn', {
       variant: 'elevate',
       class: 'c-btn-danger c-btn-elevate',
     },
+    {
+      intent: 'action',
+      variant: 'elevate',
+      class: 'c-btn-action c-btn-elevate',
+    },
   ],
   defaultVariants: {
     intent: 'default',

package/src/iconography/key.tsx

@@ -6,11 +6,16 @@ type KeyRef = SVGSVGElement;
 
 export const Key = forwardRef<KeyRef, KeyProps>((delegated, ref) => {
   return (
-    <svg ref={ref} viewBox="0 0 24 25" width="24" height="25" fill="none" {...delegated}>
+    <svg ref={ref} viewBox="0 0 22 22" width="22" height="22" fill="none" {...delegated}>
       <path
+        d="M19.8945 5.95026C19.6477 4.73793 18.937 3.69147 17.8935 3.00418C17.3743 2.6618 16.7941 2.42807 16.1865 2.31644C15.5788 2.20481 15.0511 2.19471 14.3527 2.35376C13.5642 2.53331 13.1208 2.75386 12.4919 3.26216C11.8563 3.77585 11.5544 4.17318 11.2039 4.91138C10.8646 5.62576 10.7544 6.19904 10.7405 6.88273C10.7266 7.56642 10.8573 8.24508 11.1235 8.87212C10.2697 9.74839 10.1453 9.89094 9.46986 10.5822C9.21027 10.3192 8.95563 10.0513 8.70158 9.78292C8.47173 9.53937 8.2306 9.48806 8.06702 9.48806C7.83118 9.48806 7.61684 9.5896 7.43247 9.78834C7.23329 10.0008 6.96995 10.2787 6.69709 10.5472C6.45878 10.7806 6.40802 11.0274 6.40766 11.1933C6.40766 11.435 6.50567 11.6562 6.70132 11.8506C6.95902 12.1064 7.46819 12.6368 7.46819 12.6368L6.46693 13.6448C6.46693 13.6448 5.71608 12.8816 5.3473 12.4936C5.1601 12.2966 4.94612 12.1969 4.71274 12.1969H4.70781C4.54564 12.1969 4.30416 12.2507 4.07607 12.4961C3.84798 12.7414 3.60051 12.9973 3.3273 13.2694C3.09392 13.5014 3.04527 13.7464 3.04527 13.9108C3.04527 14.1507 3.14116 14.3679 3.33047 14.5565C3.58993 14.8156 4.20439 15.4454 4.45856 15.7063C4.28469 15.8845 4.10935 16.0613 3.93894 16.2429C3.63263 16.5712 3.46379 17.0092 3.46853 17.4634C3.47328 17.9176 3.65123 18.3519 3.96432 18.6733C4.12254 18.8375 4.31076 18.9681 4.51824 19.0577C4.72571 19.1473 4.94837 19.1941 5.1735 19.1955C5.60732 19.1934 6.02377 19.0206 6.33685 18.7127C8.80299 16.3293 11.1381 13.791 13.5345 11.3369C14.1912 11.6205 14.7909 11.7474 15.3644 11.7232H15.3771C16.1365 11.7232 16.7219 11.6011 17.4701 11.2173C18.526 10.6756 19.127 9.95834 19.562 9.01305C19.997 8.06776 20.1098 7.00829 19.8945 5.95026ZM13.2806 6.98913C13.2818 6.35405 13.4569 5.9388 13.9028 5.48665C14.3486 5.0347 14.761 4.83886 15.3958 4.84381C16.0207 4.84868 16.4251 5.04079 16.86 5.48958C17.3025 5.94622 17.4666 6.36776 17.4592 7.00359C17.4455 8.16811 16.5384 9.12651 15.3648 9.12651H15.3627C14.1974 9.12592 13.2786 8.15439 13.2806 6.98913Z"
         fill="#BFF6F8"
-        stroke="#528693"
-        d="M23.486 5.617a6.308 6.308 0 0 0-2.738-4.03 6.314 6.314 0 0 0-2.335-.942 6.251 6.251 0 0 0-2.51.051c-.928.212-1.799.637-2.545 1.243a6.435 6.435 0 0 0-1.762 2.257 6.617 6.617 0 0 0-.11 5.42 3308.703 3308.703 0 0 1-3.087 3.164l-.042-.043c-.335-.34-1.163-1.187-1.495-1.537-.315-.333-.644-.403-.868-.403-.323 0-.616.138-.868.41-.273.291-.633.671-1.007 1.039-.326.32-.395.657-.396.884 0 .33.135.633.402.9.353.35 1.191 1.208 1.535 1.56l-.545.556-.048-.05c-.331-.337-1.155-1.18-1.484-1.526-.256-.269-.549-.405-.868-.405h-.007c-.222 0-.552.073-.864.409-.312.336-.65.686-1.025 1.058-.319.317-.385.653-.385.878 0 .328.13.625.39.883.355.355 1.195 1.216 1.543 1.573l-.048.05c-.218.221-.443.45-.663.685-.419.449-.65 1.048-.643 1.67a2.41 2.41 0 0 0 1.436 2.181c.284.123.588.187.896.189a2.286 2.286 0 0 0 1.592-.661c.067-.065.127-.127.186-.187l.057-.06 9.604-9.845c.899.388 1.72.562 2.504.528h.017c1.04 0 2.003-.232 2.864-.692a6.458 6.458 0 0 0 2.862-3.016c.595-1.293.75-2.743.455-4.19ZM14.437 7.04c-.016-.738.295-1.487.851-2.056.567-.578 1.312-.9 2.043-.88.755.014 1.475.331 2.003.884.529.553.823 1.298.82 2.072 0 1.631-1.26 2.904-2.866 2.904h-.002c-1.563-.001-2.815-1.283-2.849-2.924Z"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.2861 2.06126C15.0279 1.89233 15.5969 1.90313 16.2407 2.02139C16.8882 2.14034 17.5061 2.38935 18.0586 2.75375C19.168 3.48444 19.9256 4.59912 20.1884 5.89043C20.4159 7.00773 20.2975 8.13239 19.8345 9.13848C19.375 10.1371 18.7298 10.9082 17.607 11.4842C16.8141 11.891 16.1813 12.0232 15.3771 12.0232H15.3706C14.803 12.0461 14.2219 11.9333 13.6076 11.6916C12.8526 12.4665 12.1015 13.2514 11.3489 14.0378C9.77024 15.6873 8.18529 17.3435 6.54613 18.9277C6.17818 19.2889 5.68752 19.493 5.17496 19.4955L5.17167 19.4955C4.90609 19.4939 4.64362 19.4386 4.3993 19.3331C4.1553 19.2278 3.9344 19.0744 3.74899 18.8822C3.38162 18.5049 3.17408 17.9966 3.16855 17.4666C3.16301 16.9363 3.36003 16.4236 3.7196 16.0382C3.82475 15.9262 4.03922 15.706 4.03922 15.706C4.03922 15.706 3.32162 14.9716 3.11872 14.769C2.88007 14.5311 2.74527 14.2397 2.74527 13.9108C2.74527 13.6833 2.81488 13.3558 3.1158 13.0566C3.38648 12.787 3.63119 12.534 3.85634 12.2918C4.14888 11.9772 4.47429 11.8969 4.7078 11.8969H4.71274C5.04159 11.8969 5.33075 12.0407 5.56473 12.2869C5.74754 12.4792 6.02614 12.7657 6.25999 13.005C6.33588 13.0827 6.4069 13.1553 6.46821 13.2178L7.04848 12.6337C7.02239 12.6067 6.9947 12.5781 6.96596 12.5484C6.80638 12.3838 6.61651 12.1891 6.48996 12.0635C6.24557 11.8206 6.10766 11.5255 6.10766 11.1933C6.10815 10.9628 6.181 10.6329 6.48692 10.3331C6.75501 10.0693 7.01468 9.79536 7.21306 9.58374C7.4447 9.33431 7.73505 9.18807 8.06702 9.18807C8.29928 9.18807 8.62426 9.26401 8.91959 9.57685C9.10286 9.77043 9.28546 9.96275 9.46954 10.1527C9.68431 9.93175 9.83739 9.7722 10.0018 9.60089C10.1998 9.39453 10.4141 9.17111 10.7724 8.8027C10.5401 8.18952 10.4272 7.5352 10.4406 6.87665C10.4552 6.15474 10.5737 5.53909 10.9329 4.7827C11.3015 4.00641 11.6307 3.57251 12.3033 3.02885C12.9666 2.49276 13.4515 2.25131 14.2861 2.06126ZM7.68462 12.4291L7.88748 12.6404L6.4659 14.0716L6.25307 13.8552L6.12971 13.7296C6.05344 13.6519 5.94791 13.5442 5.83082 13.4243C5.59705 13.1851 5.31582 12.8959 5.12984 12.7003C4.98945 12.5525 4.85064 12.4969 4.71274 12.4969H4.7078C4.61699 12.4969 4.45943 12.5243 4.29579 12.7004C4.06482 12.9488 3.81465 13.2074 3.53899 13.482C3.37316 13.6468 3.34527 13.8094 3.34527 13.9108C3.34527 14.0616 3.40239 14.2047 3.54221 14.344C3.80349 14.6049 4.41991 15.2367 4.67344 15.497L4.87754 15.7065L4.6733 15.9158C4.63245 15.9577 4.59185 15.9991 4.55148 16.0404C4.41786 16.1768 4.28682 16.3106 4.15806 16.4478C3.90514 16.719 3.76457 17.0823 3.76851 17.4603C3.77246 17.8385 3.92067 18.1986 4.17922 18.464L4.18033 18.4652C4.31121 18.601 4.46652 18.7086 4.63716 18.7823C4.80725 18.8558 4.98946 18.8941 5.17354 18.8955L5.17203 18.8955L5.17532 18.8955L5.17354 18.8955C5.52759 18.8934 5.8688 18.7522 6.12651 18.4988L6.12836 18.497C7.75985 16.9203 9.33034 15.2792 10.904 13.6348C11.7056 12.7971 12.5081 11.9586 13.3198 11.1273L13.464 10.9797L13.6534 11.0615C14.2788 11.3316 14.8332 11.4453 15.3518 11.4234L15.3644 11.4229L15.3771 11.4232C16.0917 11.4232 16.6298 11.3112 17.3332 10.9504C18.3222 10.443 18.879 9.77955 19.2895 8.88764C19.6965 8.00315 19.8038 7.00887 19.6005 6.01012C19.3698 4.87684 18.7061 3.89862 17.7285 3.25473C17.2427 2.93437 16.7001 2.71582 16.1323 2.61151C15.5607 2.50651 15.0743 2.49712 14.4193 2.64628C13.677 2.81532 13.275 3.01499 12.6805 3.4955C12.082 3.97922 11.8073 4.33997 11.4749 5.04008C11.1556 5.71245 11.0536 6.24336 11.0405 6.88883C11.0274 7.53036 11.15 8.16698 11.3996 8.7549L11.4776 8.93858L11.3384 9.0815C10.9129 9.51811 10.6644 9.77704 10.4358 10.0151C10.2142 10.246 10.0114 10.4572 9.68443 10.7919L9.47093 11.0104L9.25634 10.7929C8.99434 10.5275 8.73781 10.2576 8.48371 9.98917C8.31939 9.81506 8.16187 9.78807 8.06702 9.78807C7.92755 9.78807 7.78942 9.84468 7.6524 9.99238L7.65133 9.99352C7.45148 10.2067 7.1848 10.4882 6.9075 10.761C6.73719 10.9278 6.70794 11.0923 6.70766 11.1936C6.70774 11.3447 6.76592 11.4918 6.91268 11.6377M14.6993 5.26848C14.5063 5.35343 14.3222 5.48871 14.1164 5.69732C13.9122 5.90435 13.7828 6.08986 13.7019 6.28448C13.6211 6.47884 13.5811 6.70037 13.5806 6.98968C13.5789 7.99854 14.3727 8.82602 15.3628 8.82652H15.3648C16.3635 8.82652 17.1473 8.01108 17.1592 7.00008C17.1626 6.70925 17.1266 6.48571 17.0492 6.28946C16.9719 6.09342 16.8461 5.90632 16.6446 5.69836C16.4445 5.49196 16.2651 5.35857 16.0764 5.27398C15.8889 5.18989 15.6744 5.146 15.3935 5.14381C15.109 5.14159 14.8908 5.18419 14.6993 5.26848ZM14.4576 4.71932C14.7424 4.59395 15.0479 4.5411 15.3981 4.54383C15.7422 4.54651 16.0423 4.60112 16.3219 4.7265C16.6004 4.85137 16.8405 5.03842 17.0754 5.28081C17.3164 5.5295 17.4939 5.78148 17.6074 6.06934C17.7208 6.35697 17.7632 6.66212 17.7591 7.00712C17.7437 8.32517 16.7132 9.42652 15.3648 9.42652H15.3627C14.0223 9.42584 12.9783 8.31027 12.9806 6.98862C12.9812 6.64284 13.0294 6.33921 13.1479 6.05413C13.2663 5.76932 13.4475 5.52112 13.6893 5.27599C13.9293 5.03266 14.1742 4.84405 14.4576 4.71932Z"
+        fill="#528693"
       />
     </svg>
   );

package/src/iconography/mushroom.tsx

@@ -18,7 +18,7 @@ export const Mushroom = forwardRef<MushroomRef, MushroomProps>((delegated, ref)
         clipRule="evenodd"
       />
       <path
-        fill="#BFF6F8"
+        fill="#FFA1DB"
         d="M17.618 9.944c0 3.195-3.875 4.271-6.712 4.271-5.683 0-6.976-2.556-6.976-4.512 0-2.837 4.138-7.1 6.976-7.1 2.837 0 6.712 3.22 6.712 7.34Z"
       />
       <path

package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -133,120 +133,110 @@ function TextFormatFloatingToolbar({
     );
   }, [editor, updateTextFormatFloatingToolbar]);
 
+  if (!editor.isEditable()) {
+    return <span />;
+  }
+
   return (
     <div ref={popupCharStylesEditorRef} className="c-rte-floating-text-format-tb-plugin">
-      {editor.isEditable() && (
-        <>
-          <IconButton
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
-            }}
-            style={{ padding: 0, overflow: 'hidden' }}
-            title={tr(IS_APPLE ? 'actionFormatAsStrongTitleApple' : 'actionFormatAsStrongTitle')}
-            aria-label={tr('actionFormatAsStrongLabel')}
-          >
-            <i
-              className={`c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${
-                isBold ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
-            }}
-            title={tr('actionFormatAsEmphasizedTitle')}
-            aria-label={tr('actionFormatAsEmphasizedLabel')}
-          >
-            <i
-              className={`c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${
-                isItalic ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
-            }}
-            title={tr('actionFormatAsUnderlinedTitle')}
-            aria-label={tr('actionFormatAsUnderlinedLabel')}
-          >
-            <i
-              className={`c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${
-                isUnderline ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
-            }}
-            title={tr('actionFormatWithStrikethroughTitle')}
-            aria-label={tr('actionFormatWithStrikethroughLabel')}
-          >
-            <i
-              className={`c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${
-                isStrikethrough ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
-            }}
-            title={tr('actionFormatWithSubscriptTitle')}
-            aria-label={tr('actionFormatWithSubscriptLabel')}
-          >
-            <i
-              className={`c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${
-                isSubscript ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
-            }}
-            title={tr('actionFormatWithSuperscriptTitle')}
-            aria-label={tr('actionFormatWithSuperscriptLabel')}
-          >
-            <i
-              className={`c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${
-                isSuperscript ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
-            }}
-            aria-label={tr('actionInsertCodeBlock')}
-          >
-            <i
-              className={`c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${
-                isCode ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-          <IconButton
-            style={{ padding: 0, overflow: 'hidden' }}
-            onClick={insertLink}
-            aria-label={tr('actionInsertlink')}
-          >
-            <i
-              className={`c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${
-                isLink ? 'selected' : ''
-              }`}
-            />
-          </IconButton>
-        </>
-      )}
+      <IconButton
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+        }}
+        style={{ padding: 0, overflow: 'hidden' }}
+        title={tr(IS_APPLE ? 'actionFormatAsStrongTitleApple' : 'actionFormatAsStrongTitle')}
+        aria-label={tr('actionFormatAsStrongLabel')}
+      >
+        <i
+          className={`c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${isBold ? 'selected' : ''}`}
+        />
+      </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+        }}
+        title={tr('actionFormatAsEmphasizedTitle')}
+        aria-label={tr('actionFormatAsEmphasizedLabel')}
+      >
+        <i
+          className={`c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${
+            isItalic ? 'selected' : ''
+          }`}
+        />
+      </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+        }}
+        title={tr('actionFormatAsUnderlinedTitle')}
+        aria-label={tr('actionFormatAsUnderlinedLabel')}
+      >
+        <i
+          className={`c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${
+            isUnderline ? 'selected' : ''
+          }`}
+        />
+      </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+        }}
+        title={tr('actionFormatWithStrikethroughTitle')}
+        aria-label={tr('actionFormatWithStrikethroughLabel')}
+      >
+        <i
+          className={`c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${
+            isStrikethrough ? 'selected' : ''
+          }`}
+        />
+      </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+        }}
+        title={tr('actionFormatWithSubscriptTitle')}
+        aria-label={tr('actionFormatWithSubscriptLabel')}
+      >
+        <i
+          className={`c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${
+            isSubscript ? 'selected' : ''
+          }`}
+        />
+      </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+        }}
+        title={tr('actionFormatWithSuperscriptTitle')}
+        aria-label={tr('actionFormatWithSuperscriptLabel')}
+      >
+        <i
+          className={`c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${
+            isSuperscript ? 'selected' : ''
+          }`}
+        />
+      </IconButton>
+      <IconButton
+        style={{ padding: 0, overflow: 'hidden' }}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+        }}
+        aria-label={tr('actionInsertCodeBlock')}
+      >
+        <i
+          className={`c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? 'selected' : ''}`}
+        />
+      </IconButton>
+      <IconButton style={{ padding: 0, overflow: 'hidden' }} onClick={insertLink} aria-label={tr('actionInsertlink')}>
+        <i
+          className={`c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? 'selected' : ''}`}
+        />
+      </IconButton>
     </div>
   );
 }

package/src/rich-text-editor/rich-text-editor.css

@@ -39,10 +39,13 @@
   }
 
   .c-rte-editor-container {
-    background: #fff;
     @apply relative mt-2 cursor-text rounded-bl-md rounded-br-md;
   }
 
+  .c-rte-editor-container:not(.disabled) {
+    @apply bg-white;
+  }
+
   .c-rte-editor {
     @apply relative;
   }
@@ -172,4 +175,8 @@
   padding-left: var(--c-rte-content-pl, 1.5rem);
   padding-right: var(--c-rte-content-pr, 1.5rem);
   padding-bottom: var(--c-rte-content-pb, 8px);
+
+  &[contenteditable='false'] {
+    @apply bg-transparent;
+  }
 }

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

@@ -59,15 +59,14 @@ type TRichTextBase = {
   actionsMenuAppend?: CrystallizeRichTextActionMenuItem[];
   slotPreContent?: ReactNode;
   maxLength?: number;
-  editable?: boolean;
   language?: SupportedLanguages;
   labelTranslations?: I18N;
   id?: string;
+  disabled?: boolean;
 };
 
 export function RichTextEditor({
   initialData,
-  editable = true,
   language = 'en',
   labelTranslations,
   ...rest
@@ -77,9 +76,9 @@ export function RichTextEditor({
   return (
     <LexicalComposer
       initialConfig={{
+        editable: !rest.disabled,
         namespace: 'crystallize-rich-text-editor',
         nodes: [...BaseNodes],
-        editable,
         onError: (error: Error) => {
           throw error;
         },
@@ -94,7 +93,7 @@ export function RichTextEditor({
       <I18nProvider language={language} labelTranslations={labelTranslations}>
         <SharedHistoryContext>
           <div className="c-rich-text-editor">
-            <RichTextEditorWithoutContext {...rest} editable={editable} />
+            <RichTextEditorWithoutContext {...rest} />
           </div>
         </SharedHistoryContext>
       </I18nProvider>
@@ -111,9 +110,10 @@ function RichTextEditorWithoutContext({
   actionsMenuAppend,
   slotPreContent,
   maxLength,
-  editable,
+  disabled,
   id,
 }: TRichTextBase): JSX.Element {
+  const editable = !disabled;
   const { historyState } = useSharedHistoryContext();
   const placeholder = <div className="c-rte-placeholder">{placeholderText ?? ''}</div>;
 
@@ -151,7 +151,7 @@ function RichTextEditorWithoutContext({
         <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
       )}
       {slotPreContent}
-      <div className="c-rte-editor-container">
+      <div className={`c-rte-editor-container ${disabled ? 'disabled' : ''}`}>
         {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />