@team-monolith/cds 1.4.3 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -63,6 +63,8 @@ const StyledContentEditable = styled(ContentEditable) `
|
|
|
63
63
|
outline: 0;
|
|
64
64
|
// ComponentAdder 를 위한 공간
|
|
65
65
|
${({ isEditable }) => isEditable && "padding-left: 64px;"}
|
|
66
|
+
// ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
|
|
67
|
+
padding-bottom: 64px;
|
|
66
68
|
min-height: 150px;
|
|
67
69
|
|
|
68
70
|
hr {
|
|
@@ -28,6 +28,7 @@ import ComponentAdder from "./ComponentAdder";
|
|
|
28
28
|
import styled from "@emotion/styled";
|
|
29
29
|
import { getContextMenuOptions } from "./getContextMenuOptions";
|
|
30
30
|
import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
|
|
31
|
+
import { ZINDEX } from "../../../../utils/zIndex";
|
|
31
32
|
export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
|
|
32
33
|
function isOnMenu(element) {
|
|
33
34
|
return !!element.closest(`.${COMPONENT_ADDER_MENU_CLASSNAME}`);
|
|
@@ -126,8 +127,7 @@ export function ComponentAdderPlugin(props) {
|
|
|
126
127
|
});
|
|
127
128
|
const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
|
|
128
129
|
return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
|
|
129
|
-
|
|
130
|
-
z-index: 1;
|
|
130
|
+
z-index: ${ZINDEX.DIALOG + 1};
|
|
131
131
|
`, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
|
|
132
132
|
? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
|
|
133
133
|
: null, onSelectOption: onSelectOption, onClose: () => {
|
package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js
CHANGED
|
@@ -22,6 +22,7 @@ import { css as cssToClassName } from "@emotion/css";
|
|
|
22
22
|
import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
|
|
23
23
|
import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
|
|
24
24
|
import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, } from "../../../../icons";
|
|
25
|
+
import { ZINDEX } from "../../../../utils/zIndex";
|
|
25
26
|
// import useModal from "../../hooks/useModal";
|
|
26
27
|
// import catTypingGif from "../../images/cat-typing.gif";
|
|
27
28
|
// import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
|
|
@@ -166,8 +167,7 @@ export function ComponentPickerMenuPlugin() {
|
|
|
166
167
|
});
|
|
167
168
|
}, [editor]);
|
|
168
169
|
return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
|
|
169
|
-
|
|
170
|
-
z-index: 1;
|
|
170
|
+
z-index: ${ZINDEX.DIALOG + 1};
|
|
171
171
|
`, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
|
|
172
172
|
? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
|
|
173
173
|
: null })] }));
|