integrate with share link feature

src/components/ContentWrap.jsx

@@ -5,7 +5,7 @@ import Toolbox from './Toolbox.jsx';
 import Tabs from './Tabs.jsx';
 import { computeCss, computeHtml, computeJs } from '../computes';
 import { CssModes, HtmlModes, JsModes, modes } from '../codeModes';
-import { getCompleteHtml, loadJS, log, blobToBase64 } from '../utils';
+import { getCompleteHtml, loadJS, log } from '../utils';
 
 import { Button } from './common';
 import { SplitPane } from './SplitPane.jsx';
@@ -32,6 +32,8 @@ export default class ContentWrap extends Component {
 			lineOfCode: 0,
 			isConsoleOpen: false,
 			isCssSettingsModalOpen: false,
+			imageBase64: null,
+			isSharePanelVisible: false,
 		};
 		this.updateTimer = null;
 		this.updateDelay = 500;
@@ -459,8 +461,13 @@ export default class ContentWrap extends Component {
 	}
 
 	async shareClickHandler(e) {
-		const imageBlob = await this.getPngBlob();
-		this.props.currentItem.imageBase64 = await blobToBase64(imageBlob);
+		if (!window.user) {
+			this.props.onLogin();
+			return;
+		}
+		const image = await this.getPngBlob();
+		await this.props.onUpdateImage(image);
+		this.setState({ isSharePanelVisible: true });
 		trackEvent('ui', 'shareLink');
 	}
 
@@ -1047,6 +1054,10 @@ export default class ContentWrap extends Component {
 									closeOnBlur={true}
 									hasArrow={true}
 									placement={'bottom'}
+									onVisibilityChange={(visible) =>
+										this.setState({ isSharePanelVisible: visible })
+									}
+									isVisible={this.state.isSharePanelVisible}
 									trigger={
 										<Button
 											className="button icon-button hint--rounded hint--bottom-left"
@@ -1063,6 +1074,7 @@ export default class ContentWrap extends Component {
 										<SharePanel
 											author={window.user ? window.user.displayName : 'author'}
 											currentItem={this.props.currentItem}
+											imageBase64={this.state.imageBase64}
 										/>
 									}
 								/>

src/components/PopOver.jsx

@@ -11,13 +11,15 @@ export class Popover extends Component {
 	}
 
 	componentDidMount() {
-		this.props.closeOnBlur &&
-			document.addEventListener('click', this.handleDocumentClick, true);
+		document.addEventListener(
+			'click',
+			this.handleDocumentClick.bind(this),
+			true
+		);
 	}
 
 	componentWillUnmount() {
-		this.props.closeOnBlur &&
-			document.removeEventListener('click', this.handleDocumentClick);
+		document.removeEventListener('click', this.handleDocumentClick.bind(this));
 	}
 
 	togglePopover = () => {
@@ -36,6 +38,7 @@ export class Popover extends Component {
 			this.popoverRef.current &&
 			!this.popoverRef.current.contains(event.target)
 		) {
+			this.props.onVisibilityChange && this.props.onVisibilityChange(false);
 			this.setState({ isVisible: false });
 		}
 	};

src/components/PreviewCard.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-export function PreviewCard({ title, author, description, image }) {
+export function PreviewCard({ title, author, description, imageBase64 }) {
 	return (
 		<div className="preview-card">
 			<div className="preview-card__content">
@@ -22,7 +22,7 @@ export function PreviewCard({ title, author, description, image }) {
 			</div>
 			<div className="preview-card__image">
 				<div className="overlay">
-					<img src={image} />
+					<img src={imageBase64} />
 				</div>
 			</div>
 		</div>
@@ -33,5 +33,5 @@ PreviewCard.propTypes = {
 	title: PropTypes.string.isRequired,
 	author: PropTypes.string.isRequired,
 	description: PropTypes.string.isRequired,
-	image: PropTypes.string,
+	imageBase64: PropTypes.string,
 };

src/components/SharePanel.jsx

@@ -16,7 +16,20 @@ export class SharePanel extends Component {
 	}
 
 	async componentDidMount() {
-		const result = await syncDiagram(this.props.currentItem);
+		await this.syncDiagram(this.props.currentItem);
+	}
+
+	async componentDidUpdate(prevProps) {
+		if (prevProps.currentItem !== this.props.currentItem) {
+			await this.syncDiagram(this.props.currentItem);
+		}
+	}
+
+	async syncDiagram(currentItem) {
+		const result = await syncDiagram(currentItem);
+		if (!result) {
+			return;
+		}
 		this.setState({
 			isLoading: false,
 			link: getShareLink(result),
@@ -56,7 +69,7 @@ export class SharePanel extends Component {
 								title={currentItem.title}
 								author={author}
 								description="Click and check the latest diagram. Install our Confluence plugin for an enhanced expperience when viewing in Confluence."
-								image={currentItem.imageBase64}
+								imageBase64={currentItem.imageBase64}
 							/>
 							<Popover
 								isVisible={this.state.isTooltipVisible}
@@ -68,6 +81,7 @@ export class SharePanel extends Component {
 										className="button icon-button copy-button"
 										title={link}
 										onClick={this.handleCopyLink}
+										disabled={isLoading}
 									>
 										{isLoading ? (
 											<div className="loader" />