@wordpress/editor/build/components/resizable-editor/index.cjs.map

Enhanced block editor for WordPress posts.

{
  "version": 3,
  "sources": ["../../../src/components/resizable-editor/index.js"],
  "sourcesContent": ["import clsx from 'clsx';\nimport { useDispatch } from '@wordpress/data';\nimport { useRef, useCallback, useState } from '@wordpress/element';\nimport {\n\tResizableBox,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { useReducedMotion } from '@wordpress/compose';\nimport ResizeHandle from './resize-handle';\nimport { store as editorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDE = {\n\tposition: undefined,\n\tuserSelect: undefined,\n\tcursor: undefined,\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\n/**\n * Checks if the current width is at the max width.\n *\n * @param {number} currentWidth   - The current width of the editor.\n * @param {number} containerWidth - The width of the container.\n * @param {number} tolerance      - The tolerance for the max width in pixels.\n * @return {boolean} - True if the current width is at the max width, false otherwise.\n */\nfunction isAtMaxWidth( currentWidth, containerWidth, tolerance = 0 ) {\n\treturn containerWidth > 0 && currentWidth >= containerWidth - tolerance;\n}\n\nfunction ResizableEditor( {\n\tclassName,\n\tenableResizing,\n\twidth = '100%',\n\theight = '100%',\n\tchildren,\n} ) {\n\tconst [ isResizing, setIsResizing ] = useState( false );\n\tconst disableMotion = useReducedMotion();\n\tconst { setCanvasWidth } = unlock( useDispatch( editorStore ) );\n\n\tconst resizableRef = useRef();\n\tconst resizeWidthBy = useCallback(\n\t\t( deltaPixels ) => {\n\t\t\tif ( resizableRef.current ) {\n\t\t\t\tconst _isAtMaxWidth = isAtMaxWidth(\n\t\t\t\t\tresizableRef.current.offsetWidth + deltaPixels,\n\t\t\t\t\tresizableRef.current.parentElement?.offsetWidth ?? 0,\n\t\t\t\t\t80\n\t\t\t\t);\n\t\t\t\tsetCanvasWidth(\n\t\t\t\t\t_isAtMaxWidth\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: resizableRef.current.offsetWidth + deltaPixels\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ setCanvasWidth ]\n\t);\n\n\tconst updateCanvasWidth = useCallback(\n\t\t( element, isResizeEnd ) => {\n\t\t\tconst currentWidth = element.offsetWidth;\n\t\t\tconst containerWidth = element.parentElement?.offsetWidth ?? 0;\n\t\t\tsetCanvasWidth(\n\t\t\t\tisResizeEnd && isAtMaxWidth( currentWidth, containerWidth, 80 )\n\t\t\t\t\t? undefined\n\t\t\t\t\t: currentWidth\n\t\t\t);\n\t\t},\n\t\t[ setCanvasWidth ]\n\t);\n\n\treturn (\n\t\t<ResizableBox\n\t\t\tas={ motion.div }\n\t\t\tinitial={ false }\n\t\t\tanimate={ { height } }\n\t\t\ttransition={ {\n\t\t\t\ttype: 'tween',\n\t\t\t\tduration: isResizing || disableMotion ? 0 : 0.2,\n\t\t\t\tease: 'easeOut',\n\t\t\t} }\n\t\t\tclassName={ clsx( 'editor-resizable-editor', className, {\n\t\t\t\t'is-resizable': enableResizing,\n\t\t\t\t'is-resizing': isResizing,\n\t\t\t} ) }\n\t\t\tref={ ( api ) => {\n\t\t\t\tresizableRef.current = api?.resizable;\n\t\t\t} }\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tonResizeStart={ () => {\n\t\t\t\tsetIsResizing( true );\n\t\t\t} }\n\t\t\tonResize={ ( event, direction, element ) => {\n\t\t\t\tupdateCanvasWidth( element );\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tupdateCanvasWidth( element, true );\n\t\t\t\tsetIsResizing( false );\n\t\t\t} }\n\t\t\tminWidth={ 300 }\n\t\t\tmaxWidth=\"100%\"\n\t\t\tmaxHeight=\"100%\"\n\t\t\tenable={ {\n\t\t\t\tleft: enableResizing,\n\t\t\t\tright: enableResizing,\n\t\t\t} }\n\t\t\tshowHandle={ enableResizing }\n\t\t\t// The editor is centered horizontally, resizing it only\n\t\t\t// moves half the distance. Hence double the ratio to correctly\n\t\t\t// align the cursor to the resizer handle.\n\t\t\tresizeRatio={ 2 }\n\t\t\thandleComponent={ {\n\t\t\t\tleft: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"left\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tright: (\n\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\tdirection=\"right\"\n\t\t\t\t\t\tresizeWidthBy={ resizeWidthBy }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t} }\n\t\t\thandleClasses={ undefined }\n\t\t\thandleStyles={ {\n\t\t\t\tleft: HANDLE_STYLES_OVERRIDE,\n\t\t\t\tright: HANDLE_STYLES_OVERRIDE,\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</ResizableBox>\n\t);\n}\n\nexport default ResizableEditor;\n"],
  "mappings": "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",
  "names": ["editorStore", "motion", "clsx", "ResizeHandle"]
}