Hello Everyone,
I'm currently working on my first InDesign UXP Plugin. Everything has been functioning smoothly in the developer tool, but I've encountered an issue when trying to package and install it. For some reason, the installation process fails, consistently resulting in Error Code -2.
| -2 | File System Error | The file system errors are usually permission errors or are related to disk space. Free some space on the disk. Then, relaunch the Creative Cloud desktop app and try installing the extension or plugin again. If this doesn't work, quit the Creative Cloud desktop app and the installed app. Then try installing the extension or plugin again. |
To troubleshoot, I attempted to package and install some of the starter plugin templates, but these also failed with the same error code. This issue doesn't seem to be related to disk space, as I have ample space available.
As I am new to this, I apologize if this comes across as a basic question. I'm a beginner in this area and would greatly appreciate any insights or similar experiences anyone might have had with this issue.
Below, I have included the code from my home.jsx file and my manifest. If additional details or code snippets are required for a more comprehensive understanding, please let me know, and I will be happy to provide them.
Thank you in advance for your assistance!
home.jsx
import React, { useState } from "react";
import { WC } from "./WC.jsx";
import { XLSXReader } from "./XLSXReader.jsx";
import "./Home.css";
export const Home = () => {
const [excelData, setExcelData] = useState([]);
const [clickedCells, setClickedCells] = useState({});
const [fileLoaded, setFileLoaded] = useState(false);
const [isCopyEnabled, setIsCopyEnabled] = useState(false);
const [highlightCopy, setHighlightCopy] = useState(false); // New state for highlight toggle
const [theme, setTheme] = useState('dark'); // New state for theme
const handleFileRead = async () => {
if (fileLoaded) {
// If a file is already loaded, clear the data and set fileLoaded to false
setExcelData([]);
setFileLoaded(false);
} else {
// If no file is loaded, open file dialog and set fileLoaded to true
const data = await XLSXReader.readExcel();
setExcelData(data);
setFileLoaded(true);
}
};
const copyToClipboard = (cell, rowIndex, cellIndex) => {
if (!isCopyEnabled) return;
const text = String(cell);
navigator.clipboard.setContent({"text/plain": text}).then(() => {
console.log("Copied to clipboard:", text);
if (highlightCopy) {
setClickedCells(prev => ({
...prev,
[`${rowIndex}-${cellIndex}`]: true // Highlight cell
}));
}
}).catch(err => {
console.error('Failed to copy: ', err);
});
};
const clearCellHighlighting = () => {
setClickedCells({});
};
// Function to toggle theme
const toggleTheme = () => {
setTheme(prevTheme => (prevTheme === 'dark' ? 'light' : 'dark'));
};
const renderTable = () => {
if (excelData && excelData.length > 0) {
return (
<table>
<tbody>
{excelData.map((row, rowIndex) => (
<tr key={rowIndex}>
{Object.values(row).map((cell, cellIndex) => {
const cellKey = `${rowIndex}-${cellIndex}`;
const cellClasses = `${isCopyEnabled ? "copy-enabled" : ""} ${clickedCells[cellKey] ? "clicked" : ""}`;
return (
<td
key={cellIndex}
onClick={() => copyToClipboard(cell, rowIndex, cellIndex)}
className={cellClasses}
>
{cell !== null ? cell : ""}
</td>
);
})}
</tr>
))}
</tbody>
</table>
);
}
return null;
};
// Use theme state to determine class names
const containerClassName = `table-container ${theme}`;
const optionsContainerClassName = `options-container ${theme}`;
return (
<WC>
<div className="options-container">
<button onClick={handleFileRead}>
{fileLoaded ? "Remove File" : "Load File"}
</button>
<div className="checkbox-container">
<input
type="checkbox"
id="copyCheckbox"
checked={isCopyEnabled}
onChange={(e) => setIsCopyEnabled(e.target.checked)}
/>
<label htmlFor="copyCheckbox">Copy to Clipboard</label>
<input
type="checkbox"
id="colorizeCheckbox"
checked={highlightCopy}
onChange={(e) => setHighlightCopy(e.target.checked)}
/>
<label htmlFor="colorizeCheckbox">Colorize on Copy</label>
<input
type="checkbox"
id="themeCheckbox"
checked={theme === 'light'}
onChange={toggleTheme}
/>
<label htmlFor="themeCheckbox">Light Mode</label>
</div>
<button onClick={clearCellHighlighting}>Clear Coloring</button>
</div>
<div className={`table-container ${theme}`}>
{renderTable()}
</div>
</WC>
);
};
export default Home;
manifest.json
{
"id": "xlsx2cb",
"name": "XLSX2Clipboard",
"version": "1.0.0",
"main": "index.html",
"manifestVersion": 5,
"host": [
{
"app": "ID",
"minVersion": "19.0.1"
}
],
"requiredPermissions": {
"localFileSystem": "request",
"clipboard": "readAndWrite"
},
"entrypoints": [
{
"type": "panel",
"id": "demos",
"label": {
"default": "XLSX2Clipboard"
},
"minimumSize": {
"width": 230,
"height": 100
},
"maximumSize": {
"width": 2000,
"height": 2000
},
"preferredDockedSize": {
"width": 500,
"height": 200
},
"preferredFloatingSize": {
"width": 500,
"height": 100
},
"icons": [
{
"width": 32,
"height": 32,
"path": "icons/icon_D.png",
"scale": [
1,
2
],
"theme": [
"dark",
"darkest"
],
"species": [
"generic"
]
},
{
"width": 32,
"height": 32,
"path": "icons/icon_N.png",
"scale": [
1,
2
],
"theme": [
"lightest",
"light"
],
"species": [
"generic"
]
}
]
}
],
"icons": [
{
"width": 32,
"height": 32,
"path": "icons/icon_D.png",
"scale": [
1,
2
],
"theme": [
"dark",
"darkest"
],
"species": [
"generic"
]
},
{
"width": 32,
"height": 32,
"path": "icons/icon_N.png",
"scale": [
1,
2
],
"theme": [
"lightest",
"light"
],
"species": [
"generic"
]
}
]
}
