Phoenix liveview: Why Html.raw render this html snippet cause liveview re-mount?

Phoenix Forum Questions / Help
,
1

Hi,
I am trying to integrate a rich text editor (trix) into my liveview heex template,
I expect to receive and store users generated input content as html string, and display them back with { raw(@content) } .
In normal case it worked well (user input/paste normal html, and my controller/template rendered them well with no error),
but recently found this , really make me confused:
if I select-copy some content like this, then pasted in my form (trix editor) input box,

<div>
<figure data-trix-attachment="{&quot;contentType&quot;:&quot;image&quot;,&quot;url&quot;:null}" data-trix-content-type="image" class="attachment attachment--preview"><img src="null">
<figcaption class="attachment__caption"></figcaption>
</figure></div>
<div><br></div>
<div>Bouncy balls cascading down a San Francisco street for a Sony Bravia commercial in 2005.</div>

this text is from: this page ,if you want to try , remember to select the images :slight_smile:
ever in “validate” event was trigger, or after save them and show them on page, it will caused liveview re run mount() , then errors happen because there is no params passed to it.

does anyone know where I had did it wrong ?

2

Have you checked the logs?

3

Without seeing the rest of the code, it sounds like inserting images is triggering update rather than mount? Could you confirm its definitely a mount being triggered?

You may be able to just add phx-update=“ignore” to the form input field if image insertion is triggering an update.

4

Thank you for replies.
this is the logs:

[debug] HANDLE PARAMS in Lingo2Web.GroupLive.GroupDetailController
  Parameters: %{"group_uid" => "g426755"}
[debug] Replied in 94µs
<!-- 
  Above are normal log.
  Below are that I think re-mount was triggered,
   don't know why didi it happen;
   it only raised at the page which I had inserted previous mentioned html snippet.           
-->
[info] GET /g/null
[debug] Processing with Lingo2Web.GroupLive.GroupDetailController.nil/2
  Parameters: %{"group_uid" => "null"}
  Pipelines: [:browser]
[debug] QUERY OK source="users_tokens" db=0.6ms idle=410.8ms
SELECT u1."id", u1."uid", u1."email", u1."hashed_password", u1."confirmed_at", u1."inserted_at", u1."updated_at" FROM "users_tokens" AS u0 INNER JOIN "users" AS u1 ON u1."id" = u0."user_id" WHERE ((u0."token" = $1) AND (u0."context" = $2)) AND (u0."inserted_at" > $3::timestamp + (-(60)::numeric * interval '1 day')) [<<201, 144, 72, 112, 8, 60, 4, 81, 130, 117, 30, 78, 1, 65, 115, 28, 180, 22, 137, 5, 124, 69, 210, 192, 48, 109, 171, 219, 23, 128, 62, 153>>, "session", ~U[2025-03-15 22:50:11.238279Z]]
↳ Lingo2Web.UserAuth.fetch_current_user/2, at: lib/lingo2_web/user_auth.ex:95
%{"group_uid" => "null"}
[debug] QUERY OK source="groups" db=0.4ms idle=403.3ms
SELECT g0."id", g0."uid", g0."name", g0."description", g0."creator_id", g0."inserted_at", g0."updated_at" FROM "groups" AS g0 WHERE (g0."uid" = $1) ["null"]
↳ Lingo2Web.GroupLive.GroupDetailController.mount/3, at: lib/lingo2_web/controllers/group_live/group_detail_controller.ex:10
[info] Sent 404 in 55ms
[debug] ** (Ecto.NoResultsError) expected at least one result but got none in query:

from g0 in Lingo2.Groups.Group,
  where: g0.uid == ^"null",
  preload: [:posts]

    (ecto 3.12.5) lib/ecto/repo/queryable.ex:164: Ecto.Repo.Queryable.one!/3
    (lingo2 1.0.0) lib/lingo2_web/controllers/group_live/group_detail_controller.ex:10: Lingo2Web.GroupLive.GroupDetailController.mount/3
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/utils.ex:348: anonymous fn/6 in Phoenix.LiveView.Utils.maybe_call_live_view_mount!/5
    (telemetry 1.3.0) /home/fuw/temp/prj/lingo2/deps/telemetry/src/telemetry.erl:324: :telemetry.span/3
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/static.ex:320: Phoenix.LiveView.Static.call_mount_and_handle_params!/5
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/static.ex:155: Phoenix.LiveView.Static.do_render/4
    (phoenix_live_view 1.0.5) lib/phoenix_live_view/controller.ex:39: Phoenix.LiveView.Controller.live_render/3
    (phoenix 1.7.20) lib/phoenix/router.ex:484: Phoenix.Router.__call__/5
    (lingo2 1.0.0) lib/lingo2_web/endpoint.ex:1: Lingo2Web.Endpoint.plug_builder_call/2
    (lingo2 1.0.0) deps/plug/lib/plug/debugger.ex:136: Lingo2Web.Endpoint."call (overridable 3)"/2
    (lingo2 1.0.0) lib/lingo2_web/endpoint.ex:1: Lingo2Web.Endpoint.call/2
1 Like
5

I’m confused as this looks like it has nothing to do with trix.

You’re running a query and passing a null parameter for the group_id so the liveview is crashing and remounting.

[debug] ** (Ecto.NoResultsError) expected at least one result but got none in query:

from g0 in Lingo2.Groups.Group,
  where: g0.uid == ^"null",
  preload: [:posts]
1 Like
6

yes , that is what I said, don’t kown why/who triggered this re-mount (then it can’t find the params, raise errors); only at the page where had pasted that html content and “raw()” render them. feeling weird.

7

What I’m saying is that it’s not a re-mount, its a crash due to a function receiving an incorrect parameter. The “re-mount” is a crash recovery.

You need to find the function and find out how and where it is related to the form you are using for Trix.

You have a function thats something along the lines of:

Groups.get!(id)

This function is being triggered with a nil value for the ID when you copy and paste, for whatever reason that may be. But without seeing the form/codebase its impossible for someone to tell how it relates to Trix specifically.

  1. Find the function causing the crash
  2. Find the parameter it is expecting as the ID
  3. Trace backwards using IO.inspect() on the parameter until you can find out why it is returning a nil value.

It sounds like you may have a feature that allows posts to be sorted by groups in the form and you are not assigning the ID value, then when you go to render the content loaded from the form your page is crashing because the ID was not assigned.

1 Like
8

Thank you very much for your kind assistance. I will continue to work on it. Integrating a rich text WYSIWYG editor into a LiveView form is really quite a troublesome things : ))

9

Today I have try this problem again , and I think that was trix editor’s issues: ever I pasted the content from that page (I mentioned above) to Trix official demo — https://trix-editor.org – I can see that in browser console it emit a “https://trix-editor.org/null” request then got 404. Maybe for the element contains a “srcset” attribute and trix not support it well ? anyway I have alreay turn to Quill editor and with it no errors raised. :slightly_smiling_face: