muhammed-rahif / notepad Goto Github PK

There is already a button for find in Edit -> Find ( ctrl + f ) in text editor mode, but its not working. Words that matches the find string from user should highlight on textarea.

Solution I prefer :-

Use the npm module called highlight-within-textarea. To use this module we also need to install jquery. After installing both packages you need to done these task :-

• Popup a small input field when user clicks on Edit -> Find ( or the shortcut ctrl + f ). Highlight the words from small input field. And should update the highlight words in textarea when the small input (find input) changes.
• Replace vanilla js using jquery.

- document.getElementById("some-id") // code like this
+ $("#some-id") // replace by using jquery

Helpful resources :-

• https://www.npmjs.com/package/jquery
• https://www.npmjs.com/package/highlight-within-textarea
• https://github.com/lonekorean/highlight-within-textarea
• http://lonekorean.github.io/highlight-within-textarea
• https://stackoverflow.com/questions/32389568/search-for-a-string-from-a-textbox-in-a-textarea
• https://stackoverflow.com/questions/63793518/how-to-select-a-word-or-a-phrase-in-a-text-area-in-javascript

• Add github project link button in MenuBar, on dropdown 'help'.

Add link button in this dropdown, at bottom:-

• Should add a logo like the above buttons. Icons can be chosen from react-icons librery, use a matching comfortable logo from the librery. Select logo from here.

• The github project should open in new tab, which means you should use

window.open("https://github.com/Muhammed-Rahif/Notepad", "_blank");

or

<a href="https://github.com/Muhammed-Rahif/Notepad" target="_blank">

Prefer using window.open.

Describe the bug :-
While I was testing this site out on safari , there was this bug , while I was clicking on other options on the menu bar , the scroll down windows for other options like file , edit , mode was not closing
Since, this a cross platform OS software you are making , I guess it would be better to take account of other browsers as well

To Reproduce :-
Steps to reproduce the behavior:

1. Go to safari
2. Click on https://notepad.rahif.me/
3. Select any one of the options on menu bar for instance home
4. then select other option on the browser , like view
5. observe the error

Screenshots :-

Desktop (please complete the following information) :-

• OS: MacOS
• Browser Safari
• Version

The line to change :-

To Reproduce :-
Steps to reproduce the behavior:

1. Switch to dark mode
2. Maximize (fullscreen) the browser window
3. See black (#272727) color at the bottom of textarea

Expected behavior :-
Body background should be the same of background color of textarea

Screenshots :-

Desktop :-

• OS: Ubuntu 20.04
• Browser: Firefox
• Version: 95.0.1

The solution :-
Changing this line

- background-color: #272727;
+ background-color: var(--bg-color);

Hi everyone! 👋 It is the first issue that I am posting in this project. 😊🙈 Really awesome idea 🚀

Is your feature request related to a problem? Please describe.

In the native notepad, we can rename a file when saving it for the first time. Here, I am not able to rename the file before downloading it because of that in my download directory all the files which I download from you are ending with Untitled.txt (n) ( n = no. of the same file downloaded - 1 ). That got me annoyed 😛.

Describe the solution you'd like

This request is to introduce a feature in your project that allows users (like me) to be able to edit the name of the file which can be triggered either by shortcut key or In-place input.

• With In-place input, we can edit the file name at the place where it has been rendered i.e on the top. I found this library react-inline-input-edit useful to implement this feature.

• ctrl + r shortcut can be used to rename a file and when pressed we will focus the in-place input to edit.

Addition context

We also need to think of save as functionality in our project. Just a random idea for save as, we could open a Model with input to edit the filename and two buttons save and cancel. On saving button clicked, we will download the file and on cancel, we'll close the modal.

Thank you!! 😊

• Save the textarea contents instantly each time it changes, so if the user reloads the page the content will be there.

We haven't added Erase Mode in the Drawing Mode.
Can I work on this issue??

Adding an extra feature of Markdown text editor and viewer along with this notepad will be an added advantage.

There are many online markdown text editors available but not a tool that provides both a normal notepad option and a markdown editor.

I thought of adding this feature by a mode switching option.

Add tests for :-

• drawpad features
• dark mode and light mode
• shortcuts working properly
• helper file functions

• Divide MenuBar component into multiple components for in order to easy the development
• There are using multiple dropdown menus, so create base component for dropdown and reuse it wisely.

The multiple dropdowns are :-

1. File
2. Edit
3. View
4. Help

When we select the contents that we have wrote and click any of the menu items in the menu bar , the selection is gone . This will make difficult to user when user want to use edit options without using keyboard shortcuts.

Also, these bugs should be fixed by this problem: -

• Most of the Edit dropdown buttons aren't working yet on text editor mode such as copy, paste, cut, undo, and goto. This should also be fixed.

Expected behavior :-

• After opening a file, the textarea must be focused, so user can continue typing. That will increase UX as well.

The project made from a PWA template, but the service worker didn't registered yet. If service worker registered, users can install the app (chrome browsers). Other browsers cache the resources, and that will load our website faster.

You don't need to add so more code, because there is already the code added by the template. All you need to do is remove two letters from src/index.tsx.

The line :-

To Do :-

- serviceWorkerRegistration.unregister();
+ serviceWorkerRegistration.register();

• There is button for maximizing the window, so when user clicks on that the browser window will be setting to full screen.
• This can implement by using react-full-screen or screenfull (or maybe using vanilla js)

Like in the windows notepad, we want to customize the font settings such as font size, font family

Describe the bug :-
Font size changes restoring when changing from draw mode to text editor mode

To Reproduce :-
Steps to reproduce the behavior:

1. First, select a font size and font family from font settings
2. Then go to draw mode, then return to text editor mode
3. As you can see the font size is restored to the default value 14px.

Expected behavior :-
Font size should be the user changed value, that will never return to the default value until the user changes.

Screenshots :-

Desktop (please complete the following information) :-

• OS: Ubuntu 20.04
• Browser Firefox 96.0

Describe the bug :-
Recently I changed the production URL from 'https://rahif.me/Notepad' to 'https://notepad.rahif.me'. So every line that contains 'https://rahif.me/Notepad' should be overwritten by 'https://notepad.rahif.me'.

Additional context :-
To find where 'https://rahif.me/Notepad' link is used:-
https://github.com/Muhammed-Rahif/Notepad/search?q=rahif.me%2FNotepad

Example :-

- https://rahif.me/Notepad
+ https://notepad.rahif.me

Describe the bug :-
The fullscreen button on the MenuBar component not working.

To Reproduce :-
Steps to reproduce the behavior:

1. Go to Text editor mode
2. Click on 'View' button on menu bar
3. Then click on 'Fullscreen' button
4. See nothing works.

Expected behavior :-
The browser should toggle fullscreen each time when clicks on the button.

Screenshots :-
The button :-

Tips :-

• This can be implemented by using css variables.
• There is already a button for toggling between dark and white modes. The button is existing on MenuBar#L195.

Related article which is useful :- https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

Nowdays we are using drawing notebook often for online classes. So we add an options for color palette which can make it both notepad as well as a drawing notebook.