Getting started

Quick start with npm

Lake is available on npm as the lakelib package. Install the latest version using the following command:

npm install lakelib

Place placeholders for the toolbar and the content area:

<div class="my-editor">
  <div class="my-toolbar"></div>
  <div class="my-content"></div>
</div>

Import the modules and CSS, then render the editor. You can customize the toolbar and editor config as needed.

import 'lakelib/lib/lake.css';
import { Editor, Toolbar } from 'lakelib';

const toolbar = new Toolbar({
  root: '.my-toolbar',
});
const editor = new Editor({
  root: '.my-content',
  toolbar,
});
editor.render();

Note

Ensure lake.css is loaded before calling editor.render().

For a live demonstration, visit npm example on CodeSandbox.

Quick start with CDN

If you prefer to use plain JavaScript without any build steps, you can load the bundled files directly from a CDN like jsDelivr or UNPKG. You can also download and host the files yourself.

• jsDelivr: https://www.jsdelivr.com/package/npm/lakelib
• UNPKG: https://unpkg.com/browse/lakelib/

Add the following lines to the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/lake.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lake.min.js"></script>

Place placeholders for the toolbar and the content area:

<div class="my-editor">
  <div class="my-toolbar"></div>
  <div class="my-content"></div>
</div>

Use the following JavaScript to render the editor. You can customize the toolbar and editor config as needed.

const { Editor, Toolbar } = Lake;

const toolbar = new Toolbar({
  root: '.my-toolbar',
});
const editor = new Editor({
  root: '.my-content',
  toolbar,
});
editor.render();

For a live demonstration, visit CDN example on this website or try it on CodeSandbox.

Integrating with frameworks

Lake is a plain JavaScript library, which means you can integrate it into any other frameworks, such as React, Vue, Svelte, and Angular.

React

import 'lakelib/lib/lake.css';
import { Editor, Toolbar } from 'lakelib';
import { useRef, useEffect } from 'react';

export default function Lake({ defaultValue }) {
  const toolbarRef = useRef(null);
  const contentRef = useRef(null);

  useEffect(() => {
    const toolbar = new Toolbar({
      root: toolbarRef.current,
    });
    const editor = new Editor({
      root: contentRef.current,
      toolbar,
      value: defaultValue,
    });
    editor.render();
    editor.event.on('change', (value) => {
      console.log(value);
    });
    return () => editor.unmount();
  }, []);

  return (
    <div className="my-editor">
      <div className="my-toolbar" ref={toolbarRef}></div>
      <div className="my-content" ref={contentRef}></div>
    </div>
  );
}

Vue

<script setup>
import 'lakelib/lib/lake.css';
import { Editor, Toolbar } from 'lakelib';
import { useTemplateRef, onMounted, onUnmounted } from 'vue';

const toolbarRef = useTemplateRef('toolbarRef');
const contentRef = useTemplateRef('contentRef');

let editor = null;

onMounted(() => {
  const toolbar = new Toolbar({
    root: toolbarRef.value,
  });
  editor = new Editor({
    root: contentRef.value,
    toolbar,
  });
  editor.render();
  editor.event.on('change', (value) => {
    console.log(value);
  });
});

onUnmounted(() => {
  if (editor) {
    editor.unmount();
    editor = null;
  }
});
</script>

<template>
  <div class="my-editor">
    <div class="my-toolbar" ref="toolbarRef"></div>
    <div class="my-content" ref="contentRef"></div>
  </div>
</template>

Svelte

<script lang="ts">
  import 'lakelib/lib/lake.css';
  import { Editor, Toolbar } from 'lakelib';
  import { onMount, onDestroy } from 'svelte';

  let toolbarNode;
  let contentNode;
  let editor;

  onMount(() => {
    const toolbar = new Toolbar({
      root: toolbarNode,
    });
    editor = new Editor({
      root: contentNode,
      toolbar,
      value: '<p>Hello World!</p>',
    });
    editor.render();
    editor.event.on('change', (value) => {
      console.log(value);
    });
  });

  onDestroy(() => {
    if (editor) {
      editor.unmount();
    }
  });
</script>

<div class="my-editor">
  <div class="my-toolbar" bind:this={toolbarNode}></div>
  <div class="my-content" bind:this={contentNode}></div>
</div>

Angular

import 'lakelib/lib/lake.css';
import { Editor, Toolbar } from 'lakelib';
import { Component, ElementRef, afterRender } from '@angular/core';

@Component({
  selector: 'lake-root',
  standalone: true,
  template: `
    <div class="my-editor">
      <div class="my-toolbar"></div>
      <div class="my-content"></div>
    </div>
  `,
})
export class Lake {
  private editor: Editor | null = null;

  constructor(elementRef: ElementRef) {
    const nativeElement = elementRef.nativeElement;

    afterRender(() => {
      if (this.editor) {
        this.editor.unmount();
      }
      const toolbar = new Toolbar({
        root: nativeElement.querySelector('.my-toolbar'),
      });
      const editor = new Editor({
        root: nativeElement.querySelector('.my-content'),
        toolbar,
        value: '<p>Hello World!</p>',
      });
      editor.render();
      editor.event.on('change', (value) => {
        console.log(value);
      });
      this.editor = editor;
    });
  }
}

You can try these examples online:

• React example (CodeSandbox)
• Vue example (StackBlitz)
• Svelte example (StackBlitz)
• Angular example (StackBlitz)

Getting and setting value

Lake provides simple methods to get and set editor data.

Initializing the editor with a provided value

Use the value config to set the initial content:

const defaultValue = `
  <h1>Title</h1>
  <p>Content<focus /></p>
`;
new Editor({
  root: '.my-content',
  value: defaultValue,
});

Getting value

To get the current content, use the getValue() method:

const content = editor.getValue();

To get the content already transformed into standard HTML, use the getHTML() method:

const html = editor.getHTML();

the getHTML() method is equivalent to calling the toHTML() function from the lake-html package. You can customize the HTML output by passing a second parameter to the toHTML() function.

import { toHTML } from 'lake-html';

const html = toHTML(editor.getValue(), renderers);

For more details, visit the documentation at: https://github.com/lakejs/lake-html

Setting value

Replace the existing content with a new value using the setValue() method:

editor.setValue('<p>New content</p>');

Binding events

Lake supports event binding through the editor.event.on() method.

change event

Fired when the editor's content is changed. The value parameter is the current content, which conforms to LML format.

editor.event.on('change', value => {
  console.log(value);
});

statechange event

Fired when the current selection is changed. The state parameter is a SelectionState object representing the state of the current selection.

editor.event.on('statechange', state => {
  console.log(state);
});

For all event names, refer to the Editor class.

Customizing toolbar

Lake allows you to make your own toolbar by setting the items config.

const toolbarItems = [
  'undo',
  'redo',
  '|',
  'bold',
];
new Toolbar({
  root: '.my-toolbar',
  items: toolbarItems,
});

Uploading images

Before using image uploads, you need to set the image config.

new Editor({
  root: '.my-content',
  image: {
    requestMethod: 'POST',
    requestAction: '/upload',
    requestTypes: ['image/gif', 'image/jpeg', 'image/png'],
  },
});

Uploading videos

Before using video uploads, you need to set the media config.

new Editor({
  root: '.my-content',
  media: {
    requestMethod: 'POST',
    requestAction: '/upload',
    requestTypes: ['video/mp4', 'video/mpeg', 'video/webm'],
  },
});

Uploading files

Similarly, before using file uploads, you need to set the file config.

new Editor({
  root: '.my-content',
  file: {
    requestMethod: 'POST',
    requestAction: '/upload',
    requestTypes: ['application/zip', 'application/pdf'],
  },
});

Code block

This feature is powered by CodeMirror. Since CodeMirror is a quite large library and not all users require it, it is disabled by default. To enable it, include CodeMirror for Lake in your project:

npm

import * as CodeMirror from 'lake-codemirror';
window.LakeCodeMirror = CodeMirror;

CDN

<script src="https://cdn.jsdelivr.net/npm/lake-codemirror@2/dist/codemirror.min.js"></script>

Mathematical formula

Similarly, the formula feature is disabled by default. Enable it by adding KaTeX:

npm

import 'katex/dist/katex.css';
import katex from 'katex';
window.katex = katex;

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>