Files
ladill-woo-manager/resources/views/components/woo/rich-text.blade.php
T
isaaccladandCursor 551473f8e5
Deploy Ladill Woo Manager / deploy (push) Successful in 1m16s
Preserve WooCommerce HTML in product descriptions with a rich text editor.
Stop stripping tags on sync so paragraphs and bold book titles round-trip to Woo.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-07 00:47:01 +00:00

38 lines
1.6 KiB
PHP

@props([
'name',
'label',
'value' => '',
'minHeight' => '6rem',
'help' => null,
])
@php
$editorValue = \App\Support\WooHtml::normalizeForEditor(old($name, $value));
@endphp
<div {{ $attributes->merge(['class' => 'mt-4']) }}>
<label class="block text-sm font-medium text-slate-700">{{ $label }}</label>
@if($help)
<p class="mt-0.5 text-xs text-slate-500">{{ $help }}</p>
@endif
<div x-data="wooRichText(@js($editorValue))" class="mt-1">
<div class="flex items-center gap-1 rounded-t-xl border border-b-0 border-slate-200 bg-slate-50 px-2 py-1.5">
<button type="button" @click="format('bold')"
class="rounded-md px-2 py-0.5 text-xs font-bold text-slate-600 hover:bg-white hover:text-slate-900"
title="Bold">B</button>
<button type="button" @click="format('italic')"
class="rounded-md px-2 py-0.5 text-xs italic text-slate-600 hover:bg-white hover:text-slate-900"
title="Italic">I</button>
</div>
<div
x-ref="editor"
contenteditable="true"
@input="sync"
style="min-height: {{ $minHeight }}"
class="w-full rounded-b-xl border border-slate-200 bg-white px-3 py-2 text-sm leading-relaxed text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 [&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:font-semibold [&_em]:italic"
></div>
<input type="hidden" x-ref="input" name="{{ $name }}" :value="html">
</div>
</div>