insert Image via url #24
Conversation
for that you can change position of image by dragging and dropping to the upper nodes but it has internal bug of duplication |
| export const InsertImageButton: (props: InsertImageButtonProps) => JSX.Element = ({ icon, iconColor = '#ffffff' }) => { | ||
| const editor = useSlate(); | ||
| return ( | ||
| <Button | ||
| onMouseDown={(event) => { | ||
| event.preventDefault(); | ||
| const url = window.prompt('Enter the URL of the image:'); | ||
| if (!url) return; | ||
| insertImage(editor, url); | ||
| }} | ||
| > | ||
| <Icon reversed active={false} svg={icon} color={iconColor}> | ||
| image | ||
| </Icon> | ||
| </Button> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
insert Image via url logic and button
There was a problem hiding this comment.
for that you can change position of image by dragging and dropping to the upper nodes but it has internal bug of duplication
@Hamzaalam we have to resolve this issue, there should be some way to add some text to the bottom of the image, especially if the last node is an image node. Also, moving the image doesn't remove it.
The best way would be to add an empty node on either enter key or down key press.
There was a problem hiding this comment.
@Fahad-Mahmood inserting the empty block at the bottom of image is working on Enter , just need to trace the cursor and only triggers this at the end of the line.
| if (type === 'image' && block.properties) { | ||
| return { id: block._id, type, children, url: block.properties.document[0].properties }; | ||
| } | ||
|
|
There was a problem hiding this comment.
deserialization (DB to slate)
| case `image`: | ||
| return ( | ||
| <div {...attributes}> | ||
| <div contentEditable={false}> | ||
| <Image src={element.url} /> | ||
| </div> | ||
| {children} | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Image element to render the image inside of slate editor
| export const Image = styled.img` | ||
| display: block; | ||
| max-width: 100%; | ||
| max-height: 20em; | ||
| padding: 4px 0px 0px 20px; | ||
| `; |
There was a problem hiding this comment.
image Styled component
| const withImages = (editor: ReactEditor) => { | ||
| const { isVoid } = editor; | ||
| const localEditor = editor; | ||
| localEditor.isVoid = (element) => { | ||
| return element.type === 'image' ? true : isVoid(element); | ||
| }; | ||
| return localEditor; | ||
| }; | ||
| export default withImages; |
There was a problem hiding this comment.
Image plugin to support he drag and drop of existing image
| let properties = []; | ||
| if (textType === 'image') { | ||
| properties.push(paragraphNode.url); | ||
| } else { | ||
| properties = getParagraphProperties(childNodes); | ||
| } |
There was a problem hiding this comment.
serialization logic (slate to DB structure)
Data structure to save into DB:
Slate internal data structure: