From 0ec92ee915c003654973f21716c5ad7fdf2811a8 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Tue, 26 Apr 2022 09:04:02 -0400
Subject: [PATCH 1/9] 164 - tooltip

---
 src/components/ToolbarButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
index e958ee2..30fca14 100644
--- a/src/components/ToolbarButton.tsx
+++ b/src/components/ToolbarButton.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react'
-import IconButton from '@mui/material/IconButton'
+import {IconButton, Tooltip} from '@mui/material'
 import { TToolbarComponentProps, TToolbarButtonSize } from './Toolbar'
 
 interface IToolbarButtonProps {
@@ -34,6 +34,8 @@ const ToolbarButton: FunctionComponent<IToolbarButtonProps> = (props) => {
     }
     if (props.icon) {
         return (
+            <Tooltip title={props.label}>
+
             <IconButton
                 {...sharedProps}
                 aria-label={props.label}
@@ -42,6 +44,7 @@ const ToolbarButton: FunctionComponent<IToolbarButtonProps> = (props) => {
             >
                 {props.icon}
             </IconButton>
+            </Tooltip>
         )
     }
     if (props.component) {

From bfa993448f7f728cc874f4d6fa124cc0ac26bf47 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Tue, 26 Apr 2022 09:38:46 -0400
Subject: [PATCH 2/9] 292 - exports

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index b9a001d..2671ff1 100644
--- a/index.js
+++ b/index.js
@@ -1 +1 @@
-export {default} from './dist/MUIRichTextEditor'
+module.exports = require('./dist/MUIRichTextEditor')

From 811e5c593f3a23615ec3c6013c9183284a179354 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Tue, 26 Apr 2022 09:40:15 -0400
Subject: [PATCH 3/9] 295 - autocomplete min char count as prop

---
 examples/autocomplete/index.tsx | 1 +
 index.d.ts                      | 1 +
 src/MUIRichTextEditor.tsx       | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/examples/autocomplete/index.tsx b/examples/autocomplete/index.tsx
index 5b2f884..ec7c967 100644
--- a/examples/autocomplete/index.tsx
+++ b/examples/autocomplete/index.tsx
@@ -110,6 +110,7 @@ const Autocomplete = () => {
             label="Try typing ':grin' or '/mexico'..."
             onSave={save}
             autocomplete={{
+                minSearchCharCount: 2,
                 strategies: [
                     {
                         items: emojis,
diff --git a/index.d.ts b/index.d.ts
index 24c858e..f6b48b2 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -87,6 +87,7 @@ export declare type TAutocompleteStrategy = {
     atomicBlockName?: string;
 };
 export declare type TAutocomplete = {
+    minSearchCharCount?: number;
     strategies: TAutocompleteStrategy[];
     suggestLimit?: number;
 };
diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 0aeb4f9..6ff6afa 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -35,6 +35,7 @@ export type TAutocompleteStrategy = {
 }
 
 export type TAutocomplete = {
+    minSearchCharCount?: number;
     strategies: TAutocompleteStrategy[]
     suggestLimit?: number
 }
@@ -201,7 +202,6 @@ const styleRenderMap: DraftStyleMap = {
 }
 
 const { hasCommandModifier } = KeyBindingUtil
-const autocompleteMinSearchCharCount = 2
 const lineHeight = 26
 const defaultInlineToolbarControls = ["bold", "italic", "underline", "clear"]
 
@@ -267,6 +267,7 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
     const autocompleteSelectionStateRef = useRef<SelectionState | undefined>(undefined)
     const autocompletePositionRef = useRef<TPosition | undefined>(undefined)
     const autocompleteLimit = props.autocomplete ? props.autocomplete.suggestLimit || 5 : 5
+    const autocompleteMinSearchCharCount =  props?.autocomplete?.minSearchCharCount ?? 2;
     const isFirstFocus = useRef(true)
     const customBlockMapRef = useRef<DraftBlockRenderMap | undefined>(undefined)
     const customStyleMapRef = useRef<DraftStyleMap | undefined>(undefined)

From ca36edc5cd57f588dc101c5cb109858ceac638e8 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Tue, 26 Apr 2022 10:28:54 -0400
Subject: [PATCH 4/9] 129 - click away to close popovers

---
 src/MUIRichTextEditor.tsx     | 1 +
 src/components/UrlPopover.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 6ff6afa..bd88267 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -1143,6 +1143,7 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
                         data={state.urlData}
                         anchor={state.anchorUrlPopover}
                         onConfirm={handleConfirmPrompt}
+                        onCancel={dismissPopover}
                         isMedia={state.urlIsMedia}
                     />
                     : null}
diff --git a/src/components/UrlPopover.tsx b/src/components/UrlPopover.tsx
index 0d5b78f..0ce9e98 100644
--- a/src/components/UrlPopover.tsx
+++ b/src/components/UrlPopover.tsx
@@ -31,6 +31,7 @@ interface IUrlPopoverStateProps extends WithStyles<typeof styles> {
     data?: TUrlData
     isMedia?: boolean
     onConfirm: (isMedia?: boolean, ...args: any) => void
+    onCancel: () => void
 }
 
 const styles = ({ spacing }: Theme) => createStyles({
@@ -69,6 +70,7 @@ const UrlPopover: FunctionComponent<IUrlPopoverStateProps> = (props) => {
     return (
         <Popover
             open={props.anchor !== undefined}
+            onClose={props.onCancel}
             anchorEl={props.anchor}
             anchorOrigin={{
                 vertical: "bottom",

From 08bb9182f1045419fe2df21c95132e0ad85b3d05 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Tue, 26 Apr 2022 11:28:39 -0400
Subject: [PATCH 5/9] 288 - async autocomplete fetch

---
 examples/autocomplete-async/index.tsx | 124 ++++++++++++++++++++++++++
 examples/main.tsx                     |   2 +
 index.d.ts                            |   4 +-
 src/MUIRichTextEditor.tsx             |  35 ++++++--
 4 files changed, 159 insertions(+), 6 deletions(-)
 create mode 100644 examples/autocomplete-async/index.tsx

diff --git a/examples/autocomplete-async/index.tsx b/examples/autocomplete-async/index.tsx
new file mode 100644
index 0000000..07ca5d7
--- /dev/null
+++ b/examples/autocomplete-async/index.tsx
@@ -0,0 +1,124 @@
+import React, { FunctionComponent } from 'react'
+import ListItemText from '@mui/material/ListItemText'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import Avatar from '@mui/material/Avatar'
+import MUIRichTextEditor, { TAutocompleteItem } from '../../'
+
+const save = (data: string) => {
+    console.log(data)
+}
+
+type TStaff = {
+    avatar: string
+    name: string
+}
+
+const Staff: FunctionComponent<TStaff> = (props) => {
+    return (
+        <>
+            <ListItemAvatar>
+                <Avatar src={props.avatar}>{props.name.substr(0, 1)}</Avatar>
+            </ListItemAvatar>
+            <ListItemText
+                primary={props.name}
+            />
+        </>
+    )
+}
+
+const emojis: TAutocompleteItem[] = [
+    {
+        keys: ["face", "grin"],
+        value: "😀",
+        content: "😀",
+    },
+    {
+        keys: ["face", "beaming"],
+        value: "😁",
+        content: "😁",
+    },
+    {
+        keys: ["face", "joy"],
+        value: "😂",
+        content: "😂",
+    },
+    {
+        keys: ["face", "grin", "big"],
+        value: "😃",
+        content: "😃",
+    },
+    {
+        keys: ["face", "grin", "smile"],
+        value: "😄",
+        content: "😄",
+    },
+    {
+        keys: ["face", "sweat"],
+        value: "😅",
+        content: "😅",
+    }
+]
+
+const cities: TAutocompleteItem[] = [
+    {
+        keys: ["mexico"],
+        value: "Mexico City",
+        content: "Mexico City",
+    },
+    {
+        keys: ["mexico", "beach"],
+        value: "Cancun",
+        content: "Cancun",
+    },
+    {
+        keys: ["japan", "olympics"],
+        value: "Tokyo",
+        content: "Tokyo",
+    },
+    {
+        keys: ["japan"],
+        value: "Osaka",
+        content: "Osaka",
+    }
+]
+
+const searchUsers = async (query: string): Promise<TAutocompleteItem[]> => {
+    let response = await fetch(`https://reqres.in/api/users?page=${query.length - 2}`);
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const json = await response.json();
+    return json.data!.map((u:any) => {return {
+        keys: [u.email, u.first_name, u.last_name],
+        value: `${u.first_name}`,
+        content: <Staff name={`${u.first_name} ${u.last_name}`} avatar={u.avatar} />,
+    }});
+};
+
+const Autocomplete = () => {
+    return (
+        <MUIRichTextEditor
+            label="Try typing ':grin' or '/mexico'..."
+            onSave={save}
+            autocomplete={{
+                strategies: [
+                    {
+                        items: emojis,
+                        triggerChar: ":"
+                    },
+                    {
+                        items: cities,
+                        triggerChar: "/"
+                    },
+                    {
+                        asyncItems: searchUsers,
+                        triggerChar: "@",
+                        insertSpaceAfter: false
+                    }
+                ]
+            }}
+        />
+    )
+}
+
+export default Autocomplete
diff --git a/examples/main.tsx b/examples/main.tsx
index c402b6c..f7372d5 100644
--- a/examples/main.tsx
+++ b/examples/main.tsx
@@ -15,6 +15,7 @@ import AtomicCustomBlock from './atomic-custom-block'
 import KeyBindings from './key-bindings'
 import MaxLength from './max-length'
 import Autocomplete from './autocomplete'
+import AutocompleteAsync from './autocomplete-async'
 import AutocompleteAtomic from './autocomplete-atomic'
 import AsyncImageUpload from './async-image-upload'
 import AsyncAtomicCustomBlock from './async-atomic-custom-block'
@@ -51,6 +52,7 @@ const App = () => {
                 <button onClick={() => setSample(<KeyBindings />)}>Key Bindings</button>
                 <button onClick={() => setSample(<MaxLength />)}>Max length</button>
                 <button onClick={() => setSample(<Autocomplete />)}>Autocomplete</button>
+                <button onClick={() => setSample(<AutocompleteAsync />)}>AutocompleteAsync</button>
                 <button onClick={() => setSample(<AutocompleteAtomic />)}>Autocomplete Atomic</button>
                 <div style={{
                     margin: "20px 0"
diff --git a/index.d.ts b/index.d.ts
index f6b48b2..aab4e82 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -81,8 +81,9 @@ export declare type TDecorator = {
     regex: RegExp;
 };
 export declare type TAutocompleteStrategy = {
+    asyncItems?: (search: string) => Promise<TAutocompleteItem[]>
     triggerChar: string;
-    items: TAutocompleteItem[];
+    items?: TAutocompleteItem[];
     insertSpaceAfter?: boolean;
     atomicBlockName?: string;
 };
@@ -97,6 +98,7 @@ export declare type TAsyncAtomicBlockResponse = {
 export declare type TMUIRichTextEditorRef = {
     focus: () => void;
     save: () => void;
+    insertText: (text: string) => void;
     /**
      * @deprecated Use `insertAtomicBlockSync` instead.
      */
diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index bd88267..a61587d 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -28,8 +28,9 @@ export type TDecorator = {
 }
 
 export type TAutocompleteStrategy = {
+    asyncItems?: (search: string) => Promise<TAutocompleteItem[]>
     triggerChar: string
-    items: TAutocompleteItem[]
+    items?: TAutocompleteItem[]
     insertSpaceAfter?: boolean
     atomicBlockName?: string
 }
@@ -263,6 +264,7 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
     const editorId = props.id || "mui-rte"
     const toolbarPositionRef = useRef<TPosition | undefined>(undefined)
     const editorStateRef = useRef<EditorState | null>(editorState)
+    const [autocompleteItems, setAutocompleteItems] = useState<TAutocompleteItem[]>([])
     const autocompleteRef = useRef<TAutocompleteStrategy | undefined>(undefined)
     const autocompleteSelectionStateRef = useRef<SelectionState | undefined>(undefined)
     const autocompletePositionRef = useRef<TPosition | undefined>(undefined)
@@ -295,7 +297,10 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
         },
         insertAtomicBlockAsync: (name: string, promise: Promise<TAsyncAtomicBlockResponse>, placeholder?: string) => {
             handleInsertAtomicBlockAsync(name, promise, placeholder)
-        }
+        },
+        insertText: (text: string) => {
+            handleInsertText(text)
+        },
     }))
 
     useEffect(() => {
@@ -321,6 +326,8 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
     useEffect(() => {
         if (searchTerm.length < autocompleteMinSearchCharCount) {
             setSelectedIndex(0)
+        } else if (autocompleteRef.current?.asyncItems !== undefined) {
+            autocompleteRef.current?.asyncItems(searchTerm).then((items: TAutocompleteItem[]) => setAutocompleteItems(items));
         }
     }, [searchTerm])
 
@@ -473,9 +480,13 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
         if (searchTerm.length < autocompleteMinSearchCharCount) {
             return []
         }
-        return autocompleteRef.current!.items
-            .filter(item => (item.keys.filter(key => key.includes(searchTerm)).length > 0))
-            .splice(0, autocompleteLimit)
+        if (autocompleteRef.current?.items !== undefined) {
+            return autocompleteRef.current!.items
+                .filter(item => (item.keys.filter(key => key.includes(searchTerm)).length > 0))
+                .splice(0, autocompleteLimit)
+        } else {
+            return autocompleteItems;
+        }
     }
 
     const handleChange = (state: EditorState) => {
@@ -563,6 +574,20 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
         }
     }
 
+    const handleInsertText = (text: string) => {
+        const currentContent = editorStateRef.current!.getCurrentContent()
+        const currentSelection = editorStateRef.current!.getSelection();
+
+        const newContent = Modifier.replaceText(
+            currentContent,
+            currentSelection,
+            text
+        );
+
+        const newEditorState = EditorState.push(editorState, newContent, 'insert-characters');
+        handleChange(EditorState.forceSelection(newEditorState, newContent.getSelectionAfter()));
+    };
+
     const handleInsertAtomicBlockSync = (name: string, data: any) => {
         const block = atomicBlockExists(name, props.customControls)
         if (!block) {

From d9dfb441ca75e24e2cc2c865ff2dd18c24ea74f2 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Thu, 28 Apr 2022 12:14:21 -0400
Subject: [PATCH 6/9] 262 - styling and login for multilevel lists

---
 src/MUIRichTextEditor.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index a61587d..6d5b62e 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -151,7 +151,24 @@ const styles = (theme: Theme & TMUIRichTextEditorStyles) => createStyles({
         margin: theme.spacing(1, 0, 0, 0),
         cursor: "text",
         width: "100%",
-        padding: theme.spacing(0, 0, 1, 0)
+        padding: theme.spacing(0, 0, 1, 0),
+        '& .public-DraftStyleDefault-ltr': {direction: 'ltr', textAlign: 'left'},
+        '& .public-DraftStyleDefault-rtl': {direction :'rtl', textAlign: 'right'},
+        '& .public-DraftStyleDefault-listLTR': {direction: 'ltr'},
+        '& .public-DraftStyleDefault-listRTL': {direction: 'rtl'},
+        '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR': {marginLeft: '1.5em'},
+        '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR': {marginLeft: '3em'},
+        '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR': {marginLeft: '4.5em'},
+        '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR': {marginLeft: '6em'},
+        '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR': {marginLeft: '7.5em'},
+        '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL': {marginRight: '1.5em'},
+        '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL': {marginRight: '3em'},
+        '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL': {marginRight: '4.5em'},
+        '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL': {marginRight: '6em'},
+        '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL': {marginRight: '7.5em'},
+        '& .public-DraftStyleDefault-unorderedListItem': {listStyleType: 'square', position: 'relative'},
+        '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0': {listStyleType: 'disc'},
+        '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1': {listStyleType: 'circle'}
     },
     editorReadOnly: theme?.overrides?.MUIRichTextEditor?.editorReadOnly || {
         borderBottom: "none"
@@ -665,6 +682,11 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
         return "not-handled"
     }
 
+    const onTab = (event: any) => {
+        const maxDepth = 4;
+        handleChange(RichUtils.onTab(event, editorState, maxDepth));
+    };
+
     const handleCustomClick = (style: any, id: string) => {
         if (!props.customControls) {
             return
@@ -1152,6 +1174,7 @@ const MUIRichTextEditor: ForwardRefRenderFunction<TMUIRichTextEditorRef, IMUIRic
                             editorState={editorState}
                             onChange={handleChange}
                             onFocus={handleEditorFocus}
+                            onTab={onTab}
                             readOnly={props.readOnly}
                             handleKeyCommand={handleKeyCommand}
                             handleBeforeInput={handleBeforeInput}

From cb99c8c4609b79140a310a705c474517b1bebf68 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Thu, 28 Apr 2022 12:42:20 -0400
Subject: [PATCH 7/9] moved styling

---
 src/MUIRichTextEditor.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 6d5b62e..492595d 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -146,12 +146,7 @@ const styles = (theme: Theme & TMUIRichTextEditorStyles) => createStyles({
     inheritFontSize: theme?.overrides?.MUIRichTextEditor?.inheritFontSize || {
         fontSize: "inherit"
     },
-    editor: theme?.overrides?.MUIRichTextEditor?.editor || {},
-    editorContainer: theme?.overrides?.MUIRichTextEditor?.editorContainer || {
-        margin: theme.spacing(1, 0, 0, 0),
-        cursor: "text",
-        width: "100%",
-        padding: theme.spacing(0, 0, 1, 0),
+    editor: theme?.overrides?.MUIRichTextEditor?.editor || {
         '& .public-DraftStyleDefault-ltr': {direction: 'ltr', textAlign: 'left'},
         '& .public-DraftStyleDefault-rtl': {direction :'rtl', textAlign: 'right'},
         '& .public-DraftStyleDefault-listLTR': {direction: 'ltr'},
@@ -170,6 +165,12 @@ const styles = (theme: Theme & TMUIRichTextEditorStyles) => createStyles({
         '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0': {listStyleType: 'disc'},
         '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1': {listStyleType: 'circle'}
     },
+    editorContainer: theme?.overrides?.MUIRichTextEditor?.editorContainer || {
+        margin: theme.spacing(1, 0, 0, 0),
+        cursor: "text",
+        width: "100%",
+        padding: theme.spacing(0, 0, 1, 0)
+    },
     editorReadOnly: theme?.overrides?.MUIRichTextEditor?.editorReadOnly || {
         borderBottom: "none"
     },

From 9572df96ab05cf7aefbdc815477b4716e1fafe6f Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Thu, 28 Apr 2022 17:10:35 -0400
Subject: [PATCH 8/9] list styling

---
 src/MUIRichTextEditor.tsx | 53 ++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
index 492595d..3aa8ffe 100644
--- a/src/MUIRichTextEditor.tsx
+++ b/src/MUIRichTextEditor.tsx
@@ -132,6 +132,41 @@ interface TMUIRichTextEditorStyles {
     }
 }
 
+// styling for multilevel (tabbed) lists from draft-js
+const listStyles = {
+    '& .public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul': {margin: '16px 0', padding: 0},
+    '& .public-DraftStyleDefault-ltr': {direction: 'ltr', textAlign: 'left'},
+    '& .public-DraftStyleDefault-rtl': {direction :'rtl', textAlign: 'right'},
+    '& .public-DraftStyleDefault-listLTR': {direction: 'ltr'},
+    '& .public-DraftStyleDefault-listRTL': {direction: 'rtl'},
+    '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR': {marginLeft: '1.5em'},
+    '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR': {marginLeft: '3em'},
+    '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR': {marginLeft: '4.5em'},
+    '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR': {marginLeft: '6em'},
+    '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR': {marginLeft: '7.5em'},
+    '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL': {marginRight: '1.5em'},
+    '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL': {marginRight: '3em'},
+    '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL': {marginRight: '4.5em'},
+    '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL': {marginRight: '6em'},
+    '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL': {marginRight: '7.5em'},
+    '& .public-DraftStyleDefault-unorderedListItem': {listStyleType: 'square', position: 'relative'},
+    '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0': {listStyleType: 'disc'},
+    '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1': {listStyleType: 'circle'},
+    '& .public-DraftStyleDefault-orderedListItem': {listStyleType: 'none', position: 'relative'},
+    '& .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before': {left: '-36px', position: 'absolute', textAlign: 'right', width: '30px'},
+    '& .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before': {position: 'absolute', right: '-36px', textAlign: 'left', width: '30px'},
+    '& .public-DraftStyleDefault-orderedListItem:before': {content: 'counter(ol0) ". "', counterIncrement: 'ol0'},
+    '& .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before': {content: 'counter(ol1,lower-alpha) ". "', counterIncrement: 'ol1'},
+    '& .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before': {content: 'counter(ol2,lower-roman) ". "', counterIncrement: 'ol2'},
+    '& .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before': {content: 'counter(ol3) ". "', counterIncrement: 'ol3'},
+    '& .public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before': {content: 'counter(ol4,lower-alpha) ". "', counterIncrement: 'ol4'},
+    '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset': {counterReset: 'ol0'},
+    '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset': {counterReset: 'ol1'},
+    '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset': {counterReset: 'ol2'},
+    '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset': {counterReset: 'ol3'},
+    '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset': {counterReset: 'ol4'},
+}
+
 const styles = (theme: Theme & TMUIRichTextEditorStyles) => createStyles({
     root: theme?.overrides?.MUIRichTextEditor?.root || {},
     container: theme?.overrides?.MUIRichTextEditor?.container || {
@@ -147,23 +182,7 @@ const styles = (theme: Theme & TMUIRichTextEditorStyles) => createStyles({
         fontSize: "inherit"
     },
     editor: theme?.overrides?.MUIRichTextEditor?.editor || {
-        '& .public-DraftStyleDefault-ltr': {direction: 'ltr', textAlign: 'left'},
-        '& .public-DraftStyleDefault-rtl': {direction :'rtl', textAlign: 'right'},
-        '& .public-DraftStyleDefault-listLTR': {direction: 'ltr'},
-        '& .public-DraftStyleDefault-listRTL': {direction: 'rtl'},
-        '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR': {marginLeft: '1.5em'},
-        '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR': {marginLeft: '3em'},
-        '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR': {marginLeft: '4.5em'},
-        '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR': {marginLeft: '6em'},
-        '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR': {marginLeft: '7.5em'},
-        '& .public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL': {marginRight: '1.5em'},
-        '& .public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL': {marginRight: '3em'},
-        '& .public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL': {marginRight: '4.5em'},
-        '& .public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL': {marginRight: '6em'},
-        '& .public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL': {marginRight: '7.5em'},
-        '& .public-DraftStyleDefault-unorderedListItem': {listStyleType: 'square', position: 'relative'},
-        '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0': {listStyleType: 'disc'},
-        '& .public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1': {listStyleType: 'circle'}
+        ...listStyles
     },
     editorContainer: theme?.overrides?.MUIRichTextEditor?.editorContainer || {
         margin: theme.spacing(1, 0, 0, 0),

From ed94a90df584ed43c2483758529ddd14a43ae098 Mon Sep 17 00:00:00 2001
From: Andrew Harari <andrew@tetra.team>
Date: Thu, 28 Apr 2022 17:14:06 -0400
Subject: [PATCH 9/9] formatting

---
 src/components/ToolbarButton.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
index 30fca14..be82636 100644
--- a/src/components/ToolbarButton.tsx
+++ b/src/components/ToolbarButton.tsx
@@ -35,15 +35,14 @@ const ToolbarButton: FunctionComponent<IToolbarButtonProps> = (props) => {
     if (props.icon) {
         return (
             <Tooltip title={props.label}>
-
-            <IconButton
-                {...sharedProps}
-                aria-label={props.label}
-                color={props.active ? "primary" : "default"}
-                size={size}
-            >
-                {props.icon}
-            </IconButton>
+                <IconButton
+                    {...sharedProps}
+                    aria-label={props.label}
+                    color={props.active ? "primary" : "default"}
+                    size={size}
+                >
+                    {props.icon}
+                </IconButton>
             </Tooltip>
         )
     }