From f2a4ccd21329ca0ec3b913d390828f7b4e2ac1b4 Mon Sep 17 00:00:00 2001
From: Dinesh Singh <dinesh@workduck.io>
Date: Sat, 6 May 2023 22:50:39 +0530
Subject: [PATCH 1/5] Move Blocks In Views, Add New Block In View

---
 apps/webapp/src/App.tsx                       |   7 +-
 .../CreateTodoModal/TaskEditor/styled.tsx     |  11 +-
 .../src/Components/Editor/Banner/styled.tsx   |   7 +
 .../src/Components/Editor/ContentEditor.tsx   |  23 ++-
 .../FleetContainer/useOnNewItem.tsx           |  29 ++--
 apps/webapp/src/Components/Modals.tsx         |   7 +-
 .../src/Components/Modals/CreateTodoModal.tsx | 129 +++++++++++++--
 .../Modals/DeleteSpaceModal/index.tsx         |  10 +-
 .../src/Components/PreviewNoteModal/index.tsx |  20 ++-
 .../src/Components/Refactor/DeleteModal.tsx   |   1 -
 apps/webapp/src/Components/TaskHeader.tsx     |  41 +++++
 .../src/Components/Todo/PrioritySelect.tsx    |   3 +-
 apps/webapp/src/Components/Todo/Todo.tsx      |   7 +-
 .../Views/ViewRenderer/KanbanView.tsx         | 153 +++++++++++++-----
 .../src/Editor/Components/Combobox/index.tsx  |   9 +-
 .../MultiCombobox/useMultiComboboxChange.ts   |   1 -
 .../webapp/src/Editor/Hooks/useUpdateBlock.ts |  57 +++++--
 apps/webapp/src/Hooks/API/useNodeAPI.ts       |  27 +++-
 apps/webapp/src/Hooks/todo/useTodoKanban.ts   |  22 ++-
 apps/webapp/src/Hooks/useOnUnload.ts          |   3 +
 apps/webapp/src/Hooks/useSearch.ts            |   8 +
 apps/webapp/src/Utils/convertValueToTasks.ts  |  20 ++-
 apps/webapp/src/Views/ViewPage/index.tsx      |   9 ++
 apps/webapp/src/Workers/controller.ts         |  10 ++
 apps/webapp/src/Workers/search.ts             |  20 ++-
 libs/core/src/API/Node.ts                     |   4 +
 libs/core/src/Stores/buffer.store.ts          |   2 +-
 libs/core/src/Stores/content.store.ts         |   2 +-
 libs/core/src/Stores/todo.store.ts            |  27 +++-
 libs/core/src/Types/Search.ts                 |   8 +
 libs/core/src/Utils/dataTransform.ts          |   2 +
 libs/core/src/Utils/routes.ts                 |   1 +
 .../src/Components/AIPreview/styled.tsx       |   2 +-
 .../FloatingElements/Dropdown.style.tsx       |   4 +-
 .../Components/FloatingElements/Dropdown.tsx  |  12 ++
 libs/shared/src/Components/Icons.tsx          |   2 +-
 libs/shared/src/Components/InsertMenu.tsx     |  42 ++++-
 37 files changed, 607 insertions(+), 135 deletions(-)

diff --git a/apps/webapp/src/App.tsx b/apps/webapp/src/App.tsx
index 4f32e64b8..a8e21933f 100644
--- a/apps/webapp/src/App.tsx
+++ b/apps/webapp/src/App.tsx
@@ -13,6 +13,7 @@ import FloatingButton from './Components/FloatingButton'
 import Init from './Components/Init'
 import Main from './Components/Main'
 import Modals from './Components/Modals'
+import { createViewFilterStore, ViewFilterProvider } from './Hooks/todo/useTodoFilters'
 import { useForceLogout } from './Stores/useAuth'
 import GlobalStyle from './Style/GlobalStyle'
 import Switch from './Switch'
@@ -38,8 +39,10 @@ const AutoThemeSwitch = () => {
 const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <Provider legacySupport={false}>
-      <AutoThemeSwitch />
-      {children}
+      <ViewFilterProvider createStore={createViewFilterStore}>
+        <AutoThemeSwitch />
+        {children}
+      </ViewFilterProvider>
     </Provider>
   )
 }
diff --git a/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx b/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx
index 3ff8b4d9d..9fe0c4039 100644
--- a/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx
+++ b/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx
@@ -4,8 +4,14 @@ import { CheckBoxWrapper, EditorStyles } from '@mexit/shared'
 
 import { ModalSection } from '../../../Style/Refactor'
 
-export const TaskEditorWrapper = styled.section`
-  padding: ${({ theme }) => theme.spacing.small};
+export const TaskEditorWrapper = styled.section<{ withMaxHeight?: boolean }>`
+  padding: ${({ theme }) => theme.spacing.medium};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  background: ${({ theme }) => theme.tokens.surfaces.app};
+  margin: ${({ theme }) => theme.spacing.large} 0;
+  ${({ withMaxHeight }) => withMaxHeight && `height: 22vh;`}
+  max-height: 24vh;
+  overflow: hidden auto;
 `
 
 export const TaskEditorStyle = styled(EditorStyles)`
@@ -20,6 +26,7 @@ export const TaskEditorStyle = styled(EditorStyles)`
 
 export const ScrollableModalSection = styled(ModalSection)`
   width: 40vw;
+  min-width: 600px;
   max-height: 50vh;
 
   ${CheckBoxWrapper} {
diff --git a/apps/webapp/src/Components/Editor/Banner/styled.tsx b/apps/webapp/src/Components/Editor/Banner/styled.tsx
index 0958ff17d..46a2f2a5e 100644
--- a/apps/webapp/src/Components/Editor/Banner/styled.tsx
+++ b/apps/webapp/src/Components/Editor/Banner/styled.tsx
@@ -15,3 +15,10 @@ export const Group = styled.span`
   align-items: center;
   gap: ${({ theme }) => theme.spacing.small};
 `
+
+export const MediaGroup = styled(Group)`
+  @media (max-width: 1000px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`
diff --git a/apps/webapp/src/Components/Editor/ContentEditor.tsx b/apps/webapp/src/Components/Editor/ContentEditor.tsx
index 0e50af7a3..126bf4916 100644
--- a/apps/webapp/src/Components/Editor/ContentEditor.tsx
+++ b/apps/webapp/src/Components/Editor/ContentEditor.tsx
@@ -21,7 +21,6 @@ import { EditorWrapper, isOnEditableElement } from '@mexit/shared'
 
 import { useComboboxOpen } from '../../Editor/Hooks/useComboboxOpen'
 import { useApi } from '../../Hooks/API/useNodeAPI'
-import { createViewFilterStore, ViewFilterProvider } from '../../Hooks/todo/useTodoFilters'
 import { useKeyListener } from '../../Hooks/useChangeShortcutListener'
 import { useComments } from '../../Hooks/useComments'
 import { useBufferStore, useEditorBuffer } from '../../Hooks/useEditorBuffer'
@@ -169,18 +168,16 @@ const ContentEditor = () => {
 
   return (
     <EditorWrapper comboboxOpen={isComboOpen} isUserEditing={isUserEditing} ref={editorWrapperRef}>
-      <ViewFilterProvider createStore={createViewFilterStore}>
-        <Editor
-          onAutoSave={onAutoSave}
-          onFocusClick={onFocusClick}
-          includeBlockInfo={true}
-          onChange={onChangeSave}
-          content={nodeContent}
-          nodeUID={nodeid}
-          readOnly={viewOnly}
-          autoFocus={false}
-        />
-      </ViewFilterProvider>
+      <Editor
+        onAutoSave={onAutoSave}
+        onFocusClick={onFocusClick}
+        includeBlockInfo={true}
+        onChange={onChangeSave}
+        content={nodeContent}
+        nodeUID={nodeid}
+        readOnly={viewOnly}
+        autoFocus={false}
+      />
     </EditorWrapper>
   )
 }
diff --git a/apps/webapp/src/Components/FleetContainer/useOnNewItem.tsx b/apps/webapp/src/Components/FleetContainer/useOnNewItem.tsx
index c2a07a7e6..42c3a3006 100644
--- a/apps/webapp/src/Components/FleetContainer/useOnNewItem.tsx
+++ b/apps/webapp/src/Components/FleetContainer/useOnNewItem.tsx
@@ -27,13 +27,6 @@ import { useSnippets } from '../../Hooks/useSnippets'
 import { useTaskFromSelection } from '../../Hooks/useTaskFromSelection'
 
 export const useOnNewItem = () => {
-  const ICONS = {
-    snippet: 'ri:quill-pen-line',
-    note: 'ri:file-list-2-line',
-    space: 'heroicons-outline:view-grid',
-    todo: 'ri:task-line'
-  }
-
   const loadSnippet = useSnippetStore((store) => store.loadSnippet)
   const changeSpace = useUserPreferenceStore((store) => store.setActiveNamespace)
 
@@ -66,6 +59,12 @@ export const useOnNewItem = () => {
     openModal(ModalsType.todo, todo)
   }
 
+  const onNewContent = () => {
+    openModal(ModalsType.todo, {
+      type: 'content'
+    })
+  }
+
   const onNewSnippet = () => {
     const snippetId = generateSnippetId()
     const snippetName = generateName().dashed
@@ -107,12 +106,12 @@ export const useOnNewItem = () => {
       })
   }
 
-  const getQuickNewItems = () => {
+  const getQuickNewItems = (withMIcon = false) => {
     const data = {
       note: {
         id: 0,
         name: 'New Note',
-        icon: ICONS.note,
+        icon: withMIcon ? DefaultMIcons.NOTE : DefaultMIcons.NOTE.value,
         onSelect: () => {
           const activeNamesapce = useUserPreferenceStore.getState().activeNamespace
           const spaceId = activeNamesapce ?? getDefaultNamespaceId()
@@ -123,20 +122,26 @@ export const useOnNewItem = () => {
       space: {
         id: 1,
         name: 'New Space',
-        icon: ICONS.space,
+        icon: withMIcon ? DefaultMIcons.SPACE : DefaultMIcons.SPACE.value,
         onSelect: onNewSpace
       },
       task: {
         id: 2,
         name: 'New Task',
-        icon: ICONS.todo,
+        icon: withMIcon ? DefaultMIcons.TASK : DefaultMIcons.TASK.value,
         onSelect: onNewTask
       },
       snippet: {
         id: 3,
         name: 'New Snippet',
-        icon: ICONS.snippet,
+        icon: withMIcon ? DefaultMIcons.SNIPPET : DefaultMIcons.SNIPPET.value,
         onSelect: onNewSnippet
+      },
+      content: {
+        id: 4,
+        name: 'New Content',
+        icon: withMIcon ? DefaultMIcons.TEXT : DefaultMIcons.TEXT.value,
+        onSelect: onNewContent
       }
     }
 
diff --git a/apps/webapp/src/Components/Modals.tsx b/apps/webapp/src/Components/Modals.tsx
index 8ad8031da..a007aaff0 100644
--- a/apps/webapp/src/Components/Modals.tsx
+++ b/apps/webapp/src/Components/Modals.tsx
@@ -4,11 +4,10 @@ import BlockModal from '../Editor/Components/Blocks/BlockModal'
 import HelpModal from '../Views/HelpModal'
 
 import ShareModal from './Mentions/ShareModal'
-import CreateTodoModal from './Modals/CreateTodoModal'
+import CreateTodoModal, { CreateNewSection } from './Modals/CreateTodoModal'
 import DeleteSpaceModal from './Modals/DeleteSpaceModal'
 import Lookup from './Modals/Lookup'
 import MangeSpacesModal from './Modals/ManageSpacesModal'
-// import Refactor from './Refactor'
 import Delete from './Refactor/DeleteModal'
 import CreateReminderModal from './Reminders/CreateReminderModal'
 import TemplateModal from './Template/TemplateModal'
@@ -28,7 +27,9 @@ const Modals = () => {
       <BlockModal />
       <ShareModal />
       <CreateReminderModal />
-      <CreateTodoModal />
+      <CreateTodoModal>
+        <CreateNewSection />
+      </CreateTodoModal>
       <TaskViewModal />
       <PreviewNoteModal />
       <MangeSpacesModal />
diff --git a/apps/webapp/src/Components/Modals/CreateTodoModal.tsx b/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
index 9146ba379..36a72a077 100644
--- a/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
+++ b/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
@@ -3,25 +3,36 @@ import toast from 'react-hot-toast'
 import Modal from 'react-modal'
 
 import { getPlateEditorRef, PlateProvider } from '@udecode/plate'
+import { useTheme } from 'styled-components'
 
 import { Button, DisplayShortcut, LoadingButton } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { ModalsType, mog, useModalStore } from '@mexit/core'
+import { getDefaultContent, ModalsType, mog, useModalStore } from '@mexit/core'
+import { DefaultMIcons, IconDisplay, InsertMenu, PrimaryText } from '@mexit/shared'
 
 import useUpdateBlock from '../../Editor/Hooks/useUpdateBlock'
 import { useApi } from '../../Hooks/API/useNodeAPI'
-import { ModalControls, ModalHeader } from '../../Style/Refactor'
+import { useCreateNewNote } from '../../Hooks/useCreateNewNote'
+import { ModalControls } from '../../Style/Refactor'
 import TaskEditor from '../CreateTodoModal/TaskEditor'
 import { ScrollableModalSection, TaskEditorWrapper } from '../CreateTodoModal/TaskEditor/styled'
+import { Group } from '../Editor/Banner/styled'
+import Editor from '../Editor/Editor'
 
-const CreateTodoModal = () => {
+import { DeletionWarning, Header, Title } from './DeleteSpaceModal/styled'
+
+const CreateTodoModal = ({ children }) => {
   const isOpen = useModalStore((store) => store.open === ModalsType.todo)
   const setOpen = useModalStore((store) => store.toggleOpen)
+  const data = useModalStore((store) => store.data)
   const { addBlockInContent } = useUpdateBlock()
   const setModalData = useModalStore((store) => store.setData)
   const [isLoading, setIsLoading] = useState<boolean>(false)
+  const { createNewNote } = useCreateNewNote()
   const { appendToNode } = useApi()
+  const theme = useTheme()
+  const [selectedNoteId, setSelectedNoteId] = useState<string | undefined>()
 
   const onCreateTask = async () => {
     setIsLoading(true)
@@ -31,8 +42,9 @@ const CreateTodoModal = () => {
     if (openedTodo) {
       try {
         if (todoBlock) {
-          await appendToNode(openedTodo.nodeid, todoBlock)
-          addBlockInContent(openedTodo.nodeid, todoBlock)
+          const noteId = selectedNoteId || openedTodo.nodeid
+          await appendToNode(noteId, todoBlock)
+          addBlockInContent(noteId, todoBlock)
           toast('Task created!')
         }
       } catch (err) {
@@ -45,9 +57,45 @@ const CreateTodoModal = () => {
     }
   }
 
+  const onCreateContent = async () => {
+    setIsLoading(true)
+
+    const content = getPlateEditorRef()?.children
+    try {
+      if (content) {
+        const noteId = selectedNoteId || ''
+        if (selectedNoteId) {
+          await appendToNode(noteId, content)
+          addBlockInContent(noteId, content)
+        } else {
+          createNewNote({
+            noteContent: content,
+            noRedirect: true
+          })
+        }
+        toast('Added Content!')
+      }
+    } catch (err) {
+      toast('Error occured while creating Task')
+      mog('Error occured while creating Task', { err })
+    } finally {
+      setIsLoading(false)
+      setOpen(undefined)
+    }
+  }
+
+  const handleCreate = () => {
+    if (data?.type === 'content') {
+      onCreateContent()
+    } else {
+      onCreateTask()
+    }
+  }
+
   useEffect(() => {
     if (!isOpen) {
       setModalData(undefined)
+      setSelectedNoteId(null)
     }
   }, [isOpen])
 
@@ -77,16 +125,55 @@ const CreateTodoModal = () => {
     setOpen(undefined)
   }
 
+  const isContent = data?.type === 'content'
+  const description = !isContent
+    ? 'By default, new Task is added to Daily Tasks. You can select a different type of note from the menu if you prefer.'
+    : 'By defautl, new Content is saved as Drafts. You can select a different type of note from the menu if you prefer.'
+
   return (
     <Modal
+      shouldFocusAfterRender
+      shouldCloseOnEsc={false}
+      shouldReturnFocusAfterClose
       className={'ModalContentSplit'}
       overlayClassName="ModalOverlay"
       onRequestClose={onRequestClose}
       isOpen={isOpen}
     >
-      <ScrollableModalSection>
-        <ModalHeader>New Task</ModalHeader>
-        <NewTodoSection />
+      <ScrollableModalSection id="menu-wrapper">
+        <Header>
+          <Group>
+            <Title>
+              Add a new&nbsp;
+              <Group>
+                <IconDisplay
+                  icon={isContent ? DefaultMIcons.TEXT : DefaultMIcons.TASK}
+                  size={28}
+                  color={theme.tokens.colors.primary.default}
+                />{' '}
+                <PrimaryText>{isContent ? 'Content' : 'Task'}</PrimaryText>
+              </Group>{' '}
+              ?
+            </Title>
+          </Group>
+        </Header>
+        <DeletionWarning>
+          <Group>
+            <span>{description}</span>
+            <InsertMenu
+              type="modal"
+              initialFocus={false}
+              title="Select Note"
+              selected={selectedNoteId}
+              isMenu
+              onClick={(noteId: string) => {
+                setSelectedNoteId(noteId)
+              }}
+            />
+          </Group>
+        </DeletionWarning>
+        {children}
+
         <ModalControls>
           <Button large onClick={onRequestClose}>
             Cancel
@@ -94,10 +181,9 @@ const CreateTodoModal = () => {
           <LoadingButton
             style={{ marginLeft: '1rem' }}
             primary
-            autoFocus={true}
             large
             loading={isLoading}
-            onClick={onCreateTask}
+            onClick={handleCreate}
             disabled={false}
           >
             Add <DisplayShortcut shortcut={'$mod+Enter'} />
@@ -108,6 +194,29 @@ const CreateTodoModal = () => {
   )
 }
 
+export const CreateNewSection = () => {
+  const data = useModalStore((store) => store.data)
+
+  switch (data?.type) {
+    case 'content':
+      return <NewContentSection />
+    default:
+      return <NewTodoSection />
+  }
+}
+
+const NewContentSection = () => {
+  const content = [getDefaultContent()]
+
+  return (
+    <TaskEditorWrapper withMaxHeight>
+      <PlateProvider id="NODE_EDITOR">
+        <Editor includeBlockInfo={false} content={content} nodeUID="NODE_EDITOR" />
+      </PlateProvider>
+    </TaskEditorWrapper>
+  )
+}
+
 const NewTodoSection = () => {
   const todo = useModalStore((store) => store.data)
 
diff --git a/apps/webapp/src/Components/Modals/DeleteSpaceModal/index.tsx b/apps/webapp/src/Components/Modals/DeleteSpaceModal/index.tsx
index 1ef87cad9..bef6e7b90 100644
--- a/apps/webapp/src/Components/Modals/DeleteSpaceModal/index.tsx
+++ b/apps/webapp/src/Components/Modals/DeleteSpaceModal/index.tsx
@@ -7,7 +7,15 @@ import { useTheme } from 'styled-components'
 import { Button, DisplayShortcut, LoadingButton } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { API, DefaultMIcons, ModalsType, useDataStore, useLayoutStore , useModalStore , userPreferenceStore as useUserPreferenceStore } from '@mexit/core'
+import {
+  API,
+  DefaultMIcons,
+  ModalsType,
+  useDataStore,
+  useLayoutStore,
+  useModalStore,
+  userPreferenceStore as useUserPreferenceStore
+} from '@mexit/core'
 import { Group, IconDisplay, PrimaryText } from '@mexit/shared'
 
 import { useNamespaceApi } from '../../../Hooks/API/useNamespaceAPI'
diff --git a/apps/webapp/src/Components/PreviewNoteModal/index.tsx b/apps/webapp/src/Components/PreviewNoteModal/index.tsx
index 81e9dd7d5..c4fe47c22 100644
--- a/apps/webapp/src/Components/PreviewNoteModal/index.tsx
+++ b/apps/webapp/src/Components/PreviewNoteModal/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import Modal from 'react-modal'
 
 import closeCircleLine from '@iconify/icons-ri/close-circle-line'
@@ -7,7 +7,15 @@ import { useTheme } from 'styled-components'
 
 import { Button, MexIcon } from '@workduck-io/mex-components'
 
-import { defaultContent, ModalsType,NodeEditorContent, NodeType, useContentStore , useMetadataStore, useModalStore } from '@mexit/core'
+import {
+  defaultContent,
+  ModalsType,
+  NodeEditorContent,
+  NodeType,
+  useContentStore,
+  useMetadataStore,
+  useModalStore
+} from '@mexit/core'
 import {
   EditorContainer,
   EditorPreviewControls,
@@ -38,6 +46,7 @@ const PreviewNoteModal = () => {
   const addValueInBuffer = useBufferStore((store) => store.add)
   const getContent = useContentStore((store) => store.getContent)
   const noteMetadata = useMetadataStore((s) => s.metadata.notes[modalData?.noteId])
+  const contentStore = useContentStore((s) => s.contents[modalData?.noteId])
 
   const theme = useTheme()
   const { getNodeType, getSharedNode } = useNodes()
@@ -50,7 +59,7 @@ const PreviewNoteModal = () => {
   const content = useMemo(() => {
     const data = getContent(modalData?.noteId)
     return data?.content || defaultContent.content
-  }, [modalData])
+  }, [modalData, contentStore])
 
   const { noteTitle, noteLink } = useMemo(() => {
     return {
@@ -62,10 +71,13 @@ const PreviewNoteModal = () => {
   const { accessWhenShared } = usePermissions()
   const readOnly = useMemo(() => isReadonly(accessWhenShared(modalData?.noteId)), [modalData?.noteId])
 
+  useEffect(() => {
+    if (isOpen) saveAndClearBuffer(false)
+  }, [isOpen])
+
   if (!isOpen) return <></>
 
   const onRequestClose = () => {
-    saveAndClearBuffer(false)
     toggleModal(undefined)
   }
 
diff --git a/apps/webapp/src/Components/Refactor/DeleteModal.tsx b/apps/webapp/src/Components/Refactor/DeleteModal.tsx
index f84099a64..90b880f79 100644
--- a/apps/webapp/src/Components/Refactor/DeleteModal.tsx
+++ b/apps/webapp/src/Components/Refactor/DeleteModal.tsx
@@ -145,7 +145,6 @@ const Delete = () => {
       <WrappedNodeSelect
         autoFocusSelectAll
         autoFocus
-        // menuOpen
         disallowReserved
         defaultValue={
           del
diff --git a/apps/webapp/src/Components/TaskHeader.tsx b/apps/webapp/src/Components/TaskHeader.tsx
index 69005b0ea..f003894ed 100644
--- a/apps/webapp/src/Components/TaskHeader.tsx
+++ b/apps/webapp/src/Components/TaskHeader.tsx
@@ -11,7 +11,13 @@ import { useSingleton } from '@tippyjs/react'
 import { IconButton, LoadingButton, ToolbarTooltip } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
+import { MIcon } from '@mexit/core'
 import {
+  DefaultMIcons,
+  GenericFlex,
+  IconDisplay,
+  Menu,
+  MenuItem,
   PrimaryText,
   TaskHeader as StyledTaskHeader,
   TaskHeaderTitleSection,
@@ -25,6 +31,7 @@ import { NavigationType, ROUTE_PATHS, useRouting } from '../Hooks/useRouting'
 import { useViews } from '../Hooks/useViews'
 import { useViewStore } from '../Stores/useViewStore'
 
+import { useOnNewItem } from './FleetContainer/useOnNewItem'
 import ViewBreadcrumbs from './Views/ViewBreadcrumbs'
 import { useTaskViewModalStore } from './TaskViewModal'
 
@@ -94,6 +101,39 @@ const ViewChangeStatus = ({ viewId }) => {
   return <PrimaryText>{isCurrentViewChanged && '*'}</PrimaryText>
 }
 
+const CreateNewMenu = () => {
+  const { getQuickNewItems } = useOnNewItem()
+
+  const items = useMemo(() => {
+    const sections = getQuickNewItems(true)
+    return [sections.task, sections.content].map((item) => {
+      return {
+        ...item,
+        label: item.name,
+        id: item.id.toString()
+      }
+    })
+  }, [])
+
+  return (
+    <Menu
+      key="wd-mexit-space-selector"
+      noHover
+      border
+      values={
+        <GenericFlex>
+          <IconDisplay icon={DefaultMIcons.ADD} size={24} />
+          Add New
+        </GenericFlex>
+      }
+    >
+      {items.map((op) => {
+        return <MenuItem key={op.id} icon={op.icon as MIcon} onClick={op.onSelect} label={op.label} />
+      })}
+    </Menu>
+  )
+}
+
 const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
   const [deleting, setDeleting] = useState(false)
 
@@ -209,6 +249,7 @@ const ViewHeader = ({ cardSelected = false }: ViewHeaderProps) => {
             </TaskViewHeaderWrapper>
           )}
         </TaskHeaderTitleSection>
+        <CreateNewMenu />
       </StyledTaskHeader>
     </>
   )
diff --git a/apps/webapp/src/Components/Todo/PrioritySelect.tsx b/apps/webapp/src/Components/Todo/PrioritySelect.tsx
index ceabf083f..253c56ee4 100644
--- a/apps/webapp/src/Components/Todo/PrioritySelect.tsx
+++ b/apps/webapp/src/Components/Todo/PrioritySelect.tsx
@@ -46,6 +46,7 @@ const PrioritySelect = ({ readOnly, isVisible, value, onPriorityChange, withLabe
     <TodoActionWrapper>
       <Menu
         noHover
+        type="modal"
         noBackground
         onMouseEnter={() => setSelected(true)}
         onMouseLeave={() => setSelected(false)}
@@ -59,7 +60,7 @@ const PrioritySelect = ({ readOnly, isVisible, value, onPriorityChange, withLabe
               icon={getMIcon('ICON', priority.icon)}
               color={iconColor}
               key={priority.title}
-              onClick={() => onPriorityChangeHide(priority)}
+              onClick={(e) => onPriorityChangeHide(priority)}
               label={priority.title}
             />
           )
diff --git a/apps/webapp/src/Components/Todo/Todo.tsx b/apps/webapp/src/Components/Todo/Todo.tsx
index 7fd374aa3..c1c615d33 100644
--- a/apps/webapp/src/Components/Todo/Todo.tsx
+++ b/apps/webapp/src/Components/Todo/Todo.tsx
@@ -70,10 +70,11 @@ export const TodoBase = ({
   }, [animate])
 
   const onPriorityChange = (priority: PriorityDataType) => {
-    if (controls && controls.onChangePriority) controls.onChangePriority(todoid, priority.type, element)
-    else {
-      updatePriority(parentNodeId, todoid, priority.type)
+    if (controls && controls.onChangePriority) {
+      controls.onChangePriority(todoid, priority.type, element)
+    } else {
       element && insertInEditor(element, { priority: priority.type })
+      updatePriority(parentNodeId, todoid, priority.type)
     }
     setAnimate(true)
   }
diff --git a/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx b/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx
index 974bd8f68..f805b04ef 100644
--- a/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx
+++ b/apps/webapp/src/Components/Views/ViewRenderer/KanbanView.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-case-declarations */
 import React, { useEffect, useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
 import { useMediaQuery } from 'react-responsive'
@@ -7,11 +8,13 @@ import Board from '@asseinfo/react-kanban'
 import { get } from 'lodash'
 import { useTheme } from 'styled-components'
 
-import { Entities, SearchResult } from '@workduck-io/mex-search'
+import { Entities, Indexes, SearchResult } from '@workduck-io/mex-search'
 import { KeyBindingMap, tinykeys } from '@workduck-io/tinykeys'
 
 import {
+  ELEMENT_PARAGRAPH,
   mog,
+  MoveBlocksType,
   PriorityType,
   SEPARATOR,
   useLayoutStore,
@@ -31,6 +34,7 @@ import {
   TaskListWrapper
 } from '@mexit/shared'
 
+import useUpdateBlock from '../../../Editor/Hooks/useUpdateBlock'
 import { useViewFilterStore } from '../../../Hooks/todo/useTodoFilters'
 import { KanbanBoardColumn, useTodoKanban } from '../../../Hooks/todo/useTodoKanban'
 import { useEnableShortcutHandler } from '../../../Hooks/useChangeShortcutListener'
@@ -38,6 +42,9 @@ import useGroupHelper from '../../../Hooks/useGroupHelper'
 import { useNavigation } from '../../../Hooks/useNavigation'
 import { isReadonly, usePermissions } from '../../../Hooks/usePermissions'
 import { NavigationType, ROUTE_PATHS, useRouting } from '../../../Hooks/useRouting'
+import { useSearch } from '../../../Hooks/useSearch'
+import { convertValueToTasks } from '../../../Utils/convertValueToTasks'
+import { getBlock } from '../../../Utils/parseData'
 import ViewBlockRenderer from '../ViewBlockRenderer'
 
 /**
@@ -54,10 +61,14 @@ const KanbanView: React.FC<any> = (props) => {
   const isPreviewEditors = useMultipleEditors((store) => store.editors)
 
   const atViews = useMatch(`${ROUTE_PATHS.view}/*`)
-  const { getBlocksBoard, changeStatus, changePriority } = useTodoKanban()
+  const { getBlocksBoard, changeStatus, changePriority, moveTodo } = useTodoKanban()
 
   const { goTo } = useRouting()
   const { push } = useNavigation()
+  const { moveBlocksInIndex, updateBlocks, removeDocument } = useSearch()
+  const appendTodos = useTodoStore((store) => store.appendTodos)
+
+  const { moveBlockFromNode, insertInNote, setInfoOfBlockInContent } = useUpdateBlock()
   const { accessWhenShared } = usePermissions()
   const { enableShortcutHandler } = useEnableShortcutHandler()
   const overlaySidebar = useMediaQuery({ maxWidth: OverlaySidebarWindowWidth })
@@ -66,35 +77,119 @@ const KanbanView: React.FC<any> = (props) => {
     return getBlocksBoard(props.results)
   }, [props.results])
 
-  const handleTaskEvents = (block: SearchResult, field: string, newValue: any) => {
-    if (!block || !field || newValue === 'Ungrouped') return
+  const handleBlockEvents = (block: SearchResult, field: string, move: { fromColumnId: any; toColumnId: any }) => {
+    if (!block || !field || move.toColumnId === 'Ungrouped') return
 
-    const todoField = field?.split(SEPARATOR)?.at(-1)
+    const noteId: string = block.parent
+    const blockField = field?.split(SEPARATOR)?.at(-1)
+    const blockContent = getBlock(noteId, block.id)
+
+    if (blockContent) {
+      switch (blockField) {
+        case 'status':
+        case 'priority':
+        case 'entity':
+          const content = convertValueToTasks(
+            [blockContent],
+            blockField === 'entity'
+              ? {}
+              : {
+                  [blockField]: move.toColumnId
+                }
+          )
+
+          insertInNote(block.parent, block.id, content)
+          appendTodos(noteId, content)
+
+          removeDocument(Indexes.MAIN, block.id)
+          updateBlocks({
+            id: noteId,
+            contents: content
+          })
+          break
+
+        case 'parent':
+          const updated = moveBlockFromNode(move.fromColumnId, move.toColumnId, blockContent)
+          if (updated) {
+            const moveBlockRequest: MoveBlocksType = {
+              toNodeId: move.toColumnId,
+              fromNodeId: move.fromColumnId,
+              blockIds: [block.id],
+              indexKey: Indexes.MAIN
+            }
+            moveBlocksInIndex(moveBlockRequest)
+          }
+          break
+      }
+    }
+  }
 
-    const todo = useTodoStore.getState().getTodoOfNodeWithoutCreating(block.parent, block.id)
-    const readOnly = todo?.nodeid && isReadonly(accessWhenShared(todo?.nodeid))
+  const handleTaskEvents = (block: SearchResult, field: string, move: { fromColumnId: any; toColumnId: any }) => {
+    if (!block || !field || move.toColumnId === 'Ungrouped') return
 
-    if (todo && !readOnly) {
+    const noteId = block.parent
+    const todoField = field?.split(SEPARATOR)?.at(-1)
+    const todo = useTodoStore.getState().getTodoOfNodeWithoutCreating(noteId, block.id)
+
+    if (todo) {
       switch (todoField) {
         case 'priority':
-          changePriority(todo, newValue)
+          changePriority(todo, move.toColumnId)
           break
         case 'status':
-          changeStatus(todo, newValue)
+          changeStatus(todo, move.toColumnId)
+          break
+        case 'entity':
+          const updatedBlock = setInfoOfBlockInContent(noteId, {
+            blockId: block.id,
+            blockData: {
+              type: ELEMENT_PARAGRAPH
+            },
+            useBuffer: true
+          })
+          updateBlocks({
+            id: noteId,
+            contents: [updatedBlock]
+          })
           break
+        case 'parent':
+          if (todo.content) {
+            const updatedBlock = todo.content?.at(0)
+            if (updatedBlock) {
+              const updated = moveBlockFromNode(move.fromColumnId, move.toColumnId, updatedBlock)
+              if (updated) {
+                const moveBlockRequest: MoveBlocksType = {
+                  toNodeId: move.toColumnId,
+                  fromNodeId: move.fromColumnId,
+                  blockIds: [updatedBlock.id],
+                  indexKey: Indexes.MAIN
+                }
+                moveTodo(todo.id, move.fromColumnId, move.toColumnId)
+                moveBlocksInIndex(moveBlockRequest)
+              }
+            }
+          }
       }
-    } else {
-      toast('Cannot move task in a note with Read only permission')
     }
   }
 
-  const handleCardMove = (card, source, destination) => {
-    switch (card.entity) {
-      case Entities.TASK:
-        if (source !== destination) handleTaskEvents(card, groupBy, destination.toColumnId)
-        break
-      default:
-        mog('card move', { card, source, destination })
+  const handleCardMove = (card, { fromColumnId }, { toColumnId }) => {
+    const hasOnlyReadPermission = isReadonly(accessWhenShared(card.parent))
+
+    if (hasOnlyReadPermission) {
+      toast('Cannot move task in a note with Read only permission')
+      return
+    }
+
+    if (fromColumnId !== toColumnId) {
+      switch (card.entity) {
+        case Entities.TASK:
+          handleTaskEvents(card, groupBy, { fromColumnId, toColumnId })
+          break
+        case Entities.CONTENT_BLOCK:
+          handleBlockEvents(card, groupBy, { fromColumnId, toColumnId })
+          break
+      }
     }
   }
 
@@ -119,26 +214,10 @@ const KanbanView: React.FC<any> = (props) => {
     }
   }
 
-  // const handleCardMoveNext = () => {
-  //   if (!selectedCard) return
-
-  //   const todoFromCard = getTodoFromCard(selectedCard)
-  //   const newStatus = getNextStatus(todoFromCard.metadata.status)
-  //   changeStatus(todoFromCard, newStatus)
-  // }
-
-  // const handleCardMovePrev = () => {
-  //   if (!selectedCard) return
-  //   const todoFromCard = getTodoFromCard(selectedCard)
-  //   const newStatus = getPrevStatus(todoFromCard.metadata.status)
-  //   // mog('new status', { newStatus, todoFromCard, selectedCard })
-  //   changeStatus(todoFromCard, newStatus)
-  // }
-
   const changeSelectedPriority = (priority: PriorityType) => {
     if (!selectedCard) return
 
-    handleCardMove(selectedCard, 'priority', priority)
+    handleCardMove(selectedCard, { fromColumnId: 'priority' }, { toColumnId: priority })
   }
 
   const selectNewCard = (direction: 'up' | 'down' | 'left' | 'right') => {
@@ -218,7 +297,6 @@ const KanbanView: React.FC<any> = (props) => {
           selectedColumnId = nextColumn.id
         }
         if (nextCard) {
-          // mog('selected card', { selectedCard, nextCard })
           setSelectedCard(nextCard)
         }
         break
@@ -228,7 +306,6 @@ const KanbanView: React.FC<any> = (props) => {
 
   const eventWrapper = (fn: (event) => void): ((event) => void) => {
     return (e) => {
-      // console.log('event', { e })
       enableShortcutHandler(() => {
         e.preventDefault()
         fn(e)
diff --git a/apps/webapp/src/Editor/Components/Combobox/index.tsx b/apps/webapp/src/Editor/Components/Combobox/index.tsx
index 44ba710e5..69ea1e199 100644
--- a/apps/webapp/src/Editor/Components/Combobox/index.tsx
+++ b/apps/webapp/src/Editor/Components/Combobox/index.tsx
@@ -3,7 +3,14 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { flip, offset, shift } from '@floating-ui/react-dom-interactions'
 import { getRangeBoundingClientRect, PortalBody, usePlateEditorRef, useVirtualFloating } from '@udecode/plate'
 
-import { NodeEditorContent, Shortcut, useComboboxIsOpen, useComboboxStore, useContentStore , useMetadataStore } from '@mexit/core'
+import {
+  NodeEditorContent,
+  Shortcut,
+  useComboboxIsOpen,
+  useComboboxStore,
+  useContentStore,
+  useMetadataStore
+} from '@mexit/core'
 import { ComboboxRoot } from '@mexit/shared'
 
 import { useSnippets } from '../../../Hooks/useSnippets'
diff --git a/apps/webapp/src/Editor/Components/MultiCombobox/useMultiComboboxChange.ts b/apps/webapp/src/Editor/Components/MultiCombobox/useMultiComboboxChange.ts
index 21534bf2a..c7b210bf4 100644
--- a/apps/webapp/src/Editor/Components/MultiCombobox/useMultiComboboxChange.ts
+++ b/apps/webapp/src/Editor/Components/MultiCombobox/useMultiComboboxChange.ts
@@ -178,7 +178,6 @@ const useMultiComboboxOnChange = (editorId: string, keys: Record<string, Combobo
   return useCallback(
     () => () => {
       const isOpen = !!useComboboxStore.getState().targetRange
-
       let changed: boolean | undefined = false
       changed = changeHandler !== undefined ? changeHandler() : false
       if (changed) return
diff --git a/apps/webapp/src/Editor/Hooks/useUpdateBlock.ts b/apps/webapp/src/Editor/Hooks/useUpdateBlock.ts
index e218eb92b..e0c926f94 100644
--- a/apps/webapp/src/Editor/Hooks/useUpdateBlock.ts
+++ b/apps/webapp/src/Editor/Hooks/useUpdateBlock.ts
@@ -1,3 +1,5 @@
+import { toast } from 'react-hot-toast'
+
 import { findNodePath, getPlateEditorRef, setNodes } from '@udecode/plate'
 
 import { ELEMENT_PARAGRAPH, useContentStore } from '@mexit/core'
@@ -26,6 +28,13 @@ const useUpdateBlock = () => {
     }
   }
 
+  const getNoteContent = (noteId: string) => {
+    const bufferContent = useBufferStore.getState().getBuffer(noteId)
+    const existingContent = useContentStore.getState().getContent(noteId)?.content
+
+    return bufferContent || existingContent
+  }
+
   /*
     Update block's data inside a Note. 
 
@@ -39,10 +48,8 @@ const useUpdateBlock = () => {
       useBuffer: boolean
     }
   ) => {
-    const bufferContent = useBufferStore.getState().getBuffer(noteId)
-    const existingContent = useContentStore.getState().getContent(noteId)?.content
+    const content = getNoteContent(noteId)
 
-    const content = bufferContent || existingContent
     let updatedBlock
 
     const updateInBuffer = options.useBuffer !== false
@@ -69,6 +76,36 @@ const useUpdateBlock = () => {
     }
   }
 
+  const insertInNote = (noteId: string, blockId: string, blocks: Array<BlockDataType>) => {
+    const content = getNoteContent(noteId)
+    if (content) {
+      const blockIndex = content.findIndex((b) => b.id === blockId)
+      const newContent = [...content]
+      newContent.splice(blockIndex, 1, ...blocks)
+      addInBuffer(noteId, newContent)
+    }
+  }
+
+  // Returns true if move block is successful
+  const moveBlockFromNode = (fromNoteId: string, toNoteId: string, block: BlockDataType): boolean => {
+    const updatedSourceContent = getNoteContent(fromNoteId)
+    const updateDestinationContent = getNoteContent(toNoteId)
+
+    if (updateDestinationContent && updatedSourceContent) {
+      addInBuffer(toNoteId, [...updateDestinationContent, block])
+      addInBuffer(
+        fromNoteId,
+        updatedSourceContent?.filter((b) => b.id !== block.id)
+      )
+
+      return true
+    } else {
+      toast('Unable to move block')
+    }
+
+    return false
+  }
+
   const getSelectionInMarkdown = () => {
     const editor = getPlateEditorRef()
     if (!editor.selection) return
@@ -79,14 +116,12 @@ const useUpdateBlock = () => {
     return selectedText
   }
 
-  const addBlockInContent = (noteId: string, block: BlockDataType) => {
-    const bufferContent = useBufferStore.getState().getBuffer(noteId)
-    const existingContent = useContentStore.getState().getContent(noteId)?.content
-
-    const content = bufferContent || existingContent
+  const addBlockInContent = (noteId: string, block: BlockDataType, type?: 'add' | 'delete') => {
+    const content = getNoteContent(noteId)
 
     if (content?.length > 0) {
-      const updatedContent = [...content, ...(block as any)]
+      const updatedContent =
+        type === 'delete' ? content.filter((b) => b.id !== block.id) : [...content, ...(block as any)]
       updateFromContent(noteId, updatedContent)
     }
   }
@@ -95,7 +130,9 @@ const useUpdateBlock = () => {
     insertInEditor,
     setInfoOfBlockInContent,
     addBlockInContent,
-    getSelectionInMarkdown
+    getSelectionInMarkdown,
+    moveBlockFromNode,
+    insertInNote
   }
 }
 
diff --git a/apps/webapp/src/Hooks/API/useNodeAPI.ts b/apps/webapp/src/Hooks/API/useNodeAPI.ts
index b7705aa26..da7c0b75d 100644
--- a/apps/webapp/src/Hooks/API/useNodeAPI.ts
+++ b/apps/webapp/src/Hooks/API/useNodeAPI.ts
@@ -13,8 +13,9 @@ import {
   removeNulls,
   useAuthStore,
   useContentStore,
-useMetadataStore,  useTodoStore
- } from '@mexit/core'
+  useMetadataStore,
+  useTodoStore
+} from '@mexit/core'
 import { DefaultMIcons } from '@mexit/shared'
 
 import { deserializeContent, serializeContent } from '../../Utils/serializer'
@@ -23,6 +24,7 @@ import { runBatchWorker } from '../../Workers/controller'
 import { useInternalLinks } from '../useInternalLinks'
 import { useLastOpened } from '../useLastOpened'
 import { useLinks } from '../useLinks'
+import { useNamespaces } from '../useNamespaces'
 import { useNodes } from '../useNodes'
 import { useSnippets } from '../useSnippets'
 import { useUpdater } from '../useUpdater'
@@ -36,6 +38,7 @@ export const useApi = () => {
   const { updateILinksFromAddedRemovedPaths } = useInternalLinks()
   const { updateFromContent } = useUpdater()
   const { getSharedNode } = useNodes()
+  const { getNamespaceOfNodeid } = useNamespaces()
   const { updateSnippets, getSnippet } = useSnippets()
 
   const currentUser = useAuthStore((store) => store.userDetails)
@@ -140,6 +143,25 @@ export const useApi = () => {
     }
   }
 
+  /**
+   * Move Block from One Note to Another without block Data
+   */
+
+  const moveBlock = async (blockId: string, sourceNodeId: string, destinationNodeId: string) => {
+    const sourceNamespaceId = getNamespaceOfNodeid(sourceNodeId)?.id
+    const destinationNamespaceId = getNamespaceOfNodeid(destinationNodeId)?.id
+
+    const res = await API.node.move({
+      blockId,
+      sourceNodeId,
+      destinationNodeId,
+      sourceNamespaceId,
+      destinationNamespaceId
+    })
+
+    return res
+  }
+
   /*
    * Saves data in the backend
    * Also updates the incoming data in the store
@@ -395,6 +417,7 @@ export const useApi = () => {
     saveSnippetAPI,
     getAllSnippetsByWorkspace,
     getById,
+    moveBlock,
     refactorHierarchy,
     deleteAllVersionOfSnippet
   }
diff --git a/apps/webapp/src/Hooks/todo/useTodoKanban.ts b/apps/webapp/src/Hooks/todo/useTodoKanban.ts
index a5f71d6af..fbc4fb852 100644
--- a/apps/webapp/src/Hooks/todo/useTodoKanban.ts
+++ b/apps/webapp/src/Hooks/todo/useTodoKanban.ts
@@ -39,6 +39,7 @@ export const getPureContent = (todo: TodoType) => {
 
 export const useTodoKanban = () => {
   const updateTodo = useTodoStore((s) => s.updateTodoOfNode)
+  const moveTodoInStore = useTodoStore((s) => s.moveTodo)
 
   const { updateBlocks } = useSearch()
   const { setInfoOfBlockInContent } = useUpdateBlock()
@@ -68,21 +69,28 @@ export const useTodoKanban = () => {
     updateTodoLocally(todo, { priority: newPriority })
   }
 
+  const moveTodo = (todoId: string, fromId: string, toId: string) => {
+    moveTodoInStore(todoId, fromId, toId)
+  }
+
   const getBlocksBoard = (groupedItems: Record<string, Array<SearchResult>>) => {
+    const fromItems = Object.entries(groupedItems).map(([key, items]) => {
+      return {
+        id: key,
+        title: key,
+        cards: items
+      }
+    })
+
     const board: BlockKanbanBoard = {
-      columns: Object.entries(groupedItems).map(([key, items]) => {
-        return {
-          id: key,
-          title: key,
-          cards: items
-        }
-      })
+      columns: fromItems
     }
 
     return board
   }
 
   return {
+    moveTodo,
     getPureContent,
     getBlocksBoard,
     changePriority,
diff --git a/apps/webapp/src/Hooks/useOnUnload.ts b/apps/webapp/src/Hooks/useOnUnload.ts
index d6948bbfa..47fc900e0 100644
--- a/apps/webapp/src/Hooks/useOnUnload.ts
+++ b/apps/webapp/src/Hooks/useOnUnload.ts
@@ -4,6 +4,9 @@ import { mog, useAuthStore } from '@mexit/core'
 
 import { useEditorBuffer, useSnippetBuffer } from './useEditorBuffer'
 
+/**
+ * Hook that saves the notes and snippets buffer when the user leaves the page.
+ */
 export const useOnUnload = () => {
   const authenticated = useAuthStore((s) => s.authenticated)
   const { saveAndClearBuffer: clearNotesBuffer } = useEditorBuffer()
diff --git a/apps/webapp/src/Hooks/useSearch.ts b/apps/webapp/src/Hooks/useSearch.ts
index fe3df1881..eafb0f25a 100644
--- a/apps/webapp/src/Hooks/useSearch.ts
+++ b/apps/webapp/src/Hooks/useSearch.ts
@@ -8,6 +8,7 @@ import {
   ELEMENT_INLINE_BLOCK,
   ELEMENT_TASK_VIEW_BLOCK,
   ELEMENT_TASK_VIEW_LINK,
+  MoveBlocksType,
   SearchRepExtra,
   useAuthStore,
   useContentStore,
@@ -17,6 +18,7 @@ import {
 
 import {
   addDoc,
+  moveBlocks,
   removeDoc,
   searchIndex,
   searchIndexByNodeId,
@@ -118,6 +120,11 @@ export const useSearch = () => {
     documentUpdated()
   }
 
+  const moveBlocksInIndex = async (options: MoveBlocksType) => {
+    await moveBlocks(options)
+    documentUpdated()
+  }
+
   const removeDocument = async (key: Indexes, id: string) => {
     await removeDoc(key, id)
     documentUpdated()
@@ -141,6 +148,7 @@ export const useSearch = () => {
   return {
     addDocument,
     updateBlocks,
+    moveBlocksInIndex,
     updateDocument,
     removeDocument,
     queryIndex,
diff --git a/apps/webapp/src/Utils/convertValueToTasks.ts b/apps/webapp/src/Utils/convertValueToTasks.ts
index da64e2818..237bd1cc2 100644
--- a/apps/webapp/src/Utils/convertValueToTasks.ts
+++ b/apps/webapp/src/Utils/convertValueToTasks.ts
@@ -1,6 +1,6 @@
 import { ELEMENT_LI, ELEMENT_LIC, ELEMENT_OL, ELEMENT_PARAGRAPH, ELEMENT_UL } from '@udecode/plate'
 
-import { ELEMENT_MEDIA_EMBED, ELEMENT_TODO_LI, generateTempId, NodeEditorContent } from '@mexit/core'
+import { ELEMENT_MEDIA_EMBED, ELEMENT_TODO_LI, generateTempId, NodeEditorContent, TodoStatus } from '@mexit/core'
 
 /**
  * Converts the content to a list of tasks
@@ -14,12 +14,14 @@ import { ELEMENT_MEDIA_EMBED, ELEMENT_TODO_LI, generateTempId, NodeEditorContent
  *   - Elements that are not convertable -> Are left as is
  *   - Empty paragraphs -> Are removed
  */
-export const convertValueToTasks = (val: NodeEditorContent): NodeEditorContent => {
+export const convertValueToTasks = (val: NodeEditorContent, blockData: Record<string, any> = {}): NodeEditorContent => {
   return val.reduce((p, node) => {
     const basicConvertedNode = {
       type: ELEMENT_TODO_LI,
       id: generateTempId(),
-      children: [node]
+      children: [node],
+      status: TodoStatus.todo,
+      ...blockData
     }
     if (node.type === ELEMENT_TODO_LI) {
       return [...p, node]
@@ -71,24 +73,28 @@ export const convertValueToTasks = (val: NodeEditorContent): NodeEditorContent =
                   {
                     type: ELEMENT_TODO_LI,
                     id: generateTempId(),
-                    children: child2.children
+                    status: TodoStatus.todo,
+                    children: child2.children,
+                    ...blockData
                   }
                 ]
               } else if (child2.type === ELEMENT_UL || child2.type === ELEMENT_OL) {
                 // If list is embedded in another list
                 // Recursive go brrrr
-                const convertedTasksForList = convertValueToTasks([child2])
+                const convertedTasksForList = convertValueToTasks([child2], blockData)
                 return [...p3, ...convertedTasksForList]
               } else if (child2.type === ELEMENT_PARAGRAPH) {
                 // This is applied for external content which does not insert LIC
-                return [...p3, ...convertValueToTasks([child2])]
+                return [...p3, ...convertValueToTasks([child2]), blockData]
               } else if (child2.text !== undefined) {
                 return [
                   ...p3,
                   {
                     type: ELEMENT_TODO_LI,
                     id: generateTempId(),
-                    children: [child2]
+                    status: TodoStatus.todo,
+                    children: [child2],
+                    ...blockData
                   }
                 ]
               }
diff --git a/apps/webapp/src/Views/ViewPage/index.tsx b/apps/webapp/src/Views/ViewPage/index.tsx
index e09f26d01..58728a37d 100644
--- a/apps/webapp/src/Views/ViewPage/index.tsx
+++ b/apps/webapp/src/Views/ViewPage/index.tsx
@@ -1,16 +1,25 @@
+import { useEffect } from 'react'
 import { Navigate, useParams } from 'react-router-dom'
 
 import { ViewContainer } from '../../Components/Views'
 import { createViewFilterStore, ViewFilterProvider } from '../../Hooks/todo/useTodoFilters'
+import { useEditorBuffer } from '../../Hooks/useEditorBuffer'
 import { ROUTE_PATHS } from '../../Hooks/useRouting'
 
 const ViewPage = () => {
   const viewId = useParams()?.viewid
+  const { saveAndClearBuffer } = useEditorBuffer()
 
   if (!viewId) {
     return <Navigate to={{ pathname: ROUTE_PATHS.tasks }} replace />
   }
 
+  useEffect(() => {
+    return () => {
+      saveAndClearBuffer(false)
+    }
+  }, [])
+
   return (
     <ViewFilterProvider createStore={createViewFilterStore}>
       <ViewContainer viewId={viewId} />
diff --git a/apps/webapp/src/Workers/controller.ts b/apps/webapp/src/Workers/controller.ts
index 2ce773b5d..933b13c62 100644
--- a/apps/webapp/src/Workers/controller.ts
+++ b/apps/webapp/src/Workers/controller.ts
@@ -6,6 +6,7 @@ import { type ExposedToThreadType } from '@workduck-io/mex-threads.js/types/mast
 import {
   ILink,
   mog,
+  MoveBlocksType,
   NodeEditorContent,
   PersistentData,
   SearchRepExtra,
@@ -84,6 +85,15 @@ export const updateILink = async (ilink: ILink) => {
   }
 }
 
+export const moveBlocks = async (options: MoveBlocksType) => {
+  try {
+    if (!searchWorker) throw new Error('Search Worker Not Initialized')
+    await searchWorker.moveBlocks(options)
+  } catch (error) {
+    mog('AddDocIndexError', { error })
+  }
+}
+
 export const getEntitiyInitializer = async <T extends keyof InitializeSearchEntity>(
   updateType: T,
   data: InitializeSearchEntity[T]
diff --git a/apps/webapp/src/Workers/search.ts b/apps/webapp/src/Workers/search.ts
index 23ff5bb01..d6e35c822 100644
--- a/apps/webapp/src/Workers/search.ts
+++ b/apps/webapp/src/Workers/search.ts
@@ -1,6 +1,6 @@
 import { Indexes, ISearchQuery, IUpdateDoc, SearchResult, SearchX } from '@workduck-io/mex-search'
 
-import { Highlight, ILink, Link, mog, PersistentData, Reminder } from '@mexit/core'
+import { Highlight, ILink, Link, mog, MoveBlocksType, PersistentData, Reminder } from '@mexit/core'
 
 import { exposeX } from './worker-utils'
 
@@ -120,6 +120,24 @@ const searchWorker = {
       mog('Searching Broke:', { e })
       return []
     }
+  },
+  moveBlocks: (options: MoveBlocksType) => {
+    const { fromNodeId: fromId, toNodeId: toId, blockIds } = options
+
+    blockIds.forEach((blockId) => searchX._graphX.removeLink(fromId, blockId))
+    blockIds.forEach((blockId) => searchX._graphX.addLink(toId, blockId, { type: 'CHILD' }))
+    blockIds.forEach((blockId) => {
+      const { tags, ...rest } = searchX._indexMap[Indexes.MAIN].get(blockId)
+
+      searchX._indexMap[Indexes.MAIN].update(blockId, {
+        ...rest,
+        parent: toId,
+        tags: tags.filter((t: string) => t !== fromId).concat(toId)
+      })
+    })
+
+    // searchX.moveBlocks(options.fromNodeId, options.toNodeId, options.blockIds)
+    console.log('H', searchX._graphX.getLink('NODE_ENLNwH3AecWtPfdtxbdbz', 'TEMP_Gchnp'))
   }
 }
 
diff --git a/libs/core/src/API/Node.ts b/libs/core/src/API/Node.ts
index cbe2c885e..9940c2943 100644
--- a/libs/core/src/API/Node.ts
+++ b/libs/core/src/API/Node.ts
@@ -23,6 +23,10 @@ export class NodeAPI {
     return await this.client.patch(apiURLs.node.append(id), data, options)
   }
 
+  async move(data, options?: Options) {
+    return await this.client.patch(apiURLs.node.move, data, options)
+  }
+
   async refactor(data, options?: Options) {
     return await this.client.post(apiURLs.node.refactor, data, options)
   }
diff --git a/libs/core/src/Stores/buffer.store.ts b/libs/core/src/Stores/buffer.store.ts
index 7cf7f8392..0d988afeb 100644
--- a/libs/core/src/Stores/buffer.store.ts
+++ b/libs/core/src/Stores/buffer.store.ts
@@ -17,4 +17,4 @@ const bufferStoreConfig = (set, get) => ({
   clear: () => set({ buffer: {} })
 })
 
-export const useBufferStore = createStore(bufferStoreConfig, StoreIdentifier.BUFFER, false)
+export const useBufferStore = createStore(bufferStoreConfig, StoreIdentifier.BUFFER, true)
diff --git a/libs/core/src/Stores/content.store.ts b/libs/core/src/Stores/content.store.ts
index b138ac67e..d7279f6ac 100644
--- a/libs/core/src/Stores/content.store.ts
+++ b/libs/core/src/Stores/content.store.ts
@@ -77,4 +77,4 @@ const contentStoreConfig = (set, get) => ({
   }
 })
 
-export const useContentStore = createStore(contentStoreConfig, StoreIdentifier.CONTENTS, true)
\ No newline at end of file
+export const useContentStore = createStore(contentStoreConfig, StoreIdentifier.CONTENTS, true)
diff --git a/libs/core/src/Stores/todo.store.ts b/libs/core/src/Stores/todo.store.ts
index a37f107bc..5fe3477f0 100644
--- a/libs/core/src/Stores/todo.store.ts
+++ b/libs/core/src/Stores/todo.store.ts
@@ -71,7 +71,6 @@ const todoStoreConfig = (set, get) => ({
     const todo = get().todos?.[nodeId]?.find((todo) => todo.id === todoId && nodeId === todo.nodeid)
     return todo
   },
-
   getTodoOfNode: (nodeId: string, todoId: string): TodoType => {
     const todo = get().todos?.[nodeId]?.find((todo) => todo.id === todoId && nodeId === todo.nodeid)
     // mog('getTodoOfNode', { nodeid, todoId, todo, todos: get().todos })
@@ -123,8 +122,20 @@ const todoStoreConfig = (set, get) => ({
     // mog('TODO UPDATE', { newTodos, nodeid, todos })
     set({ todos: { ...currentTodos, [nodeId]: newTodos } })
   },
+  appendTodos: (noteId: string, todosContent: NodeEditorContent) => {
+    const todos = get().todos ?? {}
+    const existingTodos = todos[noteId] ?? []
+
+    const noteTodos = todosContent.map((block) => {
+      const tags = getTagsFromContent([block])
+      const mentions = getMentionsFromContent([block])
+      return createTodo(noteId, block.id, [block], mentions, tags)
+    })
+
+    set({ todos: { ...todos, [noteId]: [...noteTodos, ...existingTodos] } })
+  },
+
   replaceContentOfTodos: (nodeId: string, todosContent: NodeEditorContent) => {
-    // mog('replaceContentOfTodos', { nodeid, todosContent })
     if (!nodeId) return
     const todos = get().todos ?? {}
 
@@ -176,6 +187,18 @@ const todoStoreConfig = (set, get) => ({
 
     const newTodo = { ...todo, metadata: { ...todo.metadata, status } }
     get().updateTodoOfNode(nodeId, newTodo)
+  },
+  moveTodo: (todoId: string, fromId: string, toId: string) => {
+    const todos = get().todos
+    const todo = get().getTodoOfNodeWithoutCreating(fromId, todoId)
+
+    set({
+      todos: {
+        ...todos,
+        [fromId]: todos[fromId].filter((i) => i.id !== todoId),
+        [toId]: [{ ...todo, nodeid: toId }, ...todos[toId]]
+      }
+    })
   }
 })
 
diff --git a/libs/core/src/Types/Search.ts b/libs/core/src/Types/Search.ts
index 2052b4450..f41aee931 100644
--- a/libs/core/src/Types/Search.ts
+++ b/libs/core/src/Types/Search.ts
@@ -1,4 +1,5 @@
 import { Document } from '@workduck-io/flexsearch'
+import { Indexes } from '@workduck-io/mex-search'
 
 import { Link } from '../Stores/link.store'
 import { Snippets } from '../Stores/snippet.store'
@@ -43,6 +44,13 @@ export interface GenericSearchData {
   tag?: string[]
 }
 
+export interface MoveBlocksType {
+  indexKey?: Indexes
+  fromNodeId: string
+  toNodeId: string
+  blockIds: string[]
+}
+
 export interface SearchIndex {
   node: Document<GenericSearchData> | null
   snippet: Document<GenericSearchData> | null
diff --git a/libs/core/src/Utils/dataTransform.ts b/libs/core/src/Utils/dataTransform.ts
index ddf41681a..5a0da831b 100644
--- a/libs/core/src/Utils/dataTransform.ts
+++ b/libs/core/src/Utils/dataTransform.ts
@@ -134,6 +134,8 @@ export const idUpdateFunction = (block) => {
 }
 
 export const updateIds = (blockToUpdate: any, withType?: boolean, idGenerator: () => string = generateTempId) => {
+  if (!blockToUpdate) return
+
   const block = Object.assign({}, blockToUpdate)
   const addIdIfType = withType && block?.type
 
diff --git a/libs/core/src/Utils/routes.ts b/libs/core/src/Utils/routes.ts
index 85d952cbf..23e768c73 100644
--- a/libs/core/src/Utils/routes.ts
+++ b/libs/core/src/Utils/routes.ts
@@ -74,6 +74,7 @@ export const apiURLs = {
     updateMetadata: (uid: string) => `${API_BASE_URLS.node}/metadata/${uid}`,
     bulkCreate: `${API_BASE_URLS.node}/bulk`,
     refactor: `${API_BASE_URLS.node}/refactor`,
+    move: `${API_BASE_URLS.node}/block/movement`,
     deleteBlock: `${API_BASE_URLS.node}/delete`,
     makePublic: (uid: string) => `${API_BASE_URLS.node}/${uid}/makePublic`,
     makePrivate: (uid: string) => `${API_BASE_URLS.node}/${uid}/makePrivate`,
diff --git a/libs/shared/src/Components/AIPreview/styled.tsx b/libs/shared/src/Components/AIPreview/styled.tsx
index 9d434d200..48ec6eaa5 100644
--- a/libs/shared/src/Components/AIPreview/styled.tsx
+++ b/libs/shared/src/Components/AIPreview/styled.tsx
@@ -107,7 +107,7 @@ export const FloaterContainer = styled.div`
   backdrop-filter: blur(2rem);
   border: 1px solid ${({ theme }) => theme.tokens.surfaces.app};
   transform-origin: top;
-  z-index: 11;
+  z-index: 101;
   border: 1px solid ${({ theme }) => theme.tokens.surfaces.s[3]};
   animation: ${float} 150ms ease-out;
 `
diff --git a/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx b/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx
index a155927c1..fe3db5fef 100644
--- a/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx
+++ b/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx
@@ -136,7 +136,7 @@ export const RootMenuWrapper = styled.button<{
   }
 `
 
-export const MenuWrapper = styled.div`
+export const MenuWrapper = styled.div<{ type?: 'modal' }>`
   ${({ theme }) => generateStyle(theme.generic.contextMenu.menu)}
   padding: 4px;
   border: 1px solid ${({ theme }) => theme.tokens.surfaces.s[3]};
@@ -145,7 +145,7 @@ export const MenuWrapper = styled.div`
   outline: 0;
   max-height: 300px;
   overflow-y: auto;
-  z-index: 11;
+  z-index: ${({ type }) => (type === 'modal' ? 101 : 11)};
   ${({ theme }) => ScrollStyles(theme.tokens.surfaces.s[0])}
 `
 
diff --git a/libs/shared/src/Components/FloatingElements/Dropdown.tsx b/libs/shared/src/Components/FloatingElements/Dropdown.tsx
index 7b6dc0c39..4cd25468c 100644
--- a/libs/shared/src/Components/FloatingElements/Dropdown.tsx
+++ b/libs/shared/src/Components/FloatingElements/Dropdown.tsx
@@ -140,6 +140,13 @@ interface Props {
    * Which element to render the portal in
    */
   root?: HTMLElement | null
+
+  /**
+   * Menu Type
+   */
+  type?: 'default' | 'modal'
+
+  initialFocus?: boolean
 }
 
 export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonElement>>(
@@ -154,9 +161,11 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
       allowSearch,
       onCreate,
       onMouseEnter,
+      type,
       noPadding,
       onMouseLeave,
       handleKeyDown,
+      initialFocus,
       searchPlaceholder,
       className,
       root,
@@ -367,6 +376,7 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
             <FloatingFocusManager
               context={context}
               modal={!nested}
+              initialFocus={initialFocus}
               returnFocus={!nested}
               // Touch-based screen readers will be able to navigate back to the
               // reference and click it to dismiss the menu without clicking an item.
@@ -375,6 +385,7 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
               order={['reference', 'content']}
             >
               <MenuWrapper
+                type={type}
                 {...getFloatingProps({
                   className: MenuClassName,
                   ref: floating,
@@ -417,6 +428,7 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
                           listItemsRef.current[index] = node
                         },
                         onClick(e) {
+                          e.stopPropagation()
                           child.props.onClick?.(e)
                           tree?.events.emit('click')
                         },
diff --git a/libs/shared/src/Components/Icons.tsx b/libs/shared/src/Components/Icons.tsx
index 5ce07fc92..9af247f78 100644
--- a/libs/shared/src/Components/Icons.tsx
+++ b/libs/shared/src/Components/Icons.tsx
@@ -122,7 +122,7 @@ export const DefaultMIcons = {
   ADD: getMIcon('ICON', 'ic:round-plus'),
   CLEAR: getMIcon('ICON', 'ic:round-clear'),
   REMINDER: getMIcon('ICON', 'ri:timer-flash-line'),
-  TEXT: getMIcon('ICON', 'ri:text'),
+  TEXT: getMIcon('ICON', 'ri:paragraph'),
   GROUPBY: getMIcon('ICON', 'fluent:group-list-20-filled'),
   SELECT: getMIcon('ICON', 'bxs:select-multiple'),
   IMAGE: getMIcon('ICON', 'bx:image'),
diff --git a/libs/shared/src/Components/InsertMenu.tsx b/libs/shared/src/Components/InsertMenu.tsx
index 09ed0ef07..e5f45b2a8 100644
--- a/libs/shared/src/Components/InsertMenu.tsx
+++ b/libs/shared/src/Components/InsertMenu.tsx
@@ -14,10 +14,25 @@ interface InsertMenuProps {
   title?: string
   icon?: MIcon
   root?: any
+  allowSearch?: boolean
   isMenu?: boolean
+  type?: 'default' | 'modal'
+  initialFocus?: boolean
+  selected?: string
 }
 
-export const InsertMenu: React.FC<InsertMenuProps> = ({ onClick, title = 'Insert', items, isMenu, root, icon }) => {
+export const InsertMenu: React.FC<InsertMenuProps> = ({
+  onClick,
+  title = 'Insert',
+  items,
+  allowSearch = true,
+  selected,
+  isMenu,
+  root,
+  initialFocus,
+  icon,
+  type
+}) => {
   if (!isMenu) {
     return (
       <StyledButton onClick={onClick}>
@@ -54,17 +69,14 @@ export const InsertMenu: React.FC<InsertMenuProps> = ({ onClick, title = 'Insert
 
   return (
     <Menu
-      allowSearch
+      allowSearch={allowSearch}
       noBackground
+      type={type}
       noPadding
+      initialFocus={initialFocus}
       searchPlaceholder="Search for a Note..."
       root={root}
-      values={
-        <StyledButton>
-          <IconDisplay icon={icon ?? DefaultMIcons.EMBED} size={12} />
-          {title}
-        </StyledButton>
-      }
+      values={<AnchorNode selected={selected} items={noteLinks} icon={icon} title={title} />}
     >
       {noteLinks.map((item) => {
         return (
@@ -80,3 +92,17 @@ export const InsertMenu: React.FC<InsertMenuProps> = ({ onClick, title = 'Insert
     </Menu>
   )
 }
+
+const AnchorNode = ({ selected, items, icon, title }) => {
+  const selectedItem = selected && items.find((i) => i.id === selected)
+
+  const itemIcon = selectedItem?.icon ?? icon ?? DefaultMIcons.EMBED
+  const label = selectedItem?.label ?? title
+
+  return (
+    <StyledButton>
+      <IconDisplay icon={itemIcon} size={12} />
+      {label}
+    </StyledButton>
+  )
+}

From f4b0d19e01233223ee2c94ef3237c12bbbcb7583 Mon Sep 17 00:00:00 2001
From: Dinesh Singh <dinesh@workduck.io>
Date: Sat, 6 May 2023 22:51:34 +0530
Subject: [PATCH 2/5] Changeset added

---
 .changeset/fuzzy-shoes-travel.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fuzzy-shoes-travel.md

diff --git a/.changeset/fuzzy-shoes-travel.md b/.changeset/fuzzy-shoes-travel.md
new file mode 100644
index 000000000..774e6aca4
--- /dev/null
+++ b/.changeset/fuzzy-shoes-travel.md
@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Move Blocks, Add Blocks In Views Added

From 8d5a57883283025a1625388d60a74bb9abb5c168 Mon Sep 17 00:00:00 2001
From: Dinesh Singh <dinesh@workduck.io>
Date: Sat, 6 May 2023 23:07:05 +0530
Subject: [PATCH 3/5] SearchX for move Blocks removed

---
 .../src/Components/Modals/CreateTodoModal.tsx  |  2 +-
 apps/webapp/src/Workers/search.ts              | 18 ++----------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/apps/webapp/src/Components/Modals/CreateTodoModal.tsx b/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
index 36a72a077..a88c3b380 100644
--- a/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
+++ b/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
@@ -128,7 +128,7 @@ const CreateTodoModal = ({ children }) => {
   const isContent = data?.type === 'content'
   const description = !isContent
     ? 'By default, new Task is added to Daily Tasks. You can select a different type of note from the menu if you prefer.'
-    : 'By defautl, new Content is saved as Drafts. You can select a different type of note from the menu if you prefer.'
+    : 'By default, new Content is saved as Drafts. You can select a different type of note from the menu if you prefer.'
 
   return (
     <Modal
diff --git a/apps/webapp/src/Workers/search.ts b/apps/webapp/src/Workers/search.ts
index d6e35c822..7ee53fa84 100644
--- a/apps/webapp/src/Workers/search.ts
+++ b/apps/webapp/src/Workers/search.ts
@@ -122,22 +122,8 @@ const searchWorker = {
     }
   },
   moveBlocks: (options: MoveBlocksType) => {
-    const { fromNodeId: fromId, toNodeId: toId, blockIds } = options
-
-    blockIds.forEach((blockId) => searchX._graphX.removeLink(fromId, blockId))
-    blockIds.forEach((blockId) => searchX._graphX.addLink(toId, blockId, { type: 'CHILD' }))
-    blockIds.forEach((blockId) => {
-      const { tags, ...rest } = searchX._indexMap[Indexes.MAIN].get(blockId)
-
-      searchX._indexMap[Indexes.MAIN].update(blockId, {
-        ...rest,
-        parent: toId,
-        tags: tags.filter((t: string) => t !== fromId).concat(toId)
-      })
-    })
-
-    // searchX.moveBlocks(options.fromNodeId, options.toNodeId, options.blockIds)
-    console.log('H', searchX._graphX.getLink('NODE_ENLNwH3AecWtPfdtxbdbz', 'TEMP_Gchnp'))
+    const { fromNodeId, toNodeId, blockIds } = options
+    searchX.moveBlocks(fromNodeId, toNodeId, blockIds)
   }
 }
 

From 0493ad43617e3c8a6d5336a50253a01ad0c93ae5 Mon Sep 17 00:00:00 2001
From: Dinesh Singh <dinesh@workduck.io>
Date: Sun, 7 May 2023 01:03:41 +0530
Subject: [PATCH 4/5] Build Fixes

---
 .../src/Components/Editor/ContentEditor.tsx   |  2 +-
 .../src/Components/FleetContainer/index.tsx   |  2 +-
 .../src/Components/Modals/CreateTodoModal.tsx |  4 ++--
 .../src/Components/PreviewNoteModal/index.tsx | 22 +++++++++++--------
 .../Views/ViewBlockRenderer/ContentBlock.tsx  |  6 ++---
 .../FloatingElements/Dropdown.style.tsx       |  2 +-
 .../Components/FloatingElements/Dropdown.tsx  |  4 ----
 libs/shared/src/Components/InsertMenu.tsx     |  1 -
 package.json                                  |  2 +-
 yarn.lock                                     |  8 +++----
 10 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/apps/webapp/src/Components/Editor/ContentEditor.tsx b/apps/webapp/src/Components/Editor/ContentEditor.tsx
index 126bf4916..04fbc6c05 100644
--- a/apps/webapp/src/Components/Editor/ContentEditor.tsx
+++ b/apps/webapp/src/Components/Editor/ContentEditor.tsx
@@ -70,7 +70,7 @@ const ContentEditor = () => {
       return returnLastUpdatedContentOnError(nodeid, fsContent?.content)
     } else {
       setInternalUpdate(false)
-      const fromContent = useContentStore.getState().contents[nodeid].content
+      const fromContent = useContentStore.getState().contents[nodeid]?.content
       return returnLastUpdatedContentOnError(nodeid, fromContent)
     }
   }, [nodeid, fsContent])
diff --git a/apps/webapp/src/Components/FleetContainer/index.tsx b/apps/webapp/src/Components/FleetContainer/index.tsx
index f2b850c83..883d98c31 100644
--- a/apps/webapp/src/Components/FleetContainer/index.tsx
+++ b/apps/webapp/src/Components/FleetContainer/index.tsx
@@ -41,7 +41,7 @@ const FleetContainer = () => {
   }, [open])
 
   const sections = useMemo(() => {
-    const sections = getQuickNewItems()
+    const sections = getQuickNewItems() as any
     if (atSnippets) return [sections.snippet, sections.note, sections.task, sections.space]
     if (atViews) {
       return [sections.task, sections.note, sections.snippet, sections.space]
diff --git a/apps/webapp/src/Components/Modals/CreateTodoModal.tsx b/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
index a88c3b380..b0de7d3ac 100644
--- a/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
+++ b/apps/webapp/src/Components/Modals/CreateTodoModal.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import toast from 'react-hot-toast'
 import Modal from 'react-modal'
 
@@ -162,7 +163,6 @@ const CreateTodoModal = ({ children }) => {
             <span>{description}</span>
             <InsertMenu
               type="modal"
-              initialFocus={false}
               title="Select Note"
               selected={selectedNoteId}
               isMenu
@@ -172,7 +172,7 @@ const CreateTodoModal = ({ children }) => {
             />
           </Group>
         </DeletionWarning>
-        {children}
+        <ErrorBoundary FallbackComponent={() => <></>}>{children}</ErrorBoundary>
 
         <ModalControls>
           <Button large onClick={onRequestClose}>
diff --git a/apps/webapp/src/Components/PreviewNoteModal/index.tsx b/apps/webapp/src/Components/PreviewNoteModal/index.tsx
index c4fe47c22..ada91a1da 100644
--- a/apps/webapp/src/Components/PreviewNoteModal/index.tsx
+++ b/apps/webapp/src/Components/PreviewNoteModal/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import Modal from 'react-modal'
 
 import closeCircleLine from '@iconify/icons-ri/close-circle-line'
@@ -78,6 +79,7 @@ const PreviewNoteModal = () => {
   if (!isOpen) return <></>
 
   const onRequestClose = () => {
+    saveAndClearBuffer(false)
     toggleModal(undefined)
   }
 
@@ -142,15 +144,17 @@ const PreviewNoteModal = () => {
             </PreviewActionHeader>
           </EditorPreviewControls>
           <EditorContainer>
-            <Editor
-              focusBlockId={modalData?.blockId}
-              content={content}
-              onChange={onChange}
-              options={{ focusOptions: false }}
-              readOnly={readOnly}
-              autoFocus
-              nodeUID={modalData?.noteId}
-            />
+            <ErrorBoundary FallbackComponent={() => <></>}>
+              <Editor
+                focusBlockId={modalData?.blockId}
+                content={content}
+                onChange={onChange}
+                options={{ focusOptions: false }}
+                readOnly={readOnly}
+                autoFocus
+                nodeUID={modalData?.noteId}
+              />
+            </ErrorBoundary>
           </EditorContainer>
         </PreviewNoteContainer>
       </PlateProvider>
diff --git a/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx b/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx
index 701b7052e..19e2b4f8d 100644
--- a/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx
+++ b/apps/webapp/src/Components/Views/ViewBlockRenderer/ContentBlock.tsx
@@ -5,10 +5,10 @@ import styled, { css, useTheme } from 'styled-components'
 
 import { SearchResult } from '@workduck-io/mex-search'
 
+import { ModalsType, useModalStore } from '@mexit/core'
 import { Group, MexIcon } from '@mexit/shared'
 
 import { SearchBlockIcons } from '../../../Editor/Components/Blocks/BlockIcons'
-import { NavigationType, ROUTE_PATHS, useRouting } from '../../../Hooks/useRouting'
 
 import { SlideDownKeyFrames, SlideUpKeyFrames } from './BlockContainer/styled'
 import { Chevron, GroupHeader } from './BlockContainer'
@@ -61,14 +61,14 @@ type BlockProps = {
 
 const ContentBlock: React.FC<BlockProps> = ({ block }) => {
   const theme = useTheme()
-  const { goTo } = useRouting()
   const [isOpen, setIsOpen] = useState(false)
+  const toggleModal = useModalStore((store) => store.toggleOpen)
 
   const handleToggleAccordion = (ev) => {
     setIsOpen(!isOpen)
 
     if (ev.detail === 2) {
-      goTo(ROUTE_PATHS.node, NavigationType.push, block.parent)
+      toggleModal(ModalsType.previewNote, { noteId: block.parent, blockId: block.id })
     }
   }
 
diff --git a/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx b/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx
index fe3db5fef..22bdaffd2 100644
--- a/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx
+++ b/libs/shared/src/Components/FloatingElements/Dropdown.style.tsx
@@ -136,7 +136,7 @@ export const RootMenuWrapper = styled.button<{
   }
 `
 
-export const MenuWrapper = styled.div<{ type?: 'modal' }>`
+export const MenuWrapper = styled.div<{ type?: 'modal' | 'default' }>`
   ${({ theme }) => generateStyle(theme.generic.contextMenu.menu)}
   padding: 4px;
   border: 1px solid ${({ theme }) => theme.tokens.surfaces.s[3]};
diff --git a/libs/shared/src/Components/FloatingElements/Dropdown.tsx b/libs/shared/src/Components/FloatingElements/Dropdown.tsx
index 4cd25468c..ddb399ab8 100644
--- a/libs/shared/src/Components/FloatingElements/Dropdown.tsx
+++ b/libs/shared/src/Components/FloatingElements/Dropdown.tsx
@@ -145,8 +145,6 @@ interface Props {
    * Menu Type
    */
   type?: 'default' | 'modal'
-
-  initialFocus?: boolean
 }
 
 export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonElement>>(
@@ -165,7 +163,6 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
       noPadding,
       onMouseLeave,
       handleKeyDown,
-      initialFocus,
       searchPlaceholder,
       className,
       root,
@@ -376,7 +373,6 @@ export const MenuComponent = forwardRef<any, Props & React.HTMLProps<HTMLButtonE
             <FloatingFocusManager
               context={context}
               modal={!nested}
-              initialFocus={initialFocus}
               returnFocus={!nested}
               // Touch-based screen readers will be able to navigate back to the
               // reference and click it to dismiss the menu without clicking an item.
diff --git a/libs/shared/src/Components/InsertMenu.tsx b/libs/shared/src/Components/InsertMenu.tsx
index e5f45b2a8..f26ed8605 100644
--- a/libs/shared/src/Components/InsertMenu.tsx
+++ b/libs/shared/src/Components/InsertMenu.tsx
@@ -73,7 +73,6 @@ export const InsertMenu: React.FC<InsertMenuProps> = ({
       noBackground
       type={type}
       noPadding
-      initialFocus={initialFocus}
       searchPlaceholder="Search for a Note..."
       root={root}
       values={<AnchorNode selected={selected} items={noteLinks} icon={icon} title={title} />}
diff --git a/package.json b/package.json
index 145cfece5..c3a132a5a 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "*.{ts,tsx}": "eslint --cache --fix"
   },
   "dependencies": {
-    "@workduck-io/mex-search": "0.0.8",
+    "@workduck-io/mex-search": "0.0.9",
     "buffer": "^6.0.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
diff --git a/yarn.lock b/yarn.lock
index 7f0a01e20..cfe403392 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3971,10 +3971,10 @@
     polished "^4.1.4"
     react-spring "^9.5.2"
 
-"@workduck-io/mex-search@0.0.8":
-  version "0.0.8"
-  resolved "https://npm.pkg.github.com/download/@workduck-io/mex-search/0.0.8/378a494c8dd030e476425c9047b0e313742e6cd5#378a494c8dd030e476425c9047b0e313742e6cd5"
-  integrity sha512-4f+yKJSO2tAyDkifLeohDm2ApDYCNx6TayEAjiuTMS+vrWGpiyYuFkh+mosfTJPTBYg1VOKbGk6LrL5ZulBjdw==
+"@workduck-io/mex-search@0.0.9":
+  version "0.0.9"
+  resolved "https://npm.pkg.github.com/download/@workduck-io/mex-search/0.0.9/e371c2492fb6997152d2ac96e1df4c169eb452ad#e371c2492fb6997152d2ac96e1df4c169eb452ad"
+  integrity sha512-L+TDKRhGnGLwxo+BzhKEjMhC9OjYCStyC3LfUlgB6/S2HaIuj1Cp4Fiz5QXlxbZxmEyk2IaKozjKbID9myNUig==
   dependencies:
     "@workduck-io/flexsearch" "0.7.22"
     "@workduck-io/mex-utils" "^0.0.9"

From c2d61faa50cf58f52c15bf3fecdfaf54f2e6a96e Mon Sep 17 00:00:00 2001
From: Dinesh Singh <dinesh@workduck.io>
Date: Sun, 7 May 2023 01:41:20 +0530
Subject: [PATCH 5/5] Inline Table to paragraph renderer

---
 apps/webapp/src/Components/Editor/Plateless.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/src/Components/Editor/Plateless.tsx b/apps/webapp/src/Components/Editor/Plateless.tsx
index c7cb9fb1d..d9405ee2d 100644
--- a/apps/webapp/src/Components/Editor/Plateless.tsx
+++ b/apps/webapp/src/Components/Editor/Plateless.tsx
@@ -15,8 +15,11 @@ import {
   ELEMENT_MENTION,
   ELEMENT_OL,
   ELEMENT_PARAGRAPH,
+  ELEMENT_TABLE,
   ELEMENT_TAG,
+  ELEMENT_TD,
   ELEMENT_TODO_LI,
+  ELEMENT_TR,
   ELEMENT_UL,
   mog
 } from '@mexit/core'
@@ -39,7 +42,10 @@ const InlineElementsArray = [
   ELEMENT_H3,
   ELEMENT_H4,
   ELEMENT_H5,
-  ELEMENT_H6
+  ELEMENT_H6,
+  ELEMENT_TABLE,
+  ELEMENT_TR,
+  ELEMENT_TD
 ] as const
 
 const MultiLineElementsArray = [
@@ -150,6 +156,9 @@ const useTypeMap = (multiline: boolean): TypeMap => {
         </a>
       )
     },
+    [ELEMENT_TABLE]: ({ children }) => <>{children}</>,
+    [ELEMENT_TR]: ({ children }) => <>{children}</>,
+    [ELEMENT_TD]: ({ children }) => <>{children}</>,
 
     /* Tag
     {
@@ -266,6 +275,7 @@ const RenderPlateless = React.memo<RenderPlatelessProps>(
       content &&
       content.map((node, i) => {
         if (Object.keys(typeMap).includes(node?.type)) {
+          console.log('RENDERING ITEM', { s: Object.keys(typeMap) })
           const RenderItem = typeMap[node?.type]
           return (
             <RenderItem key={`${node?.type}-${i}`} node={node}>