Improving bookmarking functionality

README.md

@@ -1,21 +1 @@
 Paper
-
-### Contributors
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://github.com/Raathigesh"><img src="https://avatars.githubusercontent.com/u/3108160?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Raathi Kugarajan</b></sub></a><br /><a href="https://github.com/Raathigesh/Jest tools/commits?author=Raathigesh" title="Code">💻</a> <a href="https://github.com/Raathigesh/Jest tools/commits?author=Raathigesh" title="Documentation">📖</a> <a href="#ideas-Raathigesh" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-Raathigesh" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-Raathigesh" title="Maintenance">🚧</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/extension/api/index.ts

@@ -108,6 +108,34 @@ export async function startApiServer(
         });
     });
 
+    // View specific endpoints
+    app.get('/activeFilePath', (req, res) => {
+        res.json({
+            activeFilePath: vscode.window.activeTextEditor?.document.fileName,
+        });
+    });
+
+    app.get('/getSelection', (req, res) => {
+        if (vscode.window.activeTextEditor?.selection.start) {
+            const selectionRange = new vscode.Range(
+                vscode.window.activeTextEditor?.selection.start,
+                vscode.window.activeTextEditor?.selection.end
+            );
+            const text = vscode.window.activeTextEditor?.document.getText(
+                selectionRange
+            );
+
+            const fullTxt = `${text}|${vscode.window.activeTextEditor?.document.fileName}|${selectionRange.start.line}|${selectionRange.start.character}|${selectionRange.end.line}|${selectionRange.end.character}`;
+            res.json({
+                selection: fullTxt,
+            });
+        }
+
+        res.json({
+            selection: null,
+        });
+    });
+
     return new Promise((resolve, reject) => {
         app.listen(port, () => {
             const url = `http://localhost:${port}`;

src/ui/App.tsx

@@ -82,6 +82,7 @@ function App() {
                 <Flex flexDir="column">
                     <Flex justifyContent="flex-end">
                         <CreateDoc
+                            activeDoc={activeDoc}
                             onActiveDocumentChange={() => {
                                 getContent();
                             }}

src/ui/CreateDoc.tsx

@@ -19,10 +19,14 @@ import { ClientDoc } from './types';
 const API_URL = `http://localhost:${(window as any).port || '4545'}`;
 
 interface Props {
+    activeDoc: ClientDoc | null;
     onActiveDocumentChange: () => void;
 }
 
-export default function CreateDoc({ onActiveDocumentChange }: Props) {
+export default function CreateDoc({
+    activeDoc,
+    onActiveDocumentChange,
+}: Props) {
     const [docs, setDocs] = useState<ClientDoc[]>([]);
     const [docName, setDocName] = useState('');
 
@@ -46,10 +50,6 @@ export default function CreateDoc({ onActiveDocumentChange }: Props) {
         onActiveDocumentChange();
     };
 
-    useEffect(() => {
-        getDocs();
-    }, []);
-
     const createDoc = async (name: string) => {
         const response = await fetch(`${API_URL}/create`, {
             method: 'POST',
@@ -66,7 +66,7 @@ export default function CreateDoc({ onActiveDocumentChange }: Props) {
     };
 
     return (
-        <Popover colorScheme="blackAlpha">
+        <Popover colorScheme="blackAlpha" onOpen={() => getDocs()}>
             <PopoverTrigger>
                 <Button
                     size="sm"
@@ -90,6 +90,13 @@ export default function CreateDoc({ onActiveDocumentChange }: Props) {
                     <PopoverBody>
                         {docs.map(item => (
                             <Flex
+                                backgroundColor={
+                                    activeDoc
+                                        ? activeDoc.id === item.id
+                                            ? '#090909'
+                                            : ''
+                                        : ''
+                                }
                                 _hover={{
                                     backgroundColor: '#090909',
                                 }}

src/ui/Editor.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
-import symbolBookmark from './editor-views/symbol-bookmark';
+import fileBookmark from './editor-views/file-bookmark';
 import treeView from './editor-views/file-tree';
-import rangeBookmark from './editor-views/range-bookmark';
+import selectionBookmark from './editor-views/selection-bookmark';
 import mindmap from './editor-views/mind-map';
 import './styles.css';
 import { Button, Flex, Tooltip } from '@chakra-ui/react';
-import { File, List, MousePointer, Map } from 'react-feather';
+import { File, List, MousePointer, Map, Folder } from 'react-feather';
+import { EditorFloatingButton } from './EditorFloatingButton';
 
 const API_URL = `http://localhost:${(window as any).port || '4545'}`;
 
@@ -20,9 +21,9 @@ const Editor = ({ content, onChange }: Props) => {
     const editor = useEditor({
         extensions: [
             StarterKit,
-            symbolBookmark,
+            fileBookmark,
             treeView,
-            rangeBookmark,
+            selectionBookmark,
             mindmap,
         ],
         content: '',
@@ -46,65 +47,45 @@ const Editor = ({ content, onChange }: Props) => {
         <>
             {editor && (
                 <FloatingMenu editor={editor}>
-                    <Flex backgroundColor="#2F2E31" borderRadius="4px">
-                        <Tooltip label="Bookmark a file">
-                            <Button
-                                size="xs"
-                                backgroundColor="#2F2E31"
-                                color="#f1f0ee"
-                                _hover={{ backgroundColor: '#090909' }}
-                                onClick={() => {
-                                    const focusResult = editor.chain().focus();
-                                    (focusResult as any)
-                                        .toggleReactComponent()
-                                        .run();
-                                }}
-                            >
-                                <File size="13px" strokeWidth="2px" />
-                            </Button>
-                        </Tooltip>
-                        <Tooltip label="Embed a file tree">
-                            <Button
-                                size="xs"
-                                backgroundColor="#2F2E31"
-                                color="#f1f0ee"
-                                _hover={{ backgroundColor: '#090909' }}
-                                onClick={() => {
-                                    const focusResult = editor.chain().focus();
-                                    (focusResult as any).toggleTreeView().run();
-                                }}
-                            >
-                                <List size="13px" strokeWidth="2px" />
-                            </Button>
-                        </Tooltip>
-                        <Tooltip label="Bookmark a range">
-                            <Button
-                                size="xs"
-                                backgroundColor="#2F2E31"
-                                color="#f1f0ee"
-                                _hover={{ backgroundColor: '#090909' }}
-                                onClick={() => {
-                                    const focusResult = editor.chain().focus();
-                                    (focusResult as any).toggleRange().run();
-                                }}
-                            >
+                    <Flex
+                        backgroundColor="#2F2E31"
+                        borderRadius="4px"
+                        boxShadow="0px 1px 0px 0px #3a3a3a"
+                    >
+                        <EditorFloatingButton
+                            tooltip="Bookmark active file"
+                            onClick={() => {
+                                const focusResult = editor.chain().focus();
+                                (focusResult as any)
+                                    .toggleReactComponent()
+                                    .run();
+                            }}
+                            icon={<File size="13px" strokeWidth="2px" />}
+                        />
+                        <Flex
+                            borderLeft="1px solid #1c1c1d"
+                            marginTop="2px"
+                            marginBottom="2px"
+                        />
+                        <EditorFloatingButton
+                            tooltip="Bookmark current selection"
+                            onClick={() => {
+                                const focusResult = editor.chain().focus();
+                                (focusResult as any).toggleRange().run();
+                            }}
+                            icon={
                                 <MousePointer size="13px" strokeWidth="2px" />
-                            </Button>
-                        </Tooltip>
-                        <Tooltip label="Mind map">
-                            <Button
-                                size="xs"
-                                backgroundColor="#2F2E31"
-                                color="#f1f0ee"
-                                _hover={{ backgroundColor: '#090909' }}
-                                onClick={() => {
-                                    const focusResult = editor.chain().focus();
-                                    (focusResult as any).toggleMindmap().run();
-                                }}
-                            >
-                                <Map size="13px" strokeWidth="2px" />
-                            </Button>
-                        </Tooltip>
+                            }
+                        />
+                        <Flex borderLeft="1px solid #1c1c1d" />
+                        <EditorFloatingButton
+                            tooltip="Embed a file tree"
+                            onClick={() => {
+                                const focusResult = editor.chain().focus();
+                                (focusResult as any).toggleTreeView().run();
+                            }}
+                            icon={<Folder size="13px" strokeWidth="2px" />}
+                        />
                     </Flex>
                 </FloatingMenu>
             )}

src/ui/EditorFloatingButton.tsx

@@ -0,0 +1,24 @@
+import { Tooltip, Button } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+    onClick: () => void;
+    tooltip: string;
+    icon: any;
+}
+
+export function EditorFloatingButton({ onClick, tooltip, icon }: Props) {
+    return (
+        <Tooltip label={tooltip}>
+            <Button
+                size="xs"
+                backgroundColor="#2F2E31"
+                color="#f1f0ee"
+                _hover={{ backgroundColor: '#090909' }}
+                onClick={onClick}
+            >
+                {icon}
+            </Button>
+        </Tooltip>
+    );
+}

src/ui/editor-views/file-bookmark/Component.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useState } from 'react';
+import { NodeViewWrapper } from '@tiptap/react';
+import {
+    Input,
+    Box,
+    IconButton,
+    Flex,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalCloseButton,
+    ModalBody,
+    ModalFooter,
+    Button,
+} from '@chakra-ui/react';
+import { Edit, Check, Edit2, Trash } from 'react-feather';
+import './styles.css';
+
+const API_URL = `http://localhost:${(window as any).port || '4545'}`;
+
+export default (props: any) => {
+    const setPath = (bookmark: string) => {
+        props.updateAttributes({
+            path: bookmark,
+        });
+    };
+
+    const getActivePath = async () => {
+        if (props.node.attrs.path === '') {
+            const response = await fetch(`${API_URL}/activeFilePath`);
+            const data = await response.json();
+            if (data.activeFilePath) {
+                setPath(data.activeFilePath);
+            }
+        }
+    };
+
+    useEffect(() => {
+        getActivePath();
+    }, []);
+
+    const openFile = (path: string) => {
+        fetch(`${API_URL}/open-file`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                filePath: path,
+            }),
+        });
+    };
+
+    return (
+        <NodeViewWrapper className="bookmarkRenderer">
+            <Flex
+                display="inline-flex"
+                backgroundColor="#0087FF"
+                borderRadius="3px"
+                paddingLeft="5px"
+                fontSize="13px"
+                cursor="pointer"
+                _hover={{ backgroundColor: '#0074da' }}
+                minHeight="25px"
+                alignItems="center"
+                onClick={() => openFile(props.node.attrs.path)}
+            >
+                <Flex marginLeft="5px">{props.node.attrs.path}</Flex>
+                <Flex
+                    _hover={{ backgroundColor: '#0074da' }}
+                    padding="6px"
+                    borderRadius="0px 3px 3px 0px"
+                    onClick={e => {
+                        e.stopPropagation();
+                        props.deleteNode();
+                    }}
+                    marginLeft="5px"
+                    height="100%"
+                    alignItems="center"
+                >
+                    <Trash size="12px" strokeWidth="2px" />
+                </Flex>
+            </Flex>
+        </NodeViewWrapper>
+    );
+};