Editor config

Lake is highly customizable via configuration options that can be passed directly to the Editor class. You can tailor its behavior, appearance, and functionality by providing values for various properties.

Example:

const toolbar = new Toolbar({
  root: '.my-toolbar',
});
new Editor({
  root: '.my-content',
  toolbar,
  value: '<p><br /></p>',
  spellcheck: false,
  tabIndex: 0,
  placeholder: 'Add your comment here...',
  indentWithTab: true,
  lang: 'en-US',
  minChangeSize: 5,
  historySize: 100,
  slash: false,
  mention: false,
});

TIP

You can disable any plugin by setting its configuration to false. For instance, setting mention to false will prevent the mention pop-up menu from appearing during content editing.

root

Specifies the element where the editor is appended.

• Type: CSS selector | DOM element | Nodes

CSS selector:

new Editor({
  root: '.my-content',
});

DOM element:

new Editor({
  root: document.querySelector('.my-content'),
});

Nodes:

new Editor({
  root: query('.my-content'),
});

toolbar

Defines the toolbar for the editor. If not given, the editor will be rendered without toolbar. For more details, see the Toolbar config page.

• Type: Toolbar

Example:

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

value

Defines the default content for the editor. Its format uses LML format that is similar to HTML.

• Type: string
• Default: <p><br /></p>

Example:

const defaultValue = `
  <h1>title</h1>
  <p>content<focus /></p>
  <p><lake-box type="inline" name="image" value="..."></lake-box></p>
`;
new Editor({
  value: defaultValue,
});

readonly

Enables read-only mode for viewing content without editing. You can visit the Read-only mode example to see how it displays.

• Type: boolean
• Default: false

Example:

new Editor({
  readonly: true,
});

spellcheck

Enables or disables spellcheck.

• Type: boolean
• Default: false

Example:

new Editor({
  spellcheck: true,
});

tabIndex

Defines the tab order of the editor.

• Type: number
• Default: 0

Example:

new Editor({
  tabIndex: -1,
});

placeholder

Defines the placeholder text displayed when the editor is empty.

• Type: string

Example:

new Editor({
  placeholder: 'Add your comment here...',
});

indentWithTab

Allows indentation using the Tab key. When set to false, you can use Tab or Shift-Tab to move the focus. The Comment box example demonstrates how it works.

• Type: boolean
• Default: true

Example:

new Editor({
  indentWithTab: false,
});

lang

Defines the language for the editor UI. You can visit the Internationalization example to see how it displays.

• Type: 'en-US' | 'zh-CN' | 'ko' | 'ja'
• Default: en-US

Example:

new Editor({
  lang: 'zh-CN',
});

minChangeSize

Specifies the minimum text length to trigger history save. If the inputted text is shorter than the minChangeSize, the history will not be saved until the length reaches or exceeds this threshold.

• Type: number
• Default: 5

Example:

new Editor({
  minChangeSize: 10,
});

historySize

Sets the maximum number of history entries. When this threshold is reached, the earliest item in the history will be removed.

• Type: number
• Default: 100

Example:

new Editor({
  historySize: 200,
});

slash

items

Defines the menu items for the slash commands.

• Type: (string | SlashItem)[]
• Default:

[
  'heading1',
  'heading2',
  'heading3',
  'heading4',
  'heading5',
  'heading6',
  'paragraph',
  'blockQuote',
  'numberedList',
  'bulletedList',
  'checklist',
  'table',
  'infoAlert',
  'tipAlert',
  'warningAlert',
  'dangerAlert',
  'hr',
];

Example:

new Editor({
  slash: [
    'image',
    'heading1',
    'paragraph',
    'blockQuote',
    'numberedList',
    'bulletedList',
    'checklist',
    'table',
    'hr',
  ],
});

The following built-in slash items are available:

• heading1: Converts the selected block into a heading 1.

• heading2: Converts the selected block into a heading 2.

• heading3: Converts the selected block into a heading 3.

• heading4: Converts the selected block into a heading 4.

• heading5: Converts the selected block into a heading 5.

• heading6: Converts the selected block into a heading 6.

• paragraph: Converts the selected block into a paragraph.

• blockQuote: Formats the selected block as a block quotation.

• numberedList: Creates a numbered list.

• bulletedList: Creates a bulleted list.

• checklist: Creates a checklist.

• table: Inserts a table.

• infoAlert: Creates an info alert.

• tipAlert: Creates a tip alert.

• warningAlert: Creates a warning alert.

• dangerAlert: Creates a danger alert.

• hr: Inserts a horizontal line.

• codeBlock: Inserts a block of code.

• video: Inserts a video.

• equation: Inserts a mathematical formula.

• image: Uploads and inserts an image.

• file: Uploads and inserts a file.

image

requestAction

Defines the request URL for uploading image.

• Type: URL

Its response data should follow the following format:

{
  "url": "http://example.com/foo.png"
}

requestMethod

Defines the request method for uploading image.

• Type: 'POST' | 'PUT' | 'PATCH'
• Default: POST

requestTypes

Defines the MIME types allowed for uploading image.

• Type: string[]
• Default: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp']

Example:

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

file

requestAction

Defines the request URL for uploading file.

• Type: URL

Its response data should follow the following format:

{
  "url": "http://example.com/foo.pdf"
}

requestMethod

Defines the request method for uploading file.

• Type: 'POST' | 'PUT' | 'PATCH'
• Default: POST

requestTypes

Defines the MIME types allowed for uploading file.

• Type: string[]
• Default:

[
  'application/zip',
  'application/x-zip-compressed',
  'application/vnd.rar',
  'image/gif',
  'image/jpeg',
  'image/png',
  'image/svg+xml',
  'image/webp',
  'text/plain',
  'text/html',
  'application/pdf',
  'application/msword',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  'application/vnd.ms-excel',
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  'application/vnd.ms-powerpoint',
  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
]

Example:

new Editor({
  image: {
    requestMethod: 'POST',
    requestAction: '/upload',
    requestTypes: ['application/zip', 'application/pdf'],
  },
});

codeBlock

langList

Defines the language types for the dropdown.

• Type: string[]
• Default:

[
  'text',
  'c',
  'csharp',
  'cpp',
  'css',
  'go',
  'html',
  'java',
  'javascript',
  'json',
  'markdown',
  'php',
  'python',
  'rust',
  'sql',
  'typescript',
  'xml',
  'yaml',
]

defaultLang

Defines the default language type.

• Type: string
• Default: text

Example:

new Editor({
  codeBlock: {
    langList: ['text', 'html', 'css', 'javascript'],
    defaultLang: 'javascript',
  },
});

mention

requestAction

Defines the request URL for getting user list.

• Type: URL

Its response data should follow the following format:

{
  "data": [
    {
      "id": "1",
      "name": "foo",
      "nickname": "Foo",
      "avatar": "<img src=\"/images/foo.png\" />"
    },
    {
      "id": "2",
      "name": "bar",
      "nickname": "Bar",
      "avatar": "<img src=\"/images/bar.png\" />"
    }
  ]
}

requestMethod

Defines the request method for getting user list.

• Type: 'GET' | 'POST' | 'PUT' | 'PATCH'
• Default: GET

getProfileUrl

Defines the function that returns a URL to visit the user profile.

• Type: function
• Default:

(value: MentionItem) => `/${value.name}`

Example:

new Editor({
  mention: {
    requestMethod: 'GET',
    requestAction: '/mention/list',
    getProfileUrl: value => `/user/${value.id}`
  },
});