@yoopta/ui 6.0.0-beta.10 → 6.0.0-beta.11

package/dist/floating-toolbar.js

@@ -1 +1 @@
-import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{createContext as a,useContext as i,forwardRef as e,useState as r,useMemo as n,useCallback as l,useEffect as s}from"react";import{d as p,u,i as g,f as c,s as d,o as b,c as f}from"./chunks/floating-ui.react-727e4287.js";import{useYooptaEditor as y}from"@yoopta/editor";import{t as m}from"./chunks/throttle-dea4a39e.js";import{s as h}from"./chunks/style-inject.es-e87a8d02.js";import{Portal as v}from"./portal.js";import"react-dom";const x=a(null),w=()=>{const o=i(x);if(!o)throw new Error("FloatingToolbar components must be used within <FloatingToolbar>");return o};h(":root{--yoopta-ui-background:0 0% 100%;--yoopta-ui-foreground:222.2 84% 4.9%;--yoopta-ui-border:214.3 31.8% 91.4%;--yoopta-ui-accent:210 40% 96.1%;--yoopta-ui-ring:222.2 84% 4.9%;--yoopta-ui-primary:221.2 83.2% 53.3%;--yoopta-ui-primary-foreground:210 40% 98%;--yoopta-ui-floating-toolbar-gap:4px;--yoopta-ui-floating-toolbar-padding:6px;--yoopta-ui-floating-toolbar-radius:0.5rem;--yoopta-ui-floating-toolbar-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--yoopta-ui-floating-toolbar-z-index:99;--yoopta-ui-floating-toolbar-group-gap:2px;--yoopta-ui-floating-toolbar-separator-height:24px;--yoopta-ui-floating-toolbar-separator-margin:4px;--yoopta-ui-floating-toolbar-button-min-width:32px;--yoopta-ui-floating-toolbar-button-min-height:32px;--yoopta-ui-floating-toolbar-button-padding-y:6px;--yoopta-ui-floating-toolbar-button-padding-x:8px;--yoopta-ui-floating-toolbar-button-font-size:0.875rem;--yoopta-ui-floating-toolbar-button-font-weight:500;--yoopta-ui-floating-toolbar-button-gap:4px;--yoopta-ui-floating-toolbar-button-radius:0.375rem;--yoopta-ui-floating-toolbar-icon-size:1rem;--yoopta-ui-floating-toolbar-ring-offset:2px}.dark,[data-theme=dark]{--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%}.yoopta-ui-floating-toolbar{align-items:center;background:hsl(var(--yoopta-ui-background));border:1px solid hsl(var(--yoopta-ui-border));border-radius:var(--yoopta-ui-floating-toolbar-radius,.5rem);box-shadow:var(--yoopta-ui-floating-toolbar-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));display:flex;gap:var(--yoopta-ui-floating-toolbar-gap,4px);padding:var(--yoopta-ui-floating-toolbar-padding,6px);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yoopta-ui-floating-toolbar-z-index,99)}.yoopta-ui-floating-toolbar-group{align-items:center;display:flex;gap:var(--yoopta-ui-floating-toolbar-group-gap,2px)}.yoopta-ui-floating-toolbar-separator{background:hsl(var(--yoopta-ui-border));height:var(--yoopta-ui-floating-toolbar-separator-height,24px);margin:0 var(--yoopta-ui-floating-toolbar-separator-margin,4px);width:1px}.yoopta-ui-floating-toolbar-button{align-items:center;background:transparent;border:none;border-radius:var(--yoopta-ui-floating-toolbar-button-radius,.375rem);color:hsl(var(--yoopta-ui-foreground));cursor:pointer;display:inline-flex;font-size:var(--yoopta-ui-floating-toolbar-button-font-size,.875rem);font-weight:var(--yoopta-ui-floating-toolbar-button-font-weight,500);gap:var(--yoopta-ui-floating-toolbar-button-gap,4px);justify-content:center;min-height:var(--yoopta-ui-floating-toolbar-button-min-height,32px);min-width:var(--yoopta-ui-floating-toolbar-button-min-width,32px);outline:none;padding:var(--yoopta-ui-floating-toolbar-button-padding-y,6px) var(--yoopta-ui-floating-toolbar-button-padding-x,8px);transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap}.yoopta-ui-floating-toolbar-button:hover:not(:disabled){background:hsl(var(--yoopta-ui-accent))}.yoopta-ui-floating-toolbar-button:focus-visible{outline:2px solid hsl(var(--yoopta-ui-ring));outline-offset:var(--yoopta-ui-floating-toolbar-ring-offset,2px)}.yoopta-ui-floating-toolbar-button[data-active=true]{background:hsl(var(--yoopta-ui-primary,221.2 83.2% 53.3%));color:hsl(var(--yoopta-ui-primary-foreground,210 40% 98%))}.yoopta-ui-floating-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.yoopta-ui-floating-toolbar-button svg{height:var(--yoopta-ui-floating-toolbar-icon-size,1rem);width:var(--yoopta-ui-floating-toolbar-icon-size,1rem)}");const k=({children:o,frozen:a=!1,className:i=""})=>{const e=y(),[p,h]=r(!1),{refs:v,floatingStyles:w,context:k}=u({placement:"top-start",open:p,middleware:[g(),c(),d(),b(10)]}),{isMounted:N,styles:j}=f(k,{duration:100}),O=n(()=>Object.assign(Object.assign({},w),j),[w,j]);console.log("FloatingToolbarRoot combinedStyles",O),console.log("FloatingToolbarRoot refs",v);const F=l(()=>{h(!1)},[]),R=l(()=>{h(!0)},[]),z=l(()=>{var o,t;if(a)return;const i=v.floating.current;if(console.log("FloatingToolbarRoot selectionChange toolbarEl",i),i&&i.contains(document.activeElement))return;const r=window.getSelection();if(!r||(null==r?void 0:r.isCollapsed)||(null==r?void 0:r.anchorOffset)===(null==r?void 0:r.focusOffset))return void(p&&F());const n=r.getRangeAt(0),l=n.getBoundingClientRect(),s=n.toString().trim(),u=null==n?void 0:n.commonAncestorContainer,g=!!(null===(o=null==u?void 0:u.closest)||void 0===o?void 0:o.call(u,"[data-custom-editor]"));if((null===(t=e.refElement)||void 0===t?void 0:t.contains(u))&&!g){if(n&&s.length>0){const o={getBoundingClientRect:()=>l,getClientRects:()=>n.getClientRects()};v.setReference(o),p||R()}}else p&&F()},[a,v,e.refElement,F,R,p]),C=l(()=>{var o;if(!Array.isArray(e.path.selected)||0===e.path.selected.length||"mousemove"!==e.path.source&&"keyboard"!==e.path.source)return void(p&&F());const t=Math.min(...e.path.selected),a=Math.max(...e.path.selected);let i=!0;"number"==typeof e.path.current&&(i=Math.abs(e.path.current-a)<=Math.abs(e.path.current-t));const r=e.getBlock({at:i?a:t});if(!r)return;const n=null===(o=e.refElement)||void 0===o?void 0:o.querySelector(`[data-yoopta-block-id="${r.id}"]`);n&&(v.setReference(n),p||R())},[e,v,F,R,p]),T=n(()=>m(z,200,{leading:!0,trailing:!0}),[z]);s(()=>{if(Array.isArray(e.path.selected)||e.path.selection){if(!Array.isArray(e.path.selected)||e.path.selection)return window.document.addEventListener("selectionchange",T),()=>window.document.removeEventListener("selectionchange",T);C()}else p&&F()},[e.path.selected,e.path.selection,p,T,F,C]);const S=n(()=>({isOpen:N,floatingStyles:O,setFloatingRef:v.setFloating}),[N,O,v.setFloating]),A="function"==typeof o?o({isOpen:N}):o;return t(x.Provider,Object.assign({value:S},{children:t("div",Object.assign({className:i},{children:A}))}))};k.displayName="FloatingToolbar";const N=e((a,i)=>{var{children:e,className:r=""}=a,n=o(a,["children","className"]);const{isOpen:l,floatingStyles:s,setFloatingRef:u}=w(),g=p([i,u]);return l?t(v,Object.assign({id:"yoopta-ui-floating-toolbar-portal"},{children:t("div",Object.assign({ref:g,className:`yoopta-ui-floating-toolbar ${r}`,style:s,onClick:o=>o.stopPropagation(),onMouseDown:o=>o.stopPropagation()},n,{children:e}))})):null});N.displayName="FloatingToolbar.Content";const j=e((a,i)=>{var{className:e="",children:r}=a,n=o(a,["className","children"]);return t("div",Object.assign({ref:i,className:`yoopta-ui-floating-toolbar-group ${e}`},n,{children:r}))});j.displayName="FloatingToolbar.Group";const O=e((a,i)=>{var{className:e=""}=a,r=o(a,["className"]);return t("div",Object.assign({ref:i,className:`yoopta-ui-floating-toolbar-separator ${e}`},r))});O.displayName="FloatingToolbar.Separator";const F=e((a,i)=>{var{className:e="",children:r,active:n,disabled:l,type:s="button"}=a,p=o(a,["className","children","active","disabled","type"]);return t("button",Object.assign({ref:i,type:s,disabled:l,"data-active":n,className:`yoopta-ui-floating-toolbar-button ${e}`},p,{children:r}))});F.displayName="FloatingToolbar.Button";const R=Object.assign(k,{Root:k,Content:N,Group:j,Separator:O,Button:F});export{R as FloatingToolbar,w as useFloatingToolbarContext};
+import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{createContext as a,useContext as i,forwardRef as e,useState as r,useMemo as n,useCallback as l,useEffect as s}from"react";import{d as p,u,i as g,f as c,s as d,o as b,c as f}from"./chunks/floating-ui.react-727e4287.js";import{useYooptaEditor as y}from"@yoopta/editor";import{t as m}from"./chunks/throttle-dea4a39e.js";import{s as h}from"./chunks/style-inject.es-e87a8d02.js";import{Portal as v}from"./portal.js";import"react-dom";const x=a(null),w=()=>{const o=i(x);if(!o)throw new Error("FloatingToolbar components must be used within <FloatingToolbar>");return o};h(":root{--yoopta-ui-background:0 0% 100%;--yoopta-ui-foreground:222.2 84% 4.9%;--yoopta-ui-border:214.3 31.8% 91.4%;--yoopta-ui-accent:210 40% 96.1%;--yoopta-ui-ring:222.2 84% 4.9%;--yoopta-ui-primary:221.2 83.2% 53.3%;--yoopta-ui-primary-foreground:210 40% 98%;--yoopta-ui-floating-toolbar-gap:4px;--yoopta-ui-floating-toolbar-padding:6px;--yoopta-ui-floating-toolbar-radius:0.5rem;--yoopta-ui-floating-toolbar-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--yoopta-ui-floating-toolbar-z-index:99;--yoopta-ui-floating-toolbar-group-gap:2px;--yoopta-ui-floating-toolbar-separator-height:24px;--yoopta-ui-floating-toolbar-separator-margin:4px;--yoopta-ui-floating-toolbar-button-min-width:32px;--yoopta-ui-floating-toolbar-button-min-height:32px;--yoopta-ui-floating-toolbar-button-padding-y:6px;--yoopta-ui-floating-toolbar-button-padding-x:8px;--yoopta-ui-floating-toolbar-button-font-size:0.875rem;--yoopta-ui-floating-toolbar-button-font-weight:500;--yoopta-ui-floating-toolbar-button-gap:4px;--yoopta-ui-floating-toolbar-button-radius:0.375rem;--yoopta-ui-floating-toolbar-icon-size:1rem;--yoopta-ui-floating-toolbar-ring-offset:2px}.dark,[data-theme=dark]{--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%}.yoopta-ui-floating-toolbar{align-items:center;background:hsl(var(--yoopta-ui-background));border:1px solid hsl(var(--yoopta-ui-border));border-radius:var(--yoopta-ui-floating-toolbar-radius,.5rem);box-shadow:var(--yoopta-ui-floating-toolbar-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));display:flex;gap:var(--yoopta-ui-floating-toolbar-gap,4px);padding:var(--yoopta-ui-floating-toolbar-padding,6px);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yoopta-ui-floating-toolbar-z-index,99)}.yoopta-ui-floating-toolbar-group{align-items:center;display:flex;gap:var(--yoopta-ui-floating-toolbar-group-gap,2px)}.yoopta-ui-floating-toolbar-separator{background:hsl(var(--yoopta-ui-border));height:var(--yoopta-ui-floating-toolbar-separator-height,24px);margin:0 var(--yoopta-ui-floating-toolbar-separator-margin,4px);width:1px}.yoopta-ui-floating-toolbar-button{align-items:center;background:transparent;border:none;border-radius:var(--yoopta-ui-floating-toolbar-button-radius,.375rem);color:hsl(var(--yoopta-ui-foreground));cursor:pointer;display:inline-flex;font-size:var(--yoopta-ui-floating-toolbar-button-font-size,.875rem);font-weight:var(--yoopta-ui-floating-toolbar-button-font-weight,500);gap:var(--yoopta-ui-floating-toolbar-button-gap,4px);justify-content:center;min-height:var(--yoopta-ui-floating-toolbar-button-min-height,32px);min-width:var(--yoopta-ui-floating-toolbar-button-min-width,32px);outline:none;padding:var(--yoopta-ui-floating-toolbar-button-padding-y,6px) var(--yoopta-ui-floating-toolbar-button-padding-x,8px);transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap}.yoopta-ui-floating-toolbar-button:hover:not(:disabled){background:hsl(var(--yoopta-ui-accent))}.yoopta-ui-floating-toolbar-button:focus-visible{outline:2px solid hsl(var(--yoopta-ui-ring));outline-offset:var(--yoopta-ui-floating-toolbar-ring-offset,2px)}.yoopta-ui-floating-toolbar-button[data-active=true]{background:hsl(var(--yoopta-ui-primary,221.2 83.2% 53.3%));color:hsl(var(--yoopta-ui-primary-foreground,210 40% 98%))}.yoopta-ui-floating-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.yoopta-ui-floating-toolbar-button svg{height:var(--yoopta-ui-floating-toolbar-icon-size,1rem);width:var(--yoopta-ui-floating-toolbar-icon-size,1rem)}");const k=({children:o,frozen:a=!1,className:i=""})=>{const e=y(),[p,h]=r(!1),{refs:v,floatingStyles:w,context:k}=u({placement:"top-start",open:p,middleware:[g(),c(),d(),b(10)]}),{styles:N}=f(k,{duration:100}),j=n(()=>Object.assign(Object.assign({},w),N),[w,N]);console.log("FloatingToolbarRoot combinedStyles",j),console.log("FloatingToolbarRoot refs",v);const O=l(()=>{h(!1)},[]),F=l(()=>{h(!0)},[]),z=l(()=>{var o,t;if(a)return;const i=v.floating.current;if(null==i?void 0:i.contains(document.activeElement))return;const r=window.getSelection();if(!r||(null==r?void 0:r.isCollapsed)||(null==r?void 0:r.anchorOffset)===(null==r?void 0:r.focusOffset))return void(p&&O());const n=r.getRangeAt(0),l=n.getBoundingClientRect(),s=n.toString().trim(),u=null==n?void 0:n.commonAncestorContainer,g=!!(null===(o=null==u?void 0:u.closest)||void 0===o?void 0:o.call(u,"[data-custom-editor]"));if((null===(t=e.refElement)||void 0===t?void 0:t.contains(u))&&!g){if(n&&s.length>0){const o={getBoundingClientRect:()=>l,getClientRects:()=>n.getClientRects()};v.setReference(o),p||F()}}else p&&O()},[a,v,e.refElement,O,F,p]),R=l(()=>{var o;if(!Array.isArray(e.path.selected)||0===e.path.selected.length||"mousemove"!==e.path.source&&"keyboard"!==e.path.source)return void(p&&O());const t=Math.min(...e.path.selected),a=Math.max(...e.path.selected);let i=!0;"number"==typeof e.path.current&&(i=Math.abs(e.path.current-a)<=Math.abs(e.path.current-t));const r=e.getBlock({at:i?a:t});if(!r)return;const n=null===(o=e.refElement)||void 0===o?void 0:o.querySelector(`[data-yoopta-block-id="${r.id}"]`);n&&(v.setReference(n),p||F())},[e,v,O,F,p]),C=n(()=>m(z,200,{leading:!0,trailing:!0}),[z]);s(()=>{if(Array.isArray(e.path.selected)||e.path.selection){if(!Array.isArray(e.path.selected)||e.path.selection)return window.document.addEventListener("selectionchange",C),()=>window.document.removeEventListener("selectionchange",C);R()}else p&&O()},[e.path.selected,e.path.selection,p,C,O,R]);const S=n(()=>({isOpen:p,floatingStyles:j,setFloatingRef:v.setFloating}),[p,j,v.setFloating]),T="function"==typeof o?o({isOpen:p}):o;return t(x.Provider,Object.assign({value:S},{children:t("div",Object.assign({className:i},{children:T}))}))};k.displayName="FloatingToolbar";const N=e((a,i)=>{var{children:e,className:r=""}=a,n=o(a,["children","className"]);const{isOpen:l,floatingStyles:s,setFloatingRef:u}=w(),g=p([i,u]);return l?t(v,Object.assign({id:"yoopta-ui-floating-toolbar-portal"},{children:t("div",Object.assign({ref:g,className:`yoopta-ui-floating-toolbar ${r}`,style:s,onClick:o=>o.stopPropagation(),onMouseDown:o=>o.stopPropagation()},n,{children:e}))})):null});N.displayName="FloatingToolbar.Content";const j=e((a,i)=>{var{className:e="",children:r}=a,n=o(a,["className","children"]);return t("div",Object.assign({ref:i,className:`yoopta-ui-floating-toolbar-group ${e}`},n,{children:r}))});j.displayName="FloatingToolbar.Group";const O=e((a,i)=>{var{className:e=""}=a,r=o(a,["className"]);return t("div",Object.assign({ref:i,className:`yoopta-ui-floating-toolbar-separator ${e}`},r))});O.displayName="FloatingToolbar.Separator";const F=e((a,i)=>{var{className:e="",children:r,active:n,disabled:l,type:s="button"}=a,p=o(a,["className","children","active","disabled","type"]);return t("button",Object.assign({ref:i,type:s,disabled:l,"data-active":n,className:`yoopta-ui-floating-toolbar-button ${e}`},p,{children:r}))});F.displayName="FloatingToolbar.Button";const z=Object.assign(k,{Root:k,Content:N,Group:j,Separator:O,Button:F});export{z as FloatingToolbar,w as useFloatingToolbarContext};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/ui",
-  "version": "6.0.0-beta.10",
+  "version": "6.0.0-beta.11",
   "description": "UI components for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
@@ -138,5 +138,5 @@
   "bugs": {
     "url": "https://github.com/Darginec05/Yoopta-Editor/issues"
   },
-  "gitHead": "cab1b9a3d5f104c46da98df464f1806d968b12fd"
+  "gitHead": "328b04fa6481a487b434708338f56057792aafa4"
 }