diff --git a/bricks/vs/src/code-editor/index.tsx b/bricks/vs/src/code-editor/index.tsx index f60b9e618..0295b47b4 100644 --- a/bricks/vs/src/code-editor/index.tsx +++ b/bricks/vs/src/code-editor/index.tsx @@ -380,6 +380,8 @@ export function CodeEditorComponent({ const maxLines = _maxLines ?? Infinity; const height = _height ?? 500; const [expanded, setExpanded] = useState(false); + const [placeholderInstance, setPlaceholderInstance] = + useState(); const workerId = useMemo(() => uniqueId("worker"), []); const { t } = useTranslation(NS); @@ -909,11 +911,32 @@ export function CodeEditorComponent({ editorRef.current! ); + setPlaceholderInstance(placeholderWidget); + return () => { placeholderWidget.dispose(); }; }, [placeholder]); + useEffect(() => { + if ( + placeholderInstance && + editorRef.current && + editorRef.current.getDomNode + ) { + const node = placeholderInstance.getDomNode(); + const rect = node.getBoundingClientRect(); + const originWidth = editorRef.current + ?.getDomNode() + ?.getBoundingClientRect().width; + + editorRef.current?.layout({ + width: originWidth!, + height: rect.height + 25, + }); + } + }, [placeholderInstance]); + const handleCopyIconClick = useCallback(() => { if (editorRef.current) { const currentModel = editorRef.current.getModel()!; diff --git a/bricks/vs/src/code-editor/widget/Placeholder.tsx b/bricks/vs/src/code-editor/widget/Placeholder.tsx index 57993edc2..7d7a7c67c 100644 --- a/bricks/vs/src/code-editor/widget/Placeholder.tsx +++ b/bricks/vs/src/code-editor/widget/Placeholder.tsx @@ -39,7 +39,7 @@ export class PlaceholderContentWidget implements monaco.editor.IContentWidget { this.domNode.style.fontStyle = "italic"; this.domNode.style.color = "rgba(var(--theme-gray-color-rgb-channel), 0.4)"; - this.editor.applyFontInfo(this.domNode); + this.editor?.applyFontInfo?.(this.domNode); } return this.domNode;