TF-3933 Avoid load font from google

Signed-off-by: dab246 <tdvu@linagora.com>
2025-08-01 18:10:56 +07:00
parent 1c04825367
commit 801b08bc90
31 changed files with 352 additions and 277 deletions
@@ -1,6 +1,7 @@

+import 'package:flutter/material.dart';
+
 class HtmlTemplate {
-  static const String fontLink = '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">';
  static const String nameClassToolTip = 'tmail-tooltip';
  static const String tooltipLinkCss = '''
    .$nameClassToolTip .tooltiptext {
@@ -66,10 +67,54 @@ class HtmlTemplate {
     </style>
  ''';

+  static const String fontFaceStyle = '''
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-Regular.ttf") format("truetype");
+      font-weight: 400;
+      font-style: normal;
+    }
+    
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-Medium.ttf") format("truetype");
+      font-weight: 500;
+      font-style: medium;
+    }
+    
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-SemiBold.ttf") format("truetype");
+      font-weight: 600;
+      font-style: semi-bold;
+    }
+    
+    @font-face {
+      font-family: 'Inter';
+      src: url("/assets/fonts/Inter/Inter-Bold.ttf") format("truetype");
+      font-weight: 700;
+      font-style: bold;
+    }
+    
+    body {
+      font-family: 'Inter', sans-serif;
+    }
+  ''';
+
+  static const String defaultFontStyle = '''
+    body {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: -0.01em; /* -1% */
+    }
+  ''';
+
  static const String previewEMLFileCssStyle = '''
    <style> 
+      $fontFaceStyle
+
      body {
-        font-family: Arial, 'Inter', sans-serif;
        color: #333;
        margin: 0;
        padding: 0;
@@ -219,38 +264,64 @@ class HtmlTemplate {

  static const String markDownAndASCIIArtStyleCSS = 'display: block; font-family: monospace; white-space: pre; margin: 1em 0px;';

-  static const String customInternalStyleCSS = '''
+  static String webCustomInternalStyleCSS({
+    bool useDefaultFontStyle = false,
+    bool customScrollbar = false,
+  }) => '''
    <style>
-      html, .note-editable, .note-codable {
-        overflow: auto;
-      }
+      ${HtmlTemplate.fontFaceStyle}
      
-      html::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .note-codable::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-
-      html::-webkit-scrollbar-thumb, .note-editable::-webkit-scrollbar-thumb, .note-codable::-webkit-scrollbar-thumb {
-        background-color: #c1c1c1;
-        border-radius: 10px;
-        min-height: 70px;
-      }
+      ${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
      
-     html::-webkit-scrollbar-track, .note-editable::-webkit-scrollbar-track, .note-codable::-webkit-scrollbar-track {
-        background: transparent;
-        border-radius: 10px;
-      }
-      
-      /* Browsers without `::-webkit-scrollbar-*` support */
-      @supports not selector(::-webkit-scrollbar) {
-          html, .note-editable, .note-codable {
-            scrollbar-width: thin;
-            scrollbar-color: #c1c1c1 transparent;
-          }
-      }
+      ${customScrollbar ? '''
+        html, .note-editable, .note-codable {
+          overflow: auto;
+        }
+        
+        html::-webkit-scrollbar, .note-editable::-webkit-scrollbar, .note-codable::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+  
+        html::-webkit-scrollbar-thumb, .note-editable::-webkit-scrollbar-thumb, .note-codable::-webkit-scrollbar-thumb {
+          background-color: #c1c1c1;
+          border-radius: 10px;
+          min-height: 70px;
+        }
+        
+       html::-webkit-scrollbar-track, .note-editable::-webkit-scrollbar-track, .note-codable::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: 10px;
+        }
+        
+        /* Browsers without `::-webkit-scrollbar-*` support */
+        @supports not selector(::-webkit-scrollbar) {
+            html, .note-editable, .note-codable {
+              scrollbar-width: thin;
+              scrollbar-color: #c1c1c1 transparent;
+            }
+        }
+      ''' : ''}
    </style>
  ''';

+  static String mobileCustomInternalStyleCSS({
+    bool useDefaultFontStyle = false,
+    TextDirection direction = TextDirection.ltr,
+  }) => '''
+    ${HtmlTemplate.fontFaceStyle}
+  
+    ${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
+      
+    #editor {
+      direction: ${direction.name};
+    }
+    
+    #editor .tmail-signature {
+      text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+    }
+  ''';
+
  static const String disableScrollingStyleCSS = '''
    html, body {
      overflow: hidden;
@@ -1,6 +1,7 @@
 import 'dart:convert';
 import 'dart:math';

+import 'package:core/utils/html/html_template.dart';
 import 'package:html_unescape/html_unescape.dart';

 import 'js_interop_stub.dart' if (dart.library.html) 'dart:js_interop';
@@ -9,7 +10,6 @@ import 'dart:typed_data';
 import 'package:core/data/constants/constant.dart';
 import 'package:core/presentation/extensions/html_extension.dart';
 import 'package:core/utils/app_logger.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:universal_html/html.dart' as html;

@@ -41,72 +41,43 @@ class HtmlUtils {
      editor.parentNode.replaceChild(newEditor, editor);''',
    name: 'unregisterDropListener');

-  static String customCssStyleHtmlEditor({
+  static String customInlineBodyCssStyleHtmlEditor({
    TextDirection direction = TextDirection.ltr,
-    bool useDefaultFont = false,
    double? horizontalPadding,
  }) {
-    if (PlatformInfo.isWeb) {
-      return '''
-        <style>
-          ${useDefaultFont ? '''
-            body {
-              font-family: Arial, 'Inter', sans-serif;
-              font-weight: 500;
-              font-size: 16px;
-              line-height: 24px;
-            }
-          ''' : ''}
+    return '''
+      <style>
+        .note-frame, .note-tooltip-content, .note-popover {
+          font-family: 'Inter', sans-serif;
+        }
        
-          .note-editable {
-            direction: ${direction.name};
-          }
-          
-          .note-editable .tmail-signature {
-            text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
-          }
-          
-          ${horizontalPadding != null
-            ? '''
-                .note-codable {
-                  padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
-                  margin-right: 3px;
-                }
-                
-                .note-editable {
-                  padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
-                  margin-right: 3px;
-                }
-              '''
-            : '''
+        .note-editable {
+          direction: ${direction.name};
+        }
+        
+        .note-editable .tmail-signature {
+          text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
+        }
+        
+        ${horizontalPadding != null
+          ? '''
+              .note-codable {
+                padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
+                margin-right: 3px;
+              }
+              
+              .note-editable {
+                padding: 10px ${horizontalPadding}px 0px ${horizontalPadding > 3 ? horizontalPadding - 3 : horizontalPadding}px;
+                margin-right: 3px;
+              }
+            '''
+          : '''
              .note-editable {
                padding: 10px 10px 0px 10px;
              }
            '''}
-        </style>
-      ''';
-    } else if (PlatformInfo.isMobile) {
-      return '''
-        ${useDefaultFont ? '''
-          body {
-            font-family: Arial, 'Inter', sans-serif;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-          }
-        ''' : ''}
-        
-        #editor {
-          direction: ${direction.name};
-        }
-        
-        #editor .tmail-signature {
-          text-align: ${direction == TextDirection.rtl ? 'right' : 'left'};
-        }
-      ''';
-    } else {
-      return '';
-    }
+      </style>
+    ''';
  }

  static String validateHtmlImageResourceMimeType(String mimeType) {
@@ -134,7 +105,7 @@ class HtmlUtils {
    String? styleCSS,
    String? javaScripts,
    bool hideScrollBar = true,
-    bool useDefaultFont = false,
+    bool useDefaultFontStyle = false,
    TextDirection? direction,
    double? contentPadding,
  }) {
@@ -144,18 +115,11 @@ class HtmlUtils {
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-      ${useDefaultFont && PlatformInfo.isMobile
-        ? '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">'
-        : ''}
      <style>
-        ${useDefaultFont ? '''
-          body {
-            font-family: 'Inter', sans-serif;
-            font-weight: 500;
-            font-size: 16px;
-            line-height: 24px;
-          }
-        ''' : ''}
+        ${HtmlTemplate.fontFaceStyle}
+        
+        ${useDefaultFontStyle ? HtmlTemplate.defaultFontStyle : ''}
+        
        .tmail-content {
          min-height: ${minHeight ?? 0}px;
          min-width: ${minWidth ?? 0}px;