@yoopta/ui 6.0.0-beta.7 → 6.0.0-beta.8

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.
Files changed (72) hide show
  1. package/dist/action-menu-list/action-menu-list.d.ts +49 -13
  2. package/dist/action-menu-list/action-menu-list.d.ts.map +1 -1
  3. package/dist/action-menu-list/context.d.ts +25 -0
  4. package/dist/action-menu-list/context.d.ts.map +1 -0
  5. package/dist/action-menu-list/index.d.ts +5 -5
  6. package/dist/action-menu-list/index.d.ts.map +1 -1
  7. package/dist/action-menu-list/utils.d.ts +1 -1
  8. package/dist/action-menu-list/utils.d.ts.map +1 -1
  9. package/dist/action-menu-list.js +1 -1
  10. package/dist/block-options/block-options.d.ts.map +1 -1
  11. package/dist/block-options.js +1 -1
  12. package/dist/chunks/{floating-ui.react-33212df0.js → floating-ui.react-727e4287.js} +1 -1
  13. package/dist/chunks/{highlight-color-picker-ea799f50.js → highlight-color-picker-ce0b19ac.js} +1 -1
  14. package/dist/element-options/context/element-options-context.d.ts +2 -2
  15. package/dist/element-options.js +18 -5
  16. package/dist/floating-block-actions/context.d.ts +15 -0
  17. package/dist/floating-block-actions/context.d.ts.map +1 -0
  18. package/dist/floating-block-actions/floating-block-actions.d.ts +30 -7
  19. package/dist/floating-block-actions/floating-block-actions.d.ts.map +1 -1
  20. package/dist/floating-block-actions/hooks.d.ts +1 -29
  21. package/dist/floating-block-actions/hooks.d.ts.map +1 -1
  22. package/dist/floating-block-actions/index.d.ts +3 -4
  23. package/dist/floating-block-actions/index.d.ts.map +1 -1
  24. package/dist/floating-block-actions.js +1 -1
  25. package/dist/floating-toolbar/context.d.ts +12 -0
  26. package/dist/floating-toolbar/context.d.ts.map +1 -0
  27. package/dist/floating-toolbar/floating-toolbar.d.ts +44 -0
  28. package/dist/floating-toolbar/floating-toolbar.d.ts.map +1 -0
  29. package/dist/floating-toolbar/index.d.ts +5 -0
  30. package/dist/floating-toolbar/index.d.ts.map +1 -0
  31. package/dist/floating-toolbar.js +1 -0
  32. package/dist/highlight-color-picker.js +1 -1
  33. package/dist/index.d.ts +3 -5
  34. package/dist/index.d.ts.map +1 -1
  35. package/dist/index.js +1 -1
  36. package/dist/overlay.js +1 -1
  37. package/dist/portal.js +1 -1
  38. package/dist/slash-command-menu.js +1 -1
  39. package/package.json +7 -14
  40. package/dist/action-menu-list/hooks.d.ts +0 -912
  41. package/dist/action-menu-list/hooks.d.ts.map +0 -1
  42. package/dist/action-menu-list/store.d.ts +0 -22
  43. package/dist/action-menu-list/store.d.ts.map +0 -1
  44. package/dist/action-menu-list/store.test.d.ts +0 -2
  45. package/dist/action-menu-list/store.test.d.ts.map +0 -1
  46. package/dist/chunks/hooks-814f49b9.js +0 -1
  47. package/dist/chunks/hooks-ad9169d0.js +0 -1
  48. package/dist/chunks/index-06d5c4e7.js +0 -10
  49. package/dist/floating-block-actions/store.d.ts +0 -19
  50. package/dist/floating-block-actions/store.d.ts.map +0 -1
  51. package/dist/floating-block-actions/store.test.d.ts +0 -2
  52. package/dist/floating-block-actions/store.test.d.ts.map +0 -1
  53. package/dist/theme/ThemeProvider.d.ts +0 -16
  54. package/dist/theme/ThemeProvider.d.ts.map +0 -1
  55. package/dist/theme/ThemeToggle.d.ts +0 -6
  56. package/dist/theme/ThemeToggle.d.ts.map +0 -1
  57. package/dist/theme/index.d.ts +0 -5
  58. package/dist/theme/index.d.ts.map +0 -1
  59. package/dist/theme/useTheme.d.ts +0 -8
  60. package/dist/theme/useTheme.d.ts.map +0 -1
  61. package/dist/theme.js +0 -1
  62. package/dist/toolbar/hooks.d.ts +0 -879
  63. package/dist/toolbar/hooks.d.ts.map +0 -1
  64. package/dist/toolbar/index.d.ts +0 -6
  65. package/dist/toolbar/index.d.ts.map +0 -1
  66. package/dist/toolbar/store.d.ts +0 -12
  67. package/dist/toolbar/store.d.ts.map +0 -1
  68. package/dist/toolbar/store.test.d.ts +0 -2
  69. package/dist/toolbar/store.test.d.ts.map +0 -1
  70. package/dist/toolbar/toolbar.d.ts +0 -20
  71. package/dist/toolbar/toolbar.d.ts.map +0 -1
  72. package/dist/toolbar.js +0 -1
@@ -1,14 +1,27 @@
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";
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-727e4287.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 N=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:N,"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:N},{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:N,"aria-label":`Select color ${t}`},t))}))]}))}))]})};w.displayName="ElementOptions.ColorPicker";const O=l(null);function N(){const e=i(O);if(!e)throw new Error("useElementOptionsContext must be used within an ElementOptions.Root");return e}function j(){const{blockId:e,element:t,editor:o,isOpen:n,setIsOpen:a}=N();return{blockId:e,element:t,editor:o,isOpen:n,setIsOpen:a}}function E(){const{blockId:e,element:t,editor:o}=N();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}=N(),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 R=({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}))}))};R.displayName="ElementOptions.Root";
2
2
  /**
3
- * @license lucide-react v0.294.0 - ISC
3
+ * @license lucide-react v0.378.0 - ISC
4
4
  *
5
5
  * This source code is licensed under the ISC license.
6
6
  * See the LICENSE file in the root directory of this source tree.
7
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"};
8
+ const I=(...e)=>e.filter((e,t,o)=>Boolean(e)&&o.indexOf(e)===t).join(" ");
9
9
  /**
10
- * @license lucide-react v0.294.0 - ISC
10
+ * @license lucide-react v0.378.0 - ISC
11
11
  *
12
12
  * This source code is licensed under the ISC license.
13
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};
14
+ */
15
+ var M={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"};
16
+ /**
17
+ * @license lucide-react v0.378.0 - ISC
18
+ *
19
+ * This source code is licensed under the ISC license.
20
+ * See the LICENSE file in the root directory of this source tree.
21
+ */const S=c(({color:e="currentColor",size:t=24,strokeWidth:o=2,absoluteStrokeWidth:n,className:a="",children:r,iconNode:s,...l},i)=>p("svg",{ref:i,...M,width:t,height:t,stroke:e,strokeWidth:n?24*Number(o)/Number(t):o,className:I("lucide",a),...l},[...s.map(([e,t])=>p(e,t)),...Array.isArray(r)?r:[r]])),$=(e,t)=>{const o=c(({className:o,...n},a)=>{return p(S,{ref:a,iconNode:t,className:I(`lucide-${r=e,r.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,o),...n});var r});return o.displayName=`${e}`,o},P=$("Check",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]),F=$("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]]),A=$("Ellipsis",[["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"}]]),B=({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:N,floatingStyles:j}=m({open:k,placement:"bottom-start",middleware:[u(4),g({padding:8}),b({padding:8})],whileElementsMounted:f});s(()=>{w.current&&N.setReference(w.current)},[N]),s(()=>{if(!k)return;const e=e=>{const t=e.target;w.current&&!w.current.contains(t)&&N.floating.current&&!N.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,N.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(F,{"data-element-options-select-chevron":!0})]})),k&&n(x,Object.assign({id:"element-options-select-portal"},{children:n("div",Object.assign({ref:N.setFloating,style:j,"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(P,{"data-element-options-select-check":!0})]}),String(o.value)))}))}))]});var D,z};
22
+ /**
23
+ * @license lucide-react v0.378.0 - ISC
24
+ *
25
+ * This source code is licensed under the ISC license.
26
+ * See the LICENSE file in the root directory of this source tree.
27
+ */B.displayName="ElementOptions.Select";const T=({className:e,style:t})=>n("div",{className:e,style:t,"data-element-options-separator":!0,role:"separator","aria-orientation":"horizontal"});T.displayName="ElementOptions.Separator";const W=({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}))]}))};W.displayName="ElementOptions.Slider";const V=({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}))]}));V.displayName="ElementOptions.Toggle";const G=({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}=N(),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(A,{className:"yoo-element-options-trigger-icon"})}))};G.displayName="ElementOptions.Trigger";const q=Object.assign(R,{Root:R,Trigger:G,Content:C,Group:D,Label:L,Separator:T,Select:B,ColorPicker:w,Toggle:V,Slider:W,Input:z});export{q as ElementOptions,w as ElementOptionsColorPicker,C as ElementOptionsContent,O as ElementOptionsContext,D as ElementOptionsGroup,z as ElementOptionsInput,L as ElementOptionsLabel,R as ElementOptionsRoot,B as ElementOptionsSelect,T as ElementOptionsSeparator,W as ElementOptionsSlider,V as ElementOptionsToggle,G as ElementOptionsTrigger,j as useElementOptions,N as useElementOptionsContext,E as useUpdateElementProps};
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ import type { YooptaBlockData } from '@yoopta/editor';
3
+ export type FloatingBlockActionsContextValue = {
4
+ /** Currently hovered block ID */
5
+ blockId: string | null;
6
+ /** Block data for the hovered block */
7
+ blockData: YooptaBlockData | null;
8
+ /** Whether actions are visible */
9
+ isVisible: boolean;
10
+ /** Hide the floating actions manually */
11
+ hide: () => void;
12
+ };
13
+ export declare const FloatingBlockActionsContext: import("react").Context<FloatingBlockActionsContextValue | null>;
14
+ export declare const useFloatingBlockActionsContext: () => FloatingBlockActionsContextValue;
15
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/context.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,MAAM,gCAAgC,GAAG;IAC7C,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,uCAAuC;IACvC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,2BAA2B,kEAA+D,CAAC;AAExG,eAAO,MAAM,8BAA8B,wCAQ1C,CAAC"}
@@ -1,14 +1,37 @@
1
- import { type ReactNode, type CSSProperties } from 'react';
1
+ import { type ReactNode } from 'react';
2
+ import { type YooptaBlockData } from '@yoopta/editor';
2
3
  import './floating-block-actions.css';
4
+ type FloatingBlockActionsApi = {
5
+ /** Currently hovered block ID */
6
+ blockId: string | null;
7
+ /** Block data for the hovered block */
8
+ blockData: YooptaBlockData | null;
9
+ /** Whether actions are visible */
10
+ isVisible: boolean;
11
+ /** Hide the floating actions manually */
12
+ hide: () => void;
13
+ };
3
14
  type FloatingBlockActionsRootProps = {
4
- children: ReactNode;
15
+ children: ReactNode | ((api: FloatingBlockActionsApi) => ReactNode);
16
+ /** When true, hover tracking is paused (e.g., when BlockOptions is open) */
17
+ frozen?: boolean;
5
18
  className?: string;
6
- style?: CSSProperties;
7
19
  };
8
- export declare const FloatingBlockActions: import("react").NamedExoticComponent<FloatingBlockActionsRootProps> & {
9
- readonly type: ({ children, className }: FloatingBlockActionsRootProps) => import("react/jsx-runtime").JSX.Element;
20
+ type FloatingBlockActionsButtonProps = {
21
+ children: ReactNode;
22
+ onClick?: (event: React.MouseEvent) => void;
23
+ className?: string;
24
+ disabled?: boolean;
25
+ title?: string;
26
+ } & React.ButtonHTMLAttributes<HTMLButtonElement>;
27
+ export declare const FloatingBlockActions: {
28
+ ({ children, frozen, className }: FloatingBlockActionsRootProps): import("react/jsx-runtime").JSX.Element;
29
+ displayName: string;
10
30
  } & {
11
- Root: import("react").MemoExoticComponent<({ children, className }: FloatingBlockActionsRootProps) => import("react/jsx-runtime").JSX.Element>;
31
+ Root: {
32
+ ({ children, frozen, className }: FloatingBlockActionsRootProps): import("react/jsx-runtime").JSX.Element;
33
+ displayName: string;
34
+ };
12
35
  Button: import("react").ForwardRefExoticComponent<{
13
36
  children: ReactNode;
14
37
  onClick?: ((event: React.MouseEvent) => void) | undefined;
@@ -17,5 +40,5 @@ export declare const FloatingBlockActions: import("react").NamedExoticComponent<
17
40
  title?: string | undefined;
18
41
  } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
19
42
  };
20
- export {};
43
+ export type { FloatingBlockActionsRootProps, FloatingBlockActionsButtonProps, FloatingBlockActionsApi };
21
44
  //# sourceMappingURL=floating-block-actions.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"floating-block-actions.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/floating-block-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,aAAa,EAAQ,MAAM,OAAO,CAAC;AAC7E,OAAO,8BAA8B,CAAC;AAGtC,KAAK,6BAA6B,GAAG;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AA8CF,eAAO,MAAM,oBAAoB;6CApC+B,6BAA6B;;wEAA7B,6BAA6B;;kBAPjF,SAAS;2BACD,gBAAgB,KAAK,IAAI;;;;;CA6C3C,CAAC"}
1
+ {"version":3,"file":"floating-block-actions.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/floating-block-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAIvE,OAAO,8BAA8B,CAAC;AAEtC,KAAK,uBAAuB,GAAG;IAC7B,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,uCAAuC;IACvC,SAAS,EAAE,eAAe,GAAG,IAAI,CAAC;IAClC,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,KAAK,6BAA6B,GAAG;IACnC,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE,uBAAuB,KAAK,SAAS,CAAC,CAAC;IACpE,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAgNlD,eAAO,MAAM,oBAAoB;sCA1L+C,6BAA6B;;;;0CAA7B,6BAA6B;;;;kBA3BjG,SAAS;2BACD,gBAAgB,KAAK,IAAI;;;;;CAuN3C,CAAC;AAEH,YAAY,EAAE,6BAA6B,EAAE,+BAA+B,EAAE,uBAAuB,EAAE,CAAC"}
@@ -1,30 +1,2 @@
1
- /// <reference types="react" />
2
- /**
3
- * Lightweight hook for accessing only store actions
4
- * Use this when you only need to control the state programmatically
5
- * without needing the mouse tracking logic
6
- */
7
- export declare const useFloatingBlockActionsActions: () => {
8
- reference: HTMLElement | null;
9
- floatingBlockId: string | null;
10
- state: import("./store").FloatingBlockActionsState;
11
- styles: import("react").CSSProperties;
12
- toggle: (actionState: import("./store").FloatingBlockActionsState, blockId?: string | null | undefined) => void;
13
- hide: () => void;
14
- reset: () => void;
15
- };
16
- /**
17
- * Full hook for FloatingBlockActions
18
- * Handles mouse tracking, positioning, and provides access to store
19
- * Use this only in the component that renders the FloatingBlockActions
20
- */
21
- export declare const useFloatingBlockActions: () => {
22
- reference: HTMLElement | null;
23
- floatingBlockId: string | null;
24
- state: import("./store").FloatingBlockActionsState;
25
- styles: import("react").CSSProperties;
26
- toggle: (actionState: import("./store").FloatingBlockActionsState, blockId?: string | null | undefined) => void;
27
- hide: () => void;
28
- reset: () => void;
29
- };
1
+ export { useFloatingBlockActionsContext } from './context';
30
2
  //# sourceMappingURL=hooks.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/hooks.ts"],"names":[],"mappings":";AAKA;;;;GAIG;AACH,eAAO,MAAM,8BAA8B;;;;;;;;CAY1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;CA6HnC,CAAC"}
1
+ {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAC"}
@@ -1,6 +1,5 @@
1
1
  export { FloatingBlockActions } from './floating-block-actions';
2
- export { useFloatingBlockActions, useFloatingBlockActionsActions } from './hooks';
3
- export { useFloatingBlockActionsStore } from './store';
4
- export type { FloatingBlockActionsState, FloatingBlockActionsStore } from './store';
5
- import './floating-block-actions.css';
2
+ export type { FloatingBlockActionsApi, FloatingBlockActionsButtonProps, FloatingBlockActionsRootProps, } from './floating-block-actions';
3
+ export { useFloatingBlockActionsContext } from './hooks';
4
+ export type { FloatingBlockActionsContextValue } from './context';
6
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,EAAE,uBAAuB,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAGlF,OAAO,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AACvD,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAGpF,OAAO,8BAA8B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/floating-block-actions/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,uBAAuB,EACvB,+BAA+B,EAC/B,6BAA6B,GAC9B,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAC;AAGzD,YAAY,EAAE,gCAAgC,EAAE,MAAM,WAAW,CAAC"}
@@ -1 +1 @@
1
- import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{memo as a,forwardRef as e,useCallback as i,useEffect as n}from"react";import{s as r}from"./chunks/style-inject.es-e87a8d02.js";import{c as l}from"./chunks/index-06d5c4e7.js";import{useYooptaEditor as s}from"@yoopta/editor";import{t as u}from"./chunks/throttle-dea4a39e.js";r(":root{--yoopta-ui-background:0 0% 100%;--yoopta-ui-foreground:222.2 84% 4.9%;--yoopta-ui-muted:210 40% 96.1%;--yoopta-ui-muted-foreground:215.4 16.3% 46.9%;--yoopta-ui-border:214.3 31.8% 91.4%;--yoopta-ui-ring:222.2 84% 4.9%;--yoopta-ui-accent:210 40% 96.1%;--yoopta-ui-accent-foreground:222.2 47.4% 11.2%;--yoopta-ui-floating-bg:var(--yoopta-ui-background);--yoopta-ui-floating-border:var(--yoopta-ui-border);--yoopta-ui-floating-shadow:0 1px 2px 0 rgba(0,0,0,.05);--yoopta-ui-floating-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--yoopta-ui-floating-z-index:100;--yoopta-ui-floating-gap:1px;--yoopta-ui-floating-padding:3px;--yoopta-ui-floating-radius:0.5rem;--yoopta-ui-floating-offset:46px;--yoopta-ui-floating-button-min-width:24px;--yoopta-ui-floating-button-min-height:24px;--yoopta-ui-floating-button-padding-y:4px;--yoopta-ui-floating-button-padding-x:6px;--yoopta-ui-floating-button-color:var(--yoopta-ui-foreground);--yoopta-ui-floating-button-bg:transparent;--yoopta-ui-floating-button-hover:var(--yoopta-ui-accent);--yoopta-ui-floating-button-active:var(--yoopta-ui-accent);--yoopta-ui-floating-button-radius:0.375rem;--yoopta-ui-floating-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;--yoopta-ui-floating-ring-offset:2px;--yoopta-ui-floating-ring:var(--yoopta-ui-ring);--yoopta-ui-floating-icon-size:1rem}.dark,[data-theme=dark],[data-yoopta-theme=dark]{--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-muted:217.2 32.6% 17.5%;--yoopta-ui-muted-foreground:215 20.2% 65.1%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-accent-foreground:210 40% 98%;--yoopta-ui-floating-shadow:0 1px 2px 0 rgba(0,0,0,.3);--yoopta-ui-floating-shadow-md:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.3)}.yoopta-ui-floating-block-actions{align-items:center;background-color:hsl(var(--yoopta-ui-floating-bg));border:1px solid hsl(var(--yoopta-ui-floating-border));border-radius:var(--yoopta-ui-floating-radius);box-shadow:var(--yoopta-ui-floating-shadow-md);display:inline-flex;gap:var(--yoopta-ui-floating-gap);padding:var(--yoopta-ui-floating-padding);z-index:var(--yoopta-ui-floating-z-index)}.yoopta-ui-floating-action-button{align-items:center;background-color:var(--yoopta-ui-floating-button-bg);border:none;border-radius:var(--yoopta-ui-floating-button-radius);color:hsl(var(--yoopta-ui-floating-button-color));cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1;min-height:var(--yoopta-ui-floating-button-min-height);min-width:var(--yoopta-ui-floating-button-min-width);outline:none;padding:var(--yoopta-ui-floating-button-padding-y) var(--yoopta-ui-floating-button-padding-x);touch-action:manipulation;transition:var(--yoopta-ui-floating-transition);-moz-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap}.yoopta-ui-floating-action-button:hover{background-color:hsl(var(--yoopta-ui-floating-button-hover));color:hsl(var(--yoopta-ui-accent-foreground))}.yoopta-ui-floating-action-button:active{background-color:hsl(var(--yoopta-ui-floating-button-active));transform:scale(.98)}.yoopta-ui-floating-action-button:focus-visible{box-shadow:0 0 0 var(--yoopta-ui-floating-ring-offset) hsl(var(--yoopta-ui-background)),0 0 0 calc(var(--yoopta-ui-floating-ring-offset) + 2px) hsl(var(--yoopta-ui-floating-ring));outline:none}.yoopta-ui-floating-action-button:disabled{opacity:.5;pointer-events:none}.yoopta-ui-floating-action-button svg{flex-shrink:0;height:var(--yoopta-ui-floating-icon-size);width:var(--yoopta-ui-floating-icon-size)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-muted:217.2 32.6% 17.5%;--yoopta-ui-muted-foreground:215 20.2% 65.1%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-accent-foreground:210 40% 98%}}");const p={position:"fixed",top:0,left:0,opacity:0,pointerEvents:"none",transform:"scale(0.95) translateX(-46px)",transition:"opacity 150ms ease-out, transform 150ms ease-out"},c=l()((o,t)=>({blockId:null,state:"closed",position:{top:0,left:0},styles:p,reference:null,setReference(t){o({reference:t})},toggle(t,a){o({state:t,blockId:a||null})},updatePosition(a,e,i=46){o({position:{top:a,left:e},styles:Object.assign(Object.assign({},t().styles),{top:a,left:e,opacity:1,transform:`scale(1) translateX(-${i+2}px)`,pointerEvents:"auto"})})},hide(){o({state:"closed",blockId:null,styles:Object.assign(Object.assign({},t().styles),{opacity:0,transform:p.transform,pointerEvents:"none"})})},reset(){o({blockId:null,state:"closed",position:{top:0,left:0},styles:p})}})),d=a(({children:o,className:a})=>{const{setReference:e,styles:i}=c();return t("div",Object.assign({ref:e,className:`yoopta-ui-floating-block-actions ${a}`,style:i,contentEditable:!1,onClick:o=>o.stopPropagation(),onMouseDown:o=>o.stopPropagation()},{children:o}))});d.displayName="FloatingBlockActions.Root";const g=e((a,e)=>{var{children:i,onClick:n,className:r="",disabled:l,title:s}=a,u=o(a,["children","onClick","className","disabled","title"]);return t("button",Object.assign({ref:e,type:"button",className:`yoopta-ui-floating-action-button ${r}`,onClick:n,disabled:l,title:s,"aria-label":s},u,{children:i}))});g.displayName="FloatingBlockActions.Button";const f=Object.assign(d,{Root:d,Button:g}),y=()=>{const o=c();return{reference:o.reference,floatingBlockId:o.blockId,state:o.state,styles:o.styles,toggle:o.toggle,hide:o.hide,reset:o.reset}},b=()=>{const o=s(),t=c(),a=i((o,a)=>{var e;const i=o.getBoundingClientRect(),n=(null===(e=t.reference)||void 0===e?void 0:e.offsetWidth)||46;t.updatePosition(i.top+2,i.left,n)},[t]),e=i(()=>{t.hide()},[t]),r=i(t=>{if(!o.refElement)return null;const a=o.refElement.querySelectorAll("[data-yoopta-block]"),e=window.innerHeight;let i=null,n=1/0;if(a.forEach(o=>{const a=o.getBoundingClientRect();if(a.bottom<-200||a.top>e+200)return;if(t>=a.top&&t<=a.bottom)return i=o,void(n=0);const r=t<a.top?a.top-t:t-a.bottom;r<n&&(n=r,i=o)}),i&&n<=100){const t=i.getAttribute("data-yoopta-block-id"),a=t?o.children[t]:null;if(t&&a)return{element:i,data:a}}return null},[o]),l=i(i=>{var n,l;if("frozen"===t.state)return;const s=i.target,u=null===(n=o.refElement)||void 0===n?void 0:n.contains(i.target),p=null===(l=t.reference)||void 0===l?void 0:l.contains(s);if(!u)return e();if(o.readOnly)return;if(p)return;const c=r(i.clientY);if(c){const{element:o,data:e}=c;e.id!==t.blockId&&(t.toggle("hovering",e.id),a(o,e))}else null!==t.blockId&&e()},[t,o,e,r,a]),p=u(l,100,{leading:!0,trailing:!0});return n(()=>{const o=()=>{"frozen"!==t.state&&e()};return document.addEventListener("mousemove",p),document.addEventListener("scroll",o,!0),()=>{document.removeEventListener("mousemove",p),document.removeEventListener("scroll",o,!0)}},[p,e,t.state]),{reference:t.reference,floatingBlockId:t.blockId,state:t.state,styles:t.styles,toggle:t.toggle,hide:t.hide,reset:t.reset}};export{f as FloatingBlockActions,b as useFloatingBlockActions,y as useFloatingBlockActionsActions,c as useFloatingBlockActionsStore};
1
+ import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{createContext as i,useContext as a,forwardRef as n,useRef as e,useState as r,useCallback as u,useMemo as l,useEffect as p}from"react";import{useYooptaEditor as s}from"@yoopta/editor";import{t as c}from"./chunks/throttle-dea4a39e.js";import{s as d}from"./chunks/style-inject.es-e87a8d02.js";const g=i(null),f=()=>{const o=a(g);if(!o)throw new Error("FloatingBlockActions components must be used within <FloatingBlockActions>");return o};d(":root{--yoopta-ui-background:0 0% 100%;--yoopta-ui-foreground:222.2 84% 4.9%;--yoopta-ui-muted:210 40% 96.1%;--yoopta-ui-muted-foreground:215.4 16.3% 46.9%;--yoopta-ui-border:214.3 31.8% 91.4%;--yoopta-ui-ring:222.2 84% 4.9%;--yoopta-ui-accent:210 40% 96.1%;--yoopta-ui-accent-foreground:222.2 47.4% 11.2%;--yoopta-ui-floating-bg:var(--yoopta-ui-background);--yoopta-ui-floating-border:var(--yoopta-ui-border);--yoopta-ui-floating-shadow:0 1px 2px 0 rgba(0,0,0,.05);--yoopta-ui-floating-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--yoopta-ui-floating-z-index:100;--yoopta-ui-floating-gap:1px;--yoopta-ui-floating-padding:3px;--yoopta-ui-floating-radius:0.5rem;--yoopta-ui-floating-offset:46px;--yoopta-ui-floating-button-min-width:24px;--yoopta-ui-floating-button-min-height:24px;--yoopta-ui-floating-button-padding-y:4px;--yoopta-ui-floating-button-padding-x:6px;--yoopta-ui-floating-button-color:var(--yoopta-ui-foreground);--yoopta-ui-floating-button-bg:transparent;--yoopta-ui-floating-button-hover:var(--yoopta-ui-accent);--yoopta-ui-floating-button-active:var(--yoopta-ui-accent);--yoopta-ui-floating-button-radius:0.375rem;--yoopta-ui-floating-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;--yoopta-ui-floating-ring-offset:2px;--yoopta-ui-floating-ring:var(--yoopta-ui-ring);--yoopta-ui-floating-icon-size:1rem}.dark,[data-theme=dark],[data-yoopta-theme=dark]{--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-muted:217.2 32.6% 17.5%;--yoopta-ui-muted-foreground:215 20.2% 65.1%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-accent-foreground:210 40% 98%;--yoopta-ui-floating-shadow:0 1px 2px 0 rgba(0,0,0,.3);--yoopta-ui-floating-shadow-md:0 4px 6px -1px rgba(0,0,0,.5),0 2px 4px -2px rgba(0,0,0,.3)}.yoopta-ui-floating-block-actions{align-items:center;background-color:hsl(var(--yoopta-ui-floating-bg));border:1px solid hsl(var(--yoopta-ui-floating-border));border-radius:var(--yoopta-ui-floating-radius);box-shadow:var(--yoopta-ui-floating-shadow-md);display:inline-flex;gap:var(--yoopta-ui-floating-gap);padding:var(--yoopta-ui-floating-padding);z-index:var(--yoopta-ui-floating-z-index)}.yoopta-ui-floating-action-button{align-items:center;background-color:var(--yoopta-ui-floating-button-bg);border:none;border-radius:var(--yoopta-ui-floating-button-radius);color:hsl(var(--yoopta-ui-floating-button-color));cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1;min-height:var(--yoopta-ui-floating-button-min-height);min-width:var(--yoopta-ui-floating-button-min-width);outline:none;padding:var(--yoopta-ui-floating-button-padding-y) var(--yoopta-ui-floating-button-padding-x);touch-action:manipulation;transition:var(--yoopta-ui-floating-transition);-moz-user-select:none;user-select:none;-webkit-user-select:none;white-space:nowrap}.yoopta-ui-floating-action-button:hover{background-color:hsl(var(--yoopta-ui-floating-button-hover));color:hsl(var(--yoopta-ui-accent-foreground))}.yoopta-ui-floating-action-button:active{background-color:hsl(var(--yoopta-ui-floating-button-active));transform:scale(.98)}.yoopta-ui-floating-action-button:focus-visible{box-shadow:0 0 0 var(--yoopta-ui-floating-ring-offset) hsl(var(--yoopta-ui-background)),0 0 0 calc(var(--yoopta-ui-floating-ring-offset) + 2px) hsl(var(--yoopta-ui-floating-ring));outline:none}.yoopta-ui-floating-action-button:disabled{opacity:.5;pointer-events:none}.yoopta-ui-floating-action-button svg{flex-shrink:0;height:var(--yoopta-ui-floating-icon-size);width:var(--yoopta-ui-floating-icon-size)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-muted:217.2 32.6% 17.5%;--yoopta-ui-muted-foreground:215 20.2% 65.1%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-accent-foreground:210 40% 98%}}");const y={position:"fixed",top:0,left:0,opacity:0,pointerEvents:"none",transform:"scale(0.95)",transition:"transform 150ms ease-out"},b=({children:o,frozen:i=!1,className:a=""})=>{var n;const d=s(),f=e(null),[b,m]=r(null),[v,h]=r(y),x=b&&null!==(n=d.children[b])&&void 0!==n?n:null,k=null!==b&&1===v.opacity,w=u(()=>{m(null),h(y)},[]),E=u(o=>{var t,i;const a=o.getBoundingClientRect(),n=null!==(i=null===(t=f.current)||void 0===t?void 0:t.offsetWidth)&&void 0!==i?i:46;var e,r;h((e=a.top+2,r=a.left,{position:"fixed",top:e,left:r,opacity:1,pointerEvents:"auto",transform:`scale(1) translateX(-${n+2}px)`,transition:"transform 150ms ease-out"}))},[]),j=u(o=>{if(!d.refElement)return null;const t=d.refElement.querySelectorAll("[data-yoopta-block]"),i=window.innerHeight;let a=null,n=1/0;for(const e of t){const t=e.getBoundingClientRect();if(t.bottom<-200||t.top>i+200)continue;if(o>=t.top&&o<=t.bottom){a=e,n=0;break}const r=o<t.top?t.top-o:o-t.bottom;r<n&&(n=r,a=e)}if(a&&n<=100){const o=a.getAttribute("data-yoopta-block-id"),t=o?d.children[o]:null;if(o&&t)return{element:a,data:t}}return null},[d]),z=u(o=>{var t,a;if(i)return;const n=o.target,e=null===(t=d.refElement)||void 0===t?void 0:t.contains(n),r=null===(a=f.current)||void 0===a?void 0:a.contains(n);if(!e)return void w();if(d.readOnly)return;if(r)return;const u=j(o.clientY);if(u){const{element:o,data:t}=u;t.id!==b&&(m(t.id),E(o))}else null!==b&&w()},[i,d,b,j,E,w]),B=l(()=>c(z,100,{leading:!0,trailing:!0}),[z]);p(()=>{const o=()=>{i||w()};return document.addEventListener("mousemove",B),document.addEventListener("scroll",o,!0),()=>{document.removeEventListener("mousemove",B),document.removeEventListener("scroll",o,!0)}},[B,w,i]);const N=l(()=>({blockId:b,blockData:x,isVisible:k,hide:w}),[b,x,k,w]),A="function"==typeof o?o(N):o;return t(g.Provider,Object.assign({value:N},{children:t("div",Object.assign({ref:f,className:`yoopta-ui-floating-block-actions ${a}`,style:v,contentEditable:!1,onClick:o=>o.stopPropagation(),onMouseDown:o=>o.stopPropagation()},{children:A}))}))};b.displayName="FloatingBlockActions";const m=n((i,a)=>{var{children:n,onClick:e,className:r="",disabled:u,title:l}=i,p=o(i,["children","onClick","className","disabled","title"]);return t("button",Object.assign({ref:a,type:"button",className:`yoopta-ui-floating-action-button ${r}`,onClick:e,disabled:u,title:l,"aria-label":l},p,{children:n}))});m.displayName="FloatingBlockActions.Button";const v=Object.assign(b,{Root:b,Button:m});export{v as FloatingBlockActions,f as useFloatingBlockActionsContext};
@@ -0,0 +1,12 @@
1
+ import type { CSSProperties } from 'react';
2
+ export type FloatingToolbarContextValue = {
3
+ /** Whether toolbar is open/visible */
4
+ isOpen: boolean;
5
+ /** Floating UI styles for positioning */
6
+ floatingStyles: CSSProperties;
7
+ /** Ref setter for the floating element */
8
+ setFloatingRef: (node: HTMLElement | null) => void;
9
+ };
10
+ export declare const FloatingToolbarContext: import("react").Context<FloatingToolbarContextValue | null>;
11
+ export declare const useFloatingToolbarContext: () => FloatingToolbarContextValue;
12
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/floating-toolbar/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,MAAM,2BAA2B,GAAG;IACxC,sCAAsC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,cAAc,EAAE,aAAa,CAAC;IAC9B,0CAA0C;IAC1C,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,6DAA0D,CAAC;AAE9F,eAAO,MAAM,yBAAyB,mCAQrC,CAAC"}
@@ -0,0 +1,44 @@
1
+ import { type HTMLAttributes, type ReactNode } from 'react';
2
+ import './floating-toolbar.css';
3
+ type FloatingToolbarApi = {
4
+ isOpen: boolean;
5
+ };
6
+ type FloatingToolbarRootProps = {
7
+ children: ReactNode | ((api: FloatingToolbarApi) => ReactNode);
8
+ /** When true, selection tracking is paused (e.g., when a popover is open) */
9
+ frozen?: boolean;
10
+ className?: string;
11
+ };
12
+ type FloatingToolbarContentProps = {
13
+ children: ReactNode;
14
+ className?: string;
15
+ } & HTMLAttributes<HTMLDivElement>;
16
+ type FloatingToolbarGroupProps = HTMLAttributes<HTMLDivElement>;
17
+ type FloatingToolbarSeparatorProps = HTMLAttributes<HTMLDivElement>;
18
+ type FloatingToolbarButtonProps = {
19
+ active?: boolean;
20
+ disabled?: boolean;
21
+ type?: 'button' | 'submit' | 'reset';
22
+ } & HTMLAttributes<HTMLButtonElement>;
23
+ export declare const FloatingToolbar: {
24
+ ({ children, frozen, className }: FloatingToolbarRootProps): import("react/jsx-runtime").JSX.Element;
25
+ displayName: string;
26
+ } & {
27
+ Root: {
28
+ ({ children, frozen, className }: FloatingToolbarRootProps): import("react/jsx-runtime").JSX.Element;
29
+ displayName: string;
30
+ };
31
+ Content: import("react").ForwardRefExoticComponent<{
32
+ children: ReactNode;
33
+ className?: string | undefined;
34
+ } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
35
+ Group: import("react").ForwardRefExoticComponent<FloatingToolbarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
36
+ Separator: import("react").ForwardRefExoticComponent<FloatingToolbarSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
37
+ Button: import("react").ForwardRefExoticComponent<{
38
+ active?: boolean | undefined;
39
+ disabled?: boolean | undefined;
40
+ type?: "button" | "submit" | "reset" | undefined;
41
+ } & HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
42
+ };
43
+ export type { FloatingToolbarRootProps, FloatingToolbarContentProps, FloatingToolbarGroupProps, FloatingToolbarSeparatorProps, FloatingToolbarButtonProps, FloatingToolbarApi, };
44
+ //# sourceMappingURL=floating-toolbar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"floating-toolbar.d.ts","sourceRoot":"","sources":["../../src/floating-toolbar/floating-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAyD,MAAM,OAAO,CAAC;AAgBnH,OAAO,wBAAwB,CAAC;AAEhC,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IAC/D,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAqLF,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAiCnC,KAAK,yBAAyB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAgBhE,KAAK,6BAA6B,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAcpE,KAAK,0BAA0B,GAAG;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAuBtC,eAAO,MAAM,eAAe;sCAhR+C,wBAAwB;;;;0CAAxB,wBAAwB;;;;kBAoLvF,SAAS;;;;;;;;;;CAkGnB,CAAC;AAEH,YAAY,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,yBAAyB,EACzB,6BAA6B,EAC7B,0BAA0B,EAC1B,kBAAkB,GACnB,CAAC"}
@@ -0,0 +1,5 @@
1
+ export { FloatingToolbar } from './floating-toolbar';
2
+ export type { FloatingToolbarApi, FloatingToolbarButtonProps, FloatingToolbarContentProps, FloatingToolbarGroupProps, FloatingToolbarRootProps, FloatingToolbarSeparatorProps, } from './floating-toolbar';
3
+ export { useFloatingToolbarContext } from './context';
4
+ export type { FloatingToolbarContextValue } from './context';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/floating-toolbar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EACV,kBAAkB,EAClB,0BAA0B,EAC1B,2BAA2B,EAC3B,yBAAyB,EACzB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAC;AAGtD,YAAY,EAAE,2BAA2B,EAAE,MAAM,WAAW,CAAC"}
@@ -0,0 +1 @@
1
+ import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as t}from"react/jsx-runtime";import{createContext as a,useContext as i,forwardRef as e,useState as r,useMemo as n,useCallback as l,useEffect as s}from"react";import{d as p,u,i as g,f as c,s as d,o as b,a as f,c as y}from"./chunks/floating-ui.react-727e4287.js";import{useYooptaEditor as m}from"@yoopta/editor";import{t as h}from"./chunks/throttle-dea4a39e.js";import{s as v}from"./chunks/style-inject.es-e87a8d02.js";import{Portal as x}from"./portal.js";import"react-dom";const w=a(null),k=()=>{const o=i(w);if(!o)throw new Error("FloatingToolbar components must be used within <FloatingToolbar>");return o};v(":root{--yoopta-ui-background:0 0% 100%;--yoopta-ui-foreground:222.2 84% 4.9%;--yoopta-ui-border:214.3 31.8% 91.4%;--yoopta-ui-accent:210 40% 96.1%;--yoopta-ui-ring:222.2 84% 4.9%;--yoopta-ui-primary:221.2 83.2% 53.3%;--yoopta-ui-primary-foreground:210 40% 98%;--yoopta-ui-floating-toolbar-gap:4px;--yoopta-ui-floating-toolbar-padding:6px;--yoopta-ui-floating-toolbar-radius:0.5rem;--yoopta-ui-floating-toolbar-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--yoopta-ui-floating-toolbar-z-index:99;--yoopta-ui-floating-toolbar-group-gap:2px;--yoopta-ui-floating-toolbar-separator-height:24px;--yoopta-ui-floating-toolbar-separator-margin:4px;--yoopta-ui-floating-toolbar-button-min-width:32px;--yoopta-ui-floating-toolbar-button-min-height:32px;--yoopta-ui-floating-toolbar-button-padding-y:6px;--yoopta-ui-floating-toolbar-button-padding-x:8px;--yoopta-ui-floating-toolbar-button-font-size:0.875rem;--yoopta-ui-floating-toolbar-button-font-weight:500;--yoopta-ui-floating-toolbar-button-gap:4px;--yoopta-ui-floating-toolbar-button-radius:0.375rem;--yoopta-ui-floating-toolbar-icon-size:1rem;--yoopta-ui-floating-toolbar-ring-offset:2px}.dark,[data-theme=dark]{--yoopta-ui-background:222.2 84% 4.9%;--yoopta-ui-foreground:210 40% 98%;--yoopta-ui-border:217.2 32.6% 17.5%;--yoopta-ui-accent:217.2 32.6% 17.5%;--yoopta-ui-ring:212.7 26.8% 83.9%}.yoopta-ui-floating-toolbar{align-items:center;background:hsl(var(--yoopta-ui-background));border:1px solid hsl(var(--yoopta-ui-border));border-radius:var(--yoopta-ui-floating-toolbar-radius,.5rem);box-shadow:var(--yoopta-ui-floating-toolbar-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));display:flex;gap:var(--yoopta-ui-floating-toolbar-gap,4px);padding:var(--yoopta-ui-floating-toolbar-padding,6px);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:var(--yoopta-ui-floating-toolbar-z-index,99)}.yoopta-ui-floating-toolbar-group{align-items:center;display:flex;gap:var(--yoopta-ui-floating-toolbar-group-gap,2px)}.yoopta-ui-floating-toolbar-separator{background:hsl(var(--yoopta-ui-border));height:var(--yoopta-ui-floating-toolbar-separator-height,24px);margin:0 var(--yoopta-ui-floating-toolbar-separator-margin,4px);width:1px}.yoopta-ui-floating-toolbar-button{align-items:center;background:transparent;border:none;border-radius:var(--yoopta-ui-floating-toolbar-button-radius,.375rem);color:hsl(var(--yoopta-ui-foreground));cursor:pointer;display:inline-flex;font-size:var(--yoopta-ui-floating-toolbar-button-font-size,.875rem);font-weight:var(--yoopta-ui-floating-toolbar-button-font-weight,500);gap:var(--yoopta-ui-floating-toolbar-button-gap,4px);justify-content:center;min-height:var(--yoopta-ui-floating-toolbar-button-min-height,32px);min-width:var(--yoopta-ui-floating-toolbar-button-min-width,32px);outline:none;padding:var(--yoopta-ui-floating-toolbar-button-padding-y,6px) var(--yoopta-ui-floating-toolbar-button-padding-x,8px);transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap}.yoopta-ui-floating-toolbar-button:hover:not(:disabled){background:hsl(var(--yoopta-ui-accent))}.yoopta-ui-floating-toolbar-button:focus-visible{outline:2px solid hsl(var(--yoopta-ui-ring));outline-offset:var(--yoopta-ui-floating-toolbar-ring-offset,2px)}.yoopta-ui-floating-toolbar-button[data-active=true]{background:hsl(var(--yoopta-ui-primary,221.2 83.2% 53.3%));color:hsl(var(--yoopta-ui-primary-foreground,210 40% 98%))}.yoopta-ui-floating-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.yoopta-ui-floating-toolbar-button svg{height:var(--yoopta-ui-floating-toolbar-icon-size,1rem);width:var(--yoopta-ui-floating-toolbar-icon-size,1rem)}");const N=({children:o,frozen:a=!1,className:i=""})=>{const e=m(),[p,v]=r(!1),{refs:x,floatingStyles:k,context:N}=u({placement:"top-start",open:p,middleware:[g(),c(),d(),b(10)],whileElementsMounted:f}),{isMounted:j,styles:O}=y(N,{duration:100}),z=n(()=>Object.assign(Object.assign({},k),O),[k,O]),F=l(()=>{v(!1)},[]),R=l(()=>{v(!0)},[]),C=l(()=>{var o,t;if(a)return;const i=x.floating.current;if(i&&i.contains(document.activeElement))return;const r=window.getSelection();if(!r||(null==r?void 0:r.isCollapsed)||(null==r?void 0:r.anchorOffset)===(null==r?void 0:r.focusOffset))return void(p&&F());const n=r.getRangeAt(0),l=n.getBoundingClientRect(),s=n.toString().trim(),u=null==n?void 0:n.commonAncestorContainer,g=!!(null===(o=null==u?void 0:u.closest)||void 0===o?void 0:o.call(u,"[data-custom-editor]"));if((null===(t=e.refElement)||void 0===t?void 0:t.contains(u))&&!g){if(n&&s.length>0){const o={getBoundingClientRect:()=>l,getClientRects:()=>n.getClientRects()};x.setReference(o),p||R()}}else p&&F()},[a,x,e.refElement,F,R,p]),A=l(()=>{var o;if(!Array.isArray(e.path.selected)||0===e.path.selected.length||"mousemove"!==e.path.source&&"keyboard"!==e.path.source)return void(p&&F());const t=Math.min(...e.path.selected),a=Math.max(...e.path.selected);let i=!0;"number"==typeof e.path.current&&(i=Math.abs(e.path.current-a)<=Math.abs(e.path.current-t));const r=e.getBlock({at:i?a:t});if(!r)return;const n=null===(o=e.refElement)||void 0===o?void 0:o.querySelector(`[data-yoopta-block-id="${r.id}"]`);n&&(x.setReference(n),p||R())},[e,x,F,R,p]),E=n(()=>h(C,200,{leading:!0,trailing:!0}),[C]);s(()=>{if(Array.isArray(e.path.selected)||e.path.selection){if(!Array.isArray(e.path.selected)||e.path.selection)return window.document.addEventListener("selectionchange",E),()=>window.document.removeEventListener("selectionchange",E);A()}else p&&F()},[e.path.selected,e.path.selection,p,E,F,A]);const S=n(()=>({isOpen:j,floatingStyles:z,setFloatingRef:x.setFloating}),[j,z,x.setFloating]),M="function"==typeof o?o({isOpen:j}):o;return t(w.Provider,Object.assign({value:S},{children:t("div",Object.assign({className:i},{children:M}))}))};N.displayName="FloatingToolbar";const j=e((a,i)=>{var{children:e,className:r=""}=a,n=o(a,["children","className"]);const{isOpen:l,floatingStyles:s,setFloatingRef:u}=k(),g=p([i,u]);return l?t(x,Object.assign({id:"yoopta-ui-floating-toolbar-portal"},{children:t("div",Object.assign({ref:g,className:`yoopta-ui-floating-toolbar ${r}`,style:s,onClick:o=>o.stopPropagation(),onMouseDown:o=>o.stopPropagation()},n,{children:e}))})):null});j.displayName="FloatingToolbar.Content";const O=e((a,i)=>{var{className:e="",children:r}=a,n=o(a,["className","children"]);return t("div",Object.assign({ref:i,className:`yoopta-ui-floating-toolbar-group ${e}`},n,{children:r}))});O.displayName="FloatingToolbar.Group";const z=e((a,i)=>{var{className:e=""}=a,r=o(a,["className"]);return t("div",Object.assign({ref:i,className:`yoopta-ui-floating-toolbar-separator ${e}`},r))});z.displayName="FloatingToolbar.Separator";const F=e((a,i)=>{var{className:e="",children:r,active:n,disabled:l,type:s="button"}=a,p=o(a,["className","children","active","disabled","type"]);return t("button",Object.assign({ref:i,type:s,disabled:l,"data-active":n,className:`yoopta-ui-floating-toolbar-button ${e}`},p,{children:r}))});F.displayName="FloatingToolbar.Button";const R=Object.assign(N,{Root:N,Content:j,Group:O,Separator:z,Button:F});export{R as FloatingToolbar,k as useFloatingToolbarContext};
@@ -1 +1 @@
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)}");
1
+ import{s as r}from"./chunks/style-inject.es-e87a8d02.js";export{H as HighlightColorPicker}from"./chunks/highlight-color-picker-ce0b19ac.js";import"react/jsx-runtime";import"react";import"./chunks/floating-ui.react-727e4287.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
@@ -1,10 +1,8 @@
1
- export { FloatingBlockActions, useFloatingBlockActions, } from './floating-block-actions';
1
+ export { FloatingBlockActions, } from './floating-block-actions';
2
2
  export { BlockOptions, useBlockActions, useBlockOptionsContext } from './block-options';
3
- export { Toolbar, useToolbar } from './toolbar';
4
- export { ActionMenuList, useActionMenuList, useActionMenuListActions } from './action-menu-list';
3
+ export { FloatingToolbar } from './floating-toolbar';
4
+ export { ActionMenuList } from './action-menu-list';
5
5
  export { SlashCommandMenu } from './slash-command-menu';
6
- export { useTheme, ThemeProvider, ThemeToggle, useThemeContext } from './theme';
7
- export type { Theme } from './theme';
8
6
  export { Portal } from './portal';
9
7
  export { Overlay } from './overlay';
10
8
  export { HighlightColorPicker } from './highlight-color-picker';
@@ -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;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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,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{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";
1
+ export{SlashCommandMenu}from"./slash-command-menu.js";export{ElementOptions,useElementOptions,useElementOptionsContext,useUpdateElementProps}from"./element-options.js";export{FloatingBlockActions}from"./floating-block-actions.js";export{BlockOptions,useBlockActions,useBlockOptionsContext}from"./block-options.js";export{FloatingToolbar}from"./floating-toolbar.js";export{ActionMenuList}from"./action-menu-list.js";export{Portal}from"./portal.js";export{Overlay}from"./overlay.js";export{H as HighlightColorPicker}from"./chunks/highlight-color-picker-ce0b19ac.js";export{SelectionBox,useRectangeSelectionBox}from"./selection-box.js";import"react/jsx-runtime";import"react";import"@yoopta/editor";import"./chunks/floating-ui.react-727e4287.js";import"react-dom";import"./chunks/style-inject.es-e87a8d02.js";import"./chunks/index-e0185864.js";import"./chunks/_tslib-5e145dfd.js";import"./chunks/throttle-dea4a39e.js";
package/dist/overlay.js CHANGED
@@ -1 +1 @@
1
- import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as l}from"react/jsx-runtime";import{k as r}from"./chunks/floating-ui.react-33212df0.js";import"react";import"react-dom";const c=c=>{var{className:a,children:s,lockScroll:n=!0}=c,t=o(c,["className","children","lockScroll"]);return l(r,Object.assign({lockScroll:n,className:a},t,{onClick:o=>{var l;o.stopPropagation(),null===(l=t.onClick)||void 0===l||l.call(t,o)},onMouseDown:o=>{var l;o.stopPropagation(),null===(l=t.onMouseDown)||void 0===l||l.call(t,o)}},{children:s}))};export{c as Overlay};
1
+ import{_ as o}from"./chunks/_tslib-5e145dfd.js";import{jsx as l}from"react/jsx-runtime";import{k as r}from"./chunks/floating-ui.react-727e4287.js";import"react";import"react-dom";const c=c=>{var{className:a,children:s,lockScroll:n=!0}=c,t=o(c,["className","children","lockScroll"]);return l(r,Object.assign({lockScroll:n,className:a},t,{onClick:o=>{var l;o.stopPropagation(),null===(l=t.onClick)||void 0===l||l.call(t,o)},onMouseDown:o=>{var l;o.stopPropagation(),null===(l=t.onMouseDown)||void 0===l||l.call(t,o)}},{children:s}))};export{c as Overlay};
package/dist/portal.js CHANGED
@@ -1 +1 @@
1
- import{jsx as r}from"react/jsx-runtime";import{useState as t,useRef as e,useEffect as n}from"react";import{j as o}from"./chunks/floating-ui.react-33212df0.js";import{useYooptaEditor as c}from"@yoopta/editor";import"react-dom";const a=new WeakMap,i=i=>{const[u,m]=t(!1),l=e(null),s=c();return n(()=>{m(!0);const r=s.refElement;if(!r)return;let t=r.querySelector(".yoopta-portal-container");t||(t=document.createElement("div"),t.className="yoopta-portal-container",r.appendChild(t),a.set(t,0));const e=a.get(t)||0;return a.set(t,e+1),l.current=t,()=>{if(l.current){const r=a.get(l.current)||0,t=Math.max(0,r-1);a.set(l.current,t),0===t&&l.current.parentNode&&(l.current.remove(),a.delete(l.current))}}},[s]),u&&l.current?r(o,Object.assign({id:`${i.id}-${s.id}`,root:l.current},{children:i.children})):null};export{i as Portal};
1
+ import{jsx as r}from"react/jsx-runtime";import{useState as t,useRef as e,useEffect as n}from"react";import{j as o}from"./chunks/floating-ui.react-727e4287.js";import{useYooptaEditor as c}from"@yoopta/editor";import"react-dom";const a=new WeakMap,i=i=>{const[u,m]=t(!1),l=e(null),s=c();return n(()=>{m(!0);const r=s.refElement;if(!r)return;let t=r.querySelector(".yoopta-portal-container");t||(t=document.createElement("div"),t.className="yoopta-portal-container",r.appendChild(t),a.set(t,0));const e=a.get(t)||0;return a.set(t,e+1),l.current=t,()=>{if(l.current){const r=a.get(l.current)||0,t=Math.max(0,r-1);a.set(l.current,t),0===t&&l.current.parentNode&&(l.current.remove(),a.delete(l.current))}}},[s]),u&&l.current?r(o,Object.assign({id:`${i.id}-${s.id}`,root:l.current},{children:i.children})):null};export{i as Portal};