[lexical-playground] Fix bug: Insert an image inside another image's caption (#6109) #6230
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
the
CLA Signed
size-limit report 📦
|
MaxPlav
requested review from
zurfyx,
fantactuka,
acywatson,
Fetz,
ivailop7,
Sahejkm and
potatowagon
as code owners
MaxPlav
force-pushed
the
fix/image-caption-6109
branch
from
cbd6a7f to
1266e34
Compare
MaxPlav
force-pushed
the
fix/image-caption-6109
branch
from
1266e34 to
97e772b
Compare
MaxPlav
force-pushed
the
fix/image-caption-6109
branch
from
97e772b to
49b4c27
Compare
|
update: the image caption nested editor uses PlainTextPlugin so it can paste the content as plain text - similar behavior as for a Sticky Note node. Fixed the issue so that an image/GIF/table etc. can be pasted to an image caption. |
MaxPlav
force-pushed
the
fix/image-caption-6109
branch
from
49b4c27 to
9ae0fd2
Compare
|
update: resolved an issue with non-functional text formatting and alignment in the image caption nested editor. image_caption_formatting_fix.mov |
| setActiveEditor(newEditor); | ||
| $updateToolbar(newEditor); |
There was a problem hiding this comment.
I think you don't need to pass newEditor to $updateToolbar() as you can grab it from activeEditor var from the component scope
There was a problem hiding this comment.
not sure why but the function has a stale activeEditor value sometimes, so passing as an argument
There was a problem hiding this comment.
I think you don't need to pass
newEditorto$updateToolbar()as you can grab it fromactiveEditorvar from the component scope
thanks, updated that
| (newEditor: LexicalEditor) => { | ||
| const selection = $getSelection(); | ||
| if ($isRangeSelection(selection)) { | ||
| if (newEditor !== editor && $isEditorIsNestedEditor(newEditor)) { |
There was a problem hiding this comment.
| if (newEditor !== editor && $isEditorIsNestedEditor(newEditor)) { | |
| if (activeEditor !== editor && $isEditorIsNestedEditor(activeEditor)) { |
packages/lexical/src/LexicalUtils.ts
Outdated
| /** | ||
| * Checks if the editor is a nested editor created by LexicalNestedComposer | ||
| */ | ||
| export function $isEditorIsNestedEditor(editor: LexicalEditor): boolean { |
There was a problem hiding this comment.
Instead of having this function you can simply check if editor._parentEditor is non null :)
Although maybe we still can have helper...
| @@ -74,6 +74,7 @@ import {Dispatch, useCallback, useEffect, useState} from 'react'; | |||
| import * as React from 'react'; | |||
| import {IS_APPLE} from 'shared/environment'; | |||
|
|
|||
| import {$isEditorIsNestedEditor} from '../../../../lexical/src/LexicalUtils'; | |||
There was a problem hiding this comment.
You can't really import non-exported file from lexical package here
But you can move it to @lexical/utils
MaxPlav
force-pushed
the
fix/image-caption-6109
branch
from
9ae0fd2 to
776831e
Compare
Context:
Now users are able to insert an image/GIF/table etc, into another image's caption.
Solution:
This PR limits what the users can insert into the image caption and its nested editor. Excluding some controls from the toolbar if the selection is inside the nested editor that belongs to the image caption.
Closes #6109
Test plan
Before
before-image-caption.mov
After
image-caption.mov