Box

The Box interface represents an embedded content, which is used 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 object.

• Parameters:

  node

  The name of a box, Node, and Nodes object.

Example:

// The parameter is the name of a box.
const box = new Box('hr');

// The parameter is a native node.
const box = new Box(query('lake-box').get(0));

// The parameter is a Nodes object.
const box = new Box(query('lake-box').eq(0));

Instance properties

node Read only

A 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 used to set up events. For more details, see the Instance events.

• Type: EventEmitter

Example:

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

toolbar Read only

A toolbar for the box.

• Type: FloatingToolbar

Example:

const toolbar = box.toolbar;

type Read only

Returns the type of the box.

• 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()

Sets part of the value of the box.

• Parameters:

  keyName

  A string representing the name of the key. This parameter can be a key-value object used to set multiple keys.

  keyValue Optional

  A string representing the value of the key.

• Return value:

  None.

Example:

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

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

getEditor()

Returns an 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 of the box.

• Parameters:

  None.

• Return value:

  A Nodes object.

Example:

const boxContainer = box.getContainer();

getHTML()

Returns the HTML string contained within the box.

• Parameters:

  None.

• Return value:

  The HTML string.

Example:

const html = box.getHTML();

setToolbar()

Sets a floating toolbar for the box.

• Parameters:

  items

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

• Return value:

  None.

Example:

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

render()

Renders the contents of the box.

• Parameters:

  None.

• Return value:

  None.

Example:

box.render();

unmount()

Destroys the box.

• Parameters:

  None.

• Return value:

  None.

Example:

box.unmount();

Instance events

focus

Fired when the box has received focus.

Example:

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

blur

Fired when the box has lost 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 has rendered.

Example:

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