AcePhoenix

A Phoenix component for integrating the Ace code editor into your Phoenix applications.

Installation

Add ace_phoenix to your list of dependencies in mix.exs:

def deps do
  [
    {:ace_phoenix, "~> 0.1.0"}
  ]
end

Usage

1. In your app.js, import and set up the AceEditorHook:

import { AceEditorHook } from "ace_phoenix";

let Hooks = {};
Hooks.AceEditor = AceEditorHook;

let liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks, params: { _csrf_token: csrfToken } });

1. In your LiveView or component:

import AcePhoenix.Components.AceEditor

def render(assigns) do
  ~H"""
  <.ace_editor id="my-editor" content={@content} mode="elixir" theme="monokai" />
  """
end

def handle_event("ace-change", %{"content" => content}, socket) do
  {:noreply, assign(socket, content: content)}
end

License

This project is licensed under the MIT License.