|
|
|
@@ -55,37 +55,37 @@
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-950 shadow-sm">
|
|
|
|
|
<div class="flex flex-wrap items-center gap-1.5 border-b border-zinc-700 bg-zinc-900/80 px-4 py-2 text-sm text-zinc-300">
|
|
|
|
|
<div class="flex flex-wrap items-center gap-1.5 border-b border-zinc-700 bg-zinc-900/80 px-4 py-2 text-sm text-zinc-300" data-helpdesk-editor-toolbar>
|
|
|
|
|
<span class="mr-2 rounded-lg bg-zinc-800 px-2 py-1 text-xs font-black uppercase tracking-wide text-zinc-100">Spellcheck enabled</span>
|
|
|
|
|
|
|
|
|
|
<button type="button" x-on:click="runCommand('bold')"
|
|
|
|
|
<button type="button" x-on:click="runCommand('bold')" data-helpdesk-editor-command="bold"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70"
|
|
|
|
|
aria-label="Bold selected text">
|
|
|
|
|
B
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" x-on:click="runCommand('italic')"
|
|
|
|
|
<button type="button" x-on:click="runCommand('italic')" data-helpdesk-editor-command="italic"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black italic text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70"
|
|
|
|
|
aria-label="Italic selected text">
|
|
|
|
|
I
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" x-on:click="runCommand('underline')"
|
|
|
|
|
<button type="button" x-on:click="runCommand('underline')" data-helpdesk-editor-command="underline"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black underline text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70"
|
|
|
|
|
aria-label="Underline selected text">
|
|
|
|
|
U
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" x-on:click="runCommand('insertUnorderedList')"
|
|
|
|
|
<button type="button" x-on:click="runCommand('insertUnorderedList')" data-helpdesk-editor-command="insertUnorderedList"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70">
|
|
|
|
|
• List
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" x-on:click="runCommand('insertOrderedList')"
|
|
|
|
|
<button type="button" x-on:click="runCommand('insertOrderedList')" data-helpdesk-editor-command="insertOrderedList"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70">
|
|
|
|
|
1. List
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" x-on:click="wrapBlock('blockquote')"
|
|
|
|
|
<button type="button" x-on:click="wrapBlock('blockquote')" data-helpdesk-editor-command="blockquote"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70">
|
|
|
|
|
Quote
|
|
|
|
|
</button>
|
|
|
|
|
<button type="button" x-on:click="wrapBlock('pre')"
|
|
|
|
|
<button type="button" x-on:click="wrapBlock('pre')" data-helpdesk-editor-command="pre"
|
|
|
|
|
class="inline-flex min-h-8 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-1.5 text-xs font-black text-zinc-100 shadow-sm transition hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-400/70">
|
|
|
|
|
Code
|
|
|
|
|
</button>
|
|
|
|
@@ -104,6 +104,7 @@
|
|
|
|
|
role="textbox"
|
|
|
|
|
aria-multiline="true"
|
|
|
|
|
data-placeholder="{{ $placeholder }}"
|
|
|
|
|
data-wire-model="{{ $model }}"
|
|
|
|
|
@if ($editorDusk) data-dusk="{{ $editorDusk }}" dusk="{{ $editorDusk }}" @endif
|
|
|
|
|
x-on:blur="syncToLivewire(false)"
|
|
|
|
|
class="helpdesk-rich-editor block min-h-[14rem] w-full overflow-y-auto whitespace-pre-wrap break-words border-0 bg-zinc-950 px-5 py-4 text-base leading-7 text-zinc-100 outline-none transition placeholder:text-zinc-500 empty:before:pointer-events-none empty:before:text-zinc-500 empty:before:content-[attr(data-placeholder)] focus:ring-2 focus:ring-blue-500"
|
|
|
|
|