lpotthast / leptos-tiptap

Tiptap integration for the Leptos web framework
https://crates.io/crates/leptos-tiptap
Apache License 2.0
23 stars 6 forks source link

Running `leptos-tiptap` in an leptos SSR workspace #3

Open JosVerheij opened 8 months ago

JosVerheij commented 8 months ago

The tiptap instance does not run when integrating leptos-tiptap into the start-axum-workspace template from leptos. I suspect a configuration error on my side. Would appreciate some help in pinpointing the error.

I'm using leptos with ssr in a workspace project. The benefit of using workspaces is slightly better separation of backend and frontend. It saves on some #[cfg(feature = "ssr")] and it's easier to extend the server code with non-leptos functionality. However, there are now three different packages, each with their own Cargo.toml that need to be configured correctly.

The problem is, the tiptap instance in this setup does not run. Even though everything appears to be present, the

I have set up an example project here, with the following steps:

  1. $ cargo leptos new --git https://github.com/leptos-rs/start-axum-workspace
  2. update wasm-bindgen to version 0.2.92
  3. add leptos-tiptap dependencies (see below for cargo.toml)
  4. add build.rs (same as the demo-ssr example, except with the root path one dir up)
  5. add the Demo leptos component to app/lib.rs (again same as demo-ssr example)
  6. add the necessary Script tags to app/lib.rs

Running the project (cargo leptos watch) makes it appear as if everything is present:

..but the tiptap instance does not actually do anything. There is an empty box where (in the demo) the WYSIWYG editor would show. Sadly, there are no error messages to debug, so I'm currently left clueless.

leptos-tiptap-instance in browser:

<leptos-tiptap-instance id="id" data-hk="0-0-0-34" class=" " style=" display: block; width: auto; height: auto; border: 1px solid; padding: 0.5em; white-space: pre-wrap;;"></leptos-tiptap-instance>

Cargo.toml (workspace):

[dependencies]
...
leptos-tiptap = { version = "0.7", features = ["ssr"] }
leptos-tiptap-build = "0.2"
...

Cargo.toml (app):

[dependencies]
leptos-tiptap.workspace = true

[build-dependencies]
leptos-tiptap-build.workspace = true

[features]
ssr = [ ... "leptos-tiptap/ssr"]

Cargo.toml (server):

[dependencies]
leptos-tiptap = { workspace = true, features = ["ssr"] }

My current thoughts are that I'm missing some dependencies somewhere, but from the available docs I'm unable to determine which those might be. Any help would be appreciated!

sideproject0214 commented 4 weeks ago

In my case, when I activated the developer tools, I received an error message indicating that the JS files were not being loaded. In this situation, you need to save the files in the assets directory that you actually use to load assets in your Cargo.toml. For me, it was set as assets-dir = "src/assets", and to place the JS files in src/assets/js, I modified the build.rs as follows.

  let public_dir = root.join("src/assets");
  let js_dir = public_dir.join("js");

And since I'm using Actix, I specified the path to serve the JS files as follows: (in main.rs)

    App::new()
      .app_data(web::Data::new(db_pool.clone()))
      .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
      .service(Files::new("/pkg", format!("{site_root}/pkg")))
      .service(Files::new("/images", format!("{site_root}/images")))
      .service(Files::new("/js", format!("{site_root}/js")))
      .service(favicon)
      .leptos_routes(leptos_options.to_owned(), routes.to_owned(),