From a70d1009a3d8d6be1395bf148a46c3cb2260dcdc Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 6 Dec 2022 21:56:05 -0600
Subject: [PATCH] feat: add Indent/Outdent options in Super when on mobile

---
 .../BlockPickerPlugin/BlockPickerPlugin.tsx     |  8 +++++++-
 .../BlockPickerPlugin/Blocks/IndentOutdent.tsx  | 17 +++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/IndentOutdent.tsx

diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
index 679d97c57..5d875debe 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
@@ -23,9 +23,12 @@ import Popover from '@/Components/Popover/Popover'
 import { PopoverClassNames } from '../ClassNames'
 import { GetDatetimeBlocks } from './Blocks/DateTime'
 import { isMobileScreen } from '@/Utils'
+import { useApplication } from '@/Components/ApplicationProvider'
+import { GetIndentOutdentBlocks } from './Blocks/IndentOutdent'
 
 export default function BlockPickerMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
+  const application = useApplication()
   const [modal, showModal] = useModal()
   const [queryString, setQueryString] = useState<string | null>(null)
 
@@ -36,9 +39,12 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
   const [popoverOpen, setPopoverOpen] = useState(true)
 
   const options = useMemo(() => {
+    const indentOutdentOptions = application.isNativeMobileWeb() ? GetIndentOutdentBlocks(editor) : []
+
     const baseOptions = [
       GetParagraphBlock(editor),
       ...GetHeadingsBlocks(editor),
+      ...indentOutdentOptions,
       GetTableBlock(() =>
         showModal('Insert Table', (onClose) => <InsertTableDialog activeEditor={editor} onClose={onClose} />),
       ),
@@ -70,7 +76,7 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
           }),
         ]
       : baseOptions
-  }, [editor, queryString, showModal])
+  }, [editor, queryString, showModal, application])
 
   const onSelectOption = useCallback(
     (
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/IndentOutdent.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/IndentOutdent.tsx
new file mode 100644
index 000000000..b5a26fcdb
--- /dev/null
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/IndentOutdent.tsx
@@ -0,0 +1,17 @@
+import { BlockPickerOption } from '../BlockPickerOption'
+import { INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, LexicalEditor } from 'lexical'
+
+export function GetIndentOutdentBlocks(editor: LexicalEditor) {
+  return [
+    new BlockPickerOption('Indent', {
+      iconName: 'arrow-right',
+      keywords: ['indent'],
+      onSelect: () => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined),
+    }),
+    new BlockPickerOption('Outdent', {
+      iconName: 'arrow-left',
+      keywords: ['outdent'],
+      onSelect: () => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined),
+    }),
+  ]
+}