Admin page > Empty code editor

[jeryldev]

Problem

The Code Editor is empty even though the server is running fine. Also, I don't know if this is related or not but the Visual Editor gets an overlay once I hover the mouse cursor to the Components section (left panel).

Additional Information

• uname Linux
• uname -r 5.15.153.1-microsoft-standard-WSL2
• erlang 27.0.1
• elixir 1.17.2-otp-27
• GitHub repo for reference: https://github.com/jeryldev/jeryldevcms

Screen Recording

Recording.2024-07-21.093217.mp4

[leandrocp]

Hey @jeryldev do you see any error on your browser console?

[jeryldev]

Sorry for the delay @leandrocp . Here are the errors I saw in the console:

[leandrocp]

Thanks. The problem here is missing CSP rules to allow loading the monaco editor assets from the jsdelivr cdn.

[leandrocp]

To be clear, those rules should be documented in https://github.com/BeaconCMS/live_monaco_editor and defined in beacon_live_admin so you don't need to do take any action in your project. I'm looking into that.

[jeryldev]

Thank you! I'm looking forward to it. 💯

[leandrocp]

Could you please give this a try? BeaconCMS/beacon_live_admin#191

You can clone the beacon_live_admin with that branch repo and change your project mix.exs:

      {:beacon_live_admin, path: "/path/to/beacon_live_admin"}

[jeryldev]

I think I have a new error after following the instructions 😅👍This one happens to both edge and firefox

[error] ** (UndefinedFunctionError) function Beacon.Web.API.ComponentJSON.index/1 is undefined (module Beacon.Web.API.ComponentJSON is not available) Beacon.Web.API.ComponentJSON.index(%{components: [%Beacon.Content.Component{__meta__: #Ecto.Schema.Metadata<:loaded, "beacon_components">, id: "5725d2f6-a32f-42da-aa6c-321cbec7a012", site: :jeryldev, name: "button", description: "Renders a button", body: nil, template: "\n <button\n type={@type}\n class=\"phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3 text-sm font-semibold leading-6 text-white active:text-white/80\",\n {@rest}\n >\n <%= render_slot(@inner_block) %>\n </button>\n ", example: "<.button phx-click=\"go\">Send!</.button>", category: :element, thumbnail: "https://placehold.co/400x75?text=button", attrs: #Ecto.Association.NotLoaded<association :attrs is not loaded>, slots: #Ecto.Association.NotLoaded<association :slots is not loaded>, inserted_at: ~U[2024-07-20 13:10:57.711485Z], updated_at: ~U[2024-07-20 13:10:57.711485Z]}, %Beacon.Content.Component{__meta__: #Ecto.Schema.Metadata<:loaded, "beacon_components">, id: "7cf9a801-ac98-4f0e-9e19-940e0e18dbcc", site: :jeryldev, name: "div", description: "div", body: nil, template: "<div>block</div>", example: "<div>block</div>", category: :html_tag, thumbnail: "https://placehold.co/400x75?text=div", attrs: #Ecto.Association.NotLoaded<association :attrs is not loaded>, slots: #Ecto.Association.NotLoaded<association :slots is not loaded>, inserted_at: ~U[2024-07-20 13:10:57.644727Z], updated_at: ~U[2024-07-20 13:10:57.644727Z]}, %Beacon.Content.Component{__meta__: #Ecto.Schema.Metadata<:loaded, "beacon_components">, id: "4e27e3dd-445c-49e8-b60a-b9ae25f0d496", site: :jeryldev, name: "embedded", description: "Renders embedded content like an YouTube video", body: "\n {:ok, %{html: html}} = OEmbed.for(assigns.url)\n assigns = Map.put(assigns, :html, html)\n ", template: "<%= Phoenix.HTML.raw(@html) %>", example: "<.embedded url={\"https://www.youtube.com/watch?v=agkXUp0hCW8\"} />", category:

[leandrocp]

How your mix.exs looks like? (only beacon and beacon_live_admin definitions)?

[jeryldev]

Here's how my deps looked like:

  defp deps do
    [
      {:phoenix, "~> 1.7.14"},
      {:phoenix_ecto, "~> 4.5"},
      {:ecto_sql, "~> 3.10"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 4.1"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      # TODO bump on release to {:phoenix_live_view, "~> 1.0.0"},
      {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},
      {:floki, ">= 0.30.0"},
      {:phoenix_live_dashboard, "~> 0.8.3"},
      {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
      {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
      {:heroicons,
       github: "tailwindlabs/heroicons",
       tag: "v2.1.1",
       sparse: "optimized",
       app: false,
       compile: false,
       depth: 1},
      {:swoosh, "~> 1.5"},
      {:finch, "~> 0.13"},
      {:telemetry_metrics, "~> 1.0"},
      {:telemetry_poller, "~> 1.0"},
      {:gettext, "~> 0.20"},
      {:jason, "~> 1.2"},
      {:dns_cluster, "~> 0.1.1"},
      {:bandit, "~> 1.5"},
      {:credo, "~> 1.7.7", only: [:dev, :test], runtime: false},
      {:sobelow, "~> 0.13.0", only: [:dev, :test], runtime: false},
      {:dialyxir, "~> 1.4.3", only: [:dev, :test], runtime: false},
      {:excoveralls, "~> 0.18.1", only: [:dev, :test], runtime: false},
      {:mix_audit, "~> 2.1.4", only: [:dev, :test], runtime: false},
      {:beacon, github: "BeaconCMS/beacon", override: true},
      {:beacon_live_admin, path: "/home/jeryl/portfolio/beacon_live_admin"}
    ]
  end

[APB9785]

@jeryldev are you still experiencing this issue on beacon 0.1.0-rc-0?