Skip to content

Commit

Permalink
bug: image caption button - when focused, enter and escape keys do no…
Browse files Browse the repository at this point in the history
…t work
  • Loading branch information
umaranis committed Nov 27, 2024
1 parent 13e0b0a commit ce7c3f5
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<script lang="ts">
import type {LexicalEditor} from 'lexical';
import {calculateZoomLevel} from '@lexical/utils';
import type {Writable} from 'svelte/store';
export let onResizeStart: () => void;
export let onResizeEnd: (
width: 'inherit' | number,
height: 'inherit' | number,
) => void;
export let buttonRef: HTMLButtonElement | null;
export let buttonRef: Writable<HTMLButtonElement | null>;
export let imageRef: HTMLElement | null;
export let maxWidth: number | null;
export let editor: LexicalEditor;
Expand Down Expand Up @@ -241,7 +242,7 @@
{#if !showCaption && captionsEnabled}
<button
class="image-caption-button"
bind:this={buttonRef}
bind:this={$buttonRef}
on:click={() => {
setShowCaption(!showCaption);
}}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
import PlaceHolder from '../PlaceHolder.svelte';
import AutoFocusPlugin from '../AutoFocusPlugin.svelte';
import {getImageHistoryPluginType} from '../../composerContext.js';
import {writable, type Writable} from 'svelte/store';
export let src: string;
export let altText: string;
Expand All @@ -65,7 +66,7 @@
let selection: BaseSelection | null = null;
let imageRef: HTMLImageElement | null;
let buttonRef: HTMLButtonElement | null;
let buttonRef: Writable<HTMLButtonElement | null> = writable(null);
let isSelected = createNodeSelectionStore(editor, nodeKey);
let isResizing = false;
let activeEditorRef: LexicalEditor;
Expand Down Expand Up @@ -104,7 +105,7 @@
const onEnter = (event: KeyboardEvent) => {
const latestSelection = getSelection();
const buttonElem = buttonRef;
const buttonElem = $buttonRef;
if (
$isSelected &&
isNodeSelection(latestSelection) &&
Expand All @@ -126,7 +127,7 @@
};
const onEscape = (event: KeyboardEvent) => {
if (activeEditorRef === caption || buttonRef === event.target) {
if (activeEditorRef === caption || $buttonRef === event.target) {
selection = null;
editor.update(() => {
$isSelected = true;
Expand Down

0 comments on commit ce7c3f5

Please sign in to comment.