Resize

Overview

The Resize extension provides controls to resize the editor. When users double-click the bar, the size will be reset.

This extension respects minWidth, maxWidth, minHeight and maxHeight options as each limit of a dimension. For instance, if you set options like this:

import { RyuseiCode, Resize } from '@ryusei/code';


RyuseiCode.compose( { Resize } );
new RyuseiCode( { minWidth: '50%', minHeight: '6em', maxHeight: '20em' } );
JavaScript

you will get this result (try to drag the bottom or right edge):


Usage
Register the Resize extension:

        
import { RyuseiCode, Resize } from '@ryusei/code';


RyuseiCode.compose( { Resize } );
JavaScript

        
      
or import the file:

        
<script src="path-to-the-file/resize.min.js"></script>
HTML

        
      
Options
Set an object to resize to update default options,
or false to deactivate it.

        
new RyuseiCode( { resize: { ... } } );


// or
new RyuseiCode( { resize: false } );
JavaScript

        
      
horizontal
Determines whether to enable or disable the horizontal resize.
type: boolean default: true
vertical
Determines whether to enable or disable the vertical resize.
type: boolean default: true