Small fixes post v0.7.0 (#101)

#101

* shortener tags fixed;

Signed-off-by: Sahil Shubham <[email protected]>

* fixed todos in readOnly editor;

Signed-off-by: Sahil Shubham <[email protected]>

* Added reminders info bar on the right;

Signed-off-by: Sahil Shubham <[email protected]>

* updated blockModal import;

Signed-off-by: Sahil Shubham <[email protected]>

* fix link hover overflow bug;

Signed-off-by: Sahil Shubham <[email protected]>

* fix block deletion;

Signed-off-by: Sahil Shubham <[email protected]>

* cross icon always in editor previews;

Signed-off-by: Sahil Shubham <[email protected]>

* fixed focus on click and scroll on outline click;

Signed-off-by: Sahil Shubham <[email protected]>

* now you can create reminders from combobox;

Signed-off-by: Sahil Shubham <[email protected]>

* a little better looking draft view;

Signed-off-by: Sahil Shubham <[email protected]>

* smaller reminders on webapp;

Signed-off-by: Sahil Shubham <[email protected]>

Author: sahil-shubham

apps/extension/src/Components/Editor/EditorPreview.tsx

@@ -121,11 +121,9 @@ const EditorPreview = ({
                   </EditorPreviewNoteName>
                 )}
                 {/* <TagsRelatedTiny nodeid={nodeid} /> */}
-                {allowClosePreview && (
-                  <Button transparent onClick={() => closePreview && closePreview()}>
-                    <Icon icon={closeCircleLine} />
-                  </Button>
-                )}
+                <Button transparent onClick={() => closePreview && closePreview()}>
+                  <Icon icon={closeCircleLine} />
+                </Button>
               </EditorPreviewControls>
             )}
             <EditorPreviewEditorWrapper>

apps/webapp/src/Actions/Components/Shortener.tsx

@@ -128,17 +128,15 @@ export const Shortener = () => {
         } else {
           const title = tags.filter((el) => el.name === 'title')[0].value.trim()
           if (!resultShortAlias) resultShortAlias = title
-          setUserTags([
-            { id: nanoid(), text: title.toString().split('-').join(', ').split('|').join(', ').split(', ')[0] }
-          ])
+          setUserTags([{ value: title.toString().split('-').join(', ').split('|').join(', ').split(', ')[0] }])
           setShort(resultShortAlias)
         }
       }
     }
   }
 
   const removeUserTag = (tag: Tag) => {
-    const updatedUserTags = userTags.filter((userTag) => tag.id !== userTag.id)
+    const updatedUserTags = userTags.filter((userTag) => tag.value !== userTag.value)
     setUserTags(updatedUserTags)
   }
   useEffect(() => {

apps/webapp/src/Components/Editor/ContentEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 import { usePlateEditorRef, selectEditor } from '@udecode/plate'
 import shallow from 'zustand/shallow'
@@ -26,6 +26,7 @@ import { useLayoutStore } from '../../Stores/useLayoutStore'
 
 const ContentEditor = () => {
   const { nodeId } = useParams()
+  const editorWrapperRef = useRef<HTMLDivElement>(null)
 
   const fetchingContent = useEditorStore((state) => state.fetchingContent)
   const setIsEditing = useEditorStore((store) => store.setIsEditing)
@@ -68,9 +69,19 @@ const ContentEditor = () => {
   const editorId = useMemo(() => getEditorId(node.nodeid, false), [node, fetchingContent])
   const editorRef = usePlateEditorRef()
 
-  const onFocusClick = () => {
+  const onFocusClick = (ev) => {
+    ev.preventDefault()
+    ev.stopPropagation()
+
     if (editorRef) {
-      selectEditor(editorRef, { focus: true })
+      if (editorWrapperRef.current) {
+        const el = editorWrapperRef.current
+        const hasScrolled = el.scrollTop > 0
+        // mog('ElScroll', { hasScrolled })
+        if (!hasScrolled) {
+          selectEditor(editorRef, { focus: true })
+        }
+      }
     }
   }
 
@@ -106,7 +117,7 @@ const ContentEditor = () => {
       <EditorInfoBar />
       {isBlockMode ? <BlockInfoBar /> : <Metadata node={node} />}
 
-      <EditorWrapper onClick={onFocusClick}>
+      <EditorWrapper ref={editorWrapperRef} onMouseUpCapture={onFocusClick}>
         <Editor
           readOnly={readOnly}
           nodeUID={nodeId}

apps/webapp/src/Components/Editor/Editor.tsx

@@ -7,7 +7,14 @@ import { LinkElement, MediaEmbedElement, TableWrapper } from '@mexit/shared'
 
 import TagWrapper from './TagWrapper'
 import BallonMarkToolbarButtons from './BalloonToolbar/EditorBalloonToolbar'
-import { ELEMENT_ILINK, ELEMENT_INLINE_BLOCK, ELEMENT_TAG, ELEMENT_TODO_LI, NodeEditorContent } from '@mexit/core'
+import {
+  ELEMENT_ILINK,
+  ELEMENT_INLINE_BLOCK,
+  ELEMENT_PARAGRAPH,
+  ELEMENT_TAG,
+  ELEMENT_TODO_LI,
+  NodeEditorContent
+} from '@mexit/core'
 import Todo from '../Todo'
 import { useEditorChange } from '@mexit/shared'
 import { EditorStyles } from '@mexit/shared'
@@ -23,6 +30,7 @@ import { TagComboboxItem } from '../../Editor/Components/Tags/TagComboboxItem'
 import { QuickLinkComboboxItem } from '../../Editor/Components/QuickLink/QuickLinkComboboxItem'
 import components from '../../Editor/Components/EditorPreviewComponents'
 import { useNewNodes } from '../../Hooks/useNewNodes'
+import { useOpenReminderModal } from '../Reminders/CreateReminderModal'
 
 const EditorWrapper = styled(EditorStyles)`
   flex: 1;
@@ -48,6 +56,8 @@ const Editor: React.FC<EditorProps> = ({ nodeUID, nodePath, content, readOnly, o
   const addILink = useDataStore((store) => store.addILink)
   const slashCommands = useDataStore((store) => store.slashCommands)
 
+  const { openReminderModal } = useOpenReminderModal()
+
   const { getSnippetConfigs } = useSnippets()
 
   const snippetConfigs = getSnippetConfigs()
@@ -138,6 +148,13 @@ const Editor: React.FC<EditorProps> = ({ nodeUID, nodePath, content, readOnly, o
       table: {
         slateElementType: ELEMENT_TABLE,
         command: 'table'
+      },
+      remind: {
+        slateElementType: ELEMENT_PARAGRAPH,
+        command: 'remind',
+        onExtendedCommand: (newValue, editor) => {
+          openReminderModal(newValue)
+        }
       }
     }
   }
@@ -168,7 +185,7 @@ const Editor: React.FC<EditorProps> = ({ nodeUID, nodePath, content, readOnly, o
 
   const editorOptions: MexEditorOptions = {
     editableProps: {
-      readOnly: readOnly,
+      readOnly,
       // placeholder: "Let's try something here...",
       autoFocus: true
     },

apps/webapp/src/Components/Editor/Toolbar.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import timerFlashLine from '@iconify/icons-ri/timer-flash-line'
 import focusLine from '@iconify/icons-ri/focus-line'
 import { useSingleton } from '@tippyjs/react'
 import shareLine from '@iconify/icons-ri/share-line'
@@ -12,6 +13,7 @@ import { InfoTools, NodeInfo } from '@mexit/shared'
 import BookmarkButton from '../Buttons/BookmarkButton'
 import { useEditorStore } from '../../Stores/useEditorStore'
 import NodeRenameOnlyTitle from './Rename/NodeRename'
+import useToggleElements from '../../Hooks/useToggleElements'
 
 const Toolbar = () => {
   const fetchingContent = useEditorStore((state) => state.fetchingContent)
@@ -21,8 +23,11 @@ const Toolbar = () => {
   const [source, target] = useSingleton()
   const shortcuts = useHelpStore((store) => store.shortcuts)
   const showShareOptions = useLayoutStore((store) => store.showShareOptions)
+  const infobar = useLayoutStore((store) => store.infobar)
   const toggleShareOptions = useLayoutStore((store) => store.toggleShareOptions)
 
+  const { toggleReminder } = useToggleElements()
+
   return (
     <NodeInfo {...getFocusProps(focusMode)}>
       <NodeRenameOnlyTitle />
@@ -42,6 +47,15 @@ const Toolbar = () => {
             <BookmarkButton nodeid={nodeid} />
           </span>
         </ToolbarTooltip> */}
+        <IconButton
+          size={24}
+          singleton={target}
+          icon={timerFlashLine}
+          shortcut={shortcuts?.showReminder?.keystrokes}
+          title="Reminders"
+          highlight={infobar.mode === 'reminders'}
+          onClick={toggleReminder}
+        />
         <IconButton
           singleton={target}
           size={24}

apps/webapp/src/Components/EditorInfobar/BlockInfobar.tsx

@@ -8,19 +8,19 @@ import moveToIcon from '@iconify/icons-ri/anticlockwise-2-fill'
 import useBlockStore from '../../Stores/useBlockStore'
 import { Button, MexIcon } from '@mexit/shared'
 import { ButtonWrapper } from '../../Style/Settings'
-import { ContextMenuActionType } from "@mexit/core"
+import { ContextMenuActionType } from '@mexit/core'
 
 export const PrimaryText = styled.span`
   color: ${({ theme }) => theme.colors.primary};
 `
 
-
 const BlockMenu = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   margin: 2px 0;
+  z-index: 999999;
 
   p {
     margin: 0;
@@ -29,39 +29,39 @@ const BlockMenu = styled.div`
 `
 
 const BlockInfoBar = () => {
-    const setIsModalOpen = useBlockStore((store) => store.setIsModalOpen)
-    const isBlockMode = useBlockStore((store) => store.isBlockMode)
-    const blocks = useBlockStore((store) => store.blocks)
-    const setIsBlockMode = useBlockStore((store) => store.setIsBlockMode)
+  const setIsModalOpen = useBlockStore((store) => store.setIsModalOpen)
+  const isBlockMode = useBlockStore((store) => store.isBlockMode)
+  const blocks = useBlockStore((store) => store.blocks)
+  const setIsBlockMode = useBlockStore((store) => store.setIsBlockMode)
 
-    const theme = useTheme()
-    const length = Object.values(blocks).length
-    const blockHeading = length === 0 ? 'Select Blocks' : `Block${length > 1 ? 's' : ''} selected:`
+  const theme = useTheme()
+  const length = Object.values(blocks).length
+  const blockHeading = length === 0 ? 'Select Blocks' : `Block${length > 1 ? 's' : ''} selected:`
 
-    return (
-        <BlockMenu>
-            <Button onClick={() => setIsBlockMode(!isBlockMode)}>
-                <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={xBold} /> Cancel
-            </Button>
-            <p>
-                {blockHeading}
-                {length > 0 && <PrimaryText>&#32;{length}</PrimaryText>}
-            </p>
-            <ButtonWrapper>
-                <Button onClick={() => setIsModalOpen(ContextMenuActionType.move)}>
-                    <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={moveToIcon} />
-                    Move
-                </Button>
-                <Button onClick={() => setIsModalOpen(ContextMenuActionType.send)}>
-                    <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={sendToIcon} /> Send
-                </Button>
-                <Button onClick={() => setIsModalOpen(ContextMenuActionType.del)}>
-                    <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={deleteBin6Line} />
-                    Delete
-                </Button>
-            </ButtonWrapper>
-        </BlockMenu>
-    )
+  return (
+    <BlockMenu>
+      <Button onClick={() => setIsBlockMode(!isBlockMode)}>
+        <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={xBold} /> Cancel
+      </Button>
+      <p>
+        {blockHeading}
+        {length > 0 && <PrimaryText>&#32;{length}</PrimaryText>}
+      </p>
+      <ButtonWrapper>
+        <Button onClick={() => setIsModalOpen(ContextMenuActionType.move)}>
+          <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={moveToIcon} />
+          Move
+        </Button>
+        <Button onClick={() => setIsModalOpen(ContextMenuActionType.send)}>
+          <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={sendToIcon} /> Send
+        </Button>
+        <Button onClick={() => setIsModalOpen(ContextMenuActionType.del)}>
+          <MexIcon fontSize={20} noHover color={theme.colors.primary} icon={deleteBin6Line} />
+          Delete
+        </Button>
+      </ButtonWrapper>
+    </BlockMenu>
+  )
 }
 
 export default BlockInfoBar

apps/webapp/src/Components/EditorInfobar/PublicNodeMetadata.tsx

@@ -13,7 +13,7 @@ const Data = styled.div`
 `
 
 const PublicNodeMetadata = ({ metadata }) => {
-  console.log(metadata)
+  // console.log(metadata)
   const isEmpty =
     metadata &&
     metadata.createdAt === undefined &&