+
+ );
+};
```
diff --git a/docs/splash/splash-screen.es.md b/docs/splash/splash-screen.es.md
index 67adaf4..53bbc20 100644
--- a/docs/splash/splash-screen.es.md
+++ b/docs/splash/splash-screen.es.md
@@ -1,66 +1,45 @@
# Funcionalidad de la pantalla de bienvenida (Splash)
-El archivo `macos-editor/main.js` incluye la funcionalidad para mostrar una pantalla de bienvenida (splash) al iniciar el editor de macOS. La pantalla de bienvenida se muestra durante 3 segundos antes de mostrar la ventana principal. El código relevante es el siguiente:
+El componente de la pantalla de bienvenida está implementado usando React en el archivo `src/components/splash-screen/splash-screen.tsx`. La pantalla de bienvenida se muestra durante un mínimo de 1.5 segundos antes de mostrar la aplicación principal. El código relevante es el siguiente:
-```javascript
-const { app, BrowserWindow } = require('electron');
-const path = require('path');
+```typescript
+import React, { useEffect, useState } from 'react';
+import './splash-screen.scss';
-function createSplashWindow() {
- const splashWindow = new BrowserWindow({
- width: 400,
- height: 300,
- frame: false,
- alwaysOnTop: true,
- transparent: true,
- webPreferences: {
- nodeIntegration: true,
- contextIsolation: false
- }
- });
-
- splashWindow.loadFile('splash.html');
- return splashWindow;
-}
-
-function createWindow () {
- const mainWindow = new BrowserWindow({
- width: 800,
- height: 600,
- show: false,
- webPreferences: {
- preload: path.join(__dirname, 'preload.js'),
- nodeIntegration: true,
- contextIsolation: false
- }
- });
-
- mainWindow.loadFile('index.html');
-
- mainWindow.once('ready-to-show', () => {
- setTimeout(() => {
- splashWindow.close();
- mainWindow.show();
- }, 3000); // Mostrar splash durante 3 segundos
- });
+interface SplashScreenProps {
+ onComplete: () => void;
+ minimumDisplayTime?: number;
}
-let splashWindow;
-
-app.on('ready', () => {
- splashWindow = createSplashWindow();
- createWindow();
-});
-
-app.on('window-all-closed', () => {
- if (process.platform !== 'darwin') {
- app.quit();
- }
-});
-
-app.on('activate', () => {
- if (BrowserWindow.getAllWindows().length === 0) {
- createWindow();
- }
-});
+export const SplashScreen: React.FC
+
+
+ 
+
+
+ Pora
+
+
+
+
+
+
+
+ );
+};
```
diff --git a/electron/main.js b/electron/main.js
deleted file mode 100644
index 42d4d73..0000000
--- a/electron/main.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import { app, BrowserWindow, Menu, dialog, shell, ipcMain } from 'electron';
-import path from 'path';
-
-const isDev = process.env.NODE_ENV === 'development';
-const isMac = process.platform === 'darwin';
-
-// Keep a global reference of the window object to avoid garbage collection
-let mainWindow;
-let splashWindow;
-
-// Set app name for macOS menu
-app.name = 'Pora';
-
-// Create a splash window
-function createSplashWindow() {
- splashWindow = new BrowserWindow({
- width: 400,
- height: 300,
- transparent: true,
- frame: false,
- resizable: false,
- webPreferences: {
- nodeIntegration: false,
- contextIsolation: true
- },
- alwaysOnTop: true,
- show: false // Don't show window until it's ready
- });
-
- // Load a custom splash screen HTML in production
- // Or just use the main app in development (since it has the splash screen component)
- if (isDev) {
- splashWindow.loadURL('http://localhost:5173');
- } else {
- splashWindow.loadFile(path.join(__dirname, '../dist/splash.html'));
- }
-
- splashWindow.once('ready-to-show', () => {
- splashWindow.show();
- });
-
- splashWindow.on('closed', () => {
- splashWindow = null;
- });
-}
-
-function createWindow() {
- // Create the browser window
- mainWindow = new BrowserWindow({
- width: 1200,
- height: 800,
- minWidth: 800,
- minHeight: 600,
- webPreferences: {
- nodeIntegration: false,
- contextIsolation: true,
- preload: path.join(__dirname, 'preload.js')
- },
- titleBarStyle: 'hiddenInset', // macOS-style title bar
- backgroundColor: '#ffffff',
- show: false, // Don't show window until splash is done
- vibrancy: 'under-window', // macOS vibrancy effect
- visualEffectState: 'active',
- trafficLightPosition: { x: 14, y: 14 }
- });
-
- // Load the app
- if (isDev) {
- // In development, load from Vite dev server
- mainWindow.loadURL('http://localhost:5173');
- // Open DevTools
- mainWindow.webContents.openDevTools();
- } else {
- // In production, load the built app
- mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
- }
-
- // Show window when ready to avoid flickering
- mainWindow.once('ready-to-show', () => {
- if (splashWindow) {
- // Add a delay to show the splash screen for at least a minimal time
- setTimeout(() => {
- splashWindow.destroy();
- mainWindow.show();
- }, 1500);
- } else {
- mainWindow.show();
- }
- });
-
- // Set up the application menu (macOS style)
- const menuTemplate = [
- // App menu (macOS only)
- ...(isMac ? [{
- label: app.name,
- submenu: [
- { role: 'about' },
- { type: 'separator' },
- {
- label: 'Preferences...',
- accelerator: 'CmdOrCtrl+,',
- click: () => {
- // Show preferences window when implemented
- mainWindow.webContents.send('show-preferences');
- }
- },
- { type: 'separator' },
- { role: 'services' },
- { type: 'separator' },
- { role: 'hide' },
- { role: 'hideOthers' },
- { role: 'unhide' },
- { type: 'separator' },
- { role: 'quit' }
- ]
- }] : []),
- // File menu
- {
- label: 'File',
- submenu: [
- {
- label: 'New Document',
- accelerator: 'CmdOrCtrl+N',
- click: () => {
- mainWindow.webContents.send('new-document');
- }
- },
- {
- label: 'Open...',
- accelerator: 'CmdOrCtrl+O',
- click: async () => {
- const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
- filters: [
- { name: 'Text Documents', extensions: ['txt', 'md', 'html'] },
- { name: 'All Files', extensions: ['*'] }
- ],
- properties: ['openFile']
- });
- if (!canceled && filePaths.length > 0) {
- mainWindow.webContents.send('open-document', filePaths[0]);
- }
- }
- },
- {
- label: 'Save',
- accelerator: 'CmdOrCtrl+S',
- click: () => {
- mainWindow.webContents.send('save-document');
- }
- },
- {
- label: 'Save As...',
- accelerator: 'CmdOrCtrl+Shift+S',
- click: async () => {
- const { canceled, filePath } = await dialog.showSaveDialog(mainWindow, {
- filters: [
- { name: 'Text Documents', extensions: ['txt', 'md', 'html'] },
- { name: 'All Files', extensions: ['*'] }
- ]
- });
- if (!canceled && filePath) {
- mainWindow.webContents.send('save-document-as', filePath);
- }
- }
- },
- { type: 'separator' },
- isMac ? { role: 'close' } : { role: 'quit' }
- ]
- },
- {
- label: 'Edit',
- submenu: [
- { role: 'undo' },
- { role: 'redo' },
- { type: 'separator' },
- { role: 'cut' },
- { role: 'copy' },
- { role: 'paste' },
- { role: 'delete' },
- { type: 'separator' },
- { role: 'selectAll' }
- ]
- },
- {
- label: 'View',
- submenu: [
- { role: 'reload' },
- { role: 'forceReload' },
- { type: 'separator' },
- { role: 'resetZoom' },
- { role: 'zoomIn' },
- { role: 'zoomOut' },
- { type: 'separator' },
- { role: 'togglefullscreen' }
- ]
- },
- {
- label: 'Window',
- submenu: [
- { role: 'minimize' },
- { role: 'zoom' },
- { type: 'separator' },
- { role: 'front' },
- { type: 'separator' },
- { role: 'close' }
- ]
- },
- {
- label: 'Help',
- submenu: [
- {
- label: 'Learn More',
- click: async () => {
- await shell.openExternal('https://pora.app');
- }
- },
- {
- label: 'Documentation',
- click: async () => {
- await shell.openExternal('https://docs.pora.app');
- }
- },
- { type: 'separator' },
- {
- label: 'About Pora',
- click: () => {
- dialog.showMessageBox(mainWindow, {
- title: 'About Pora',
- message: 'Pora - Rich Text Editor',
- detail: `Version: ${app.getVersion()}\nElectron: ${process.versions.electron}\nChrome: ${process.versions.chrome}\nNode.js: ${process.versions.node}\nV8: ${process.versions.v8}`,
- buttons: ['OK'],
- icon: path.join(__dirname, '../build/icons/icon.icns')
- });
- }
- }
- ]
- }
- ];
-
- const menu = Menu.buildFromTemplate(menuTemplate);
- Menu.setApplicationMenu(menu);
-
- // Handle window close event
- mainWindow.on('closed', () => {
- mainWindow = null;
- });
-
- // Open links in default browser
- mainWindow.webContents.setWindowOpenHandler(({ url }) => {
- shell.openExternal(url);
- return { action: 'deny' };
- });
-}
-
-// Create window when Electron is ready
-app.whenReady().then(() => {
- // Show splash screen first
- createSplashWindow();
-
- // Create main window after a short delay
- setTimeout(() => {
- createWindow();
- }, 500);
-
- // On macOS, it's common to re-create a window when dock icon is clicked
- app.on('activate', () => {
- if (BrowserWindow.getAllWindows().length === 0) {
- createWindow();
- }
- });
-});
-
-// Quit when all windows are closed, except on macOS
-app.on('window-all-closed', () => {
- if (process.platform !== 'darwin') {
- app.quit();
- }
-});
-
-// Document event handlers
-ipcMain.on('check-for-changes', async (event) => {
- const choice = await dialog.showMessageBox(mainWindow, {
- type: 'question',
- buttons: ['Save', "Don't Save", 'Cancel'],
- defaultId: 0,
- title: 'Unsaved Changes',
- message: 'There are unsaved changes. Do you want to save them?'
- });
-
- event.reply('check-for-changes-response', choice.response);
-});
diff --git a/electron/preload.js b/electron/preload.js
deleted file mode 100644
index 63519f2..0000000
--- a/electron/preload.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { contextBridge, ipcRenderer } from 'electron';
-
-// Expose any needed APIs to the renderer process
-contextBridge.exposeInMainWorld('electron', {
- // Document operations
- documentOperations: {
- // Signal to save the document
- saveDocument: (callback) => {
- ipcRenderer.on('save-document', callback);
- },
- // Signal to save the document with a specific path
- saveDocumentAs: (callback) => {
- ipcRenderer.on('save-document-as', callback);
- },
- // Signal to open a document
- openDocument: (callback) => {
- ipcRenderer.on('open-document', callback);
- },
- // Signal to create a new document
- newDocument: (callback) => {
- ipcRenderer.on('new-document', callback);
- },
- // Check if there are unsaved changes
- checkForChanges: () => {
- return new Promise((resolve) => {
- ipcRenderer.once('check-for-changes-response', (_, response) => {
- resolve(response);
- });
- ipcRenderer.send('check-for-changes');
- });
- }
- },
-
- // App operations
- appOperations: {
- // Signal to show preferences
- showPreferences: (callback) => {
- ipcRenderer.on('show-preferences', callback);
- },
- // Get app version
- getVersion: () => process.versions.electron
- },
-
- // Remove listeners when they're no longer needed
- removeAllListeners: (channel) => {
- ipcRenderer.removeAllListeners(channel);
- }
-});
-
-window.addEventListener('DOMContentLoaded', () => {
- // Any initialization that needs to happen after DOM is loaded
- console.log('DOM fully loaded and parsed - Pora is running with Electron ' + process.versions.electron);
-});
-
-export default contextBridge;
diff --git a/electron/splash.html b/electron/splash.html
deleted file mode 100644
index 058473c..0000000
--- a/electron/splash.html
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
+
+
+
+
+
+ Pora
+
+
+
+
+
+
- 
-
-
-
diff --git a/package.json b/package.json
index 17126a7..e221b46 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,11 @@
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint \"src/**/*.ts\"",
- "electron:dev": "concurrently \"npm run dev\" \"wait-on http://localhost:5173 && NODE_ENV=development electron electron/main.js\"",
- "electron:build": "npm run build && electron-builder",
- "electron:preview": "npm run build && NODE_ENV=production electron electron/main.js",
- "build:dmg": "npm run electron:build -- --mac dmg"
+ "macos:dev": "npx react-native run-macos",
+ "macos:build": "npx react-native run-macos --configuration Release",
+ "macos:preview": "npx react-native run-macos --configuration Release"
},
- "main": "electron/main.cjs",
+ "main": "src/main.tsx",
"dependencies": {
"@floating-ui/react": "^0.27.8",
"@tiptap/extension-highlight": "^2.11.9",
@@ -33,7 +32,9 @@
"@tiptap/react": "^2.11.9",
"@tiptap/starter-kit": "^2.11.9",
"react": "^18.3.1",
- "react-dom": "^18.3.1"
+ "react-dom": "^18.3.1",
+ "react-native": "^0.71.8",
+ "react-native-macos": "^0.71.8"
},
"devDependencies": {
"@types/react": "^19.1.2",
@@ -42,63 +43,11 @@
"@typescript-eslint/parser": "^7.18.0",
"@vitejs/plugin-react": "^4.4.1",
"concurrently": "^9.1.2",
- "electron": "^36.2.1",
- "electron-builder": "^26.0.12",
"eslint": "^8.57.1",
"eslint-config-prettier": "^9.1.0",
"sass-embedded": "^1.87.0",
"typescript": "5.5.4",
"vite": "^6.3.5",
"wait-on": "^8.0.3"
- },
- "build": {
- "appId": "com.pora.app",
- "productName": "Pora",
- "mac": {
- "category": "public.app-category.productivity",
- "darkModeSupport": true,
- "icon": "build/icons/icon.icns",
- "target": ["dmg"],
- "hardenedRuntime": true,
- "gatekeeperAssess": false,
- "entitlements": "build/entitlements.mac.plist",
- "entitlementsInherit": "build/entitlements.mac.plist",
- "artifactName": "Pora-${version}.${ext}"
- },
- "dmg": {
- "contents": [
- {
- "x": 130,
- "y": 220
- },
- {
- "x": 410,
- "y": 220,
- "type": "link",
- "path": "/Applications"
- }
- ],
- "window": {
- "width": 540,
- "height": 380
- },
- "backgroundColor": "#f0f0f0",
- "icon": "build/icons/icon.icns",
- "title": "Pora ${version}"
- },
- "files": [
- "dist/**/*",
- "electron/**/*"
- ],
- "directories": {
- "buildResources": "build",
- "output": "release"
- },
- "protocols": [
- {
- "name": "Pora URL",
- "schemes": ["pora"]
- }
- ]
}
}
diff --git a/src/main.tsx b/src/main.tsx
index 709f857..de76f80 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,6 +2,8 @@ import { createRoot } from "react-dom/client"
import { useState, useEffect } from "react"
import { SimpleEditor } from "@/components/tiptap-templates/simple/simple-editor"
import { SplashScreen } from "@/components/splash-screen/splash-screen"
+import { AppRegistry } from 'react-native';
+import { name as appName } from './app.json';
const App = () => {
const [showSplashScreen, setShowSplashScreen] = useState(true);
@@ -29,4 +31,4 @@ const App = () => {
);
};
-createRoot(document.getElementById("app")!).render(
-