1. Go to this page and download the library: Download awcodes/scribble library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
use Awcodes\Scribble\ScribbleEditor;
public function form(Form $form): Form
{
return $form
->schema([
ScribbleEditor::make('content')
])
}
use Awcodes\Scribble\ScribbleEntry;
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
ScribbleEntry::make('content')
]);
}
use Awcodes\Scribble\ScribbleEditor;
use Awcodes\Scribble\Profiles\MinimalProfile;
ScribbleEditor::configureUsing(function (ScribbleEditor $scribble) {
$scribble
->renderToolbar()
->profile(MinimalProfile::class);
});
namespace App\ScribbleProfiles;
use Awcodes\Scribble\ScribbleProfile;use Awcodes\Scribble\Tools;
class Minimal extends ScribbleProfile
{
public static function bubbleTools(): array
{
return [
Tools\Paragraph::class,
Tools\Bold::class,
Tools\Italic::class,
Tools\Link::class,
Tools\BulletList::class,
Tools\OrderedList::class,
];
}
public static function suggestionTools(): array
{
return [];
}
public static function toolbarTools(): array
{
return [
'paragraph',
'bold',
'italic',
'link',
'bullet-list',
'ordered-list',
];
}
}
use App\ScribbleProfiles\Minimal;
Scribble::configureUsing('content')
->profile(Mimimal::class)
use Awcodes\Scribble\ScribbleTool;
class Bold extends ScribbleTool
{
protected function setUp(): void
{
$this
->icon('scribble-bold')
->label('Bold')
->extension('bold')
->active(extension: 'bold')
->commands([
$this->makeCommand(command: 'toggleBold'),
// or
['command' => 'toggleBold', 'arguments' => null],
]);
}
}
use Awcodes\Scribble\ScribbleTool;
use Awcodes\Scribble\Enums\ToolType;
class FaqsList extends ScribbleTool
{
protected function setUp(): void
{
$this
->icon('heroicon-o-question-mark-circle')
->label('FAQs List')
->type(ToolType::StaticBlock)
->editorView('scribble-tools.faqs-list-editor')
->renderedView('scribble-tools.faqs-list');
}
}
use Awcodes\Scribble\ScribbleTool;
use Awcodes\Scribble\Enums\Alignment;
use Awcodes\Scribble\Enums\SlideDirection;
use Awcodes\Scribble\Enums\ToolType;
use Filament\Support\Enums\MaxWidth;
class Notice extends ScribbleTool
{
protected function setUp(): void
{
$this
->icon('heroicon-o-exclamation-triangle')
->label('Notice')
->type(ToolType::Block)
->optionsModal(NoticeForm::class)
->renderedView('scribble-tools.notice');
}
}
use Awcodes\Scribble\Livewire\ScribbleModal;
use Awcodes\Scribble\Profiles\MinimalProfile;
use Awcodes\Scribble\ScribbleEditor;
use Filament\Forms\Components\Radio;
class NoticeForm extends ScribbleModal
{
public ?string $header = 'Notice';
// this should match the identifier in the tool class
public ?string $identifier = 'notice';
public function mount(): void
{
$this->form->fill([
'color' => $this->data['color'] ?? 'info',
'body' => $this->data['body'] ?? null,
]);
}
public function getFormFields(): array
{
return [
Radio::make('color')
->inline()
->inlineLabel(false)
->options([
'info' => 'Info',
'success' => 'Success',
'warning' => 'Warning',
'danger' => 'Danger',
]),
ScribbleEditor::make('body')
->profile(MinimalProfile::class)
->columnSpanFull(),
];
}
}
use Awcodes\Scribble\ScribbleTool;
use Awcodes\Scribble\Enums\ToolType;
use App\Path\To\MediaForm;
class Media extends ScribbleTool
{
protected function setUp(): void
{
$this
->icon('heroicon-o-photograph')
->label('Media')
->type(ToolType::Modal)
->commands([
$this->makeCommand(command: 'setMedia'),
])
->optionsModal(MediaForm::class);
}
}
use Awcodes\Scribble\Livewire\ScribbleModal;
use Awcodes\Scribble\Profiles\MinimalProfile;
use Awcodes\Scribble\ScribbleEditor;
use Filament\Forms\Components\Radio;
class MediaForm extends ScribbleModal
{
public ?string $header = 'Media';
// this should match the identifier in the tool class
public ?string $identifier = 'media';
public function mount(): void
{
$this->form->fill([
//
]);
}
public function getFormFields(): array
{
return [
//
];
}
}
use Awcodes\Scribble\Enums\ToolType;
use Awcodes\Scribble\ScribbleTool;
class OpenRandomModal extends ScribbleTool
{
protected function setUp(): void
{
$this
->icon('scribble-open')
->label('Open Random Modal')
->type(ToolType::Event)
->commands([
$this->makeCommand(command: 'setDataFromEvent'),
])
->event(
name: 'open-modal',
data: [
'id' => 'random-modal',
'title' => 'Random Modal',
],
);
}
}
use Filament\View\PanelsRenderHook;
public function panel(Panel $panel): Panel
{
return $panel
->renderHook(
name: PanelsRenderHook::STYLES_AFTER,
hook: fn (): string => Blade::render('@vite("resources/js/scribble/extensions.js")')
);
}
use Awcodes\Scribble\ScribbleTool;
use Tiptap\Marks\Highlight as TiptapHighlight;
class Highlight extends ScribbleTool
{
protected function setUp(): void
{
$this
->icon('icon-highlight')
->label('Highlight')
->commands([
$this->makeCommand(command: 'toggleHighlight'),
])
->converterExtensions(new TiptapHighlight());
}
}
use Awcodes\Scribble\ScribbleManager;
use App\ScribbleTools\Highlight;
use Tiptap\Marks\Highlight as TiptapHighlight;
public function register(): void
{
app(ScribbleManager::class)
->registerTools([
Highlight::make(),
]);
}
use Awcodes\Scribble\Utils\Converter;
Converter::from($content)->toHtml();
Converter::from($content)->toJson();
Converter::from($content)->toText();
Converter::from($content)->toMarkdown();
Converter::from($content)->toTOC(); // Table of Contents
use Awcodes\Scribble\Utils\Converter;
// HTML output with headings linked and wrapped in anchor tags
Converter::from($content)
->toHtml(
toc: true,
maxDepth: 3,
wrapHeadings: true
);
// Structured list of heading links
Converter::from($content)->toTOC();