methyl/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Surfer Guidelines Minimal Implementation</title>
  <style>
    .surfer-guidelines { height: 100%; border: 0; position: fixed; right: 0; top: 0; bottom: 0; width: 400px }
    .surfer-guidelines.surfer-guidelines-wide { width: 80vw }
    textarea { width: 100%; height: 100% }
  </style>
</head>
<body>


  <textarea placeholder="type some HTML" style="position: fixed; right: 0; top: 0; left: 0; width: calc(100vw - 400px)"><h1>Pozycjonowanie stron</h1></textarea>


  <script>
    window.surferGuidelines={init(...i){window.__sg_in=i},setHtml(...i){window.__sg_sh=i},getSurferIframeElement(...i){window.__sh_gi=i}};

    window.surferGuidelines.init(document.body)
    document.querySelector('textarea').addEventListener('keyup', (e) => surferGuidelines.setHtml(e.currentTarget.value))
    surferGuidelines.setHtml(document.querySelector('textarea').value)
  </script>
  <script async src="surfer-loader.js"></script>
</body>
</html>

## surfer-loader.js
parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"C9JJ":[function(require,module,exports) {
"use strict";var e,i,r;Object.defineProperty(exports,"__esModule",{value:!0}),exports.debugRpc=exports.extensionOrigin=exports.iframePath=exports.iframeOrigin=void 0;const t=(null===(e=window)||void 0===e?void 0:e.SURFER_EXT_CONF)||{};exports.iframeOrigin=null!==(i=t.iframeOrigin)&&void 0!==i?i:"https://app.surferseo.com",exports.iframePath=`${exports.iframeOrigin}/draft_iframe`,exports.extensionOrigin=null!==(r=t.extensionOrigin)&&void 0!==r?r:"https://surferseo.github.io/surfer-content-editor-plugin",exports.debugRpc=!!t.debugRpc;
},{}],"ndaD":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Queue=void 0;class e{constructor(){this.head=null,this.tail=null}enqueue(e){if(null===this.head)return this.head={elem:e,next:null},void(this.tail=this.head);this.tail.next={elem:e,next:null},this.tail=this.tail.next}dequeue(){if(null===this.head)return;const{elem:e}=this.head;return this.head=this.head.next,e}peek(){if(null!==this.head)return this.head.elem}}exports.Queue=e;
},{}],"fZI5":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FrameCommunicator=void 0;const e=require("/helpers/queue"),s=require("/config");class t{constructor(s,t={}){this.iframe=s,this.currentHtml=null,this.flushHtml=!1,this.currentPermalink=null,this.loadedPermalink=null,this.flushPermalink=!1,this.isReady=!1,this.messageQueue=new e.Queue,this.onNavigation=t.onNavigation,this.onDraftLoaded=t.onDraftLoaded,this.subscribe()}requestView(e){this.sendMessage({message:"request-view",params:{view:e}})}setPermalink(e){const{currentPermalink:s}=this;this.currentPermalink=e,this.sendPermalink(),s!==e&&this.setHtml(null)}setHtml(e){this.currentHtml=e,this.sendHtml()}sendPermalink(){null!==this.currentPermalink&&(this.flushPermalink=!1,this.sendMessage({message:"update-permalink",params:{permalink:this.currentPermalink}}))}sendHtml(){null!==this.currentHtml&&this.currentPermalink===this.loadedPermalink&&(this.flushHtml=!1,this.sendMessage({message:"update-html",params:{html:this.currentHtml}}))}sendMessage(e){const t="string"==typeof e?{message:e}:e;if(this.isReady&&this.iframe.contentWindow){const e={version:"surfer-extension:1.1",command:t};i("--\x3e",t),this.iframe.contentWindow.postMessage(e,s.iframeOrigin)}else this.enqueueCommand(t)}subscribe(){window.addEventListener("message",e=>{const s=e.data;if("string"!=typeof(null==s?void 0:s.version)||!s.version.startsWith("surfer-extension:1."))return;const{command:t}=s;i("<--",t),this.isReady=!0;const a=this.flushHtml,n=this.flushPermalink;switch(this.flushQueue(),t.message){case"ping":this.sendMessage("pong");break;case"pong":break;case"request-permalink":n||this.sendPermalink();break;case"request-html":a||this.sendHtml();break;case"view-rendered":this.onNavigation&&this.onNavigation(t.params.view);break;case"draft-loaded":this.loadedPermalink=t.params.permalink,this.onDraftLoaded&&this.onDraftLoaded(t.params.permalink);break;case"refresh-draft":this.sendMessage("refresh-draft")}})}enqueueCommand(e){switch(e.message){case"update-html":this.flushHtml=!0;break;case"update-permalink":this.flushPermalink=!0;break;default:this.messageQueue.enqueue(e)}}flushQueue(){if(this.isReady&&this.iframe.contentWindow){this.flushHtml&&this.sendHtml(),this.flushPermalink&&this.sendPermalink();for(let e=this.messageQueue.dequeue();void 0!==e;e=this.messageQueue.dequeue())this.sendMessage(e)}}}function i(e,t){if(!s.debugRpc)return;const i=[`window ${e} iframe`,t.message];t.params&&i.push(t.params),console.log(...i)}exports.FrameCommunicator=t;
},{"/helpers/queue":"ndaD","/config":"C9JJ"}],"uM9b":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createSurferContext=void 0;const e=require("/config"),t=require("./frame-communicator");function r(r={}){const n=document.createElement("iframe");n.src=e.iframePath;const i=new t.FrameCommunicator(n,r);return{$iframe:n,setPermalink:i.setPermalink.bind(i),setHtml:i.setHtml.bind(i),requestView:i.requestView.bind(i)}}exports.createSurferContext=r;
},{"/config":"C9JJ","./frame-communicator":"fZI5"}],"kLTt":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const i=require("./common/surfer-context");function e(e){const{$iframe:n,setPermalink:s,setHtml:o}=i.createSurferContext({onNavigation(i){"draft_configuration"===i?n.classList.add("surfer-guidelines-wide"):n.classList.remove("surfer-guidelines-wide")}});n.classList.add("surfer-guidelines"),e.appendChild(n);const t=new URL(window.location.href);t.hash="",s(t.toString()),void 0!==window.__sg_sh&&(o(...window.__sg_sh),window.__sg_sh=void 0),window.surferGuidelines.setHtml=o}void 0===window.surferGuidelines?window.surferGuidelines={init:e,setHtml(...i){window.__sg_sh=i},initWithOptions:i.createSurferContext}:(window.surferGuidelines.init=e,window.surferGuidelines.initWithOptions=i.createSurferContext,void 0!==window.__sg_in&&(window.surferGuidelines.init(...window.__sg_in),window.__sg_in=void 0),void 0!==window.__sh_gi&&(window.surferGuidelines.initWithOptions(...window.__sh_gi),window.__sh_gi=void 0));
},{"./common/surfer-context":"uM9b"}]},{},["kLTt"], null)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Surfer Guidelines Minimal Implementation</title>
	<style>
	.surfer-guidelines { height: 100%; border: 0; position: fixed; right: 0; top: 0; bottom: 0; width: 400px }
	.surfer-guidelines.surfer-guidelines-wide { width: 80vw }
	textarea { width: 100%; height: 100% }
	</style>
	</head>
	<body>


	<textarea placeholder="type some HTML" style="position: fixed; right: 0; top: 0; left: 0; width: calc(100vw - 400px)"><h1>Pozycjonowanie stron</h1></textarea>


	<script>
	window.surferGuidelines={init(...i){window.__sg_in=i},setHtml(...i){window.__sg_sh=i},getSurferIframeElement(...i){window.__sh_gi=i}};

	window.surferGuidelines.init(document.body)
	document.querySelector('textarea').addEventListener('keyup', (e) => surferGuidelines.setHtml(e.currentTarget.value))
	surferGuidelines.setHtml(document.querySelector('textarea').value)
	</script>
	<script async src="surfer-loader.js"></script>
	</body>
	</html>
	parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]\|\|r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i\|\|(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"C9JJ":[function(require,module,exports) {
	"use strict";var e,i,r;Object.defineProperty(exports,"__esModule",{value:!0}),exports.debugRpc=exports.extensionOrigin=exports.iframePath=exports.iframeOrigin=void 0;const t=(null===(e=window)\|\|void 0===e?void 0:e.SURFER_EXT_CONF)\|\|{};exports.iframeOrigin=null!==(i=t.iframeOrigin)&&void 0!==i?i:"https://app.surferseo.com",exports.iframePath=`${exports.iframeOrigin}/draft_iframe`,exports.extensionOrigin=null!==(r=t.extensionOrigin)&&void 0!==r?r:"https://surferseo.github.io/surfer-content-editor-plugin",exports.debugRpc=!!t.debugRpc;
	},{}],"ndaD":[function(require,module,exports) {
	"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Queue=void 0;class e{constructor(){this.head=null,this.tail=null}enqueue(e){if(null===this.head)return this.head={elem:e,next:null},void(this.tail=this.head);this.tail.next={elem:e,next:null},this.tail=this.tail.next}dequeue(){if(null===this.head)return;const{elem:e}=this.head;return this.head=this.head.next,e}peek(){if(null!==this.head)return this.head.elem}}exports.Queue=e;
	},{}],"fZI5":[function(require,module,exports) {
	"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FrameCommunicator=void 0;const e=require("/helpers/queue"),s=require("/config");class t{constructor(s,t={}){this.iframe=s,this.currentHtml=null,this.flushHtml=!1,this.currentPermalink=null,this.loadedPermalink=null,this.flushPermalink=!1,this.isReady=!1,this.messageQueue=new e.Queue,this.onNavigation=t.onNavigation,this.onDraftLoaded=t.onDraftLoaded,this.subscribe()}requestView(e){this.sendMessage({message:"request-view",params:{view:e}})}setPermalink(e){const{currentPermalink:s}=this;this.currentPermalink=e,this.sendPermalink(),s!==e&&this.setHtml(null)}setHtml(e){this.currentHtml=e,this.sendHtml()}sendPermalink(){null!==this.currentPermalink&&(this.flushPermalink=!1,this.sendMessage({message:"update-permalink",params:{permalink:this.currentPermalink}}))}sendHtml(){null!==this.currentHtml&&this.currentPermalink===this.loadedPermalink&&(this.flushHtml=!1,this.sendMessage({message:"update-html",params:{html:this.currentHtml}}))}sendMessage(e){const t="string"==typeof e?{message:e}:e;if(this.isReady&&this.iframe.contentWindow){const e={version:"surfer-extension:1.1",command:t};i("--\x3e",t),this.iframe.contentWindow.postMessage(e,s.iframeOrigin)}else this.enqueueCommand(t)}subscribe(){window.addEventListener("message",e=>{const s=e.data;if("string"!=typeof(null==s?void 0:s.version)\|\|!s.version.startsWith("surfer-extension:1."))return;const{command:t}=s;i("<--",t),this.isReady=!0;const a=this.flushHtml,n=this.flushPermalink;switch(this.flushQueue(),t.message){case"ping":this.sendMessage("pong");break;case"pong":break;case"request-permalink":n\|\|this.sendPermalink();break;case"request-html":a\|\|this.sendHtml();break;case"view-rendered":this.onNavigation&&this.onNavigation(t.params.view);break;case"draft-loaded":this.loadedPermalink=t.params.permalink,this.onDraftLoaded&&this.onDraftLoaded(t.params.permalink);break;case"refresh-draft":this.sendMessage("refresh-draft")}})}enqueueCommand(e){switch(e.message){case"update-html":this.flushHtml=!0;break;case"update-permalink":this.flushPermalink=!0;break;default:this.messageQueue.enqueue(e)}}flushQueue(){if(this.isReady&&this.iframe.contentWindow){this.flushHtml&&this.sendHtml(),this.flushPermalink&&this.sendPermalink();for(let e=this.messageQueue.dequeue();void 0!==e;e=this.messageQueue.dequeue())this.sendMessage(e)}}}function i(e,t){if(!s.debugRpc)return;const i=[`window ${e} iframe`,t.message];t.params&&i.push(t.params),console.log(...i)}exports.FrameCommunicator=t;
	},{"/helpers/queue":"ndaD","/config":"C9JJ"}],"uM9b":[function(require,module,exports) {
	"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createSurferContext=void 0;const e=require("/config"),t=require("./frame-communicator");function r(r={}){const n=document.createElement("iframe");n.src=e.iframePath;const i=new t.FrameCommunicator(n,r);return{$iframe:n,setPermalink:i.setPermalink.bind(i),setHtml:i.setHtml.bind(i),requestView:i.requestView.bind(i)}}exports.createSurferContext=r;
	},{"/config":"C9JJ","./frame-communicator":"fZI5"}],"kLTt":[function(require,module,exports) {
	"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const i=require("./common/surfer-context");function e(e){const{$iframe:n,setPermalink:s,setHtml:o}=i.createSurferContext({onNavigation(i){"draft_configuration"===i?n.classList.add("surfer-guidelines-wide"):n.classList.remove("surfer-guidelines-wide")}});n.classList.add("surfer-guidelines"),e.appendChild(n);const t=new URL(window.location.href);t.hash="",s(t.toString()),void 0!==window.__sg_sh&&(o(...window.__sg_sh),window.__sg_sh=void 0),window.surferGuidelines.setHtml=o}void 0===window.surferGuidelines?window.surferGuidelines={init:e,setHtml(...i){window.__sg_sh=i},initWithOptions:i.createSurferContext}:(window.surferGuidelines.init=e,window.surferGuidelines.initWithOptions=i.createSurferContext,void 0!==window.__sg_in&&(window.surferGuidelines.init(...window.__sg_in),window.__sg_in=void 0),void 0!==window.__sh_gi&&(window.surferGuidelines.initWithOptions(...window.__sh_gi),window.__sh_gi=void 0));
	},{"./common/surfer-context":"uM9b"}]},{},["kLTt"], null)