Box

The Box interface represents an embedded content designed to enhance editing capability.

Example:

import { Box } from 'lakelib';

const box = new Box('emoji');
box.updateValue({
  url: '/assets/emojis/face_blowing_a_kiss_color.svg',
  title: 'Face blowing a kiss',
});

Constructor

Creates a new Box instance.

• Parameters:

  node

  The name of a box, a native Node object, or a Nodes object.

Instance properties

node Read only

The lake-box element to which the contents of the box are appended.

• Type: Nodes

Example:

const boxNode = box.node;

event Read only

An EventEmitter object for handling events. See the Instance events for details.

• Type: EventEmitter

Example:

box.event.on('focus', () => {
  console.log('focused');
});

toolbar Read only

A floating toolbar attached to the box.

• Type: FloatingToolbar

Example:

const toolbar = box.toolbar;

type Read only

Indicates whether the box is treated as a block or inline element.

• Type: 'inline' | 'block'

Example:

const type = box.type;

name Read only

Returns the name of the box.

• Type: string

Example:

const name = box.name;

value

Gets or sets the value of the box.

• Type: key-value object

Example:

// Gets the value.
const value = box.value;

// Sets the value.
box.value = {
  foo: 1,
  bar: 2,
};

Instance methods

updateValue()

Updates part of the value of the box.

• Parameters:

  keyName

  A string representing the key to update. It can be a key-value object used to set multiple keys.

  keyValue Optional

  A string representing the new value for the key.

• Return value:

  None.

Example:

// Sets a key.
box.updateValue('foo', '1');

// Sets multiple keys.
box.updateValue({
  foo: '2',
  bar: '3',
});

getEditor()

Returns the Editor object that contains the box.

• Parameters:

  None.

• Return value:

  An Editor object.

• Exception:

  Thrown when the box is not rendered in the editor.

Example:

const editor = box.getEditor();

getContainer()

Returns the container element of the box.

• Parameters:

  None.

• Return value:

  A Nodes object.

Example:

const boxContainer = box.getContainer();

getHTML()

Returns the HTML content inside the box.

• Parameters:

  None.

• Return value:

  The HTML string.

Example:

const html = box.getHTML();

setToolbar()

Adds a floating toolbar to the box.

• Parameters:

  items

  An Array object that contains ToolbarItem objects, representing the buttons of the floating toolbar.

• Return value:

  None.

Example:

box.setToolbar([{
  name: 'remove',
  type: 'button',
  icon: icons.get('remove'),
  tooltip: 'Remove',
  onClick: () => {
    console.log('clicked');
  },
}]);

render()

Renders the content inside the box.

• Parameters:

  None.

• Return value:

  None.

Example:

box.render();

unmount()

Destroys the box instance.

• Parameters:

  None.

• Return value:

  None.

Example:

box.unmount();

Instance events

focus

Fired when the box receives focus.

Example:

box.event.on('focus', () => {
  console.log('focused');
});

blur

Fired when the box loses focus.

Example:

box.event.on('blur', () => {
  console.log('blurred');
});

beforeunmount

Fired before the box is destroyed.

Example:

box.event.on('beforeunmount', () => {
  console.log('unmounted');
});

renderfloatingtoolbar

Fired when the floating toolbar is rendered.

Example:

box.event.on('renderfloatingtoolbar', () => {
  console.log('rendered');
});