Add & Move Blocks In Views

.changeset/fuzzy-shoes-travel.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Move Blocks, Add Blocks In Views Added

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>
   )
 }

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} {

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;
+  }
+`

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'
@@ -71,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])
@@ -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>
   )
 }

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}>

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]

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
       }
     }
 

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 />