### Element-Tiptap Installation and Usage

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/INDEX.md

Shows how to install and use the Element-Tiptap component with basic configuration.

```typescript
// Installation
import { ElementTiptap } from 'element-tiptap'

// Component usage
<el-tiptap v-model:content="content" :extensions="extensions" />

// Extension configuration
Bold.configure({ bubble: true })

// Accessing editor
editor.commands.insertContent('Hello!')
```

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

### Install with NPM

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Use this command to add element-tiptap to your project using NPM.

```shell
npm install --save element-tiptap
```

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

### Example FontSize Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring FontSize with a specific set of pixel values.

```typescript
FontSize.configure({
  fontSizes: ['12', '14', '16', '18', '20', '24', '32']
})
```

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

### Example LineHeight Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring LineHeight for paragraphs and headings with specific percentage options.

```typescript
LineHeight.configure({
  types: ['paragraph', 'heading'],
  lineHeights: ['100%', '120%', '150%', '180%', '200%']
})
```

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

### Basic Editor Setup

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Initialize the ElTiptap component with content, extensions, and basic configuration like placeholder, width, and height. This is the fundamental setup for using the editor.

```vue
<template>
  <el-tiptap
    v-model:content="content"
    :extensions="extensions"
    placeholder="Start typing..."
    width="100%"
    height="500px"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ElementTiptap } from 'element-tiptap'
import {
  Doc, Text, Paragraph, Heading, Bold, Italic,
  BulletList, OrderedList, Link, Image, Table, History
} from 'element-tiptap'

const content = ref('')
const extensions = [
  Doc, Text, Paragraph, Heading, Bold, Italic,
  BulletList, OrderedList, Link, Image, Table, History
]
```

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

### Element-Tiptap Configuration Examples

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/INDEX.md

Demonstrates how to configure various Element-Tiptap extensions for common use cases.

```typescript
const extensions = [
  Heading.configure({ levels: [1, 2, 3] }),
  Bold.configure({ bubble: true }),
  Image.configure({ uploadRequest: handler }),
  CodeView.configure({ codemirror: CodeMirror })
]
```

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

### Example CodeView Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring CodeView with CodeMirror, enabling line numbers, wrapping, and setting tab size and mode.

```typescript
import CodeMirror from 'codemirror'
import { CodeView } from 'element-tiptap'

const extensions = [
  CodeView.configure({
    codemirror: CodeMirror,
    codemirrorOptions: {
      lineNumbers: true,
      lineWrapping: true,
      tabSize: 2,
      mode: 'text/html'
    }
  })
]
```

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

### Example Indent Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring Indent for paragraphs, headings, and blockquotes with custom min/max indent levels.

```typescript
Indent.configure({
  types: ['paragraph', 'heading', 'blockquote'],
  minIndent: 0,
  maxIndent: 10
})
```

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

### Complete Element-Tiptap Usage Example

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

A full example showcasing the Element-Tiptap component with a variety of common extensions, including configuration for placeholders, dimensions, output format, tooltips, character count, and event handling.

```vue
<template>
  <div>
    <el-tiptap
      v-model:content="content"
      :extensions="extensions"
      placeholder="Start writing..."
      width="100%"
      height="400px"
      output="html"
      :tooltip="true"
      :enableCharCount="true"
      @onCreate="handleCreate"
      @onUpdate="handleUpdate"
    />
    <p>Characters: {{ charCount }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Italic,
  Underline,
  Strike,
  Link,
  BulletList,
  OrderedList,
  CodeBlock,
  Blockquote,
  Image,
  Table,
  History,
} from 'element-tiptap'

const content = ref('<h1>Welcome!</h1><p>Start editing...</p>')
const charCount = ref(0)

const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ levels: [1, 2, 3, 4, 5, 6] }),
  Bold.configure({ bubble: true }),
  Italic.configure({ bubble: true }),
  Underline,
  Strike,
  Link,
  BulletList,
  OrderedList,
  CodeBlock,
  Blockquote,
  Image,
  Table,
  History,
]

const handleCreate = ({ editor }) => {
  console.log('Editor ready')
}

const handleUpdate = (newContent, editor) => {
  content.value = newContent
  charCount.value = editor.storage.characterCount.characters()
}
</script>
```

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

### Example TextAlign Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring TextAlign for headings and paragraphs with left, center, and right alignments.

```typescript
TextAlign.configure({
  types: ['heading', 'paragraph'],
  alignments: ['left', 'center', 'right']
})
```

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

### Example Heading Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring the Heading extension to support only H1, H2, and H3 levels.

```typescript
import { Heading } from 'element-tiptap'

const extensions = [
  Heading.configure({ levels: [1, 2, 3] }) // Only H1, H2, H3
]
```

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

### Install with Yarn

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Use this command to add element-tiptap to your project using Yarn.

```shell
yarn add element-tiptap
```

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

### Build Commands for Element-Tiptap

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Commands to build the library, build the demo application, and start the development server.

```bash
yarn build:lib

yarn build:demo

yarn dev
```

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

### Example FontFamily Extension Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Example of configuring FontFamily with a map for Arial, Georgia, and Courier.

```typescript
FontFamily.configure({
  fontFamilyMap: {
    'Arial': 'Arial',
    'Georgia': 'Georgia',
    'Courier': '"Courier New", monospace'
  }
})
```

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

### Install and Configure CodeMirror

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

To resolve CodeMirror errors in the CodeView extension, install the `codemirror` package and configure it within the `CodeView` extension settings.

```bash
yarn add codemirror
```

```typescript
import CodeMirror from 'codemirror'
import { CodeView } from 'element-tiptap'

extensions: [
  CodeView.configure({ codemirror: CodeMirror })
]
```

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

### Use Code View Hook - Vue Usage

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/hooks.md

Provides an example of using the `useCodeView` hook in a custom setup. It shows how to get the `cmTextAreaRef` and `isCodeViewMode` refs and how to toggle the code view mode.

```typescript
import { useCodeView } from 'element-tiptap/src/hooks'
import { useEditor } from '@tiptap/vue-3'

const editor = useEditor({ /* config */ })
const { cmTextAreaRef, isCodeViewMode } = useCodeView(editor)

// Toggle code view
const toggleCodeView = () => {
  isCodeViewMode.value = !isCodeViewMode.value
}
```

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

### Basic Document Usage

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Example of how to include the Doc extension in your editor's extension list.

```typescript
import { Doc } from 'element-tiptap'

const extensions = [Doc, Text, Paragraph, /* ... */]
```

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

### Basic Element-Tiptap Usage with Extensions

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Demonstrates the basic setup for the Element-Tiptap editor, including binding content and configuring extensions for the toolbar and bubble menu.

```vue
<template>
  <el-tiptap v-model:content="content" :extensions="extensions" />
</template>

<script setup>
import { ref } from 'vue';
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  BulletList,
  OrderedList,
} from 'element-tiptap';

// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ level: 5 }),
  Bold.configure({ bubble: true }), // render command-button in bubble menu.
  Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// editor's content
const content = ref(
  `
  <h1>Heading</h1>
  <p>This Editor is awesome!</p>
`
);
</script>
```

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

### Global Component Registration with ElementTiptapPlugin

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

Install the ElementTiptap plugin to register the editor component globally. Ensure you import the necessary CSS.

```typescript
import { createApp } from 'vue'
import ElementTiptapPlugin from 'element-tiptap'
import 'element-tiptap/lib/style.css'

const app = createApp(App)
app.use(ElementTiptapPlugin)
// Components 'element-tiptap' and 'el-tiptap' are now available globally
```

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

### Example Translation Structure (Japanese)

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/i18n.md

Illustrates the expected structure for a new locale file, mirroring the English reference. Ensure all keys are translated.

```typescript
// src/i18n/locales/ja.ts
export default {
  editor: {
    extensions: {
      Bold: {
        tooltip: '太字'
      },
      // ... translate all keys
    },
    characters: '文字数'
  }
}
```

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

### Install Element-Tiptap Plugin

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Integrate the Element-Tiptap plugin globally into your Vue application. Ensure ElementPlus is also used.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
// import ElementTiptap's styles
import 'element-tiptap/lib/style.css';

const app = createApp(App);

// use ElementPlus's plugin
app.use(ElementPlus);
// use this package's plugin
app.use(ElementTiptapPlugin);
// Now you register `'el-tiptap'` component globally.

app.mount('#app');
```

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

### Import Main Component and Plugin

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Import the primary Element-Tiptap component and its associated plugin. This is the most common starting point for using the library.

```typescript
// Main component
import { ElementTiptap, ElementTiptapPlugin } from 'element-tiptap'
```

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

### Configuring Extensions with Options

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Illustrates how to configure extensions with specific options. For example, setting heading levels, enabling bubble menus for bold, or defining available font sizes.

```typescript
import { Heading, Bold, FontSize } from 'element-tiptap'

const extensions = [
  Heading.configure({ levels: [1, 2, 3] }),
  Bold.configure({ bubble: true }),
  FontSize.configure({ fontSizes: ['12', '14', '16', '18', '20'] })
]
```

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

### Vue App Setup with Element-Tiptap

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Integrate Element-Tiptap into your Vue application by importing and using the plugin. Ensure the CSS is also imported.

```typescript
import { createApp } from 'vue'
import ElementTiptapPlugin from 'element-tiptap'
import 'element-tiptap/lib/style.css'

const app = createApp(App)
app.use(ElementTiptapPlugin)
app.mount('#app')
```

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

### Translation Object Structure Example

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/i18n.md

Illustrates the expected structure of a translation object using dot notation for nested keys.

```json
// Translation object structure
{
  editor: {
    extensions: {
      Bold: {
        tooltip: 'Bold'
      }
    }
  }
}

// Access with
t('editor.extensions.Bold.tooltip') // Returns 'Bold'
```

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

### Display Placeholder Text

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Use the `placeholder` prop to show guiding text when the editor is empty. This prop accepts a string value.

```html
<el-tiptap placeholder="Write something …" />
```

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

### Paragraph Usage

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Example of how to include the Paragraph extension in your editor's extension list.

```typescript
import { Paragraph } from 'element-tiptap'

const extensions = [/* ... */, Paragraph, /* ... */]
```

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

### Dynamic Language Switching Example

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/i18n.md

Demonstrates how to implement runtime language switching in a Vue.js application. It uses a select element to change the editor's locale and includes lazy loading for locale files.

```vue
<template>
  <div>
    <select v-model="selectedLanguage" @change="switchLanguage">
      <option value="en">English</option>
      <option value="zh">中文</option>
      <option value="de">Deutsch</option>
    </select>

    <el-tiptap
      v-model:content="content"
      :extensions="extensions"
      :locale="currentLocale"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElementTiptap } from 'element-tiptap'
import locales from './locales'

const selectedLanguage = ref('en')
const content = ref('')

const currentLocale = computed(() => {
  return locales[selectedLanguage.value] || locales.en
})

// Lazy load locales
const locales = {
  en: () => import('element-tiptap/lib/locales/en'),
  zh: () => import('element-tiptap/lib/locales/zh'),
  de: () => import('element-tiptap/lib/locales/de'),
}
</script>
```

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

### Accessing Editor Instance and Inserting Content

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Shows how to get a reference to the editor instance using `ref` and then use its commands, such as `insertContent`, to manipulate the editor's content programmatically.

```vue
<template>
  <el-tiptap ref="editorRef" v-model:content="content" :extensions="extensions" />
  <button @click="insertText">Insert</button>
</template>

<script setup>
import { ref } from 'vue'

const editorRef = ref()
const content = ref('')

const insertText = () => {
  editorRef.value.editor?.commands.insertContent('Hello!')
}
</script>
```

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

### Setup Translation Handler

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import locales and build a translation handler for internationalization. This is useful for displaying editor UI elements in different languages.

```typescript
import { Trans } from 'element-tiptap'
import en from 'element-tiptap/lib/locales/en'

const t = Trans.buildI18nHandler(en)
const tooltip = t('editor.extensions.Bold.tooltip')
```

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

### Configure Element-Tiptap Extensions

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Set up individual TipTap extensions with their specific configurations. For example, configure heading levels, bold bubble menu, font sizes, line heights, text alignment types, and image upload handlers.

```typescript
const extensions = [
  Heading.configure({ levels: [1, 2, 3] }),
  Bold.configure({ bubble: true }),
  FontSize.configure({ fontSizes: ['12', '14', '16'] }),
  LineHeight.configure({ lineHeights: ['100%', '150%', '200%'] }),
  TextAlign.configure({ types: ['heading', 'paragraph'] }),
  Image.configure({ uploadRequest: uploadHandler }),
]
```

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

### Internal Hook Usage in ElementTiptap

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/hooks.md

Demonstrates how to import and use various hooks within the ElementTiptap component's setup function. Ensure the editor instance is available when calling hooks like useCodeView and useCharacterCount.

```typescript
import { useCodeView, useCharacterCount, useEditorStyle } from '@/hooks'

export default defineComponent({
  setup(props) {
    const editor = useEditor({ /* ... */ })
    
    const { isCodeViewMode, cmTextAreaRef } = useCodeView(editor)
    const { characters } = useCharacterCount(editor)
    const editorStyle = useEditorStyle({
      width: props.width,
      height: props.height,
    })
    
    return {
      editor,
      isCodeViewMode,
      cmTextAreaRef,
      characters,
      editorStyle,
    }
  },
})
```

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

### Create and Use Translation Handler

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/i18n.md

Demonstrates how to create an i18n handler using `buildI18nHandler` and then use the returned translation function `t` to get localized strings.

```typescript
const i18nHandler = Trans.buildI18nHandler(props.locale)
const t = (...args: any[]): string => {
  return i18nHandler.apply(Trans, args)
}

// Usage
const boldTooltip = t('editor.extensions.Bold.tooltip')
```

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

### Use useEditorStyle within ElementTiptap Component

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/hooks.md

Shows an example of using the useEditorStyle hook within the script setup of a Vue.js component to dynamically set the editor's style based on props.

```vue
<template>
  <div :style="editorStyle">
    <!-- Editor content -->
  </div>
</template>

<script setup>
const editorStyle = useEditorStyle({
  width: props.width,
  height: props.height,
})
</script>
```

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

### Build Commands

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Commands to build the library, run the dev server, or build the demo site.

```bash
yarn build:lib    # Build library
yarn dev          # Dev server
yarn build:demo   # Build demo site
```

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

### Get Image Dimensions with resolveImg

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Use the `resolveImg` utility to get the width and height of an image from its URL. Ensure the utility is imported correctly.

```typescript
import { resolveImg } from 'element-tiptap/src/utils/image'

const result = await resolveImg('https://...')
console.log(result.width, result.height)
```

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

### Setting Up Editor Language

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Demonstrates how to configure the editor's language using locale imports. You can switch between different language packs dynamically.

```typescript
import en from 'element-tiptap/lib/locales/en'
import zh from 'element-tiptap/lib/locales/zh'

// In component
<el-tiptap :locale="locale" />

// In script
const locale = ref(en)
const switchLanguage = (lang) => {
  locale.value = lang === 'zh' ? zh : en
}
```

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

### Utilities

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import helper utilities for image resolution, color validation, command creation, and more.

```APIDOC
## Utilities

### Description
Import helper utilities for image resolution, color validation, command creation, and more.

### Code
```typescript
// From src/utils/
export { resolveImg, isHexColor, COLOR_SET }
export { createIndentCommand, IndentProps }
export { isLineHeightActive, transformLineHeightToCSS /* ... */ }
export { printEditorContent }
export { clamp }
```
```

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

### Blockquote Node Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Defines the Blockquote node for displaying quotations. Shows a basic configuration example.

```typescript
export { default as Blockquote } from './extensions/blockquote'
```

```typescript
import { Blockquote } from 'element-tiptap'

const extensions = [Blockquote]
```

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

### @onCreate Event

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

Emitted when the editor instance is created. Provides the TipTap editor instance.

```APIDOC
## @onCreate Event

### Description
Emitted when the editor instance is created.

### Event Signature
```typescript
@onCreate="(event) => void"
```

### Event Object Structure
```typescript
{
  editor: Editor  // The TipTap editor instance
}
```

### Example
```vue
<template>
  <el-tiptap @onCreate="handleCreate" />
</template>

<script setup>
const handleCreate = ({ editor }) => {
  console.log('Editor created:', editor)
}
</script>
```
```

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

### Resolve Image URL

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Asynchronously resolves an image URL to get its dimensions and source. Requires the URL as input.

```typescript
import { resolveImg } from 'element-tiptap/src/utils/image'
import { ImageDisplay } from 'element-tiptap/src/utils/image'

const result = await resolveImg(url)
// { complete, width, height, src }
```

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

### FontSize Commands

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Demonstrates how to set and unset a font size using editor commands. Ensure the FontSize extension is configured.

```typescript
editor.commands.setFontSize('24')
editor.commands.unsetFontSize()
```

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

### Accessing TipTap Editor Instance

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

Demonstrates how to access the underlying TipTap editor instance via a template ref to perform actions like inserting content.

```vue
<template>
  <el-tiptap ref="editor" v-model:content="content" :extensions="extensions" />
  <button @click="insertText">Insert Text</button>
</template>

<script setup>
import { ref } from 'vue'
import { ElementTiptap } from 'element-tiptap'

const editor = ref()
const content = ref('')

const insertText = () => {
  // Access the editor instance through its .editor property
  editor.value.editor?.commands.insertContent('Hello!')
}
</script>
```

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

### Get HTML Output

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Retrieve the current content of the editor as an HTML string. Useful for saving or displaying content externally.

```typescript
const html = editor.getHTML()
```

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

### Complete Element-Tiptap Configuration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

This snippet shows a full configuration of the Element-Tiptap editor, including all available extensions for text formatting, lists, blocks, media, styling, and utilities. It demonstrates how to import necessary components and set up editor properties.

```typescript
import { ref } from 'vue'
import {
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Italic,
  Underline,
  Link,
  Image,
  CodeBlock,
  BulletList,
  OrderedList,
  Table,
  TextAlign,
  Indent,
  LineHeight,
  FontSize,
  FontFamily,
  Color,
  History,
  CodeView,
} from 'element-tiptap'
import en from 'element-tiptap/lib/locales/en'
import CodeMirror from 'codemirror'

export default {
  setup() {
    const content = ref('<h1>Welcome</h1>')
    
    const extensions = [
      Doc,
      Text,
      Paragraph,
      
      // Headings
      Heading.configure({
        levels: [1, 2, 3, 4, 5, 6]
      }),
      
      // Text formatting
      Bold.configure({ bubble: true }),
      Italic.configure({ bubble: true }),
      Underline,
      
      // Lists
      BulletList,
      OrderedList,
      
      // Blocks
      CodeBlock,
      Table,
      
      // Media
      Link,
      Image.configure({
        uploadRequest: async (file) => {
          // Handle upload
          return 'https://...'
        }
      }),
      
      // Styling
      TextAlign.configure({
        types: ['heading', 'paragraph']
      }),
      Indent.configure({
        types: ['paragraph', 'heading'],
        minIndent: 0,
        maxIndent: 8
      }),
      LineHeight.configure({
        lineHeights: ['100%', '150%', '200%']
      }),
      FontSize.configure({
        fontSizes: ['12', '14', '16', '18', '20', '24']
      }),
      FontFamily,
      Color,
      
      // Utilities
      History,
      CodeView.configure({
        codemirror: CodeMirror
      })
    ]
    
    return {
      content,
      extensions,
      locale: en,
      width: '100%',
      height: 500,
      tooltip: true,
      enableCharCount: true,
      charCountMax: 5000,
      editorClass: 'my-editor',
      editorContentClass: 'my-content'
    }
  }
}
```

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

### Partial Import of Element-Tiptap Component

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Import and use the ElTiptap component directly in your Vue template and script setup for more granular control.

```vue
<template>
  <el-tiptap ...></el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap';
</script>
```

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

### Element-Tiptap File Organization

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/INDEX.md

Outlines the directory structure for the Element-Tiptap project.

```bash
/workspace/home/output/
├── README.md                          # Main overview and navigation
├── INDEX.md                           # This file
├── quick-reference.md                 # Fast lookup guide
├── types.md                           # Type definitions
├── configuration.md                   # Configuration reference
└── api-reference/                     # Detailed API docs
    ├── element-tiptap.md              # Main component
    ├── extensions.md                  # All 40+ extensions
    ├── hooks.md                       # Composition functions
    ├── utilities.md                   # Helper functions
    └── i18n.md                        # Translations
```

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

### All Extensions

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import any of the 40+ available extensions to add rich text editing features.

```APIDOC
## All Extensions

### Description
Import any of the 40+ available extensions to add rich text editing features.

### Code
```typescript
export {
  Doc, Text, Paragraph, Heading, Bold, Italic, Underline, Strike,
  Link, Code, Image, Iframe, Blockquote, CodeBlock, BulletList,
  OrderedList, TaskList, Table, HorizontalRule, HardBreak,
  TextAlign, Indent, LineHeight, FontFamily, FontSize, Color,
  Highlight, History, FormatClear, CodeView, Fullscreen, Print,
  SelectAll
} from 'element-tiptap'
```
```

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

### Get Current Selection

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Retrieve the current selection object from the editor's state and extract the selected text. Useful for context-aware operations.

```typescript
const selection = editor.state.selection
const selectedText = editor.state.doc.textBetween(
  selection.from,
  selection.to
)
```

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

### Get Character Count

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Access the character count storage to retrieve the current number of characters in the editor. Requires the 'CharacterCount' extension to be enabled.

```typescript
const count = editor.storage.characterCount.characters()
```

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

### Main Exports

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import the main ElementTiptap component and its plugin, or individual extensions.

```typescript
export { ElementTiptap, ElementTiptapPlugin } from 'element-tiptap'

// All extensions
export {
  Doc, Text, Paragraph, Heading, Bold, Italic, Underline, Strike,
  Link, Code, Image, Iframe, Blockquote, CodeBlock, BulletList,
  OrderedList, TaskList, Table, HorizontalRule, HardBreak,
  TextAlign, Indent, LineHeight, FontFamily, FontSize, Color,
  Highlight, History, FormatClear, CodeView, Fullscreen, Print,
  SelectAll
} from 'element-tiptap'
```

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

### Package.json Key Information for Element-Tiptap

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Displays essential metadata from the Element-Tiptap package.json file, including the package name, version, main entry points for CommonJS and ES modules, and peer dependencies.

```json
{
  "name": "element-tiptap",
  "version": "2.2.1",
  "main": "./lib/element-tiptap.umd.js",
  "module": "./lib/element-tiptap.es.js",
  "types": "./lib/index.d.ts",
  "peerDependencies": {
    "vue": ">= 3.0.0",
    "element-plus": ">= 2.0.0"
  }
}
```

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

### Image Node Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Defines the Image node with attributes for source, dimensions, and display mode. Includes an example of configuring custom upload requests.

```typescript
export { default as Image } from './extensions/image'
```

```typescript
export enum ImageDisplay {
  INLINE = 'inline',
  BREAK_TEXT = 'block',
  FLOAT_LEFT = 'left',
  FLOAT_RIGHT = 'right',
}
```

```typescript
import { Image } from 'element-tiptap'

const extensions = [
  Image.configure({
    uploadRequest: async (file) => {
      const formData = new FormData()
      formData.append('file', file)
      const response = await fetch('/upload', { method: 'POST', body: formData })
      const data = await response.json()
      return data.url
    },
  }),
]
```

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

### Get JSON Output

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Retrieve the current content of the editor in a JSON format. This represents the document structure and is useful for state management or complex data handling.

```typescript
const json = editor.getJSON()
```

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

### Get Editor Content

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Retrieve the editor's content in different formats: HTML, JSON, or character count. This is useful for saving or processing the editor's state.

```typescript
const html = editor.getHTML()
const json = editor.getJSON()
const chars = editor.storage.characterCount.characters()
```

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

### Utility Exports

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import helper utilities for image resolution, color checking, indentation, line height, printing, and clamping values.

```typescript
// From src/utils/
export { resolveImg, isHexColor, COLOR_SET }
export { createIndentCommand, IndentProps }
export { isLineHeightActive, transformLineHeightToCSS, /* ... */ }
export { printEditorContent }
export { clamp }
```

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

### Get Editor Instance Reference

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Obtain a reference to the editor instance using Vue's ref. This allows direct manipulation of the editor, such as inserting content programmatically.

```typescript
const editorRef = ref()

const insertText = () => {
  editorRef.value.editor?.commands.insertContent('Hello!')
}
```

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

### Select All Content Command

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Include the SelectAll extension to enable the command for selecting all content within the editor. It is also accessible via a keyboard shortcut.

```typescript
import { SelectAll } from 'element-tiptap'

const extensions = [SelectAll]
```

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

### Import Utility Functions

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Import utility functions for common tasks like image resolution and color manipulation.

```typescript
// Utilities
import { resolveImg } from 'element-tiptap/src/utils/image'
import { isHexColor, COLOR_SET } from 'element-tiptap/src/utils/color'
```

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

### Resolve Image Dimensions

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/utilities.md

Resolves image dimensions and caches the result. Use this to get image width and height before rendering. It checks an internal cache and handles image loading events.

```typescript
export function resolveImg(src: string): Promise<ImageResult>
```

```typescript
{
  complete: boolean  // true if successfully loaded
  width: number      // Image width in pixels
  height: number     // Image height in pixels
  src: string        // Image source URL
}
```

```typescript
import { resolveImg } from 'element-tiptap/src/utils/image'

try {
  const result = await resolveImg('https://example.com/image.jpg')
  console.log(`Image: ${result.width}x${result.height}`)
} catch (error) {
  console.error('Failed to load image:', error.src)
}
```

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

### Get Editor Character Count - TypeScript Hook

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/hooks.md

Returns a computed ref with the current character count of the editor content. Requires the TipTap editor instance wrapped in a shallow ref.

```typescript
export default function useCharacterCount(
  editor: ShallowRef<Editor | undefined>
): {
  characters: ComputedRef<number>
}
```

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

### Configure FontSize Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Shows how to configure the FontSize extension with a custom array of font sizes. Import the extension and use the configure method.

```typescript
import { FontSize } from 'element-tiptap'

const extensions = [
  FontSize.configure({
    fontSizes: ['12', '14', '16', '18', '20', '24'],
  }),
]
```

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

### Configure CodeView Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Configure the CodeView extension by providing the CodeMirror library instance and its options.

```typescript
CodeView.configure({
  codemirror: any,                // CodeMirror library instance (required)
  codemirrorOptions: Object       // CodeMirror configuration
})
```

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

### Correct v-model Binding for Content Updates

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

When using `v-model:content` for two-way data binding, ensure the correct syntax is used. The example shows the incorrect and correct ways to bind content.

```vue
<!-- Wrong -->
<el-tiptap :content="content" />

<!-- Correct -->
<el-tiptap v-model:content="content" />
```

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

### Import TextAlign Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the TextAlign extension to enable text alignment options.

```typescript
export { default as TextAlign } from './extensions/text-align'
```

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

### Import and Use Fullscreen Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the Fullscreen extension and include it in the editor's extensions array to enable fullscreen editing mode.

```typescript
import { Fullscreen } from 'element-tiptap'

const extensions = [Fullscreen]
```

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

### Configure Image Extension with Upload

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Configure the Image extension with a custom upload handler for image files.

```typescript
Image.configure({
  uploadRequest: async (file) => {
    const formData = new FormData()
    formData.append('file', file)
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    const data = await response.json()
    return data.url // Returns image URL
  }
})
```

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

### Component Registration

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

Demonstrates how to register the ElementTiptap component globally using a Vue plugin or directly via named export.

```APIDOC
## Component Registration

### ElementTiptapPlugin

Vue plugin for global component registration.

```typescript
export const ElementTiptapPlugin: Plugin
```

Install the plugin and register the editor component globally:

```typescript
import { createApp } from 'vue'
import ElementTiptapPlugin from 'element-tiptap'
import 'element-tiptap/lib/style.css'

const app = createApp(App)
app.use(ElementTiptapPlugin)
// Components 'element-tiptap' and 'el-tiptap' are now available globally
```

**Source:** `src/index.ts`

### ElementTiptap (Named Export)

The editor component itself, available for direct import when partial registration is needed.

```typescript
export { ElementTiptap }
```

Direct import usage:

```vue
<template>
  <el-tiptap v-model:content="content" :extensions="extensions" />
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap'
</script>
```

**Source:** `src/components/ElementTiptap.vue`
```

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

### onCreate Event

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

Emitted when the editor instance is created. The event object contains the TipTap editor instance.

```typescript
@onCreate="(event) => void"
```

```typescript
{
  editor: Editor  // The TipTap editor instance
}
```

```vue
<template>
  <el-tiptap @onCreate="handleCreate" />
</template>

<script setup>
const handleCreate = ({ editor }) => {
  console.log('Editor created:', editor)
}
</script>
```

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

### Import Element Tiptap Stylesheet

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/element-tiptap.md

Import the default stylesheet for Element Tiptap to apply base styling. This should be done once in your application's entry point.

```typescript
import 'element-tiptap/lib/style.css'
```

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

### Core Exports

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import the main ElementTiptap component and its plugin for use in your Vue application.

```APIDOC
## Core Exports

### Description
Import the main ElementTiptap component and its plugin for use in your Vue application.

### Code
```typescript
export { ElementTiptap, ElementTiptapPlugin } from 'element-tiptap'
```
```

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

### Create Line Height Command

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/utilities.md

A factory function that creates a TipTap command for setting a specific line height. Import this function and use it within your extension's `addCommands` method.

```typescript
export function createLineHeightCommand(lineHeight: string): Command

```

```typescript
import { createLineHeightCommand } from 'element-tiptap/src/utils/line-height'

// In extension
addCommands() {
  return {
    setLineHeight: (lineHeight) => createLineHeightCommand(lineHeight),
  }
}

// In component
editor.commands.setLineHeight('200%')

```

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

### Import Document Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the basic document structure node. This is required for all editors.

```typescript
export { default as Document } from './extensions/document'
```

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

### FontFamily Commands

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Demonstrates how to set and unset a font family using editor commands. Ensure the FontFamily extension is configured.

```typescript
editor.commands.setFontFamily('Arial')
editor.commands.unsetFontFamily()
```

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

### Import Paragraph Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the Paragraph extension directly from Tiptap. It represents a basic paragraph block.

```typescript
export { default as Paragraph } from '@tiptap/extension-paragraph'
```

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

### Handle Lifecycle Events in Element-tiptap

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Listen to lifecycle events like onCreate, onFocus, onBlur, and onDestroy to manage the editor's state and perform actions during different stages of its existence.

```vue
<el-tiptap
  @onCreate="({ editor }) => console.log('Created')"
  @onFocus="({ editor, event }) => console.log('Focused')"
  @onBlur="({ editor, event }) => console.log('Blurred')"
  @onDestroy="({ editor }) => console.log('Destroyed')"
/>
```

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

### createLineHeightCommand

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/utilities.md

A factory function that creates a TipTap command for applying a specific line height. This command can be added to the editor's commands.

```APIDOC
## createLineHeightCommand

### Description
Factory function creating a command that applies line height. Can be used to add custom commands to the editor.

### Parameters
#### Path Parameters
- None
#### Query Parameters
- None
#### Request Body
- None

### Parameters
- **lineHeight** (`string`) - Required - Target line height value

### Returns
- **Command** - TipTap command function

### Usage
```javascript
import { createLineHeightCommand } from 'element-tiptap/src/utils/line-height'

// In extension
addCommands() {
  return {
    setLineHeight: (lineHeight) => createLineHeightCommand(lineHeight),
  }
}

// In component
editor.commands.setLineHeight('200%')
```
```

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

### Configure Underline Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Configure the Underline extension to control its visibility in the bubble menu and menubar.

```typescript
Underline.configure({
  bubble: boolean,
  menubar: boolean
})
```

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

### Import History Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the History extension for undo/redo functionality.

```typescript
export { default as History } from './extensions/history'
```

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

### Basic Element-Tiptap Component Usage

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Demonstrates how to use the ElTiptap component in a Vue template, binding content and extensions. Configure placeholder, width, and height as needed.

```vue
<template>
  <el-tiptap
    v-model:content="content"
    :extensions="extensions"
    placeholder="Start writing..."
    width="100%"
    height="400px"
  />
</template>

<script setup>
import { ref } from 'vue'
import {
  Doc, Text, Paragraph, Heading, Bold, Italic,
  BulletList, OrderedList, Link, Image
} from 'element-tiptap'

const content = ref('')
const extensions = [
  Doc, Text, Paragraph, Heading, Bold, Italic,
  BulletList, OrderedList, Link, Image
]
</script>
```

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

### Import Text Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the Text extension directly from the '@tiptap/extension-text' package. This is a required extension for all editors.

```typescript
export { default as Text } from '@tiptap/extension-text'
```

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

### Configure History Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Configure the History extension by including it in the extensions array.

```typescript
import { History } from 'element-tiptap'

const extensions = [History]
```

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

### Configure Bold Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Configure the Bold extension to control its visibility in the bubble menu and menubar.

```typescript
Bold.configure({
  bubble: boolean,   // Show in bubble menu (default: false)
  menubar: boolean   // Show in menubar (default: true)
})
```

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

### Handle Editor Creation Event in Vue

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Use the `onCreate` event to access the Tiptap editor instance when it is initialized. This is useful for performing actions immediately after the editor is ready. The event provides the editor instance via its argument.

```vue
<template>
  <el-tiptap @onCreate="onCreate" />
</template>

<script setup>
/**
 * the tiptap editor instance
 * see https://tiptap.dev/api/editor
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>
```

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

### Import LineHeight Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the LineHeight extension for adjusting line spacing.

```typescript
export { default as LineHeight } from './extensions/line-height'
```

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

### Configure LineHeight Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Configure the LineHeight extension with custom line height options.

```typescript
import { LineHeight } from 'element-tiptap'

const extensions = [
  LineHeight.configure({
    lineHeights: ['100%', '120%', '150%', '180%', '200%'],
  }),
]
```

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

### Code Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Represents inline code formatting, imported directly from Tiptap.

```APIDOC
## Code Extension

### Description
Represents inline code formatting, imported directly from Tiptap.

### Keyboard Shortcut
`` ` `` (backtick)

### Usage
```typescript
import { Code } from 'element-tiptap'

const extensions = [Code]
```
```

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

### Import HardBreak Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the HardBreak extension, which is directly available from Tiptap.

```typescript
export { default as HardBreak } from '@tiptap/extension-hard-break'
```

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

### Set Output Format to JSON

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Configure the editor's output format to 'json' using the `output` prop. The default format is 'html'.

```html
<el-tiptap output="json" />
```

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

### Import FormatClear Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Import the FormatClear extension to remove all formatting from selected text.

```typescript
export { default as FormatClear } from './extensions/format-clear'
```

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

### Import and Use useEditorStyle Hook

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/hooks.md

Demonstrates how to import and use the useEditorStyle hook in a Vue.js application. It shows how to pass numeric and string dimensions and the resulting style object.

```typescript
import { useEditorStyle } from 'element-tiptap/src/hooks'

const style = useEditorStyle({
  width: 800,      // Converts to '800px'
  height: '100%'   // Remains '100%'
})
// Result: [{ width: '800px', height: '100%' }]

// Apply to element
// <div :style="style[0]"></div>
```

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

### Import ElementTiptap Component

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/README.md

Import the main ElementTiptap Vue component for use in your project.

```typescript
export { ElementTiptap } from 'element-tiptap'
```

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

### Import Locales

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/quick-reference.md

Import locale files for internationalization support, including English and Chinese.

```typescript
// Locales
import en from 'element-tiptap/lib/locales/en'
import zh from 'element-tiptap/lib/locales/zh'
```

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

### Configure Underline Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Includes the Underline extension in the editor's configuration. By default, it shows a command button in the menu bar.

```typescript
import { Underline } from 'element-tiptap'

const extensions = [Underline]
```

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

### CodeViewOptions Interface

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/types.md

Defines the configuration options for the CodeView extension. Requires CodeMirror library and its options.

```typescript
export interface CodeViewOptions {
  codemirror: any;
  codemirrorOptions: any;
}
```

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

### Create Indent/Outdent Command

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/utilities.md

Factory function to create TipTap commands for indenting or outdenting nodes. It clamps the indent level and only affects specified node types, skipping list nodes.

```typescript
export function createIndentCommand(options: {
  delta: number
  types: string[]
}): Command
```

```typescript
import { createIndentCommand, IndentProps } from 'element-tiptap/src/utils/indent'

// In extension
addCommands() {
  return {
    indent: () => createIndentCommand({
      delta: IndentProps.more,   // 1
      types: ['paragraph', 'heading'],
    }),
    outdent: () => createIndentCommand({
      delta: IndentProps.less,   // -1
      types: ['paragraph', 'heading'],
    }),
  }
}
```

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

### Underline Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Enables underlined text formatting. It can be configured to show command buttons in bubble and menu bars.

```APIDOC
## Underline Extension

### Description
Enables underlined text formatting. It can be configured to show command buttons in bubble and menu bars.

### Type
Mark

### Options
- **bubble** (boolean) - Optional - Show command button in bubble menu (default: `false`)
- **menubar** (boolean) - Optional - Show command button in menu bar (default: `true`)

### Keyboard Shortcut
`Ctrl+U` (or `Cmd+U` on macOS)

### Configuration Example
```typescript
import { Underline } from 'element-tiptap'

const extensions = [Underline]
```
```

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

### Import Locales

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/i18n.md

Import locale objects for different languages from the element-tiptap library.

```typescript
import en from 'element-tiptap/lib/locales/en'
import zh from 'element-tiptap/lib/locales/zh'
import de from 'element-tiptap/lib/locales/de'
```

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

### Strike Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/api-reference/extensions.md

Enables strikethrough text formatting. It can be configured to show command buttons in bubble and menu bars.

```APIDOC
## Strike Extension

### Description
Enables strikethrough text formatting. It can be configured to show command buttons in bubble and menu bars.

### Type
Mark

### Options
- **bubble** (boolean) - Optional - Show command button in bubble menu (default: `false`)
- **menubar** (boolean) - Optional - Show command button in menu bar (default: `true`)

### Keyboard Shortcut
`Ctrl+Shift+X` (or `Cmd+Shift+X` on macOS)

### Configuration Example
```typescript
import { Strike } from 'element-tiptap'

const extensions = [Strike]
```
```

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

### Update Editor Content with Event

Source: https://github.com/leecason/element-tiptap/blob/next/README.md

Update the editor's content by listening to the `onUpdate` event and binding the `content` prop. The `content` prop accepts a string.

```html
<el-tiptap :content="content" @onUpdate="onEditorUpdate" />
```

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

### Configure Heading Extension

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Configure the Heading extension to specify the supported heading levels.

```typescript
Heading.configure({
  levels: number[]   // Heading levels to support (default: [1,2,3,4,5,6])
})
```

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

### Default Image Configuration Constants

Source: https://github.com/leecason/element-tiptap/blob/next/_autodocs/configuration.md

Defines default values for image width, display mode, and URL validation regex.

```typescript
export const DEFAULT_IMAGE_WIDTH = 200
export const DEFAULT_IMAGE_DISPLAY = ImageDisplay.INLINE
export const DEFAULT_IMAGE_URL_REGEX = /.../ // URL validation pattern
```