editor: use noto serif as a serif font

apps/web/src/app.css

@@ -1,62 +1,98 @@
 /* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: normal;
+  font-display: swap;
   font-weight: 400;
-  src: local(''),
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
+  src: local(""),
+    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf")
+      format("truetype");
 }
 /* open-sans-600 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 600;
-  src: local(''),
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'), /* Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf') format('truetype'),
+  font-display: swap;
+  src: local(""),
+    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.ttf")
+      format("truetype");
 }
 /* open-sans-700 - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: normal;
   font-weight: 700;
-  src: local(''),
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'), /* Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf') format('truetype'),
+  font-display: swap;
+  src: local(""),
+    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf")
+      format("truetype");
 }
 /* open-sans-italic - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: italic;
   font-weight: 400;
-  src: local(''),
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff') format('woff'), /* Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf') format('truetype'),
+  font-display: swap;
+  src: local(""),
+    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf")
+      format("truetype");
 }
 /* open-sans-600italic - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: italic;
   font-weight: 600;
-  src: local(''),
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff') format('woff'), /* Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.ttf') format('truetype'),
+  font-display: swap;
+  src: local(""),
+    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600italic.ttf")
+      format("truetype");
 }
 /* open-sans-700italic - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: "Open Sans";
   font-style: italic;
   font-weight: 700;
-  src: local(''),
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff') format('woff'), /* Modern Browsers */
-       url('./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.ttf') format('truetype'),
+  font-display: swap;
+  src: local(""),
+    url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("./assets/fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700italic.ttf")
+      format("truetype");
 }
 
 .selectable,

packages/editor/src/extensions/font-family/font-family.ts

@@ -0,0 +1,84 @@
+import "@tiptap/extension-text-style";
+import { getFontConfig } from "@notesnook/theme/dist/theme/font";
+import { Extension } from "@tiptap/core";
+
+export type FontFamilyOptions = {
+  types: string[];
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    fontFamily: {
+      /**
+       * Set the font family
+       */
+      setFontFamily: (fontFamily: string) => ReturnType;
+      /**
+       * Unset the font family
+       */
+      unsetFontFamily: () => ReturnType;
+    };
+  }
+}
+
+const FONTS: Record<string, string> = {
+  monospace: getFontConfig().fonts.monospace,
+  "sans-serif": getFontConfig().fonts.body,
+  serif: `Noto Serif, Times New Roman, serif`
+};
+
+export const FontFamily = Extension.create<FontFamilyOptions>({
+  name: "fontFamily",
+
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (element) =>
+              element.style.fontFamily?.replace(/['"]+/g, ""),
+            renderHTML: (attributes) => {
+              if (!attributes.fontFamily) {
+                return {};
+              }
+
+              const realFontFamily =
+                attributes["data-font-family"] || attributes.fontFamily;
+              const font = FONTS[realFontFamily] || attributes.fontFamily;
+              return {
+                "data-font-family": realFontFamily,
+                style: `font-family: ${font}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontFamily:
+        (fontFamily) =>
+        ({ chain }) => {
+          return chain().setMark("textStyle", { fontFamily }).run();
+        },
+      unsetFontFamily:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark("textStyle", { fontFamily: null })
+            .removeEmptyTextStyle()
+            .run();
+        }
+    };
+  }
+});

packages/editor/src/extensions/font-family/index.ts

@@ -0,0 +1,5 @@
+import { FontFamily } from './font-family'
+
+export * from './font-family'
+
+export default FontFamily

packages/editor/src/index.ts

@@ -30,7 +30,7 @@ import Superscript from "@tiptap/extension-superscript";
 import FontSize from "./extensions/font-size";
 import TextDirection from "./extensions/text-direction";
 import TextStyle from "@tiptap/extension-text-style";
-import FontFamily from "@tiptap/extension-font-family";
+import FontFamily from "./extensions/font-family";
 import BulletList from "./extensions/bullet-list";
 import OrderedList from "./extensions/ordered-list";
 import Color from "@tiptap/extension-color";

packages/editor/styles/fonts.css

@@ -7,7 +7,8 @@
 @font-face {
   font-family: "Hack";
   src: url("fonts/hack-regular.woff2") format("woff2"),
-    url("fonts/hack-regular.woff") format("woff");
+    url("fonts/hack-regular.woff") format("woff"),
+    url("fonts/hack-regular.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
 }
@@ -15,7 +16,8 @@
 @font-face {
   font-family: "Hack";
   src: url("fonts/hack-bold.woff2") format("woff2"),
-    url("fonts/hack-bold.woff") format("woff");
+    url("fonts/hack-bold.woff") format("woff"),
+    url("fonts/hack-bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
 }
@@ -23,7 +25,8 @@
 @font-face {
   font-family: "Hack";
   src: url("fonts/hack-italic.woff2") format("woff2"),
-    url("fonts/hack-italic.woff") format("woff");
+    url("fonts/hack-italic.woff") format("woff"),
+    url("fonts/hack-italic.ttf") format("truetype");
   font-weight: 400;
   font-style: italic;
 }
@@ -31,7 +34,64 @@
 @font-face {
   font-family: "Hack";
   src: url("fonts/hack-bolditalic.woff2") format("woff2"),
-    url("fonts/hack-bolditalic.woff") format("woff");
+    url("fonts/hack-bolditalic.woff") format("woff"),
+    url("fonts/hack-bolditalic.ttf") format("truetype");
   font-weight: 700;
   font-style: italic;
 }
+
+/* noto-serif-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(""),
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2") format("woff2"),
+    /* Super Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff") format("woff"),
+    /* Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf") format("truetype"),
+}
+
+/* noto-serif-italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local(""),
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2") format("woff2"),
+    /* Super Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff") format("woff"),
+    /* Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf") format("truetype"),
+}
+
+/* noto-serif-700 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local(""),
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2") format("woff2"),
+    /* Super Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff") format("woff"),
+    /* Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf") format("truetype"),
+}
+
+/* noto-serif-700italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local(""),
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2") format("woff2"),
+    /* Super Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff") format("woff"),
+    /* Modern Browsers */
+    url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.ttf") format("truetype"),
+}

packages/editor/styles/fonts.mobile.css

@@ -31,3 +31,40 @@
   font-weight: 700;
   font-style: italic;
 }
+
+
+/* noto-serif-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+       url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.ttf") format("truetype"),
+}
+
+/* noto-serif-italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  font-weight: 400;
+  src: local(""),
+       url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.ttf") format("truetype"),
+}
+
+/* noto-serif-700 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""),
+       url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.ttf") format("truetype"),
+}
+
+/* noto-serif-700italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+  font-family: "Noto Serif";
+  font-style: italic;
+  font-weight: 700;
+  src: local(""),
+       url("fonts/noto-serif-v21-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.ttf") format("truetype"),
+}

packages/editor/styles/styles.css

@@ -1,3 +1,7 @@
+.ProseMirror span * {
+  font-family: inherit;
+}
+
 .ProseMirror p.is-editor-empty:first-child::before {
   color: var(--placeholder);
   content: attr(data-placeholder);