snapshot of https://github.com/dream-num/univer.git (dev, 2026-09-16; blobs > 131072B omitted)

packages/docs-quick-insert-ui/src/views/KeywordInputPlaceholder.tsx

@@ -0,0 +1,96 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IPopup } from '@univerjs/ui';
+import type { LocaleKey } from '../locale/types';
+import { LocaleService } from '@univerjs/core';
+import { ptToPixel } from '@univerjs/engine-render';
+import { useDependency } from '@univerjs/ui';
+import { useMemo } from 'react';
+
+export const KeywordInputPlaceholderComponentKey = 'docs.quick.insert.keyword-input-placeholder';
+
+const DEFAULT_FONT_SIZE = 11;
+
+interface IKeywordInputPlaceholderExtraProps {
+    fontSize?: number;
+    fontString?: string;
+    fontFamily?: string;
+    fontStyle?: 'normal' | 'italic';
+    fontWeight?: 'normal' | 'bold';
+    ascent?: number;
+    contentHeight?: number;
+}
+
+function measureTextWidth(text: string, font: string) {
+    if (typeof document === 'undefined') {
+        return text.length * DEFAULT_FONT_SIZE;
+    }
+
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    if (!context) {
+        return text.length * DEFAULT_FONT_SIZE;
+    }
+
+    context.font = font;
+
+    return Math.ceil(context.measureText(text).width);
+}
+
+export const KeywordInputPlaceholder = ({ popup }: { popup: IPopup<IKeywordInputPlaceholderExtraProps> }) => {
+    const localeService = useDependency(LocaleService);
+    const placeholder = localeService.t<LocaleKey>('docs-quick-insert-ui.keywordInputPlaceholder');
+    const fontSize = popup.extraProps?.fontSize ?? DEFAULT_FONT_SIZE;
+    const fontSizePx = ptToPixel(fontSize);
+    const fontString = popup.extraProps?.fontString ?? `${fontSizePx}px sans-serif`;
+    const ascent = popup.extraProps?.ascent ?? fontSizePx;
+    const contentHeight = Math.max(popup.extraProps?.contentHeight ?? fontSizePx, fontSizePx);
+    const textWidth = useMemo(() => measureTextWidth(placeholder, fontString), [fontString, placeholder]);
+
+    return (
+        <div
+            className={`
+              univer-select-none univer-font-normal univer-text-gray-500 univer-transition-colors
+              dark:!univer-text-gray-400
+            `}
+        >
+            <svg
+                width={textWidth}
+                height={contentHeight}
+                viewBox={`0 0 ${textWidth} ${contentHeight}`}
+                style={{ overflow: 'visible', display: 'block' }}
+            >
+                <text
+                    x={0}
+                    y={ascent}
+                    fill="currentColor"
+                    style={{
+                        font: fontString,
+                        fontFamily: popup.extraProps?.fontFamily,
+                        fontStyle: popup.extraProps?.fontStyle,
+                        fontWeight: popup.extraProps?.fontWeight,
+                    }}
+                >
+                    {placeholder}
+                </text>
+            </svg>
+        </div>
+    );
+};
+
+KeywordInputPlaceholder.componentKey = KeywordInputPlaceholderComponentKey;