PHP code example of vipertecpro / wysiwyg-editor

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

vipertecpro / wysiwyg-editor example snippets

// config/view.php
'compiled' => env('VIEW_COMPILED_PATH', storage_path('framework/views')),

use Native\Mobile\Attributes\On;
use Native\Mobile\Edge\NativeComponent;
use Vipertecpro\WysiwygEditor\Events\ContentSaved;
use Vipertecpro\WysiwygEditor\Events\EditCancelled;
use Vipertecpro\WysiwygEditor\Facades\WysiwygEditor;

class EditNote extends NativeComponent
{
    public string $body = '';

    public function edit(): void
    {
        WysiwygEditor::open($this->body, [
            'title' => 'Edit note',
            'placeholder' => 'Write something…',
        ]);
    }

    #[On(ContentSaved::class)]
    public function onSaved(string $html, string $text): void
    {
        $this->body = $html;         // clean, normalised HTML
    }

    #[On(EditCancelled::class)]
    public function onCancelled(): void
    {
        // user backed out — content unchanged
    }
}

WysiwygEditor::open($html);                                     // full — everything
WysiwygEditor::open($html, ['preset' => 'basic']);              // bold italic underline strike lists link
WysiwygEditor::open($html, ['preset' => 'comment', 'maxLength' => 500]); // bold italic link
WysiwygEditor::open($html, ['preset' => 'note']);               // bold italic underline h1 h2 lists checklist
WysiwygEditor::open($html, ['toolbar' => ['bold', 'link']]);    // exactly these, in this order

WysiwygEditor::open($html, [
    'theme' => [
        'background' => '#121417',
        'text' => '#FFFFFF',
        'accent' => '#F97316',   // Save button
        'highlight' => '#22C55E', // toggled toolbar buttons / active states
    ],
]);

#[On(ContentSaved::class)]
public function onSaved(string $html, string $text, string $json): void
{
    $post = Http::withToken($token)
        ->post('https://api.example.com/posts', [
            'html' => $html,   // to render
            'text' => $text,   // to search
            'json' => $json,   // to re-open for editing
        ])->json();

    foreach (WysiwygEditor::attachments($json) as $file) {
        if ($file['path'] === '') {
            continue;          // already on your server; $file['url'] says where
        }

        Http::withToken($token)
            ->attach('file', file_get_contents($file['path']), basename($file['path']))
            ->post("https://api.example.com/posts/{$post['id']}/media", [
                'kind' => $file['kind'],       // image | video | file
                'alt' => $file['alt'],
                'caption' => $file['caption'],
                'uploadId' => $file['uploadId'],
            ]);
    }
}

WysiwygEditor::open($html, [
    'validation' => [
        'minWords' => 50,
        'maxWords' => 2000,
        '

WysiwygEditor::open($html, [
    'strings' => [
        'save' => __('editor.save'),
        'cancel' => __('editor.cancel'),
        'discardTitle' => __('editor.discard_title'),
        'ruleMinWords' => __('editor.min_words'),   // "Se necesitan {max}…"
    ],
]);

WysiwygEditor::open($note->body, ['changeDebounce' => 1500]);

#[On(ContentChanged::class)]
public function onChanged(string $html, string $json): void
{
    $this->note->update(['body_html' => $html, 'body_json' => $json]);
}

#[On(MediaRequested::class)]
public function onMediaRequested(string $kind): void
{
    Camera::pickImages('images', false);      // or your own picker
}

#[On(MediaSelected::class)]
public function onMediaSelected(bool $success, array $files, int $count): void
{
    ImageCropper::open($files[0]['path'], ['preset' => 'landscape']);
}

#[On(ImageCropped::class)]
public function onImageCropped(string $path): void
{
    WysiwygEditor::insertMedia('image', [
        'localPath' => $path,
        'uploadId' => $id = uniqid('up-'),
    ]);

    // Upload with your own stack (or nativephp/mobile-background-tasks),
    // then tell the editor how it went:
    WysiwygEditor::uploadProgress($id, 0.5);
    WysiwygEditor::uploadCompleted($id, $cdnUrl);
    WysiwygEditor::uploadFailed($id, 'Network unavailable');
}

WysiwygEditor::preview('image', $post->photo);   // or 'video'

WysiwygEditor::open($html, [
    'toolbar' => ['image', 'camera', 'video', 'poll'],
    'customTools' => [
        ['id' => 'gif', 'icon' => 'embed', 'label' => 'GIF'],
        ['id' => 'schedule', 'icon' => 'orderedList', 'label' => 'Schedule'],
    ],
    'avatar' => $user->avatarUrl,
]);

#[On(ToolTapped::class)]
public function onToolTapped(string $tool): void
{
    // Your picker, your sheet, your data.
}

WysiwygEditor::open($html, [
    'accessories' => [
        ['id' => 'tag',      'label' => 'Tag people',         'icon' => 'image'],
        ['id' => 'audience', 'label' => 'Everyone can reply', 'value' => 'Everyone'],
    ],
]);

#[On(AccessoryTapped::class)]
public function onAccessoryTapped(string $accessory): void
{
    // Your picker, your data. The editor stays open throughout.
    WysiwygEditor::setAccessory('audience', 'Everyone can reply', 'People you follow');
}

use Vipertecpro\WysiwygEditor\Events\SuggestionRequested;

WysiwygEditor::open($html, [
    'triggers' => ['@' => 'mention', '#' => 'hashtag'],   // the default
]);

#[On(SuggestionRequested::class)]
public function onSuggestionRequested(string $kind, string $trigger, string $query = ''): void
{
    // Fires on every keystroke, so debounce or cap it before hitting an API.
    $matches = User::query()
        ->whereLike('name', "%{$query}%")
        ->limit(5)
        ->get()
        ->map(fn (User $u) => [
            'id' => (string) $u->id,      // 

WysiwygEditor::open($html, [
    'triggers' => ['/' => 'command', '@' => 'mention'],
]);

#[On(SuggestionRequested::class)]
public function onSuggestionRequested(string $kind, string $query = ''): void
{
    if ($kind !== 'command') {
        return $this->offerPeople($query);
    }

    $commands = [
        ['id' => 'h1', 'label' => 'Heading 1', 'icon' => 'h1', 'tool' => 'h1'],
        ['id' => 'todo', 'label' => 'To-do list', 'icon' => 'checklist', 'tool' => 'checklist'],
        ['id' => 'divider', 'label' => 'Divider', 'icon' => 'divider', 'tool' => 'divider'],
        ['id' => 'photo', 'label' => 'Image', 'icon' => 'image', 'tool' => 'image'],
        // Not an editor tool — reported to you as ToolTapped instead.
        ['id' => 'date', 'label' => "Today's date", 'icon' => 'calendar', 'tool' => 'date'],
    ];

    WysiwygEditor::suggestions($query, array_values(array_filter(
        $commands,
        fn (array $c) => $query === '' || str_contains($c['label'], $query),
    )));
}

#[On(ToolTapped::class)]
public function onToolTapped(string $tool): void
{
    if ($tool === 'date') {
        WysiwygEditor::insertText(now()->format('j F Y'));
    }
}

WysiwygEditor::open($html, [
    'backgrounds' => [
        'ocean' => ['from' => '#2563EB', 'to' => '#0EA5E9'],
        'sunset' => ['from' => '#F97316', 'to' => '#DB2777'],
        'blush' => ['from' => '#FBCFE8', 'to' => '#FDE68A', 'textColor' => '#1F2937'],
    ],
    'backgroundMaxLength' => 130,
]);

use Vipertecpro\WysiwygEditor\Events\SheetOptionPicked;

WysiwygEditor::open($html, [
    'accessories' => [
        ['id' => 'audience', 'label' => 'Anyone', 'placement' => 'header', 'sheet' => 'audience'],
    ],
    'customTools' => [
        ['id' => 'more', 'icon' => 'plus', 'label' => 'More', 'sheet' => 'compose'],
    ],
    'sheets' => [
        'audience' => [
            'title' => 'Who can see your post?',
            'options' => [
                ['id' => 'public', 'label' => 'Public', 'detail' => 'Anyone', 'icon' => 'globe', 'selected' => true],
                ['id' => 'friends', 'label' => 'Friends', 'icon' => 'people'],
            ],
        ],
        'compose' => [
            'style' => 'grid',    // circular tiles, three across
            'options' => [
                ['id' => 'media', 'label' => 'Media', 'icon' => 'image'],
                ['id' => 'poll', 'label' => 'Poll', 'icon' => 'poll'],
            ],
        ],
    ],
]);

#[On(SheetOptionPicked::class)]
public function onPicked(string $sheet, string $option): void
{
    match ([$sheet, $option]) {
        ['compose', 'media'] => $this->pickAPhoto(),          // your picker
        ['compose', 'poll'] => WysiwygEditor::insertTool('poll'),
        default => $this->remember($sheet, $option),
    };

    // Write the answer back so the control that opened it shows the choice.
    WysiwygEditor::setAccessory('audience', 'Friends', 'Friends');
}

WysiwygEditor::insertTool('poll');      // or divider, image, camera, video, file

WysiwygEditor::open($html, ['toolbar' => ['bold', 'table', 'image']]);

#[On(ContentSaved::class)]
public function onSaved(string $html, string $text, string $json): void
{
    $markdown = WysiwygEditor::toMarkdown($json);
}

WysiwygEditor::open($html, [
    'typography' => ['fontSize' => 18, 'lineHeight' => 1.3],
    'spacing' => 'roomy',
]);

WysiwygEditor::open($html, ['menu' => 'sheet']);

use Native\Mobile\Testing\Native;

it('opens the editor when a new page is started', function () {
    $bridge = Native::fakeBridge();

    Native::test(Pages::class)->call('newPage');

    $bridge->assertEditorOpened();
});

it('answers a slash command with the matching rows', function () {
    $bridge = Native::fakeBridge();

    Native::test(Pages::class)->call('onSuggestionRequested', 'command', 'to-do');

    $bridge->assertSuggestionsOffered(['To-do list']);
});