Resize Handler Plugin

Adds a draggable resize handle in the bottom-right corner of the editor when it has a fixed height or width. This plugin allows users to resize the editor dimensions by dragging the handle.

FeaturesFeatures

• Visual resize handle in bottom-right corner
• Drag to resize editor horizontally
• Drag to resize editor vertically
• Both axes can be enabled independently
• Locks editor during resize
• Touch event support
• Hidden in fullscreen mode
• Requires fixed height or width
• Custom SVG icon
• Status bar modification for styling
• Mouse/touch event support

allowResizeXallowResizeX

Type: boolean

Default: false

Enables or disables horizontal (width) resizing of the editor via the resize handle.

Example:

const editor = Jodit.make('#editor', {
    allowResizeX: true,
    width: 600  // Fixed width required
});

allowResizeYallowResizeY

Type: boolean

Default: true

Enables or disables vertical (height) resizing of the editor via the resize handle.

Example:

const editor = Jodit.make('#editor', {
    allowResizeY: true,
    height: 400  // Fixed height required
});

Basic Vertical ResizeBasic Vertical Resize

const editor = Jodit.make('#editor', {
    height: 400,
    allowResizeY: true,
    allowResizeX: false
});
// Drag handle vertically to resize height

Horizontal Resize OnlyHorizontal Resize Only

const editor = Jodit.make('#editor', {
    width: 600,
    allowResizeX: true,
    allowResizeY: false
});
// Drag handle horizontally to resize width

Both Axes ResizeBoth Axes Resize

const editor = Jodit.make('#editor', {
    height: 400,
    width: 600,
    allowResizeX: true,
    allowResizeY: true
});
// Drag handle diagonally to resize both dimensions

Disable All ResizingDisable All Resizing

const editor = Jodit.make('#editor', {
    height: 400,
    allowResizeX: false,
    allowResizeY: false
});
// No resize handle appears

With Minimum/Maximum SizesWith Minimum/Maximum Sizes

const editor = Jodit.make('#editor', {
    height: 400,
    allowResizeY: true,
    minHeight: 200,
    maxHeight: 800
});
// Resize constrained by min/max limits

Auto Height (No Vertical Resize)Auto Height (No Vertical Resize)

const editor = Jodit.make('#editor', {
    height: 'auto',
    width: 600,
    allowResizeX: true,
    allowResizeY: true  // Automatically disabled for auto height
});
// Only horizontal resize available

Listen to Resize EventsListen to Resize Events

const editor = Jodit.make('#editor', {
    height: 400,
    allowResizeY: true
});

editor.e.on('resize', () => {
    console.log('Editor resized');
    console.log('New height:', editor.container.offsetHeight);
});

Programmatic Size ChangesProgrammatic Size Changes

const editor = Jodit.make('#editor', {
    height: 400,
    allowResizeY: true
});

// Set new height
editor.e.fire('setHeight', 500);

// Set new width
editor.e.fire('setWidth', 700);

Handle Display ConditionsHandle Display Conditions

The resize handle appears only when:

1. Fixed Size: Editor has height !== 'auto' OR width !== 'auto'
2. Resize Enabled: At least one of allowResizeX or allowResizeY is true
3. Auto Height Exception: If height === 'auto' AND width !== 'auto', allowResizeY is automatically disabled

If these conditions aren't met, no handle is created.

Handle CreationHandle Creation

When conditions are met:

1. Create Element: Creates div with class jodit-editor__resize
2. Add Icon: Inserts SVG resize icon
3. Append: Adds handle to editor container
4. Status Bar Mod: Sets resize-handle modifier on status bar for styling

Start Resize (mousedown/touchstart)Start Resize (mousedown/touchstart)

1. Record Start Position: Stores clientX, clientY
2. Record Start Dimensions: Stores container offsetWidth and offsetHeight
3. Lock Editor: Calls editor.lock() to prevent editing
4. Attach Move Handler: Listens to mousemove/touchmove on window
5. Prevent Default: Stops default browser behavior

During Resize (mousemove/touchmove)During Resize (mousemove/touchmove)

1. Calculate Delta: deltaY = e.clientY - start.y, deltaX = e.clientX - start.x
2. Update Height (if allowResizeY): Fires setHeight event with start.h + deltaY
3. Update Width (if allowResizeX): Fires setWidth event with start.w + deltaX
4. Fire Resize Event: Triggers resize event after dimension changes

End Resize (mouseup/touchend)End Resize (mouseup/touchend)

1. Remove Move Handler: Stops listening to mousemove/touchmove
2. Unlock Editor: Calls editor.unlock() to allow editing
3. Reset State: Sets isResized to false

Fullscreen HandlingFullscreen Handling

The handle visibility is managed during fullscreen toggle:

editor.e.on('toggleFullSize', () => {
    handle.style.display = editor.isFullSize ? 'none' : 'block';
});

Handle is hidden in fullscreen mode and shown when returning to normal mode.

Size EventsSize Events

The plugin fires these events during resize:

• setHeight: Fired with new height value
• setWidth: Fired with new width value
• resize: Fired after dimensions change

These events are handled by the size module which actually applies the new dimensions.

Auto Height BehaviorAuto Height Behavior

Special case handling:

if (height === 'auto' && width !== 'auto') {
    allowResizeY = false;
}

When editor has auto height, vertical resizing is automatically disabled even if allowResizeY is true.

resizeresize

Fired during resize operation after dimensions are updated.

Example:

editor.e.on('resize', () => {
    console.log('Editor dimensions changed');
    console.log('Width:', editor.container.offsetWidth);
    console.log('Height:', editor.container.offsetHeight);
});

setHeightsetHeight

Fired with new height value during vertical resize.

Parameters:

• height (number): New height in pixels

Example:

editor.e.on('setHeight', (height) => {
    console.log('Height changed to:', height);
});

setWidthsetWidth

Fired with new width value during horizontal resize.

Parameters:

• width (number): New width in pixels

Example:

editor.e.on('setWidth', (width) => {
    console.log('Width changed to:', width);
});

toggleFullSizetoggleFullSize

Plugin listens to this event to hide/show handle during fullscreen toggle.

Example:

editor.e.on('toggleFullSize', () => {
    console.log('Fullscreen toggled');
});

Edge CasesEdge Cases

1. Auto Height: Vertical resize automatically disabled when height: 'auto'

2. No Fixed Size: Handle doesn't appear if both height and width are 'auto'

3. Both Disabled: Handle doesn't appear if both allowResizeX and allowResizeY are false

4. Fullscreen Mode: Handle is hidden when editor is fullscreen

5. Touch Events: Plugin supports both mouse and touch events

6. Locked Editor: Editor is locked during resize to prevent editing

7. Window Mouse Up: Mouse up event attached to window to catch releases outside editor

8. Start Position: Records both position and dimensions at drag start

9. Delta Calculation: Uses client coordinates for accurate cross-browser positioning

10. Status Bar Modifier: Adds resize-handle modifier to status bar for CSS targeting

NotesNotes

• Plugin is class-based, extends Plugin base class with @autobind decorator
• Requires size module (specified in static requires: string[])
• Handle has class jodit-editor__resize for styling
• Uses custom SVG icon via Icon.get('resize_handler')
• Handle positioned in bottom-right corner via CSS
• The isResized boolean flag tracks active resize state
• Start position stored as IPointBound with x, y, w, h properties
• Mouse events attached to window (j.ow) to catch movements outside editor
• Touch events supported: touchstart, touchmove, touchend
• Editor lock prevents content editing during resize operation
• The plugin integrates with editor's lock/unlock system
• Status bar gets resize-handle modifier via statusbar.setMod()
• Handle display toggled based on fullscreen state
• Event namespacing .resizeHandler used for clean removal
• The plugin properly cleans up handle and event listeners on destruction
• Size changes are delegated to size module via events
• The size module handles actual dimension application and constraints
• Auto height detection prevents unwanted vertical resize
• Handle creation is conditional based on configuration
• The plugin uses e.preventDefault() to stop default drag behavior
• Container dimensions used as resize base (not editor dimensions)
• Handle appended to editor container (not workplace)
• The onHandleResize method fires multiple events per move
• Width and height updates are independent and conditional
• The plugin doesn't validate or constrain dimensions directly
• Min/max size enforcement handled by size module
• Handle removed via Dom.safeRemove() on destruction
• Window event listeners properly removed in beforeDestruct

Typical Use CaseTypical Use Case

Users need to adjust the editor size to fit their content or screen layout. The resize-handler plugin provides this by:

1. Adding a visual handle in the bottom-right corner
2. Allowing drag-to-resize in one or both dimensions
3. Locking editor during resize to prevent accidental edits
4. Supporting both mouse and touch interfaces
5. Hiding automatically in fullscreen mode

This improves user experience by:

• Providing familiar resize interaction (like window resizing)
• Allowing quick size adjustments without settings
• Supporting both desktop and mobile workflows
• Preventing content loss during resize
• Maintaining editor usability across different viewport sizes

ClassesClasses

• resizeHandler