@blocklet/editor 2.5.44 → 2.5.46

package/lib/main/themes/customTheme.js

@@ -2,11 +2,12 @@ import { css } from '@emotion/css';
 import { useTheme } from '@mui/material';
 import defaultTheme from './defaultTheme';
 import codeHighlight from './code-highlight';
+import { isHeadFontTooTall, isBodyFontTooTall } from '../utils/guard';
 const createCustomTheme = (theme) => {
     const noMarginTopStyle = css(`
-      // 首个元素的 margin-top 设置为 0
+      // 首个元素的 margin-top 设置为 0 或者为 “超高” 字体预留一点空间
       .be-editable &:first-child {
-        margin-top: 0;
+        margin-top: ${isHeadFontTooTall || isBodyFontTooTall ? '2px' : '0'};
       }
     `);
     const paragraph = css(

package/lib/main/ui/ContentEditable.js

@@ -11,5 +11,4 @@ const ContentEditableRoot = styled(LexicalContentEditable) `
   position: relative;
   tab-size: 1;
   outline: 0;
-  overflow: hidden;
 `;

package/lib/main/utils/guard.d.ts

@@ -6,3 +6,9 @@
  *
  */
 export declare function isHTMLElement(x: unknown): x is HTMLElement;
+/**
+ * Determines if the specified font is too tall
+ */
+export declare function isFontTooTall(fontFamily: string): boolean;
+export declare const isHeadFontTooTall: boolean;
+export declare const isBodyFontTooTall: boolean;

package/lib/main/utils/guard.js

@@ -8,3 +8,29 @@
 export function isHTMLElement(x) {
     return x instanceof HTMLElement;
 }
+/**
+ * Determines if the specified font is too tall
+ */
+export function isFontTooTall(fontFamily) {
+    const fontSizePx = 16;
+    const threshold = 1.1;
+    const container = document.createElement('div');
+    container.style.fontSize = `${fontSizePx}px`;
+    container.style.fontFamily = fontFamily;
+    container.style.opacity = '0';
+    container.style.whiteSpace = 'nowrap';
+    container.style.position = 'absolute';
+    container.style.pointerEvents = 'none';
+    const span = document.createElement('span');
+    span.textContent = 'Éy';
+    container.appendChild(span);
+    document.body.appendChild(container);
+    const renderHeight = span.getBoundingClientRect().height;
+    document.body.removeChild(container);
+    return renderHeight > fontSizePx * threshold;
+}
+const typography = window?.blocklet?.theme?.common?.typography;
+const headFont = typography?.h1?.fontFamily;
+const bodyFont = typography?.fontFamily;
+export const isHeadFontTooTall = headFont ? isFontTooTall(headFont) : false;
+export const isBodyFontTooTall = bodyFont ? isFontTooTall(bodyFont) : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.5.44",
+  "version": "2.5.46",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.5.44"
+    "@blocklet/pdf": "2.5.46"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",