@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 3.76 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/resizable-editor/index.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useCallback } from '@wordpress/element';\nimport { ResizableBox } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ResizeHandle from './resize-handle';\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\nfunction ResizableEditor( { className, enableResizing, height, children } ) {\n\tconst [ width, setWidth ] = useState( '100%' );\n\tconst resizableRef = useRef();\n\tconst resizeWidthBy = useCallback( ( deltaPixels ) => {\n\t\tif ( resizableRef.current ) {\n\t\t\tsetWidth( resizableRef.current.offsetWidth + deltaPixels );\n\t\t}\n\t}, [] );\n\treturn (\n\t\t<ResizableBox\n\t\t\tclassName={ clsx( 'editor-resizable-editor', className, {\n\t\t\t\t'is-resizable': enableResizing,\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: enableResizing ? width : '100%',\n\t\t\t\theight: enableResizing && height ? height : '100%',\n\t\t\t} }\n\t\t\tonResizeStop={ ( event, direction, element ) => {\n\t\t\t\tsetWidth( element.style.width );\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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU,QAAQ,mBAAmB;AAC9C,SAAS,oBAAoB;AAK7B,OAAO,kBAAkB;AAoDpB;AAjDL,IAAM,yBAAyB;AAAA,EAC9B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACP;AAEA,SAAS,gBAAiB,EAAE,WAAW,gBAAgB,QAAQ,SAAS,GAAI;AAC3E,QAAM,CAAE,OAAO,QAAS,IAAI,SAAU,MAAO;AAC7C,QAAM,eAAe,OAAO;AAC5B,QAAM,gBAAgB,YAAa,CAAE,gBAAiB;AACrD,QAAK,aAAa,SAAU;AAC3B,eAAU,aAAa,QAAQ,cAAc,WAAY;AAAA,IAC1D;AAAA,EACD,GAAG,CAAC,CAAE;AACN,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,2BAA2B,WAAW;AAAA,QACvD,gBAAgB;AAAA,MACjB,CAAE;AAAA,MACF,KAAM,CAAE,QAAS;AAChB,qBAAa,UAAU,KAAK;AAAA,MAC7B;AAAA,MACA,MAAO;AAAA,QACN,OAAO,iBAAiB,QAAQ;AAAA,QAChC,QAAQ,kBAAkB,SAAS,SAAS;AAAA,MAC7C;AAAA,MACA,cAAe,CAAE,OAAO,WAAW,YAAa;AAC/C,iBAAU,QAAQ,MAAM,KAAM;AAAA,MAC/B;AAAA,MACA,UAAW;AAAA,MACX,UAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACR;AAAA,MACA,YAAa;AAAA,MAIb,aAAc;AAAA,MACd,iBAAkB;AAAA,QACjB,MACC;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV;AAAA;AAAA,QACD;AAAA,QAED,OACC;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV;AAAA;AAAA,QACD;AAAA,MAEF;AAAA,MACA,eAAgB;AAAA,MAChB,cAAe;AAAA,QACd,MAAM;AAAA,QACN,OAAO;AAAA,MACR;AAAA,MAEE;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,2BAAQ;",
"names": []
}