### Development Setup and Scripts for Vue Markdown Editor

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

This bash script demonstrates the steps to set up the development environment for the wqs_editor project. It covers cloning the repository, installing dependencies using npm, and starting the development server. It also lists available npm scripts for development, building, type checking, and previewing.

```bash
# Clone the repository
git clone https://github.com/leoncheng2030/wqs_editor.git
cd wqs_editor

# Install dependencies
npm install

# Start development server
npm run dev
```

```bash
# Development
npm run dev              # Start dev server at localhost:5173

# Building
npm run build            # Build demo app
npm run build:lib        # Build library for npm

# Type Checking
npm run typecheck        # Run TypeScript type checking

# Preview
npm run preview          # Preview production build
```

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

### Install and Run Development Server

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

Commands to install project dependencies and start the local development server using npm.

```bash
npm install
npm run dev
```

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

### Vue 3 Composition API with <script setup>

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

Demonstrates the use of Vue 3's Composition API with the `<script setup>` syntax, including typed refs, computed properties, and prop definitions. This approach enhances code organization and type safety.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue'

// ✅ Use typed refs
const count = ref<number>(0)

// ✅ Use computed for derived state
const doubled = computed(() => count.value * 2)

// ✅ Define props with types
const props = defineProps({
  modelValue: String,
  theme: {
    type: String as () => 'light' | 'dark',
    required: true
  }
})
</script>
```

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

### Minimal Setup for Vue Markdown Editor

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

Demonstrates the most basic integration of the CanvasEditor component in a Vue.js application. It requires importing the component and its CSS, and binding a ref to the editor's content.

```vue
<template>
  <CanvasEditor v-model="content" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'
import '@nywqs/vue-markdown-editor/dist-lib/vue-markdown-editor.css'

const content = ref('# Hello World')
</script>
```

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

### TypeScript Coding Guidelines and Examples

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

This TypeScript code snippet illustrates the coding guidelines for the project, emphasizing the use of type annotations and interfaces while avoiding the `any` type. It provides examples of both correct and incorrect TypeScript practices.

```typescript
// ✅ Good
interface CursorPosition {
  line: number
  column: number
}

function moveCursor(position: CursorPosition): void {
  // ...
}

// ❌ Bad
function moveCursor(position: any) {
  // ...
}
```

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

### Install @nywqs/vue-markdown-editor

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

Instructions for installing the @nywqs/vue-markdown-editor package using npm, yarn, or pnpm.

```bash
npm install @nywqs/vue-markdown-editor
# or
yarn add @nywqs/vue-markdown-editor
# or
pnpm add @nywqs/vue-markdown-editor
```

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

### Conventional Commits Example

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

Examples of commit messages following the Conventional Commits specification. This standardizes commit history, making it easier to understand changes and automate release processes.

```markdown
feat(editor): add auto-save functionality

fix(renderer): correct line number alignment

docs(api): update props documentation

perf(viewport): optimize scroll performance
```

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

### Vue Editor Configuration Example

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Demonstrates how to use the EditorConfig component in Vue to manage editor settings like theme, font size, line height, and syntax highlighting.

```vue
<template>
  <EditorConfig
    v-model:theme="theme"
    v-model:font-size="fontSize"
    v-model:line-height="lineHeight"
    v-model:enable-syntax-highlight="syntaxHighlight"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EditorConfig } from '@nywqs/vue-markdown-editor'

const theme = ref<'light' | 'dark'>('light')
const fontSize = ref(15)
const lineHeight = ref(26)
const syntaxHighlight = ref(true)
</script>
```

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

### Configure Editor Settings with Vue Components

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

This Vue.js example shows how to integrate an editor configuration panel with the CanvasEditor. It allows users to modify editor settings such as theme, font size, line height, and syntax highlighting through separate input components. The configuration changes are reflected in the main editor instance. Dependencies include '@nywqs/vue-markdown-editor'.

```vue
<template>
  <div class="app">
    <div class="config-panel">
      <EditorConfig
        v-model:theme="theme"
        v-model:font-size="fontSize"
        v-model:line-height="lineHeight"
        v-model:enable-syntax-highlight="syntaxHighlight"
      />
    </div>
    <div class="editor-panel">
      <CanvasEditor
        v-model="content"
        :theme="theme"
        :font-size="fontSize"
        :line-height="lineHeight"
        :enable-syntax-highlight="syntaxHighlight"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor, EditorConfig } from '@nywqs/vue-markdown-editor'

const content = ref('# Configurable Editor')
const theme = ref<'light' | 'dark'>('light')
const fontSize = ref(15)
const lineHeight = ref(26)
const syntaxHighlight = ref(true)
</script>

<style scoped>
.app {
  display: flex;
  height: 100vh;
}
.config-panel {
  width: 300px;
  border-right: 1px solid #ddd;
}
.editor-panel {
  flex: 1;
}
</style>
```

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

### Plugin Development in TypeScript

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

Example of creating a custom plugin for the editor using TypeScript. It shows the basic structure of a plugin class implementing the `Plugin` interface, including `activate` and `deactivate` methods.

```typescript
import { Plugin } from '../core/PluginManager'

export class MyPlugin implements Plugin {
  name = 'my-plugin'
  version = '1.0.0'
  
  activate(context) {
    // Plugin logic
  }
  
  deactivate() {
    // Cleanup
  }
}
```

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

### Vue Custom Theme Colors Example

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Shows how to apply custom theme colors to the CanvasEditor component in Vue by passing a configuration object to the `custom-colors` prop.

```vue
<template>
  <CanvasEditor
    v-model="content"
    :custom-colors="customColors"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const customColors = ref({
  background: '#1e1e1e',
  text: '#d4d4d4',
  selection: 'rgba(100, 150, 255, 0.3)',
  lineNumber: '#858585'
})
</script>
```

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

### Vue Markdown Editor Split View with Live Preview

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

Demonstrates a split-view layout with the CanvasEditor and MarkdownPreviewPanel side-by-side, featuring synchronized scrolling. It uses props like `scroll-percentage` and `is-syncing` to manage scroll synchronization between the editor and preview components.

```vue
<template>
  <div class="editor-container">
    <div class="editor-pane">
      <CanvasEditor
        v-model="content"
        :theme="theme"
        :scroll-percentage="editorScrollPercentage"
        :is-syncing="isSyncingEditor"
        @scroll="handleEditorScroll"
      />
    </div>
    <div class="preview-pane">
      <MarkdownPreviewPanel
        :model-value="content"
        :theme="theme"
        :scroll-percentage="previewScrollPercentage"
        :is-syncing="isSyncingPreview"
        @scroll="handlePreviewScroll"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor, MarkdownPreviewPanel } from '@nywqs/vue-markdown-editor'

const content = ref('# Split View Example\n\nEdit on the left, preview on the right!')
const theme = ref<'light' | 'dark'>('light')
const editorScrollPercentage = ref(0)
const previewScrollPercentage = ref(0)
const isSyncingEditor = ref(false)
const isSyncingPreview = ref(false)

const handleEditorScroll = (percentage: number) => {
  if (isSyncingPreview.value) return
  isSyncingEditor.value = true
  previewScrollPercentage.value = percentage
  setTimeout(() => { isSyncingEditor.value = false }, 100)
}

const handlePreviewScroll = (percentage: number) => {
  if (isSyncingEditor.value) return
  isSyncingPreview.value = true
  editorScrollPercentage.value = percentage
  setTimeout(() => { isSyncingPreview.value = false }, 100)
}
</script>

<style scoped>
.editor-container {
  display: flex;
  height: 100vh;
}
.editor-pane,
.preview-pane {
  flex: 1;
  overflow: hidden;
}
</style>
```

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

### MarkdownPreviewPanel Usage Example (Vue)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Illustrates the usage of the MarkdownPreviewPanel component in Vue for real-time Markdown preview. It covers binding content, theme, scroll percentage, and handling scroll events. Requires Vue and the '@nywqs/vue-markdown-editor' package.

```vue
<template>
  <MarkdownPreviewPanel
    :model-value="content"
    :theme="theme"
    :scroll-percentage="scrollPercentage"
    :is-syncing="isSyncing"
    @scroll="handleScroll"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MarkdownPreviewPanel } from '@nywqs/vue-markdown-editor'

const content = ref('# Preview\n\nThis is **bold** text.')
const theme = ref<'light' | 'dark'>('light')
const scrollPercentage = ref(0)
const isSyncing = ref(false)

const handleScroll = (percentage: number) => {
  scrollPercentage.value = percentage
}
</script>
```

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

### Pull Request Template

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

A Markdown template for creating Pull Requests. It guides contributors to provide necessary information about their changes, including a description, type of change, testing methods, and screenshots.

```markdown
## Description
Brief description of changes.

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Breaking change
- [ ] Documentation update

## Testing
How were these changes tested?

## Screenshots
If applicable, add screenshots.

## Checklist
- [ ] Code follows project style
- [ ] Type checking passes
- [ ] Documentation updated
- [ ] Changes tested locally
```

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

### CanvasEditor Usage Example (Vue)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Demonstrates how to use the CanvasEditor component in a Vue application. It shows binding content, theme, and handling theme and scroll events. Requires Vue and the '@nywqs/vue-markdown-editor' package.

```vue
<template>
  <CanvasEditor
    v-model="content"
    :theme="theme"
    :font-size="16"
    :line-height="28"
    :show-line-numbers="true"
    :show-toolbar="true"
    @update:theme="handleThemeChange"
    @scroll="handleScroll"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'

const content = ref('# Hello World')
const theme = ref<'light' | 'dark'>('light')

const handleThemeChange = (newTheme: 'light' | 'dark') => {
  theme.value = newTheme
}

const handleScroll = (percentage: number) => {
  console.log('Scroll percentage:', percentage)
}
</script>
```

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

### Vue Markdown Editor with Theme Switching

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

Shows how to implement a theme toggle for the CanvasEditor component. It involves managing a theme state variable and passing it as a prop to the editor, along with a button to switch between 'light' and 'dark' themes.

```vue
<template>
  <div>
    <button @click="toggleTheme">Toggle Theme</button>
    <CanvasEditor v-model="content" :theme="theme" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'

const content = ref('# Hello World')
const theme = ref<'light' | 'dark'>('light')

const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>
```

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

### Markdown Descriptions of Built-in Plugins for wqs_editor

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Provides a summary of the editor's built-in plugins, including their functionality, associated keyboard shortcuts, and usage examples for Table, Math, Mermaid, TodoList, AutoComplete, and SyntaxChecker plugins.

```markdown
## TablePlugin
- **Shortcut**: Ctrl+Shift+T
- Insert and edit markdown tables
- Auto-formats table alignment

## MathPlugin
- **Shortcut**: Ctrl+M
- KaTeX-based math formula rendering
- Inline: `$E = mc^2$`
- Block: `$$\int_0^\infty e^{-x^2} dx$$`

## MermaidPlugin
- **Shortcut**: Ctrl+Shift+D
- Flowchart and diagram support
- Usage:
  ```mermaid
  graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
  ```

## TodoListPlugin
- Checkbox list support
- `- [ ] Uncompleted task`
- `- [x] Completed task`

## AutoCompletePlugin
- Bracket auto-matching: (), [], {}
- Quote auto-matching: "", ''
- Markdown syntax hints

## SyntaxCheckerPlugin
- Real-time syntax validation
- Link validity checking
- Image path verification

```

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

### Vue Markdown Editor with Custom Font Settings

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

Illustrates how to customize the font size and line height of the text within the CanvasEditor. This is achieved by passing `font-size` and `line-height` props with reactive ref values.

```vue
<template>
  <CanvasEditor
    v-model="content"
    :font-size="fontSize"
    :line-height="lineHeight"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'

const content = ref('# Custom Font')
const fontSize = ref(18)
const lineHeight = ref(30)
</script>
```

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

### Vue Live Preview with MarkdownPreviewPanel

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

Demonstrates how to integrate the CanvasEditor with the MarkdownPreviewPanel for live preview functionality in a Vue 3 application. It includes setup for content synchronization and scroll handling between the editor and the preview panel.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor, MarkdownPreviewPanel } from '@nywqs/vue-markdown-editor'
import '@nywqs/vue-markdown-editor/dist-lib/vue-markdown-editor.css'

const content = ref('# Hello\n\nPreview content here')
const theme = ref<'light' | 'dark'>('light')
const editorScrollPercentage = ref(0)
const previewScrollPercentage = ref(0)
const isSyncingEditor = ref(false)
const isSyncingPreview = ref(false)

const handleEditorScroll = (percentage: number) => {
  if (isSyncingPreview.value) return
  isSyncingEditor.value = true
  previewScrollPercentage.value = percentage
  setTimeout(() => { isSyncingEditor.value = false }, 100)
}

const handlePreviewScroll = (percentage: number) => {
  if (isSyncingEditor.value) return
  isSyncingPreview.value = true
  editorScrollPercentage.value = percentage
  setTimeout(() => { isSyncingPreview.value = false }, 100)
}
</script>

<template>
  <div style="display: flex; height: 600px;">
    <div style="flex: 1;">
      <CanvasEditor 
        v-model="content"
        :theme="theme"
        :scroll-percentage="editorScrollPercentage"
        :is-syncing="isSyncingEditor"
        @scroll="handleEditorScroll"
      />
    </div>
    <div style="flex: 1;">
      <MarkdownPreviewPanel
        :model-value="content"
        :theme="theme"
        :scroll-percentage="previewScrollPercentage"
        :is-syncing="isSyncingPreview"
        @scroll="handlePreviewScroll"
      />
    </div>
  </div>
</template>
```

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

### Debugging with Browser DevTools

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

Illustrates debugging techniques in TypeScript using browser developer tools. Includes setting breakpoints with `debugger;`, timing code execution with `console.time` and `console.timeEnd`, and logging variable states.

```typescript
// Add breakpoints
debugger;

// Log performance
console.time('render');
render();
console.timeEnd('render');

// Inspect state
console.log('Cursor:', cursor);
console.log('Document:', document.getText());
```

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

### Import and Export Markdown Files with Vue

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

This Vue.js component allows users to import Markdown files (.md, .markdown, .txt) and export the current content as a Markdown file. It utilizes the FileReader API for reading files and Blob for creating downloadable content. The component depends on the '@nywqs/vue-markdown-editor' library.

```vue
<template>
  <div>
    <div class="toolbar">
      <button @click="importFile">Import File</button>
      <button @click="exportFile">Export File</button>
    </div>
    <CanvasEditor v-model="content" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'

const content = ref('# Document')

const importFile = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.md,.markdown,.txt'
  input.onchange = (e: Event) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (event) => {
        content.value = event.target?.result as string
      }
      reader.readAsText(file)
    }
  }
  input.click()
}

const exportFile = () => {
  const blob = new Blob([content.value], { type: 'text/markdown' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'document.md'
  a.click()
  URL.revokeObjectURL(url)
}
</script>
```

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

### Bug Report Template for Contributing

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

This markdown template provides a structured format for reporting bugs in the project. It includes fields for a clear bug description, steps to reproduce, expected vs. actual behavior, screenshots, and environment details.

```markdown
**Bug Description**
A clear description of the bug.

**To Reproduce**
1. Go to '...'
2. Click on '...'
3. See error

**Expected Behavior**
What you expected to happen.

**Screenshots**
If applicable, add screenshots.

**Environment:**
- OS: [e.g. Windows 11]
- Browser: [e.g. Chrome 120]
- Version: [e.g. 2.0.0]
```

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

### Applying Dark Theme to CanvasEditor Component

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

Example of how to apply the 'dark' theme to the CanvasEditor component by passing the theme prop. This allows for easy switching between light and dark editor appearances.

```vue
<CanvasEditor v-model="content" theme="dark" />
```

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

### Implement a Word Counter Plugin for Vue Markdown Editor

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

This TypeScript code defines a custom plugin for the WQS Editor that counts the number of words in the document. It listens for document changes, updates an internal word count, and provides a toolbar button to display the count. The plugin utilizes the Plugin and PluginContext interfaces from '@nywqs/vue-markdown-editor'.

```typescript
import { Plugin, PluginContext } from '@nywqs/vue-markdown-editor'

export class WordCounterPlugin implements Plugin {
  name = 'word-counter'
  version = '1.0.0'
  private context: PluginContext | null = null
  private wordCount = 0

  activate(context: PluginContext) {
    this.context = context
    
    // Listen to document changes
    context.document.on('change', () => {
      this.updateWordCount()
    })
    
    // Initial count
    this.updateWordCount()
  }

  deactivate() {
    this.context = null
  }

  private updateWordCount() {
    if (!this.context) return
    const text = this.context.document.getText()
    const words = text.split(/\s+/).filter(w => w.length > 0)
    this.wordCount = words.length
    console.log(`Word count: ${this.wordCount}`)
  }

  getToolbarButtons() {
    return [{
      id: 'word-counter',
      icon: '📊',
      title: `Words: ${this.wordCount}`,
      command: 'showWordCount',
      commandArgs: []
    }]
  }
}

// Register plugin
pluginManager.register(WordCounterPlugin)
await pluginManager.activate('word-counter')
```

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

### Bug Report Template

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

A Markdown template for reporting bugs. It prompts for essential details like a clear description, steps to reproduce, expected vs. actual behavior, and environment information.

```markdown
**Bug 描述**
清晰的 bug 描述。

**重现步骤**
1. 进入 '...'
2. 点击 '...'
3. 看到错误

**预期行为**
你期望发生什么。

**截图**
如果适用，添加截图。

**环境：**
- 操作系统: [例如 Windows 11]
- 浏览器: [例如 Chrome 120]
- 版本: [例如 2.0.0]
```

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

### Generate Large Document for Performance Testing

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/CONTRIBUTING.md

A Node.js script command to generate a large Markdown document (10,000 lines) for performance testing. This helps in evaluating the editor's responsiveness with substantial content.

```bash
# Generate large document
node scripts/generate-test-doc.js 10000 > test-10k.md
```

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

### Vue Markdown Editor with Auto-Save to LocalStorage

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

Implements an auto-save feature for the CanvasEditor using browser's LocalStorage. It utilizes a watcher on the content ref to trigger saving with a debounce mechanism, providing visual feedback on save status.

```vue
<template>
  <div>
    <div class="save-indicator">
      {{ saveStatus }}
    </div>
    <CanvasEditor v-model="content" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'

const STORAGE_KEY = 'markdown-content'
const content = ref(localStorage.getItem(STORAGE_KEY) || '# Welcome')
const saveStatus = ref('Saved')

// Auto-save with debounce
let saveTimer: number
watch(content, (newContent) => {
  saveStatus.value = 'Saving...'
  clearTimeout(saveTimer)
  saveTimer = setTimeout(() => {
    localStorage.setItem(STORAGE_KEY, newContent)
    saveStatus.value = 'Saved'
  }, 1000)
})
</script>

<style scoped>
.save-indicator {
  padding: 8px;
  text-align: right;
  color: #888;
  font-size: 12px;
}
</style>
```

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

### Customize Toolbar Items in Vue Markdown Editor

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/EXAMPLES.md

This Vue.js component demonstrates how to customize the toolbar of the CanvasEditor by providing a specific array of toolbar items. It allows for fine-grained control over which editing features are available to the user. The component relies on '@nywqs/vue-markdown-editor'.

```vue
<template>
  <CanvasEditor
    v-model="content"
    :toolbar-items="customToolbar"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'

const content = ref('# Custom Toolbar')

const customToolbar = [
  'h1',
  'h2',
  'h3',
  'divider',
  'bold',
  'italic',
  'divider',
  'link',
  'image',
  'code-block'
]
</script>
```

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

### Build Library Command

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

Command to build the library for distribution using npm.

```bash
npm run build:lib
```

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

### TodoListPlugin Markdown Usage

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Shows the Markdown syntax for creating todo lists, differentiating between uncompleted and completed tasks.

```markdown
- [ ] Uncompleted task
- [x] Completed task
```

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

### Smart Scheduling with Debounce and Immediate Render (JavaScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/BENCHMARK.md

Details a smart scheduling strategy that combines debouncing with immediate rendering to balance resource usage and responsiveness. It prioritizes immediate rendering for critical operations like user input while using debouncing for less critical tasks like scrolling, optimizing CPU usage and reducing latency.

```javascript
// Immediate render for important operations
function render(immediate = false) {
  if (immediate) {
    performRender()
  } else {
    debouncedRender()
  }
}

// User input: immediate render
handleInput() {
  render(true)
}

// Scroll: debounced render
handleScroll() {
  render(false)
}
```

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

### Custom Plugin Development in TypeScript

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Provides a template for developing custom plugins for the Vue Markdown Editor, including activation, deactivation, and optional toolbar button and keyboard shortcut handling.

```typescript
import { Plugin } from '@nywqs/vue-markdown-editor'

class MyCustomPlugin implements Plugin {
  name = 'my-custom-plugin'
  version = '1.0.0'
  
  activate(context: PluginContext) {
    // Plugin initialization logic
    console.log('Plugin activated')
  }
  
  deactivate() {
    // Plugin cleanup logic
    console.log('Plugin deactivated')
  }
  
  // Optional: Register toolbar button
  getToolbarButtons() {
    return [{
      id: 'my-button',
      icon: '🔧',
      title: 'My Custom Feature',
      command: 'myCustomCommand',
      commandArgs: []
    }]
  }
  
  // Optional: Handle keyboard shortcuts
  handleKeybinding(event: KeyboardEvent) {
    if (event.ctrlKey && event.key === 'k') {
      // Handle Ctrl+K
      return true // Prevent default behavior
    }
    return false
  }
}

// Register plugin
pluginManager.register(MyCustomPlugin)
await pluginManager.activate('my-custom-plugin')
```

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

### Mermaid Plugin Markdown Usage

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Illustrates how to embed Mermaid diagrams within the Markdown content for rendering flowcharts and other diagrams.

```markdown
```mermaid
graph TD
  A[Start] --> B[End]
```
```

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

### Viewport Clipping Optimization (TypeScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Explains the viewport clipping performance optimization, which is automatically enabled and requires no configuration. It ensures only visible content is rendered.

```typescript
// Automatically enabled
// No configuration needed
```

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

### Viewport Clipping for Performance Improvement (TypeScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/BENCHMARK.md

Demonstrates viewport clipping to optimize rendering by only processing visible lines. This technique significantly improves performance by reducing the number of lines that need to be rendered, leading to substantial speed gains.

```typescript
// Only render visible lines
const visibleStartLine = Math.floor(scrollTop / lineHeight)
const visibleEndLine = Math.ceil((scrollTop + viewportHeight) / lineHeight)
const linesToRender = visibleEndLine - visibleStartLine

// Performance improvement
Traditional: O(n) - n = total lines
Viewport Clipping: O(v) - v = visible lines (~20-50)
```

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

### Incremental Rendering for Efficient Updates (TypeScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/BENCHMARK.md

Illustrates incremental rendering, where only changed lines are redrawn upon document modification. This approach avoids re-rendering the entire document, leading to faster updates for single-line edits, multi-line edits, and large paste operations.

```typescript
// Track dirty lines
const dirtyLines = new Set<number>()

// Only update changed content
document.on('change', (line, column, text) => {
  dirtyLines.add(line)
  renderDirtyLines(dirtyLines)
})
```

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

### Type Checking Command

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

Command to perform type checking on the project using npm.

```bash
npm run typecheck
```

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

### Core Type Definitions for Editor Configuration

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Defines the fundamental TypeScript types used for configuring the editor, including theme, cursor position, selection range, editor settings, toolbar items, and plugin button configurations.

```typescript
// Theme type
type Theme = 'light' | 'dark'

// Cursor position
interface CursorPosition {
  line: number
  column: number
}

// Selection range
interface SelectionRange {
  startLine: number
  startColumn: number
  endLine: number
  endColumn: number
}

// Editor configuration
interface EditorConfig {
  theme: Theme
  fontSize: number
  lineHeight: number
  enableSyntaxHighlight: boolean
  showLineNumbers: boolean
  showToolbar: boolean
}

// Toolbar item types
type ToolbarItem = 
  | 'theme-toggle'
  | 'h1' | 'h2' | 'h3'
  | 'bold' | 'italic'
  | 'unordered-list' | 'ordered-list'
  | 'blockquote' | 'code-block'
  | 'horizontal-rule'
  | 'link' | 'image'
  | 'divider'

// Plugin button configuration
interface ToolbarButton {
  id: string
  icon: string
  title: string
  command: string
  commandArgs?: any[]
}
```

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

### TypeScript Keyboard Shortcuts for wqs_editor

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Lists built-in keyboard shortcuts for common editing operations like selection, clipboard actions, undo/redo, and search. It also includes shortcuts for specific plugins.

```typescript
// Standard editing shortcuts
const keyboardShortcuts = {
  // Selection & Clipboard
  'Ctrl+A': 'Select all content',
  'Ctrl+C': 'Copy selection',
  'Ctrl+X': 'Cut selection',
  'Ctrl+V': 'Paste from clipboard',

  // Undo/Redo
  'Ctrl+Z': 'Undo last action',
  'Ctrl+Y': 'Redo last action',
  'Ctrl+Shift+Z': 'Redo last action (alternative)',

  // Search
  'Ctrl+F': 'Open search panel',
  'Ctrl+H': 'Open search & replace panel',

  // Line operations
  'Ctrl+D': 'Delete current line',
  'Tab': 'Indent selected lines',
  'Shift+Tab': 'Outdent selected lines',

  // Plugin shortcuts
  'Ctrl+M': 'Insert math formula (MathPlugin)',
  'Ctrl+Shift+T': 'Insert table (TablePlugin)',
  'Ctrl+Shift+D': 'Insert diagram (MermaidPlugin)'
}

// Usage: Shortcuts are automatically enabled
// No configuration needed - they work out of the box

```

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

### Incremental Rendering Optimization (TypeScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Details the incremental rendering optimization, which automatically redraws only changed lines, leading to significant performance improvements.

```typescript
// Automatically triggered on content changes
// 3-5x performance improvement
```

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

### Custom Plugin Development for Vue Markdown Editor

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Demonstrates how to create custom plugins to extend the editor's functionality. This includes registering commands, keybindings, handling lifecycle hooks like content changes, and defining toolbar buttons. Plugins can interact with the editor's document and event bus.

```typescript
import type { Plugin, PluginContext, ToolbarButton } from '@nywqs/vue-markdown-editor'

// Word Counter Plugin Example
export class WordCounterPlugin implements Plugin {
  id = 'word-counter'
  name = 'Word Counter'
  version = '1.0.0'
  description = 'Displays word and character count'

  private context: PluginContext | null = null
  private wordCount = 0
  private charCount = 0

  async activate(context: PluginContext) {
    this.context = context

    // Register a command
    context.registerCommand('showStats', () => {
      alert(`Words: ${this.wordCount}\nCharacters: ${this.charCount}`)
    }, { title: 'Show Word Statistics' })

    // Register keyboard shortcut
    context.registerKeybinding('Ctrl+Shift+W', 'showStats', {
      priority: 10,
      conflictStrategy: 'override'
    })

    // Listen to content changes via hooks
    context.onAfterChange(() => {
      this.updateStats()
    })

    // Subscribe to events
    context.eventBus.subscribe('document:change', (event) => {
      context.log('Document changed:', event.data)
    })

    // Initial count
    this.updateStats()
  }

  deactivate() {
    this.context = null
  }

  private updateStats() {
    if (!this.context) return
    const text = this.context.editor.document.getText()
    this.wordCount = text.split(/\s+/).filter((w: string) => w.length > 0).length
    this.charCount = text.length
  }

  getToolbarButtons(): Omit<ToolbarButton, 'pluginId'>[] {
    return [{
      id: 'word-counter-btn',
      icon: '📊',
      title: `Words: ${this.wordCount}`,
      command: 'showStats',
      commandArgs: []
    }]
  }
}

// Register and activate plugin
// pluginManager.register(new WordCounterPlugin())
// await pluginManager.activate('word-counter')
```

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

### Virtual Scrolling Buffer Mechanism (JavaScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/BENCHMARK.md

Describes the virtual scrolling technique using a buffer mechanism to pre-render lines above and below the visible viewport. This prevents flickering during fast scrolling and ensures smooth 60 FPS performance, enhancing the user experience.

```javascript
// Render buffer above and below viewport
const bufferLines = 10
const renderStartLine = Math.max(0, visibleStartLine - bufferLines)
const renderEndLine = Math.min(totalLines, visibleEndLine + bufferLines)
```

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

### Virtual Scrolling Optimization (TypeScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Describes the virtual scrolling optimization, a built-in feature that automatically adjusts based on document size to provide smooth scrolling.

```typescript
// Built-in optimization
// Automatically adjusts based on document size
```

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

### Offscreen Caching for Static Content (JavaScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/BENCHMARK.md

Explains offscreen caching to improve performance by rendering static elements like line numbers and backgrounds to an offscreen canvas once and reusing it. This reduces redundant rendering tasks, speeding up static layer updates and improving overall frame rate.

```javascript
// Create offscreen canvas for static content
const offscreenCanvas = document.createElement('canvas')
const offscreenCtx = offscreenCanvas.getContext('2d')

// Render once, reuse multiple times
renderStaticLayer(offscreenCtx)
ctx.drawImage(offscreenCanvas, 0, 0)
```

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

### Default Toolbar Items Configuration (TypeScript)

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/API.md

Defines the default array of toolbar items for the CanvasEditor component. This array specifies the order and type of buttons available in the editor's toolbar.

```typescript
[
  'theme-toggle',
  'divider',
  'h1',
  'h2',
  'divider',
  'bold',
  'italic',
  'divider',
  'unordered-list',
  'ordered-list',
  'blockquote',
  'code-block',
  'horizontal-rule',
  'divider',
  'link',
  'image'
]
```

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

### Default Toolbar Items Configuration for CanvasEditor

Source: https://github.com/leoncheng2030/wqs_editor/blob/main/README.md

An array representing the default configuration of toolbar items for the CanvasEditor component. This list includes various formatting and structural elements available in the editor's toolbar.

```typescript
[
  'theme-toggle',
  'divider',
  'h1',
  'h2',
  'divider',
  'bold',
  'italic',
  'divider',
  'unordered-list',
  'ordered-list',
  'blockquote',
  'code-block',
  'horizontal-rule',
  'divider',
  'link',
  'image',
]
```

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

### TypeScript Type Definitions for wqs_editor

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Defines core types for editor elements like positions, ranges, themes, and configuration. It also specifies interfaces for plugins and their contexts, enabling extensibility.

```typescript
// Core position and range types
interface Position {
  line: number
  column: number
}

interface Range {
  startLine: number
  startColumn: number
  endLine: number
  endColumn: number
}

// Theme configuration
type Theme = 'light' | 'dark'

interface ThemeColors {
  background: string
  text: string
  selection: string
  lineNumber: string
  comment: string
  keyword: string
  string: string
  number: string
}

// Editor configuration interface
interface EditorConfig {
  theme?: Theme
  fontSize?: number           // Default: 15
  lineHeight?: number         // Default: 26
  fontFamily?: string
  enableSyntaxHighlight?: boolean  // Default: true
  showLineNumbers?: boolean   // Default: true
  showToolbar?: boolean       // Default: true
}

// Toolbar item types
type ToolbarItem =
  | 'theme-toggle'
  | 'h1' | 'h2' | 'h3'
  | 'bold' | 'italic'
  | 'unordered-list' | 'ordered-list'
  | 'blockquote' | 'code-block'
  | 'horizontal-rule'
  | 'link' | 'image'
  | 'divider'

// Plugin interface
interface Plugin {
  id: string
  name: string
  version: string
  description?: string
  dependencies?: PluginDependency[]
  activate: (context: PluginContext) => void | Promise<void>
  deactivate?: () => void | Promise<void>
}

// Plugin context API
interface PluginContext {
  editor: EditorCore
  pluginId: string
  registerCommand: (commandId: string, handler: Function, options?: CommandOptions) => void
  registerKeybinding: (key: string, commandId: string, options?: KeybindingOptions) => void
  registerToolbarButton: (button: ToolbarButton) => void
  onBeforeInit: (handler: Function) => void
  onAfterInit: (handler: Function) => void
  onBeforeRender: (handler: Function) => void
  onAfterRender: (handler: Function) => void
  onBeforeChange: (handler: Function) => void
  onAfterChange: (handler: Function) => void
  eventBus: EventBusAPI
  config: ConfigAPI
  log: (...args: any[]) => void
}
```

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

### Editor Configuration Panel (Vue)

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Provides a configuration panel component for dynamically adjusting editor settings such as theme, font size, line height, and syntax highlighting. It integrates with the CanvasEditor component using v-model bindings for various properties.

```vue
<template>
  <div class="app-container">
    <aside class="config-sidebar">
      <EditorConfig
        v-model:theme="theme"
        v-model:font-size="fontSize"
        v-model:line-height="lineHeight"
        v-model:enable-syntax-highlight="syntaxHighlight"
      />
    </aside>
    <main class="editor-main">
      <CanvasEditor
        v-model="content"
        :theme="theme"
        :font-size="fontSize"
        :line-height="lineHeight"
        :enable-syntax-highlight="syntaxHighlight"
      />
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor, EditorConfig } from '@nywqs/vue-markdown-editor'
import '@nywqs/vue-markdown-editor/dist-lib/vue-markdown-editor.css'

const content = ref('# Configurable Editor\n\nAdjust settings in the sidebar.')
const theme = ref<'light' | 'dark'>('light')
const fontSize = ref(15)
const lineHeight = ref(26)
const syntaxHighlight = ref(true)
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}
.config-sidebar {
  width: 300px;
  border-right: 1px solid #ddd;
  padding: 16px;
}
.editor-main {
  flex: 1;
}
</style>
```

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

### Auto-Save to LocalStorage with Vue.js

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Implements automatic content persistence by debouncing saves to the browser's localStorage. It uses Vue's watch and setTimeout for debouncing, ensuring efficient updates. The content is loaded from and saved to a specific storage key.

```vue
<template>
  <div>
    <div class="save-status">{{ saveStatus }}</div>
    <CanvasEditor v-model="content" style="height: 500px;" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'
import '@nywqs/vue-markdown-editor/dist-lib/vue-markdown-editor.css'

const STORAGE_KEY = 'markdown-editor-content'
const content = ref(localStorage.getItem(STORAGE_KEY) || '# Welcome\n\nStart typing...')
const saveStatus = ref('Saved')

let saveTimer: ReturnType<typeof setTimeout>

watch(content, (newContent) => {
  saveStatus.value = 'Saving...'
  clearTimeout(saveTimer)
  saveTimer = setTimeout(() => {
    localStorage.setItem(STORAGE_KEY, newContent)
    saveStatus.value = `Saved at ${new Date().toLocaleTimeString()}`
  }, 1000)
})
</script>

<style scoped>
.save-status {
  padding: 8px 16px;
  text-align: right;
  color: #888;
  font-size: 12px;
  background: #f5f5f5;
}
</style>
```

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

### File Import and Export with Vue.js

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Enables loading Markdown files from disk and exporting editor content to downloadable .md files. It utilizes the browser's File API for reading files and creating Blob objects for downloads. The component displays the current file name.

```vue
<template>
  <div>
    <div class="file-toolbar">
      <button @click="importFile">Import .md File</button>
      <button @click="exportFile">Export as .md</button>
      <span v-if="fileName">{{ fileName }}</span>
    </div>
    <CanvasEditor v-model="content" style="height: 500px;" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'
import '@nywqs/vue-markdown-editor/dist-lib/vue-markdown-editor.css'

const content = ref('# Document\n\nImport or export Markdown files.')
const fileName = ref('')

const importFile = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.md,.markdown,.txt'
  input.onchange = (e: Event) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (file) {
      fileName.value = file.name
      const reader = new FileReader()
      reader.onload = (event) => {
        content.value = event.target?.result as string
      }
      reader.readAsText(file)
    }
  }
  input.click()
}

const exportFile = () => {
  const blob = new Blob([content.value], { type: 'text/markdown;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = fileName.value || 'document.md'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}
</script>

<style scoped>
.file-toolbar {
  padding: 8px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}
.file-toolbar button {
  margin-right: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
</style>
```

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

### Custom Toolbar Configuration (Vue)

Source: https://context7.com/leoncheng2030/wqs_editor/llms.txt

Demonstrates how to customize the toolbar of the CanvasEditor component by specifying which buttons to display and their order. It uses the `toolbar-items` prop to pass an array of desired toolbar button identifiers.

```vue
<template>
  <CanvasEditor
    v-model="content"
    :toolbar-items="customToolbar"
    :show-toolbar="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CanvasEditor } from '@nywqs/vue-markdown-editor'
import '@nywqs/vue-markdown-editor/dist-lib/vue-markdown-editor.css'

const content = ref('# Custom Toolbar Example')

// Available items: 'theme-toggle', 'h1', 'h2', 'h3', 'bold', 'italic',
// 'unordered-list', 'ordered-list', 'blockquote', 'code-block',
// 'horizontal-rule', 'link', 'image', 'divider'
const customToolbar = [
  'theme-toggle',
  'divider',
  'h1',
  'h2',
  'h3',
  'divider',
  'bold',
  'italic',
  'divider',
  'unordered-list',
  'ordered-list',
  'divider',
  'link',
  'image',
  'code-block'
]
</script>
```