next-blurhash-previews 0.0.3-beta49 → 0.0.3-beta51
Sign up to get free protection for your applications and to get access to all the features.
package/bin/remark-plugin.js
CHANGED
@@ -39,8 +39,8 @@ export const blurhashPlugin = publicPath => () => {
|
|
39
39
|
|
40
40
|
const newNode = `
|
41
41
|
<blurhash-image url="${originalImg}" preview='${JSON.stringify(blurHash)}'>
|
42
|
-
<img alt="${alt}" width="${w}" src="${originalImg}" slot="image" />
|
43
|
-
<canvas width="${
|
42
|
+
<img alt="${alt}" width="${w}" height="${h}" src="${originalImg}" slot="image" />
|
43
|
+
<canvas width="${w}" height="${h}" slot="preview"></canvas>
|
44
44
|
</blurhash-image>`.trim();
|
45
45
|
|
46
46
|
parent.children[index] = {
|
package/imagePreviewBootstrap.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { createElement } from "react";
|
2
2
|
|
3
3
|
export const imagePreviewBootstrap = createElement("script", {
|
4
|
-
dangerouslySetInnerHTML: { __html: `(() => { "use strict";class o extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#e(){return this.querySelector("img")}get#t(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#i=()=>{if(this.#e&&this.#t)return this.mo?.disconnect(),this.#e.complete?this.#r():(this.#h(),this.#e.addEventListener("load",this.#r)),!0};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{setTimeout(()=>{this.sd.innerHTML='<slot name="image"></slot>'},
|
4
|
+
dangerouslySetInnerHTML: { __html: `(() => { "use strict";class o extends HTMLElement{sd;mo;static observedAttributes=["preview"];#s=!1;get#e(){return this.querySelector("img")}get#t(){return this.querySelector("canvas")}constructor(){super(),this.sd=this.attachShadow({mode:"open"}),this.sd.innerHTML='<slot name="preview"></slot>'}#i=()=>{if(this.#e&&this.#t)return this.mo?.disconnect(),this.#e.complete?this.#r():(this.#h(),this.#e.addEventListener("load",this.#r)),!0};connectedCallback(){this.#s=!0,this.#i()||(this.mo=new MutationObserver(this.#i),this.mo.observe(this,{subtree:!0,childList:!0,attributes:!1}))}#r=()=>{setTimeout(()=>{this.sd.innerHTML='<slot name="image"></slot>'},19e3)};attributeChangedCallback(e){this.#t&&e==="preview"&&this.#h()}#h(){if(!this.#s||!this.getAttribute("preview"))return;const e=JSON.parse(this.getAttribute("preview"));a(this.#t,e)}}customElements.get("blurhash-image")||customElements.define("blurhash-image",o);function a(t,e){const{w:s,h:i,blurhash:h}=e;t.width=s,t.height=i;const n=new Worker("/canvas-worker.js"),r=t.transferControlToOffscreen();n.postMessage({canvas:r,width:s,height:i,blurhash:h},[r])} })();` },
|
5
5
|
});
|