@crystallize/design-system 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @crystallize/design-system
 
+## 1.8.0
+
+### Minor Changes
+
+- 8cce8d3: Ensure that the JSON model conforms to the old editor behaviour, and wraps all code block nodes with a `preformatted` parent.
+- a13e96ec: Fixed the table implementation.
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/index.css

@@ -533,9 +533,6 @@ button {
 .pointer-events-none {
   pointer-events: none;
 }
-.static {
-  position: static;
-}
 .absolute {
   position: absolute;
 }
@@ -571,10 +568,6 @@ button {
   margin-left: auto;
   margin-right: auto;
 }
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .mt-8 {
   margin-top: 2rem;
 }
@@ -584,9 +577,6 @@ button {
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mt-3 {
-  margin-top: 0.75rem;
-}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -596,6 +586,9 @@ button {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
 .block {
   display: block;
 }
@@ -795,12 +788,12 @@ button {
 .rounded-sm {
   border-radius: 0.125rem;
 }
-.border {
-  border-width: 1px;
-}
 .border-0 {
   border-width: 0px;
 }
+.border {
+  border-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -822,10 +815,6 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.bg-gray-100-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
-}
 .bg-purple-50-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
@@ -834,6 +823,10 @@ button {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity)) !important;
 }
+.bg-gray-100-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+}
 .bg-\[length\:18px_18px\] {
   background-size: 18px 18px;
 }
@@ -1312,6 +1305,19 @@ button {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-pink-600-300) / var(--tw-text-opacity));
 }
+.c-action-menu-item-separator {
+  margin: 0px;
+  height: 1px;
+  cursor: default;
+  padding: 0px;
+}
+.c-action-menu-item-separator hr {
+  height: 1px;
+  width: 100%;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-700-200) / var(--tw-bg-opacity));
+  padding: 0px;
+}
 
 /* src/dropdown-menu/dropdown-menu.css */
 .c-dropdown-menu-content {
@@ -2181,54 +2187,6 @@ button {
 .c-rich-text-editor .editor-image .image-caption-button:hover {
   background-color: rgba(60, 132, 244, 0.5);
 }
-.c-rich-text-editor .editor-image .image-resizer {
-  display: block;
-  width: 7px;
-  height: 7px;
-  position: absolute;
-  background-color: rgb(60, 132, 244);
-  border: 1px solid #fff;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-n {
-  top: -6px;
-  left: 48%;
-  cursor: n-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-ne {
-  top: -6px;
-  right: -6px;
-  cursor: ne-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-e {
-  bottom: 48%;
-  right: -6px;
-  cursor: e-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-se {
-  bottom: -2px;
-  right: -6px;
-  cursor: nwse-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-s {
-  bottom: -2px;
-  left: 48%;
-  cursor: s-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-sw {
-  bottom: -2px;
-  left: -6px;
-  cursor: sw-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-w {
-  bottom: 48%;
-  left: -6px;
-  cursor: w-resize;
-}
-.c-rich-text-editor .editor-image .image-resizer.image-resizer-nw {
-  top: -6px;
-  left: -6px;
-  cursor: nw-resize;
-}
 .c-rich-text-editor .editor-scroller {
   min-height: 150px;
   border: 0;
@@ -2531,9 +2489,6 @@ button {
 .c-rich-text-editor i.indent {
   background-image: url(./indent-MJ6JIMCK.svg);
 }
-.c-rich-text-editor i.markdown {
-  background-image: url(./markdown-4BGQNLLT.svg);
-}
 .c-rich-text-editor i.outdent {
   background-image: url(./outdent-2LUMUMIP.svg);
 }
@@ -2723,89 +2678,6 @@ button {
 .c-rich-text-editor .characters-limit.characters-limit-exceeded {
   color: red;
 }
-.c-rich-text-editor .dropdown {
-  z-index: 10;
-  display: block;
-  position: fixed;
-  box-shadow:
-    0 12px 28px 0 rgba(0, 0, 0, 0.2),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-  border-radius: 8px;
-  min-height: 40px;
-  background-color: #fff;
-}
-.c-rich-text-editor .dropdown .item {
-  margin: 0 8px 0 8px;
-  padding: 8px;
-  color: #050505;
-  cursor: pointer;
-  line-height: 16px;
-  font-size: 15px;
-  display: flex;
-  align-content: center;
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: space-between;
-  background-color: #fff;
-  border-radius: 8px;
-  border: 0;
-  max-width: 250px;
-  min-width: 100px;
-}
-.c-rich-text-editor .dropdown .item.fontsize-item,
-.c-rich-text-editor .dropdown .item.fontsize-item .text {
-  min-width: unset;
-}
-.c-rich-text-editor .dropdown .item .active {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  background-size: contain;
-}
-.c-rich-text-editor .dropdown .item:first-child {
-  margin-top: 8px;
-}
-.c-rich-text-editor .dropdown .item:last-child {
-  margin-bottom: 8px;
-}
-.c-rich-text-editor .dropdown .item:hover {
-  background-color: #eee;
-}
-.c-rich-text-editor .dropdown .item .text {
-  display: flex;
-  line-height: 20px;
-  flex-grow: 1;
-  min-width: 150px;
-}
-.c-rich-text-editor .dropdown .item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 12px;
-  line-height: 16px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.c-rich-text-editor .dropdown .divider {
-  width: auto;
-  background-color: #eee;
-  margin: 4px 8px;
-  height: 1px;
-}
-@media screen and (max-width: 1100px) {
-  .c-rich-text-editor .dropdown-button-text {
-    display: none !important;
-  }
-  .c-rich-text-editor .font-size .dropdown-button-text {
-    display: flex !important;
-  }
-  .c-rich-text-editor .code-language .dropdown-button-text {
-    display: flex !important;
-  }
-}
 .c-rich-text-editor .icon.paragraph {
   background-image: url(./text-paragraph-MFTUIIQG.svg);
 }
@@ -2862,65 +2734,10 @@ button {
     transform: translateX(0);
   }
 }
-.c-rich-text-editor .switch {
-  display: block;
-  color: #444;
-  margin: 5px 0;
-  background-color: rgba(238, 238, 238, 0.7);
-  padding: 5px 10px;
-  border-radius: 10px;
-}
-.c-rich-text-editor #rich-text-switch {
-  right: 0;
-}
-.c-rich-text-editor #character-count-switch {
-  right: 130px;
-}
-.c-rich-text-editor .switch label {
-  margin-right: 5px;
-  line-height: 24px;
-  width: 100px;
-  font-size: 14px;
-  display: inline-block;
-  vertical-align: middle;
-}
-.c-rich-text-editor .switch button {
-  background-color: rgb(206, 208, 212);
-  height: 24px;
-  box-sizing: border-box;
-  border-radius: 12px;
-  width: 44px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  outline: none;
-  cursor: pointer;
-  transition: background-color 0.1s;
-  border: 2px solid transparent;
-}
-.c-rich-text-editor .switch button:focus-visible {
-  border-color: blue;
-}
-.c-rich-text-editor .switch button span {
-  top: 0px;
-  left: 0px;
-  display: block;
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 12px;
-  background-color: white;
-  transition: transform 0.2s;
-}
-.c-rich-text-editor .switch button[aria-checked=true] {
-  background-color: rgb(24, 119, 242);
-}
-.c-rich-text-editor .switch button[aria-checked=true] span {
-  transform: translateX(20px);
-}
-.c-rich-text-editor .keyword {
-  color: rgb(241, 118, 94);
-  font-weight: bold;
+.c-rich-text-editor [role=separator] {
+  height: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
 }
 .c-rich-text-editor .actions i.indent {
   background-image: url(./indent-MJ6JIMCK.svg);
@@ -2978,94 +2795,6 @@ button {
   left: 0;
   will-change: transform;
 }
-.c-rich-text-editor .table-cell-action-button {
-  background-color: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 0;
-  position: relative;
-  border-radius: 15px;
-  color: #222;
-  display: inline-block;
-  cursor: pointer;
-}
-.c-rich-text-editor i.chevron-down {
-  background-color: transparent;
-  background-size: contain;
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  background-image: url(./chevron-down-3FRWSIKS.svg);
-}
-.c-rich-text-editor .action-button {
-  background-color: #eee;
-  border: 0;
-  padding: 8px 12px;
-  position: relative;
-  margin-left: 5px;
-  border-radius: 15px;
-  color: #222;
-  display: inline-block;
-  cursor: pointer;
-}
-.c-rich-text-editor .action-button:hover {
-  background-color: #ddd;
-  color: #000;
-}
-.c-rich-text-editor .action-button-mic.active {
-  animation: mic-pulsate-color 3s infinite;
-}
-.c-rich-text-editor button.action-button:disabled {
-  opacity: 0.6;
-  background: #eee;
-  cursor: not-allowed;
-}
-@keyframes mic-pulsate-color {
-  0% {
-    background-color: #ffdcdc;
-  }
-  50% {
-    background-color: #ff8585;
-  }
-  100% {
-    background-color: #ffdcdc;
-  }
-}
-.c-rich-text-editor .debug-timetravel-panel {
-  overflow: hidden;
-  padding: 0 0 10px 0;
-  margin: auto;
-  display: flex;
-}
-.c-rich-text-editor .debug-timetravel-panel-slider {
-  padding: 0;
-  flex: 8;
-}
-.c-rich-text-editor .debug-timetravel-panel-button {
-  padding: 0;
-  border: 0;
-  background: none;
-  flex: 1;
-  color: #fff;
-  font-size: 12px;
-}
-.c-rich-text-editor .debug-timetravel-panel-button:hover {
-  text-decoration: underline;
-}
-.c-rich-text-editor .debug-timetravel-button {
-  border: 0;
-  padding: 0;
-  font-size: 12px;
-  top: 10px;
-  right: 15px;
-  position: absolute;
-  background: none;
-  color: #fff;
-}
-.c-rich-text-editor .debug-timetravel-button:hover {
-  text-decoration: underline;
-}
 .c-rich-text-editor .connecting {
   font-size: 15px;
   color: #999;
@@ -3264,7 +2993,8 @@ button {
   z-index: 3;
 }
 .c-rich-text-editor .TableNode__contentEditable .CrystallizeRTEditorTheme__paragraph {
-  margin-top: 0px;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .c-rich-text-editor .CrystallizeRTEditorTheme__blockCursor {
   display: block;
@@ -3285,6 +3015,11 @@ button {
     visibility: hidden;
   }
 }
+.c-rte-table-action-dropdown {
+  display: absolute;
+  right: 2px;
+  top: 2px;
+}
 
 /* src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css */
 .code-action-menu-container {
@@ -3453,7 +3188,7 @@ button {
 }
 
 /* src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css */
-.floating-text-format-popup {
+.c-floating-text-format-popup {
   vertical-align: middle;
   background-color: #fff;
   transition: opacity 0.5s;
@@ -3477,7 +3212,7 @@ button {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.floating-text-format-popup button.popup-item {
+.c-floating-text-format-popup button.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -3486,13 +3221,13 @@ button {
   cursor: pointer;
   vertical-align: middle;
 }
-.floating-text-format-popup button.popup-item:disabled {
+.c-floating-text-format-popup button.popup-item:disabled {
   cursor: not-allowed;
 }
-.floating-text-format-popup button.popup-item.spaced {
+.c-floating-text-format-popup button.popup-item.spaced {
   margin-right: 2px;
 }
-.floating-text-format-popup button.popup-item i.format {
+.c-floating-text-format-popup button.popup-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -3502,19 +3237,19 @@ button {
   display: flex;
   opacity: 0.6;
 }
-.floating-text-format-popup button.popup-item:disabled i.format {
+.c-floating-text-format-popup button.popup-item:disabled i.format {
   opacity: 0.2;
 }
-.floating-text-format-popup button.popup-item.active {
+.c-floating-text-format-popup button.popup-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
-.floating-text-format-popup button.popup-item.active i {
+.c-floating-text-format-popup button.popup-item.active i {
   opacity: 1;
 }
-.floating-text-format-popup .popup-item:hover:not([disabled]) {
+.c-floating-text-format-popup .popup-item:hover:not([disabled]) {
   background-color: #eee;
 }
-.floating-text-format-popup select.popup-item {
+.c-floating-text-format-popup select.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -3528,11 +3263,11 @@ button {
   color: #777;
   text-overflow: ellipsis;
 }
-.floating-text-format-popup select.code-language {
+.c-floating-text-format-popup select.code-language {
   text-transform: capitalize;
   width: 130px;
 }
-.floating-text-format-popup .popup-item .text {
+.c-floating-text-format-popup .popup-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
@@ -3544,7 +3279,7 @@ button {
   height: 20px;
   text-align: left;
 }
-.floating-text-format-popup .popup-item .icon {
+.c-floating-text-format-popup .popup-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -3553,14 +3288,14 @@ button {
   line-height: 16px;
   background-size: contain;
 }
-.floating-text-format-popup i.chevron-down {
+.c-floating-text-format-popup i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
   display: flex;
   user-select: none;
 }
-.floating-text-format-popup i.chevron-down.inside {
+.c-floating-text-format-popup i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -3569,22 +3304,17 @@ button {
   margin-right: 10px;
   pointer-events: none;
 }
-.floating-text-format-popup .divider {
+.c-floating-text-format-popup .divider {
   width: 1px;
   background-color: #eee;
   margin: 0 4px;
 }
 @media (max-width: 1024px) {
-  .floating-text-format-popup button.insert-comment {
+  .c-floating-text-format-popup button.insert-comment {
     display: none;
   }
 }
 
-/* src/rich-text-editor/plugins/TableCellResizer/index.css */
-.TableCellResizer__resizer {
-  position: absolute;
-}
-
 /* src/rich-text-editor/themes/CrystallizeRTEditorTheme.css */
 .CrystallizeRTEditorTheme__ltr {
   text-align: left;
@@ -3942,21 +3672,12 @@ button {
     opacity: 1;
   }
 }
-.CrystallizeRTEditorTheme__tableCellResizeRuler {
-  display: block;
-  position: absolute;
-  width: 1px;
-  background-color: rgb(60, 132, 244);
-  height: 100%;
-  top: 0;
-}
 .CrystallizeRTEditorTheme__tableCellActionButtonContainer {
   display: block;
-  right: 5px;
-  top: 6px;
+  right: 2px;
+  top: 2px;
   position: absolute;
   z-index: 4;
-  width: 20px;
   height: 20px;
 }
 .CrystallizeRTEditorTheme__tableCellActionButton {

package/dist/index.d.ts

@@ -11,6 +11,9 @@ import * as ProgressPrimitives from '@radix-ui/react-progress';
 import * as _radix_ui_react_select from '@radix-ui/react-select';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 
+type SeparatorProps = HTMLAttributes<HTMLLIElement>;
+declare function Separator({ className }: SeparatorProps): JSX.Element;
+
 type ItemProps = HTMLAttributes<HTMLLIElement> & {
     onSelect?: () => void;
 };
@@ -23,6 +26,7 @@ type ActionMenuProps = {
 declare function ActionMenu({ children, tabIndex }: ActionMenuProps): JSX.Element;
 declare namespace ActionMenu {
     var Item: typeof Item;
+    var Separator: typeof Separator;
 }
 
 declare const avatarClassName: (props?: ({
@@ -180,14 +184,6 @@ declare function showInfo(delegated: DialogFuncProps): {
 };
 declare function destroyAll(): void;
 
-type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
-    children: ReactNode;
-    content: ReactNode;
-    alignContent?: 'start' | 'center' | 'end';
-    disabled?: boolean;
-};
-declare function DropdownMenuRoot({ children, content, alignContent, disabled, ...delegated }: DropdownMenuRootProps): JSX.Element;
-
 type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
     children: ReactNode;
 };
@@ -198,10 +194,21 @@ type DropdownMenuLabelProps = {
 };
 declare function DropdownMenuLabel({ children }: DropdownMenuLabelProps): JSX.Element;
 
+type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
+    children: ReactNode;
+    content: ReactNode;
+    alignContent?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare function DropdownMenuRoot({ children, content, alignContent, disabled, onOpenChange, ...delegated }: DropdownMenuRootProps): JSX.Element;
+
 declare const DropdownMenu: {
     Root: typeof DropdownMenuRoot;
     Item: typeof DropdownMenuItem;
     Label: typeof DropdownMenuLabel;
+    Separator: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+    Portal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
 };
 
 type IconButtonStylesProps = VariantProps<typeof buttonStyles>;