Text

The TextComponent is a flexible way to handle text inputs directly on your website. It integrates seamlessly with Blade and PHP to provide a user-friendly interface for admin editing. The TextComponent comes with a set of methods to customize its behavior. Feel free to explore the code and append your own methods and decorations.

To display a text component in your Blade view, use the following syntax:

<h3>{{ $column->text('title') }}</h3>

The TextComponent provides several methods to customize its behavior.

default(string $default)

Sets a default value for the text input.

$column->text('title')->default('Welcome to my site');

label(string $label)

Defines a label for the text input field.

$column->text('title')->label('Title');

bar(array $tools)

The user can style the text using the specified tools. You can create your own tools, but by default, the toolbar includes the following tools:

• b Bold
• i Italic
• u Underline

$column->text('title')->bar(['b', 'i', 'u']);

Feel free to add more tools:

1. Copy and modify /admin/components/content/tools/italic.mjs to /admin/components/content/tools/red-circle.mjs.
2. Append RedCircle to \Src\Components\TextComponent::bar().
3. Import the new tool in admin/components/text/input.blade.php:

   import RedCircle from /admin/components/content/tools/red-circle.mjs  
   

4. Append RedCircle to EditorJS({tools:{}}) in the admin/components/text/input.blade.php file. For example:

   tools: {  
     b: Bold,  
     u: Underline,  
     i: Italic,  
     r: RedCircle,  
   }  
   

Feel free to use the tools provided by the Editor.js community.

min(int $min)

Specifies the minimum number of characters allowed.

$column->text('title')->min(5);

max(int $max)

Specifies the maximum number of characters allowed.

$column->text('title')->max(50);

placeholder(string $placeholder)

Sets a placeholder for the input field.

$column->text('title')->placeholder('Enter a catchy title');

help(string $help)

Adds a helper text below the input field for additional guidance.

$column->text('title')->help('The title will appear on the main banner.');

<label>{{ $column->text('subtitle')->label('Subtitle')->help('Keep it short and sweet.') }}</label>
<h2>{{ $column->text('tagline')->default('Your tagline here')->min(10)->max(100) }}</h2>