From c93a73d95c0ffdfc72ee0235cef6fccb589cade1 Mon Sep 17 00:00:00 2001 From: Abderahman88 Date: Wed, 21 Oct 2020 18:37:58 +0100 Subject: [PATCH] add embedded image --- src/controls/richText/RichText.tsx | 113 +++++++++++++++++++++++- src/controls/richText/RichText.types.ts | 17 ++++ src/loc/en-us.ts | 2 + src/loc/mystrings.d.ts | 2 + src/loc/nl-nl.ts | 2 + 5 files changed, 135 insertions(+), 1 deletion(-) diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx index 9b14cd6e0..c6ca0b108 100644 --- a/src/controls/richText/RichText.tsx +++ b/src/controls/richText/RichText.tsx @@ -100,6 +100,7 @@ export class RichText extends React.Component { showAlign: true, showList: true, showLink: true, + showImage: true, showMore: true } }; @@ -115,9 +116,11 @@ export class RichText extends React.Component { editing: false, morePaneVisible: false, hideDialog: true, + hideImageDialog: true, formats: {}, insertUrl: undefined, insertUrlText: undefined, + insertImageUrl: undefined, selectedText: undefined, selectedUrl: undefined, wrapperTop: 0 @@ -392,6 +395,40 @@ export class RichText extends React.Component { ); } + /** + * Renders the "Insert Image" dialog + */ + private renderImageDialog = (): JSX.Element => { + return ( + + ); + } + /** * Renders the Rich Text Editor */ @@ -409,7 +446,7 @@ export class RichText extends React.Component { } // Okay, we're in edit mode. - const { placeholder, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore } } = this.props; + const { placeholder, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore, showImage} } = this.props; // Get a unique id for the toolbar const modules = { @@ -551,6 +588,20 @@ id="DropDownStyles" }} /> ) + } + { + showImage && ( + + + + ) } { showMore && ( @@ -583,6 +634,10 @@ id="DropDownStyles" { this.renderLinkDialog() } + { + this.renderImageDialog() + } + ); } @@ -659,6 +714,29 @@ id="DropDownStyles" this.setState({ hideDialog: true }); } + /** + * Displays the insert link dialog + */ + private showInsertImageDialog = () => { + const quill = this.getEditor(); + const range = quill.getSelection(); + + this.setState({ + hideImageDialog: false, + selectedRange: range + }); + } + + /** + * Hides the insert image dialog + */ + private closeImageDialog = () => { + this.setState({ + hideImageDialog: true, + insertImageUrl: undefined, + }); + } + /** * When user enters the richtext editor, displays the border */ @@ -703,6 +781,28 @@ id="DropDownStyles" }); } + /** + * Called when user insert an image + */ + private handleInsertImage = () => { + const { insertImageUrl, selectedRange } = this.state; + try { + const quill = this.getEditor(); + const cursorPosition: number = selectedRange!.index; + quill.insertEmbed(cursorPosition, 'image', insertImageUrl, "user"); + this.setState({ + insertImageUrl: undefined, + hideImageDialog: true, + }); + } catch { + //Close the image dialog if something went wrong + this.setState({ + insertImageUrl: undefined, + hideImageDialog: true, + }); + } + } + /** * Disable Save-button if hyperlink is undefined or empty * This prevents the user of adding an empty hyperlink @@ -714,6 +814,17 @@ id="DropDownStyles" return true; } + /** + * Disable Save-button if hyperlink for the imported image is undefined or empty + * This prevents the user of adding an empty image + */ + private checkImageLinkUrl = () => { + if (this.state.insertImageUrl !== undefined && this.state.insertImageUrl != "") { + return false; + } + return true; + } + /** * Applies a format to the selection * @param name format name diff --git a/src/controls/richText/RichText.types.ts b/src/controls/richText/RichText.types.ts index 9eb254c0e..49c208b23 100644 --- a/src/controls/richText/RichText.types.ts +++ b/src/controls/richText/RichText.types.ts @@ -80,6 +80,12 @@ export interface StyleOptions { */ showMore?: boolean; + /** + * Indicates if we should show the Image button. + * @defaultvalue true + */ + showImage?: boolean; + /** * Indicates if we should show the Styles button (Heading 1, Heading 2, ..., Pull quote) * @defaultvalue true @@ -109,6 +115,12 @@ export interface IRichTextState { */ hideDialog: boolean; + + /** + * Whether to hide the insert image dialog + */ + hideImageDialog: boolean; + /** * The URL to insert */ @@ -119,6 +131,11 @@ export interface IRichTextState { */ insertUrlText: string; + /** + * The URL of image to insert + */ + insertImageUrl: string; + /** * Whether the "More" pane is visible */ diff --git a/src/loc/en-us.ts b/src/loc/en-us.ts index a13cc3ad0..8b9936e33 100644 --- a/src/loc/en-us.ts +++ b/src/loc/en-us.ts @@ -101,10 +101,12 @@ define([], () => { AlignTitle: "Align", ListTitle: "List", LinkTitle: "Hyperlink", + ImageTitle: "Image", MoreTitle: "More", FormattingPaneTitle: "Text formatting", CloseButton: "Close", InsertLinkTitle: "Insert link", + InsertImageTitle: "Insert image", AddressFieldLabel: "Address", TextToDisplayLabel: "Text to display", SaveButtonLabel: "Save", diff --git a/src/loc/mystrings.d.ts b/src/loc/mystrings.d.ts index 7e476aadc..c00fe9f75 100644 --- a/src/loc/mystrings.d.ts +++ b/src/loc/mystrings.d.ts @@ -73,10 +73,12 @@ declare interface IControlStrings { AlignTitle: string; ListTitle: string; LinkTitle: string; + ImageTitle: string; MoreTitle: string; FormattingPaneTitle: string; CloseButton: string; InsertLinkTitle: string; + InsertImageTitle: string; AddressFieldLabel: string; TextToDisplayLabel: string; SaveButtonLabel: string; diff --git a/src/loc/nl-nl.ts b/src/loc/nl-nl.ts index c6ef4bcc7..cefa2e272 100644 --- a/src/loc/nl-nl.ts +++ b/src/loc/nl-nl.ts @@ -90,10 +90,12 @@ define([], () => { "AlignTitle": "Uitlijnen", "ListTitle": "Lijst", "LinkTitle": "Hyperlink", + "ImageTitle": "Afbeelding", "MoreTitle": "Meer", "FormattingPaneTitle": "Tekstopmaak", "CloseButton": "Sluiten", "InsertLinkTitle": "Koppeling invoegen", + "InsertImageTitle": "Afbeelding invoegen", "AddressFieldLabel": "Adres", "TextToDisplayLabel": "Weer te geven tekst", "SaveButtonLabel": "Opslaan",