Skip to content
This repository was archived by the owner on Mar 27, 2026. It is now read-only.

Commit 1467dbc

Browse files
Daniele-rolliDaniele-rolli
authored
Merge pull request #62 from Beaver-Notes/development
1.4.0 (r.c 2)
2 parents f5d0b19 + bdf5688 commit 1467dbc

9 files changed

Lines changed: 313 additions & 147 deletions

File tree

‎android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ android {
88
android.buildFeatures.buildConfig true
99
minSdkVersion rootProject.ext.minSdkVersion
1010
targetSdkVersion rootProject.ext.targetSdkVersion
11-
versionCode 2
11+
versionCode 3
1212
versionName "1.4.0"
1313
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
1414
def googleClientId = project.hasProperty("GOOGLE_CLIENT_ID") ? project.GOOGLE_CLIENT_ID : System.getenv("GOOGLE_CLIENT_ID") ?: ""

‎ios/App/App.xcodeproj/project.pbxproj‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -488,7 +488,7 @@
488488
CODE_SIGN_IDENTITY = "Apple Development";
489489
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
490490
CODE_SIGN_STYLE = Manual;
491-
CURRENT_PROJECT_VERSION = 8;
491+
CURRENT_PROJECT_VERSION = 9;
492492
DEVELOPMENT_TEAM = "";
493493
"DEVELOPMENT_TEAM[sdk=iphoneos*]" = F8U6VTU2DJ;
494494
GOOGLE_CLIENT_ID = "$(GOOGLE_CLIENT_ID)";
@@ -524,7 +524,7 @@
524524
CODE_SIGN_IDENTITY = "Apple Development";
525525
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
526526
CODE_SIGN_STYLE = Manual;
527-
CURRENT_PROJECT_VERSION = 8;
527+
CURRENT_PROJECT_VERSION = 9;
528528
DEVELOPMENT_TEAM = "";
529529
"DEVELOPMENT_TEAM[sdk=iphoneos*]" = F8U6VTU2DJ;
530530
GOOGLE_CLIENT_ID = "$(GOOGLE_CLIENT_ID)";

‎src/composable/FileUpload.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from "react";
2-
import { Directory, Filesystem, FilesystemDirectory } from "@capacitor/filesystem";
2+
import {
3+
Directory,
4+
Filesystem,
5+
FilesystemDirectory,
6+
} from "@capacitor/filesystem";
37
import Icon from "@/components/UI/Icon";
48

5-
69
interface FileUploadProps {
710
onFileUpload: (fileUrl: string, fileName: string) => void;
811
noteId: string;
@@ -88,22 +91,22 @@ const FileUploadComponent: React.FC<FileUploadProps> = ({
8891
{/* Conditionally render content based on `menu` value */}
8992
{menu ? (
9093
<div
91-
className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] cursor-pointer hover:bg-neutral-100 dark:hover:bg-[#353333] transition duration-200"
94+
className="flex items-center rounded-lg transition"
9295
aria-label={translations.menu.file || "Upload File"}
9396
>
9497
<label
9598
htmlFor="file-upload-input"
96-
className="flex items-center cursor-pointer"
99+
className="text-left flex overflow-hidden text-ellipsis whitespace-nowrap"
97100
aria-label={translations.menu.file || "Upload a file"}
98101
>
99102
{/* Icon */}
100-
<Icon name="File" />
103+
<Icon name="File" className={`mr-2 ltr:ml-2 text-lg`} />
101104

102105
{/* Text Container */}
103106
<div className="flex flex-col text-left">
104107
<h3
105-
className="font-medium text-neutral-900 dark:text-[color:var(--selected-dark-text)]"
106-
aria-hidden="true" // Hidden from screen readers
108+
className="text-lg font-medium"
109+
aria-hidden="true"
107110
>
108111
{translations.menu.file || "Upload File"}
109112
</h3>

‎src/composable/ImageUpload.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React from "react";
2-
import { Directory, Filesystem, FilesystemDirectory } from "@capacitor/filesystem";
2+
import {
3+
Directory,
4+
Filesystem,
5+
FilesystemDirectory,
6+
} from "@capacitor/filesystem";
37
import Icon from "@/components/UI/Icon";
48

59
interface ImageUploadProps {
@@ -100,20 +104,18 @@ const ImageUploadComponent: React.FC<ImageUploadProps> = ({
100104
<div>
101105
{/* Conditionally render content based on `menu` value */}
102106
{menu ? (
103-
<div className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] cursor-pointer hover:bg-neutral-100 dark:hover:bg-[#353333] transition duration-200">
107+
<div className="flex items-center rounded-lg transition">
104108
<button
105109
onClick={triggerFileInput}
106110
className="flex items-center cursor-pointer"
107111
aria-label={translations.menu.image}
108112
>
109113
{/* Icon */}
110-
<Icon name="ImageLine" />
114+
<Icon name="ImageLine" className={`mr-2 ltr:ml-2 text-lg`} />
111115

112116
{/* Text Container */}
113117
<div className="flex flex-col text-left">
114-
<h3 className="font-medium text-neutral-900 dark:text-[color:var(--selected-dark-text)]">
115-
{translations.menu.image}
116-
</h3>
118+
<h3 className="text-lg font-medium">{translations.menu.image}</h3>
117119
</div>
118120
</button>
119121

‎src/composable/VideoUpload.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React from "react";
2-
import { Directory, Filesystem, FilesystemDirectory } from "@capacitor/filesystem";
2+
import {
3+
Directory,
4+
Filesystem,
5+
FilesystemDirectory,
6+
} from "@capacitor/filesystem";
37
import Icon from "@/components/UI/Icon";
48

59
interface FileUploadProps {
@@ -78,7 +82,7 @@ const VideoUploadComponent: React.FC<FileUploadProps> = ({
7882
<div>
7983
{/* Conditionally render content based on `menu` value */}
8084
{menu ? (
81-
<div className="flex items-center p-2 rounded-lg text-black dark:text-[color:var(--selected-dark-text)] cursor-pointer hover:bg-neutral-100 dark:hover:bg-[#353333] transition duration-200">
85+
<div className="flex items-center rounded-lg transition">
8286
<button
8387
onClick={() => {
8488
const inputElement = document.getElementById(
@@ -88,17 +92,15 @@ const VideoUploadComponent: React.FC<FileUploadProps> = ({
8892
inputElement.click();
8993
}
9094
}}
91-
className="flex items-center"
95+
className="flex items-center cursor-pointer"
9296
aria-label={translations.menu.video}
9397
>
9498
{/* Icon */}
95-
<Icon name="Video" />
99+
<Icon name="Video" className={`mr-2 ltr:ml-2 text-lg`} />
96100

97101
{/* Text Container */}
98102
<div className="flex flex-col text-left">
99-
<h3 className="font-medium text-neutral-900 dark:text-[color:var(--selected-dark-text)]">
100-
{translations.menu.video}
101-
</h3>
103+
<h3 className="text-lg font-medium">{translations.menu.video}</h3>
102104
</div>
103105
</button>
104106

‎src/lib/tiptap/exts/commands/Commands.tsx‎

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// SlashMenu.tsx
2-
import React, { useEffect, useState } from "react";
2+
import React, { useEffect, useState, useRef } from "react";
33
import ImageUploadComponent from "@/composable/ImageUpload";
44
import FileUploadComponent from "@/composable/FileUpload";
55
import VideoUploadComponent from "@/composable/VideoUpload";
@@ -38,6 +38,7 @@ const Commands: React.FC<SlashMenuProps> = ({
3838
menu: {},
3939
});
4040
const [selectedIndex, setSelectedIndex] = useState(0);
41+
const menuRef = useRef<HTMLDivElement>(null);
4142

4243
useEffect(() => {
4344
const fetchTranslations = async () => {
@@ -49,6 +50,28 @@ const Commands: React.FC<SlashMenuProps> = ({
4950
fetchTranslations();
5051
}, []);
5152

53+
// Position adjustment effect
54+
useEffect(() => {
55+
if (menuRef.current) {
56+
const menu = menuRef.current;
57+
const rect = menu.getBoundingClientRect();
58+
const windowHeight = window.innerHeight;
59+
const windowWidth = window.innerWidth;
60+
61+
// Adjust vertical position if menu goes below viewport
62+
if (rect.bottom > windowHeight) {
63+
menu.style.transform = `translateY(-${rect.height + 10}px)`;
64+
}
65+
66+
// Adjust horizontal position if menu goes beyond viewport
67+
if (rect.right > windowWidth) {
68+
menu.style.transform = `${menu.style.transform || ""} translateX(-${
69+
rect.right - windowWidth + 20
70+
}px)`;
71+
}
72+
}
73+
}, [query]); // Re-run when query changes as menu size might change
74+
5275
const handlefileUpload = (fileUrl: string, fileName: string) => {
5376
editor.commands.deleteRange(range).run();
5477
editor?.chain().setFileEmbed(fileUrl, fileName).run();
@@ -414,32 +437,39 @@ const Commands: React.FC<SlashMenuProps> = ({
414437
}, [filteredItems.length]);
415438

416439
return (
417-
<UiList className="z-50 fixed rounded-lg shadow-lg border shadow-xl dark:border-neutral-600 p-2">
418-
{filteredItems.map((item, index) => (
419-
<UiListItem
420-
key={item.id}
421-
onClick={() => handleSelect({ item })}
422-
active={index === selectedIndex}
423-
className="cursor-pointer"
424-
>
425-
{item.type === "upload" && item.component ? (
426-
item.component
427-
) : (
428-
<div className="flex items-center rounded-lg transition">
429-
<div className="text-left flex overflow-hidden text-ellipsis whitespace-nowrap">
430-
<Icon
431-
name={item.icon as IconName}
432-
className={`mr-2 ltr:ml-2 text-lg ${item.className || ""}`}
433-
/>
434-
<h3 className="text-lg font-medium">
435-
{item.label}
436-
</h3>
440+
<div
441+
ref={menuRef}
442+
style={{
443+
maxWidth: "300px", // Prevent excessive width
444+
maxHeight: "400px", // Prevent excessive height
445+
overflow: "auto", // Allow scrolling if needed
446+
}}
447+
>
448+
<UiList className="z-50 rounded-lg shadow-lg border shadow-xl dark:border-neutral-600 p-2 bg-white dark:bg-neutral-800">
449+
{filteredItems.map((item, index) => (
450+
<UiListItem
451+
key={item.id}
452+
onClick={() => handleSelect({ item })}
453+
active={index === selectedIndex}
454+
className="cursor-pointer"
455+
>
456+
{item.type === "upload" && item.component ? (
457+
item.component
458+
) : (
459+
<div className="flex items-center rounded-lg transition">
460+
<div className="text-left flex overflow-hidden text-ellipsis whitespace-nowrap">
461+
<Icon
462+
name={item.icon as IconName}
463+
className={`mr-2 ltr:ml-2 text-lg ${item.className || ""}`}
464+
/>
465+
<h3 className="text-lg font-medium">{item.label}</h3>
466+
</div>
437467
</div>
438-
</div>
439-
)}
440-
</UiListItem>
441-
))}
442-
</UiList>
468+
)}
469+
</UiListItem>
470+
))}
471+
</UiList>
472+
</div>
443473
);
444474
};
445475

0 commit comments

Comments
 (0)