@yoopta/ui 6.0.0-beta.6 → 6.0.0-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/action-menu-list/utils.d.ts +1 -1
- package/dist/action-menu-list/utils.d.ts.map +1 -1
- package/dist/chunks/highlight-color-picker-ea799f50.js +1 -0
- package/dist/chunks/hooks-ad9169d0.js +1 -0
- package/dist/chunks/index-e0185864.js +1 -0
- package/dist/element-options/components/element-options-color-picker.d.ts +6 -0
- package/dist/element-options/components/element-options-color-picker.d.ts.map +1 -0
- package/dist/element-options/components/element-options-content.d.ts +6 -0
- package/dist/element-options/components/element-options-content.d.ts.map +1 -0
- package/dist/element-options/components/element-options-group.d.ts +6 -0
- package/dist/element-options/components/element-options-group.d.ts.map +1 -0
- package/dist/element-options/components/element-options-input.d.ts +6 -0
- package/dist/element-options/components/element-options-input.d.ts.map +1 -0
- package/dist/element-options/components/element-options-label.d.ts +6 -0
- package/dist/element-options/components/element-options-label.d.ts.map +1 -0
- package/dist/element-options/components/element-options-root.d.ts +6 -0
- package/dist/element-options/components/element-options-root.d.ts.map +1 -0
- package/dist/element-options/components/element-options-select.d.ts +6 -0
- package/dist/element-options/components/element-options-select.d.ts.map +1 -0
- package/dist/element-options/components/element-options-separator.d.ts +6 -0
- package/dist/element-options/components/element-options-separator.d.ts.map +1 -0
- package/dist/element-options/components/element-options-slider.d.ts +6 -0
- package/dist/element-options/components/element-options-slider.d.ts.map +1 -0
- package/dist/element-options/components/element-options-toggle.d.ts +6 -0
- package/dist/element-options/components/element-options-toggle.d.ts.map +1 -0
- package/dist/element-options/components/element-options-trigger.d.ts +6 -0
- package/dist/element-options/components/element-options-trigger.d.ts.map +1 -0
- package/dist/element-options/context/element-options-context.d.ts +13 -0
- package/dist/element-options/context/element-options-context.d.ts.map +1 -0
- package/dist/element-options/index.d.ts +64 -0
- package/dist/element-options/index.d.ts.map +1 -0
- package/dist/element-options/types.d.ts +107 -0
- package/dist/element-options/types.d.ts.map +1 -0
- package/dist/element-options.js +14 -0
- package/dist/highlight-color-picker.js +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/selection-box/SelectionBox.d.ts +19 -0
- package/dist/selection-box/SelectionBox.d.ts.map +1 -0
- package/dist/selection-box/hooks.d.ts +7 -0
- package/dist/selection-box/hooks.d.ts.map +1 -0
- package/dist/selection-box/index.d.ts +4 -0
- package/dist/selection-box/index.d.ts.map +1 -0
- package/dist/selection-box.js +1 -0
- package/dist/toolbar.js +1 -1
- package/package.json +16 -4
- package/dist/chunks/highlight-color-picker-534fa3e2.js +0 -1
- package/dist/chunks/hooks-879d4b4f.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { YooEditor } from '@yoopta/editor';
|
|
1
|
+
import type { Plugin, SlateElement, YooEditor } from '@yoopta/editor';
|
|
2
2
|
import type { ActionMenuItem } from './types';
|
|
3
3
|
export declare const filterActionMenuItems: (blockPlugin: Plugin<Record<string, SlateElement>, unknown>, searchText: string) => boolean;
|
|
4
4
|
export declare function mapActionMenuItems(editor: YooEditor): ActionMenuItem[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/action-menu-list/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/action-menu-list/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAgC,MAAM,gBAAgB,CAAC;AAEpG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAsB9C,eAAO,MAAM,qBAAqB,gBACnB,OAAO,OAAO,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,CAAC,cAC9C,MAAM,KACjB,OAuBF,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,GAAG,cAAc,EAAE,CAkCtE;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,WAOlE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAS5D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as o,Fragment as e,jsx as t}from"react/jsx-runtime";import{forwardRef as r,useState as a,useEffect as c,cloneElement as l}from"react";import{u as n,o as i,f as s,s as g,a as h}from"./floating-ui.react-33212df0.js";import{Z as p,O as d}from"./index-e0185864.js";const u=["#FFFF00","#FFE066","#FFCC99","#FF9999","#99CCFF","#99FF99","#FF99FF","#CC99FF"],m=r(({value:r={backgroundColor:"#FFFF00"},onChange:m,presets:b=u,showInput:k=!0,className:C,children:F,placement:f="bottom",offset:y=8},_)=>{const[v,j]=a(!1),[N,O]=a("backgroundColor"),[w,x]=a(r.backgroundColor),[E,L]=a(r.color),{refs:P,floatingStyles:B}=n({open:v,onOpenChange:j,placement:f,middleware:[i(y),s(),g()],whileElementsMounted:h});c(()=>{r.backgroundColor&&x(r.backgroundColor),r.color&&L(r.color)},[r]),c(()=>{if(!v)return;const o=o=>{const e=o.target,t=P.reference.current,r=P.floating.current;t&&t instanceof Element&&t.contains(e)||(null==r?void 0:r.contains(e))||j(!1)};return document.addEventListener("mousedown",o),()=>document.removeEventListener("mousedown",o)},[v,P.floating,P.reference]);const H=o=>{"backgroundColor"===N?(x(o),null==m||m(Object.assign(Object.assign({},r),{backgroundColor:o}))):(L(o),null==m||m(Object.assign(Object.assign({},r),{color:o})))},M="backgroundColor"===N?w:E,S=l(F,{ref:P.setReference,onClick:o=>{var e,t;o.stopPropagation(),j(o=>!o),null===(t=(e=F.props).onClick)||void 0===t||t.call(e,o)}});return o(e,{children:[S,v&&o("div",Object.assign({ref:o=>{P.setFloating(o),_&&("function"==typeof _?_(o):_.current=o)},style:B,className:`yoopta-highlight-color-picker ${null!=C?C:""}`,onClick:o=>o.stopPropagation(),onMouseDown:o=>o.stopPropagation()},{children:[o("div",Object.assign({className:"yoopta-highlight-color-picker__mode-toggle"},{children:[t("button",Object.assign({type:"button",className:"yoopta-highlight-color-picker__mode-btn","data-active":"backgroundColor"===N,onClick:()=>O("backgroundColor"),"aria-label":"Background color"},{children:"Background"})),t("button",Object.assign({type:"button",className:"yoopta-highlight-color-picker__mode-btn","data-active":"color"===N,onClick:()=>O("color"),"aria-label":"Text color"},{children:"Text"}))]})),t("div",Object.assign({className:"yoopta-highlight-color-picker__picker"},{children:t(p,{color:M,onChange:H,className:"yoopta-highlight-color-picker__react-colorful"})})),b.length>0&&t("div",Object.assign({className:"yoopta-highlight-color-picker__presets"},{children:b.map(o=>{const e=(null==M?void 0:M.toLowerCase())===o.toLowerCase();return t("button",{type:"button",className:"yoopta-highlight-color-picker__preset","data-selected":e,style:{backgroundColor:o},onClick:()=>H(o),"aria-label":`Select color ${o}`},o)})})),k&&o("div",Object.assign({className:"yoopta-highlight-color-picker__hex-row"},{children:[t("div",{className:"yoopta-highlight-color-picker__swatch",style:{backgroundColor:M}}),t(d,{color:M,onChange:H,className:"yoopta-highlight-color-picker__hex-input",prefixed:!0})]}))]}))]})});m.displayName="HighlightColorPicker";export{m as H};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as e}from"./_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{forwardRef as o,useCallback as a,useMemo as s,useEffect as n}from"react";import{Portal as r}from"../portal.js";import{u as i,i as l,f as c,s as d,o as p,a as u,b as m}from"./floating-ui.react-33212df0.js";import{useYooptaEditor as f}from"@yoopta/editor";import{c as g}from"./index-06d5c4e7.js";import{t as h}from"./throttle-dea4a39e.js";const v=o((o,a)=>{var{className:s,children:n}=o,i=e(o,["className","children"]);return t(r,Object.assign({id:"yoopta-ui-toolbar-portal"},{children:t("div",Object.assign({ref:a,className:`yoopta-ui-toolbar ${s||""}`,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation()},i,{children:n}))}))});v.displayName="Toolbar.Root";const b=o((o,a)=>{var{className:s,children:n}=o,r=e(o,["className","children"]);return t("div",Object.assign({ref:a,className:`yoopta-ui-toolbar-group ${s}`},r,{children:n}))});b.displayName="Toolbar.Group";const y=o((o,a)=>{var{className:s}=o,n=e(o,["className"]);return t("div",Object.assign({ref:a,className:`yoopta-ui-toolbar-separator ${s}`},n))});y.displayName="Toolbar.Separator";const N=o((o,a)=>{var{className:s,children:n,active:r,disabled:i,type:l="button"}=o,c=e(o,["className","children","active","disabled","type"]);return t("button",Object.assign({ref:a,type:l,disabled:i,"data-active":r,className:`yoopta-ui-toolbar-button ${s}`},c,{children:n}))});N.displayName="Toolbar.Button";const j={Root:v,Group:b,Separator:y,Button:N},w=g()(e=>({state:"closed",frozen:!1,open(){e({state:"open"})},close(){e({state:"closed",frozen:!1})},toggle(t){e({state:t})},setFrozen(t){e({frozen:t})},reset(){e({state:"closed",frozen:!1})}})),O=()=>{const e=f(),{state:t,frozen:o,open:r,close:g,setFrozen:v,toggle:b,reset:y}=w(),{refs:N,floatingStyles:j,context:O}=i({placement:"top-start",open:"open"===t,middleware:[l(),c(),d(),p(10)],whileElementsMounted:u}),{isMounted:R,styles:z}=m(O,{duration:100}),A=a(()=>{var a,s;if(o)return;const n=N.floating.current;if(n&&n.contains(document.activeElement))return;const i=window.getSelection();if(!i||(null==i?void 0:i.isCollapsed)||(null==i?void 0:i.anchorOffset)===(null==i?void 0:i.focusOffset))return void("open"===t&&g());const l=i.getRangeAt(0),c=l.getBoundingClientRect(),d=l.toString().trim(),p=null==l?void 0:l.commonAncestorContainer,u=!!(null===(a=null==p?void 0:p.closest)||void 0===a?void 0:a.call(p,"[data-custom-editor]"));if((null===(s=e.refElement)||void 0===s?void 0:s.contains(p))&&!u){if(l&&d.length>0){const e={getBoundingClientRect:()=>c,getClientRects:()=>l.getClientRects()};N.setReference(e),"open"!==t&&r()}}else"open"===t&&g()},[o,N,e.refElement,g,r,t]),C=a(()=>{var o;if(!Array.isArray(e.path.selected)||0===e.path.selected.length||"mousemove"!==e.path.source&&"keyboard"!==e.path.source)return void("open"===t&&g());const a=Math.min(...e.path.selected),s=Math.max(...e.path.selected);let n=!0;"number"==typeof e.path.current&&(n=Math.abs(e.path.current-s)<=Math.abs(e.path.current-a));const i=e.getBlock({at:n?s:a});if(!i)return;const l=null===(o=e.refElement)||void 0===o?void 0:o.querySelector(`[data-yoopta-block-id="${i.id}"]`);l&&(N.setReference(l),"open"!==t&&r())},[e,N,g,r,t]),M=s(()=>h(A,200,{leading:!0,trailing:!0}),[A]);n(()=>{if(Array.isArray(e.path.selected)||e.path.selection){if(!Array.isArray(e.path.selected)||e.path.selection)return window.document.addEventListener("selectionchange",M),()=>window.document.removeEventListener("selectionchange",M);C()}else"open"===t&&g()},[e.path.selected,e.path.selection,t,M,g,C]);const E=s(()=>Object.assign(Object.assign({},j),z),[j,z]);return{isOpen:R,state:t,frozen:o,open:r,close:g,toggle:b,setFrozen:v,reset:y,getRootProps:()=>({ref:N.setFloating,style:E,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation()})}};export{j as T,w as a,O as u};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{useRef as r,useMemo as t,useEffect as n,useCallback as o,useState as a,useLayoutEffect as u}from"react";function c(){return(c=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function l(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=r(e),n=r(function(e){t.current&&t.current(e)});return t.current=e,n.current}var f=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},s=function(e){return"touches"in e},v=function(e){return e&&e.ownerDocument.defaultView||self},h=function(e,r,t){var n=e.getBoundingClientRect(),o=s(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:f((o.pageX-(n.left+v(e).pageXOffset))/n.width),top:f((o.pageY-(n.top+v(e).pageYOffset))/n.height)}},d=function(e){!s(e)&&e.preventDefault()},p=e.memo(function(o){var a=o.onMove,u=o.onKey,f=l(o,["onMove","onKey"]),p=r(null),g=i(a),m=i(u),_=r(null),b=r(!1),x=t(function(){var e=function(e){d(e),(s(e)?e.touches.length>0:e.buttons>0)&&p.current?g(h(p.current,e,_.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=b.current,o=v(p.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=p.current;if(n&&(d(r),!function(e,r){return r&&!s(e)}(r,b.current)&&n)){if(s(r)){b.current=!0;var o=r.changedTouches||[];o.length&&(_.current=o[0].identifier)}n.focus(),g(h(n,r,_.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),m({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[m,g]),w=x[0],C=x[1],E=x[2];return n(function(){return E},[E]),e.createElement("div",c({},f,{onTouchStart:w,onMouseDown:w,className:"react-colorful__interactive",ref:p,onKeyDown:C,tabIndex:0,role:"slider"}))}),g=function(e){return e.filter(Boolean).join(" ")},m=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,u=g(["react-colorful__pointer",r.className]);return e.createElement("div",{className:u,style:{top:100*a+"%",left:100*n+"%"}},e.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},_=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},b=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?_(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?_(parseInt(e.substring(6,8),16)/255,2):1}},x=function(e){var r=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:_(e.h),s:_(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:_(o/2),a:_(n,2)}}(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},w=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),u=n*(1-t),c=n*(1-(r-a)*t),l=n*(1-(1-r+a)*t),i=a%6;return{r:_(255*[n,c,u,u,l,n][i]),g:_(255*[l,n,n,c,u,u][i]),b:_(255*[u,u,l,n,n,c][i]),a:_(o,2)}},C=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},E=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=o<1?C(_(255*o)):"";return"#"+C(r)+C(t)+C(n)+a},y=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),u=a-Math.min(r,t,n),c=u?a===r?(t-n)/u:a===t?2+(n-r)/u:4+(r-t)/u:0;return{h:_(60*(c<0?c+6:c)),s:_(a?u/a*100:0),v:_(a/255*100),a:o}},M=e.memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return e.createElement("div",{className:o},e.createElement(p,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:f(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":_(t),"aria-valuemax":"360","aria-valuemin":"0"},e.createElement(m,{className:"react-colorful__hue-pointer",left:t/360,color:x({h:t,s:100,v:100,a:1})})))}),k=e.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:x({h:t.h,s:100,v:100,a:1})};return e.createElement("div",{className:"react-colorful__saturation",style:o},e.createElement(p,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:f(t.s+100*e.left,0,100),v:f(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+_(t.s)+"%, Brightness "+_(t.v)+"%"},e.createElement(m,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:x(t)})))}),N=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0};function H(e,t,u){var c=i(u),l=a(function(){return e.toHsva(t)}),f=l[0],s=l[1],v=r({color:t,hsva:f});n(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},s(r)}},[t,e]),n(function(){var r;N(f,v.current.hsva)||e.equal(r=e.fromHsva(f),v.current.color)||(v.current={hsva:f,color:r},c(r))},[f,e,c]);var h=o(function(e){s(function(r){return Object.assign({},r,e)})},[]);return[f,h]}var I="undefined"!=typeof window?u:n,O=new Map,z=function(e){I(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!O.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',O.set(r,t);var n="undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0;n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},B=function(t){var n=t.className,o=t.colorModel,a=t.color,u=void 0===a?o.defaultColor:a,i=t.onChange,f=l(t,["className","colorModel","color","onChange"]),s=r(null);z(s);var v=H(o,u,i),h=v[0],d=v[1],p=g(["react-colorful",n]);return e.createElement("div",c({},f,{ref:s,className:p}),e.createElement(k,{hsva:h,onChange:d}),e.createElement(M,{hue:h.h,onChange:d,className:"react-colorful__last-control"}))},D={defaultColor:"000",toHsva:function(e){return y(b(e))},fromHsva:function(e){return function(e){return E(w(e))}({h:e.h,s:e.s,v:e.v,a:1})},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||N(b(e),b(r))}},j=function(r){return e.createElement(B,c({},r,{colorModel:D}))},K=/^#?([0-9A-F]{3,8})$/i,L=function(r){var t=r.color,u=void 0===t?"":t,f=r.onChange,s=r.onBlur,v=r.escape,h=r.validate,d=r.format,p=r.process,g=l(r,["color","onChange","onBlur","escape","validate","format","process"]),m=a(function(){return v(u)}),_=m[0],b=m[1],x=i(f),w=i(s),C=o(function(e){var r=v(e.target.value);b(r),h(r)&&x(p?p(r):r)},[v,p,h,x]),E=o(function(e){h(e.target.value)||b(v(u)),w(e)},[u,v,h,w]);return n(function(){b(v(u))},[u,v]),e.createElement("input",c({},g,{value:d?d(_):_,spellCheck:"false",onChange:C,onBlur:E}))},q=function(e){return"#"+e},A=function(r){var t=r.prefixed,n=r.alpha,a=l(r,["prefixed","alpha"]),u=o(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,n?8:6)},[n]),i=o(function(e){return function(e,r){var t=K.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(L,c({},a,{escape:u,format:t?q:void 0,process:q,validate:i}))};export{A as O,j as Z};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsColorPickerProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsColorPicker: {
|
|
3
|
+
({ value, onChange, presetColors, className, style, }: ElementOptionsColorPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-color-picker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-color-picker.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-color-picker.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,UAAU,CAAC;AAa/D,eAAO,MAAM,yBAAyB;2DAMnC,8BAA8B;;CAkHhC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsContentProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsContent: {
|
|
3
|
+
({ children, className, style, side, align, sideOffset, alignOffset, }: ElementOptionsContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-content.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-content.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-content.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,eAAO,MAAM,qBAAqB;4EAQ/B,0BAA0B;;CAmF5B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsGroupProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsGroup: {
|
|
3
|
+
({ children, className, style, }: ElementOptionsGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-group.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzD,eAAO,MAAM,mBAAmB;sCAI7B,wBAAwB;;CAI1B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsInputProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsInput: {
|
|
3
|
+
({ value, onChange, placeholder, type, className, style, }: ElementOptionsInputProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-input.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzD,eAAO,MAAM,mBAAmB;gEAO7B,wBAAwB;;CAqB1B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsLabelProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsLabel: {
|
|
3
|
+
({ children, className, style, }: ElementOptionsLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-label.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-label.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEzD,eAAO,MAAM,mBAAmB;sCAI7B,wBAAwB;;CAI1B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsRootProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsRoot: {
|
|
3
|
+
({ blockId, element, children, anchorRef, className, style, }: ElementOptionsRootProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-root.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-root.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-root.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,kBAAkB;mEAO5B,uBAAuB;;CA+BzB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsSelectProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsSelect: {
|
|
3
|
+
<T extends string = string>({ value, options, onValueChange, placeholder, className, style, renderOption, renderValue, }: ElementOptionsSelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-select.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-select.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,yBAAyB,EAAgB,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,oBAAoB;;;CA0JhC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsSeparatorProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsSeparator: {
|
|
3
|
+
({ className, style, }: ElementOptionsSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-separator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-separator.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AAE7D,eAAO,MAAM,uBAAuB;4BAGjC,4BAA4B;;CAQ9B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsSliderProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsSlider: {
|
|
3
|
+
({ value, onValueChange, min, max, step, className, style, }: ElementOptionsSliderProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-slider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-slider.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAE1D,eAAO,MAAM,oBAAoB;kEAQ9B,yBAAyB;;CAkC3B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsToggleProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsToggle: {
|
|
3
|
+
({ checked, onCheckedChange, label, className, style, }: ElementOptionsToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-toggle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-toggle.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAE1D,eAAO,MAAM,oBAAoB;6DAM9B,yBAAyB;;CAkC3B,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ElementOptionsTriggerProps } from '../types';
|
|
2
|
+
export declare const ElementOptionsTrigger: {
|
|
3
|
+
({ children, className, style, side, align, sideOffset, alignOffset, }: ElementOptionsTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
displayName: string;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=element-options-trigger.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-trigger.d.ts","sourceRoot":"","sources":["../../../src/element-options/components/element-options-trigger.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,eAAO,MAAM,qBAAqB;4EAQ/B,0BAA0B;;CAkE5B,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ElementOptionsContextValue } from '../types';
|
|
3
|
+
export declare const ElementOptionsContext: import("react").Context<ElementOptionsContextValue | null>;
|
|
4
|
+
export declare function useElementOptionsContext(): ElementOptionsContextValue;
|
|
5
|
+
export declare function useElementOptions(): {
|
|
6
|
+
blockId: string;
|
|
7
|
+
element: import("@yoopta/editor").SlateElement<string, any>;
|
|
8
|
+
editor: import("@yoopta/editor").BaseYooEditor;
|
|
9
|
+
isOpen: boolean;
|
|
10
|
+
setIsOpen: (open: boolean) => void;
|
|
11
|
+
};
|
|
12
|
+
export declare function useUpdateElementProps<T extends Record<string, unknown>>(): (props: Partial<T>) => void;
|
|
13
|
+
//# sourceMappingURL=element-options-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"element-options-context.d.ts","sourceRoot":"","sources":["../../../src/element-options/context/element-options-context.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,eAAO,MAAM,qBAAqB,4DAAyD,CAAC;AAG5F,wBAAgB,wBAAwB,IAAI,0BAA0B,CAQrE;AAED,wBAAgB,iBAAiB;;;;;;EAGhC;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,aAGtD,QAAQ,CAAC,CAAC,UAO1B"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import './element-options.css';
|
|
2
|
+
export type { Side, Align, ElementOptionsContextValue, ElementOptionsRootProps, ElementOptionsTriggerProps, ElementOptionsContentProps, ElementOptionsGroupProps, ElementOptionsLabelProps, ElementOptionsSeparatorProps, ElementOptionsSelectProps, ElementOptionsColorPickerProps, ElementOptionsToggleProps, ElementOptionsSliderProps, ElementOptionsInputProps, SelectOption, } from './types';
|
|
3
|
+
export { ElementOptionsContext, useElementOptionsContext, useElementOptions, useUpdateElementProps, } from './context/element-options-context';
|
|
4
|
+
export { ElementOptionsRoot } from './components/element-options-root';
|
|
5
|
+
export { ElementOptionsTrigger } from './components/element-options-trigger';
|
|
6
|
+
export { ElementOptionsContent } from './components/element-options-content';
|
|
7
|
+
export { ElementOptionsGroup } from './components/element-options-group';
|
|
8
|
+
export { ElementOptionsLabel } from './components/element-options-label';
|
|
9
|
+
export { ElementOptionsSeparator } from './components/element-options-separator';
|
|
10
|
+
export { ElementOptionsSelect } from './components/element-options-select';
|
|
11
|
+
export { ElementOptionsColorPicker } from './components/element-options-color-picker';
|
|
12
|
+
export { ElementOptionsToggle } from './components/element-options-toggle';
|
|
13
|
+
export { ElementOptionsSlider } from './components/element-options-slider';
|
|
14
|
+
export { ElementOptionsInput } from './components/element-options-input';
|
|
15
|
+
export declare const ElementOptions: {
|
|
16
|
+
({ blockId, element, children, anchorRef, className, style, }: import("./types").ElementOptionsRootProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
} & {
|
|
19
|
+
Root: {
|
|
20
|
+
({ blockId, element, children, anchorRef, className, style, }: import("./types").ElementOptionsRootProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
displayName: string;
|
|
22
|
+
};
|
|
23
|
+
Trigger: {
|
|
24
|
+
({ children, className, style, side, align, sideOffset, alignOffset, }: import("./types").ElementOptionsTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
|
27
|
+
Content: {
|
|
28
|
+
({ children, className, style, side, align, sideOffset, alignOffset, }: import("./types").ElementOptionsContentProps): import("react/jsx-runtime").JSX.Element | null;
|
|
29
|
+
displayName: string;
|
|
30
|
+
};
|
|
31
|
+
Group: {
|
|
32
|
+
({ children, className, style, }: import("./types").ElementOptionsGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
displayName: string;
|
|
34
|
+
};
|
|
35
|
+
Label: {
|
|
36
|
+
({ children, className, style, }: import("./types").ElementOptionsLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
displayName: string;
|
|
38
|
+
};
|
|
39
|
+
Separator: {
|
|
40
|
+
({ className, style, }: import("./types").ElementOptionsSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
displayName: string;
|
|
42
|
+
};
|
|
43
|
+
Select: {
|
|
44
|
+
<T extends string = string>({ value, options, onValueChange, placeholder, className, style, renderOption, renderValue, }: import("./types").ElementOptionsSelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
displayName: string;
|
|
46
|
+
};
|
|
47
|
+
ColorPicker: {
|
|
48
|
+
({ value, onChange, presetColors, className, style, }: import("./types").ElementOptionsColorPickerProps): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
displayName: string;
|
|
50
|
+
};
|
|
51
|
+
Toggle: {
|
|
52
|
+
({ checked, onCheckedChange, label, className, style, }: import("./types").ElementOptionsToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
displayName: string;
|
|
54
|
+
};
|
|
55
|
+
Slider: {
|
|
56
|
+
({ value, onValueChange, min, max, step, className, style, }: import("./types").ElementOptionsSliderProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
displayName: string;
|
|
58
|
+
};
|
|
59
|
+
Input: {
|
|
60
|
+
({ value, onChange, placeholder, type, className, style, }: import("./types").ElementOptionsInputProps): import("react/jsx-runtime").JSX.Element;
|
|
61
|
+
displayName: string;
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/element-options/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAe/B,YAAY,EACV,IAAI,EACJ,KAAK,EACL,0BAA0B,EAC1B,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,8BAA8B,EAC9B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EACxB,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAGzE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYzB,CAAC"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode, RefObject } from 'react';
|
|
2
|
+
import type { SlateElement, YooEditor } from '@yoopta/editor';
|
|
3
|
+
export type Side = 'top' | 'right' | 'bottom' | 'left';
|
|
4
|
+
export type Align = 'start' | 'center' | 'end';
|
|
5
|
+
export type ElementOptionsContextValue = {
|
|
6
|
+
blockId: string;
|
|
7
|
+
element: SlateElement;
|
|
8
|
+
editor: YooEditor;
|
|
9
|
+
isOpen: boolean;
|
|
10
|
+
setIsOpen: (open: boolean) => void;
|
|
11
|
+
triggerRef: RefObject<HTMLButtonElement | null>;
|
|
12
|
+
contentRef: RefObject<HTMLDivElement | null>;
|
|
13
|
+
anchorRef: RefObject<HTMLElement | null> | null;
|
|
14
|
+
};
|
|
15
|
+
export type ElementOptionsRootProps = {
|
|
16
|
+
blockId: string;
|
|
17
|
+
element: SlateElement;
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
/** Ref to the element that Trigger should position relative to */
|
|
20
|
+
anchorRef?: RefObject<HTMLElement | null>;
|
|
21
|
+
className?: string;
|
|
22
|
+
style?: CSSProperties;
|
|
23
|
+
};
|
|
24
|
+
export type ElementOptionsTriggerProps = {
|
|
25
|
+
children?: ReactNode;
|
|
26
|
+
className?: string;
|
|
27
|
+
style?: CSSProperties;
|
|
28
|
+
/** Which side of the anchor to position the trigger */
|
|
29
|
+
side?: Side;
|
|
30
|
+
/** Alignment along the side */
|
|
31
|
+
align?: Align;
|
|
32
|
+
/** Offset from the side in pixels */
|
|
33
|
+
sideOffset?: number;
|
|
34
|
+
/** Offset along the alignment axis in pixels */
|
|
35
|
+
alignOffset?: number;
|
|
36
|
+
};
|
|
37
|
+
export type ElementOptionsContentProps = {
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
className?: string;
|
|
40
|
+
style?: CSSProperties;
|
|
41
|
+
side?: Side;
|
|
42
|
+
align?: Align;
|
|
43
|
+
sideOffset?: number;
|
|
44
|
+
alignOffset?: number;
|
|
45
|
+
};
|
|
46
|
+
export type ElementOptionsGroupProps = {
|
|
47
|
+
children: ReactNode;
|
|
48
|
+
className?: string;
|
|
49
|
+
style?: CSSProperties;
|
|
50
|
+
};
|
|
51
|
+
export type ElementOptionsLabelProps = {
|
|
52
|
+
children: ReactNode;
|
|
53
|
+
className?: string;
|
|
54
|
+
style?: CSSProperties;
|
|
55
|
+
};
|
|
56
|
+
export type ElementOptionsSeparatorProps = {
|
|
57
|
+
className?: string;
|
|
58
|
+
style?: CSSProperties;
|
|
59
|
+
};
|
|
60
|
+
export type SelectOption<T = string> = {
|
|
61
|
+
value: T;
|
|
62
|
+
label: string;
|
|
63
|
+
icon?: ReactNode;
|
|
64
|
+
color?: string;
|
|
65
|
+
};
|
|
66
|
+
export type ElementOptionsSelectProps<T = string> = {
|
|
67
|
+
value: T;
|
|
68
|
+
options: SelectOption<T>[];
|
|
69
|
+
onValueChange: (value: T) => void;
|
|
70
|
+
placeholder?: string;
|
|
71
|
+
className?: string;
|
|
72
|
+
style?: CSSProperties;
|
|
73
|
+
renderOption?: (option: SelectOption<T>) => ReactNode;
|
|
74
|
+
renderValue?: (option: SelectOption<T> | undefined) => ReactNode;
|
|
75
|
+
};
|
|
76
|
+
export type ElementOptionsColorPickerProps = {
|
|
77
|
+
value: string;
|
|
78
|
+
onChange: (color: string) => void;
|
|
79
|
+
presetColors?: string[];
|
|
80
|
+
className?: string;
|
|
81
|
+
style?: CSSProperties;
|
|
82
|
+
};
|
|
83
|
+
export type ElementOptionsToggleProps = {
|
|
84
|
+
checked: boolean;
|
|
85
|
+
onCheckedChange: (checked: boolean) => void;
|
|
86
|
+
label?: string;
|
|
87
|
+
className?: string;
|
|
88
|
+
style?: CSSProperties;
|
|
89
|
+
};
|
|
90
|
+
export type ElementOptionsSliderProps = {
|
|
91
|
+
value: number;
|
|
92
|
+
onValueChange: (value: number) => void;
|
|
93
|
+
min?: number;
|
|
94
|
+
max?: number;
|
|
95
|
+
step?: number;
|
|
96
|
+
className?: string;
|
|
97
|
+
style?: CSSProperties;
|
|
98
|
+
};
|
|
99
|
+
export type ElementOptionsInputProps = {
|
|
100
|
+
value: string;
|
|
101
|
+
onChange: (value: string) => void;
|
|
102
|
+
placeholder?: string;
|
|
103
|
+
type?: 'text' | 'number' | 'url';
|
|
104
|
+
className?: string;
|
|
105
|
+
style?: CSSProperties;
|
|
106
|
+
};
|
|
107
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/element-options/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG9D,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAG/C,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAChD,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACjD,CAAC;AAGF,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAGF,MAAM,MAAM,YAAY,CAAC,CAAC,GAAG,MAAM,IAAI;IACrC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,MAAM,IAAI;IAClD,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,SAAS,CAAC;CAClE,CAAC;AAGF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAGF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAGF,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAGF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import{s as e}from"./chunks/style-inject.es-e87a8d02.js";import{jsxs as t,Fragment as o,jsx as n}from"react/jsx-runtime";import{useState as a,useRef as r,useEffect as s,createContext as l,useContext as i,useMemo as d,forwardRef as c,createElement as p}from"react";import{u as m,o as u,f as g,s as b,a as f}from"./chunks/floating-ui.react-33212df0.js";import{Z as h}from"./chunks/index-e0185864.js";import{Portal as x}from"./portal.js";import{Elements as y,useYooptaEditor as k}from"@yoopta/editor";import"react-dom";e('[data-element-options-root]{position:relative}[data-element-options-trigger]{align-items:center;background:transparent;border:none;border-radius:4px;cursor:pointer;display:inline-flex;justify-content:center;padding:4px;transition:background-color .15s ease,opacity .15s ease}[data-element-options-trigger]:hover{background-color:rgba(0,0,0,.05)}[data-element-options-trigger]:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}.yoo-element-options-trigger-icon{color:#6b7280;height:16px;width:16px}[data-element-options-content]{background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);min-width:180px;padding:8px;z-index:50}[data-element-options-group]{display:flex;flex-direction:column;gap:6px}[data-element-options-group]+[data-element-options-group]{margin-top:8px}[data-element-options-label]{color:#6b7280;font-size:12px;font-weight:500}[data-element-options-separator]{background-color:#e5e7eb;height:1px;margin:8px 0}[data-element-options-select]{align-items:center;background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;display:flex;font-size:13px;justify-content:space-between;padding:6px 10px;transition:border-color .15s ease;width:100%}[data-element-options-select]:hover{border-color:#d1d5db}[data-element-options-select]:focus-visible{outline:2px solid rgba(59,130,246,.5);outline-offset:2px}[data-element-options-select-value]{align-items:center;display:flex;gap:8px}[data-element-options-select-chevron]{color:#9ca3af;height:14px;transition:transform .15s ease;width:14px}[data-element-options-select][data-state=open] [data-element-options-select-chevron]{transform:rotate(180deg)}[data-element-options-select-content]{background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);min-width:140px;padding:4px;z-index:51}[data-element-options-select-item]{align-items:center;background:transparent;border:none;border-radius:4px;cursor:pointer;display:flex;font-size:13px;justify-content:space-between;padding:6px 8px;text-align:left;transition:background-color .15s ease;width:100%}[data-element-options-select-item]:hover{background-color:#f3f4f6}[data-element-options-select-item][data-selected=true]{background-color:#eff6ff}[data-element-options-select-item-content]{align-items:center;display:flex;gap:8px}[data-element-options-select-check]{color:#3b82f6;height:14px;width:14px}[data-element-options-select-icon]{align-items:center;display:flex;height:16px;justify-content:center;width:16px}[data-element-options-select-color]{border:1px solid rgba(0,0,0,.1);border-radius:50%;display:inline-block;height:12px;width:12px}[data-element-options-color-picker]{align-items:center;background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;display:flex;font-size:13px;gap:8px;padding:6px 10px;transition:border-color .15s ease;width:100%}[data-element-options-color-picker]:hover{border-color:#d1d5db}[data-element-options-color-preview]{border:1px solid rgba(0,0,0,.1);border-radius:4px;display:inline-block;height:20px;width:20px}[data-element-options-color-value]{color:#6b7280;font-family:monospace;font-size:12px}[data-element-options-color-picker-content]{background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:12px;z-index:51}[data-element-options-color-picker-content] .react-colorful{height:150px;width:180px}[data-element-options-color-presets]{border-top:1px solid #e5e7eb;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px}[data-element-options-color-preset]{border:2px solid transparent;border-radius:4px;cursor:pointer;height:20px;padding:0;transition:border-color .15s ease,transform .15s ease;width:20px}[data-element-options-color-preset]:hover{transform:scale(1.1)}[data-element-options-color-preset][data-selected=true]{border-color:#3b82f6}[data-element-options-toggle]{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;gap:8px;padding:0}[data-element-options-toggle-thumb]{background-color:#e5e7eb;border-radius:10px;height:20px;position:relative;transition:background-color .2s ease;width:36px}[data-element-options-toggle-thumb]:after{background-color:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.1);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .2s ease;width:16px}[data-element-options-toggle][data-state=checked] [data-element-options-toggle-thumb]{background-color:#3b82f6}[data-element-options-toggle][data-state=checked] [data-element-options-toggle-thumb]:after{transform:translateX(16px)}[data-element-options-toggle-label]{color:#374151;font-size:13px}[data-element-options-slider]{align-items:center;display:flex;gap:10px}[data-element-options-slider-input]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,#3b82f6 0,#3b82f6 var(--slider-percentage,0),#e5e7eb var(--slider-percentage,0),#e5e7eb 100%);border-radius:2px;cursor:pointer;flex:1;height:4px}[data-element-options-slider-input]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#fff;border:2px solid #3b82f6;border-radius:50%;cursor:pointer;height:14px;-webkit-transition:transform .15s ease;transition:transform .15s ease;width:14px}[data-element-options-slider-input]::-webkit-slider-thumb:hover{transform:scale(1.1)}[data-element-options-slider-value]{color:#6b7280;font-family:monospace;font-size:12px;min-width:32px;text-align:right}[data-element-options-input]{background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;padding:6px 10px;transition:border-color .15s ease;width:100%}[data-element-options-input]:hover{border-color:#d1d5db}[data-element-options-input]:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.1);outline:none}[data-element-options-input]::-moz-placeholder{color:#9ca3af}[data-element-options-input]::placeholder{color:#9ca3af}@media (prefers-color-scheme:dark){[data-element-options-color-picker-content],[data-element-options-content],[data-element-options-select-content]{background-color:#1f2937;border-color:#374151}[data-element-options-label]{color:#9ca3af}[data-element-options-separator]{background-color:#374151}[data-element-options-color-picker],[data-element-options-input],[data-element-options-select]{background-color:#1f2937;border-color:#374151;color:#f3f4f6}[data-element-options-color-picker]:hover,[data-element-options-input]:hover,[data-element-options-select]:hover{border-color:#4b5563}[data-element-options-select-item]:hover{background-color:#374151}[data-element-options-select-item][data-selected=true]{background-color:rgba(59,130,246,.2)}[data-element-options-color-presets]{border-top-color:#374151}[data-element-options-toggle-thumb]{background-color:#374151}[data-element-options-toggle-label]{color:#d1d5db}[data-element-options-slider-input]{background:linear-gradient(to right,#3b82f6 0,#3b82f6 var(--slider-percentage,0),#374151 var(--slider-percentage,0),#374151 100%)}.yoo-element-options-trigger-icon{color:#9ca3af}[data-element-options-trigger]:hover{background-color:hsla(0,0%,100%,.1)}}');const v=["#000000","#6B7280","#EF4444","#F59E0B","#22C55E","#3B82F6","#8B5CF6","#EC4899"],w=({value:e,onChange:l,presetColors:i=v,className:d,style:c})=>{const[p,y]=a(!1),k=r(null),{refs:w,floatingStyles:O}=m({open:p,placement:"bottom-start",middleware:[u(4),g({padding:8}),b({padding:8})],whileElementsMounted:f});s(()=>{k.current&&w.setReference(k.current)},[w]),s(()=>{if(!p)return;const e=e=>{const t=e.target;k.current&&!k.current.contains(t)&&w.floating.current&&!w.floating.current.contains(t)&&y(!1)},t=e=>{"Escape"===e.key&&y(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}},[p,w.floating]);const j=e=>{e.preventDefault()};return t(o,{children:[t("button",Object.assign({ref:k,type:"button",className:d,style:c,onClick:e=>{e.preventDefault(),e.stopPropagation(),y(!p)},onMouseDown:j,"data-element-options-color-picker":!0,"data-state":p?"open":"closed","aria-expanded":p},{children:[n("span",{"data-element-options-color-preview":!0,style:{backgroundColor:e}}),n("span",Object.assign({"data-element-options-color-value":!0},{children:e}))]})),p&&n(x,Object.assign({id:"element-options-color-picker-portal"},{children:t("div",Object.assign({ref:w.setFloating,style:O,"data-element-options-color-picker-content":!0,onMouseDown:j},{children:[n(h,{color:e,onChange:l}),i.length>0&&n("div",Object.assign({"data-element-options-color-presets":!0},{children:i.map(t=>n("button",{type:"button","data-element-options-color-preset":!0,"data-selected":t===e,style:{backgroundColor:t},onClick:()=>(e=>{l(e)})(t),onMouseDown:j,"aria-label":`Select color ${t}`},t))}))]}))}))]})};w.displayName="ElementOptions.ColorPicker";const O=l(null);function j(){const e=i(O);if(!e)throw new Error("useElementOptionsContext must be used within an ElementOptions.Root");return e}function N(){const{blockId:e,element:t,editor:o,isOpen:n,setIsOpen:a}=j();return{blockId:e,element:t,editor:o,isOpen:n,setIsOpen:a}}function E(){const{blockId:e,element:t,editor:o}=j();return n=>{y.updateElement(o,{blockId:e,type:t.type,props:Object.assign(Object.assign({},t.props),n)})}}O.displayName="ElementOptionsContext";const C=({children:e,className:t,style:o,side:a="bottom",align:l="end",sideOffset:i=4,alignOffset:d=0})=>{const{isOpen:c,setIsOpen:p,triggerRef:h,contentRef:y}=j(),k=r(null),v="center"===l?a:`${a}-${l}`,{refs:w,floatingStyles:O}=m({open:c,placement:v,middleware:[u({mainAxis:i,crossAxis:d}),g({padding:8}),b({padding:8})],whileElementsMounted:f});return s(()=>{h.current&&w.setReference(h.current)},[h,w]),s(()=>{if(!c)return;const e=e=>{const t=e.target,o=h.current,n=k.current;o&&!o.contains(t)&&n&&!n.contains(t)&&p(!1)},t=e=>{"Escape"===e.key&&p(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}},[c,p,h]),c?n(x,Object.assign({id:"element-options-portal"},{children:n("div",Object.assign({ref:e=>{w.setFloating(e),k.current=e,y&&(y.current=e)},className:t,style:Object.assign(Object.assign({},O),o),"data-element-options-content":!0,"data-state":"open","data-side":a,"data-align":l,role:"dialog","aria-modal":"true"},{children:e}))})):null};C.displayName="ElementOptions.Content";const D=({children:e,className:t,style:o})=>n("div",Object.assign({className:t,style:o,"data-element-options-group":!0},{children:e}));D.displayName="ElementOptions.Group";const z=({value:e,onChange:t,placeholder:o,type:a="text",className:r,style:s})=>n("input",{type:a,value:e,onChange:e=>{t(e.target.value)},onMouseDown:e=>{e.stopPropagation()},placeholder:o,className:r,style:s,"data-element-options-input":!0});z.displayName="ElementOptions.Input";const L=({children:e,className:t,style:o})=>n("label",Object.assign({className:t,style:o,"data-element-options-label":!0},{children:e}));L.displayName="ElementOptions.Label";const M=({blockId:e,element:t,children:o,anchorRef:s,className:l,style:i})=>{const c=k(),[p,m]=a(!1),u=r(null),g=r(null),b=d(()=>({blockId:e,element:t,editor:c,isOpen:p,setIsOpen:m,triggerRef:u,contentRef:g,anchorRef:null!=s?s:null}),[e,t,c,p,s]);return n(O.Provider,Object.assign({value:b},{children:n("div",Object.assign({className:l,style:i,"data-element-options-root":!0,"data-state":p?"open":"closed"},{children:o}))}))};M.displayName="ElementOptions.Root";
|
|
2
|
+
/**
|
|
3
|
+
* @license lucide-react v0.294.0 - ISC
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the ISC license.
|
|
6
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
var R={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};
|
|
9
|
+
/**
|
|
10
|
+
* @license lucide-react v0.294.0 - ISC
|
|
11
|
+
*
|
|
12
|
+
* This source code is licensed under the ISC license.
|
|
13
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
14
|
+
*/const I=(e,t)=>{const o=c(({color:o="currentColor",size:n=24,strokeWidth:a=2,absoluteStrokeWidth:r,className:s="",children:l,...i},d)=>{return p("svg",{ref:d,...R,width:n,height:n,stroke:o,strokeWidth:r?24*Number(a)/Number(n):a,className:["lucide",`lucide-${c=e,c.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase().trim()}`,s].join(" "),...i},[...t.map(([e,t])=>p(e,t)),...Array.isArray(l)?l:[l]]);var c});return o.displayName=`${e}`,o},S=I("Check",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]),$=I("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]),P=I("MoreHorizontal",[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]]),F=({value:e,options:l,onValueChange:i,placeholder:d="Select...",className:c,style:p,renderOption:h,renderValue:y})=>{const[k,v]=a(!1),w=r(null),O=l.find(t=>t.value===e),{refs:j,floatingStyles:N}=m({open:k,placement:"bottom-start",middleware:[u(4),g({padding:8}),b({padding:8})],whileElementsMounted:f});s(()=>{w.current&&j.setReference(w.current)},[j]),s(()=>{if(!k)return;const e=e=>{const t=e.target;w.current&&!w.current.contains(t)&&j.floating.current&&!j.floating.current.contains(t)&&v(!1)},t=e=>{"Escape"===e.key&&v(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}},[k,j.floating]);const E=e=>{e.preventDefault()},C=e=>t(o,{children:[e.icon&&n("span",Object.assign({"data-element-options-select-icon":!0},{children:e.icon})),e.color&&n("span",{"data-element-options-select-color":!0,style:{backgroundColor:e.color}}),n("span",{children:e.label})]});return t(o,{children:[t("button",Object.assign({ref:w,type:"button",className:c,style:p,onClick:e=>{e.preventDefault(),e.stopPropagation(),v(!k)},onMouseDown:E,"data-element-options-select":!0,"data-state":k?"open":"closed","aria-expanded":k,"aria-haspopup":"listbox"},{children:[n("span",Object.assign({"data-element-options-select-value":!0},{children:y?y(O):(D=O,t(o,{children:[(null==D?void 0:D.icon)&&n("span",Object.assign({"data-element-options-select-icon":!0},{children:D.icon})),(null==D?void 0:D.color)&&n("span",{"data-element-options-select-color":!0,style:{backgroundColor:D.color}}),n("span",{children:null!==(z=null==D?void 0:D.label)&&void 0!==z?z:d})]}))})),n($,{"data-element-options-select-chevron":!0})]})),k&&n(x,Object.assign({id:"element-options-select-portal"},{children:n("div",Object.assign({ref:j.setFloating,style:N,"data-element-options-select-content":!0,role:"listbox","aria-activedescendant":e,tabIndex:0},{children:l.map(o=>t("button",Object.assign({type:"button",role:"option","aria-selected":o.value===e,"data-element-options-select-item":!0,"data-selected":o.value===e,onClick:()=>{return e=o.value,i(e),void v(!1);var e},onMouseDown:E},{children:[n("span",Object.assign({"data-element-options-select-item-content":!0},{children:h?h(o):C(o)})),o.value===e&&n(S,{"data-element-options-select-check":!0})]}),String(o.value)))}))}))]});var D,z};F.displayName="ElementOptions.Select";const A=({className:e,style:t})=>n("div",{className:e,style:t,"data-element-options-separator":!0,role:"separator","aria-orientation":"horizontal"});A.displayName="ElementOptions.Separator";const B=({value:e,onValueChange:o,min:a=0,max:r=100,step:s=1,className:l,style:i})=>{const d=(e-a)/(r-a)*100;return t("div",Object.assign({className:l,style:i,"data-element-options-slider":!0,onMouseDown:e=>{e.stopPropagation()}},{children:[n("input",{type:"range",min:a,max:r,step:s,value:e,onChange:e=>{o(Number(e.target.value))},"data-element-options-slider-input":!0,style:{"--slider-percentage":`${d}%`}}),n("span",Object.assign({"data-element-options-slider-value":!0},{children:e}))]}))};B.displayName="ElementOptions.Slider";const T=({checked:e,onCheckedChange:o,label:a,className:r,style:s})=>t("button",Object.assign({type:"button",role:"switch","aria-checked":e,className:r,style:s,onClick:t=>{t.preventDefault(),t.stopPropagation(),o(!e)},onMouseDown:e=>{e.preventDefault()},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),o(!e))},"data-element-options-toggle":!0,"data-state":e?"checked":"unchecked"},{children:[n("span",{"data-element-options-toggle-thumb":!0}),a&&n("span",Object.assign({"data-element-options-toggle-label":!0},{children:a}))]}));T.displayName="ElementOptions.Toggle";const W=({children:e,className:t,style:o,side:a,align:r,sideOffset:l=0,alignOffset:i=0})=>{const{isOpen:d,setIsOpen:c,triggerRef:p,anchorRef:h}=j(),x=Boolean(h&&a),y=a?"center"!==r&&r?`${a}-${r}`:a:"bottom",{refs:k,floatingStyles:v}=m({placement:y,middleware:[u({mainAxis:l,crossAxis:i}),g({padding:8}),b({padding:8})],whileElementsMounted:f});s(()=>{(null==h?void 0:h.current)&&x&&k.setReference(h.current)},[h,k,x]);const w=x?Object.assign(Object.assign({},v),o):o;return n("button",Object.assign({ref:e=>{p.current=e,x&&k.setFloating(e)},type:"button",className:t,style:w,onClick:e=>{e.preventDefault(),e.stopPropagation(),c(!d)},onMouseDown:e=>{e.preventDefault()},"data-element-options-trigger":!0,"data-state":d?"open":"closed","aria-expanded":d,"aria-haspopup":"dialog"},{children:null!=e?e:n(P,{className:"yoo-element-options-trigger-icon"})}))};W.displayName="ElementOptions.Trigger";const V=Object.assign(M,{Root:M,Trigger:W,Content:C,Group:D,Label:L,Separator:A,Select:F,ColorPicker:w,Toggle:T,Slider:B,Input:z});export{V as ElementOptions,w as ElementOptionsColorPicker,C as ElementOptionsContent,O as ElementOptionsContext,D as ElementOptionsGroup,z as ElementOptionsInput,L as ElementOptionsLabel,M as ElementOptionsRoot,F as ElementOptionsSelect,A as ElementOptionsSeparator,B as ElementOptionsSlider,T as ElementOptionsToggle,W as ElementOptionsTrigger,N as useElementOptions,j as useElementOptionsContext,E as useUpdateElementProps};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{s as r}from"./chunks/style-inject.es-e87a8d02.js";export{H as HighlightColorPicker}from"./chunks/highlight-color-picker-
|
|
1
|
+
import{s as r}from"./chunks/style-inject.es-e87a8d02.js";export{H as HighlightColorPicker}from"./chunks/highlight-color-picker-ea799f50.js";import"react/jsx-runtime";import"react";import"./chunks/floating-ui.react-33212df0.js";import"react-dom";import"./chunks/index-e0185864.js";r(".yoopta-highlight-color-picker{--hcp-bg:#fff;--hcp-fg:#18181b;--hcp-muted:#71717a;--hcp-border:#e4e4e7;--hcp-ring:#3b82f6;--hcp-shadow:0 16px 48px -12px rgba(0,0,0,.18),0 4px 16px -4px rgba(0,0,0,.1);--hcp-radius:10px;--hcp-pad:10px;--hcp-gap:10px;--hcp-width:224px;--hcp-picker-height:120px;--hcp-preset-size:24px;--hcp-input-height:26px;background:var(--hcp-bg);border:1px solid var(--hcp-border);border-radius:var(--hcp-radius);box-shadow:var(--hcp-shadow);color:var(--hcp-fg);display:flex;flex-direction:column;gap:8px;outline:none;padding:var(--hcp-pad);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--hcp-width);z-index:9999}.dark .yoopta-highlight-color-picker,.yoopta-highlight-color-picker[data-theme=dark]{--hcp-bg:#18181b;--hcp-fg:#fafafa;--hcp-muted:#a1a1aa;--hcp-border:#3f3f46;--hcp-shadow:0 16px 48px -12px rgba(0,0,0,.5),0 4px 16px -4px rgba(0,0,0,.3)}.yoopta-highlight-color-picker__mode-toggle{background:var(--hcp-border);border-radius:8px;display:flex;flex-shrink:0;gap:4px;padding:4px}.yoopta-highlight-color-picker__mode-btn{background:transparent;border:none;border-radius:6px;color:var(--hcp-muted);cursor:pointer;flex:1;font-size:11px;font-weight:500;line-height:1.4;outline:none;padding:4px 8px;text-align:center;transition:background-color .12s ease,color .12s ease}.yoopta-highlight-color-picker__mode-btn:hover{color:var(--hcp-fg)}.yoopta-highlight-color-picker__mode-btn[data-active=true]{background:var(--hcp-bg);box-shadow:0 1px 2px rgba(0,0,0,.1);color:var(--hcp-fg)}.yoopta-highlight-color-picker__mode-btn:focus-visible{outline:2px solid var(--hcp-ring);outline-offset:2px}.yoopta-highlight-color-picker__react-colorful{height:var(--hcp-picker-height)!important;width:100%!important}.yoopta-highlight-color-picker__react-colorful .react-colorful__saturation{border:1px solid var(--hcp-border);border-radius:8px}.yoopta-highlight-color-picker__react-colorful .react-colorful__hue{border:1px solid var(--hcp-border);border-radius:999px;height:10px;margin-top:8px}.yoopta-highlight-color-picker__react-colorful .react-colorful__pointer{border:2px solid var(--hcp-bg);border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.22);height:16px;width:16px}.yoopta-highlight-color-picker__presets{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-color:var(--hcp-border) transparent;scrollbar-width:thin}.yoopta-highlight-color-picker__presets::-webkit-scrollbar{height:6px}.yoopta-highlight-color-picker__presets::-webkit-scrollbar-track{background:transparent}.yoopta-highlight-color-picker__presets::-webkit-scrollbar-thumb{background-color:var(--hcp-border);border-radius:999px}.yoopta-highlight-color-picker__preset{border:2px solid var(--hcp-border);border-radius:7px;cursor:pointer;flex:0 0 auto;height:var(--hcp-preset-size);outline:none;padding:0;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;width:var(--hcp-preset-size)}.yoopta-highlight-color-picker__preset:hover{transform:scale(1.08)}.yoopta-highlight-color-picker__preset:focus-visible{border-color:var(--hcp-ring);box-shadow:0 0 0 2px var(--hcp-ring)}.yoopta-highlight-color-picker__preset[data-selected=true]{border-color:var(--hcp-ring);box-shadow:0 0 0 2px rgba(59,130,246,.35)}.yoopta-highlight-color-picker__hex-row{align-items:center;display:flex;gap:8px}.yoopta-highlight-color-picker__swatch{border:1px solid var(--hcp-border);border-radius:7px;flex:0 0 auto;height:var(--hcp-input-height);width:var(--hcp-input-height)}.yoopta-highlight-color-picker__hex-input{background:transparent;border:1px solid var(--hcp-border);border-radius:9px;color:var(--hcp-fg);flex:1;font-size:12px;height:var(--hcp-input-height);line-height:1;min-width:0;outline:none;padding:0 10px}.yoopta-highlight-color-picker__hex-input:focus{border-color:var(--hcp-ring);box-shadow:0 0 0 2px rgba(59,130,246,.25)}.yoopta-highlight-color-picker__hex-input::-moz-placeholder{color:var(--hcp-muted)}.yoopta-highlight-color-picker__hex-input::placeholder{color:var(--hcp-muted)}");
|
package/dist/index.d.ts
CHANGED
|
@@ -9,4 +9,8 @@ export { Portal } from './portal';
|
|
|
9
9
|
export { Overlay } from './overlay';
|
|
10
10
|
export { HighlightColorPicker } from './highlight-color-picker';
|
|
11
11
|
export type { HighlightColorPickerProps } from './highlight-color-picker';
|
|
12
|
+
export { SelectionBox, useRectangeSelectionBox } from './selection-box';
|
|
13
|
+
export type { RectangeSelectionProps, RectangeSelectionState, SelectionBoxProps, } from './selection-box';
|
|
14
|
+
export { ElementOptions, useElementOptions, useElementOptionsContext, useUpdateElementProps, } from './element-options';
|
|
15
|
+
export type { ElementOptionsContextValue, ElementOptionsRootProps, ElementOptionsTriggerProps, ElementOptionsContentProps, ElementOptionsGroupProps, ElementOptionsLabelProps, ElementOptionsSeparatorProps, ElementOptionsSelectProps, ElementOptionsColorPickerProps, ElementOptionsToggleProps, ElementOptionsSliderProps, ElementOptionsInputProps, SelectOption, } from './element-options';
|
|
12
16
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAChF,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAChF,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AACxE,YAAY,EACV,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,cAAc,EACd,iBAAiB,EACjB,wBAAwB,EACxB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,0BAA0B,EAC1B,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,EACxB,4BAA4B,EAC5B,yBAAyB,EACzB,8BAA8B,EAC9B,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,EACxB,YAAY,GACb,MAAM,mBAAmB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{SlashCommandMenu}from"./slash-command-menu.js";export{FloatingBlockActions,useFloatingBlockActions}from"./floating-block-actions.js";export{BlockOptions,useBlockActions,useBlockOptionsContext}from"./block-options.js";export{T as Toolbar,u as useToolbar}from"./chunks/hooks-
|
|
1
|
+
export{SlashCommandMenu}from"./slash-command-menu.js";export{ElementOptions,useElementOptions,useElementOptionsContext,useUpdateElementProps}from"./element-options.js";export{FloatingBlockActions,useFloatingBlockActions}from"./floating-block-actions.js";export{BlockOptions,useBlockActions,useBlockOptionsContext}from"./block-options.js";export{T as Toolbar,u as useToolbar}from"./chunks/hooks-ad9169d0.js";export{A as ActionMenuList,u as useActionMenuList,a as useActionMenuListActions}from"./chunks/hooks-814f49b9.js";export{ThemeProvider,ThemeToggle,useTheme,useThemeContext}from"./theme.js";export{Portal}from"./portal.js";export{Overlay}from"./overlay.js";export{H as HighlightColorPicker}from"./chunks/highlight-color-picker-ea799f50.js";export{SelectionBox,useRectangeSelectionBox}from"./selection-box.js";import"react/jsx-runtime";import"react";import"@yoopta/editor";import"./chunks/floating-ui.react-33212df0.js";import"react-dom";import"./chunks/style-inject.es-e87a8d02.js";import"./chunks/index-e0185864.js";import"./chunks/_tslib-5e145dfd.js";import"./chunks/index-06d5c4e7.js";import"./chunks/throttle-dea4a39e.js";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { YooEditor } from '@yoopta/editor';
|
|
2
|
+
export type SelectionBoxRoot = HTMLElement | {
|
|
3
|
+
current: HTMLElement | null;
|
|
4
|
+
};
|
|
5
|
+
export type RectangeSelectionProps = {
|
|
6
|
+
editor: YooEditor;
|
|
7
|
+
root?: SelectionBoxRoot;
|
|
8
|
+
};
|
|
9
|
+
export type RectangeSelectionState = {
|
|
10
|
+
origin: [number, number];
|
|
11
|
+
coords: [number, number];
|
|
12
|
+
selection: boolean;
|
|
13
|
+
};
|
|
14
|
+
export type SelectionBoxProps = {
|
|
15
|
+
selectionBoxElement?: SelectionBoxRoot | null;
|
|
16
|
+
};
|
|
17
|
+
declare const SelectionBox: ({ selectionBoxElement }: SelectionBoxProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
18
|
+
export { SelectionBox };
|
|
19
|
+
//# sourceMappingURL=SelectionBox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectionBox.d.ts","sourceRoot":"","sources":["../../src/selection-box/SelectionBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAKhD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAAE,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAE7E,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mBAAmB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC/C,CAAC;AASF,QAAA,MAAM,YAAY,4BAA6B,iBAAiB,mDA2B/D,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { RectangeSelectionProps, RectangeSelectionState } from './SelectionBox';
|
|
2
|
+
type RectangeSelectionReturn = RectangeSelectionState & {
|
|
3
|
+
onClose: () => void;
|
|
4
|
+
};
|
|
5
|
+
export declare const useRectangeSelectionBox: ({ editor, root, }: RectangeSelectionProps) => RectangeSelectionReturn;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=hooks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/selection-box/hooks.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAiCrF,KAAK,uBAAuB,GAAG,sBAAsB,GAAG;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AASF,eAAO,MAAM,uBAAuB,sBAGjC,sBAAsB,KAAG,uBAgG3B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/selection-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as o,useCallback as r,useEffect as n,useMemo as s}from"react";import{Paths as i,useYooptaEditor as c,useYooptaReadOnly as l}from"@yoopta/editor";const a={origin:[0,0],coords:[0,0],selection:!1},u=({editor:e,root:s})=>{const[c,l]=t(a),u=o(c);u.current=c;const d=r(()=>{l(a)},[]);return n(()=>{var t;if(e.readOnly)return;const o=s&&"current"in s?s.current:s||null;if(!o)return;if(null===(t=e.refElement)||void 0===t?void 0:t.contains(o))throw new Error("Root element should not be a child of the editor. Please check the `selectionBoxElement` prop");const r=t=>{var o;const r=null===(o=e.refElement)||void 0===o?void 0:o.contains(t.target),n=i.getSelectedPaths(e);if(!r&&!u.current.selection&&Array.isArray(n)&&n.length>0)return e.setPath({current:null}),void d();if(r)return;const s=[t.pageX,t.pageY-window.scrollY];l({origin:s,coords:s,selection:!0})},n=t=>{if(!u.current.selection)return;const o=[t.pageX,t.pageY-window.scrollY];l(e=>Object.assign(Object.assign({},e),{coords:o}));const r=((e,t,o)=>{var r;const n=[],s=null===(r=e.refElement)||void 0===r?void 0:r.querySelectorAll("[data-yoopta-block]");if(!s)return n;const i=Math.min(t[1],o[1]),c=Math.min(t[0],o[0]),l=Math.max(t[1],o[1]),a=Math.max(t[0],o[0]);return s.forEach((e,t)=>{const o=e.getBoundingClientRect();i<o.bottom&&l>o.top&&c<o.right&&a>o.left&&n.push(t)}),n})(e,u.current.origin,o);e.setPath({current:null,selected:r,source:"selection-box"})},c=()=>{u.current.selection&&d()};return o.addEventListener("mousedown",r),o.addEventListener("mousemove",n),o.addEventListener("mouseup",c),()=>{o.removeEventListener("mousedown",r),o.removeEventListener("mousemove",n),o.removeEventListener("mouseup",c)}},[e,s,d]),Object.assign(Object.assign({},c),{onClose:d})},d=(e,t)=>e[1]>t[1]&&e[0]>t[0]?"scaleY(-1) scaleX(-1)":e[1]>t[1]?"scaleY(-1)":e[0]>t[0]?"scaleX(-1)":void 0,m=({selectionBoxElement:t})=>{const o=c(),r=l(),{coords:n,origin:i,selection:a}=u({editor:o,root:null!=t?t:void 0}),m=s(()=>({zIndex:10,left:i[0],top:i[1],height:Math.abs(n[1]-i[1]-1),width:Math.abs(n[0]-i[0]-1),userSelect:"none",transformOrigin:"top left",transform:d(i,n),position:"fixed",backgroundColor:"rgba(35, 131, 226, 0.14)"}),[i,n]);return!a||r?null:e("div",{style:m})};export{m as SelectionBox,u as useRectangeSelectionBox};
|
package/dist/toolbar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{s as o}from"./chunks/style-inject.es-e87a8d02.js";export{T as Toolbar,u as useToolbar,a as useToolbarStore}from"./chunks/hooks-
|
|
1
|
+
import{s as o}from"./chunks/style-inject.es-e87a8d02.js";export{T as Toolbar,u as useToolbar,a as useToolbarStore}from"./chunks/hooks-ad9169d0.js";import"./chunks/_tslib-5e145dfd.js";import"react/jsx-runtime";import"react";import"./portal.js";import"./chunks/floating-ui.react-33212df0.js";import"react-dom";import"@yoopta/editor";import"./chunks/index-06d5c4e7.js";import"./chunks/throttle-dea4a39e.js";o(":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-toolbar-gap:4px;--yoopta-ui-toolbar-padding:6px;--yoopta-ui-toolbar-radius:0.5rem;--yoopta-ui-toolbar-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--yoopta-ui-toolbar-z-index:99;--yoopta-ui-toolbar-group-gap:2px;--yoopta-ui-toolbar-separator-height:24px;--yoopta-ui-toolbar-separator-margin:4px;--yoopta-ui-toolbar-button-min-width:32px;--yoopta-ui-toolbar-button-min-height:32px;--yoopta-ui-toolbar-button-padding-y:6px;--yoopta-ui-toolbar-button-padding-x:8px;--yoopta-ui-toolbar-button-font-size:0.875rem;--yoopta-ui-toolbar-button-font-weight:500;--yoopta-ui-toolbar-button-gap:4px;--yoopta-ui-toolbar-button-radius:0.375rem;--yoopta-ui-toolbar-icon-size:1rem;--yoopta-ui-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-toolbar{align-items:center;background:hsl(var(--yoopta-ui-background));border:1px solid hsl(var(--yoopta-ui-border));border-radius:var(--yoopta-ui-toolbar-radius,.5rem);box-shadow:var(--yoopta-ui-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-toolbar-gap,4px);padding:var(--yoopta-ui-toolbar-padding,6px);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yoopta-ui-toolbar-z-index,99)}.yoopta-ui-toolbar-group{align-items:center;display:flex;gap:var(--yoopta-ui-toolbar-group-gap,2px)}.yoopta-ui-toolbar-separator{background:hsl(var(--yoopta-ui-border));height:var(--yoopta-ui-toolbar-separator-height,24px);margin:0 var(--yoopta-ui-toolbar-separator-margin,4px);width:1px}.yoopta-ui-toolbar-button{align-items:center;background:transparent;border:none;border-radius:var(--yoopta-ui-toolbar-button-radius,.375rem);color:hsl(var(--yoopta-ui-foreground));cursor:pointer;display:inline-flex;font-size:var(--yoopta-ui-toolbar-button-font-size,.875rem);font-weight:var(--yoopta-ui-toolbar-button-font-weight,500);gap:var(--yoopta-ui-toolbar-button-gap,4px);justify-content:center;min-height:var(--yoopta-ui-toolbar-button-min-height,32px);min-width:var(--yoopta-ui-toolbar-button-min-width,32px);outline:none;padding:var(--yoopta-ui-toolbar-button-padding-y,6px) var(--yoopta-ui-toolbar-button-padding-x,8px);transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap}.yoopta-ui-toolbar-button:hover:not(:disabled){background:hsl(var(--yoopta-ui-accent))}.yoopta-ui-toolbar-button:focus-visible{outline:2px solid hsl(var(--yoopta-ui-ring));outline-offset:var(--yoopta-ui-toolbar-ring-offset,2px)}.yoopta-ui-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-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.yoopta-ui-toolbar-button svg{height:var(--yoopta-ui-toolbar-icon-size,1rem);width:var(--yoopta-ui-toolbar-icon-size,1rem)}");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yoopta/ui",
|
|
3
|
-
"version": "6.0.0-beta.
|
|
3
|
+
"version": "6.0.0-beta.7",
|
|
4
4
|
"description": "UI components for Yoopta Editor",
|
|
5
5
|
"author": "Darginec05 <devopsbanda@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
|
|
@@ -30,6 +30,12 @@
|
|
|
30
30
|
"highlight-color-picker": [
|
|
31
31
|
"./dist/highlight-color-picker/index.d.ts"
|
|
32
32
|
],
|
|
33
|
+
"selection-box": [
|
|
34
|
+
"./dist/selection-box/index.d.ts"
|
|
35
|
+
],
|
|
36
|
+
"element-options": [
|
|
37
|
+
"./dist/element-options/index.d.ts"
|
|
38
|
+
],
|
|
33
39
|
"portal": [
|
|
34
40
|
"./dist/portal/index.d.ts"
|
|
35
41
|
],
|
|
@@ -73,6 +79,14 @@
|
|
|
73
79
|
"types": "./dist/highlight-color-picker/index.d.ts",
|
|
74
80
|
"import": "./dist/highlight-color-picker.js"
|
|
75
81
|
},
|
|
82
|
+
"./selection-box": {
|
|
83
|
+
"types": "./dist/selection-box/index.d.ts",
|
|
84
|
+
"import": "./dist/selection-box.js"
|
|
85
|
+
},
|
|
86
|
+
"./element-options": {
|
|
87
|
+
"types": "./dist/element-options/index.d.ts",
|
|
88
|
+
"import": "./dist/element-options.js"
|
|
89
|
+
},
|
|
76
90
|
"./portal": {
|
|
77
91
|
"types": "./dist/portal/index.d.ts",
|
|
78
92
|
"import": "./dist/portal.js"
|
|
@@ -95,8 +109,6 @@
|
|
|
95
109
|
"react-dom": ">=18.2.0"
|
|
96
110
|
},
|
|
97
111
|
"dependencies": {
|
|
98
|
-
"@dnd-kit/core": "^6.1.0",
|
|
99
|
-
"@dnd-kit/sortable": "^8.0.0",
|
|
100
112
|
"@floating-ui/react": "^0.26.9",
|
|
101
113
|
"class-variance-authority": "^0.7.0",
|
|
102
114
|
"clsx": "^2.0.0",
|
|
@@ -123,5 +135,5 @@
|
|
|
123
135
|
"bugs": {
|
|
124
136
|
"url": "https://github.com/Darginec05/Yoopta-Editor/issues"
|
|
125
137
|
},
|
|
126
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "7cc1d045b5737a810e4f7820c495f7a42dfcc09d"
|
|
127
139
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as r,jsx as o}from"react/jsx-runtime";import t,{useRef as n,useMemo as a,useEffect as c,useCallback as l,useState as i,useLayoutEffect as u,forwardRef as s,cloneElement as f}from"react";import{u as h,o as d,f as p,s as g,a as v}from"./floating-ui.react-33212df0.js";function m(){return(m=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function b(e,r){if(null==e)return{};var o,t,n={},a=Object.keys(e);for(t=0;t<a.length;t++)r.indexOf(o=a[t])>=0||(n[o]=e[o]);return n}function _(e){var r=n(e),o=n(function(e){r.current&&r.current(e)});return r.current=e,o.current}var C=function(e,r,o){return void 0===r&&(r=0),void 0===o&&(o=1),e>o?o:e<r?r:e},k=function(e){return"touches"in e},x=function(e){return e&&e.ownerDocument.defaultView||self},w=function(e,r,o){var t=e.getBoundingClientRect(),n=k(r)?function(e,r){for(var o=0;o<e.length;o++)if(e[o].identifier===r)return e[o];return e[0]}(r.touches,o):r;return{left:C((n.pageX-(t.left+x(e).pageXOffset))/t.width),top:C((n.pageY-(t.top+x(e).pageYOffset))/t.height)}},y=function(e){!k(e)&&e.preventDefault()},F=t.memo(function(e){var r=e.onMove,o=e.onKey,l=b(e,["onMove","onKey"]),i=n(null),u=_(r),s=_(o),f=n(null),h=n(!1),d=a(function(){var e=function(e){y(e),(k(e)?e.touches.length>0:e.buttons>0)&&i.current?u(w(i.current,e,f.current)):o(!1)},r=function(){return o(!1)};function o(o){var t=h.current,n=x(i.current),a=o?n.addEventListener:n.removeEventListener;a(t?"touchmove":"mousemove",e),a(t?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,t=i.current;if(t&&(y(r),!function(e,r){return r&&!k(e)}(r,h.current)&&t)){if(k(r)){h.current=!0;var n=r.changedTouches||[];n.length&&(f.current=n[0].identifier)}t.focus(),u(w(t,r,f.current)),o(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),s({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},o]},[s,u]),p=d[0],g=d[1],v=d[2];return c(function(){return v},[v]),t.createElement("div",m({},l,{onTouchStart:p,onMouseDown:p,className:"react-colorful__interactive",ref:i,onKeyDown:g,tabIndex:0,role:"slider"}))}),N=function(e){return e.filter(Boolean).join(" ")},E=function(e){var r=e.color,o=e.left,n=e.top,a=void 0===n?.5:n,c=N(["react-colorful__pointer",e.className]);return t.createElement("div",{className:c,style:{top:100*a+"%",left:100*o+"%"}},t.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:r}}))},O=function(e,r,o){return void 0===r&&(r=0),void 0===o&&(o=Math.pow(10,r)),Math.round(o*e)/o},M=function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?O(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?O(parseInt(e.substring(6,8),16)/255,2):1}},j=function(e){var r=function(e){var r=e.s,o=e.v,t=e.a,n=(200-r)*o/100;return{h:O(e.h),s:O(n>0&&n<200?r*o/100/(n<=100?n:200-n)*100:0),l:O(n/2),a:O(t,2)}}(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},H=function(e){var r=e.h,o=e.s,t=e.v,n=e.a;r=r/360*6,o/=100,t/=100;var a=Math.floor(r),c=t*(1-o),l=t*(1-(r-a)*o),i=t*(1-(1-r+a)*o),u=a%6;return{r:O(255*[t,l,c,c,i,t][u]),g:O(255*[i,t,t,l,c,c][u]),b:O(255*[c,c,i,t,t,l][u]),a:O(n,2)}},I=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},L=function(e){var r=e.r,o=e.g,t=e.b,n=e.a,a=n<1?I(O(255*n)):"";return"#"+I(r)+I(o)+I(t)+a},B=function(e){var r=e.r,o=e.g,t=e.b,n=e.a,a=Math.max(r,o,t),c=a-Math.min(r,o,t),l=c?a===r?(o-t)/c:a===o?2+(t-r)/c:4+(r-o)/c:0;return{h:O(60*(l<0?l+6:l)),s:O(a?c/a*100:0),v:O(a/255*100),a:n}},z=t.memo(function(e){var r=e.hue,o=e.onChange,n=N(["react-colorful__hue",e.className]);return t.createElement("div",{className:n},t.createElement(F,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:C(r+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":O(r),"aria-valuemax":"360","aria-valuemin":"0"},t.createElement(E,{className:"react-colorful__hue-pointer",left:r/360,color:j({h:r,s:100,v:100,a:1})})))}),D=t.memo(function(e){var r=e.hsva,o=e.onChange,n={backgroundColor:j({h:r.h,s:100,v:100,a:1})};return t.createElement("div",{className:"react-colorful__saturation",style:n},t.createElement(F,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:C(r.s+100*e.left,0,100),v:C(r.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+O(r.s)+"%, Brightness "+O(r.v)+"%"},t.createElement(E,{className:"react-colorful__saturation-pointer",top:1-r.v/100,left:r.s/100,color:j(r)})))}),K=function(e,r){if(e===r)return!0;for(var o in e)if(e[o]!==r[o])return!1;return!0};function P(e,r,o){var t=_(o),a=i(function(){return e.toHsva(r)}),u=a[0],s=a[1],f=n({color:r,hsva:u});c(function(){if(!e.equal(r,f.current.color)){var o=e.toHsva(r);f.current={hsva:o,color:r},s(o)}},[r,e]),c(function(){var r;K(u,f.current.hsva)||e.equal(r=e.fromHsva(u),f.current.color)||(f.current={hsva:u,color:r},t(r))},[u,e,t]);var h=l(function(e){s(function(r){return Object.assign({},r,e)})},[]);return[u,h]}var S="undefined"!=typeof window?u:c,T=new Map,q=function(e){S(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!T.has(r)){var o=r.createElement("style");o.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',T.set(r,o);var t="undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0;t&&o.setAttribute("nonce",t),r.head.appendChild(o)}},[])},A=function(e){var r=e.className,o=e.colorModel,a=e.color,c=void 0===a?o.defaultColor:a,l=e.onChange,i=b(e,["className","colorModel","color","onChange"]),u=n(null);q(u);var s=P(o,c,l),f=s[0],h=s[1],d=N(["react-colorful",r]);return t.createElement("div",m({},i,{ref:u,className:d}),t.createElement(D,{hsva:f,onChange:h}),t.createElement(z,{hue:f.h,onChange:h,className:"react-colorful__last-control"}))},$={defaultColor:"000",toHsva:function(e){return B(M(e))},fromHsva:function(e){return function(e){return L(H(e))}({h:e.h,s:e.s,v:e.v,a:1})},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||K(M(e),M(r))}},R=function(e){return t.createElement(A,m({},e,{colorModel:$}))},X=/^#?([0-9A-F]{3,8})$/i,Y=function(e){var r=e.color,o=void 0===r?"":r,n=e.onChange,a=e.onBlur,u=e.escape,s=e.validate,f=e.format,h=e.process,d=b(e,["color","onChange","onBlur","escape","validate","format","process"]),p=i(function(){return u(o)}),g=p[0],v=p[1],C=_(n),k=_(a),x=l(function(e){var r=u(e.target.value);v(r),s(r)&&C(h?h(r):r)},[u,h,s,C]),w=l(function(e){s(e.target.value)||v(u(o)),k(e)},[o,u,s,k]);return c(function(){v(u(o))},[o,u]),t.createElement("input",m({},d,{value:f?f(g):g,spellCheck:"false",onChange:x,onBlur:w}))},V=function(e){return"#"+e},G=function(e){var r=e.prefixed,o=e.alpha,n=b(e,["prefixed","alpha"]),a=l(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,o?8:6)},[o]),c=l(function(e){return function(e,r){var o=X.exec(e),t=o?o[1].length:0;return 3===t||6===t||!!r&&4===t||!!r&&8===t}(e,o)},[o]);return t.createElement(Y,m({},n,{escape:a,format:r?V:void 0,process:V,validate:c}))};const J=["#FFFF00","#FFE066","#FFCC99","#FF9999","#99CCFF","#99FF99","#FF99FF","#CC99FF"],Q=s(({value:t={backgroundColor:"#FFFF00"},onChange:n,presets:a=J,showInput:l=!0,className:u,children:s,placement:m="bottom",offset:b=8},_)=>{const[C,k]=i(!1),[x,w]=i("backgroundColor"),[y,F]=i(t.backgroundColor),[N,E]=i(t.color),{refs:O,floatingStyles:M}=h({open:C,onOpenChange:k,placement:m,middleware:[d(b),p(),g()],whileElementsMounted:v});c(()=>{t.backgroundColor&&F(t.backgroundColor),t.color&&E(t.color)},[t]),c(()=>{if(!C)return;const e=e=>{const r=e.target,o=O.reference.current,t=O.floating.current;o&&o instanceof Element&&o.contains(r)||(null==t?void 0:t.contains(r))||k(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[C,O.floating,O.reference]);const j=e=>{"backgroundColor"===x?(F(e),null==n||n(Object.assign(Object.assign({},t),{backgroundColor:e}))):(E(e),null==n||n(Object.assign(Object.assign({},t),{color:e})))},H="backgroundColor"===x?y:N,I=f(s,{ref:O.setReference,onClick:e=>{var r,o;e.stopPropagation(),k(e=>!e),null===(o=(r=s.props).onClick)||void 0===o||o.call(r,e)}});return e(r,{children:[I,C&&e("div",Object.assign({ref:e=>{O.setFloating(e),_&&("function"==typeof _?_(e):_.current=e)},style:M,className:`yoopta-highlight-color-picker ${null!=u?u:""}`,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation()},{children:[e("div",Object.assign({className:"yoopta-highlight-color-picker__mode-toggle"},{children:[o("button",Object.assign({type:"button",className:"yoopta-highlight-color-picker__mode-btn","data-active":"backgroundColor"===x,onClick:()=>w("backgroundColor"),"aria-label":"Background color"},{children:"Background"})),o("button",Object.assign({type:"button",className:"yoopta-highlight-color-picker__mode-btn","data-active":"color"===x,onClick:()=>w("color"),"aria-label":"Text color"},{children:"Text"}))]})),o("div",Object.assign({className:"yoopta-highlight-color-picker__picker"},{children:o(R,{color:H,onChange:j,className:"yoopta-highlight-color-picker__react-colorful"})})),a.length>0&&o("div",Object.assign({className:"yoopta-highlight-color-picker__presets"},{children:a.map(e=>{const r=(null==H?void 0:H.toLowerCase())===e.toLowerCase();return o("button",{type:"button",className:"yoopta-highlight-color-picker__preset","data-selected":r,style:{backgroundColor:e},onClick:()=>j(e),"aria-label":`Select color ${e}`},e)})})),l&&e("div",Object.assign({className:"yoopta-highlight-color-picker__hex-row"},{children:[o("div",{className:"yoopta-highlight-color-picker__swatch",style:{backgroundColor:H}}),o(G,{color:H,onChange:j,className:"yoopta-highlight-color-picker__hex-input",prefixed:!0})]}))]}))]})});Q.displayName="HighlightColorPicker";export{Q as H};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_ as e}from"./_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{forwardRef as o,useCallback as a,useMemo as s,useEffect as n}from"react";import{Portal as r}from"../portal.js";import{u as i,i as l,f as c,s as d,o as p,a as u,b as m}from"./floating-ui.react-33212df0.js";import{useYooptaEditor as f}from"@yoopta/editor";import{c as g}from"./index-06d5c4e7.js";import{t as h}from"./throttle-dea4a39e.js";const v=o((o,a)=>{var{className:s,children:n}=o,i=e(o,["className","children"]);return t(r,Object.assign({id:"yoopta-ui-toolbar-portal"},{children:t("div",Object.assign({ref:a,className:`yoopta-ui-toolbar ${s||""}`,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation()},i,{children:n}))}))});v.displayName="Toolbar.Root";const b=o((o,a)=>{var{className:s,children:n}=o,r=e(o,["className","children"]);return t("div",Object.assign({ref:a,className:`yoopta-ui-toolbar-group ${s}`},r,{children:n}))});b.displayName="Toolbar.Group";const y=o((o,a)=>{var{className:s}=o,n=e(o,["className"]);return t("div",Object.assign({ref:a,className:`yoopta-ui-toolbar-separator ${s}`},n))});y.displayName="Toolbar.Separator";const N=o((o,a)=>{var{className:s,children:n,active:r,disabled:i,type:l="button"}=o,c=e(o,["className","children","active","disabled","type"]);return t("button",Object.assign({ref:a,type:l,disabled:i,"data-active":r,className:`yoopta-ui-toolbar-button ${s}`},c,{children:n}))});N.displayName="Toolbar.Button";const j={Root:v,Group:b,Separator:y,Button:N},w=g()(e=>({state:"closed",frozen:!1,open(){e({state:"open"})},close(){e({state:"closed",frozen:!1})},toggle(t){e({state:t})},setFrozen(t){e({frozen:t})},reset(){e({state:"closed",frozen:!1})}})),O=()=>{const e=f(),{state:t,frozen:o,open:r,close:g,setFrozen:v,toggle:b,reset:y}=w(),{refs:N,floatingStyles:j,context:O}=i({placement:"top",open:"open"===t,middleware:[l(),c(),d(),p(10)],whileElementsMounted:u}),{isMounted:R,styles:z}=m(O,{duration:100}),A=a(()=>{var a,s;if(o)return;const n=N.floating.current;if(n&&n.contains(document.activeElement))return;const i=window.getSelection();if(!i||(null==i?void 0:i.isCollapsed)||(null==i?void 0:i.anchorOffset)===(null==i?void 0:i.focusOffset))return void("open"===t&&g());const l=i.getRangeAt(0),c=l.getBoundingClientRect(),d=l.toString().trim(),p=null==l?void 0:l.commonAncestorContainer,u=!!(null===(a=null==p?void 0:p.closest)||void 0===a?void 0:a.call(p,"[data-custom-editor]"));if((null===(s=e.refElement)||void 0===s?void 0:s.contains(p))&&!u){if(l&&d.length>0){const e={getBoundingClientRect:()=>c,getClientRects:()=>l.getClientRects()};N.setReference(e),"open"!==t&&r()}}else"open"===t&&g()},[o,N,e.refElement,g,r,t]),C=a(()=>{var o;if(!Array.isArray(e.path.selected)||0===e.path.selected.length||"mousemove"!==e.path.source&&"keyboard"!==e.path.source)return void("open"===t&&g());const a=Math.min(...e.path.selected),s=Math.max(...e.path.selected);let n=!0;"number"==typeof e.path.current&&(n=Math.abs(e.path.current-s)<=Math.abs(e.path.current-a));const i=e.getBlock({at:n?s:a});if(!i)return;const l=null===(o=e.refElement)||void 0===o?void 0:o.querySelector(`[data-yoopta-block-id="${i.id}"]`);l&&(N.setReference(l),"open"!==t&&r())},[e,N,g,r,t]),M=s(()=>h(A,200,{leading:!0,trailing:!0}),[A]);n(()=>{if(Array.isArray(e.path.selected)||e.path.selection){if(!Array.isArray(e.path.selected)||e.path.selection)return window.document.addEventListener("selectionchange",M),()=>window.document.removeEventListener("selectionchange",M);C()}else"open"===t&&g()},[e.path.selected,e.path.selection,t,M,g,C]);const E=s(()=>Object.assign(Object.assign({},j),z),[j,z]);return{isOpen:R,state:t,frozen:o,open:r,close:g,toggle:b,setFrozen:v,reset:y,getRootProps:()=>({ref:N.setFloating,style:E,onClick:e=>e.stopPropagation(),onMouseDown:e=>e.stopPropagation()})}};export{j as T,w as a,O as u};
|