Getting started

Quick start with npm

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

bash

npm install lakelib

Place placeholders for the toolbar and the content area:

html

<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:

html

<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:

html

<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.

ReactVueSvelteAngular

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>

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:

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.

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:

npmCDN

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

html

<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:

npmCDN

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

html

<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>

Getting started ​

Quick start with npm ​

Quick start with CDN ​

Integrating with frameworks ​

Getting and setting value ​

Initializing the editor with a provided value ​

Getting value ​

Setting value ​

Binding events ​

change event ​

statechange event ​

Customizing toolbar ​

Uploading images ​

Uploading videos ​

Uploading files ​

Code block ​

Mathematical formula ​

Getting started

Quick start with npm

Quick start with CDN

Integrating with frameworks

Getting and setting value

Initializing the editor with a provided value

Getting value

Setting value

Binding events

`change` event

`statechange` event

Customizing toolbar

Uploading images

Uploading videos

Uploading files

Code block

Mathematical formula