clipboarditem updates (#2829)

* clipboarditem updates * casing * dancing * dancing * Update files/en-us/web/api/clipboarditem/clipboarditem/index.html Co-authored-by: Joe Medley <[email protected]> * Update files/en-us/web/api/clipboarditem/index.html Co-authored-by: Joe Medley <[email protected]> * Update files/en-us/web/api/clipboarditem/index.html Co-authored-by: Joe Medley <[email protected]> * Update files/en-us/web/api/clipboarditem/presentationstyle/index.html Co-authored-by: Joe Medley <[email protected]> * fixes Co-authored-by: Joe Medley <[email protected]>
mdn · Mar 5, 2021 · 10a2e1d · 10a2e1d
1 parent 4fdf7b2
commit 10a2e1d
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 38 deletions.
diff --git a/files/en-us/web/api/clipboarditem/clipboarditem/index.html b/files/en-us/web/api/clipboarditem/clipboarditem/index.html
@@ -14,43 +14,38 @@
 ---
 <div>{{DefaultAPISidebar("Clipboard API")}}</div>
 
-<p class="summary"><span class="seoSummary">The
-    <code><strong>ClipboardItem()</strong></code> constructor of the {{domxref("Clipboard
-    API")}} creates a new {{domxref("ClipboardItem")}} object which represents data to be
-    stored or retrieved via the {{domxref("Clipboard API")}}, that is
-    {{domxref("clipboard.write()")}} and {{domxref("clipboard.read()")}}
-    respectively.</span></p>
+<p class="summary"><span class="seoSummary">The <code><strong>ClipboardItem()</strong></code> constructor of the {{domxref("Clipboard API")}} creates a new {{domxref("ClipboardItem")}} object which represents data to be stored or retrieved via the {{domxref("Clipboard API")}}, that is {{domxref("clipboard.write()")}} and {{domxref("clipboard.read()")}} respectively.</span></p>
 
 <div class="notecard note">
-  <p><strong>Note</strong>: Image format support varies by browser. See the browser
-    compatibility table for the {{domxref("Clipboard")}} interface.</p>
+  <p><strong>Note</strong>: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre
-  class="brush: js">var <var>ClipboardItem</var> = new ClipboardItem(ClipboardItemData);</pre>
+<pre class="brush: js">var <var>ClipboardItem</var> = new ClipboardItem(ClipboardItemData);</pre>
 
 <h3 id="Parameters">Parameters</h3>
 
 <dl>
   <dt><code>ClipboardItemData</code></dt>
-  <dd>An {{jsxref("Object")}} with the {{Glossary("MIME type")}} as the key and
-    {{domxref("Blob")}} as the value.</dd>
+  <dd>An {{jsxref("Object")}} with the {{Glossary("MIME type")}} as the key and data as the value. The data can represented as a {{domxref("Blob")}}, a {{jsxref("String")}} or a {{jsxref("Promise")}} which resolves to either a blob or string.</dd>
+
+  <dt><code>ClipboardItemOptions</code> {{optional_inline}}</dt>
+  <dd>An {{jsxref("Object")}} with the following properties:
+    <ul>
+      <li><code><strong>presentationStyle</strong></code>: One of <code>"unspecified"</code>, <code>"inline"</code> or <code>"attachment"</code>. The default is <code>"unspecified"</code>.</li>
+    </ul>
+  </dd>
 </dl>
 
 <div class="notecard note">
-  <p><strong>Note</strong>: To work with text see the {{domxref("Clipboard.readText()")}}
-    and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}}
+  <p><strong>Note</strong>: You can also work with text via the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}}
     interface.</p>
 </div>
 
 <h2 id="Examples">Examples</h2>
 
-<p>The below example requests a png image using the {{domxref("Fetch API")}}, and in turn,
-  the {{domxref("Body.blob()", "responses' blob()")}} method, to create a new
-  {{domxref("ClipboardItem")}} and write it to the clipboard, using the
-  {{domxref("Clipboard API")}}.</p>
+<p>The below example requests a png image using the {{domxref("Fetch API")}}, and in turn, the {{domxref("Body.blob()", "responses' blob()")}} method, to create a new {{domxref("ClipboardItem")}}. This item is then written to the clipboard, using the {{domxref("Clipboard.write()")}} method.</p>
 
 <div class="note">
   <p><strong>Note</strong>: You can only pass in one clipboard item at a time.</p>
@@ -99,8 +94,6 @@ <h2 id="See_also">See also</h2>
 
 <ul>
   <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
-  <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on
-      Glitch</a></li>
-  <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async
-      Clipboard article</a></li>
+  <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a></li>
+  <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a></li>
 </ul>
diff --git a/files/en-us/web/api/clipboarditem/gettype/index.html b/files/en-us/web/api/clipboarditem/gettype/index.html
@@ -11,17 +11,14 @@
 - getTypes
 - paste
 ---
-<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
 
-<p class="summary"><span class="seoSummary">The <strong><code>getType()</code></strong>
-    method of the {{domxref("ClipboardItem")}} interface returns a {{jsxref("Promise")}}
-    that resolves with a {{domxref("Blob")}} of the requested  {{Glossary("MIME type")}}
-    or an error if the MIME type is not found.</span></p>
+<p class="summary"><span class="seoSummary">The <strong><code>getType()</code></strong> method of the {{domxref("ClipboardItem")}} interface returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested  {{Glossary("MIME type")}} or an error if the MIME type is not found.</span></p>
 
 <h2 id="Syntax">Syntax</h2>
 
 <pre
-  class="brush: js">var <em>blob</em> = <em>clipboardItem</em>.getType(type);</pre>
+  class="brush: js">var <var>blob</var> = <var>clipboardItem</var>.getType(type);</pre>
 
 <h3 id="Parameters">Parameters</h3>
 
@@ -80,7 +77,7 @@ <h2 id="Specifications">Specifications</h2>
       <th scope="col">Comment</th>
     </tr>
     <tr>
-      <td>{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}</td>
+      <td>{{SpecName('Clipboard API','#dom-clipboarditem-gettype-type-type','ClipboardItem.getType()')}}</td>
       <td>{{Spec2('Clipboard API')}}</td>
       <td>Initial definition.</td>
     </tr>

diff --git a/files/en-us/web/api/clipboarditem/index.html b/files/en-us/web/api/clipboarditem/index.html
@@ -12,7 +12,7 @@
   - copy
   - paste
 ---
-<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
 
 <p class="summary"><span class="seoSummary">The <strong><code>ClipboardItem</code></strong> interface of the {{domxref('Clipboard API')}} represents a single item format, used when reading or writing data via the {{domxref('Clipboard API')}}. That is {{domxref("clipboard.read()")}} and {{domxref("clipboard.write()")}} respectively.</span></p>
 
@@ -42,8 +42,21 @@ <h2 id="Properties">Properties</h2>
 <dl>
  <dt>{{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}}</dt>
  <dd>Returns an {{jsxref("Array")}} of MIME types available within the <strong><code>ClipboardItem</code></strong>.</dd>
+
+ <dt>{{domxref("ClipboardItem.presentationStyle", "presentationStyle")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns one of the following: <code>"unspecified"</code>, <code>"inline"</code> or <code>"attachment"</code>.</dd>
+
+ <dt>{{domxref("ClipboardItem.delayed", "delayed")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a boolean which if true indicates the <strong><code>ClipboardItem</code></strong> was created using the static <code>createDelayed()</code> method.</dd>
+
+ <dt>{{domxref("ClipboardItem.lastModified", "lastModified")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an {{domxref("DOMTimeStamp")}} representing the time at which the <strong><code>ClipboardItem</code></strong> was last modified.</dd>
 </dl>
 
+<div class="note">
+  <p><strong>Note:</strong> Neither <code>ClipboardItem.delayed</code> nor <code>ClipboardItem.lastModified</code> have been implemented by any browsers at this time. Check the <a href="#browser_compatibility">compatibility table</a> for details.</p>
+</div>
+
 <h2 id="Methods">Methods</h2>
 
 <p><em>This interface defines the following methods.</em></p>
@@ -53,6 +66,17 @@ <h2 id="Methods">Methods</h2>
  <dd>Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.</dd>
 </dl>
 
+<h2 id="Static_Methods">Static Methods</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardItem.createDelayed()")}}</dt>
+ <dd>Creates a new <strong><code>ClipboardItem</code></strong> object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value.</dd>
+</dl>
+
+<div class="note">
+  <p><strong>Note:</strong> <code>ClipboardItem.createDelayed()</code> has not been implemented by any browsers at this time. Check the <a href="#browser_compatibility">compatibility table</a> for details.</p>
+</div>
+
 <h2 id="Examples">Examples</h2>
 
 <h3 id="Writing_To_Clipboard">Writing To Clipboard</h3>
@@ -117,14 +141,10 @@ <h2 id="Specifications">Specifications</h2>
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+<h2 id="browser_compatibility">Browser compatibility</h2>
 
 <p>{{Compat("api.ClipboardItem")}}</p>
 
-<div class="note">
-<p><strong>Note</strong>: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.</p>
-</div>
-
 <h2 id="See_also">See also</h2>
 
 <ul>

diff --git a/files/en-us/web/api/clipboarditem/presentationstyle/index.html b/files/en-us/web/api/clipboarditem/presentationstyle/index.html
@@ -0,0 +1,81 @@
+---
+title: ClipboardItem.presentationStyle
+slug: Web/API/ClipboardItem/presentationStyle
+tags:
+- API
+- Clipboard
+- Clipboard API
+- ClipboardItem
+- Cut
+- Property
+- Read-only
+- Reference
+- presentationStyle
+- copy
+- paste
+---
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
+
+<p class="summary"><span class="seoSummary">The read-only
+    <strong><code>presentationStyle</code></strong> property of the {{domxref("ClipboardItem")}}
+    interface returns a {{jsxref("String")}} indicating how an item should be presented.</span></p> 
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre
+  class="brush: js">var <var>presentationStyle</var> = <var>clipboardItem</var>.presentationStyle;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>One of either <code>"unspecified"</code>, <code>"inline"</code> or <code>"attachment"</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the below example, we're returning all items on the clipboard via the {{domxref("clipboard.read()")}} method, then logging the <code>presentationStyle</code> property.</p>
+
+<pre class="brush: js">async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+
+    for (const clipboardItem of clipboardItems) {
+
+      console.log(clipboardItem.presentationStyle);
+
+    }
+
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('Clipboard API','#dom-clipboarditem-presentationstyle','ClipboardItem.presentationStyle')}}</td>
+      <td>{{Spec2('Clipboard API')}}</td>
+      <td>Initial definition.</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.ClipboardItem.types")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+  <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
+  <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on
+      Glitch</a></li>
+  <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async
+      Clipboard article</a></li>
+</ul>
diff --git a/files/en-us/web/api/clipboarditem/types/index.html b/files/en-us/web/api/clipboarditem/types/index.html
@@ -14,7 +14,7 @@
 - copy
 - paste
 ---
-<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
 
 <p class="summary"><span class="seoSummary">The read-only
     <strong><code>types</code></strong> property of the {{domxref("ClipboardItem")}}
@@ -24,7 +24,7 @@
 <h2 id="Syntax">Syntax</h2>
 
 <pre
-  class="brush: js">var <em>types</em> = <em>clipboardItem</em>.types;</pre>
+  class="brush: js">var <var>types</var> = <var>clipboardItem</var>.types;</pre>
 
 <h3 id="Value">Value</h3>
 
@@ -67,7 +67,7 @@ <h2 id="Specifications">Specifications</h2>
       <th scope="col">Comment</th>
     </tr>
     <tr>
-      <td>{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}</td>
+      <td>{{SpecName('Clipboard API','#dom-clipboarditem-types','ClipboardItem.types')}}</td>
       <td>{{Spec2('Clipboard API')}}</td>
       <td>Initial definition.</td>
     </tr>