Pulling fix/default-font-2 into develop

packages/editor-toolbar/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "main": "src/index.tsx",
+  "main": "./src/index.ts",
   "scripts": {
     "test": "vitest run",
     "coverage": "vitest run --coverage",

packages/editor-toolbar/src/components/FontFamilyDropdown.tsx

@@ -2,51 +2,34 @@ import React from "react"
 import { Select, MenuItem } from "@material-ui/core"
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
 import { useAtom } from "jotai"
-import { fontFamilyAtom } from "../context/atomConfigs"
+import { fontFamilyAtom, fonts, FontFamily } from "../context/atomConfigs"
 import { applyTextStyles } from "../utils/textStyles"
 import { useToolbarItemStyles } from "../hooks/useToolbarItemStyles"
 
-const defaultFontFamilyOptions = [
-  "Arial",
-  "Courier New",
-  "Georgia",
-  "Times New Roman",
-  "Trebuchet MS",
-  "Verdana",
-]
-
 type FontFamilySelectProperties = React.ChangeEvent<{
   name?: string | undefined
   value: unknown
 }>
 
-type FontFamilyDropdownProperties = {
-  fontOptions?: typeof defaultFontFamilyOptions
-}
-
-const title = "Font Family"
-
-const FontFamilyDropdown = ({
-  fontOptions = defaultFontFamilyOptions,
-}: FontFamilyDropdownProperties) => {
+const FontFamilyDropdown = () => {
   const [fontFamily] = useAtom(fontFamilyAtom)
   const [editor] = useLexicalComposerContext()
   const classes = useToolbarItemStyles()
   const joinedClasses = `${classes.root} ${classes.spaced}`
 
   const onFontFamilySelect = (event: FontFamilySelectProperties) => {
-    applyTextStyles(editor, { "font-family": event.target.value as string })
+    applyTextStyles(editor, { "font-family": event.target.value as FontFamily })
   }
 
   return (
     <Select
-      title={title}
+      title="Font Family"
       className={joinedClasses}
       onChange={onFontFamilySelect}
       value={fontFamily}>
-      {fontOptions.map((option) => (
-        <MenuItem key={option} value={option}>
-          {option}
+      {fonts.map((option) => (
+        <MenuItem key={option.name} value={option.value}>
+          {option.name}
         </MenuItem>
       ))}
     </Select>

packages/editor-toolbar/src/components/FontSizeDropdown.tsx

@@ -21,7 +21,7 @@ const title = "Font Size"
 const genFontSize = (start: number, end: number) =>
   [...new Array(end - start + 1).keys()]
     .map((x) => x + start)
-    .map((x) => [`${x}px`, `${x}`])
+    .map((x) => ({ value: `${x}px`, label: `${x}` }))
 
 const FontSizeDropdown = ({
   start = 10,
@@ -41,9 +41,9 @@ const FontSizeDropdown = ({
       className={joinedClasses}
       onChange={onFontSizeSelect}
       value={fontSize}>
-      {genFontSize(start, end).map(([option, size]) => (
-        <MenuItem key={option} value={option}>
-          {size}
+      {genFontSize(start, end).map(({ value, label }) => (
+        <MenuItem key={label} value={value}>
+          {label}
         </MenuItem>
       ))}
     </Select>

packages/editor-toolbar/src/context/atomConfigs.ts

@@ -1,9 +1,8 @@
 import { atom } from "jotai"
 import { focusAtom } from "jotai-optics"
 
-export type ButtonStates = "NORMAL" | "LOADING" | "DONE" | "ERROR"
-
-export enum FontFamily {
+enum FontFamily {
+  INTER_VARIABLE = "Inter Variable",
   ARIAL = "Arial",
   COURIER_NEW = "Courier New",
   GEORGIA = "Georgia",
@@ -12,7 +11,20 @@ export enum FontFamily {
   VERDANA = "Verdana",
 }
 
-export enum BlockTypes {
+const DEFAULT_FONT = FontFamily.INTER_VARIABLE
+const DEFAULT_FONT_SIZE = "15px"
+
+const fonts = [
+  { name: "Arial", value: FontFamily.ARIAL },
+  { name: "Courier New", value: FontFamily.COURIER_NEW },
+  { name: "Georgia", value: FontFamily.GEORGIA },
+  { name: "Inter Variable", value: FontFamily.INTER_VARIABLE },
+  { name: "Times New Roman", value: FontFamily.TIMES_NEW_ROMAN },
+  { name: "Trebuchet MS", value: FontFamily.TREBUCHET_MS },
+  { name: "Verdana", value: FontFamily.VERDANA },
+]
+
+enum BlockTypes {
   PARAGRAPH = "flex-layout",
   HEADING_ONE = "h1",
   HEADING_TWO = "h2",
@@ -23,81 +35,79 @@ export enum BlockTypes {
   QUOTE = "quote",
 }
 
-const FontSizes = [
-  "10px",
-  "11px",
-  "12px",
-  "13px",
-  "14px",
-  "15px",
-  "16px",
-  "17px",
-  "18px",
-  "19px",
-  "20px",
-]
-
-export const formatAtom = atom({
+const formatAtom = atom({
   isBold: false,
   isItalic: false,
   isUnderlined: false,
-  fontSize: FontSizes[5],
+  fontSize: DEFAULT_FONT_SIZE,
   fontColor: "hsl(0, 0%, 0%)",
-  fontFamily: FontFamily.ARIAL,
+  fontFamily: DEFAULT_FONT,
   blockType: BlockTypes.PARAGRAPH,
 })
-export const isBoldAtom = focusAtom(formatAtom, (optic) => optic.prop("isBold"))
-export const isItalicAtom = focusAtom(formatAtom, (optic) =>
-  optic.prop("isItalic"),
-)
-export const isUnderlinedAtom = focusAtom(formatAtom, (optic) =>
-  optic.prop("isUnderlined"),
-)
-export const fontFamilyAtom = focusAtom(formatAtom, (optic) =>
-  optic.prop("fontFamily"),
-)
-export const fontSizeAtom = focusAtom(formatAtom, (optic) =>
-  optic.prop("fontSize"),
-)
-export const fontColorAtom = focusAtom(formatAtom, (optic) =>
-  optic.prop("fontColor"),
-)
-
-export const blockTypeAtom = focusAtom(formatAtom, (optic) =>
-  optic.prop("blockType"),
-)
 
 const historyAtom = atom({
   canUndo: false,
   canRedo: false,
 })
-export const canUndoAtom = focusAtom(historyAtom, (optic) =>
-  optic.prop("canUndo"),
-)
-export const canRedoAtom = focusAtom(historyAtom, (optic) =>
-  optic.prop("canRedo"),
-)
 
-export const openAtom = atom({
+const openAtom = atom({
   insertImage: false,
   uploadFile: false,
   insertTable: false,
   tableActions: false,
   colorPicker: false,
 })
 
-export const insertTableDialogOpenAtom = focusAtom(openAtom, (optic) =>
+const isBoldAtom = focusAtom(formatAtom, (optic) => optic.prop("isBold"))
+const isItalicAtom = focusAtom(formatAtom, (optic) => optic.prop("isItalic"))
+const isUnderlinedAtom = focusAtom(formatAtom, (optic) =>
+  optic.prop("isUnderlined"),
+)
+const fontFamilyAtom = focusAtom(formatAtom, (optic) =>
+  optic.prop("fontFamily"),
+)
+const fontSizeAtom = focusAtom(formatAtom, (optic) => optic.prop("fontSize"))
+const fontColorAtom = focusAtom(formatAtom, (optic) => optic.prop("fontColor"))
+
+const blockTypeAtom = focusAtom(formatAtom, (optic) => optic.prop("blockType"))
+
+const canUndoAtom = focusAtom(historyAtom, (optic) => optic.prop("canUndo"))
+const canRedoAtom = focusAtom(historyAtom, (optic) => optic.prop("canRedo"))
+
+const insertTableDialogOpenAtom = focusAtom(openAtom, (optic) =>
   optic.prop("insertTable"),
 )
-export const insertImageDialogOpenAtom = focusAtom(openAtom, (optic) =>
+const insertImageDialogOpenAtom = focusAtom(openAtom, (optic) =>
   optic.prop("insertImage"),
 )
-export const uploadFileDialogOpenAtom = focusAtom(openAtom, (optic) =>
+const uploadFileDialogOpenAtom = focusAtom(openAtom, (optic) =>
   optic.prop("uploadFile"),
 )
-export const tableActionMenuOpenAtom = focusAtom(openAtom, (optic) =>
+const tableActionMenuOpenAtom = focusAtom(openAtom, (optic) =>
   optic.prop("tableActions"),
 )
-export const colorPickerOpenAtom = focusAtom(openAtom, (optic) =>
+const colorPickerOpenAtom = focusAtom(openAtom, (optic) =>
   optic.prop("colorPicker"),
 )
+
+export {
+  fonts,
+  DEFAULT_FONT,
+  DEFAULT_FONT_SIZE,
+  FontFamily,
+  BlockTypes,
+  isBoldAtom,
+  isItalicAtom,
+  isUnderlinedAtom,
+  fontFamilyAtom,
+  fontSizeAtom,
+  fontColorAtom,
+  blockTypeAtom,
+  canUndoAtom,
+  canRedoAtom,
+  insertTableDialogOpenAtom,
+  insertImageDialogOpenAtom,
+  uploadFileDialogOpenAtom,
+  tableActionMenuOpenAtom,
+  colorPickerOpenAtom,
+}

packages/editor-toolbar/src/hooks/useFontProperties.ts

@@ -9,6 +9,7 @@ import {
   fontSizeAtom,
   fontFamilyAtom,
   FontFamily,
+  DEFAULT_FONT,
 } from "../context/atomConfigs"
 
 const useFontProperties = () => {
@@ -30,7 +31,7 @@ const useFontProperties = () => {
       $getSelectionStyleValueForProperty(
         selection,
         "font-family",
-        "Arial",
+        DEFAULT_FONT,
       ) as FontFamily,
     )
   }, [setIsBold, setIsItalic, setIsUnderlined, setFontSize, setFontFamily])

packages/editor-toolbar/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./DictybaseToolbar"
+export * from "./context/atomConfigs"

packages/editor/src/Editor.tsx

@@ -10,6 +10,13 @@ import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin"
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary"
 import { Grid } from "@material-ui/core"
+import { pipe } from "fp-ts/function"
+import { match as Bmatch } from "fp-ts/boolean"
+import {
+  getOrElse as OgetOrElse,
+  fromNullable as OfromNullable,
+  map as Omap,
+} from "fp-ts/Option"
 import { ImagePlugin } from "@dictybase/image-plugin"
 import { WidthTablePlugin } from "@dictybase/width-table-plugin"
 import { FlexLayoutPlugin } from "@dictybase/flex-layout-plugin"
@@ -40,9 +47,13 @@ const Editor = ({
   plugins,
 }: EditorProperties) => {
   // eslint-disable-next-line unicorn/no-null
-  const initialEditorState = content?.editorState || initialStateString || null
+  const initialEditorState = pipe(
+    content,
+    OfromNullable,
+    Omap(({ editorState }) => editorState),
+    OgetOrElse(() => initialStateString as InitialEditorStateType),
+  )
   const placeholderClasses = useEditorPlaceholderStyles()
-  // const persistencePluginStyles = usePersistencePluginStyles()
   const editorAreaClasses = useEditorAreaStyles({ editable })
 
   return (
@@ -60,20 +71,23 @@ const Editor = ({
       <WidthTablePlugin />
       <TableActionPlugin />
       <HistoryPlugin />
-      {/* {content?.storageKey ? (
-        <LocalPersistencePlugin storageKey={content.storageKey} />
-      ) : (
-        <></>
-      )} */}
       <Grid container spacing={1} direction="column">
-        {/* <Grid item className={persistencePluginStyles.root}> */}
-        {toolbar ? <Grid item>{toolbar}</Grid> : <></>}
-        {editable ? (
-          <Grid item>
-            <DictybaseToolbar />
-          </Grid>
-        ) : (
-          <></>
+        {pipe(
+          toolbar,
+          OfromNullable,
+          Omap((tb) => <Grid item>{tb}</Grid>),
+          OgetOrElse(() => <></>)
+        )}
+        {pipe(
+          editable,
+          Bmatch(
+            () => <></>,
+            () => (
+              <Grid item>
+                <DictybaseToolbar />
+              </Grid>
+            ),
+          ),
         )}
         <Grid item>
           <div>

packages/editor/src/initialState.ts

@@ -1,11 +1,22 @@
+import { DEFAULT_FONT, DEFAULT_FONT_SIZE } from "@dictybase/editor-toolbar"
 /* eslint-disable unicorn/no-null */
 const initialState = {
   root: {
     children: [
       {
         children: [
           {
-            children: [],
+            children: [
+              { 
+                detail: 0,
+                format: 0,
+                mode: "normal",
+                style: `font-family: ${DEFAULT_FONT}; font-size: ${DEFAULT_FONT_SIZE}`,
+                text: "",
+                type: "text",
+                version: 1
+              }
+            ],
             direction: null,
             format: "",
             indent: 0,

packages/resizable-image/src/state.ts

@@ -1,8 +1,7 @@
 import { atom } from "jotai"
 
-export type ButtonStates = "NORMAL" | "LOADING" | "DONE" | "ERROR"
+const ImageDimensionsAtom = atom({ width: 500, height: 500 })
+const dialogOpenAtom = atom(false)
+const isResizingAtom = atom(false)
 
-export const ButtonStateAtom = atom<ButtonStates>("NORMAL")
-export const ImageDimensionsAtom = atom({ width: 500, height: 500 })
-export const dialogOpenAtom = atom(false)
-export const isResizingAtom = atom(false)
+export { ImageDimensionsAtom, dialogOpenAtom, isResizingAtom }

packages/ui-dsc/src/home/AuthorizedHeading.tsx

@@ -15,7 +15,11 @@ const AuthorizedHeading = () => {
     <Grid item className={classes.header}>
       <Typography variant="h1">
         Welcome to Dicty Stock Center (DSC)
-        <IconButton aria-label="Edit DSC Intro" size="medium" onClick={onClick}>
+        <IconButton
+          aria-label="Edit DSC Intro"
+          size="medium"
+          onClick={onClick}
+          className={classes.iconButton}>
           <EditIcon className={classes.icon} />
         </IconButton>
       </Typography>