Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
00e1f47511 |
@@ -60,8 +60,6 @@ npm run build # TypeScript + Vite production build
|
|||||||
npm run desktop # Run Electron against the built dist/
|
npm run desktop # Run Electron against the built dist/
|
||||||
npm run dist:dir # Build an unpacked Electron app in release/
|
npm run dist:dir # Build an unpacked Electron app in release/
|
||||||
npm run dist:mac # Build macOS .dmg and .zip packages in release/
|
npm run dist:mac # Build macOS .dmg and .zip packages in release/
|
||||||
npm run dist:win # Build Windows installer + zip for the current Windows architecture
|
|
||||||
npm run dist:win:arm64 # Build Windows ARM64 installer + zip in release/
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Production-Like Local Run
|
## Production-Like Local Run
|
||||||
@@ -131,12 +129,10 @@ Current packaging commands:
|
|||||||
|
|
||||||
- `npm run dist:dir` creates an unpacked app bundle in `release/`
|
- `npm run dist:dir` creates an unpacked app bundle in `release/`
|
||||||
- `npm run dist:mac` creates macOS `.dmg` and `.zip` artifacts in `release/`
|
- `npm run dist:mac` creates macOS `.dmg` and `.zip` artifacts in `release/`
|
||||||
- `npm run dist:win` creates Windows `.exe` and `.zip` artifacts for the current Windows architecture
|
|
||||||
- `npm run dist:win:arm64` creates Windows ARM64 `.exe` and `.zip` artifacts in `release/`
|
|
||||||
|
|
||||||
The current mac build is unsigned and not notarized, which is fine for local use and testing but not enough for friction-free public distribution through Gatekeeper.
|
The current mac build is unsigned and not notarized, which is fine for local use and testing but not enough for friction-free public distribution through Gatekeeper.
|
||||||
|
|
||||||
Windows ARM64 packaging has been validated in this repository with Electron Builder on Windows 11 ARM running under Parallels. Linux targets are still configured in `package.json`, but they have not been validated here yet.
|
Windows and Linux targets are also configured in `package.json`, but they have not been validated in this repository yet.
|
||||||
|
|
||||||
## Legacy Tauri Script
|
## Legacy Tauri Script
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
const fs = require('node:fs/promises');
|
const fs = require('node:fs/promises');
|
||||||
const path = require('node:path');
|
const path = require('node:path');
|
||||||
const { app, BrowserWindow, dialog, ipcMain, net } = require('electron');
|
const { app, BrowserWindow, dialog, ipcMain } = require('electron');
|
||||||
|
|
||||||
const rendererUrl = process.env.ELECTRON_RENDERER_URL;
|
const rendererUrl = process.env.ELECTRON_RENDERER_URL;
|
||||||
const isDev = Boolean(rendererUrl);
|
const isDev = Boolean(rendererUrl);
|
||||||
@@ -90,55 +90,23 @@ ipcMain.handle('desktop:http-request', async (_event, payload) => {
|
|||||||
const body =
|
const body =
|
||||||
payload.bodyBase64 != null
|
payload.bodyBase64 != null
|
||||||
? Buffer.from(payload.bodyBase64, 'base64')
|
? Buffer.from(payload.bodyBase64, 'base64')
|
||||||
: payload.bodyText != null
|
: payload.bodyText;
|
||||||
? Buffer.from(payload.bodyText, 'utf8')
|
|
||||||
: null;
|
|
||||||
|
|
||||||
return await new Promise((resolve, reject) => {
|
const response = await fetch(payload.url, {
|
||||||
const request = net.request({
|
method: payload.method || 'GET',
|
||||||
url: payload.url,
|
headers: payload.headers,
|
||||||
method: payload.method || 'GET',
|
body,
|
||||||
session: BrowserWindow.getAllWindows()[0]?.webContents.session,
|
|
||||||
});
|
|
||||||
|
|
||||||
for (const [name, value] of Object.entries(payload.headers || {})) {
|
|
||||||
request.setHeader(name, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
request.on('response', (response) => {
|
|
||||||
const chunks = [];
|
|
||||||
|
|
||||||
response.on('data', (chunk) => {
|
|
||||||
chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
|
|
||||||
});
|
|
||||||
|
|
||||||
response.on('end', () => {
|
|
||||||
const headers = {};
|
|
||||||
for (const [name, value] of Object.entries(response.headers)) {
|
|
||||||
headers[name] = Array.isArray(value) ? value.join(', ') : String(value ?? '');
|
|
||||||
}
|
|
||||||
|
|
||||||
const buffer = Buffer.concat(chunks);
|
|
||||||
resolve({
|
|
||||||
ok: response.statusCode >= 200 && response.statusCode < 300,
|
|
||||||
status: response.statusCode,
|
|
||||||
statusText: response.statusMessage || '',
|
|
||||||
headers,
|
|
||||||
bodyBase64: buffer.toString('base64'),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
response.on('error', reject);
|
|
||||||
});
|
|
||||||
|
|
||||||
request.on('error', reject);
|
|
||||||
|
|
||||||
if (body && body.length > 0) {
|
|
||||||
request.write(body);
|
|
||||||
}
|
|
||||||
|
|
||||||
request.end();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const buffer = Buffer.from(await response.arrayBuffer());
|
||||||
|
|
||||||
|
return {
|
||||||
|
ok: response.ok,
|
||||||
|
status: response.status,
|
||||||
|
statusText: response.statusText,
|
||||||
|
headers: Object.fromEntries(response.headers.entries()),
|
||||||
|
bodyBase64: buffer.toString('base64'),
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
ipcMain.handle('desktop:export-pdf', async (event, payload) => {
|
ipcMain.handle('desktop:export-pdf', async (event, payload) => {
|
||||||
|
|||||||
13
package.json
13
package.json
@@ -3,11 +3,6 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.2.2",
|
"version": "0.2.2",
|
||||||
"description": "Desktop client for Nextcloud Notes built with Electron, React, and TypeScript.",
|
"description": "Desktop client for Nextcloud Notes built with Electron, React, and TypeScript.",
|
||||||
"homepage": "https://gitea.davidrelich.com/davidrelich/nextcloud-notes-desktop-app",
|
|
||||||
"author": {
|
|
||||||
"name": "drelich",
|
|
||||||
"email": "david.relich@me.com"
|
|
||||||
},
|
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "electron/main.cjs",
|
"main": "electron/main.cjs",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -15,14 +10,10 @@
|
|||||||
"dev:renderer": "vite",
|
"dev:renderer": "vite",
|
||||||
"dev:electron": "wait-on tcp:1420 && cross-env ELECTRON_RENDERER_URL=http://localhost:1420 electron .",
|
"dev:electron": "wait-on tcp:1420 && cross-env ELECTRON_RENDERER_URL=http://localhost:1420 electron .",
|
||||||
"dev:desktop": "concurrently -k \"npm:dev:renderer\" \"npm:dev:electron\"",
|
"dev:desktop": "concurrently -k \"npm:dev:renderer\" \"npm:dev:electron\"",
|
||||||
"gen:win-icon": "node scripts/generate-win-icon.mjs",
|
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"desktop": "electron .",
|
"desktop": "electron .",
|
||||||
"dist:dir": "npm run build && electron-builder --dir",
|
"dist:dir": "npm run build && electron-builder --dir",
|
||||||
"dist:mac": "npm run build && electron-builder --mac dmg zip",
|
"dist:mac": "npm run build && electron-builder --mac dmg zip",
|
||||||
"dist:linux": "npm run build && electron-builder --linux AppImage deb",
|
|
||||||
"dist:win": "npm run gen:win-icon && npm run build && electron-builder --win nsis zip",
|
|
||||||
"dist:win:arm64": "npm run gen:win-icon && npm run build && electron-builder --win nsis zip --arm64",
|
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"tauri": "tauri"
|
"tauri": "tauri"
|
||||||
},
|
},
|
||||||
@@ -90,9 +81,7 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"linux": {
|
"linux": {
|
||||||
"icon": "src-tauri/icons/128x128@2x.png",
|
"icon": "src-tauri/icons/icon.png",
|
||||||
"category": "Office",
|
|
||||||
"maintainer": "drelich <david.relich@me.com>",
|
|
||||||
"target": [
|
"target": [
|
||||||
"AppImage",
|
"AppImage",
|
||||||
"deb"
|
"deb"
|
||||||
|
|||||||
@@ -1,46 +0,0 @@
|
|||||||
import fs from "node:fs";
|
|
||||||
import path from "node:path";
|
|
||||||
import { fileURLToPath } from "node:url";
|
|
||||||
|
|
||||||
const __filename = fileURLToPath(import.meta.url);
|
|
||||||
const __dirname = path.dirname(__filename);
|
|
||||||
const projectRoot = path.resolve(__dirname, "..");
|
|
||||||
|
|
||||||
const sourcePngPath = path.join(projectRoot, "src-tauri", "icons", "128x128@2x.png");
|
|
||||||
const targetIcoPath = path.join(projectRoot, "src-tauri", "icons", "icon.ico");
|
|
||||||
|
|
||||||
const pngBytes = fs.readFileSync(sourcePngPath);
|
|
||||||
|
|
||||||
if (pngBytes.length < 24 || pngBytes.toString("ascii", 1, 4) !== "PNG") {
|
|
||||||
throw new Error(`Expected a PNG file at ${sourcePngPath}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const width = pngBytes.readUInt32BE(16);
|
|
||||||
const height = pngBytes.readUInt32BE(20);
|
|
||||||
|
|
||||||
if (width !== 256 || height !== 256) {
|
|
||||||
throw new Error(`Expected a 256x256 PNG, received ${width}x${height}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const headerSize = 6;
|
|
||||||
const directoryEntrySize = 16;
|
|
||||||
const imageOffset = headerSize + directoryEntrySize;
|
|
||||||
const icoBytes = Buffer.alloc(imageOffset + pngBytes.length);
|
|
||||||
|
|
||||||
icoBytes.writeUInt16LE(0, 0);
|
|
||||||
icoBytes.writeUInt16LE(1, 2);
|
|
||||||
icoBytes.writeUInt16LE(1, 4);
|
|
||||||
|
|
||||||
icoBytes.writeUInt8(0, 6);
|
|
||||||
icoBytes.writeUInt8(0, 7);
|
|
||||||
icoBytes.writeUInt8(0, 8);
|
|
||||||
icoBytes.writeUInt8(0, 9);
|
|
||||||
icoBytes.writeUInt16LE(1, 10);
|
|
||||||
icoBytes.writeUInt16LE(32, 12);
|
|
||||||
icoBytes.writeUInt32LE(pngBytes.length, 14);
|
|
||||||
icoBytes.writeUInt32LE(imageOffset, 18);
|
|
||||||
|
|
||||||
pngBytes.copy(icoBytes, imageOffset);
|
|
||||||
|
|
||||||
fs.writeFileSync(targetIcoPath, icoBytes);
|
|
||||||
console.log(`Generated ${path.relative(projectRoot, targetIcoPath)} from ${path.relative(projectRoot, sourcePngPath)}`);
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 68 KiB |
15
src/App.tsx
15
src/App.tsx
@@ -510,21 +510,10 @@ function MainApp() {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
const savedSnapshot = note.draftId ? savedSnapshotsRef.current.get(note.draftId) : null;
|
const remoteCategory = getRemoteCategory(note);
|
||||||
const remoteReference = savedSnapshot ?? note;
|
|
||||||
const remoteCategory = getRemoteCategory(remoteReference);
|
|
||||||
|
|
||||||
if (remoteCategory !== note.category) {
|
if (remoteCategory !== note.category) {
|
||||||
const movedNote = await syncManager.moveNote(
|
const movedNote = await syncManager.moveNote(note, note.category);
|
||||||
{
|
|
||||||
...note,
|
|
||||||
id: remoteReference.id,
|
|
||||||
path: remoteReference.path,
|
|
||||||
filename: remoteReference.filename,
|
|
||||||
category: remoteCategory,
|
|
||||||
},
|
|
||||||
note.category,
|
|
||||||
);
|
|
||||||
return syncManager.updateNote({
|
return syncManager.updateNote({
|
||||||
...movedNote,
|
...movedNote,
|
||||||
draftId: note.draftId,
|
draftId: note.draftId,
|
||||||
|
|||||||
@@ -128,7 +128,16 @@ export class NextcloudAPI {
|
|||||||
// The path from markdown is like: .attachments.38479/Screenshot.png
|
// The path from markdown is like: .attachments.38479/Screenshot.png
|
||||||
// We need to construct the full WebDAV URL
|
// We need to construct the full WebDAV URL
|
||||||
|
|
||||||
const webdavPath = this.buildAttachmentWebDAVPath(noteCategory, path);
|
let webdavPath = `/remote.php/dav/files/${this.username}/Notes`;
|
||||||
|
|
||||||
|
// Add category subfolder if present
|
||||||
|
if (noteCategory) {
|
||||||
|
webdavPath += `/${noteCategory}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add the attachment path (already includes .attachments.{id}/filename)
|
||||||
|
webdavPath += `/${path}`;
|
||||||
|
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
console.log(`[Note ${_noteId}] Fetching attachment via WebDAV:`, url);
|
console.log(`[Note ${_noteId}] Fetching attachment via WebDAV:`, url);
|
||||||
|
|
||||||
@@ -159,6 +168,12 @@ export class NextcloudAPI {
|
|||||||
// Create .attachments.{noteId} directory path and upload file via WebDAV PUT
|
// Create .attachments.{noteId} directory path and upload file via WebDAV PUT
|
||||||
// Returns the relative path to insert into markdown
|
// Returns the relative path to insert into markdown
|
||||||
|
|
||||||
|
let webdavPath = `/remote.php/dav/files/${this.username}/Notes`;
|
||||||
|
|
||||||
|
if (noteCategory) {
|
||||||
|
webdavPath += `/${noteCategory}`;
|
||||||
|
}
|
||||||
|
|
||||||
// Sanitize note ID: extract just the filename without extension and remove invalid chars
|
// Sanitize note ID: extract just the filename without extension and remove invalid chars
|
||||||
// noteId might be "category/filename.md" or just "filename.md"
|
// noteId might be "category/filename.md" or just "filename.md"
|
||||||
const noteIdStr = String(noteId);
|
const noteIdStr = String(noteId);
|
||||||
@@ -168,7 +183,7 @@ export class NextcloudAPI {
|
|||||||
|
|
||||||
const attachmentDir = `.attachments.${sanitizedNoteId}`;
|
const attachmentDir = `.attachments.${sanitizedNoteId}`;
|
||||||
const fileName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_'); // Sanitize filename
|
const fileName = file.name.replace(/[^a-zA-Z0-9._-]/g, '_'); // Sanitize filename
|
||||||
const fullPath = this.buildAttachmentWebDAVPath(noteCategory, attachmentDir, fileName);
|
const fullPath = `${webdavPath}/${attachmentDir}/${fileName}`;
|
||||||
|
|
||||||
const url = `${this.serverURL}${fullPath}`;
|
const url = `${this.serverURL}${fullPath}`;
|
||||||
console.log('Uploading attachment via WebDAV:', url);
|
console.log('Uploading attachment via WebDAV:', url);
|
||||||
@@ -176,7 +191,7 @@ export class NextcloudAPI {
|
|||||||
// First, try to create the attachments directory (MKCOL)
|
// First, try to create the attachments directory (MKCOL)
|
||||||
// This may fail if it already exists, which is fine
|
// This may fail if it already exists, which is fine
|
||||||
try {
|
try {
|
||||||
await runtimeFetch(`${this.serverURL}${this.buildAttachmentWebDAVPath(noteCategory, attachmentDir)}`, {
|
await runtimeFetch(`${this.serverURL}${webdavPath}/${attachmentDir}`, {
|
||||||
method: 'MKCOL',
|
method: 'MKCOL',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': this.authHeader,
|
'Authorization': this.authHeader,
|
||||||
@@ -208,7 +223,7 @@ export class NextcloudAPI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async fetchCategoryColors(): Promise<Record<string, number>> {
|
async fetchCategoryColors(): Promise<Record<string, number>> {
|
||||||
const webdavPath = `${this.buildNotesRootWebDAVPath()}/.category-colors.json`;
|
const webdavPath = `/remote.php/dav/files/${this.username}/Notes/.category-colors.json`;
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -235,7 +250,7 @@ export class NextcloudAPI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async saveCategoryColors(colors: Record<string, number>): Promise<void> {
|
async saveCategoryColors(colors: Record<string, number>): Promise<void> {
|
||||||
const webdavPath = `${this.buildNotesRootWebDAVPath()}/.category-colors.json`;
|
const webdavPath = `/remote.php/dav/files/${this.username}/Notes/.category-colors.json`;
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
|
|
||||||
const content = JSON.stringify(colors, null, 2);
|
const content = JSON.stringify(colors, null, 2);
|
||||||
@@ -279,99 +294,9 @@ export class NextcloudAPI {
|
|||||||
return note.content;
|
return note.content;
|
||||||
}
|
}
|
||||||
|
|
||||||
private buildNotesRootWebDAVPath(): string {
|
|
||||||
return `/remote.php/dav/files/${this.username}/Notes`;
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildEncodedCategoryPath(category: string): string {
|
|
||||||
if (!category) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
const encodedSegments = category
|
|
||||||
.split('/')
|
|
||||||
.filter(Boolean)
|
|
||||||
.map((segment) => encodeURIComponent(segment));
|
|
||||||
|
|
||||||
return encodedSegments.length ? `/${encodedSegments.join('/')}` : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildCategoryWebDAVPath(category: string): string {
|
|
||||||
return `${this.buildNotesRootWebDAVPath()}${this.buildEncodedCategoryPath(category)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
private getRemoteCategoryForNote(note: Note): string {
|
|
||||||
if (note.path) {
|
|
||||||
const pathParts = note.path.split('/');
|
|
||||||
return pathParts.length > 1 ? pathParts.slice(0, -1).join('/') : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof note.id === 'string') {
|
|
||||||
const idParts = note.id.split('/');
|
|
||||||
return idParts.length > 1 ? idParts.slice(0, -1).join('/') : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
return note.category;
|
|
||||||
}
|
|
||||||
|
|
||||||
private getRemoteFilenameForNote(note: Note): string {
|
|
||||||
if (note.filename) {
|
|
||||||
return note.filename;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (note.path) {
|
|
||||||
return note.path.split('/').pop() || 'note.md';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof note.id === 'string') {
|
|
||||||
return note.id.split('/').pop() || 'note.md';
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'note.md';
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildNoteWebDAVPath(category: string, filename: string): string {
|
private buildNoteWebDAVPath(category: string, filename: string): string {
|
||||||
return `${this.buildCategoryWebDAVPath(category)}/${encodeURIComponent(filename)}`;
|
const categoryPath = category ? `/${category}` : '';
|
||||||
}
|
return `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(filename)}`;
|
||||||
|
|
||||||
private buildRelativeWebDAVPath(...segments: string[]): string {
|
|
||||||
return segments
|
|
||||||
.flatMap((segment) => segment.split('/'))
|
|
||||||
.filter(Boolean)
|
|
||||||
.map((segment) => encodeURIComponent(segment))
|
|
||||||
.join('/');
|
|
||||||
}
|
|
||||||
|
|
||||||
private buildAttachmentWebDAVPath(noteCategory: string | undefined, ...relativeSegments: string[]): string {
|
|
||||||
const relativePath = this.buildRelativeWebDAVPath(...relativeSegments);
|
|
||||||
return relativePath
|
|
||||||
? `${this.buildCategoryWebDAVPath(noteCategory || '')}/${relativePath}`
|
|
||||||
: this.buildCategoryWebDAVPath(noteCategory || '');
|
|
||||||
}
|
|
||||||
|
|
||||||
private noteHasLocalAttachments(note: Note): boolean {
|
|
||||||
return note.content.includes('.attachments.');
|
|
||||||
}
|
|
||||||
|
|
||||||
private async ensureCategoryDirectoryExists(category: string): Promise<void> {
|
|
||||||
if (!category) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const parts = category.split('/').filter(Boolean);
|
|
||||||
|
|
||||||
for (let index = 0; index < parts.length; index += 1) {
|
|
||||||
const currentCategory = parts.slice(0, index + 1).join('/');
|
|
||||||
const categoryUrl = `${this.serverURL}${this.buildCategoryWebDAVPath(currentCategory)}`;
|
|
||||||
const response = await runtimeFetch(categoryUrl, {
|
|
||||||
method: 'MKCOL',
|
|
||||||
headers: { 'Authorization': this.authHeader },
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok && response.status !== 405) {
|
|
||||||
throw createHttpStatusError(`Failed to create category folder: ${response.status}`, response.status);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async delay(ms: number): Promise<void> {
|
private async delay(ms: number): Promise<void> {
|
||||||
@@ -436,7 +361,7 @@ export class NextcloudAPI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async fetchNotesWebDAV(): Promise<Note[]> {
|
async fetchNotesWebDAV(): Promise<Note[]> {
|
||||||
const webdavPath = this.buildNotesRootWebDAVPath();
|
const webdavPath = `/remote.php/dav/files/${this.username}/Notes`;
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
|
|
||||||
const response = await runtimeFetch(url, {
|
const response = await runtimeFetch(url, {
|
||||||
@@ -514,8 +439,9 @@ export class NextcloudAPI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async fetchNoteContentWebDAV(note: Note): Promise<Note> {
|
async fetchNoteContentWebDAV(note: Note): Promise<Note> {
|
||||||
|
const categoryPath = note.category ? `/${note.category}` : '';
|
||||||
const filename = note.filename || String(note.id).split('/').pop() || 'note.md';
|
const filename = note.filename || String(note.id).split('/').pop() || 'note.md';
|
||||||
const webdavPath = this.buildNoteWebDAVPath(note.category, filename);
|
const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(filename)}`;
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
|
|
||||||
const response = await runtimeFetch(url, {
|
const response = await runtimeFetch(url, {
|
||||||
@@ -532,12 +458,21 @@ export class NextcloudAPI {
|
|||||||
|
|
||||||
async createNoteWebDAV(title: string, content: string, category: string): Promise<Note> {
|
async createNoteWebDAV(title: string, content: string, category: string): Promise<Note> {
|
||||||
const filename = `${title.replace(/[\/:\*?"<>|]/g, '').replace(/\s+/g, ' ').trim()}.md`;
|
const filename = `${title.replace(/[\/:\*?"<>|]/g, '').replace(/\s+/g, ' ').trim()}.md`;
|
||||||
const webdavPath = this.buildNoteWebDAVPath(category, filename);
|
const categoryPath = category ? `/${category}` : '';
|
||||||
|
const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(filename)}`;
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
|
|
||||||
// Ensure category directory exists
|
// Ensure category directory exists
|
||||||
if (category) {
|
if (category) {
|
||||||
await this.ensureCategoryDirectoryExists(category);
|
try {
|
||||||
|
const categoryUrl = `${this.serverURL}/remote.php/dav/files/${this.username}/Notes/${category}`;
|
||||||
|
await runtimeFetch(categoryUrl, {
|
||||||
|
method: 'MKCOL',
|
||||||
|
headers: { 'Authorization': this.authHeader },
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// Directory might already exist
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const noteContent = content ? `${title}\n${content}` : title;
|
const noteContent = content ? `${title}\n${content}` : title;
|
||||||
@@ -681,32 +616,31 @@ export class NextcloudAPI {
|
|||||||
throw createHttpStatusError(`Failed to rename note: ${response.status}`, response.status);
|
throw createHttpStatusError(`Failed to rename note: ${response.status}`, response.status);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.noteHasLocalAttachments(note)) {
|
// Also rename attachment folder if it exists
|
||||||
// Also rename attachment folder if the note references local attachments
|
const categoryPath = note.category ? `/${note.category}` : '';
|
||||||
const oldNoteIdStr = String(note.id);
|
const oldNoteIdStr = String(note.id);
|
||||||
const oldJustFilename = oldNoteIdStr.split('/').pop() || oldNoteIdStr;
|
const oldJustFilename = oldNoteIdStr.split('/').pop() || oldNoteIdStr;
|
||||||
const oldFilenameWithoutExt = oldJustFilename.replace(/\.(md|txt)$/, '');
|
const oldFilenameWithoutExt = oldJustFilename.replace(/\.(md|txt)$/, '');
|
||||||
const oldSanitizedNoteId = oldFilenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
|
const oldSanitizedNoteId = oldFilenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||||
const oldAttachmentFolder = `.attachments.${oldSanitizedNoteId}`;
|
const oldAttachmentFolder = `.attachments.${oldSanitizedNoteId}`;
|
||||||
|
|
||||||
const newFilenameWithoutExt = newFilename.replace(/\.(md|txt)$/, '');
|
const newFilenameWithoutExt = newFilename.replace(/\.(md|txt)$/, '');
|
||||||
const newSanitizedNoteId = newFilenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
|
const newSanitizedNoteId = newFilenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||||
const newAttachmentFolder = `.attachments.${newSanitizedNoteId}`;
|
const newAttachmentFolder = `.attachments.${newSanitizedNoteId}`;
|
||||||
|
|
||||||
const oldAttachmentPath = this.buildAttachmentWebDAVPath(note.category, oldAttachmentFolder);
|
const oldAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${oldAttachmentFolder}`;
|
||||||
const newAttachmentPath = this.buildAttachmentWebDAVPath(note.category, newAttachmentFolder);
|
const newAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${newAttachmentFolder}`;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await runtimeFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
await runtimeFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
||||||
method: 'MOVE',
|
method: 'MOVE',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': this.authHeader,
|
'Authorization': this.authHeader,
|
||||||
'Destination': `${this.serverURL}${newAttachmentPath}`,
|
'Destination': `${this.serverURL}${newAttachmentPath}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Attachment folder might not exist, that's ok
|
// Attachment folder might not exist, that's ok
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const refreshedMetadata = await this.tryFetchNoteMetadataWebDAV(note.category, newFilename);
|
const refreshedMetadata = await this.tryFetchNoteMetadataWebDAV(note.category, newFilename);
|
||||||
@@ -723,7 +657,8 @@ export class NextcloudAPI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async deleteNoteWebDAV(note: Note): Promise<void> {
|
async deleteNoteWebDAV(note: Note): Promise<void> {
|
||||||
const webdavPath = this.buildNoteWebDAVPath(note.category, note.filename!);
|
const categoryPath = note.category ? `/${note.category}` : '';
|
||||||
|
const webdavPath = `/remote.php/dav/files/${this.username}/Notes${categoryPath}/${encodeURIComponent(note.filename!)}`;
|
||||||
const url = `${this.serverURL}${webdavPath}`;
|
const url = `${this.serverURL}${webdavPath}`;
|
||||||
|
|
||||||
const response = await runtimeFetch(url, {
|
const response = await runtimeFetch(url, {
|
||||||
@@ -737,14 +672,28 @@ export class NextcloudAPI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async moveNoteWebDAV(note: Note, newCategory: string): Promise<Note> {
|
async moveNoteWebDAV(note: Note, newCategory: string): Promise<Note> {
|
||||||
const remoteCategory = this.getRemoteCategoryForNote(note);
|
const oldCategoryPath = note.category ? `/${note.category}` : '';
|
||||||
const remoteFilename = this.getRemoteFilenameForNote(note);
|
const newCategoryPath = newCategory ? `/${newCategory}` : '';
|
||||||
const oldPath = this.buildNoteWebDAVPath(remoteCategory, remoteFilename);
|
const oldPath = `/remote.php/dav/files/${this.username}/Notes${oldCategoryPath}/${encodeURIComponent(note.filename!)}`;
|
||||||
const newPath = this.buildNoteWebDAVPath(newCategory, remoteFilename);
|
const newPath = `/remote.php/dav/files/${this.username}/Notes${newCategoryPath}/${encodeURIComponent(note.filename!)}`;
|
||||||
|
|
||||||
// Ensure new category directory exists (including nested subdirectories)
|
// Ensure new category directory exists (including nested subdirectories)
|
||||||
if (newCategory) {
|
if (newCategory) {
|
||||||
await this.ensureCategoryDirectoryExists(newCategory);
|
const parts = newCategory.split('/');
|
||||||
|
let currentPath = '';
|
||||||
|
|
||||||
|
for (const part of parts) {
|
||||||
|
currentPath += (currentPath ? '/' : '') + part;
|
||||||
|
try {
|
||||||
|
const categoryUrl = `${this.serverURL}/remote.php/dav/files/${this.username}/Notes/${currentPath}`;
|
||||||
|
await runtimeFetch(categoryUrl, {
|
||||||
|
method: 'MKCOL',
|
||||||
|
headers: { 'Authorization': this.authHeader },
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
// Directory might already exist, continue
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const response = await runtimeFetch(`${this.serverURL}${oldPath}`, {
|
const response = await runtimeFetch(`${this.serverURL}${oldPath}`, {
|
||||||
@@ -756,56 +705,48 @@ export class NextcloudAPI {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok && response.status !== 201 && response.status !== 204) {
|
if (!response.ok && response.status !== 201 && response.status !== 204) {
|
||||||
const details = await response.text().catch(() => '');
|
throw new Error(`Failed to move note: ${response.status}`);
|
||||||
const detailSuffix = details ? ` - ${details.slice(0, 300)}` : '';
|
|
||||||
throw createHttpStatusError(
|
|
||||||
`Failed to move note: ${response.status}${detailSuffix}. Source: ${oldPath}. Destination: ${newPath}`,
|
|
||||||
response.status,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.noteHasLocalAttachments(note)) {
|
// Move attachment folder if it exists
|
||||||
// Move attachment folder only when the note references local attachments
|
const noteIdStr = String(note.id);
|
||||||
const noteIdStr = String(note.id);
|
const justFilename = noteIdStr.split('/').pop() || noteIdStr;
|
||||||
const justFilename = noteIdStr.split('/').pop() || noteIdStr;
|
const filenameWithoutExt = justFilename.replace(/\.(md|txt)$/, '');
|
||||||
const filenameWithoutExt = justFilename.replace(/\.(md|txt)$/, '');
|
const sanitizedNoteId = filenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
|
||||||
const sanitizedNoteId = filenameWithoutExt.replace(/[^a-zA-Z0-9_-]/g, '_');
|
const attachmentFolder = `.attachments.${sanitizedNoteId}`;
|
||||||
const attachmentFolder = `.attachments.${sanitizedNoteId}`;
|
|
||||||
|
|
||||||
const oldAttachmentPath = this.buildAttachmentWebDAVPath(remoteCategory, attachmentFolder);
|
const oldAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${oldCategoryPath}/${attachmentFolder}`;
|
||||||
const newAttachmentPath = this.buildAttachmentWebDAVPath(newCategory, attachmentFolder);
|
const newAttachmentPath = `/remote.php/dav/files/${this.username}/Notes${newCategoryPath}/${attachmentFolder}`;
|
||||||
|
|
||||||
console.log(`Attempting to move attachment folder:`);
|
console.log(`Attempting to move attachment folder:`);
|
||||||
console.log(` From: ${oldAttachmentPath}`);
|
console.log(` From: ${oldAttachmentPath}`);
|
||||||
console.log(` To: ${newAttachmentPath}`);
|
console.log(` To: ${newAttachmentPath}`);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const attachmentResponse = await runtimeFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
const attachmentResponse = await runtimeFetch(`${this.serverURL}${oldAttachmentPath}`, {
|
||||||
method: 'MOVE',
|
method: 'MOVE',
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': this.authHeader,
|
'Authorization': this.authHeader,
|
||||||
'Destination': `${this.serverURL}${newAttachmentPath}`,
|
'Destination': `${this.serverURL}${newAttachmentPath}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(`Attachment folder MOVE response status: ${attachmentResponse.status}`);
|
console.log(`Attachment folder MOVE response status: ${attachmentResponse.status}`);
|
||||||
|
|
||||||
if (attachmentResponse.ok || attachmentResponse.status === 201 || attachmentResponse.status === 204) {
|
if (attachmentResponse.ok || attachmentResponse.status === 201 || attachmentResponse.status === 204) {
|
||||||
console.log(`✓ Successfully moved attachment folder: ${attachmentFolder}`);
|
console.log(`✓ Successfully moved attachment folder: ${attachmentFolder}`);
|
||||||
} else {
|
} else {
|
||||||
console.log(`✗ Failed to move attachment folder (status ${attachmentResponse.status})`);
|
console.log(`✗ Failed to move attachment folder (status ${attachmentResponse.status})`);
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.log(`✗ Error moving attachment folder:`, e);
|
|
||||||
}
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log(`✗ Error moving attachment folder:`, e);
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...note,
|
...note,
|
||||||
category: newCategory,
|
category: newCategory,
|
||||||
filename: remoteFilename,
|
path: newCategory ? `${newCategory}/${note.filename}` : note.filename || '',
|
||||||
path: newCategory ? `${newCategory}/${remoteFilename}` : remoteFilename,
|
id: newCategory ? `${newCategory}/${note.filename}` : (note.filename || ''),
|
||||||
id: newCategory ? `${newCategory}/${remoteFilename}` : remoteFilename,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,8 +3,6 @@ import { useEffect, useState, useRef, RefObject } from 'react';
|
|||||||
interface InsertToolbarProps {
|
interface InsertToolbarProps {
|
||||||
textareaRef: RefObject<HTMLTextAreaElement | null>;
|
textareaRef: RefObject<HTMLTextAreaElement | null>;
|
||||||
onInsertLink: (text: string, url: string) => void;
|
onInsertLink: (text: string, url: string) => void;
|
||||||
onInsertTodoItem: () => void;
|
|
||||||
onInsertTable: () => void;
|
|
||||||
onInsertFile: () => void;
|
onInsertFile: () => void;
|
||||||
isUploading?: boolean;
|
isUploading?: boolean;
|
||||||
}
|
}
|
||||||
@@ -15,7 +13,7 @@ interface LinkModalState {
|
|||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function InsertToolbar({ textareaRef, onInsertLink, onInsertTodoItem, onInsertTable, onInsertFile, isUploading }: InsertToolbarProps) {
|
export function InsertToolbar({ textareaRef, onInsertLink, onInsertFile, isUploading }: InsertToolbarProps) {
|
||||||
const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
|
const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const [linkModal, setLinkModal] = useState<LinkModalState>({ isOpen: false, text: '', url: '' });
|
const [linkModal, setLinkModal] = useState<LinkModalState>({ isOpen: false, text: '', url: '' });
|
||||||
@@ -60,7 +58,7 @@ export function InsertToolbar({ textareaRef, onInsertLink, onInsertTodoItem, onI
|
|||||||
const left = textareaRect.left + paddingLeft + (currentLineText.length * charWidth) + 20;
|
const left = textareaRect.left + paddingLeft + (currentLineText.length * charWidth) + 20;
|
||||||
|
|
||||||
// Keep toolbar within viewport
|
// Keep toolbar within viewport
|
||||||
const toolbarWidth = 196;
|
const toolbarWidth = 100;
|
||||||
const adjustedLeft = Math.min(left, window.innerWidth - toolbarWidth - 20);
|
const adjustedLeft = Math.min(left, window.innerWidth - toolbarWidth - 20);
|
||||||
let adjustedTop = top - 16; // Center vertically with cursor line
|
let adjustedTop = top - 16; // Center vertically with cursor line
|
||||||
|
|
||||||
@@ -139,16 +137,6 @@ export function InsertToolbar({ textareaRef, onInsertLink, onInsertTodoItem, onI
|
|||||||
setIsVisible(false);
|
setIsVisible(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTodoClick = () => {
|
|
||||||
onInsertTodoItem();
|
|
||||||
setIsVisible(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTableClick = () => {
|
|
||||||
onInsertTable();
|
|
||||||
setIsVisible(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!isVisible || !position) return null;
|
if (!isVisible || !position) return null;
|
||||||
|
|
||||||
// Link Modal
|
// Link Modal
|
||||||
@@ -230,28 +218,6 @@ export function InsertToolbar({ textareaRef, onInsertLink, onInsertTodoItem, onI
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleTodoClick}
|
|
||||||
className="p-2 rounded hover:bg-gray-700 dark:hover:bg-gray-600 text-white transition-colors"
|
|
||||||
title="Insert To-Do Item"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h11M9 12h11M9 17h11M4 7h.01M4 12h.01M4 17h.01" />
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m3.5 12.5 1.5 1.5 3-3" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={handleTableClick}
|
|
||||||
className="p-2 rounded hover:bg-gray-700 dark:hover:bg-gray-600 text-white transition-colors"
|
|
||||||
title="Insert Table"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5h16v14H4V5Z" />
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 10h16M10 5v14" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={handleFileClick}
|
onClick={handleFileClick}
|
||||||
disabled={isUploading}
|
disabled={isUploading}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useEffect, useLayoutEffect, useRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import { marked } from 'marked';
|
import { marked } from 'marked';
|
||||||
import { Note } from '../types';
|
import { Note } from '../types';
|
||||||
import { NextcloudAPI } from '../api/nextcloud';
|
import { NextcloudAPI } from '../api/nextcloud';
|
||||||
@@ -34,80 +34,12 @@ interface NoteEditorProps {
|
|||||||
|
|
||||||
const imageCache = new Map<string, string>();
|
const imageCache = new Map<string, string>();
|
||||||
|
|
||||||
const TASK_LIST_ITEM_REGEX = /^(\s*(?:[-+*]|\d+\.)\s)\[( |x|X)\]\s/;
|
|
||||||
|
|
||||||
// Configure marked to support task lists
|
// Configure marked to support task lists
|
||||||
marked.use({
|
marked.use({
|
||||||
gfm: true,
|
gfm: true,
|
||||||
breaks: true,
|
breaks: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
function getTaskListMarkers(markdown: string) {
|
|
||||||
const markers: Array<{ markerStart: number; markerEnd: number }> = [];
|
|
||||||
const lines = markdown.split('\n');
|
|
||||||
let offset = 0;
|
|
||||||
let activeFence: string | null = null;
|
|
||||||
|
|
||||||
lines.forEach((line, index) => {
|
|
||||||
const fenceMatch = line.match(/^\s*(`{3,}|~{3,})/);
|
|
||||||
if (fenceMatch) {
|
|
||||||
const fence = fenceMatch[1];
|
|
||||||
if (!activeFence) {
|
|
||||||
activeFence = fence;
|
|
||||||
} else if (fence[0] === activeFence[0] && fence.length >= activeFence.length) {
|
|
||||||
activeFence = null;
|
|
||||||
}
|
|
||||||
} else if (!activeFence) {
|
|
||||||
const taskMatch = line.match(TASK_LIST_ITEM_REGEX);
|
|
||||||
if (taskMatch) {
|
|
||||||
const markerStart = offset + taskMatch[1].length;
|
|
||||||
markers.push({
|
|
||||||
markerStart,
|
|
||||||
markerEnd: markerStart + 3,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
offset += line.length;
|
|
||||||
if (index < lines.length - 1) {
|
|
||||||
offset += 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return markers;
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleTaskListMarker(markdown: string, taskIndex: number, checked: boolean) {
|
|
||||||
const taskMarker = getTaskListMarkers(markdown)[taskIndex];
|
|
||||||
if (!taskMarker) {
|
|
||||||
return markdown;
|
|
||||||
}
|
|
||||||
|
|
||||||
const nextMarker = checked ? '[x]' : '[ ]';
|
|
||||||
return `${markdown.slice(0, taskMarker.markerStart)}${nextMarker}${markdown.slice(taskMarker.markerEnd)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderPreviewHtml(markdown: string) {
|
|
||||||
const parsedHtml = marked.parse(markdown || '', { async: false }) as string;
|
|
||||||
const documentFragment = new DOMParser().parseFromString(parsedHtml, 'text/html');
|
|
||||||
|
|
||||||
documentFragment.querySelectorAll<HTMLInputElement>('input[type="checkbox"]').forEach((input, index) => {
|
|
||||||
input.removeAttribute('disabled');
|
|
||||||
input.classList.add('markdown-task-checkbox');
|
|
||||||
input.setAttribute('data-task-index', String(index));
|
|
||||||
input.setAttribute('aria-label', `Toggle task ${index + 1}`);
|
|
||||||
});
|
|
||||||
|
|
||||||
documentFragment.querySelectorAll('table').forEach((table) => {
|
|
||||||
const wrapper = documentFragment.createElement('div');
|
|
||||||
wrapper.className = 'markdown-table-wrapper';
|
|
||||||
table.parentNode?.insertBefore(wrapper, table);
|
|
||||||
wrapper.appendChild(table);
|
|
||||||
});
|
|
||||||
|
|
||||||
return documentFragment.body.innerHTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onToggleFavorite, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
|
export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onToggleFavorite, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
|
||||||
const [localContent, setLocalContent] = useState('');
|
const [localContent, setLocalContent] = useState('');
|
||||||
const [localCategory, setLocalCategory] = useState('');
|
const [localCategory, setLocalCategory] = useState('');
|
||||||
@@ -119,10 +51,7 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
const [isUploading, setIsUploading] = useState(false);
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
const previousDraftIdRef = useRef<string | null>(null);
|
const previousDraftIdRef = useRef<string | null>(null);
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
const editorScrollContainerRef = useRef<HTMLDivElement>(null);
|
|
||||||
const previewContentRef = useRef<HTMLDivElement>(null);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
const pendingScrollTopRef = useRef<number | null>(null);
|
|
||||||
const desktopRuntime = getDesktopRuntime();
|
const desktopRuntime = getDesktopRuntime();
|
||||||
const exportActionLabel = desktopRuntime === 'electron' ? 'Export PDF' : 'Print Note';
|
const exportActionLabel = desktopRuntime === 'electron' ? 'Export PDF' : 'Print Note';
|
||||||
const hasUnsavedChanges = Boolean(note?.pendingSave);
|
const hasUnsavedChanges = Boolean(note?.pendingSave);
|
||||||
@@ -142,39 +71,26 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
}, [isFocusMode, onToggleFocusMode]);
|
}, [isFocusMode, onToggleFocusMode]);
|
||||||
|
|
||||||
const captureEditorScrollPosition = () => {
|
// Auto-resize textarea when content changes, switching from preview to edit, or font size changes
|
||||||
if (editorScrollContainerRef.current) {
|
useEffect(() => {
|
||||||
pendingScrollTopRef.current = editorScrollContainerRef.current.scrollTop;
|
if (textareaRef.current && !isPreviewMode) {
|
||||||
|
// Use setTimeout to ensure DOM has updated
|
||||||
|
setTimeout(() => {
|
||||||
|
if (textareaRef.current) {
|
||||||
|
// Save cursor position and scroll position
|
||||||
|
const cursorPosition = textareaRef.current.selectionStart;
|
||||||
|
const scrollTop = textareaRef.current.scrollTop;
|
||||||
|
|
||||||
|
textareaRef.current.style.height = 'auto';
|
||||||
|
textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
|
||||||
|
|
||||||
|
// Restore cursor position and scroll position
|
||||||
|
textareaRef.current.setSelectionRange(cursorPosition, cursorPosition);
|
||||||
|
textareaRef.current.scrollTop = scrollTop;
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
}
|
}
|
||||||
};
|
}, [localContent, isPreviewMode, editorFontSize]);
|
||||||
|
|
||||||
// Keep the editor pane anchored when the textarea grows with new content.
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
const textarea = textareaRef.current;
|
|
||||||
if (!textarea || isPreviewMode) {
|
|
||||||
pendingScrollTopRef.current = null;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const selectionStart = textarea.selectionStart;
|
|
||||||
const selectionEnd = textarea.selectionEnd;
|
|
||||||
const shouldRestoreSelection = document.activeElement === textarea;
|
|
||||||
const scrollContainer = editorScrollContainerRef.current;
|
|
||||||
const scrollTop = pendingScrollTopRef.current ?? scrollContainer?.scrollTop ?? null;
|
|
||||||
|
|
||||||
textarea.style.height = 'auto';
|
|
||||||
textarea.style.height = `${textarea.scrollHeight}px`;
|
|
||||||
|
|
||||||
if (scrollContainer && scrollTop !== null) {
|
|
||||||
scrollContainer.scrollTop = scrollTop;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldRestoreSelection) {
|
|
||||||
textarea.setSelectionRange(selectionStart, selectionEnd);
|
|
||||||
}
|
|
||||||
|
|
||||||
pendingScrollTopRef.current = null;
|
|
||||||
}, [localContent, isPreviewMode, editorFontSize, note?.draftId]);
|
|
||||||
|
|
||||||
// Process images when entering preview mode or content changes
|
// Process images when entering preview mode or content changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -259,36 +175,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
}
|
}
|
||||||
}, [note?.draftId, note?.content, note?.category, note?.favorite, localCategory, localContent, localFavorite]);
|
}, [note?.draftId, note?.content, note?.category, note?.favorite, localCategory, localContent, localFavorite]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const previewElement = previewContentRef.current;
|
|
||||||
if (!previewElement || !isPreviewMode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTaskToggle = (event: Event) => {
|
|
||||||
const target = event.target;
|
|
||||||
if (!(target instanceof HTMLInputElement) || target.type !== 'checkbox') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const taskIndex = Number(target.dataset.taskIndex);
|
|
||||||
if (Number.isNaN(taskIndex)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newContent = toggleTaskListMarker(localContent, taskIndex, target.checked);
|
|
||||||
if (newContent === localContent) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLocalContent(newContent);
|
|
||||||
emitNoteChange(newContent, localCategory, localFavorite);
|
|
||||||
};
|
|
||||||
|
|
||||||
previewElement.addEventListener('change', handleTaskToggle);
|
|
||||||
return () => previewElement.removeEventListener('change', handleTaskToggle);
|
|
||||||
}, [isPreviewMode, localContent, localCategory, localFavorite]);
|
|
||||||
|
|
||||||
const emitNoteChange = (content: string, category: string, favorite: boolean) => {
|
const emitNoteChange = (content: string, category: string, favorite: boolean) => {
|
||||||
if (!note) {
|
if (!note) {
|
||||||
return;
|
return;
|
||||||
@@ -304,7 +190,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleContentChange = (value: string) => {
|
const handleContentChange = (value: string) => {
|
||||||
captureEditorScrollPosition();
|
|
||||||
setLocalContent(value);
|
setLocalContent(value);
|
||||||
emitNoteChange(value, localCategory, localFavorite);
|
emitNoteChange(value, localCategory, localFavorite);
|
||||||
};
|
};
|
||||||
@@ -413,7 +298,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
// Insert at cursor position or end of content
|
// Insert at cursor position or end of content
|
||||||
const textarea = textareaRef.current;
|
const textarea = textareaRef.current;
|
||||||
if (textarea) {
|
if (textarea) {
|
||||||
captureEditorScrollPosition();
|
|
||||||
const cursorPos = textarea.selectionStart;
|
const cursorPos = textarea.selectionStart;
|
||||||
const newContent = localContent.slice(0, cursorPos) + markdownLink + localContent.slice(cursorPos);
|
const newContent = localContent.slice(0, cursorPos) + markdownLink + localContent.slice(cursorPos);
|
||||||
setLocalContent(newContent);
|
setLocalContent(newContent);
|
||||||
@@ -455,7 +339,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
const textarea = textareaRef.current;
|
const textarea = textareaRef.current;
|
||||||
if (!textarea) return;
|
if (!textarea) return;
|
||||||
|
|
||||||
captureEditorScrollPosition();
|
|
||||||
const cursorPos = textarea.selectionStart;
|
const cursorPos = textarea.selectionStart;
|
||||||
const markdownLink = `[${text}](${url})`;
|
const markdownLink = `[${text}](${url})`;
|
||||||
const newContent = localContent.slice(0, cursorPos) + markdownLink + localContent.slice(cursorPos);
|
const newContent = localContent.slice(0, cursorPos) + markdownLink + localContent.slice(cursorPos);
|
||||||
@@ -473,44 +356,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
fileInputRef.current?.click();
|
fileInputRef.current?.click();
|
||||||
};
|
};
|
||||||
|
|
||||||
const insertBlockSnippet = (snippet: string, selectionStartOffset: number, selectionEndOffset: number) => {
|
|
||||||
const textarea = textareaRef.current;
|
|
||||||
const cursorPos = textarea?.selectionStart ?? localContent.length;
|
|
||||||
const needsLeadingNewline = cursorPos > 0 && localContent[cursorPos - 1] !== '\n';
|
|
||||||
const needsTrailingNewline = cursorPos < localContent.length && localContent[cursorPos] !== '\n';
|
|
||||||
const prefix = needsLeadingNewline ? '\n' : '';
|
|
||||||
const suffix = needsTrailingNewline ? '\n' : '';
|
|
||||||
const insertedText = `${prefix}${snippet}${suffix}`;
|
|
||||||
const newContent = `${localContent.slice(0, cursorPos)}${insertedText}${localContent.slice(cursorPos)}`;
|
|
||||||
|
|
||||||
captureEditorScrollPosition();
|
|
||||||
setLocalContent(newContent);
|
|
||||||
emitNoteChange(newContent, localCategory, localFavorite);
|
|
||||||
|
|
||||||
if (!textarea) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
textarea.focus();
|
|
||||||
const selectionStart = cursorPos + prefix.length + selectionStartOffset;
|
|
||||||
const selectionEnd = cursorPos + prefix.length + selectionEndOffset;
|
|
||||||
textarea.setSelectionRange(selectionStart, selectionEnd);
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInsertTodoItem = () => {
|
|
||||||
const snippet = '- [ ] Task';
|
|
||||||
const placeholderStart = snippet.indexOf('Task');
|
|
||||||
insertBlockSnippet(snippet, placeholderStart, placeholderStart + 'Task'.length);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInsertTable = () => {
|
|
||||||
const snippet = '| Column 1 | Column 2 |\n| --- | --- |\n| Value 1 | Value 2 |';
|
|
||||||
const placeholderStart = snippet.indexOf('Column 1');
|
|
||||||
insertBlockSnippet(snippet, placeholderStart, placeholderStart + 'Column 1'.length);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFormat = (format: 'bold' | 'italic' | 'strikethrough' | 'code' | 'codeblock' | 'quote' | 'ul' | 'ol' | 'link' | 'h1' | 'h2' | 'h3') => {
|
const handleFormat = (format: 'bold' | 'italic' | 'strikethrough' | 'code' | 'codeblock' | 'quote' | 'ul' | 'ol' | 'link' | 'h1' | 'h2' | 'h3') => {
|
||||||
if (!textareaRef.current) return;
|
if (!textareaRef.current) return;
|
||||||
|
|
||||||
@@ -637,7 +482,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
}
|
}
|
||||||
|
|
||||||
const newContent = localContent.substring(0, start) + formattedText + localContent.substring(end);
|
const newContent = localContent.substring(0, start) + formattedText + localContent.substring(end);
|
||||||
captureEditorScrollPosition();
|
|
||||||
setLocalContent(newContent);
|
setLocalContent(newContent);
|
||||||
emitNoteChange(newContent, localCategory, localFavorite);
|
emitNoteChange(newContent, localCategory, localFavorite);
|
||||||
|
|
||||||
@@ -849,7 +693,7 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ref={editorScrollContainerRef} className="flex-1 overflow-y-auto">
|
<div className="flex-1 overflow-y-auto">
|
||||||
<div className={`min-h-full ${isFocusMode ? 'max-w-3xl mx-auto w-full' : ''}`}>
|
<div className={`min-h-full ${isFocusMode ? 'max-w-3xl mx-auto w-full' : ''}`}>
|
||||||
{isPreviewMode ? (
|
{isPreviewMode ? (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
@@ -863,11 +707,10 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
ref={previewContentRef}
|
|
||||||
className={`prose prose-slate dark:prose-invert p-8 ${isFocusMode ? '' : 'max-w-none'} [&_code]:font-mono [&_pre]:font-mono [&_code]:py-0 [&_code]:px-1 [&_code]:align-baseline [&_code]:leading-none [&_img]:max-w-full [&_img]:rounded-lg [&_img]:shadow-md`}
|
className={`prose prose-slate dark:prose-invert p-8 ${isFocusMode ? '' : 'max-w-none'} [&_code]:font-mono [&_pre]:font-mono [&_code]:py-0 [&_code]:px-1 [&_code]:align-baseline [&_code]:leading-none [&_img]:max-w-full [&_img]:rounded-lg [&_img]:shadow-md`}
|
||||||
style={{ fontSize: `${previewFontSize}px`, fontFamily: previewFont }}
|
style={{ fontSize: `${previewFontSize}px`, fontFamily: previewFont }}
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: renderPreviewHtml(processedContent || '')
|
__html: marked.parse(processedContent || '', { async: false }) as string
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -877,8 +720,6 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
<InsertToolbar
|
<InsertToolbar
|
||||||
textareaRef={textareaRef}
|
textareaRef={textareaRef}
|
||||||
onInsertLink={handleInsertLink}
|
onInsertLink={handleInsertLink}
|
||||||
onInsertTodoItem={handleInsertTodoItem}
|
|
||||||
onInsertTable={handleInsertTable}
|
|
||||||
onInsertFile={handleInsertFile}
|
onInsertFile={handleInsertFile}
|
||||||
isUploading={isUploading}
|
isUploading={isUploading}
|
||||||
/>
|
/>
|
||||||
@@ -892,7 +733,12 @@ export function NoteEditor({ note, onChangeNote, onSaveNote, onDiscardNote, onTo
|
|||||||
<textarea
|
<textarea
|
||||||
ref={textareaRef}
|
ref={textareaRef}
|
||||||
value={localContent}
|
value={localContent}
|
||||||
onChange={(e) => handleContentChange(e.target.value)}
|
onChange={(e) => {
|
||||||
|
handleContentChange(e.target.value);
|
||||||
|
// Auto-resize textarea to fit content
|
||||||
|
e.target.style.height = 'auto';
|
||||||
|
e.target.style.height = e.target.scrollHeight + 'px';
|
||||||
|
}}
|
||||||
className="w-full resize-none border-none outline-none focus:ring-0 bg-transparent text-gray-900 dark:text-gray-100 overflow-hidden"
|
className="w-full resize-none border-none outline-none focus:ring-0 bg-transparent text-gray-900 dark:text-gray-100 overflow-hidden"
|
||||||
style={{ fontSize: `${editorFontSize}px`, lineHeight: '1.6', minHeight: '100%', fontFamily: editorFont }}
|
style={{ fontSize: `${editorFontSize}px`, lineHeight: '1.6', minHeight: '100%', fontFamily: editorFont }}
|
||||||
placeholder="Start writing in markdown..."
|
placeholder="Start writing in markdown..."
|
||||||
|
|||||||
@@ -289,28 +289,6 @@ export function PrintView({ jobId }: PrintViewProps) {
|
|||||||
color: #334155;
|
color: #334155;
|
||||||
}
|
}
|
||||||
|
|
||||||
.print-note ul:has(> li > input[type="checkbox"]) {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note li:has(> input[type="checkbox"]) {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.55em;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note li:has(> input[type="checkbox"])::marker {
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note li > input[type="checkbox"] {
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0.3em 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note blockquote {
|
.print-note blockquote {
|
||||||
margin: 1.15em 0;
|
margin: 1.15em 0;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
|||||||
@@ -232,20 +232,10 @@ code {
|
|||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
margin-top: 0.32rem;
|
margin-top: 0.32rem;
|
||||||
cursor: pointer;
|
cursor: default;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose input[type="checkbox"]:checked {
|
.prose input[type="checkbox"]:checked {
|
||||||
accent-color: #16a34a;
|
accent-color: #16a34a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose .markdown-table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
margin: 1.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prose .markdown-table-wrapper table {
|
|
||||||
margin: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -261,28 +261,6 @@ export const buildPrintDocument = (payload: PrintExportPayload) => {
|
|||||||
color: #334155;
|
color: #334155;
|
||||||
}
|
}
|
||||||
|
|
||||||
.print-note ul:has(> li > input[type="checkbox"]) {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note li:has(> input[type="checkbox"]) {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.55em;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note li:has(> input[type="checkbox"])::marker {
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note li > input[type="checkbox"] {
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0.3em 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-note blockquote {
|
.print-note blockquote {
|
||||||
margin: 1.15em 0;
|
margin: 1.15em 0;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
|||||||
Reference in New Issue
Block a user