Druid Rich Input Component

Description

The Rich Input component provides an enhanced text input field with advanced features like text selection, cursor positioning, and placeholder text. It extends the basic Input component to offer a more sophisticated text entry experience.

Features

Text input with cursor support
Text selection capabilities
Customizable placeholder text
Maximum length restriction
Input validation and filtering
Events for text changes and interactions
Support for multiline input
Customizable visual feedback

Basic Usage

-- Create a basic rich input
local rich_input = self.druid:new_rich_input("input_node", "input_text_node")

-- Set initial text
rich_input:set_text("Initial text")

-- Set placeholder text
rich_input:set_placeholder("Enter text here...")

Parameters

node: The node or node_id of the input background
text_node: The node or node_id of the text component
keyboard_type: (optional) The type of keyboard to show on mobile devices

Methods

-- Set input text
rich_input:set_text("New text")

-- Get current text
local text = rich_input:get_text()

-- Clear input
rich_input:clear()

-- Set maximum text length
rich_input:set_max_length(50)

-- Set input validation pattern
rich_input:set_allowed_characters("[%w%s]") -- Only alphanumeric and spaces

-- Set placeholder text
rich_input:set_placeholder("Enter text here...")

-- Set placeholder color
rich_input:set_placeholder_color(vmath.vector4(0.5, 0.5, 0.5, 1))

-- Enable/disable multiline input
rich_input:set_multiline(true)
rich_input:set_multiline(false)

-- Enable/disable the input
rich_input:set_enabled(true)
rich_input:set_enabled(false)

-- Check if input is enabled
local is_enabled = rich_input:is_enabled()

-- Set input focus
rich_input:set_focus()

-- Remove input focus
rich_input:remove_focus()

-- Check if input has focus
local has_focus = rich_input:is_focused()

-- Select all text
rich_input:select_all()

-- Set cursor position
rich_input:set_cursor_position(5)

-- Set selection range
rich_input:set_selection(2, 5) -- Select characters from index 2 to 5

-- Get current selection
local selection_start, selection_end = rich_input:get_selection()

Events

-- Subscribe to text change event
rich_input.on_input_text:subscribe(function(self, text)
    print("Text changed to: " .. text)
end)

-- Subscribe to focus events
rich_input.on_focus:subscribe(function(self)
    print("Input gained focus")
end)

rich_input.on_focus_lost:subscribe(function(self)
    print("Input lost focus")
end)

-- Subscribe to input submit event (Enter key)
rich_input.on_submit:subscribe(function(self)
    print("Input submitted with text: " .. self:get_text())
end)

-- Subscribe to input canceled event (Escape key)
rich_input.on_cancel:subscribe(function(self)
    print("Input canceled")
end)

-- Subscribe to selection change event
rich_input.on_selection_change:subscribe(function(self, start, end_pos)
    print("Selection changed: " .. start .. " to " .. end_pos)
end)

-- Subscribe to cursor position change event
rich_input.on_cursor_change:subscribe(function(self, position)
    print("Cursor position: " .. position)
end)

Examples

-- Create a username input with validation
local username_input = self.druid:new_rich_input("username_bg", "username_text")
username_input:set_placeholder("Username")
username_input:set_allowed_characters("[%w_]") -- Only alphanumeric and underscore
username_input:set_max_length(20)

-- Create a password input
local password_input = self.druid:new_rich_input("password_bg", "password_text")
password_input:set_placeholder("Password")
password_input:set_password(true)
password_input:set_password_char("•")

-- Create a multiline text area
local text_area = self.druid:new_rich_input("textarea_bg", "textarea_text")
text_area:set_multiline(true)
text_area:set_placeholder("Enter your message here...")

-- Create a search input with clear button
local search_input = self.druid:new_rich_input("search_bg", "search_text")
search_input:set_placeholder("Search...")

local clear_button = self.druid:new_button("clear_button", function()
    search_input:clear()
    search_input:set_focus()
end)

-- Create an input with selection handling
local editor_input = self.druid:new_rich_input("editor_bg", "editor_text")
editor_input.on_selection_change:subscribe(function(self, start, end_pos)
    if start ~= end_pos then
        -- Text is selected
        show_formatting_toolbar()
    else
        -- No selection
        hide_formatting_toolbar()
    end
end)

-- Format selected text
function format_bold()
    local start, end_pos = editor_input:get_selection()
    if start ~= end_pos then
        local text = editor_input:get_text()
        local selected_text = text:sub(start, end_pos)
        local new_text = text:sub(1, start-1) .. "**" .. selected_text .. "**" .. text:sub(end_pos+1)
        editor_input:set_text(new_text)
        editor_input:set_selection(start, end_pos + 4) -- Adjust selection to include formatting
    end
end

Notes

The Rich Input component extends the basic Input component with enhanced selection and cursor capabilities
The placeholder text is shown when the input is empty and doesn't have focus
Text selection can be done via mouse/touch drag or programmatically
The component handles cursor positioning and blinking
Input validation can be used to restrict what characters users can enter
For multiline input, the component supports line breaks and scrolling
The component provides events for all major input interactions, allowing you to create responsive forms
Selection and cursor position are reported in character indices, not pixel positions
The component handles clipboard operations (copy, cut, paste) on supported platforms
For best user experience, consider providing visual feedback for selection and cursor position

5.8 KiB Raw Blame History