Allow focus on all parts of editor

This commit is contained in:
Sinclair Chen 2022-08-09 15:35:04 -07:00
parent 5715b0e44a
commit ad02c5813b

View File

@ -64,7 +64,7 @@ export function useTextEditor(props: {
Placeholder.configure({ Placeholder.configure({
placeholder, placeholder,
emptyEditorClass: emptyEditorClass:
'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0', 'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0 cursor-text',
}), }),
CharacterCount.configure({ limit: max }), CharacterCount.configure({ limit: max }),
Image, Image,
@ -168,7 +168,14 @@ export function TextEditor(props: {
<span className="sr-only">Embed an iframe</span> <span className="sr-only">Embed an iframe</span>
</button> </button>
</div> </div>
<div className="ml-auto" /> {/* Spacer that also focuses editor on click */}
<div
className="grow cursor-text self-stretch"
onMouseDown={() =>
editor?.chain().focus('end').createParagraphNear().run()
}
aria-hidden
/>
{children} {children}
</div> </div>
</div> </div>