### Setting Up TOAST UI Editor for Development (Shell)

Source: https://github.com/nhn/tui.editor/blob/master/README.md

This snippet provides the necessary shell commands to set up the TOAST UI Editor development environment. It guides the user through cloning the repository, installing Node.js dependencies using npm, building the 'toastmark' package, and running editor tests to verify the setup before starting development.

```Shell
$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor
```

--------------------------------

### Installing TOAST UI Editor via npm

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This snippet demonstrates how to install the TOAST UI Editor using npm. It shows commands for installing the latest version and a specific version, requiring Node.js to be installed in the environment.

```sh
$ npm install --save @toast-ui/editor # Latest Version
$ npm install --save @toast-ui/editor@<version> # Specific Version
```

--------------------------------

### Including TOAST UI Editor via CDN in HTML

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This HTML snippet shows how to include the TOAST UI Editor library in a web page using a Content Delivery Network (CDN). It uses the `script` tag to load the minified JavaScript file from NHN Cloud's CDN, allowing for quick integration without local installation.

```html
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
```

--------------------------------

### Running Snowpack Development Server (sh)

Source: https://github.com/nhn/tui.editor/blob/master/README.md

This command starts a development server using Snowpack, which allows for running the application without bundling. It's suitable for modern development workflows.

```sh
$ npm run serve editor
```

--------------------------------

### Setting Up TOAST UI Local Development Environment (Shell)

Source: https://github.com/nhn/tui.editor/blob/master/CONTRIBUTING.md

This snippet provides the necessary commands to prepare a local development environment for TOAST UI. It covers installing all project dependencies, building the core `toastmark` component, and starting the local development server for real-time testing and development.

```Shell
npm install
npm run build toastmark
npm run serve
```

--------------------------------

### Importing TOAST UI Editor Constructor (ES6 Modules)

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet demonstrates how to import the `Editor` constructor function using ES6 module syntax in a Node.js environment. This allows for creating new instances of the TOAST UI Editor.

```javascript
import Editor from '@toast-ui/editor';
```

--------------------------------

### Creating TOAST UI Editor Instance with Configuration Options

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet demonstrates how to create an instance of the TOAST UI Editor with several configuration options. It sets the container element, specifies a fixed height, defines the initial editing mode as 'markdown', and sets the preview style to 'vertical'.

```javascript
const editor = new Editor({
  el: document.querySelector('#editor'),
  height: '600px',
  initialEditType: 'markdown',
  previewStyle: 'vertical'
});
```

--------------------------------

### Creating Basic TOAST UI Editor Instance

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet shows how to create a basic instance of the TOAST UI Editor. It initializes the editor by targeting the HTML element with the ID 'editor', which serves as the container for the editor interface.

```javascript
const editor = new Editor({
  el: document.querySelector('#editor')
});
```

--------------------------------

### Installing TOAST UI Editor with npm

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This snippet shows how to install the TOAST UI Editor package using npm. The first command installs the latest version, while the second allows installing a specific version by replacing `<version>` with the desired release number. This is the standard method for including the editor in a project.

```Shell
$ npm install @toast-ui/editor
$ npm install @toast-ui/editor@<version>
```

--------------------------------

### Running Webpack Development Server for Legacy Browsers (sh)

Source: https://github.com/nhn/tui.editor/blob/master/README.md

This command initiates a development server using Webpack, specifically for testing purposes in legacy browsers. It provides compatibility where Snowpack might not be sufficient.

```sh
$ npm run serve:ie editor
```

--------------------------------

### Importing TOAST UI Editor CSS (ES6 Modules)

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet demonstrates how to import the necessary CSS file for the TOAST UI Editor using ES6 module syntax in a Node.js environment. This ensures the editor's styles are applied correctly.

```javascript
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
```

--------------------------------

### Importing TOAST UI Editor Constructor (CommonJS)

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet shows how to import the `Editor` constructor function using CommonJS syntax, typically used in Node.js environments. This method provides access to the editor's main class for instance creation.

```javascript
const Editor = require('@toast-ui/editor');
```

--------------------------------

### Initializing TUI.Editor and Viewer with All Plugins (JavaScript)

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example12-editor-with-all-plugins.html

This snippet demonstrates how to initialize both the TUI.Editor and its viewer component, configuring them with a full suite of plugins such as chart, code syntax highlight, color syntax, table merged cell, and UML. It shows how to pass plugin options, like chartOptions and highlighter for codeSyntaxHighlight.

```JavaScript
const { Editor } = toastui; const { chart, codeSyntaxHighlight, colorSyntax, tableMergedCell, uml } = Editor.plugin; const chartOptions = { minWidth: 100, maxWidth: 600, minHeight: 100, maxHeight: 300 }; const editor = new Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', initialValue: allPluginsContent, plugins: [[chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], colorSyntax, tableMergedCell, uml] }); const viewer = Editor.factory({ el: document.querySelector('#viewer'), viewer: true, height: '500px', initialValue: allPluginsContent, plugins: [[chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], tableMergedCell, uml] });
```

--------------------------------

### Installing TOAST UI Editor Plugins via npm

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/plugin.md

This command installs a specific TOAST UI Editor plugin using npm. Users can install the latest version or a specific version by replacing `${pluginName}` with the desired plugin's package name and `<version>` for a specific release. This is the recommended method for project-based installations.

```Shell
$ npm install --save @toast-ui/editor-plugin-${pluginName} # Latest Version
```

```Shell
$ npm install --save @toast-ui/editor-plugin-${pluginName}@<version> # Specific Version
```

--------------------------------

### Installing Code Syntax Highlight Plugin with npm

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This command installs the TOAST UI Editor code syntax highlight plugin using npm. It is a prerequisite for using the plugin in a project.

```Shell
$ npm install @toast-ui/editor-plugin-code-syntax-highlight
```

--------------------------------

### Adding TOAST UI Editor CSS via CDN in HTML

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This HTML snippet demonstrates how to link the TOAST UI Editor's stylesheet from a CDN in the `<head>` section of an HTML document. This is required to apply the default styling for the editor when using the CDN distribution.

```html
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
```

--------------------------------

### Adding Editor Wrapper Element in HTML

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This HTML snippet defines a `div` element with the ID 'editor', which serves as the container where the TOAST UI Editor instance will be rendered. This element is a prerequisite for initializing the editor.

```html
<div id="editor"></div>
```

--------------------------------

### Importing TOAST UI Editor CSS (CommonJS)

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet shows how to import the TOAST UI Editor's CSS file using CommonJS syntax, typically used in Node.js environments. This ensures the editor's visual styles are loaded and applied.

```javascript
require('@toast-ui/editor/dist/toastui-editor.css');
```

--------------------------------

### Initializing TUI.Editor and Viewer with Chart Plugin - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/plugins/chart/demo/esm/index.html

This snippet demonstrates the complete setup for TUI.Editor and TUI.Editor.Viewer. It includes importing the core Editor and a custom chart plugin, defining initial markdown content that includes chart syntax, configuring chart display options, and then instantiating both the editor and viewer with these settings and plugins.

```JavaScript
import { Editor } from 'http://localhost:8080/dist/index.js';
import chartPlugin from '/dist/index.js';

const content = [
  '$$chart',
  ',category1,category2',
  'Jan,21,23',
  'Feb,31,17',
  '',
  'type: column',
  'title: Monthly Revenue',
  'x.title: Amount',
  'y.title: Month',
  'y.min: 1',
  'y.max: 40',
  'y.suffix: $',
  '$$'
].join('\n');

const chartOptions = {
  minWidth: 100,
  maxWidth: 600,
  minHeight: 100,
  maxHeight: 300
};

const editor = new Editor({
  el: document.querySelector('#editor'),
  previewStyle: 'vertical',
  height: '500px',
  initialValue: content,
  plugins: [[chartPlugin, chartOptions]]
});

const viewer = Editor.factory({
  el: document.querySelector('#viewer'),
  viewer: true,
  height: '500px',
  initialValue: content,
  plugins: [[chartPlugin, chartOptions]]
});
```

--------------------------------

### Accessing TOAST UI Editor Constructor (Browser Namespace)

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md

This JavaScript snippet illustrates how to access the `Editor` constructor function when the library is loaded via CDN in a browser environment. The `Editor` object is available under the global `toastui` namespace.

```javascript
const Editor = toastui.Editor;
```

--------------------------------

### Creating TOAST UI Editor Viewer Instance with UML Plugin (CDN Factory)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/uml/README.md

This example illustrates creating a TOAST UI Editor Viewer instance using the `Editor.factory` method with CDN-loaded scripts, incorporating the UML plugin. This provides flexibility for viewer initialization.

```js
const { Editor } = toastui;
const { uml } = Editor.plugin;

const viewer = Editor.factory({
  // ...
  plugins: [uml],
  viewer: true
});
```

--------------------------------

### Running Tests for TUI.Editor (sh)

Source: https://github.com/nhn/tui.editor/blob/master/README.md

This command executes the test suite for the TUI.Editor project. It is recommended to run these tests before submitting a Pull Request to ensure no errors are introduced.

```sh
$ npm test editor
```

--------------------------------

### Example: Importing Chart Plugin (ES Module)

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/plugin.md

This is a concrete example of importing the `chart` plugin using ES Module syntax. The `chart` variable will hold the plugin function, ready to be used in the TOAST UI Editor instance. This illustrates the general ES Module import pattern.

```JavaScript
import chart from '@toast-ui/editor-plugin-chart';
```

--------------------------------

### Installing TOAST UI Editor Color Syntax Plugin via npm

Source: https://github.com/nhn/tui.editor/blob/master/plugins/color-syntax/README.md

This command installs the `@toast-ui/editor-plugin-color-syntax` package using npm, making it available for use in a Node.js project. It's a prerequisite for integrating the plugin into a TOAST UI Editor instance.

```Shell
$ npm install @toast-ui/editor-plugin-color-syntax
```

--------------------------------

### Installing TOAST UI Editor via npm (Shell)

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/README.md

This command installs the latest version of TOAST UI Editor using npm. The `--save` flag adds the package as a dependency in your `package.json` file, making it a production dependency.

```Shell
$ npm install --save @toast-ui/editor # Latest Version
```

--------------------------------

### Using Multiple Plugins (CDN) in TOAST UI Editor

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/plugin.md

This example shows how to use multiple TOAST UI Editor plugins (chart and UML) when they are loaded via CDN. The plugins are accessed from the global `toastui.Editor.plugin` object and then passed into the `plugins` array during the editor's initialization. This method is suitable for simpler setups without a build system.

```JavaScript
const { Editor } = toastui;
const { chart, uml } = Editor.plugin;

const editor = new Editor({
  // ...
  plugins: [chart, uml]
});
```

--------------------------------

### Installing TOAST UI Editor UML Plugin with npm

Source: https://github.com/nhn/tui.editor/blob/master/plugins/uml/README.md

This command installs the TOAST UI Editor UML plugin into your project using npm. It is a prerequisite for using the plugin in a Node.js environment.

```sh
$ npm install @toast-ui/editor-plugin-uml
```

--------------------------------

### Creating TOAST UI Editor Instance with UML Plugin (npm)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/uml/README.md

This example illustrates how to initialize a TOAST UI Editor instance and integrate the UML plugin when using npm for dependency management. The plugin is passed as an array element to the `plugins` option during editor instantiation.

```js
import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const editor = new Editor({
  // ...
  plugins: [uml]
});
```

--------------------------------

### Creating TOAST UI Editor Viewer Instance with UML Plugin (npm Factory)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/uml/README.md

This example shows an alternative way to create a TOAST UI Editor Viewer instance using the `Editor.factory` method, integrating the UML plugin. This approach is useful for dynamically creating editor or viewer instances.

```js
import Editor from '@toast-ui/editor';
import uml from '@toast-ui/editor-plugin-uml';

const viewer = Editor.factory({
  // ...
  plugins: [uml],
  viewer: true
});
```

--------------------------------

### Full TUI.Editor Demo Initialization - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/demo/esm/index.html

This comprehensive code block demonstrates a complete setup of the TUI.Editor. It imports the `Editor` class, defines a multi-line markdown `content` string, and then initializes the editor with various configuration options such as the target `el`, `previewStyle`, `height`, `initialEditType`, and enables features like `useCommandShortcut`, `extendedAutolinks`, and `frontMatter`. The `initialValue` is set to the prepared `content`, and the editor instance is made globally accessible.

```JavaScript
import { Editor } from '/dist/index.js'; const content = [ '!\n![image](https://uicdn.toast.com/toastui/img/tui-editor-bi.png)', '', '# Awesome Editor!', '', 'It has been _released as opensource in 2018_ and has ~~continually~~ evolved to **receive 10k GitHub ⭐️ Stars**.', '', '## Create Instance', '', 'You can create an instance with the following code and use `getHtml()` and `getMarkdown()` of the [Editor](https://github.com/nhn/tui.editor).', '', '```js', 'const editor = new Editor(options);', '```', '', '> See the table below for default options', '> > More API information can be found in the document', '', '| name | type | description |', '| --- | --- | --- |', '| el | `HTMLElement` | container element |', '', '## Features', '', '* CommonMark + GFM Specifications', ' * Live Preview', ' * Scroll Sync', ' * Auto Indent', ' * Syntax Highlight', ' 1. Markdown', ' 2. Preview', '', '## Support Wrappers', '', '> * Wrappers', '> 1. [x] React', '> 2. [x] Vue', '> 3. [ ] Ember', ].join('\\n'); const editor = new Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '400px', initialEditType: 'markdown', useCommandShortcut: true, extendedAutolinks: true, frontMatter: true, initialValue: content, }); window.editor = editor;
```

--------------------------------

### Installing Specific Version of TOAST UI Editor via npm (Shell)

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/README.md

This command installs a specific version of TOAST UI Editor using npm. Replace `<version>` with the desired version number (e.g., `3.0.0`). The `--save` flag adds the package as a dependency in your `package.json` file.

```Shell
$ npm install --save @toast-ui/editor@<version> # Specific Version
```

--------------------------------

### Installing TOAST UI Editor Chart Plugin with npm

Source: https://github.com/nhn/tui.editor/blob/master/plugins/chart/README.md

This snippet provides the command to install the TOAST UI Editor Chart Plugin using npm, which is a prerequisite for using the plugin in a Node.js environment.

```sh
$ npm install @toast-ui/editor-plugin-chart
```

--------------------------------

### Initializing TUI Editor with Code Syntax Highlighting (JavaScript)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/demo/editor-all-langs.html

This snippet demonstrates how to initialize the TUI Editor instance, configuring it with a vertical preview style, a fixed height, and an initial content value. It also integrates the `codeSyntaxHighlight` plugin to enable syntax highlighting for various code blocks within the editor. The `content` variable, containing multiple language code examples, is defined here for use by both the editor and viewer.

```javascript
const content = [ '```js', `console.log('foo')`, '```', '```javascript', `console.log('bar')`, '```', '```html', '<div id="editor"><span>baz</span></div>', '```', '```wrong', '[1 2 3]', '```', '```clojure', '[1 2 3]', '```', ].join('\n');
const { Editor } = toastui;
const { codeSyntaxHighlight } = Editor.plugin;
const editor = new Editor({
  el: document.querySelector('#editor'),
  previewStyle: 'vertical',
  height: '500px',
  initialValue: content,
  plugins: [codeSyntaxHighlight]
});
```

--------------------------------

### Example Markdown Input for Custom Renderer

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/custom-html-renderer.md

This markdown snippet serves as an input example to demonstrate the effect of the `customHTMLRenderer` defined previously. It includes a heading, plain text, and line breaks, which will be processed by the custom renderer functions.

```markdown
## Heading

Hello
World
```

--------------------------------

### Placeholder for Example Code in Bug Report (JavaScript)

Source: https://github.com/nhn/tui.editor/blob/master/docs/ISSUE_TEMPLATE.md

This code snippet serves as a placeholder within the bug report template, indicating where users should provide example code to reproduce the described current behavior. It is intended to help developers understand the issue more clearly by providing a concrete, runnable example of the problem.

```JavaScript
// Write example code
```

--------------------------------

### Installing TOAST UI Editor React Wrapper via npm

Source: https://github.com/nhn/tui.editor/blob/master/apps/react-editor/README.md

This command installs the TOAST UI Editor React wrapper package using npm. The `--save` flag adds the package as a dependency in the project's `package.json` file, making it available for use in the application.

```Shell
npm install --save @toast-ui/react-editor
```

--------------------------------

### Example: Accessing Chart Plugin from CDN

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/plugin.md

This is a specific example demonstrating how to destructure and access the `chart` plugin function when it has been loaded via CDN. The `chart` variable will directly reference the plugin function from the `toastui.Editor.plugin` object.

```JavaScript
const { chart } = toastui.Editor.plugin;
```

--------------------------------

### HTML Output for openTag Token Example

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/custom-html-renderer.md

This HTML snippet shows the resulting HTML string generated from the `openTag` token example. It illustrates how the `tagName`, `classNames`, and `attributes` defined in the token object are translated into a valid HTML opening tag.

```html
<a class="my-class1 my-class2" href="http://ui.toast.com" target="_blank"></a>
```

--------------------------------

### Initializing TOAST UI Editor with All Prism.js Languages

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This code initializes the TOAST UI Editor, integrating the code syntax highlight plugin with support for all Prism.js languages. It imports the 'all' bundle of the plugin, simplifying language support setup.

```JavaScript
// ...
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import Editor from '@toast-ui/editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';


const editor = new Editor({
  // ...
  plugins: [codeSyntaxHighlight]
});
```

--------------------------------

### Initializing TUI Editor with Placeholder - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example17-placeholder.html

This snippet initializes a TUI Editor instance, setting its container element, preview style, height, and a custom placeholder text. The `placeholder` option allows displaying default text when the editor is empty, guiding the user on expected input.

```JavaScript
const editor = new toastui.Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', placeholder: 'Please enter text.' });
```

--------------------------------

### Initializing toastui.Editor in JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example01-editor-basic.html

This snippet initializes a new instance of the `toastui.Editor`. It configures the editor to attach to an HTML element with the ID 'editor', sets the preview style to 'vertical', defines a fixed height of '500px', and populates it with an initial value from a `content` variable. This setup is fundamental for embedding the editor into a web page.

```JavaScript
const editor = new toastui.Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', initialValue: content });
```

--------------------------------

### Initializing TUI Editor Viewer in JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example04-viewer.html

This snippet initializes a TUI Editor viewer instance. It requires a DOM element to render into, specified by the 'el' property, and an 'initialValue' which is the content to be displayed. This setup is for displaying markdown content in a read-only viewer.

```JavaScript
const viewer = new toastui.Editor({ el: document.querySelector('#viewer'), initialValue: content });
```

--------------------------------

### Initializing TUI Editor with Tab Preview - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example02-editor-with-horizontal-preview.html

This JavaScript snippet instantiates the TUI Editor, attaching it to an HTML element identified by '#editor'. It configures the editor to display a tabbed preview, sets its height to 500 pixels, and pre-fills it with specified initial content. This setup provides a horizontal preview layout.

```JavaScript
const editor = new toastui.Editor({ el: document.querySelector('#editor'), previewStyle: 'tab', height: '500px', initialValue: content });
```

--------------------------------

### Initializing TOAST UI EditorCore for Custom UI

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This snippet illustrates how to use the `EditorCore` module, which is provided for developers who want to implement a custom UI instead of the default. It shows importing `EditorCore`, instantiating it with an `el` (element) option, and then extracting the core editor elements (markdown editor, markdown preview, WYSIWYG editor) using `getEditorElements()` for custom rendering.

```JavaScript
import { EditorCore } from '@toast-ui/editor'; /* ES6 Module */

const editorCore = new EditorCore({
  el
  // ...
});

const { mdEditor, mdPreview, wwEditor } = editorCore.getEditorElements();

// ...
```

--------------------------------

### TUI Editor v2.0 HTML Dependencies

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This HTML snippet shows the required CSS and JavaScript dependencies for TUI Editor version 2.0. It includes CodeMirror for styling and the main TUI Editor bundle. These dependencies should be included in the <head> and <body> sections respectively.

```HTML
<head>
  ...
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css"
  />
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.css" />
  ...
</head>
<body>
  ...
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  ...
</body>
```

--------------------------------

### Accessing Removed Dependencies (v2.x) - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This JavaScript snippet demonstrates how CodeMirror and Squire instances were directly accessible from the tui.editor instance in v2.x using `getCodeMirror()` and `getSquire()`. These methods are no longer available in v3.0, as these dependencies have been removed.

```javascript
const editor = new Editor(/* */);

console.log(editor.getCodeMirror()); // CodeMirror Instance
console.log(editor.getSquire()); // squire Instance
```

--------------------------------

### Installing TOAST UI Editor Table Merged Cell Plugin via npm

Source: https://github.com/nhn/tui.editor/blob/master/plugins/table-merged-cell/README.md

This command installs the `@toast-ui/editor-plugin-table-merged-cell` package using npm, making it available for use in a Node.js project. It's a prerequisite for integrating the plugin into a TOAST UI Editor setup.

```Shell
$ npm install @toast-ui/editor-plugin-table-merged-cell
```

--------------------------------

### Initializing TOAST UI Editor Viewer with Chart Plugin (CDN)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/chart/README.md

This JavaScript snippet provides two examples for initializing a TOAST UI Editor Viewer instance with the chart plugin when using CDN. Both methods retrieve the necessary components from the global `toastui` object.

```js
const Viewer = toastui.Editor;
const { chart } = Viewer.plugin;

const viewer = new Viewer({
  // ...
  plugins: [chart]
});
```

```js
const { Editor } = toastui;
const { chart } = Editor.plugin;

const viewer = Editor.factory({
  // ...
  plugins: [chart],
  viewer: true
});
```

--------------------------------

### Initializing TOAST UI Editor Viewer with Code Syntax Highlight Plugin (Module)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This snippet demonstrates how to initialize a TOAST UI Editor Viewer instance with the code syntax highlight plugin using module imports. It requires importing Prism.js and its CSS, along with the plugin's CSS, and then passing Prism as the `highlighter` option to the plugin within the viewer's `plugins` array. This setup enables syntax highlighting for code blocks displayed in the viewer.

```JavaScript
// ...
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Import prismjs
import Prism from 'prismjs';

import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';


const viewer = new Viewer({
  // ...
  plugins: [[codeSyntaxHighlight, { highlighter: Prism }]]
});
```

--------------------------------

### Initializing TOAST UI Editor with Specific Prism.js Languages

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This example demonstrates how to initialize the TOAST UI Editor with the syntax highlight plugin, importing only specific Prism.js language files. It requires importing Prism.js itself and then registering the desired language components before passing Prism as the highlighter option.

```JavaScript
// ...
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Step 1. Import prismjs
import Prism from 'prismjs';

// Step 2. Import language files of prismjs that you need
import 'prismjs/components/prism-clojure.js';

import Editor from '@toast-ui/editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';

const editor = new Editor({
  // ...
  plugins: [[codeSyntaxHighlight, { highlighter: Prism }]]
});
```

--------------------------------

### Configuring Color Syntax Plugin with Custom Options

Source: https://github.com/nhn/tui.editor/blob/master/plugins/color-syntax/README.md

This example demonstrates how to pass custom options to the `color-syntax` plugin, specifically setting a `preset` array for the color palette. Options are provided as a nested array `[pluginFn, pluginOptions]` within the editor's `plugins` configuration.

```JavaScript
// ...
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';

import Editor from '@toast-ui/editor';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';

const colorSyntaxOptions = {
  preset: ['#181818', '#292929', '#393939']
};

const editor = new Editor({
  // ...
  plugins: [[colorSyntax, colorSyntaxOptions]]
});
```

--------------------------------

### Including TOAST UI Editor and Code Syntax Highlight Plugin via CDN (All Languages)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This HTML snippet demonstrates how to include the TOAST UI Editor and its code syntax highlight plugin using CDN links, specifically the 'all' version of the plugin. It involves linking Prism.js and the plugin's CSS in the `<head>`, and including the main editor and the 'all' version of the plugin's JavaScript files in the `<body>`. This setup provides support for all Prism.js languages.

```HTML
...
<head>
  ...
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
  />
  <link
    rel="stylesheet"
    href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css"
  />
  ...
</head>
<body>
  ...
  <!-- Editor -->
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  <!-- Editor's Plugin -->
  <script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
  ...
</body>
...
```

--------------------------------

### Initializing TUI Editor with Color Syntax Plugin (JavaScript)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/color-syntax/demo/editor.html

This snippet initializes a TUI Editor instance, configuring it for WYSIWYG editing with a vertical preview style and a specific height. It integrates the `colorSyntax` plugin, allowing users to apply colors to text within the editor. The editor targets an HTML element with the ID 'editor' and starts with a default instructional message.

```JavaScript
const { Editor } = toastui;
const { colorSyntax } = Editor.plugin;
const editor = new Editor({
  el: document.querySelector('#editor'),
  previewStyle: 'vertical',
  height: '500px',
  initialEditType: 'wysiwyg',
  initialValue: 'Select some text and choose a color from the toolbar.',
  plugins: [colorSyntax]
});
```

--------------------------------

### Initializing TUI Editor Viewer with Code Syntax Highlighting - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/demo/viewer.html

This snippet demonstrates how to initialize a `toastui.Editor` Viewer instance to display content, including various code blocks, with syntax highlighting. It defines the `content` string containing JavaScript, HTML, and Clojure code examples. The viewer is configured with a vertical preview style, a fixed height, and integrates the `codeSyntaxHighlight` plugin using Prism.js for effective code rendering. The viewer is mounted to an HTML element with the ID 'viewer'.

```javascript
const content = [ '\`\`\`js', '\`console.log(\'foo\')\`', '\`\`\`', '\`\`\`javascript', '\`console.log(\'bar\')\`', '\`\`\`', '\`\`\`html', '<div id=\"editor\"><span>baz</span></div>', '\`\`\`', '\`\`\`wrong', '[1 2 3]', '\`\`\`', '\`\`\`clojure', '[1 2 3]', '\`\`\`', ].join('\\n'); const Viewer = toastui.Editor; const { codeSyntaxHighlight } = Viewer.plugin; const { Prism } = window; const instance = new Viewer({ el: document.querySelector('#viewer'), previewStyle: 'vertical', height: '500px', initialValue: content, plugins: [[codeSyntaxHighlight, { highlighter: Prism }]], });
```

--------------------------------

### TUI Editor v3.0 HTML Dependencies

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This HTML snippet illustrates the updated CSS and JavaScript dependencies for TUI Editor version 3.0. Notably, CodeMirror is no longer required. The main TUI Editor bundle is still included, simplifying the dependency management.

```HTML
<head>
  ...
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.css" />
  ...
</head>
<body>
  ...
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  ...
</body>
```

--------------------------------

### TOAST UI Editor 3.0 Bundle Directory Structure

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This snippet outlines the file structure of the TOAST UI Editor v3.0 distribution bundle. It highlights the inclusion of new ESM bundles for tree shaking and a dark theme CSS file, alongside existing CDN, i18n, and various CSS/JS files, providing insight into the package's contents.

```Text
- dist/
   ├─ cdn/...
   ├─ i18n/...
   ├─ esm/
   │    ├─ index.js
   │    └─ index.js.map
   ├─ theme/
   │    └─ toastui-editor-dark.css
   │
   ├─ toastui-editor-only.css
   ├─ toastui-editor-viewer.css
   ├─ toastui-editor.css
   ├─ toastui-editor.js
   └─ toastui-editor-viewer.js
```

--------------------------------

### Initializing TOAST UI Editor Viewer via Factory with Code Syntax Highlight Plugin (Module)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This snippet provides an alternative method to initialize a TOAST UI Editor Viewer instance using `Editor.factory`. Similar to direct `Viewer` instantiation, it requires importing Prism.js and the plugin, then configuring the `viewer: true` option and passing Prism as the `highlighter` to the plugin within the `plugins` array. This approach is useful for creating a viewer from the main Editor factory.

```JavaScript
// ...
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

// Import prismjs
import Prism from 'prismjs';

import Editor from '@toast-ui/editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';

const viewer = Editor.factory({
  // ...
  viewer: true,
  plugins: [[codeSyntaxHighlight, { highlighter: Prism }]]
});
```

--------------------------------

### Basic TUI.Editor Instance Creation - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/demo/esm/index.html

This snippet illustrates the fundamental syntax for creating a new instance of the TUI.Editor. It highlights the `Editor` constructor which accepts an `options` object to configure the editor, and mentions the availability of `getHtml()` and `getMarkdown()` methods.

```JavaScript
const editor = new Editor(options);
```

--------------------------------

### Initializing TUI.Editor in WYSIWYG Mode (JavaScript)

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example03-editor-with-wysiwyg-mode.html

This JavaScript snippet initializes a new instance of the TUI.Editor, configuring it to display in WYSIWYG mode. It targets an HTML element with the ID 'editor', sets a fixed height of 500px, and populates it with predefined initial content. This setup is crucial for users who prefer a visual editing experience over Markdown.

```JavaScript
const editor = new toastui.Editor({ el: document.querySelector('#editor'), height: '500px', initialValue: content, initialEditType: 'wysiwyg' });
```

--------------------------------

### Initializing TUI Editor and Viewer with UML Plugin - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example11-editor-with-uml-plugin.html

This snippet demonstrates how to initialize both a TUI Editor instance and a TUI Viewer instance, both configured to use the UML plugin. It sets up the editor for vertical preview and the viewer for display, linking them to specific DOM elements and providing initial content. The `toastui` library and its `Editor.plugin.uml` are required dependencies.

```JavaScript
const { Editor } = toastui;
const { uml } = Editor.plugin;
const editor = new Editor({
  el: document.querySelector('#editor'),
  previewStyle: 'vertical',
  height: '500px',
  initialValue: umlContent,
  plugins: [uml]
});
const viewer = Editor.factory({
  el: document.querySelector('#viewer'),
  viewer: true,
  height: '500px',
  initialValue: umlContent,
  plugins: [uml]
});
```

--------------------------------

### Initializing TUI Editor and Viewer with UML Plugin - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/plugins/uml/demo/esm/index.html

This snippet demonstrates how to import the TUI Editor and a UML plugin, define sample UML content, and then initialize both an Editor instance and a Viewer instance. It shows how to configure the target DOM element, preview style, height, initial value, and integrate plugins for both components.

```JavaScript
import { Editor } from 'http://localhost:8080/dist/index.js'; import umlPlugin from '/dist/index.js'; const content = [ '$$uml', 'partition Conductor {', ' (*) --> "Climbs on Platform"', ' --> === S1 ===', ' --> Bows', '}', '', 'partition Audience #LightSkyBlue {', ' === S1 === --> Applauds', '}', '', 'partition Conductor {', ' Bows --> === S2 ===', ' --> WavesArmes', ' Applauds --> === S2 ===', '}', '', 'partition Orchestra #CCCCEE {', ' WavesArmes --> Introduction', ' --> "Play music"', '}', '$$' ].join('\n'); const editor = new Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', initialValue: content, plugins: [umlPlugin] }); const viewer = Editor.factory({ el: document.querySelector('#viewer'), viewer: true, height: '500px', initialValue: content, plugins: [umlPlugin] });
```

--------------------------------

### Initializing TUI Editor and Viewer with Table Merged Cell Plugin - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example10-editor-with-table-merged-cell-plugin.html

This snippet initializes both a TUI Editor instance and a TUI Viewer instance. It demonstrates how to import the Editor and its tableMergedCell plugin, then configure each instance with a target DOM element ('#editor' or '#viewer'), height, initial content (tableContent), and the tableMergedCell plugin. The 'tableContent' variable is a prerequisite that should contain the initial Markdown content for the editor/viewer.

```JavaScript
const { Editor } = toastui; const { tableMergedCell } = Editor.plugin; const editor = new Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', initialValue: tableContent, plugins: [tableMergedCell] }); const viewer = Editor.factory({ el: document.querySelector('#viewer'), viewer: true, height: '500px', initialValue: tableContent, plugins: [tableMergedCell] });
```

--------------------------------

### Importing TOAST UI Editor in JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This snippet demonstrates how to import the TOAST UI Editor module in JavaScript. It provides examples for both CommonJS (using `require`) and ES6 Modules (using `import`), allowing developers to integrate the editor into various JavaScript environments.

```JavaScript
const Editor = require('@toast-ui/editor'); /* CommonJS */
import Editor from '@toast-ui/editor'; /* ES6 Module */
```

--------------------------------

### Creating TOAST UI Editor Viewer Instance via factory method with Table Merged Cell Plugin (CDN)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/table-merged-cell/README.md

This example demonstrates creating a TOAST UI Editor Viewer instance using the `Editor.factory` method with CDN-loaded assets. It accesses the necessary objects from the global `toastui` namespace and configures the viewer with the plugin.

```JavaScript
const { Editor } = toastui;
const { tableMergedCell } = Editor.plugin;

const viewer = Editor.factory({
  // ...
  plugins: [tableMergedCell],
  viewer: true
});
```

--------------------------------

### Importing TUI Editor Sample - JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/libs/toastmark/demo/index.html

This snippet imports a JavaScript file from the `dist/__sample__` directory. It is typically used to load and execute a demo or sample application related to the TUI Editor, acting as an entry point for the demonstration.

```JavaScript
import '/dist/__sample__/index.js';
```

--------------------------------

### Text Manipulation API: WYSIWYG Editor Position Type - TypeScript

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This TypeScript type definition shows how positional information (`EditorPos`) is represented for the WYSIWYG editor in tui.editor v3.0. It uses a single number to denote the offset from the start of the document, contrasting with the line-and-character-offset approach of the Markdown editor.

```typescript
// WYSIWYG's Position Information
type EditorPos = number; // 오프셋
// Offset
```

--------------------------------

### Creating TOAST UI Editor Instance with Color Syntax Plugin (npm)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/color-syntax/README.md

This code initializes a TOAST UI Editor instance and integrates the `colorSyntax` plugin by adding it to the `plugins` array. It assumes the necessary CSS and JavaScript modules have already been imported, enabling color syntax functionality within the editor.

```JavaScript
// ...
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';

import Editor from '@toast-ui/editor';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';

const editor = new Editor({
  // ...
  plugins: [colorSyntax]
});
```

--------------------------------

### Using Multiple Plugins (ES Module) in TOAST UI Editor

Source: https://github.com/nhn/tui.editor/blob/master/docs/en/plugin.md

This example demonstrates how to import and use multiple TOAST UI Editor plugins (chart and UML) when using ES Modules. Each plugin is imported separately and then included in the `plugins` array during the editor's instantiation. This allows for modular extension of editor features.

```JavaScript
import Editor from '@toast-ui/editor';
import chart from '@toast-ui/editor-plugin-chart';
import uml from '@toast-ui/editor-plugin-uml';

const editor = new Editor({
  // ...
  plugins: [chart, uml]
});
```

--------------------------------

### Initializing TOAST UI Editor with Code Syntax Highlight Plugin via CDN (All Languages)

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/README.md

This JavaScript snippet shows how to initialize a TOAST UI Editor instance when the editor and plugin are loaded via CDN, specifically when using the 'all' version of the plugin. It accesses the `Editor` and `codeSyntaxHighlight` objects from the global `toastui` object and then passes the plugin directly to the `plugins` array during editor instantiation. This assumes the necessary CDN files have been included in the HTML.

```JavaScript
const { Editor } = toastui;
const { codeSyntaxHighlight } = Editor.plugin;

const instance = new Editor({
  // ...
  plugins: [codeSyntaxHighlight]
});
```

--------------------------------

### Defining TextObject Interface in TUI Editor v2.x (TypeScript)

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide-ko.md

This TypeScript interface defines the structure of the `TextObject` in TUI Editor v2.x, which was used for text manipulation. It includes methods for setting and expanding ranges, getting content, and replacing/deleting content. This API was removed in v3.0 due to its complex internal structure.

```typescript
interface TextObject {
  setRange(range): void;
  setEndBeforeRange(range): void;
  expandStartOffset(): void;
  expandEndOffset(): void;
  getTextContent(): string;
  replaceContent(content) : void;
  deleteContent(): void;
  peekStartBeforeOffset(offset): Range;
}
```

--------------------------------

### Creating TOAST UI Viewer Instance with Code Syntax Highlighting in JavaScript

Source: https://github.com/nhn/tui.editor/blob/master/plugins/code-syntax-highlight/demo/editor.html

This snippet demonstrates how to create a TOAST UI Viewer instance using `Editor.factory`. It configures the viewer with a specific DOM element, height, and the same initial content as the editor. It also applies the `codeSyntaxHighlight` plugin with `Prism` for consistent code rendering.

```JavaScript
const viewer = Editor.factory({ el: document.querySelector('#viewer'), viewer: true, height: '500px', initialValue: content, plugins: [[codeSyntaxHighlight, { highlighter: Prism }]], });
```

--------------------------------

### Text Manipulation API: TextObject Interface (v2.x) - TypeScript

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This TypeScript interface defines the `TextObject` used in tui.editor v2.x for manipulating editor content. It provides methods for setting ranges, expanding offsets, getting text content, and performing content replacement or deletion. Users needed to understand this structure to interact with the editor's text.

```typescript
interface TextObject {
  setRange(range): void;
  setEndBeforeRange(range): void;
  expandStartOffset(): void;
  expandEndOffset(): void;
  getTextContent(): string;
  replaceContent(content) : void;
  deleteContent(): void;
  peekStartBeforeOffset(offset): Range;
}
```

--------------------------------

### TOAST UI Editor package.json Exports Configuration

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This JSON snippet shows the `exports` field in the `package.json` file for TOAST UI Editor v3.0. It defines entry points for both CommonJS (`require`) and ES Modules (`import`), ensuring proper module resolution for different environments and supporting features like tree shaking for the ESM bundle.

```JSON
{
  "main": "dist/toastui-editor.js",
  "module": "dist/esm/",
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/toastui-editor.js"
    },
    "./viewer": {
      "import": "./dist/esm/indexViewer.js",
      "require": "./dist/toastui-editor-viewer.js"
    }
  }
}
```

--------------------------------

### Defining HTML and Markdown Renderers for TUI.Editor Plugin Conversion (TypeScript)

Source: https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md

This snippet illustrates how to customize content conversion between markdown and WYSIWYG editors using `toHTMLRenderers` and `toMarkdownRenderers` options in a TUI.Editor plugin. `toHTMLRenderers` defines how markdown elements are converted to HTML for preview or WYSIWYG, while `toMarkdownRenderers` defines how WYSIWYG elements are converted back to markdown. This example specifically shows customization for `tableCell` and `tableHead` nodes, enabling control over the rendering process per node type.

```TypeScript
return {
  toHTMLRenderers: {
    // ...
    tableCell(node: MergedTableCellMdNode, { entering, origin }) {
      const result = origin!();

      // ...
      
      return result;
    }
  },
  toMarkdownRenderers: {
    // ...
    tableHead(nodeInfo) {
      const row = (nodeInfo.node as ProsemirrorNode).firstChild;

      let delim = '';

      if (row) {
        row.forEach(({ textContent, attrs }) => {
          const headDelim = createTableHeadDelim(textContent, attrs.align);

          delim += `| ${headDelim} `;

          // ...
        });
      }
      return { delim };
    }
  }
};
```

--------------------------------

### Initializing TUI Editor and Viewer with Code Syntax Highlight Plugin (JavaScript)

Source: https://github.com/nhn/tui.editor/blob/master/apps/editor/examples/example08-editor-with-code-syntax-highlight-plugin.html

This snippet demonstrates how to initialize both a TUI Editor instance and a TUI Viewer instance, integrating the `codeSyntaxHighlight` plugin. It configures the editor and viewer to display content with syntax highlighting using the Prism library. The `initialValue` is set to `codeContent`, and both instances are rendered to specific DOM elements (`#editor` and `#viewer`).

```javascript
const { Editor } = toastui; const { codeSyntaxHighlight } = Editor.plugin; const editor = new Editor({ el: document.querySelector('#editor'), previewStyle: 'vertical', height: '500px', initialValue: codeContent, plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] }); const viewer = Editor.factory({ el: document.querySelector('#viewer'), viewer: true, height: '500px', initialValue: codeContent, plugins: [[codeSyntaxHighlight, { highlighter: Prism }]] });
```