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

Code before:
      <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>
      <div class="dictionary-group">
        <el-select
          v-model="selectedDictionaryToAdd"
        >
          <el-option
            v-for="item in dictionariesLanguagesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button icon="el-icon-document-add" @click="addNewDict"></el-button>
      </div>
      <div v-if="errorMessage" class="description">{{ errorMessage }}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CurSelect from '../common/select'
import Bool from '../common/bool'
import Separator from '../common/separator'
import { isOsx, isLinux, isWindows } from '@/util'
import { isOsSpellcheckerSupported, getAvailableHunspellDictionaries, SpellChecker } from '@/spellchecker'

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

Code after:
    <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>

      <div class="description">Download additional Hunspell dictionaries.</div>
      <div class="dictionary-group">
        <el-select
          v-model="selectedDictionaryToAdd"
        >
          <el-option
            v-for="item in dictionariesLanguagesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button icon="el-icon-document-add" @click="addNewDict"></el-button>
      </div>
      <div v-if="errorMessage" class="description">{{ errorMessage }}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CurSelect from '../common/select'
import Bool from '../common/bool'
import Separator from '../common/separator'
import { isOsx, isLinux, isWindows } from '@/util'