11 |
12 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/icons/BulletPointsDots.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/components/Elements/Tab/Tab.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | type TabProps = {
4 | isActive?: boolean;
5 | onClickHandler: () => void;
6 | className?: string;
7 | children?: JSX.Element[] | JSX.Element;
8 | };
9 | const Tab = ({ isActive = false, onClickHandler, children, className }: TabProps) => (
10 |
22 | );
23 |
24 | export default Tab;
25 |
--------------------------------------------------------------------------------
/src/components/NotesFolder/utils/filterNotes.ts:
--------------------------------------------------------------------------------
1 | import { Note } from '@utils/types/Note';
2 |
3 | export type Filter = {
4 | showFavorites: boolean;
5 | title?: string;
6 | };
7 |
8 | export const getFilteredNotes = (filter: Filter, notes?: Array
13 |
15 | Should not be visible
9 |Should be visible
19 |
21 | {props.children}
22 |
23 | )}
24 |
11 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/static/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Note It - Notes & OCR",
3 | "description": "A feature-packed note-taking extension with OCR support.",
4 | "author": "Muhamet Smaili",
5 | "version": "0.0.1",
6 | "manifest_version": 3,
7 | "icons": {
8 | "16": "./icon/16 x 16.png",
9 | "32": "./icon/32 x 32.png",
10 | "48": "./icon/48 x 48.png",
11 | "128": "./icon/128 x 128.png"
12 | },
13 | "action": {
14 | "default_title": "NoteIt"
15 | },
16 | "background": {
17 | "service_worker": "background.js"
18 | },
19 | "permissions": ["tabs", "activeTab", "scripting", "clipboardWrite", "storage", "unlimitedStorage", "contextMenus"],
20 | "host_permissions": ["Are you sure you want to delete this note?
12 |
13 |
16 |
19 |
20 |
23 |
37 | Loading
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/provider/tabContext.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | //@es-ignore
4 | enum Actions {
5 | TAB_HANDLER = 'TAB_HANDLER',
6 | }
7 |
8 | type Dispatch = (action: Action) => void;
9 | type State = { activeTab: number };
10 | type ActiveTabProviderProps = { children: React.ReactNode };
11 | interface Action {
12 | type: keyof typeof Actions;
13 | payload: number;
14 | }
15 |
16 | const ActiveTabStateContext = React.createContext<{ state: State; dispatch: Dispatch } | undefined>(undefined);
17 |
18 | function activeTabProvider(state: State, action: Action) {
19 | switch (action.type) {
20 | case 'TAB_HANDLER': {
21 | return { activeTab: action.payload };
22 | }
23 | default: {
24 | throw new Error(`Unhandled action type: ${action.type}`);
25 | }
26 | }
27 | }
28 |
29 | const ActiveTabProvider = ({ children }: ActiveTabProviderProps) => {
30 | const [state, dispatch] = React.useReducer(activeTabProvider, { activeTab: 0 });
31 | const value = { state, dispatch };
32 | return
17 | {
34 | setValue(Number(val));
35 | editor
36 | .chain()
37 | .focus()
38 | .toggleHeading({ level: Number(val) as Level })
39 | .run();
40 | }}
41 | />
42 |
43 | );
44 | };
45 |
46 | const headingStyle = [
47 | {
48 | value: 1,
49 | label: '',
50 | },
51 | {
52 | value: 2,
53 | label: '',
54 | },
55 | {
56 | value: 3,
57 | label: '',
58 | },
59 | ];
60 |
--------------------------------------------------------------------------------
/src/components/Elements/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonHTMLAttributes, forwardRef } from 'react';
2 | import clsx from 'clsx';
3 | import { Spinner } from '@components/Elements';
4 |
5 | const variants = {
6 | primary: 'bg-light border border-primary text-secondary',
7 | inverse: 'bg-white text-blue-prussian active:bg-gray-true',
8 | };
9 |
10 | const sizes = {
11 | sm: ' text-sm', //py-1 px-1
12 | md: 'py-1 px-2 text-md',
13 | };
14 |
15 | type ButtonProps = {
16 | variant?: keyof typeof variants;
17 | size?: keyof typeof sizes;
18 | isLoading?: boolean;
19 | active?: boolean;
20 | icon?: JSX.Element;
21 | } & ButtonHTMLAttributes
19 | editor
20 | .chain()
21 | .focus()
22 | .toggleHeading({ level: Number(value) as Level })
23 | .run()
24 | }
25 | >
26 |
28 |
30 | onTabClick(0)} isActive={activeTab === 0}>
34 |
36 | onTabClick(1)} isActive={activeTab === 1}>
37 |
39 | onTabClick(2)} isActive={activeTab === 2}>
40 |
42 | onTabClick(3)} isActive={activeTab === 3} className="mt-auto mb-2">
43 |
45 |
46 | );
47 | };
48 |
49 | export default Dashboard;
50 |
--------------------------------------------------------------------------------
/src/styles/editor.css:
--------------------------------------------------------------------------------
1 | /* Basic editor styles */
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
3 |
4 | .ProseMirror {
5 | font-family: 'Poppins', sans-serif;
6 | min-width: 658px;
7 | min-height: 480px;
8 | max-height: calc(100vh - 70px);
9 | overflow-y: auto;
10 | padding-right: 5px;
11 | font-size: 1rem;
12 | @apply border-none text-body;
13 | }
14 |
15 | .ProseMirror-focused {
16 | border: none;
17 | outline: none;
18 | }
19 |
20 | .ProseMirror p {
21 | margin-top: 2px;
22 | }
23 |
24 | .ProseMirror.ProseMirror-focused {
25 | border: none;
26 | focus: none;
27 | }
28 |
29 | .ProseMirror code {
30 | display: block;
31 | /* background: theme('colors.blue.prussian' / 90%); */
32 | width: 100%;
33 | padding: 1rem;
34 | @apply rounded-sm text-light bg-acent;
35 | }
36 |
37 | .ProseMirror img {
38 | border-radius: 5px;
39 | }
40 |
41 | .ProseMirror ul {
42 | @apply pl-7 list-disc;
43 | }
44 |
45 | .ProseMirror blockquote {
46 | @apply pl-7 ml-5 border-l-2 border-solid italic border-primary text-light2;
47 | /* border-color: theme('colors.blue.prussian' / 20%); */
48 | /* color: theme('colors.blue.prussian' / 80%); */
49 | }
50 |
51 | .ProseMirror h1 {
52 | @apply text-xl font-bold text-light;
53 | }
54 |
55 | .ProseMirror h2 {
56 | @apply text-md font-bold text-light;
57 | }
58 |
59 | .ProseMirror h3 {
60 | @apply text-sm font-bold text-light;
61 | }
62 |
63 | .ProseMirror a {
64 | /* color: theme('colors.blue.prussian'); */
65 | text-decoration: underline;
66 | @apply text-light;
67 | }
68 |
69 | .ProseMirror a:hover {
70 | cursor: pointer;
71 | }
72 |
--------------------------------------------------------------------------------
/src/icons/ColorPalette.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/popup/popup.tsx:
--------------------------------------------------------------------------------
1 | import '@styles/scrollbar.css';
2 | import '@styles/tailwind.css';
3 | import { rootRender } from '@utils/render';
4 | import React from 'react';
5 |
6 | import Dashboard from '@components/Dashboard/Dashboard';
7 | import { TabContent } from '@components/Elements';
8 |
9 | import { Settings } from '@components/settings/settings';
10 | import { preloadSettings, useStorage } from '@hooks/useStore';
11 | import { ActiveTabProvider, useTab } from '../provider/tabContext';
12 | // Tab contents
13 | const NoteEditor = React.lazy(() => import(/* webpackPrefetch: true */ '@components/NoteEditor/NoteEditor'));
14 | const FolderNotes = React.lazy(() => import('@components/NotesFolder/NotesFolder'));
15 | const Ocr = React.lazy(() => import('@components/Ocr/Ocr'));
16 |
17 | const App: React.FC = () => {
18 | const {
19 | state: { activeTab },
20 | } = useTab();
21 |
22 | const [settings] = useStorage('settings', { theme: 'light' });
23 |
24 | return (
25 |
31 |
33 |
30 |
32 |
34 |
35 |
37 |
38 |
40 |
41 |
43 |
44 | );
45 | };
46 |
47 | await preloadSettings();
48 | rootRender.render(
49 |
27 |
52 | );
53 | };
54 | rootRender.render(
31 |
38 |
51 |
32 |
34 |
35 |
37 |
18 |
19 |
22 |
35 | );
36 | }
37 |
38 | type ApperanceItemProps = {
39 | onChange: (e: React.FormEvent
19 |
22 | -
23 | {themes.map((t) => (
24 |
-
25 |
31 |
32 | ))}
33 |
37 | {confirmDelete ? (
38 | note.id && onDeleteNoteHandler(note.id)}
41 | />
42 | ) : null}
43 |
47 | );
48 | };
49 |
50 | export default NoteContent;
51 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 |
3 | const backgroundColors = {
4 | primary: 'hsl(var(--color-bg-primary) /
23 |
48 | setValue(val)}
53 | />
54 |
55 | );
56 | },
57 | );
58 | SelectField.displayName = 'Select-field';
59 |
--------------------------------------------------------------------------------
/src/components/Ocr/ImageDropzone.tsx:
--------------------------------------------------------------------------------
1 | import AddCamera from '@icons/AddCamera.svg';
2 | import Upload from '@icons/Upload.svg';
3 | import Close from '@icons/X.svg';
4 | import clsx from 'clsx';
5 | import { useDropzone } from 'react-dropzone';
6 |
7 | type ImageDropzoneProps = {
8 | droppedImage: Blob | undefined;
9 | clearImage: () => void;
10 | onDrop: (acceptedFiles: File[]) => void;
11 | };
12 |
13 | export const ImageDropzone = ({ droppedImage, clearImage, onDrop }: ImageDropzoneProps) => {
14 | const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
15 | onDrop,
16 | maxFiles: 1,
17 | noClick: true,
18 | noKeyboard: true,
19 | });
20 |
21 | return (
22 |
23 | {droppedImage ? (
24 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/components/NoteEditor/MenuBar/MenuItem/SaveNote.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@components/Elements';
2 | import { useStorage } from '@hooks/useStore';
3 | import Save from '@icons/Save.svg';
4 | import { Editor } from '@tiptap/react';
5 | import { emptyNote } from '@utils/storage';
6 | import { Note } from '@utils/types/Note';
7 | import { useTab } from '../../../../provider/tabContext';
8 |
9 | type SaveNoteProps = { editor: Editor };
10 |
11 | export const SaveNote = ({ editor }: SaveNoteProps) => {
12 | const { dispatch } = useTab();
13 | const [notes, setNotes] = useStorage('notes');
14 | const [currentNote, setCurrentNote] = useStorage('currentNote');
15 |
16 | const saveNoteHandler = async () => {
17 | if (editor.getText().trim() === '') {
18 | return;
19 | }
20 |
21 | const title = editor.getText().split('\n')[0];
22 |
23 | if (currentNote && currentNote.id && notes) {
24 | const findNoteIndex = notes.findIndex((note) => note.id === currentNote.id);
25 | notes.splice(findNoteIndex, 1, {
26 | ...currentNote,
27 | title,
28 | noteContent: editor.getJSON(),
29 | updated: new Date(Date.now()).toLocaleDateString(),
30 | });
31 | setNotes(notes);
32 | setCurrentNote(emptyNote);
33 | editor.commands.clearContent();
34 | } else {
35 | // create new note
36 | createNewNoteHandler(notes);
37 | }
38 | dispatch({ type: 'TAB_HANDLER', payload: 1 }); // go to notes folder
39 | };
40 |
41 | const createNewNoteHandler = (notes?: Note[]) => {
42 | const title = editor.getText().split('\n')[0];
43 | const newNote = {
44 | title,
45 | id: Date.now() + (notes?.length || 0),
46 | created: new Date(Date.now()).toLocaleDateString(),
47 | isFavorite: false,
48 | noteContent: editor.getJSON(),
49 | };
50 |
51 | if (!notes) {
52 | notes = [];
53 | }
54 | notes.push(newNote);
55 |
56 | setNotes(notes);
57 | setCurrentNote(emptyNote);
58 | editor.commands.clearContent();
59 | };
60 |
61 | return (
62 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # Note It
3 |
4 | **NoteIt is a feature-packed, note-taking extension with OCR support for chrome.
5 | You can take notes, convert images to text, download notes to pdf, and more.**
6 |
7 | [](https://chrome.google.com/webstore/detail/noteit/gkfjolpbhbinhoaehiejoglclongclld)   
8 |
9 | * * *
10 |
11 | ## Features
12 |
13 | - ✍ Take notes in rich formatting.
14 |
15 | - ✅ Markdown support
16 |
17 | - 👀 Open the extension as a pop-up or re-sizable window.
18 | - 🎨 Three different themes: Light, dark & dim.
19 | - 📸 Take a screenshot of the active tab and:
20 |
21 | - ✂️ Copy the cropped image
22 | - 📜 Convert to text (OCR support)
23 | - ✔ Download the cropped image
24 |
25 | - 💾 Save notes on your local machine
26 |
27 | - 🗃 Notes folder
28 | - ⭐ Make notes as favorite
29 |
30 | - 📁 Download note in PDF format
31 | - 🗄 Convert your images to text (this feature works only when the extension is in window mode)
32 |
33 | ### [Check video](https://www.youtube.com/watch?v=jxBAMwxbk78 "https://www.youtube.com/watch?v=jxBAMwxbk78")
34 |
35 |
36 |
37 | ## Contributors
38 |
39 | [](https://github.com/MuhametSmaili) [](https://github.com/bkrmadtya)
40 |
41 | 🎨 Designed by : [Altin Smaili](https://www.figma.com/file/h66qGHcw4DzCZMotoqioTV/Note-It?node-id=2%3A121)
42 |
43 |
44 |
45 | ## Main libraries used
46 |
47 | - [React](https://reactjs.org/)
48 | - [Tiptap](https://tiptap.dev/)
49 | - [tesseract.js](https://tesseract.projectnaptha.com/)
50 | - [pdfmake](https://pdfmake.org/#/)
51 | - [html-to-pdfmake](https://github.com/Aymkdn/html-to-pdfmake)
52 |
--------------------------------------------------------------------------------
/src/components/NoteEditor/NoteEditor.tsx:
--------------------------------------------------------------------------------
1 | import { useStorage } from '@hooks/useStore';
2 | import Image from '@tiptap/extension-image';
3 | import Link from '@tiptap/extension-link';
4 | import Underline from '@tiptap/extension-underline';
5 | import { Editor, EditorContent, useEditor } from '@tiptap/react';
6 | import StarterKit from '@tiptap/starter-kit';
7 | import { localStorage } from '@utils/storage';
8 | import debounce from 'lodash.debounce';
9 | import { useCallback, useEffect, useMemo } from 'react';
10 | import { MenuBar } from './MenuBar/MenuBar';
11 | import { paste } from './utils/pasteHandler';
12 | // eslint-disable-next-line @typescript-eslint/naming-convention
13 | Image.configure({ HTMLAttributes: { class: 'block mx-auto' } });
14 |
15 | const NoteEditor = () => {
16 | const [currentNote, setCurrentNote] = useStorage('currentNote');
17 |
18 | const editor = useEditor({
19 | extensions: [StarterKit, Image, Link, Underline],
20 | content: currentNote?.noteContent,
21 | editorProps: {
22 | handleDOMEvents: {
23 | paste,
24 | },
25 | },
26 | onUpdate: ({ editor }) => debouncedEventHandler(editor),
27 | onCreate: ({ editor }) => {
28 | localStorage.get('currentNote').then((note) => {
29 | if (note) {
30 | editor.commands.setContent(note.noteContent);
31 | }
32 | });
33 | },
34 | });
35 |
36 | const saveNoteHandler = useCallback(
37 | (updatedEditor: Editor) => {
38 | console.log('calling here');
39 | if (updatedEditor && currentNote) {
40 | setCurrentNote({
41 | ...currentNote,
42 | noteContent: updatedEditor?.getJSON(),
43 | });
44 | }
45 | },
46 | [currentNote, setCurrentNote],
47 | );
48 |
49 | const debouncedEventHandler = useMemo(() => debounce(saveNoteHandler, 1000), [saveNoteHandler]);
50 |
51 | useEffect(() => {
52 | return () => {
53 | debouncedEventHandler.cancel(); // 👉 https://docs-lodash.com/v4/debounce/#:~:text=comes%20with%20a%C2%A0cancelmethod%20to%20cancel%20delayed%C2%A0func
54 | };
55 | }, [debouncedEventHandler]);
56 |
57 | return (
58 | <>
59 | {editor &&
25 | })
29 |
30 | ) : (
31 |
26 |
28 |
32 |
49 | )}
50 |
33 |
34 |
48 |
35 |
47 |
37 | {isDragActive ? (
38 | ' Drop here...'
39 | ) : (
40 |
41 |
46 |
59 |
62 | {showIndex && (
63 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/src/components/NotesFolder/NotesFolder.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@components/Elements';
2 | import { useStorage } from '@hooks/useStore';
3 | import StarIcon from '@icons/Star.svg';
4 | import { emptyNote } from '@utils/storage';
5 | import { ChangeEvent, useMemo, useState } from 'react';
6 | import { useTab } from '../../provider/tabContext';
7 | import NoteContent from './Note/NoteContent';
8 | import { SearchNotes } from './SearchNotes';
9 | import { Filter, getFilteredNotes } from './utils/filterNotes';
10 |
11 | const NotesFolder = () => {
12 | const [filter, setFilter] = useState
64 | {currentPosition + 1}
65 |
66 | )}
67 |
70 |
38 |
55 |
56 | {visibleNotes &&
57 | visibleNotes?.map((note) => (
58 |
61 |
62 | );
63 | };
64 |
65 | export default NotesFolder;
66 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["react"],
3 | "extends": [
4 | "eslint:recommended",
5 | "plugin:@typescript-eslint/recommended",
6 | "plugin:prettier/recommended",
7 | "plugin:react/recommended",
8 | "plugin:react-hooks/recommended"
9 | ],
10 | "ignorePatterns": [".eslintrc.json", "build/**/*", "node_modules/**/*", "webpack/*"],
11 | "parser": "@typescript-eslint/parser",
12 | "overrides": [{ "settings": { "react": { "version": "detect" } }, "files": ["**/*.ts", "**/*.tsx"] }],
13 | "rules": {
14 | "react/jsx-uses-react": "off",
15 | "react/react-in-jsx-scope": "off",
16 | "@typescript-eslint/class-literal-property-style": ["error"],
17 | "@typescript-eslint/explicit-function-return-type": ["off"],
18 | "@typescript-eslint/explicit-module-boundary-types": "off",
19 | "@typescript-eslint/interface-name-prefix": "off",
20 | "@typescript-eslint/naming-convention": [
21 | "error",
22 | {
23 | "format": ["camelCase", "PascalCase"],
24 | "selector": "default"
25 | },
26 | {
27 | "format": ["camelCase", "UPPER_CASE", "PascalCase"],
28 | "selector": "variable"
29 | },
30 | {
31 | "format": ["UPPER_CASE"],
32 | "selector": "enumMember"
33 | },
34 | {
35 | "format": ["camelCase", "PascalCase"],
36 | "leadingUnderscore": "allow",
37 | "selector": "parameter",
38 | "trailingUnderscore": "allow"
39 | },
40 | {
41 | "format": ["camelCase"],
42 | "leadingUnderscore": "allow",
43 | "modifiers": ["private"],
44 | "selector": "memberLike"
45 | },
46 | {
47 | "format": ["camelCase", "snake_case"],
48 | "leadingUnderscore": "allow",
49 | "selector": "objectLiteralProperty"
50 | },
51 | {
52 | "format": ["PascalCase"],
53 | "selector": "typeLike"
54 | }
55 | ],
56 | "@typescript-eslint/no-dupe-class-members": ["error"],
57 | "@typescript-eslint/no-empty-function": ["error"],
58 | "@typescript-eslint/no-explicit-any": ["warn"],
59 | "@typescript-eslint/no-unused-vars": [
60 | "warn",
61 | {
62 | "vars": "all",
63 | "args": "after-used",
64 | "ignoreRestSiblings": true,
65 | "varsIgnorePattern": "^_",
66 | "argsIgnorePattern": "^_"
67 | }
68 | ],
69 | "prettier/prettier": [
70 | "error",
71 | {
72 | "singleQuote": true
73 | },
74 | {
75 | "usePrettierrc": true
76 | }
77 | ]
78 | },
79 | "env": { "webextensions": true }
80 | }
81 |
--------------------------------------------------------------------------------
/src/icons/note-it.svg:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/components/NotesFolder/Note/NoteHeader.tsx:
--------------------------------------------------------------------------------
1 | import { Note } from '@utils/types/Note';
2 | import { useState } from 'react';
3 | import { useTab } from '../../../provider/tabContext';
4 | // Icons
5 | import { useStorage } from '@hooks/useStore';
6 | import DeleteIcon from '@icons/Delete.svg';
7 | import StarIcon from '@icons/Star2.svg';
8 | import clsx from 'clsx';
9 |
10 | type NoteHeaderProps = {
11 | note: Note;
12 | };
13 |
14 | const NoteHeader = ({ note }: NoteHeaderProps) => {
15 | const { dispatch } = useTab();
16 | const [_, setCurrentNote] = useStorage('currentNote');
17 |
18 | const setCurrentNoteHandler = () => {
19 | setCurrentNote(note);
20 | dispatch({ type: 'TAB_HANDLER', payload: 0 }); // set the first tab as active tab
21 | };
22 |
23 | return (
24 |
25 |
32 |
33 | );
34 | };
35 | // TODO move buttons in own component
36 | export default NoteHeader;
37 |
38 | type SingleNoteFooterProps = {
39 | onDeleteNote: () => void;
40 | note: Note;
41 | };
42 | export function SingleNoteFooter({ note, onDeleteNote }: SingleNoteFooterProps) {
43 | const [favorite, setFavorite] = useState
59 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/src/utils/storage.ts:
--------------------------------------------------------------------------------
1 | import { Screenshot } from 'src/contentScript/frameContent';
2 | import { Note } from './types/Note';
3 |
4 | export type Theme = 'dark' | 'dim' | 'light';
5 |
6 | export type LocalSettings = {
7 | theme: Theme;
8 | windowType?: 'popup' | 'window';
9 | };
10 |
11 | export interface LocalStorage {
12 | screenshot?: Screenshot;
13 | notes?: Note[];
14 | currentNote?: Note;
15 | settings: LocalSettings;
16 | activeWindow?: Array<{ windowId: number }>;
17 | }
18 |
19 | export const emptyNote: Note = {
20 | id: undefined,
21 | title: 'Default',
22 | isFavorite: false,
23 | noteContent: '',
24 | created: new Date(Date.now()).toLocaleDateString(),
25 | };
26 |
27 | export class Storage{note.created || note.updated || 'no-date'}
60 |
61 |
68 |
71 |
72 | cropArea && onMouseUpHandler(cropArea)}
63 | >
64 | 
71 |
81 |
82 | );
83 | };
84 |
85 | rootRender.render(
86 |
30 | {/* setTitle(e.target.value)} required /> */}
31 |
34 |
37 |
45 |
53 |
61 |
107 |
108 |
109 | );
110 | };
111 |
--------------------------------------------------------------------------------
/src/components/Ocr/Ocr.tsx:
--------------------------------------------------------------------------------
1 | import { Button, SelectField, Spinner } from '@components/Elements';
2 | import { useStorage } from '@hooks/useStore';
3 | import PasteIcon from '@icons/PasteFromClipboard.svg';
4 | import { imageToText } from '@utils/image';
5 | import { tesseractLanguages } from '@utils/tesseractLanguage';
6 | import { useCallback, useState } from 'react';
7 | import { ImageDropzone } from './ImageDropzone';
8 |
9 | type StatusHandler = {
10 | type: 'LOADING' | 'DONE' | 'ERROR';
11 | message?: string;
12 | };
13 | const allowedMimeTypes = ['image/png', 'image/jpeg'];
14 |
15 | const Ocr = () => {
16 | const [droppedImage, setDroppedImage] = useState
96 |
98 |
99 |
102 |
103 |
65 | setDroppedImage(undefined)} droppedImage={droppedImage} />
112 |
113 | )}
114 |
115 | );
116 | };
117 |
118 | export default Ocr;
119 |
--------------------------------------------------------------------------------
/src/contentScript/frameContent.tsx:
--------------------------------------------------------------------------------
1 | import { Button, SelectField, Spinner } from '@components/Elements';
2 | import '@styles/tailwind.css';
3 | import { blobToBase64, copyBlobToClipboard, CropArea, imageToBlob, imageToText } from '@utils/image';
4 | import { rootRender } from '@utils/render';
5 | import { localStorage } from '@utils/storage';
6 | import { tesseractLanguages } from '@utils/tesseractLanguage';
7 | import React, { useCallback, useEffect, useState } from 'react';
8 |
9 | export type Screenshot = {
10 | capturedImage: string;
11 | cropArea: CropArea;
12 | };
13 |
14 | type StatusHandler = {
15 | type: 'LOADING' | 'DONE' | 'ERROR';
16 | message?: string;
17 | };
18 |
19 | const FrameContent: React.FC = () => {
20 | const [status, setStatus] = useState
66 |
97 |
98 | {status?.type !== 'DONE' &&
67 | {/* } */}
74 | {/* /> */}
75 | }
83 | />
84 | setLanguage(e.target.value)}
88 | />
89 |
90 |
96 | {status?.message}
} 99 | {windowType && windowType === 'popup' && ( 100 |101 | Please use window type for local images, right-click on extension, and choose window 102 |
103 | )} 104 | 105 | {status?.type === 'LOADING' ? ( 106 |
107 |
109 | ) : (
110 | <>
111 |
90 |
128 | );
129 | };
130 |
131 | rootRender.render(
132 | Image cropped
91 |
92 |
127 |
93 | 
94 |
95 |
96 | setLanguage(e.target.value)}
99 | className="font-bold"
100 | disabled={status?.type === 'LOADING'}
101 | />
102 |
109 |
116 |
123 |
126 | {status?.type === 'LOADING' &&
124 | {status?.type === 'DONE' &&