[lexical][lexical-clipboard][lexical-playground] Feature: ImageNode caption support for exportDOM and importDOM#7900
Conversation
|
Hi @Kepron! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
|
I discovered that every time an image with a caption is imported, an extra |
…Nodes in a readonly editor with a selection
| if (selection !== null && $isTextNode(target)) { | ||
| target = $sliceSelectedTextNodeContent( | ||
| selection, | ||
| $cloneWithProperties(target), | ||
| ); |
There was a problem hiding this comment.
This is just a performance improvement, it was doing some unnecessary work by cloning every node when there is a selection instead of just nodes it intends to modify
| <div className="image-caption-container"> | ||
| <LexicalNestedComposer initialEditor={caption}> | ||
| <AutoFocusPlugin /> | ||
| <DisableCaptionOnBlur setShowCaption={setShowCaption} /> |
There was a problem hiding this comment.
This is a UI improvement, if you remove the caption content and the caption editor loses focus then it will revert to the same state as it had before clicking the add caption button
| {showCaption && ( | ||
| <div className="image-caption-container"> | ||
| <LexicalNestedComposer initialEditor={caption}> | ||
| <AutoFocusPlugin /> |
There was a problem hiding this comment.
It didn't make sense to autofocus in all cases (e.g. when an image with caption was pasted), so I removed this plugin
| if (show) { | ||
| node.__caption.update(() => { | ||
| if (!$getSelection()) { | ||
| $getRoot().selectEnd(); | ||
| } | ||
| }); | ||
| } |
There was a problem hiding this comment.
This is the equivalent to the AutofocusPlugin so when you click the add caption button it focuses the caption editor
| function $convertImageElement(domNode: Node): null | DOMConversionOutput { | ||
| const img = domNode as HTMLImageElement; | ||
| if (img.src.startsWith('file:///') || isGoogleDocCheckboxImg(img)) { | ||
| const src = img.getAttribute('src'); |
There was a problem hiding this comment.
using getAttribute prevents it from adding the origin when the original src was a relative path
| return { | ||
| img: (node: Node) => ({ | ||
| figcaption: () => ({ | ||
| conversion: () => ({node: null}), |
There was a problem hiding this comment.
figcaption is imported directly from the figure importer, we ignore it here to save some work
|
|
||
| if (__DEV__) { | ||
| if (this.__type !== 'root') { | ||
| errorOnReadOnly(); |
There was a problem hiding this comment.
This is a bug fix where $cloneWithProperties would throw when it shouldn't. The invariant this is checking is already checked appropriately above in $setNodeKey
| figure: () => ({ | ||
| conversion: (node) => { | ||
| return { | ||
| after: (childNodes) => { |
There was a problem hiding this comment.
We expect to parse an img node from the children, and if so then we find the associated caption and generate the caption editor's content from its DOM
Description
These changes will allow ImageNode's
exportDOMandimportDOMto use the caption feature. Thanks to @etrepum on the Discord channel for guiding me on this.Also includes a bug fix to the LexicalNode constructor so
$cloneWithPropertiescan be used in read-only editors, and a small performance improvement to lexical/clipboard functions that use it to slice TextNode based on the current selection.Closes #5025
Test plan
Before
After