Lake

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

In your HTML page, add the following code that will serve as placeholders for the editor:

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

Use the following JavaScript code to render the editor. You can customize the configuration for the toolbar and editor as needed.

js
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();

Visit the npm example on CodeSandbox to see this in action.

Note

Ensure lake.css is included before rendering the editor.

Quick start with CDN ​

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

In the <head> of your HTML page, add the following lines of code:

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>

In the HTML page, add the following code that will serve as placeholders for the editor:

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

Use the following JavaScript code to render the editor. You can customize the configuration for the toolbar and editor as needed.

js
const { Editor, Toolbar } = Lake;

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

Visit the CDN example on this website to see the result of running the code above. The same example is also available 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, and Angular.

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

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

  useEffect(() => {
    const toolbar = new Toolbar({
      root: toolbarRef.current,
    });
    const editor = new Editor({
      root: contentRef.current,
      toolbar,
    });
    editor.render();
    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();
});

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>
ts
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,
      });
      editor.render();
      this.editor = editor;
    });
  }
}

You can go to CodeSandbox to try out the code above.

Getting and setting value ​

Lake provides the following methods to get and set the editor's content.

Initializing the editor with provided value ​

The value config is used to set the content when initializing the editor.

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

Getting value ​

You can call getValue() method to get the current content.

js
const content = editor.getValue();

Setting value ​

You can use setValue() method to replace the existing content with the provided value.

js
editor.setValue('<p>foo</p>');

Binding events ​

Lake allows you to set up an event using the editor.event.on() method.

change event ​

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

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

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

To find out more available events, refer to the Editor class.

Customizing toolbar ​

Lake allows you to make your own toolbar by setting the items config. For more details, see the Toolbar config page.

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

Uploading images ​

To upload images, you need to configure the request settings for the image plugin. For more details, see the image config.

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

Uploading files ​

To upload files, you need to configure the request settings for the file plugin. For more details, see the file config.

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

Code block ​

The code block feature in Lake is implemented using CodeMirror. However, since CodeMirror is quite large and not all users may need this feature, it is disabled by default. To activate it, simply add CodeMirror for Lake into your code:

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

For the same reason as the code block feature, the formula feature is disabled by default. Activate it by adding KaTeX:

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

Released under the MIT License.

Copyright © 2024-present Luo Longhao