feat: added monaco as editor

This commit is contained in:
2026-04-27 20:09:09 +02:00
parent 3923144976
commit 22f625ced0
130 changed files with 71774 additions and 202 deletions

View File

@@ -18,7 +18,7 @@ defmodule BDS.Desktop.Endpoint do
plug Plug.Static,
at: "/assets",
from: {:bds, "priv/ui"},
only: ["app.css", "live.js"]
only: ["app.css", "live.js", "monaco"]
plug Plug.Static,
at: "/vendor/phoenix",

View File

@@ -24,7 +24,18 @@
</div>
<div class="editor-body scripts-editor">
<div class="editor-toolbar scripts-toolbar"><div class="editor-toolbar-left"><label><%= translated("Content") %></label></div></div>
<div class="scripts-monaco"><textarea class="code-editor-textarea" name="script_editor[content]"><%= @script_editor.content %></textarea></div>
<div
id={"script-editor-monaco-shell-#{@script_editor.id}"}
class="scripts-monaco monaco-editor-shell"
phx-hook="MonacoEditor"
data-monaco-editor-id={@script_editor.id}
data-monaco-input-id={"script-editor-content-#{@script_editor.id}"}
data-monaco-language="lua"
data-monaco-word-wrap="off"
>
<div id={"script-editor-monaco-#{@script_editor.id}"} class="monaco-editor-instance" phx-update="ignore"></div>
<textarea id={"script-editor-content-#{@script_editor.id}"} class="monaco-editor-input code-editor-textarea" name="script_editor[content]" spellcheck="false"><%= @script_editor.content %></textarea>
</div>
</div>
<div class="editor-footer"><span class="text-muted text-small"><%= translated("Created") %>: <%= format_timestamp(@script_editor.created_at) %></span><span class="text-muted text-small"><%= translated("Updated") %>: <%= format_timestamp(@script_editor.updated_at) %></span></div>
</form>

View File

@@ -22,7 +22,18 @@
</div>
<div class="editor-body templates-editor">
<div class="editor-toolbar templates-toolbar"><div class="editor-toolbar-left"><label><%= translated("Content") %></label></div></div>
<div class="templates-monaco"><textarea class="code-editor-textarea" name="template_editor[content]" spellcheck="false"><%= @template_editor.content %></textarea></div>
<div
id={"template-editor-monaco-shell-#{@template_editor.id}"}
class="templates-monaco monaco-editor-shell"
phx-hook="MonacoEditor"
data-monaco-editor-id={@template_editor.id}
data-monaco-input-id={"template-editor-content-#{@template_editor.id}"}
data-monaco-language="liquid"
data-monaco-word-wrap="off"
>
<div id={"template-editor-monaco-#{@template_editor.id}"} class="monaco-editor-instance" phx-update="ignore"></div>
<textarea id={"template-editor-content-#{@template_editor.id}"} class="monaco-editor-input code-editor-textarea" name="template_editor[content]" spellcheck="false"><%= @template_editor.content %></textarea>
</div>
</div>
<div class="editor-footer"><span class="text-muted text-small"><%= translated("Created") %>: <%= format_timestamp(@template_editor.created_at) %></span><span class="text-muted text-small"><%= translated("Updated") %>: <%= format_timestamp(@template_editor.updated_at) %></span></div>
</form>

View File

@@ -387,9 +387,19 @@
<% end %>
</div>
<% else %>
<div id={"post-editor-markdown-surface-#{@post_editor.id}"} class="post-editor-markdown-surface" data-testid="post-editor-markdown-surface" phx-hook="PostEditorContent" data-post-editor-id={@post_editor.id}>
<pre class="post-editor-markdown-highlight" aria-hidden="true"></pre>
<textarea id={"post-editor-content-#{@post_editor.id}"} class="post-editor-textarea post-editor-content" data-testid="post-editor-content" data-post-editor-id={@post_editor.id} name="post_editor[content]" rows="18"><%= @post_editor.form["content"] %></textarea>
<div
id={"post-editor-markdown-surface-#{@post_editor.id}"}
class="post-editor-markdown-surface monaco-editor-shell"
data-testid="post-editor-markdown-surface"
phx-hook="MonacoEditor"
data-monaco-editor-id={@post_editor.id}
data-monaco-input-id={"post-editor-content-#{@post_editor.id}"}
data-monaco-language="markdown"
data-monaco-word-wrap="on"
data-monaco-insert-event="post-editor-insert-content"
>
<div id={"post-editor-monaco-#{@post_editor.id}"} class="monaco-editor-instance" phx-update="ignore"></div>
<textarea id={"post-editor-content-#{@post_editor.id}"} class="monaco-editor-input post-editor-content" data-testid="post-editor-content" data-post-editor-id={@post_editor.id} name="post_editor[content]" rows="18" spellcheck="false"><%= @post_editor.form["content"] %></textarea>
</div>
<% end %>
</div>