✨ custom fonts

.gitignore

@@ -29,3 +29,12 @@ yarn-error.log*
 # vercel
 .vercel
 .idea/
+
+# yarn
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+!.yarn/cache

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -25,14 +25,14 @@
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.3",
     "live-server": "^1.2.2",
-    "sass": "^1.80.4",
-    "sass-loader": "^16.0.2",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.95.0",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "zip-webpack-plugin": "^4.0.2"

src/QuillEditor.tsx

@@ -1,11 +1,11 @@
-import {useEffect} from 'react';
-import {styled} from "goober";
+import { useEffect } from 'react';
+import { styled } from "goober";
 
 import Quill from 'quill';
 import './quill.css';
-import {MarkdownShortcuts} from "./quill-markdown";
+import { MarkdownShortcuts } from "./quill-markdown";
 import snApi from "sn-extension-api";
-import {getPreviewText} from "./utils";
+import { getPreviewText } from "./utils";
 
 const Container = styled('div')`
   position: absolute;
@@ -20,6 +20,9 @@ const Container = styled('div')`
 const QuillEditor = () => {
   let quill;
   useEffect(() => {
+    const Font = Quill.import('attributors/class/font');
+    Font.whitelist = ['sans-serif', 'serif', 'monospace', 'arial', 'comic-sans'];
+    Quill.register(Font, true);
     Quill.register('modules/markdown', MarkdownShortcuts);
     const BlockEmbed = Quill.import('blots/block/embed');
 
@@ -36,7 +39,7 @@ const QuillEditor = () => {
       readOnly: snApi.locked,
       modules: {
         toolbar: [
-          [{'header': '1'}, {'header': '2'}, 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code', 'link', 'image', 'divider', {'list': 'ordered'}, {'list': 'bullet'}, {'align': []}, {'color': []}, {'background': []}, 'clean'],
+          [{ 'header': '1' }, { 'header': '2' }, 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code', 'link', 'image', 'divider', { 'list': 'ordered' }, { 'list': 'bullet' }, { 'align': [] }, { 'color': [] }, { 'background': [] }, 'clean', { 'font': Font.whitelist }],
         ],
         markdown: {}
       },

src/quill.css

@@ -549,6 +549,14 @@ hr {
   font-family: Monaco, Courier New, monospace
 }
 
+.ql-editor .ql-font-arial {
+  font-family: Arial
+}
+
+.ql-editor .ql-font-comic-sans {
+  font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", serif
+}
+
 .ql-editor .ql-size-small {
   font-size: .75em
 }
@@ -1081,6 +1089,16 @@ hr {
   content: 'Monospace';
 }
 
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=arial]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=arial]::before {
+  content: 'Arial';
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=comic-sans]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=comic-sans]::before {
+  content: 'Comic Sans';
+}
+
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
   font-family: Georgia, Times New Roman, serif;
 }
@@ -1089,6 +1107,14 @@ hr {
   font-family: Monaco, Courier New, monospace;
 }
 
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=arial]::before {
+  font-family: Arial, cursive;
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=comic-sans]::before {
+  font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", serif;
+}
+
 .ql-snow .ql-picker.ql-size {
   width: 98px;
 }