fix: Avoid seeing lang unneccessarily (#10623)

app/models/Document.ts

@@ -134,7 +134,7 @@ export default class Document extends ArchivableModel implements Searchable {
   @observable
   title: string;
 
-  /** The likely language of the document. */
+  /** The likely language of the document, in ISO 639-1 format.  */
   language: string | undefined;
 
   /**

app/scenes/Document/components/Editor.tsx

@@ -33,6 +33,7 @@ import MultiplayerEditor from "./AsyncMultiplayerEditor";
 import DocumentMeta from "./DocumentMeta";
 import DocumentTitle from "./DocumentTitle";
 import first from "lodash/first";
+import { getLangFor } from "~/utils/language";
 
 const extensions = withUIExtensions(withComments(richExtensions));
 
@@ -229,7 +230,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
       )}
       <EditorComponent
         ref={mergeRefs([ref, handleRefChanged])}
-        lang={document.language}
+        lang={getLangFor(document.language)}
         autoFocus={!!document.title && !props.defaultValue}
         placeholder={t("Type '/' to insert, or start writing…")}
         scrollTo={decodeURIComponentSafe(window.location.hash)}

app/utils/language.ts

@@ -49,3 +49,46 @@ export async function changeLanguage(
     await Desktop.bridge?.setSpellCheckerLanguages(["en-US", localeBCP]);
   }
 }
+
+/**
+ * Languages with special styling, in ISO 639-1 format.
+ */
+const scriptsWithLang = new Set([
+  "th", // Thai
+  "lo", // Lao
+  "km", // Khmer
+  "my", // Burmese
+  "hi", // Hindi
+  "mr", // Marathi
+  "ne", // Nepali
+  "bn", // Bengali
+  "gu", // Gujarati
+  "pa", // Punjabi
+  "te", // Telugu
+  "ta", // Tamil
+  "ml", // Malayalam
+  "si", // Sinhala
+  "bo", // Tibetan
+  "ar", // Arabic
+  "fa", // Persian
+  "ur", // Urdu
+  "he", // Hebrew
+  "am", // Amharic
+  "mn", // Mongolian
+]);
+
+/**
+ * Returns the language code if it requires special text styling, otherwise undefined.
+ * This is used to determine if a lang attribute should be set on elements for CSS styling.
+ *
+ * @param langCode The language code to check, in ISO 639-1 format
+ * @returns The language code if it requires special styling, otherwise undefined
+ */
+export function getLangFor(
+  langCode: string | null | undefined
+): string | undefined {
+  if (!langCode) {
+    return undefined;
+  }
+  return scriptsWithLang.has(langCode) ? langCode : undefined;
+}

server/models/Document.ts

@@ -340,7 +340,7 @@ class Document extends ArchivableModel<
   @Column(DataType.TEXT)
   text: string;
 
-  /** The likely language of the content. */
+  /** The likely language of the content, in ISO 639-1 format. */
   @Column(DataType.STRING(2))
   @MaxLength(2)
   language: string;

server/queues/tasks/DocumentUpdateTextTask.ts

@@ -17,7 +17,9 @@ export default class DocumentUpdateTextTask extends BaseTask<DocumentEvent> {
     const node = Node.fromJSON(schema, document.content);
     document.text = serializer.serialize(node);
 
-    const language = franc(DocumentHelper.toPlainText(document));
+    const language = franc(DocumentHelper.toPlainText(document), {
+      minLength: 50,
+    });
     document.language = iso6393To1[language];
 
     await document.save({ silent: true });

shared/editor/components/Styles.ts

@@ -304,6 +304,12 @@ const emailStyle = (props: Props) => css`
   }
 `;
 
+/**
+ * Adjustments to line-height and paragraph margins for complex scripts. If adding
+ * scripts here you also need to update the `getLangFor` method.
+ *
+ * @returns The CSS styles for complex scripts.
+ */
 const textStyle = () => css`
   /* Southeast Asian scripts */
   :lang(th),  /* Thai */
@@ -312,7 +318,9 @@ const textStyle = () => css`
     :lang(my) {
     /* Burmese */
     p {
-      line-height: 1.8;
+      line-height: 1.7;
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
     }
   }
 
@@ -330,6 +338,8 @@ const textStyle = () => css`
     /* Sinhala */
     p {
       line-height: 1.7;
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
     }
   }
 
@@ -337,6 +347,8 @@ const textStyle = () => css`
   :lang(bo) {
     p {
       line-height: 1.8;
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
     }
   }
 
@@ -357,6 +369,8 @@ const textStyle = () => css`
     /* Mongolian */
     p {
       line-height: 1.7;
+      margin-top: 0.8em;
+      margin-bottom: 0.8em;
     }
   }
 `;