Repository: marktext/marktext
File: src/renderer/prefComponents/spellchecker/index.vue (Vue)

Code before:
      :bool="spellcheckerAutoDetectLanguage"
      :disable="!spellcheckerEnabled"
      :onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
    ></bool>
    <separator></separator>
    <cur-select
      description="Default language for spell checker."
      :value="spellcheckerLanguage"
      :options="availableDictionaries"
      :disable="!spellcheckerEnabled"
      :onChange="value => onSelectChange('spellcheckerLanguage', value)"
    ></cur-select>
    <div
      v-if="isOsx && !isHunspellSelected && spellcheckerEnabled"
      class="description"
    >
      Additional languages may be added through "Language & Region" in your system preferences pane.
    </div>
    <div
      v-if="isWindows && !isHunspellSelected && spellcheckerEnabled"
      class="description"
    >
      Additional languages may be added via "Language" in your "Time & language" settings.
    </div>
    <div v-if="isHunspellSelected && spellcheckerEnabled">
      <div class="description">Installed Hunspell dictionaries. (Add additional language dictionaries below.)</div>
      <el-table
        :data="availableDictionaries"
        style="width: 100%">
        <el-table-column
          prop="value"
          label="Name"
          width="100">
        </el-table-column>
        <el-table-column
          prop="label"
          label="Language"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="Operations"
          width="170">
          <template slot-scope="scope">
            <el-button @click="handleUpdateClick(scope.$index, scope.row)" type="text" size="small">Update</el-button>
            <el-button @click="handleDeleteClick(scope.$index, scope.row)" type="text" size="small">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="description">Download new Hunspell dictionaries.</div>

Review comment (suggestion):
```suggestion
      <div class="description">Installed Hunspell dictionaries.</div>
```

Code after:
      description="Automatically detect document language (requires showing marks for spelling errors).
      :bool="spellcheckerAutoDetectLanguage"
      :disable="!spellcheckerEnabled"
      :onChange="value => onSelectChange('spellcheckerAutoDetectLanguage', value)"
    ></bool>
    <separator></separator>
    <cur-select
      description="Default language for spell checker."
      :value="spellcheckerLanguage"
      :options="availableDictionaries"
      :disable="!spellcheckerEnabled"
      :onChange="value => onSelectChange('spellcheckerLanguage', value)"
    ></cur-select>
    <div
      v-if="isOsx && !isHunspellSelected && spellcheckerEnabled"
      class="description"
    >
      Additional languages may be added through "Language & Region" in your system preferences pane.
    </div>
    <div
      v-if="isWindows && !isHunspellSelected && spellcheckerEnabled"
      class="description"
    >
      Additional languages may be added through "Language" in your "Time & language" settings.
    </div>
    <div v-if="isHunspellSelected && spellcheckerEnabled">
      <div class="description">Installed Hunspell dictionaries.</div>
      <el-table
        :data="availableDictionaries"
        style="width: 100%">
        <el-table-column
          prop="value"
          label="Name"
          width="100">
        </el-table-column>
        <el-table-column
          prop="label"
          label="Language"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="Operations"
          width="170">
          <template slot-scope="scope">
            <el-button @click="handleUpdateClick(scope.$index, scope.row)" type="text" size="small">Update</el-button>
            <el-button @click="handleDeleteClick(scope.$index, scope.row)" type="text" size="small">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>