Fix pressing insert button when in markdown insert mode (#126)

This commit is contained in:
Jonatan Kłosko 2021-03-30 22:16:42 +02:00 committed by GitHub
parent 5c5b4ece26
commit 4e90666350
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 2 deletions

View file

@ -186,7 +186,11 @@ function handleDocumentKeyDown(hook, event) {
*/ */
function handleDocumentMouseDown(hook, event) { function handleDocumentMouseDown(hook, event) {
// If click targets cell actions, keep the focus as is // If click targets cell actions, keep the focus as is
if (event.target.closest(`[data-element="actions"]`)) { if (
event.target.closest(
`[data-element="actions"], [data-element="insert-buttons"]`
)
) {
// If the pencil icon is clicked, enter insert mode // If the pencil icon is clicked, enter insert mode
if (event.target.closest(`[data-element="enable-insert-mode-button"]`)) { if (event.target.closest(`[data-element="enable-insert-mode-button"]`)) {
setInsertMode(hook, true); setInsertMode(hook, true);
@ -460,6 +464,10 @@ function handleCellMoved(hook, cellId) {
} }
function handleSectionInserted(hook, sectionId) { function handleSectionInserted(hook, sectionId) {
if (hook.state.focusedSectionId) {
setFocusedCell(hook, null);
}
const section = getSectionById(sectionId); const section = getSectionById(sectionId);
const nameElement = section.querySelector(`[data-element="section-name"]`); const nameElement = section.querySelector(`[data-element="section-name"]`);
nameElement.focus({ preventScroll: true }); nameElement.focus({ preventScroll: true });

View file

@ -3,7 +3,7 @@ defmodule LivebookWeb.InsertButtonsComponent do
def render(assigns) do def render(assigns) do
~L""" ~L"""
<div class="relative top-0.5 m-0 flex justify-center"> <div class="relative top-0.5 m-0 flex justify-center" data-element="insert-buttons">
<div class="absolute z-10 <%= if(@persistent, do: "opacity-100", else: "opacity-0") %> hover:opacity-100 focus-within:opacity-100 flex space-x-2 justify-center items-center"> <div class="absolute z-10 <%= if(@persistent, do: "opacity-100", else: "opacity-0") %> hover:opacity-100 focus-within:opacity-100 flex space-x-2 justify-center items-center">
<button class="button button-small" <button class="button button-small"
phx-click="insert_cell" phx-click="insert_cell"