@licklist/design 0.78.5-dev.41 → 0.78.5-dev.43

package/src/v2/components/WYSIWYGEditor/Icons.tsx

@@ -0,0 +1,98 @@
+
+export const BoldIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none">
+    <path d="M9 11.25H12.375C13.4105 11.25 14.25 10.4105 14.25 9.375C14.25 8.33947 13.4105 7.5 12.375 7.5H9V11.25ZM16.5 14.625C16.5 16.489 14.989 18 13.125 18H7.5V6H12.375C14.239 6 15.75 7.51104 15.75 9.375C15.75 10.2782 15.3952 11.0986 14.8173 11.7043C15.8234 12.2885 16.5 13.3777 16.5 14.625ZM9 12.75V16.5H13.125C14.1605 16.5 15 15.6605 15 14.625C15 13.5895 14.1605 12.75 13.125 12.75H9Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ItalicIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.25 18H8.25V16.5H10.445L12.0319 7.5H9.75V6H15.75V7.5H13.555L11.9681 16.5H14.25V18Z" fill="#626A90"/>
+  </svg>
+);
+
+export const UnderlineIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9 5.25V12C9 13.6568 10.3431 15 12 15C13.6568 15 15 13.6568 15 12V5.25H16.5V12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12V5.25H9ZM6 18H18V19.5H6V18Z" fill="#626A90"/>
+  </svg>
+);
+
+export const StrikeThroughIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M15.8653 13.5C16.0384 13.8871 16.125 14.317 16.125 14.7897C16.125 15.7969 15.7322 16.5837 14.9465 17.1503C14.1607 17.7167 13.0751 18 11.6896 18C10.4601 18 9.24251 17.7139 8.03694 17.1416V15.4507C9.17653 16.1087 10.3431 16.4377 11.5367 16.4377C13.45 16.4377 14.4096 15.8884 14.4156 14.7897C14.4156 14.3204 14.2537 13.9198 13.9298 13.588C13.9004 13.5579 13.8704 13.5286 13.8398 13.5H5.25V12H18.75V13.5H15.8653ZM12.807 11.25H8.72181C8.59245 11.1325 8.47212 11.0019 8.36082 10.8584C8.03694 10.4406 7.875 9.93419 7.875 9.33905C7.875 8.41202 8.22437 7.62375 8.92312 6.97425C9.62187 6.32474 10.703 6 12.1664 6C13.2701 6 14.3257 6.24606 15.3333 6.7382V8.35193C14.4336 7.83691 13.447 7.5794 12.3734 7.5794C10.514 7.5794 9.58438 8.16595 9.58438 9.33905C9.58438 9.65379 9.74782 9.92847 10.0747 10.1631C10.4016 10.3977 10.8049 10.5851 11.2847 10.7253C11.7499 10.8612 12.2573 11.0361 12.807 11.25Z" fill="#626A90"/>
+  </svg>
+);
+
+export const Heading1Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
+    <path d="M3.3125 4.63086H6.87891V0H10.1914V12H6.87891V7.28418H3.3125V12H0V0H3.3125V4.63086ZM14.54 12H12.9717V7.96191H11.5654V6.85254H12.1152C12.9535 6.85254 13.2871 6.54609 13.2871 5.59961H14.54V12Z" fill="#626A90"/>
+  </svg>
+);
+
+export const Heading2Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="12" viewBox="0 0 17 12" fill="none">
+    <path d="M3.3125 4.63086H6.87891V0H10.1914V12H6.87891V7.28418H3.3125V12H0V0H3.3125V4.63086ZM14.3154 5.45605C15.8385 5.4562 16.7217 6.24039 16.7217 7.41211C16.7216 8.41248 16.2352 8.84564 15.0635 9.47656C14.0813 9.99919 13.6486 10.4133 13.6123 10.7197H16.7217V12H11.7549C11.7549 10.2603 12.3864 9.36835 13.9639 8.53906C14.8381 8.0794 15.1172 7.86234 15.1172 7.42969C15.1171 7.02416 14.8377 6.73535 14.333 6.73535C13.7651 6.73536 13.4225 7.10543 13.3594 7.77246L11.7549 7.68262C11.8631 6.27643 12.783 5.45605 14.3154 5.45605Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ParagraphIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M12 7.5V18.75H10.5V15C8.01472 15 6 12.9853 6 10.5C6 8.01472 8.01472 6 10.5 6H18V7.5H15.75V18.75H14.25V7.5H12ZM10.5 7.5C8.84314 7.5 7.5 8.84314 7.5 10.5C7.5 12.1568 8.84314 13.5 10.5 13.5V7.5Z" fill="#626A90"/>
+  </svg>
+);
+
+export const BulletListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9 6H18.75V7.5H9V6ZM6.375 7.875C5.75368 7.875 5.25 7.37132 5.25 6.75C5.25 6.12868 5.75368 5.625 6.375 5.625C6.99632 5.625 7.5 6.12868 7.5 6.75C7.5 7.37132 6.99632 7.875 6.375 7.875ZM6.375 13.125C5.75368 13.125 5.25 12.6213 5.25 12C5.25 11.3787 5.75368 10.875 6.375 10.875C6.99632 10.875 7.5 11.3787 7.5 12C7.5 12.6213 6.99632 13.125 6.375 13.125ZM6.375 18.3C5.75368 18.3 5.25 17.7963 5.25 17.175C5.25 16.5537 5.75368 16.05 6.375 16.05C6.99632 16.05 7.5 16.5537 7.5 17.175C7.5 17.7963 6.99632 18.3 6.375 18.3ZM9 11.25H18.75V12.75H9V11.25ZM9 16.5H18.75V18H9V16.5Z" fill="#626A90"/>
+  </svg>
+);
+
+export const NumberedListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M7.31268 5.625H6.538L5.4375 5.91988V7.08436L6.18752 6.88337L6.18763 9.375H5.25V10.5H8.25V9.375H7.31268V5.625ZM10.5 6H18.75V7.5H10.5V6ZM10.5 11.25H18.75V12.75H10.5V11.25ZM10.5 16.5H18.75V18H10.5V16.5ZM5.15625 14.7188C5.15625 13.8385 5.86979 13.125 6.75 13.125C7.63021 13.125 8.34375 13.8385 8.34375 14.7188C8.34375 15.0829 8.22137 15.419 8.0156 15.6875L8.01203 15.6922L6.9869 16.875H8.25V18H5.25009L5.24969 17.1589L7.10378 15.0262C7.17548 14.9439 7.21875 14.8366 7.21875 14.7188C7.21875 14.4599 7.00889 14.25 6.75 14.25C6.50533 14.25 6.3043 14.4376 6.2831 14.6766L6.27382 14.9062H5.15625V14.7188Z" fill="#626A90"/>
+  </svg>
+);
+
+export const TaskListIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M9.00006 7.5V9.75H6.75006V7.5H9.00006ZM5.25006 6V11.25H10.5001V6H5.25006ZM12.7501 6H18.7501V7.5H12.7501V6ZM12.7501 11.25H18.7501V12.75H12.7501V11.25ZM12.7501 16.5H18.7501V18H12.7501V16.5ZM11.0304 15.1553L9.96973 14.0947L7.50006 16.5644L6.15538 15.2197L5.09473 16.2803L7.50006 18.6856L11.0304 15.1553Z" fill="#626A90"/>
+  </svg>
+);
+
+export const QuoteAltIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.43756 15.9909C5.66487 15.1706 5.25 14.25 5.25 12.7578C5.25 10.1332 7.09238 7.78029 9.77294 6.61743L10.4425 7.65064C7.94103 9.00409 7.45214 10.7595 7.25673 11.8665C7.65947 11.6583 8.18669 11.585 8.70353 11.6329C10.0568 11.7584 11.1234 12.8693 11.1234 14.25C11.1234 15.6998 9.94812 16.875 8.49837 16.875C7.69357 16.875 6.92397 16.5072 6.43756 15.9909ZM13.9375 15.9909C13.1649 15.1706 12.75 14.25 12.75 12.7578C12.75 10.1332 14.5924 7.78029 17.2729 6.61743L17.9425 7.65064C15.441 9.00409 14.9522 10.7595 14.7567 11.8665C15.1594 11.6583 15.6867 11.585 16.2035 11.6329C17.5568 11.7584 18.6234 12.8693 18.6234 14.25C18.6234 15.6998 17.4481 16.875 15.9984 16.875C15.1936 16.875 14.424 16.5072 13.9375 15.9909Z" fill="#626A90"/>
+  </svg>
+);
+
+export const DividerIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <rect x="5.25" y="11.25" width="13.5" height="1.5" fill="#626A90"/>
+    <circle cx="21.75" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+    <circle cx="2.25" cy="12" r="0.75" fill="#626A90" fill-opacity="0.5"/>
+  </svg>
+);
+
+export const UndoIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.25 16.5H15.375C16.4105 16.5 17.25 15.6605 17.25 14.625C17.25 13.5895 16.4105 12.75 15.375 12.75H5.25V11.25H15.375C17.239 11.25 18.75 12.761 18.75 14.625C18.75 16.489 17.239 18 15.375 18H14.25V19.5L11.25 17.25L14.25 15V16.5ZM5.25 6H18.75V7.5H5.25V6ZM9.75 16.5V18H5.25V16.5H9.75Z" fill="#626A90"/>
+  </svg>
+);
+
+export const RedoIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6.06131 6.69136C5.88684 6.85818 5.71976 7.03357 5.56136 7.21755C5.32407 7.49319 5.10569 7.78768 4.90881 8.09936C4.77746 8.30727 4.65565 8.52287 4.54421 8.7457C4.48837 8.85736 4.43524 8.9709 4.38469 9.08613C4.2839 9.31587 4.19401 9.5527 4.11539 9.796C4.07598 9.91797 4.03914 10.0416 4.00559 10.1668C3.93079 10.446 3.87328 10.7259 3.83158 11.0051C3.82934 11.0201 3.82751 11.0351 3.82536 11.05C3.81494 11.1228 3.80597 11.1955 3.79774 11.2682C3.79428 11.2986 3.79116 11.329 3.78807 11.3594C3.78326 11.4071 3.77883 11.4547 3.77495 11.5023C3.75889 11.6978 3.75077 11.8926 3.75009 12.0865C3.75003 12.1086 3.74996 12.1307 3.75009 12.1528C3.75089 12.3012 3.75571 12.449 3.76528 12.5961C3.7665 12.6146 3.76808 12.633 3.76943 12.6514C3.82014 13.3498 3.96775 14.0309 4.20377 14.6767L7.62813 11.1377L5.45502 10.5556C5.48179 10.4557 5.51129 10.3567 5.54272 10.2594C5.66865 9.8695 5.83151 9.50078 6.02609 9.15588C6.07459 9.06992 6.12494 8.9854 6.17732 8.90245C6.91264 7.73794 8.02285 6.87449 9.29715 6.43448C9.38818 6.40305 9.48005 6.37386 9.57268 6.34679C10.1284 6.18439 10.7114 6.10131 11.3052 6.10717C11.4042 6.10814 11.5034 6.11157 11.6028 6.11753C12.0008 6.14137 12.4022 6.2058 12.8023 6.31295C13.2945 6.44483 13.7566 6.63317 14.182 6.8709C14.2125 6.88794 14.2416 6.90723 14.2718 6.92476C14.7547 7.20595 15.1899 7.54933 15.5686 7.94261C15.6449 8.02185 15.7186 8.10326 15.7902 8.18637C15.9047 8.31912 16.0139 8.45605 16.1162 8.59793C16.1915 8.70249 16.2625 8.80995 16.3309 8.91903C17.1864 10.2824 17.4949 11.9837 17.0456 13.6609C16.327 16.3424 13.9009 18.1093 11.2507 18.108V19.6078C14.5636 19.6095 17.5967 17.4016 18.4951 14.0497C19.0819 11.8595 18.6347 9.6365 17.4544 7.89634L17.4558 7.89496C17.4301 7.85706 17.4028 7.81984 17.3764 7.78241C17.3604 7.75975 17.3443 7.73721 17.3281 7.71473C17.2772 7.64435 17.2253 7.57483 17.172 7.50619C17.1543 7.48339 17.1368 7.46044 17.1188 7.43783C17.0658 7.37103 17.0112 7.30536 16.9559 7.24034C16.9336 7.21424 16.9115 7.18811 16.8889 7.16231C16.8382 7.10446 16.7867 7.04739 16.7342 6.99105C16.7045 6.95913 16.6747 6.92719 16.6444 6.89576C16.4036 6.64603 16.1448 6.41195 15.869 6.19625C15.8379 6.17193 15.8052 6.14967 15.7737 6.12582C15.715 6.08143 15.657 6.03598 15.5969 5.99323C15.5586 5.96599 15.5191 5.94038 15.4802 5.91382C15.4213 5.87363 15.3622 5.83365 15.302 5.79505C15.2644 5.7709 15.2263 5.74744 15.1881 5.72393C15.1285 5.6872 15.0687 5.65066 15.0079 5.61551C14.959 5.58729 14.9097 5.55983 14.8601 5.53265C14.8028 5.50128 14.745 5.47076 14.6868 5.44081C14.6463 5.41998 14.6055 5.39949 14.5645 5.37935C14.4883 5.3419 14.4111 5.30595 14.3332 5.27093C14.3021 5.25697 14.2713 5.24238 14.24 5.22881C14.1572 5.19297 14.0732 5.15965 13.9886 5.12661C13.953 5.11267 13.9176 5.09792 13.8816 5.08449C13.8148 5.05956 13.7471 5.03652 13.6793 5.01337C13.6344 4.99807 13.5899 4.98161 13.5446 4.9671C13.4284 4.92988 13.3102 4.89544 13.1911 4.86352C12.691 4.72957 12.1893 4.6496 11.6919 4.61976C11.4431 4.60484 11.1954 4.60237 10.9496 4.61217C10.8266 4.61706 10.7042 4.62473 10.5822 4.63564C10.3388 4.65745 10.0974 4.69064 9.85925 4.73577C8.42886 5.00676 7.10753 5.69099 6.06131 6.69136Z" fill="#626A90"/>
+  </svg>
+);
+
+export const RedoAltIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M14.7783 5.1401C16.899 5.98783 18.6074 7.79081 19.244 10.1665C19.2815 10.3065 19.3136 10.4469 19.3428 10.587C19.3503 10.6234 19.3579 10.6598 19.3649 10.6961C19.3758 10.7532 19.3856 10.8103 19.3952 10.8674C19.3988 10.8883 19.4022 10.9093 19.4056 10.9302C19.4295 11.0794 19.4496 11.2283 19.4643 11.377C19.4663 11.397 19.4673 11.4171 19.4691 11.4371C19.571 12.5575 19.4176 13.6601 19.0465 14.6757L15.6222 11.1367L17.7946 10.5539C17.741 10.3542 17.6779 10.1596 17.6061 9.97039C17.57 9.87555 17.5318 9.7821 17.4914 9.69003C17.0879 8.77009 16.4702 7.99017 15.7147 7.39538C15.4122 7.15727 15.0875 6.94923 14.7459 6.77321C14.2774 6.53178 13.7765 6.35274 13.2564 6.24081C12.3559 6.04711 11.3975 6.05715 10.4466 6.31194C10.2147 6.37407 9.9903 6.45035 9.77265 6.53705C9.61715 6.59899 9.46465 6.66505 9.31689 6.73869C8.29847 7.24626 7.46969 8.02427 6.8945 8.95668C6.05731 10.3136 5.75827 11.9985 6.20328 13.6599C6.92179 16.3414 9.34799 18.1081 11.9982 18.1069L11.9989 19.6061C8.68576 19.608 5.65276 17.4002 4.75454 14.048C4.16791 11.8578 4.61554 9.63526 5.79586 7.89533L5.79448 7.89395C5.81581 7.86251 5.83827 7.83185 5.86008 7.80073C5.8864 7.76317 5.91317 7.72595 5.94018 7.68886C5.97698 7.63833 6.01398 7.58795 6.05205 7.53833C6.08438 7.49618 6.11687 7.45413 6.15011 7.41265C6.19423 7.35758 6.24044 7.30422 6.28614 7.25037C6.31108 7.22099 6.33532 7.191 6.36072 7.16198C6.41092 7.10463 6.46271 7.04867 6.51471 6.9928C6.54488 6.96039 6.5744 6.92734 6.60517 6.89544C6.84601 6.64568 7.10482 6.41165 7.38064 6.19593C7.41173 6.17161 7.44441 6.14934 7.47593 6.12549C7.53489 6.08087 7.59366 6.03587 7.65409 5.99291C7.69049 5.96703 7.72765 5.94221 7.76457 5.91695C7.82724 5.87408 7.89031 5.83165 7.95447 5.79058C7.9885 5.76881 8.02292 5.74762 8.05736 5.72636C8.11894 5.68835 8.18092 5.65082 8.2438 5.6145C8.28971 5.58798 8.33601 5.56206 8.3826 5.53647C8.44512 5.50212 8.50807 5.46832 8.57181 5.43565C8.60987 5.41614 8.64794 5.39654 8.68644 5.37764C8.75026 5.34631 8.8148 5.31612 8.87979 5.28649C8.93014 5.26354 8.98066 5.24074 9.0317 5.21882C9.0919 5.19297 9.15286 5.16861 9.214 5.14424C9.262 5.12511 9.30976 5.10513 9.35833 5.08693C9.54044 5.01866 9.72708 4.95876 9.91697 4.90394C9.96389 4.89039 10.0105 4.8752 10.0578 4.86251C10.395 4.77217 10.7333 4.70888 11.0702 4.66639C11.2333 4.64581 11.3959 4.62849 11.5584 4.61875C12.6773 4.55174 13.7742 4.73862 14.7783 5.1401Z" fill="#626A90"/>
+  </svg>
+);
+
+export const ClearFormattingIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M12.4884 13.549L11.7035 18H10.1804L11.1935 12.2542L5.63599 6.69664L6.69664 5.63599L18.3639 17.3033L17.3032 18.3639L12.4884 13.549ZM11.8295 8.64752L12.0319 7.49995H10.6819L9.18193 5.99995H17.9999V7.49995H13.555L13.1243 9.94234L11.8295 8.64752Z" fill="#626A90"/>
+  </svg>
+);

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.scss

@@ -0,0 +1,300 @@
+@import '../../styles/index.scss';
+
+.wysiwyg-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-self: stretch;
+  gap: var(--spacing-reg);
+  width: 100%;
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    color: var(--label-primary);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    margin: 0;
+  }
+
+  &__required {
+    color: var(--label-status-error, #ef4444);
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    border: 2px solid var(--border-primary, #e8e9ef);
+    border-radius: var(--radius-md, 4px);
+    overflow: hidden;
+    background-color: var(--surface-secondary, #f8f8fa);
+    transition: border-color 0.2s ease;
+
+    &:focus-within {
+      border-color: var(--border-selected, #6200EE);
+    }
+
+    &--error {
+      border-color: var(--label-status-error, #ef4444);
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 4px 8px;
+    align-items: flex-start;
+    gap: 2px;
+    align-self: stretch;
+    border-radius: var(--radius-md) var(--radius-zero);
+    border-top: 2px solid var(--border-primary);
+    border-right: 2px solid var(--border-primary);
+    border-left: 2px solid var(--border-primary);
+    background: var(--surface-tertiary);
+  }
+
+  &__toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 28px;
+    border: none;
+    background: transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    color: var(--label-secondary);
+    transition: all 0.2s ease;
+
+    svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      background-color: var(--surface-secondary, #f8f8fa);
+      color: var(--label-primary, #121e52);
+    }
+
+    &--active {
+      background-color: var(--surface-action-soft, #efeffe);
+      color: var(--label-action, #5d5bf4);
+    }
+  }
+
+  &__toolbar-divider {
+    width: 1px;
+    height: 18px;
+    background-color: var(--border-primary, #e8e9ef);
+    margin: 0 4px;
+  }
+
+  &__content {
+    min-height: 200px;
+    padding: 12px;
+    outline: none;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: var(--text-sm-size, 13px);
+    line-height: 1.5;
+    color: var(--label-primary, #121e52);
+    background-color: var(--surface-secondary, #f8f8fa);
+    overflow-y: auto;
+    text-align: left;
+
+    &--disabled {
+      background-color: var(--surface-status-disabled, #f8f8fa);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    &:empty:before {
+      content: attr(data-placeholder);
+      color: var(--label-secondary, #626a90);
+      pointer-events: none;
+    }
+
+    // Styles for content elements
+    h1, h2, p, ul, ol, blockquote, hr {
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-size: var(--text-sm-size, 13px);
+      line-height: 1.5;
+      color: var(--label-primary, #121e52);
+      overflow-y: auto;
+      text-align: left;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    h1 {
+      font-size: 22px;
+    }
+
+    h2 {
+      font-size: 20px;
+    }
+
+    h3 {
+      font-size: 18px;
+    }
+
+    h4 {
+      font-size: 16px;
+    }
+
+    h5 {
+      font-size: 14px;
+    }
+
+    h6 {
+      font-size: 13px;
+    }
+
+    p {
+      margin: 8px 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-size: var(--text-sm-size, 13px);
+      line-height: 1.5;
+      color: var(--label-primary, #121e52);
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    ul, ol {
+      margin: 8px 0;
+      padding-left: 24px;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-sm-size, 13px);
+      line-height: 1.5;
+      color: var(--label-primary, #121e52);
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    li {
+      margin: 4px 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-sm-size, 13px);
+      line-height: 1.5;
+      color: var(--label-primary, #121e52);
+    }
+
+    blockquote {
+      margin: 12px 0;
+      padding: 8px 16px;
+      border-left: 4px solid var(--border-selected, #121e52);
+      background-color: var(--surface-tertiary, #efefef);
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-sm-size, 13px);
+      line-height: 1.5;
+      color: var(--label-secondary, #626a90);
+      font-style: italic;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    hr {
+      margin: 16px 0;
+      border: none;
+      border-top: 2px solid var(--border-primary, #e8e9ef);
+      height: 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    strong, b {
+      font-weight: 600;
+      color: var(--label-primary, #121e52);
+    }
+
+    em, i {
+      font-style: italic;
+    }
+
+    u {
+      text-decoration: underline;
+    }
+
+    s, strike {
+      text-decoration: line-through;
+    }
+
+    code {
+      font-family: 'Monaco', 'Courier New', monospace;
+      font-size: 12px;
+      background-color: var(--surface-tertiary, #efefef);
+      padding: 2px 4px;
+      border-radius: 3px;
+      color: var(--label-primary, #121e52);
+    }
+
+    pre {
+      margin: 12px 0;
+      padding: 12px;
+      background-color: var(--surface-tertiary, #efefef);
+      border-radius: var(--radius-sm, 4px);
+      overflow-x: auto;
+
+      code {
+        background-color: transparent;
+        padding: 0;
+      }
+    }
+
+    a {
+      color: var(--label-action, #5d5bf4);
+      text-decoration: underline;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--label-action-hover, #4a48d1);
+      }
+    }
+  }
+
+  &__placeholder {
+    color: var(--label-secondary, #626a90);
+  }
+
+  &__help-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    margin-top: -5px;
+    color: var(--label-secondary);
+  }
+
+  &__error-text {
+    font-size: var(--text-xs-size, 11px);
+    color: var(--label-status-error, #ef4444);
+    margin-top: 2px;
+  }
+}

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.stories.tsx

@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WYSIWYGEditor } from './WYSIWYGEditor'
+import { useState } from 'react'
+
+const meta: Meta<typeof WYSIWYGEditor> = {
+  title: 'V2/Components/WYSIWYGEditor',
+  component: WYSIWYGEditor,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WYSIWYGEditor>
+
+export const Default: Story = {
+  args: {
+    label: 'Waiver Text',
+    placeholder: 'Enter waiver text here...',
+  },
+}
+
+export const WithHelpText: Story = {
+  args: {
+    label: 'Waiver Text',
+    helpText: 'Enter the legal text for your waiver. You can use the toolbar to format the text.',
+    placeholder: 'Enter waiver text here...',
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    label: 'Waiver Text',
+    error: 'This field is required',
+    placeholder: 'Enter waiver text here...',
+  },
+}
+
+export const WithInitialValue: Story = {
+  args: {
+    label: 'Waiver Text',
+    value: '<p><strong>Waiver Agreement</strong></p><p>By signing this document, you agree to the following terms and conditions...</p><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Waiver Text',
+    disabled: true,
+    value: '<p>This editor is disabled and cannot be edited.</p>',
+  },
+}
+
+// Controlled editor with state management
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState('<p>Start typing here...</p>')
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        <WYSIWYGEditor
+          label="Controlled Editor"
+          helpText="The content below updates as you type"
+          value={value}
+          onChange={setValue}
+        />
+        <div style={{ padding: '16px', background: '#f8f9fa', borderRadius: '8px' }}>
+          <strong>Current HTML Value:</strong>
+          <pre style={{
+            marginTop: '8px',
+            padding: '12px',
+            background: 'white',
+            borderRadius: '4px',
+            fontSize: '12px',
+            overflow: 'auto'
+          }}>
+            {value}
+          </pre>
+          <div style={{ marginTop: '12px' }}>
+            <strong>Character Count:</strong> {value.length}
+          </div>
+        </div>
+        <button
+          onClick={() => setValue('<p>Content has been reset!</p>')}
+          style={{
+            padding: '8px 16px',
+            background: '#269B36',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Reset Content
+        </button>
+      </div>
+    )
+  },
+}
+
+// Real-world waiver form example
+export const WaiverFormExample: Story = {
+  render: () => {
+    const [waiverText, setWaiverText] = useState(`<p><strong>WAIVER AND RELEASE OF LIABILITY</strong></p>
+<p>In consideration of being allowed to participate in any way in the activities and events of [Company Name], the undersigned:</p>
+<ol>
+  <li>Agrees that prior to participating, they will inspect the facilities and equipment to be used, and if they believe anything is unsafe, they will immediately advise their supervisor of such condition(s) and refuse to participate.</li>
+  <li>Acknowledges and fully understands that each participant will be engaging in activities that involve risk of serious injury, including permanent disability and death, and severe social and economic losses which might result not only from their own actions, inactions or negligence but the action, inaction or negligence of others, the rules of play, or the condition of the premises or of any equipment used.</li>
+  <li>Assumes all risks and accepts responsibility for the damages following such injury, permanent disability or death, even if caused, in whole or in part, by the action, inaction or negligence of the releasees named below.</li>
+</ol>
+<p><strong>I HAVE READ THIS RELEASE OF LIABILITY AND ASSUMPTION OF RISK AGREEMENT, FULLY UNDERSTAND ITS TERMS, UNDERSTAND THAT I HAVE GIVEN UP SUBSTANTIAL RIGHTS BY SIGNING IT, AND SIGN IT FREELY AND VOLUNTARILY WITHOUT ANY INDUCEMENT.</strong></p>`)
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px' }}>
+        <h3>Waiver Template Form</h3>
+
+        <div>
+          <label style={{ display: 'block', marginBottom: '8px', fontWeight: 500 }}>
+            Template Name
+          </label>
+          <input
+            type="text"
+            defaultValue="General Liability Waiver"
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: '1px solid #ddd',
+              borderRadius: '4px',
+            }}
+          />
+        </div>
+
+        <WYSIWYGEditor
+          label="Waiver Text"
+          helpText="Enter the legal text for your waiver. Use the toolbar to format as needed."
+          value={waiverText}
+          onChange={setWaiverText}
+        />
+
+        <div style={{
+          padding: '16px',
+          background: '#f8f9fa',
+          borderRadius: '8px',
+          fontSize: '14px'
+        }}>
+          <strong>Preview:</strong>
+          <div
+            style={{
+              marginTop: '12px',
+              padding: '16px',
+              background: 'white',
+              borderRadius: '4px',
+              border: '1px solid #e0e0e0'
+            }}
+            dangerouslySetInnerHTML={{ __html: waiverText }}
+          />
+        </div>
+
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button
+            style={{
+              padding: '10px 20px',
+              background: '#269B36',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              fontWeight: 500,
+            }}
+          >
+            Save Waiver Template
+          </button>
+          <button
+            style={{
+              padding: '10px 20px',
+              background: '#6c757d',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    )
+  },
+}
+
+// Demonstrates all formatting options
+export const FormattingShowcase: Story = {
+  args: {
+    label: 'Formatting Options',
+    helpText: 'Try using the toolbar buttons to format your text',
+    value: `<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<p>This is <strong>bold text</strong>, <em>italic text</em>, <u>underlined text</u>, and <del>strikethrough text</del>.</p>
+<blockquote>This is a blockquote</blockquote>
+<p>Unordered list:</p>
+<ul>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ul>
+<p>Ordered list:</p>
+<ol>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ol>
+<hr>
+<p>Normal text after a divider</p>`,
+  },
+}
+
+// Maximum length validation example
+export const WithMaxLength: Story = {
+  render: () => {
+    const MAX_LENGTH = 25500
+    const [value, setValue] = useState('<p>Start typing...</p>')
+    const remaining = MAX_LENGTH - value.length
+    const isOverLimit = remaining < 0
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <WYSIWYGEditor
+          label="Waiver Text"
+          helpText={`Maximum 25,500 characters`}
+          error={isOverLimit ? `Exceeds maximum length by ${Math.abs(remaining)} characters` : undefined}
+          value={value}
+          onChange={setValue}
+        />
+        <div style={{
+          padding: '12px',
+          background: isOverLimit ? '#fee' : '#f8f9fa',
+          borderRadius: '4px',
+          fontSize: '14px'
+        }}>
+          <strong>Characters:</strong> {value.length.toLocaleString()} / {MAX_LENGTH.toLocaleString()}
+          <div style={{ marginTop: '4px', color: isOverLimit ? '#dc3545' : '#28a745' }}>
+            {isOverLimit
+              ? `❌ ${Math.abs(remaining).toLocaleString()} over limit`
+              : `✓ ${remaining.toLocaleString()} remaining`
+            }
+          </div>
+        </div>
+      </div>
+    )
+  },
+}