@burst/frontend-editing - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

dist/frontend-editing.d.ts

@@ -10,5 +10,6 @@ import { ReactNode } from 'react';
     color?: string | null;
+    absolute?: boolean;
 }
-declare function Editable({ id, type, cmsUrl, token, children, color }: Props): JSX.Element;
+declare function Editable({ id, type, cmsUrl, token, children, color, absolute }: Props): JSX.Element;
 
 export { Editable as default };

dist/frontend-editing.development.cjs.js

@@ -68,6 +68,6 @@ 'use strict';
 function Editable(_a) {
-    var id = _a.id, type = _a.type, cmsUrl = _a.cmsUrl, token = _a.token, children = _a.children, color = _a.color;
-    var _b = React.useState(false), showForm = _b[0], setShowForm = _b[1];
+    var id = _a.id, type = _a.type, cmsUrl = _a.cmsUrl, token = _a.token, children = _a.children, color = _a.color, _b = _a.absolute, absolute = _b === void 0 ? true : _b;
+    var _c = React.useState(false), showForm = _c[0], setShowForm = _c[1];
     var mediaMatch = window.matchMedia('(max-width: 1024px)');
-    var _c = React.useState(mediaMatch.matches), matches = _c[0], setMatches = _c[1];
+    var _d = React.useState(mediaMatch.matches), matches = _d[0], setMatches = _d[1];
     React.useEffect(function () {
@@ -87,3 +87,3 @@ var handler = function (e) { setMatches(e.matches); };
         pencilButtonContainer: function (smallWindow) { return ({
-            position: 'absolute',
+            position: absolute ? 'absolute' : 'relative',
             display: 'flex',
@@ -90,0 +90,0 @@ justifyContent: smallWindow ? 'center' : 'flex-end',

dist/frontend-editing.production.cjs.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@radix-ui/react-dialog"),r=require("next/router");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=n(e),o=n(t);function a(e){var t,n=e.id,o=e.type,a=e.cmsUrl,l=e.token,c=e.onSave,u=e.hide,d=r.useRouter();i.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+o+"/"+n+"/"+(null!==(t=null==d?void 0:d.locale)&&void 0!==t?t:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),i.createElement(i.Fragment,null,i.createElement("div",{onClick:u,style:{position:"fixed",zIndex:40,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),i.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:50,width:"70%",height:"100%",backgroundColor:"white"}}))}var l=function(e){var t,r=null!==(t=e.size)&&void 0!==t?t:24;return i.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},i.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),i.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),i.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};exports.default=function(t){var r=t.id,n=t.type,c=t.cmsUrl,u=t.token,d=t.children,s=t.color,f=e.useState(!1),h=f[0],m=f[1],v=window.matchMedia("(max-width: 1024px)"),g=e.useState(v.matches),p=g[0],w=g[1];e.useEffect((function(){var e=function(e){w(e.matches)};return v.addEventListener("change",e),function(){return v.removeEventListener("change",e)}}));var E=function(e){return{position:"absolute",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},y=function(e){return{display:"flex",transform:"scale(1.25)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=s?s:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return i.createElement(o.Root,null,i.createElement("div",{onClick:function(){return m(!0)},style:E(p)},i.createElement(o.Trigger,{asChild:!0},i.createElement("div",{style:y(p)},i.createElement(l,null)))),d,h&&i.createElement(o.Overlay,{style:{overflowY:"hidden"}},i.createElement(o.Content,{asChild:!0},i.createElement(a,{id:r,type:n,cmsUrl:c,token:u,hide:function(){return m(!1)},onSave:function(){return e=function(){return m(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@radix-ui/react-dialog"),r=require("next/router");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=n(e),o=n(t);function a(e){var t,n=e.id,o=e.type,a=e.cmsUrl,l=e.token,c=e.onSave,u=e.hide,d=r.useRouter();i.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+o+"/"+n+"/"+(null!==(t=null==d?void 0:d.locale)&&void 0!==t?t:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),i.createElement(i.Fragment,null,i.createElement("div",{onClick:u,style:{position:"fixed",zIndex:40,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),i.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:50,width:"70%",height:"100%",backgroundColor:"white"}}))}var l=function(e){var t,r=null!==(t=e.size)&&void 0!==t?t:24;return i.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},i.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),i.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),i.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};exports.default=function(t){var r=t.id,n=t.type,c=t.cmsUrl,u=t.token,d=t.children,s=t.color,f=t.absolute,h=void 0===f||f,m=e.useState(!1),v=m[0],g=m[1],p=window.matchMedia("(max-width: 1024px)"),w=e.useState(p.matches),E=w[0],y=w[1];e.useEffect((function(){var e=function(e){y(e.matches)};return p.addEventListener("change",e),function(){return p.removeEventListener("change",e)}}));var L=function(e){return{position:h?"absolute":"relative",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},x=function(e){return{display:"flex",transform:"scale(1.25)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=s?s:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return i.createElement(o.Root,null,i.createElement("div",{onClick:function(){return g(!0)},style:L(E)},i.createElement(o.Trigger,{asChild:!0},i.createElement("div",{style:x(E)},i.createElement(l,null)))),d,v&&i.createElement(o.Overlay,{style:{overflowY:"hidden"}},i.createElement(o.Content,{asChild:!0},i.createElement(a,{id:r,type:n,cmsUrl:c,token:u,hide:function(){return g(!1)},onSave:function(){return e=function(){return g(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))};
 //# sourceMappingURL=frontend-editing.production.cjs.min.js.map

dist/frontend-editing.production.esm.js

@@ -1,2 +0,2 @@
-import*as e from"react";import{useState as t,useEffect as n}from"react";import*as r from"@radix-ui/react-dialog";import{useRouter as i}from"next/router";function o(t){var n,r=t.id,o=t.type,a=t.cmsUrl,l=t.token,c=t.onSave,d=t.hide,u=i();e.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+o+"/"+r+"/"+(null!==(n=null==u?void 0:u.locale)&&void 0!==n?n:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),e.createElement(e.Fragment,null,e.createElement("div",{onClick:d,style:{position:"fixed",zIndex:40,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),e.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:50,width:"70%",height:"100%",backgroundColor:"white"}}))}var a=function(t){var n,r=null!==(n=t.size)&&void 0!==n?n:24;return e.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},e.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),e.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),e.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};function l(i){var l=i.id,c=i.type,d=i.cmsUrl,u=i.token,s=i.children,m=i.color,h=t(!1),f=h[0],g=h[1],v=window.matchMedia("(max-width: 1024px)"),p=t(v.matches),w=p[0],E=p[1];n((function(){var e=function(e){E(e.matches)};return v.addEventListener("change",e),function(){return v.removeEventListener("change",e)}}));var L=function(e){return{position:"absolute",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},y=function(e){return{display:"flex",transform:"scale(1.25)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=m?m:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return e.createElement(r.Root,null,e.createElement("div",{onClick:function(){return g(!0)},style:L(w)},e.createElement(r.Trigger,{asChild:!0},e.createElement("div",{style:y(w)},e.createElement(a,null)))),s,f&&e.createElement(r.Overlay,{style:{overflowY:"hidden"}},e.createElement(r.Content,{asChild:!0},e.createElement(o,{id:l,type:c,cmsUrl:d,token:u,hide:function(){return g(!1)},onSave:function(){return e=function(){return g(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))}export{l as default};
+import*as e from"react";import{useState as t,useEffect as n}from"react";import*as r from"@radix-ui/react-dialog";import{useRouter as i}from"next/router";function o(t){var n,r=t.id,o=t.type,a=t.cmsUrl,l=t.token,c=t.onSave,d=t.hide,u=i();e.useEffect((function(){function e(e){"object"==typeof e.data&&"SUBMIT_FORM"===e.data.type&&c()}return window.addEventListener("message",e,!1),function(){return window.removeEventListener("message",e,!1)}}));var s=new URL(a+"/frontend-editing/edit/"+o+"/"+r+"/"+(null!==(n=null==u?void 0:u.locale)&&void 0!==n?n:"en"));return"string"==typeof l&&s.searchParams.set("jwt",l),e.createElement(e.Fragment,null,e.createElement("div",{onClick:d,style:{position:"fixed",zIndex:40,width:"100%",height:"100%",backgroundColor:"rgba(0, 0, 0, 0.5)",top:0,right:0,cursor:"pointer"}}),e.createElement("iframe",{src:s.toString(),style:{position:"fixed",top:0,right:0,resize:"horizontal",overflowX:"scroll",overflowY:"hidden",overscrollBehaviorX:"contain",zIndex:50,width:"70%",height:"100%",backgroundColor:"white"}}))}var a=function(t){var n,r=null!==(n=t.size)&&void 0!==n?n:24;return e.createElement("svg",{width:r,height:r,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{margin:"auto",height:"auto"}},e.createElement("path",{d:"M14.6626 2.87675L13.0766 1.29175C12.6876 0.90275 12.0516 0.90275 11.6626 1.29175L10.3696 2.58475L13.3696 5.58475L14.6626 4.29175C15.0516 3.90275 15.0516 3.26575 14.6626 2.87675Z",fill:"#FD2CA8"}),e.createElement("path",{d:"M2.36714 10.5861L5.36694 13.5859L12.3655 6.58734L9.36574 3.58754L2.36714 10.5861Z",fill:"#FFE203"}),e.createElement("path",{d:"M1.0256 14.6098C0.9386 14.8718 1.0806 15.0068 1.3416 14.9218L3.3426 14.2548L1.6926 12.6088L1.0256 14.6098Z",fill:"#000000"}))};function l(i){var l=i.id,c=i.type,d=i.cmsUrl,u=i.token,s=i.children,m=i.color,h=i.absolute,f=void 0===h||h,v=t(!1),g=v[0],p=v[1],w=window.matchMedia("(max-width: 1024px)"),E=t(w.matches),L=E[0],y=E[1];n((function(){var e=function(e){y(e.matches)};return w.addEventListener("change",e),function(){return w.removeEventListener("change",e)}}));var x=function(e){return{position:f?"absolute":"relative",display:"flex",justifyContent:e?"center":"flex-end",height:"32p",width:"100%"}},C=function(e){return{display:"flex",transform:"scale(1.25)",borderRadius:"50%",cursor:"pointer",zIndex:10,backgroundColor:null!=m?m:"#808080",width:"3.5rem",height:"3.5rem",right:e?"":"0",marginRight:e?"":"5rem",marginTop:e?"":"2rem"}};return e.createElement(r.Root,null,e.createElement("div",{onClick:function(){return p(!0)},style:x(L)},e.createElement(r.Trigger,{asChild:!0},e.createElement("div",{style:C(L)},e.createElement(a,null)))),s,g&&e.createElement(r.Overlay,{style:{overflowY:"hidden"}},e.createElement(r.Content,{asChild:!0},e.createElement(o,{id:l,type:c,cmsUrl:d,token:u,hide:function(){return p(!1)},onSave:function(){return e=function(){return p(!1)},setTimeout((function(){return e()}),100),void setTimeout((function(){var e=new URL(window.location.toString());window.location.replace(e.toString())}),500);var e}}))))}export{l as default};
 //# sourceMappingURL=frontend-editing.production.esm.js.map

package.json

 {
   "name": "@burst/frontend-editing",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Package to allow front-end editing",
@@ -38,3 +38,3 @@ "author": "Mattijn Stolk [e-mail]",
   },
-  "gitHead": "bfb8b08c20cefd8907c9cff972d702723d9c12c9"
+  "gitHead": "47397af2572eac9f932523a2f4a4d0e638bcdac5"
 }

README.md

 # `@burst/frontend-editing`
 
 This package is used for editing content in the frontend. <br>
-This package assumes the preview mode module is already installed and working.
 
+!! This package assumes the preview mode module is already installed and working. <br>
+!! TODO: write documentation for this. 
+
 ## Installation
@@ -16,6 +18,9 @@ First you need to install the package, you do this by running the following command:
 
-```typescript
+```ts
 import { PreviewData } from '@misc/preview'
 import Editable from '@burst/frontend-editing'
+import { getCmsUrl } from '@misc/environments'
+import { previewModeEnabled } from '@misc/helpers'
 
+
 interface props {
@@ -41,2 +46,3 @@ paragraph: ParagraphsFragment
         color = '#000' //defaults to gray, overwrite it with this value. 
+        absolute = false
       >
@@ -48,5 +54,5 @@ {component()}
 ```
+<br>
 
-To send these props to the paragraphmapper you need to import the preview data in the [...slug].tsx
-
+#### To send these props to the paragraphmapper you need to import the preview data in the [...slug].tsx
 ```typescript
@@ -68,3 +74,3 @@ import { PreviewData } from '@misc/preview'
 
-function BasicPage ({ basicPage, preview }: Props): JSX.Element | null {
+function BasicPage ({ preview }: Props): JSX.Element | null {
     return (
@@ -101,7 +107,7 @@ <ProjectDetail>
 
-import Editable from "@components/frontendEditing/Editable";
-import {getCmsUrl} from "@misc/environments";
-import {PreviewData} from "@misc/preview";
-import {previewModeEnabled} from "@misc/helpers";
-
-
+the function previewdata is placed in preview.ts.
+```typescript
+export interface PreviewData {
+  token: string
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

30629

increased by1.62%

Lines of code

155

increased by1.31%

Number of lines in readme file

109

increased by5.83%

No dependency changes