codemirror 自定义特殊格式样式 & 添加自定义事件

codemirror 自定义特殊格式样式 & 添加自定义事件

先上效果图，方便理解

点击点我的按钮，将向左边插入 [用途] 文本，同时高亮显示;
插入后如果点击 [用途] 的文本，页面也将会做出反应。

核心文件两个：
基于 codemirror 封装 code-mirror vue 组件；
自定义 simple.vue 组件用于构建样式和事件响应

code-mirror 组件定义

<script lang="ts" setup>
import {
      sql } from '@codemirror/lang-sql'
import {
      basicSetup } from 'codemirror'

import {
      indentWithTab } from '@codemirror/commands'
import {
     
  Decoration,
  EditorView,
  ViewPlugin,
  WidgetType,
  MatchDecorator,
  keymap
} from '@codemirror/view'


import {
      createApp, defineComponent } from 'vue';

import AlertComponent from "./simple.vue";

 

 



const props = defineProps([
  'domId',
  'height',
  'quotaMap',
  'dimensionMap'
])

const emits = defineEmits(['change'])

const codeComInit = (doc: string, sqlMode?: boolean) => {
     
  function _optionalChain(ops) {
     
    let lastAccessLHS = undefined
    let value = ops[0]
    let i = 1
    while (i < ops.length) {
     
      const op = ops[i]
      const fn = ops[i + 1]
      i += 2
      if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
     
        return undefined
      }
      if (op === 'access' || op === 'optionalAccess') {
     
        lastAccessLHS = value
        value = fn(value)
      } else if (op === 'call' || op === 'optionalCall') {
     
        value = fn((...args) => value.call(lastAccessLHS