diff --git a/app/assets/stylesheets/preact/article-form.scss b/app/assets/stylesheets/preact/article-form.scss index 39f00ca02..2084c10a4 100644 --- a/app/assets/stylesheets/preact/article-form.scss +++ b/app/assets/stylesheets/preact/article-form.scss @@ -542,6 +542,31 @@ text-align: center; border-radius: 3px; overflow-y: scroll; + clipboard-copy { + cursor: pointer; + img { + display: inline-block; + height: initial; + max-width: 24px; + margin: -10px 5px; + position: relative; + } + input { + cursor: pointer; + } + + #image-markdown-copy-link-input { + margin-left: 24px; + } + #image-markdown-copy-link-announcer { + display: block; + padding-top: 10px; + + &[hidden] { + display: none; + } + } + } h2 { color: $green; font-size: 1.9em; diff --git a/app/javascript/article-form/elements/imageManagement.jsx b/app/javascript/article-form/elements/imageManagement.jsx index 1b7320f6c..dc2c76e96 100644 --- a/app/javascript/article-form/elements/imageManagement.jsx +++ b/app/javascript/article-form/elements/imageManagement.jsx @@ -1,5 +1,6 @@ import { h, Component } from 'preact'; import PropTypes from 'prop-types'; +import linkCopyIcon from '../../../assets/images/content-copy.svg'; import { generateMainImage } from '../actions'; export default class ImageManagement extends Component { @@ -65,6 +66,35 @@ export default class ImageManagement extends Component { }); }; + copyText = () => { + this.imageMarkdownAnnouncer = document.getElementById( + 'image-markdown-copy-link-announcer', + ); + this.imageMarkdownInput = document.getElementById( + 'image-markdown-copy-link-input', + ); + + const isIOSDevice = + navigator.userAgent.match(/iPhone|iPad/i) || + navigator.userAgent.match('CriOS') || + navigator.userAgent === 'DEV-Native-ios'; + + if (isIOSDevice) { + this.imageMarkdownInput.setSelectionRange( + 0, + this.imageMarkdownInput.value.length, + ); + document.execCommand('copy'); + } else { + this.imageMarkdownInput.focus(); + this.imageMarkdownInput.setSelectionRange( + 0, + this.imageMarkdownInput.value.length, + ); + } + this.imageMarkdownAnnouncer.hidden = false; + }; + render() { const { onExit, mainImage, version } = this.props; const { insertionImageUrl, uploadError, uploadErrorMessage } = this.state; @@ -92,9 +122,32 @@ export default class ImageManagement extends Component { insertionImageArea = (
To add a cover image for the post, add cover_image: direct_url_to_image.jpg to the frontmatter
+
+ To add a cover image for the post, add
+ cover_image: direct_url_to_image.jpg
+ to the frontmatter
+
+