@crystallize/design-system 1.17.0 → 1.17.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.17.2
+
+### Patch Changes
+
+- fd2e53c: The line breaks in the rich text editor are not considered as elements and thus they are not transformed onChange. To fix it we check for them and when present we add them to the list of elements.
+
+## 1.17.1
+
+### Patch Changes
+
+- 9f55eae: Extend the rich text editor to get the initialData as null. Limit the type of the initialData to just an array of notes.
+
 ## 1.17.0
 
 ### Minor Changes

package/dist/index.css

@@ -2292,13 +2292,6 @@ button {
   background-image: url(./prettier-error-DYJSLYDP.svg);
 }
 
-/* src/rich-text-editor/plugins/ActionsPlugin/index.css */
-.c-rte-actions-plugin {
-  z-index: 50;
-  display: flex;
-  align-items: center;
-}
-
 /* src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css */
 .c-rte-code-action-menu-container {
   height: 37px;
@@ -2420,6 +2413,11 @@ button {
   padding-top: var(--c-rte-toolbar-pt, 0.25rem);
   padding-left: var(--c-rte-toolbar-pl, 0.5rem);
   padding-right: var(--c-rte-toolbar-pr, 0.5rem);
+  container-type: inline-size;
+  container-name: rich-text-toolbar;
+  @container rich-text-toolbar (max-width: 600px) {
+    .c-rte-toolbar__icon-btn { display: none; };
+  }
 }
 .c-rte-toolbar__inner {
   display: flex;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAttributes, ComponentPropsWithoutRef, LabelHTMLAttributes } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuItemProps as DropdownMenuItemProps$1 } from '@radix-ui/react-dropdown-menu';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -16,10 +17,10 @@ import * as RadixSwitch from '@radix-ui/react-switch';
 type SeparatorProps = HTMLAttributes<HTMLLIElement>;
 declare function Separator({ className }: SeparatorProps): JSX.Element;
 
-type ItemProps = HTMLAttributes<HTMLLIElement> & {
+type ItemProps = DropdownMenuItemProps$1 & {
     onSelect?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
-declare function Item({ children, className, onSelect }: ItemProps): JSX.Element;
+declare function Item({ children, className, onSelect, ...delegated }: ItemProps): JSX.Element;
 
 type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
     children: React.ReactNode;
@@ -319,7 +320,7 @@ type TagProps = React.ComponentProps<'div'> & TagStylesProps & {
 };
 declare function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }: TagProps): JSX.Element;
 
-type I18NKeys = 'actionClearTextFormatting' | 'actionTextFormattingOptions' | 'actionFormatAsStrongLabel' | 'actionFormatAsStrongTitle' | 'actionFormatAsStrongTitleApple' | 'actionFormatAsEmphasizedLabel' | 'actionFormatAsEmphasizedTitle' | 'actionFormatAsEmphasizedTitleApple' | 'actionFormatAsUnderlinedLabel' | 'actionFormatAsUnderlinedTitle' | 'actionFormatAsUnderlinedTitleApple' | 'actionFormatWithStrikethroughLabel' | 'actionFormatWithStrikethroughTitle' | 'actionFormatWithSubscriptLabel' | 'actionFormatWithSubscriptTitle' | 'actionFormatWithSuperscriptLabel' | 'actionFormatWithSuperscriptTitle' | 'actionCopyJSON' | 'actionClear' | 'actionFormatCode' | 'actionCopyCode' | 'actionInsertCodeBlock' | 'actionInsertlink' | 'actionTableInsertRowsAbove' | 'actionTableInsertRowsAbove_plural' | 'actionTableInsertRowsBelow' | 'actionTableInsertRowsBelow_plural' | 'actionTableInsertColumnsBefore' | 'actionTableInsertColumnsBefore_plural' | 'actionTableInsertColumnsAfter' | 'actionTableInsertColumnsAfter_plural' | 'actionTableAddRowHeader' | 'actionTableRemoveRowHeader' | 'actionTableAddColumnHeader' | 'actionTableRemoveColumnHeader' | 'actionTableDeleteColumn' | 'actionTableDeleteRow' | 'actionTableDeleteTable' | 'actionTableOpenOptions' | 'actionUndoLabel' | 'actionUndoTitle' | 'actionUndoTitleApple' | 'actionRedoLabel' | 'actionRedoTitle' | 'actionRedoTitleApple' | 'codeSelectLanguage' | 'linkEditorLink' | 'linkEditorRel' | 'linkEditorTarget' | 'linkEditorCommit' | 'linkEditorEdit' | 'linkPreviewReplaceTextWithTitle' | 'horizontalRule' | 'table' | 'insertTableTitle' | 'insertTableDescription' | 'insertTableRows' | 'insertTableColumns' | 'insertTableCommit';
+type I18NKeys = 'actionClearTextFormatting' | 'actionTextFormattingOptions' | 'actionFormatAsStrongLabel' | 'actionFormatAsStrongTitle' | 'actionFormatAsStrongTitleApple' | 'actionFormatAsEmphasizedLabel' | 'actionFormatAsEmphasizedTitle' | 'actionFormatAsEmphasizedTitleApple' | 'actionFormatAsUnderlinedLabel' | 'actionFormatAsUnderlinedTitle' | 'actionFormatAsUnderlinedTitleApple' | 'actionFormatWithStrikethroughLabel' | 'actionFormatWithStrikethroughTitle' | 'actionFormatWithSubscriptLabel' | 'actionFormatWithSubscriptTitle' | 'actionFormatWithSuperscriptLabel' | 'actionFormatWithSuperscriptTitle' | 'actionFormatClear' | 'actionCopyJSON' | 'actionClear' | 'actionFormatCode' | 'actionCopyCode' | 'actionInsertCodeBlock' | 'actionInsertlink' | 'actionTableInsertRowsAbove' | 'actionTableInsertRowsAbove_plural' | 'actionTableInsertRowsBelow' | 'actionTableInsertRowsBelow_plural' | 'actionTableInsertColumnsBefore' | 'actionTableInsertColumnsBefore_plural' | 'actionTableInsertColumnsAfter' | 'actionTableInsertColumnsAfter_plural' | 'actionTableAddRowHeader' | 'actionTableRemoveRowHeader' | 'actionTableAddColumnHeader' | 'actionTableRemoveColumnHeader' | 'actionTableDeleteColumn' | 'actionTableDeleteRow' | 'actionTableDeleteTable' | 'actionTableOpenOptions' | 'actionUndoLabel' | 'actionUndoTitle' | 'actionUndoTitleApple' | 'actionRedoLabel' | 'actionRedoTitle' | 'actionRedoTitleApple' | 'codeSelectLanguage' | 'linkEditorLink' | 'linkEditorRel' | 'linkEditorTarget' | 'linkEditorCommit' | 'linkEditorEdit' | 'linkPreviewReplaceTextWithTitle' | 'horizontalRule' | 'table' | 'insertTableTitle' | 'insertTableDescription' | 'insertTableRows' | 'insertTableColumns' | 'insertTableCommit';
 type I18N = Record<I18NKeys, string>;
 
 type SupportedLanguages = 'en';
@@ -384,7 +385,7 @@ type CrystallizeRichTextTableNodes = {
     type: 'table-body' | 'table-caption' | 'table-footer' | 'table-head' | 'table-row';
 };
 
-type CrystallizeRichText = CrystallizeRichTextNode | CrystallizeRichTextNode[];
+type CrystallizeRichText = CrystallizeRichTextNode[];
 type CrystallizeRichTextNodeBase = {
     textContent?: string;
     children?: CrystallizeRichTextNode[];
@@ -429,7 +430,7 @@ type TRichTextBase = {
     disabled?: boolean;
 };
 declare function RichTextEditor({ initialData, language, labelTranslations, ...rest }: TRichTextBase & {
-    initialData?: CrystallizeRichText;
+    initialData?: CrystallizeRichText | null;
 }): JSX.Element;
 
 type TooltipProps = Partial<Pick<RadixTooltip.TooltipContentProps, 'side'>> & {