LucidChart with React

Hey Dan! Apologies on the delayed response. There seems to be a bug with windows and our webpack script. We will be discussing tomorrow as a team. Will follow up shortly. Thanks!

Hey Dan,

Sorry again for the delay there. We're still working on making our script windows compatible. In the meantime, I've created a repo that can hopefully unblock you as a workaround.

https://github.com/lucidsoftware/sample-lucid-extensions/commit/32ef439f99d7189ef8acf1e40bb16207f1d68ea6

Here's the file that matters the most. You can create this one manually in your own `/public` folder and that should get your extension talking to your frontend.

https://github.com/lucidsoftware/sample-lucid-extensions/commit/32ef439f99d7189ef8acf1e40bb16207f1d68ea6#diff-9ef5a348eadc3a77e8bb80e863f1a768c8ec18b1bcd86f6210a2129c90e2b876

You’ll probably need to update this url to point to the right location (the url is relative to the root of `/public`): 

https://github.com/lucidsoftware/sample-lucid-extensions/commit/32ef439f99d7189ef8acf1e40bb16207f1d68ea6#diff-e44faa18ad076e8bde1bd79376967ee031fc04f3b8a714abe5f4149fee691fb5R11

This will come up again when you're wanting to generate your production bundle, so I’ll keep you in the loop on our fix.

I unfortunately cannot get this to work still.  I even tried starting over from scratch several times.

You say “You can create {index.html} manually in your own `/public` folder and that should get your extension talking to your frontend.”

I downloaded the index.html file into this folder:

{mybasefolder}\reacttest\editorextensions\with-cool-ui\rightpanel\public

Is that the correct /public folder to put index.html in?

You say “You’ll probably need to update {extension.ts’s url } to point to the right location (the url is relative to the root of `/public`): 

my full path to “extension.ts” is:

"C:\ReactLucidTest\reacttest\editorextensions\with-cool-ui\src\extension.ts"

is that the correct “extension.ts” to edit?

my full path to “index.html” is:

"C:\ReactLucidTest\reacttest\editorextensions\with-cool-ui\rightpanel\public\index.html"

My current code for extension.ts is:

import {EditorClient, Panel, PanelLocation, Viewport} from 'lucid-extension-sdk';

const client = new EditorClient();

export class RightPanel extends Panel {

    private static icon = 'https://lucid.app/favicon.ico';

    constructor(client: EditorClient) {

        super(client, {

            title: 'From React',

            url: 'rightpanel/index.html',

            location: PanelLocation.RightDock,

            iconUrl: RightPanel.icon,

        });

    }

}

const rightPanel = new RightPanel(client);

you say “the url is relative to the root of `/public”, then should the url value simply be index.html?

Thanks,

Dan

I used chatgpt on the error I was getting and got the following response:
 

“The error message you're seeing suggests there's a syntax problem with your command. It appears you're trying to use Unix-style commands (`mkdir`, `curl`, `sed`) in a Windows environment, which might not work as expected because Windows command line (CMD) uses a different syntax. Moreover, the combination of commands and the way they are piped together could also be causing issues.

Let's break down your command and see how it can be adapted for Windows, or how you can use alternative tools:

1. `mkdir -p ../../public/rightpanel`: This command is trying to create a directory, including any necessary parent directories. The `-p` option, which allows the creation of nested directories, does not have a direct equivalent in Windows CMD, but PowerShell supports similar functionality.

2. `curl http://localhost:3000`: This command is used to fetch the content from the specified URL. Windows 10 and later include `curl`, so this part should work, but ensure `curl` is installed if you're on an older version.

3. `sed -E "s/(src|href)=\"/\\1=\"http:\/\/localhost:3000/gi"`: This part uses `sed`, a stream editor for filtering and transforming text, which is not natively available in Windows CMD. You might need to use a different tool for text processing, like PowerShell commands or download a Windows version of `sed`.

4. `> ../../public/rightpanel/index.html`: This part redirects the output to a file, which should work in Windows CMD as well.

For Windows, consider using PowerShell, which is more powerful and flexible than CMD, and supports more Unix-like commands. Here's how you might rewrite your command in PowerShell:

```powershell
# Ensure the directory exists
$dir = "../../public/rightpanel"
if (-Not (Test-Path $dir)) {
  New-Item -ItemType Directory -Force -Path $dir
}

# Fetch content and modify it
$content = Invoke-WebRequest -Uri "http://localhost:3000" | Select-Object -ExpandProperty Content
$modifiedContent = $content -replace '(src|href)="', '$1="http://localhost:3000/'

# Write to file
$modifiedContent | Set-Content "$dir/index.html"
```

This PowerShell script does the following:
- Checks if the directory exists and creates it if it doesn't.
- Fetches content from `http://localhost:3000`.
- Uses a regular expression to replace `src="` and `href="` with `src="http://localhost:3000/` and `href="http://localhost:3000/`.
- Writes the modified content to `../../public/rightpanel/index.html`.

Make sure to run this in a PowerShell environment. If you're integrating this into a build script or tool that doesn't run PowerShell by default, you might need to call it explicitly, e.g., by using `powershell -Command "<your command here>"` or saving the script to a `.ps1` file and running it with PowerShell.”

This leads me to think the issue is related to the webpack.config.js code.  Thoughts?

ablackburn,

I unfotunately cannot get this to work still.

Here is what I did:

• Started over and created an empty folder:  C:\ReactLucidTest2
• Followed the exact instructions as found in the official React Guide here.
• Copied the index.html found that you linked here:  I placed the downloaded index.html in this folder: C:\ReactLucidTest2\reacttest\public
• modified  C:\ReactLucidTest2\reacttest\editorextensions\with-cool-ui\src\extension.ts by setting url to one of these:
  • url: 'index.html',
  • url: 'right/index.html',

The react app is up and running in the browser at http://localhost:3000/ using npm start.

In a second command prompt, i cded to C:\ReactLucidTest2\reacttest and then run:

npx lucid-package test-editor-extension with-cool-ui

I get the following error message:

Listening at http://localhost:9900/extension.js
Listening at http://localhost:9901/shapeLibraries
Found npm start script in C:\ReactLucidTest2\reacttest\editorextensions\with-cool-ui\rightpanel.
node:events:496
      throw er; // Unhandled 'error' event
      ^

Error: spawn npm ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn npm',
  path: 'npm',
  spawnargs: [ 'start' ]
}

Node.js v20.11.1

Thoughts?

I pulled down the full commit code but did not do anything with it since I still followed the official React Guide.

Would someone be willing to do a web meeting with me to get things up and running?

Thanks, Dan