LoopOS UI v1.1.30.0-feat.indentifier.editor.869c1hwb7.rc3

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<turbo-frame id="test_turbo_id" class="">
  <div class="flex flex-row gap-2xs">
    <div class="flex flex-col items-start w-full gap-2">
      <div data-scripts-target="scripts" data-controller="scripts form-submit" class="flex justify-between w-full items-center gap-[8px]">
        <div>
          <div class="flex flex-row gap-2xs">
            <p class="text-xs font-normal text-gray-darkest">Code Editor Form Example</p>
          </div>
        </div>
      </div>
      <turbo-frame class="w-full" id="editor_test_turbo_id">
        <div data-react-class="Editor" data-react-props="{"mode":"ruby","name":"code_editor","storedValue":"# @param context: a hash containing any context information that might be required for this decision block.\n    # Usually the `item_id` is passed here.\n    # @return [nil, string]: the token to be used in the next block\n\n    def decide(context)\n      # Context should have item_id\n      item = Item.find_by(id: context[:item_id]) if context[:item_id].present?\n      return nil if item.nil?\n      item.forward_item_id.present? ? :forward_item : default_output_token\n    end\n      \n    def output_tokens\n      [:forward_item, :without_forward_item]\n    end\n      \n    def default_output_token\n      :without_forward_item\n    end","readOnly":false,"className":"ruby-editor"}" data-react-cache-id="Editor-0" style="width:100%"></div>
      </turbo-frame>    </div>
  </div>
</turbo-frame>

Code Editor

The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.

Used Components Components where is Used
Ace Editor

Usage rules

  • ✅ Do
    • Use in environments where users need to write or modify code directly
  • ❌ Don't
    • Don’t use if users only need basic text input or settings fields
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<% 
  element = OpenStruct.new(
    id: 18,
    name: "Forward Trade-In Email template decision script",
    created_at: "2024-03-06 00:06:09.592017000 +0000",
    updated_at: "2024-03-06 00:06:09.599611000 +0000",
    input_fields: [],
    kind: "decision_block",
    isolated: false,
    description: nil,
    cron_notation: nil,
    disabled: false,
    settings_schema: {},
    favourite: false,
    last_run_date: nil
  )
  default_value = "# @param context: a hash containing any context information that might be required for this decision block.
    # Usually the `item_id` is passed here.
    # @return [nil, string]: the token to be used in the next block
    def decide(context)
      # Context should have item_id
      item = Item.find_by(id: context[:item_id]) if context[:item_id].present?
      return nil if item.nil?
      item.forward_item_id.present? ? :forward_item : default_output_token
    end
      
    def output_tokens
      [:forward_item, :without_forward_item]
    end
      
    def default_output_token
      :without_forward_item
    end"
  turbo_id = "test_turbo_id"
%>
<%
  form_url = params[:form_url] || ""
  submitable = params[:submitable].present? ? params[:submitable] : false
  turbo_frame_id = params[turbo_frame_id] || "editor_#{turbo_id}"
  title = params[:title] || "Code Editor Form Example"
  show_path = params[:show_path] || ""
  edit_path = params[:edit_path] || "?edit_mode=true"
  show_edit_button = params[:show_edit_button].present? ? params[:show_edit_button] : false
  attribute = params[:attribute] || "custom_code",
  type = params[:type] || "ruby"
  readonly = params[:readonly].present? ? params[:readonly] : false
%>
<%= render LooposUi::InlineEditComponent::Base.new(model: element, show_path: show_path, edit_path: edit_path, attribute: attribute, type: :text_field, **{ with_turbo_wrapper: (with_turbo_wrapper ||= true), size: "small", has_margin: true, show_edit_button: show_edit_button, custom_turbo_frame_id: turbo_id } ) do |inline| %>
  <% inline.with_show do %>
    <div class="flex flex-col items-start w-full gap-2">
      <div data-scripts-target="scripts" data-controller="scripts form-submit" class="flex justify-between w-full items-center gap-[8px]">
        <div>
          <% if title.present? %>
            <div class="flex flex-row gap-2xs">
              <p class="text-xs font-normal text-gray-darkest"><%= title %></p>
              <%= inline.render_edit_button %>
            </div>
          <% end %>
        </div>
        <% if defined?(action_buttons) && action_buttons %>
          <% options_script = [
            {text: I18n.t("script_builder.upload"),  icon: "fa-regular fa-upload", attributes: { "data-action": "click->scripts#triggerFileInput" }},
            {text: I18n.t("script_builder.download"), url: download_url, icon: "fa-regular fa-download" },
            {text: I18n.t("script_builder.delete"), icon: "fa-regular fa-trash", attributes: { "data-action": "click->form-submit#submitForm", "data-form-id": "delete_script_form" } }
          ] %>
          <%= render ::LooposUi::ActionMenu.new(options: options_script) do |menu| %>
            <% menu.with_trigger do %>
              <% render(::LooposUi::Button.new(kind: :neutral, type: :secondary, size: :small, text: I18n.t("script_builder.script_file"), trailing_icon: "fa-regular fa-chevron-down")) %>
            <% end %>
          <% end %>
          <div class="hidden">
            <%= form_tag upload_url, method: :post, multipart: true, data: { target: "scripts.uploadForm", turbo_frame: "tabs-container" } do %>
              <%= hidden_field_tag :turbo_frame, "tabs-container" %>
              <div class="form-group hidden">
                <%= label_tag :file, I18n.t("script_builder.upload_code") %>
                <%= file_field_tag :file, id: "upload-file-id", class: "form-control", data: { target: "scripts.fileInput", action: "change->scripts#handleFileChange" } %>
              </div>
              <div class="form-group hidden">
                <%= submit_tag I18n.t("script_builder.upload"), class: "btn", disabled: false, data: { target: "scripts.uploadClick" } %>
              </div>
            <% end %>
            <%# Download script file %>
            <%= link_to I18n.t("script_builder.download_script"), download_url, class: "hidden", data: { target: "scripts.downloadLink", turbo: false }  %>
            <%# Delete Script file %>
            <%= form_tag delete_url, id: "delete_script_form", method: :patch, class: "hidden", data: { form_submit_target: "form", turbo_frame: "tabs-container" } do %>
              <%= hidden_field_tag :turbo_stream_partial, :upload_code %>
              <%= hidden_field_tag :turbo_frame, "tabs-container" %>
              <%= hidden_field_tag :custom_code, nil %>
              <%= submit_tag I18n.t("script_builder.remove_code"), class: "btn", disabled: false, data: { target: "scripts.deleteFile" } %>
            <% end %>
          </div>
        <% end %>
      </div>
      <%= turbo_frame_tag turbo_frame_id, class: "w-full" do %>
        <%= render LooposUi::CodeEditor.new(
          type: type,
          code: default_value,
          readonly: readonly,
        )%>
      <% end %>
    </div>
  <% end %>
  <% inline.with_edit do %>
    <%= form_with(**inline.form_attributes(form_url).merge({class: "w-full"})) do |form| %>
      <div class="flex flex-col items-start w-full gap-2">
        <% if title.present? %>
          <div class="flex flex-row gap-2xs">
            <p class="break-all	text-xs font-normal text-gray-darkest"><%= title %></p>
            <%= inline.render_submit_buttons(form: form) %>
          </div>
        <% end %>
        <%= render LooposUi::CodeEditor.new(
          type: type,
          code: default_value,
          readonly: readonly,
        )%>
      </div>
    <% end %>
    <% if submitable %>
      <div data-controller="flow-submitter">
      </div>
    <% end %>
  <% end %>
<% end %>

No notes provided.

Param Description Input

Settings

—

Read only

Show Edit button

/settings/1

custom_code

Make form submittable.

turbo_frame_1

/settings/1

/settings/1/edit

Code Editor

The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.

Arguments

Property Default Description
type `` Language for editor [:ruby, :json]
code `` Value that goes inside the editor
readonly true Enables or disables edition
extra_options `` Extra props to use on Ace Editor component. Oficial docs: https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md