@crystallize/design-system 1.11.4 → 1.11.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.11.5
+
+### Patch Changes
+
+- f7cb015: Allow to pass a portal container, in order to attach the menu on the Dialog cases
+
 ## 1.11.4
 
 ### Patch Changes

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAt
 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 DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ProgressPrimitives from '@radix-ui/react-progress';
 import * as _radix_ui_react_select from '@radix-ui/react-select';
@@ -19,15 +19,45 @@ type ItemProps = HTMLAttributes<HTMLLIElement> & {
 };
 declare function Item({ children, className, onSelect }: ItemProps): JSX.Element;
 
+type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
+    children: ReactNode;
+};
+declare function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps): JSX.Element;
+
+type DropdownMenuLabelProps = {
+    children: ReactNode;
+};
+declare function DropdownMenuLabel({ children }: DropdownMenuLabelProps): JSX.Element;
+
+type Container = HTMLElement | null | undefined;
+type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
+    children: ReactNode;
+    content: ReactNode;
+    alignContent?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    container?: Container;
+};
+declare function DropdownMenuRoot({ children, content, alignContent, disabled, onOpenChange, container, ...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 ButtonStylesProps$1 = VariantProps<typeof buttonStyles$2>;
 declare const buttonStyles$2: (props?: ({
     size?: "xs" | "sm" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type ActionMenuProps = ButtonStylesProps$1 & {
     children: ReactNode;
+    container?: Container;
     tabIndex?: number;
 };
-declare function ActionMenu({ children, tabIndex, size }: ActionMenuProps): JSX.Element;
+declare function ActionMenu({ children, container, tabIndex, size }: ActionMenuProps): JSX.Element;
 declare namespace ActionMenu {
     var Item: typeof Item;
     var Separator: typeof Separator;
@@ -188,33 +218,6 @@ declare function showInfo(delegated: DialogFuncProps): {
 };
 declare function destroyAll(): void;
 
-type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
-    children: ReactNode;
-};
-declare function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps): JSX.Element;
-
-type DropdownMenuLabelProps = {
-    children: ReactNode;
-};
-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>;
 declare const buttonStyles: (props?: ({
     variant?: "default" | "elevate" | null | undefined;
@@ -488,4 +491,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, Tag, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, Tag, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, tokens };

package/dist/index.js

@@ -288,6 +288,7 @@ function DropdownMenuRoot({
   alignContent = "center",
   disabled,
   onOpenChange,
+  container,
   ...delegated
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuPrimitive3.Root, {
@@ -299,6 +300,7 @@ function DropdownMenuRoot({
         children
       }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
+        container,
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
           align: alignContent,
           sideOffset: 5,
@@ -354,10 +356,11 @@ var buttonStyles2 = (0, import_class_variance_authority7.cva)("c-action-menu", {
     size: "sm"
   }
 });
-function ActionMenu({ children, tabIndex, size }) {
+function ActionMenu({ children, container, tabIndex, size }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenu.Root, {
     content: children,
     alignContent: "center",
+    container,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", {
       "aria-label": "more options",
       className: buttonStyles2({ size }),
@@ -3618,7 +3621,7 @@ function Tag({ children, className, variant, ...delegated }) {
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -5729,7 +5732,7 @@ function TableActionMenuPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_lexical16 = require("lexical");
 var import_code9 = require("@lexical/code");
 var import_link6 = require("@lexical/link");
@@ -5742,6 +5745,7 @@ var import_selection3 = require("@lexical/selection");
 var import_utils4 = require("@lexical/utils");
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
+var import_react75 = require("react");
 var import_lexical15 = require("lexical");
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -5759,11 +5763,14 @@ function ActionsPlugin({
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
   const tr = useTr();
+  const actionMenuAnchorRef = (0, import_react75.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", {
+    ref: actionMenuAnchorRef,
     className: "z-50 flex items-center ",
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", {}),
       /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(ActionMenu, {
+        container: actionMenuAnchorRef.current,
         children: [
           !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ActionMenu.Item, {
             onSelect: actionItem.action,
@@ -5794,12 +5801,12 @@ function ActionsPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_table5 = require("@lexical/table");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = (0, import_react75.useState)("5");
-  const [columns, setColumns] = (0, import_react75.useState)("5");
+  const [rows, setRows] = (0, import_react76.useState)("5");
+  const [columns, setColumns] = (0, import_react76.useState)("5");
   const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -6067,23 +6074,23 @@ function ToolbarPlugin({
   actionsMenuAppend
 }) {
   const [editor] = (0, import_LexicalComposerContext11.useLexicalComposerContext)();
-  const [activeEditor, setActiveEditor] = (0, import_react76.useState)(editor);
-  const [blockType, setBlockType] = (0, import_react76.useState)("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = (0, import_react76.useState)(null);
-  const [isLink, setIsLink] = (0, import_react76.useState)(false);
-  const [isBold, setIsBold] = (0, import_react76.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react76.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react76.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react76.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react76.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react76.useState)(false);
-  const [isCode, setIsCode] = (0, import_react76.useState)(false);
-  const [canUndo, setCanUndo] = (0, import_react76.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react76.useState)(false);
+  const [activeEditor, setActiveEditor] = (0, import_react77.useState)(editor);
+  const [blockType, setBlockType] = (0, import_react77.useState)("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = (0, import_react77.useState)(null);
+  const [isLink, setIsLink] = (0, import_react77.useState)(false);
+  const [isBold, setIsBold] = (0, import_react77.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react77.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react77.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react77.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react77.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react77.useState)(false);
+  const [isCode, setIsCode] = (0, import_react77.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react77.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react77.useState)(false);
   const tr = useTr();
-  const [codeLanguage, setCodeLanguage] = (0, import_react76.useState)("");
-  const [isEditable, setIsEditable] = (0, import_react76.useState)(() => editor.isEditable());
-  const updateToolbar = (0, import_react76.useCallback)(() => {
+  const [codeLanguage, setCodeLanguage] = (0, import_react77.useState)("");
+  const [isEditable, setIsEditable] = (0, import_react77.useState)(() => editor.isEditable());
+  const updateToolbar = (0, import_react77.useCallback)(() => {
     const selection = (0, import_lexical16.$getSelection)();
     if ((0, import_lexical16.$isRangeSelection)(selection)) {
       const anchorNode = selection.anchor.getNode();
@@ -6130,7 +6137,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     return editor.registerCommand(
       import_lexical16.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -6141,7 +6148,7 @@ function ToolbarPlugin({
       import_lexical16.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6169,7 +6176,7 @@ function ToolbarPlugin({
       )
     );
   }, [activeEditor, editor, updateToolbar]);
-  const clearFormatting = (0, import_react76.useCallback)(() => {
+  const clearFormatting = (0, import_react77.useCallback)(() => {
     activeEditor.update(() => {
       const selection = (0, import_lexical16.$getSelection)();
       if ((0, import_lexical16.$isRangeSelection)(selection)) {
@@ -6187,14 +6194,14 @@ function ToolbarPlugin({
       }
     });
   }, [activeEditor]);
-  const insertLink = (0, import_react76.useCallback)(() => {
+  const insertLink = (0, import_react77.useCallback)(() => {
     if (!isLink) {
       editor.dispatchCommand(import_link6.TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
     } else {
       editor.dispatchCommand(import_link6.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  const onCodeLanguageSelect = (0, import_react76.useCallback)(
+  const onCodeLanguageSelect = (0, import_react77.useCallback)(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
@@ -6658,18 +6665,18 @@ function RichTextEditorWithoutContext({
     children: placeholderText ?? ""
   });
   const [editor] = (0, import_LexicalComposerContext12.useLexicalComposerContext)();
-  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react77.useState)(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react77.useState)(false);
-  const firstOnChangeTriggeredRef = (0, import_react77.useRef)(!autoFocus);
+  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react78.useState)(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react78.useState)(false);
+  const firstOnChangeTriggeredRef = (0, import_react78.useRef)(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     const updateViewPortWidth = () => {
       const isNextSmallWidthViewport = window.matchMedia("(max-width: 1025px)").matches;
       if (isNextSmallWidthViewport !== isSmallWidthViewport) {

package/dist/index.mjs

@@ -228,6 +228,7 @@ function DropdownMenuRoot({
   alignContent = "center",
   disabled,
   onOpenChange,
+  container,
   ...delegated
 }) {
   return /* @__PURE__ */ jsxs3(DropdownMenuPrimitive3.Root, {
@@ -239,6 +240,7 @@ function DropdownMenuRoot({
         children
       }),
       /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
+        container,
         children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
           align: alignContent,
           sideOffset: 5,
@@ -294,10 +296,11 @@ var buttonStyles2 = cva3("c-action-menu", {
     size: "sm"
   }
 });
-function ActionMenu({ children, tabIndex, size }) {
+function ActionMenu({ children, container, tabIndex, size }) {
   return /* @__PURE__ */ jsx9(DropdownMenu.Root, {
     content: children,
     alignContent: "center",
+    container,
     children: /* @__PURE__ */ jsxs4("button", {
       "aria-label": "more options",
       className: buttonStyles2({ size }),
@@ -3558,7 +3561,7 @@ function Tag({ children, className, variant, ...delegated }) {
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-import { useEffect as useEffect11, useRef as useRef5, useState as useState10 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState10 } from "react";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -5764,6 +5767,7 @@ import {
 } from "@lexical/utils";
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
+import { useRef as useRef5 } from "react";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
 import { jsx as jsx87, jsxs as jsxs64 } from "react/jsx-runtime";
@@ -5781,11 +5785,14 @@ function ActionsPlugin({
 }) {
   const [editor] = useLexicalComposerContext10();
   const tr = useTr();
+  const actionMenuAnchorRef = useRef5(null);
   return /* @__PURE__ */ jsxs64("div", {
+    ref: actionMenuAnchorRef,
     className: "z-50 flex items-center ",
     children: [
       /* @__PURE__ */ jsx87("div", {}),
       /* @__PURE__ */ jsxs64(ActionMenu, {
+        container: actionMenuAnchorRef.current,
         children: [
           !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx87(ActionMenu.Item, {
             onSelect: actionItem.action,
@@ -6682,7 +6689,7 @@ function RichTextEditorWithoutContext({
   const [editor] = useLexicalComposerContext12();
   const [floatingAnchorElem, setFloatingAnchorElem] = useState10(null);
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState10(false);
-  const firstOnChangeTriggeredRef = useRef5(!autoFocus);
+  const firstOnChangeTriggeredRef = useRef6(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);

package/package.json

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

package/src/action-menu/action-menu.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { VariantProps, cva } from 'class-variance-authority';
 
-import { DropdownMenu } from '../dropdown-menu';
+import { DropdownMenu, Container } from '../dropdown-menu';
 import { Item } from './action-item';
 import { Separator } from './action-item-separator';
 
@@ -20,12 +20,13 @@ const buttonStyles = cva('c-action-menu', {
 
 type ActionMenuProps = ButtonStylesProps & {
   children: ReactNode;
+  container?: Container;
   tabIndex?: number;
 };
 
-export function ActionMenu({ children, tabIndex, size }: ActionMenuProps) {
+export function ActionMenu({ children, container, tabIndex, size }: ActionMenuProps) {
   return (
-    <DropdownMenu.Root content={children} alignContent="center">
+    <DropdownMenu.Root content={children} alignContent="center" container={container}>
       <button
         aria-label="more options"
         className={buttonStyles({ size })}

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -1,12 +1,15 @@
 import type { ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
+export type Container = HTMLElement | null | undefined;
+
 export type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
   children: ReactNode;
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
   disabled?: boolean;
   onOpenChange?: (open: boolean) => void;
+  container?: Container;
 };
 
 export function DropdownMenuRoot({
@@ -15,6 +18,7 @@ export function DropdownMenuRoot({
   alignContent = 'center',
   disabled,
   onOpenChange,
+  container,
   ...delegated
 }: DropdownMenuRootProps) {
   return (
@@ -22,7 +26,7 @@ export function DropdownMenuRoot({
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Portal container={container}>
         <DropdownMenuPrimitive.Content
           align={alignContent}
           sideOffset={5}

package/src/dropdown-menu/index.ts

@@ -2,9 +2,11 @@ import { Portal, Separator } from '@radix-ui/react-dropdown-menu';
 
 import { DropdownMenuItem } from './dropdown-menu-item';
 import { DropdownMenuLabel } from './dropdown-menu-label';
-import { DropdownMenuRoot } from './dropdown-menu-root';
+import { DropdownMenuRoot, type DropdownMenuRootProps, type Container } from './dropdown-menu-root';
 import './dropdown-menu.css';
 
+export { DropdownMenuRootProps, Container };
+
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
   Item: DropdownMenuItem,

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

@@ -7,6 +7,7 @@
  *
  */
 
+import { useRef } from 'react';
 import { CLEAR_EDITOR_COMMAND, LexicalEditor } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
@@ -34,11 +35,12 @@ export default function ActionsPlugin({
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const tr = useTr();
+  const actionMenuAnchorRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="z-50 flex items-center ">
+    <div ref={actionMenuAnchorRef} className="z-50 flex items-center ">
       <div></div>
-      <ActionMenu>
+      <ActionMenu container={actionMenuAnchorRef.current}>
         {!prepend
           ? null
           : prepend.map(actionItem => (

package/src/rich-text-editor/tests/rich-text-editor-code.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { RichTextEditor } from '../rich-text-editor';
 
 describe('RichTextEditor code node', () => {
-  it('can add a code block to an existing paragraph texst', async () => {
+  it('can add a code block to an existing paragraph text', async () => {
     const onChange = vi.fn();
 
     render(