ronantakizawa/codereview-bench huggingface dataset:
Repository: marktext/marktext
File: src/renderer/prefComponents/imageUploader/index.vue (Vue)

Code before:
        type: 'imageBed',
        value: newImageBedConfig
      })
      if (type === 'github') {
        this.$store.dispatch('SET_USER_DATA', {
          type: 'githubToken',
          value: this.githubToken
        })
      }
      new Notification('Save Image Uploader', {
        body: `The Github configration has been saved.`
      })
    },
    setCurrentUploader (value) {
      const service = services[value]
      if (!service) {
        console.error(`Cannot find service "${value}"!`)
        return
      }

      const legalNotices = document.getElementsByClassName(`pref-cb-legal-notices ${value}`)
      if (!legalNotices) {
        console.error(`Cannot find legal notices of service "${value}"!`)
        return
      }
      legalNotices[0].classList.remove('error')

      const { name, agreedToLegalNotices } = service
      if (!agreedToLegalNotices) {
        legalNotices[0].classList.add('error')
        return
      }

      const type = 'currentUploader'
      this.$store.dispatch('SET_USER_DATA', { type, value })

      new Notification('Set Image Uploader', {
        body: `Set ${name} as the default image uploader successfully.`
      })
    }
  }
}
</script>

<style>
.pref-image-uploader {
  & h4 {
    text-transform: uppercase;
    margin: 0;
    font-weight: 100;
  }

Review comment (suggestion):
how about use `class` attribute in template to instead call dom API directly in vue file.

```html
:class="[{'error':  agreedToLegalNotices}]"
```

but we do not need to show `error` class at the created lifecycle of component, so maybe we need another variable.

Code after:
      }
    })
  },
  methods: {
    getServiceNameById (id) {
      const service = services[id]
      return service ? service.name : id
    },
    open (link) {
      shell.openExternal(link)
    },
    save (type) {
      const newImageBedConfig = Object.assign({}, this.imageBed, {[type]: this[type]})
      this.$store.dispatch('SET_USER_DATA', {
        type: 'imageBed',
        value: newImageBedConfig
      })
      if (type === 'github') {
        this.$store.dispatch('SET_USER_DATA', {
          type: 'githubToken',
          value: this.githubToken
        })
      }
      new Notification('Save Image Uploader', {
        body: `The Github configration has been saved.`
      })
    },
    setCurrentUploader (value) {
      const service = services[value]
      if (!service) {
        console.error(`Cannot find service "${value}"!`)
        return
      }

      const { name, agreedToLegalNotices } = service
      if (!agreedToLegalNotices) {
        this.legalNoticesErrorStates[value] = true
        return
      }
      this.legalNoticesErrorStates[value] = false

      const type = 'currentUploader'
      this.$store.dispatch('SET_USER_DATA', { type, value })

      new Notification('Set Image Uploader', {
        body: `Set ${name} as the default image uploader successfully.`
      })
    }
  }
}
</script>
Repository: marktext/marktext
File: src/renderer/prefComponents/imageUploader/index.vue (Vue)

Code before:
  & .description {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  & .form-group {
    margin: 20px 0 0 0;
  }
  & .label {
    margin-bottom: 10px;
  }
  & .el-input {
    max-width: 242px;
  }
  & .el-button.btn-reset,
  & .button-group {
    margin-top: 30px;
  }
  & .pref-cb-legal-notices {
    &.smms {
      margin-bottom: 30px;
    }
    &.github {
      margin-top: 30px;
    }
    &.error {
      border: 1px solid var(--themeColor);
      padding: 6px;
    }
  }
}
</style>


Review comment (suggestion):
How about use `outline` instead of `border`, because border will change the height of current element.

Code after:
    text-transform: uppercase;
    margin: 0;
    font-weight: 100;
  }
  & .current-uploader {
    font-size: 14px;
    margin: 20px 0;
    color: var(--editorColor);
    & .uploader {
      color: var(--editorColor80);
      font-size: 600;
    }
  }
  & .link {
    color: var(--themeColor);
    cursor: pointer;
  }
  & .description {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  & .form-group {
    margin: 20px 0 0 0;
  }
  & .label {
    margin-bottom: 10px;
  }
  & .el-input {
    max-width: 242px;
  }
  & .el-button.btn-reset,
  & .button-group {
    margin-top: 30px;
  }
  & .pref-cb-legal-notices {
    &.smms {
      margin-bottom: 30px;
    }
    &.github {
      margin-top: 30px;
    }
    &.error {
      outline: 1px solid var(--themeColor);
      padding: 6px;
    }
  }
}
</style>
Repository: marktext/marktext
File: src/renderer/util/theme.js (JavaScript)

Code before:

  // workaround: use dark icons
  document.body.classList.remove('dark')
  if (isDarkTheme) {
    document.body.classList.add('dark')
  }

  // change CodeMirror theme
  const cm = document.querySelector('.CodeMirror')
  if (cm) {
    cm.classList.remove('cm-s-default')
    cm.classList.remove('cm-s-one-dark')
    cm.classList.remove('cm-s-railscasts')
    if (isCmOneDark) {
      cm.classList.add('cm-s-one-dark')
    } else if (isCmRailscasts) {
      cm.classList.add('cm-s-railscasts')
    } else {
      cm.classList.add('cm-s-default')
    }
  }
}

export const addCommonStyle = options => {
  const { codeFontFamily, codeFontSize, hideScrollbar } = options
  let sheet = document.querySelector(`#${COMMON_STYLE_ID}`)
  if (!sheet) {
    sheet = document.createElement('style')
    sheet.id = COMMON_STYLE_ID
    document.head.appendChild(sheet)
  }

  let scrollbarStyle = ''
  if (hideScrollbar) {
    scrollbarStyle = '::-webkit-scrollbar {display: none;}'
  }

  sheet.innerHTML = `${scrollbarStyle}
span code,
td code,
th code,
code,
code[class*="language-"],
.CodeMirror,
pre.ag-paragraph {
font-family: ${codeFontFamily}, ${DEFAULT_CODE_FONT_FAMILY};
font-size: ${codeFontSize}px;
}

${getEmojiPickerPatch()}
`

Review comment (bug):
You should provide the default editor width here. Otherwise if `value` is incorrect the maximal width is used (?).

```css
`:root { --editorAreaWidth: 750px; }`
```

Code after:

  // workaround: use dark icons
  document.body.classList.remove('dark')
  if (isDarkTheme) {
    document.body.classList.add('dark')
  }

  // change CodeMirror theme
  const cm = document.querySelector('.CodeMirror')
  if (cm) {
    cm.classList.remove('cm-s-default')
    cm.classList.remove('cm-s-one-dark')
    cm.classList.remove('cm-s-railscasts')
    if (isCmOneDark) {
      cm.classList.add('cm-s-one-dark')
    } else if (isCmRailscasts) {
      cm.classList.add('cm-s-railscasts')
    } else {
      cm.classList.add('cm-s-default')
    }
  }
}

export const setEditorWidth = value => {
  const EDITOR_WIDTH_STYLE_ID = 'editor-width'
  let result = ''
  if (value && /^[0-9]+(?:ch|px|%)$/.test(value)) {
    // Overwrite the theme value and add 100px for padding.
    result = `:root { --editorAreaWidth: calc(100px + ${value}); }`
  }
  let styleEle = document.querySelector(`#${EDITOR_WIDTH_STYLE_ID}`)
  if (!styleEle) {
    styleEle = document.createElement('style')
    styleEle.setAttribute('id', EDITOR_WIDTH_STYLE_ID)
    document.head.appendChild(styleEle)
  }

  styleEle.innerHTML = result
}

export const addCommonStyle = options => {
  const { codeFontFamily, codeFontSize, hideScrollbar } = options
  let sheet = document.querySelector(`#${COMMON_STYLE_ID}`)
  if (!sheet) {
    sheet = document.createElement('style')
    sheet.id = COMMON_STYLE_ID
    document.head.appendChild(sheet)
  }

  let scrollbarStyle = ''
  if (hideScrollbar) {
Repository: marktext/marktext
File: src/renderer/contextMenu/tabs/index.js (JavaScript)

Code before:
  CLOSE_THIS,
  CLOSE_OTHERS,
  CLOSE_SAVED,
  CLOSE_ALL,
  SEPARATOR,
  RENAME,
  COPY_PATH,
  SHOW_IN_FOLDER
} from './menuItems'

const { Menu, MenuItem } = remote

export const showContextMenu = (event, tab) => {
  const menu = new Menu()
  const win = remote.getCurrentWindow()
  const { pathname } = tab
  const CONTEXT_ITEMS = [CLOSE_THIS, CLOSE_OTHERS, CLOSE_SAVED, CLOSE_ALL, SEPARATOR, RENAME, COPY_PATH, SHOW_IN_FOLDER]
  const FILE_CONTEXT_ITEMS = [RENAME, COPY_PATH, SHOW_IN_FOLDER]

  FILE_CONTEXT_ITEMS.forEach(item => {
    item.enabled = !!pathname
  })

  CONTEXT_ITEMS.forEach(item => {
    const menuItem = new MenuItem(item)
    menuItem.tab = tab
    menu.append(menuItem)
  })
  menu.popup({ window: win, x: event.clientX, y: event.clientY })
}


Review comment (suggestion):
This is not the best way to solve the problem but please only use tab id (`tab.id`). You can get the original tab by id in editor. Maybe a function call with the tab id to construct the item would be a better way.

Code after:
  CLOSE_THIS,
  CLOSE_OTHERS,
  CLOSE_SAVED,
  CLOSE_ALL,
  SEPARATOR,
  RENAME,
  COPY_PATH,
  SHOW_IN_FOLDER
} from './menuItems'

const { Menu, MenuItem } = remote

export const showContextMenu = (event, tab) => {
  const menu = new Menu()
  const win = remote.getCurrentWindow()
  const { pathname } = tab
  const CONTEXT_ITEMS = [CLOSE_THIS, CLOSE_OTHERS, CLOSE_SAVED, CLOSE_ALL, SEPARATOR, RENAME, COPY_PATH, SHOW_IN_FOLDER]
  const FILE_CONTEXT_ITEMS = [RENAME, COPY_PATH, SHOW_IN_FOLDER]

  FILE_CONTEXT_ITEMS.forEach(item => {
    item.enabled = !!pathname
  })

  CONTEXT_ITEMS.forEach(item => {
    const menuItem = new MenuItem(item)
    menuItem._tabId = tab.id
    menu.append(menuItem)
  })
  menu.popup({ window: win, x: event.clientX, y: event.clientY })
}
Repository: marktext/marktext
File: src/muya/lib/contentState/updateCtrl.js (JavaScript)

Code before:
import { tokenizer } from '../parser/'
import { conflict } from '../utils'
import { CLASS_OR_ID } from '../config'

const getParentCheckBox = function (checkbox) {
  const parent = checkbox.parentElement.parentElement.parentElement
  if (parent.id !== CLASS_OR_ID.AG_EDITOR_ID) {
    return parent.firstElementChild
  } else {
    return null
  }
}

const cumputeChecboxStatus = function (parentCheckbox) {
  const children = parentCheckbox.parentElement.lastElementChild.children
  const len = children.length
  for (let i = 0; i < len; i++) {
    const checkbox = children[i].firstElementChild
    if (checkbox.checked === false) {
      return false
    }
  }
  return true
}

const INLINE_UPDATE_FRAGMENTS = [
  '(?:^|\n) {0,3}([*+-] {1,4})', // Bullet list
  '(?:^|\n)(\\[[x ]{1}\\] {1,4})', // Task list
  '(?:^|\n) {0,3}(\\d{1,9}(?:\\.|\\)) {1,4})', // Order list
  '(?:^|\n) {0,3}(#{1,6})(?=\\s{1,}|$)', // ATX headings
  '^(?:[\\s\\S]+?)\\n {0,3}(\\={3,}|\\-{3,})(?= {1,}|$)', // Setext headings **match from beginning**

Review comment (suggestion):
I think we can put `getParentCheckBox `, `cumputeChecboxStatus ` function in utils folder. and put `setCheckBoxState `, `updateParentsCheckBoxState `, `updateChildrenCheckBoxState `, `listItemCheckBoxClick ` methods in clickCtrl.js file.

Code after:
import { tokenizer } from '../parser/'
import { conflict } from '../utils'

const INLINE_UPDATE_FRAGMENTS = [
  '(?:^|\n) {0,3}([*+-] {1,4})', // Bullet list
  '(?:^|\n)(\\[[x ]{1}\\] {1,4})', // Task list
  '(?:^|\n) {0,3}(\\d{1,9}(?:\\.|\\)) {1,4})', // Order list
  '(?:^|\n) {0,3}(#{1,6})(?=\\s{1,}|$)', // ATX headings
  '^(?:[\\s\\S]+?)\\n {0,3}(\\={3,}|\\-{3,})(?= {1,}|$)', // Setext headings **match from beginning**
  '(?:^|\n) {0,3}(>).+', // Block quote
  '^( {4,})', // Indent code **match from beginning**
  '^(\\[\\^[^\\^\\[\\]\\s]+?(?<!\\\\)\\]: )', // Footnote **match from beginning**
  '(?:^|\n) {0,3}((?:\\* *\\* *\\*|- *- *-|_ *_ *_)[ \\*\\-\\_]*)$' // Thematic break
]

const INLINE_UPDATE_REG = new RegExp(INLINE_UPDATE_FRAGMENTS.join('|'), 'i')

const updateCtrl = ContentState => {
  ContentState.prototype.checkSameMarkerOrDelimiter = function (list, markerOrDelimiter) {
    if (!/ol|ul/.test(list.type)) return false
    return list.children[0].bulletMarkerOrDelimiter === markerOrDelimiter
  }

  ContentState.prototype.checkNeedRender = function (cursor = this.cursor) {
    const { labels } = this.stateRender
    const { start: cStart, end: cEnd, anchor, focus } = cursor
    const startBlock = this.getBlock(cStart ? cStart.key : anchor.key)
    const endBlock = this.getBlock(cEnd ? cEnd.key : focus.key)
    const startOffset = cStart ? cStart.offset : anchor.offset
    const endOffset = cEnd ? cEnd.offset : focus.offset
    const NO_NEED_TOKEN_REG = /text|hard_line_break|soft_line_break/
Repository: marktext/marktext
File: src/renderer/prefComponents/common/fontTextBox/index.vue (Vue)

Code before:
      default: false
    },
    onlyMonospace: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: function (value, oldValue) {
      if (value !== oldValue) {
        this.selectValue = value
      }
    }
  },
  methods: {
    querySearch (queryString, callback) {
      const fontFamilies = this.fontFamilies
      const results = queryString
        ? fontFamilies.filter(f => f.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        : fontFamilies
      callback(results)
    },
    handleSelect (value) {
      if (/^[_A-z0-9]+((-|\s)*[_A-z0-9])*$/.test(value)) {
        this.selectValue = value
        this.onChange(value)
      }
    },
    handleMoreClick () {
      if (typeof this.more === 'string') {
        shell.openExternal(this.more)
      }
    }
  },
  mounted () {
    const { onlyMonospace } = this
    const buf = fontManager.getAvailableFontsSync()
      .filter(f => f.family && (!onlyMonospace || (onlyMonospace && f.monospace)))
      .map(f => f.family)
    this.fontFamilies = [...new Set(buf)].sort((a, b) => a.localeCompare(b))
  }
}
</script>

<style>
.el-autocomplete-suggestion {
  border: 1px solid var(--floatBorderColor);
  background-color: var(--floatBgColor);
}
.el-popper[x-placement^=top] .popper__arrow {
  border-top-color: var(--floatBorderColor);

Review comment (security):
@Jocs I think you forgot to edit the `preferences/schema.json` file to allow all font families. When doing so, you should remove the regex completely and implement a proper XSS protection on the editor (renderer) to prevent bad font names. The attack vector is no very high but it's still a file-based Cross-Site Scripting when we don't verify the font family.

Code after:
    },
    onlyMonospace: {
      type: Boolean,
      default: false
    }
  },

  watch: {
    value: function (value, oldValue) {
      if (value !== oldValue) {
        this.selectValue = value
      }
    }
  },

  methods: {
    querySearch (queryString, callback) {
      const fontFamilies = this.fontFamilies
      const results = queryString
        ? fontFamilies.filter(f => f.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        : fontFamilies
      callback(results)
    },

    handleSelect (value) {
      if (/^[^\s]+((-|\s)*[^\s])*$/.test(value)) {
        this.selectValue = value
        this.onChange(value)
      }
    },

    handleMoreClick () {
      if (typeof this.more === 'string') {
        shell.openExternal(this.more)
      }
    }
  },
  mounted () {
    const { onlyMonospace } = this
    const buf = fontManager.getAvailableFontsSync()
      .filter(f => f.family && (!onlyMonospace || (onlyMonospace && f.monospace)))
      .map(f => f.family)
    this.fontFamilies = [...new Set(buf)].sort((a, b) => a.localeCompare(b))
  }
}
</script>

<style>
.el-autocomplete-suggestion {
  border: 1px solid var(--floatBorderColor);
  background-color: var(--floatBgColor);
Repository: marktext/marktext
File: src/main/menu/templates/format.js (JavaScript)

Code before:
import * as actions from '../actions/format'

export default function (keybindings) {
  return {
    id: 'formatMenuItem',
    label: 'F&ormat',
    submenu: [{
      id: 'strongMenuItem',
      label: 'Strong Emphasis',
      type: 'checkbox',
      accelerator: keybindings.getAccelerator('format.strong'),
      click (menuItem, browserWindow) {
        actions.format(browserWindow, 'strong')
      }
    }, {
      id: 'emphasisMenuItem',
      label: 'Emphasis',
      type: 'checkbox',
      accelerator: keybindings.getAccelerator('format.emphasis'),
      click (menuItem, browserWindow) {
        actions.format(browserWindow, 'em')
      }
    }, {
      id: 'underlineMenuItem',
      label: 'Underline',
      type: 'checkbox',
      accelerator: keybindings.getAccelerator('format.underline'),
      click (menuItem, browserWindow) {
        actions.format(browserWindow, 'u')
      }
    }, {
      type: 'separator'
    }, {
      id: 'superscriptMenuItem',

Review comment (suggestion):
I think more people would understand what this does if you made the label

```suggestion 
     label: 'Bold',
```

as the term “bold” is very commonly used for this.

Code after:
import * as actions from '../actions/format'

export default function (keybindings) {
  return {
    id: 'formatMenuItem',
    label: 'F&ormat',
    submenu: [{
      id: 'strongMenuItem',
      label: 'Bold',
      type: 'checkbox',
      accelerator: keybindings.getAccelerator('format.strong'),
      click (menuItem, browserWindow) {
        actions.format(browserWindow, 'strong')
      }
    }, {
      id: 'emphasisMenuItem',
      label: 'Italic',
      type: 'checkbox',
      accelerator: keybindings.getAccelerator('format.emphasis'),
      click (menuItem, browserWindow) {
        actions.format(browserWindow, 'em')
      }
    }, {
      id: 'underlineMenuItem',
      label: 'Underline',
      type: 'checkbox',
      accelerator: keybindings.getAccelerator('format.underline'),
      click (menuItem, browserWindow) {
        actions.format(browserWindow, 'u')
      }
    }, {
      type: 'separator'
    }, {
      id: 'superscriptMenuItem',
Repository: marktext/marktext
File: src/renderer/prefComponents/editor/index.vue (Vue)

Code before:
<template>
  <div class="pref-editor">
    <h4>Editor</h4>
    <range
      description="Font size in text editor."
      :value="fontSize"
      :min="12"
      :max="32"
      unit="px"
      :step="1"
      :onChange="value => onSelectChange('fontSize', value)"
    ></range>
    <range
      description="Line height in text editor."
      :value="lineHeight"
      :min="1.2"
      :max="2.0"
      :step="0.1"
      :onChange="value => onSelectChange('lineHeight', value)"
    ></range>
    <font-text-box
      description="Font family in text editor."
      :value="editorFontFamily"
      :onChange="value => onSelectChange('editorFontFamily', value)"
    ></font-text-box>
    <separator></separator>
    <range
      description="Font size in code blocks."
      :value="codeFontSize"
      :min="12"
      :max="28"
      unit="px"
      :step="1"
      :onChange="value => onSelectChange('codeFontSize', value)"
    ></range>
    <font-text-box
      description="Font family in code blocks."
      :onlyMonospace="true"
      :value="codeFontFamily"
      :onChange="value => onSelectChange('codeFontFamily', value)"
    ></font-text-box>
    <!-- FIXME: Disabled due to #1648. -->
    <bool
      v-show="false"
      description="Show line numbers in code blocks."
      :bool="codeBlockLineNumbers"
      :onChange="value => onSelectChange('codeBlockLineNumbers', value)"

Review comment (suggestion):
```suggestion
      description="Font used in text editor.”
```

Code after:
<template>
  <div class="pref-editor">
    <h4>Editor</h4>
    <range
      description="Font size in text editor."
      :value="fontSize"
      :min="12"
      :max="32"
      unit="px"
      :step="1"
      :onChange="value => onSelectChange('fontSize', value)"
    ></range>
    <range
      description="Line height in text editor."
      :value="lineHeight"
      :min="1.2"
      :max="2.0"
      :step="0.1"
      :onChange="value => onSelectChange('lineHeight', value)"
    ></range>
    <font-text-box
      description="Font for text editor."
      :value="editorFontFamily"
      :onChange="value => onSelectChange('editorFontFamily', value)"
    ></font-text-box>
    <separator></separator>
    <range
      description="Font size in code blocks."
      :value="codeFontSize"
      :min="12"
      :max="28"
      unit="px"
      :step="1"
      :onChange="value => onSelectChange('codeFontSize', value)"
    ></range>
    <font-text-box
      description="Font for code blocks."
      :onlyMonospace="true"
      :value="codeFontFamily"
      :onChange="value => onSelectChange('codeFontFamily', value)"
    ></font-text-box>
    <!-- FIXME: Disabled due to #1648. -->
    <bool
      v-show="false"
      description="Show line numbers in code blocks."
      :bool="codeBlockLineNumbers"
      :onChange="value => onSelectChange('codeBlockLineNumbers', value)"
Repository: marktext/marktext
File: src/renderer/prefComponents/general/index.vue (Vue)

Code before:
<template>
  <div class="pref-general">
    <h4>General</h4>
    <bool
      description="Automatically save document changes."
      :bool="autoSave"
      :onChange="value => onSelectChange('autoSave', value)"
    ></bool>
    <range
      description="Delay after document change before automatically saving (milliseconds)."
      :value="autoSaveDelay"
      :min="1000"
      :max="10000"
      unit="ms"
      :step="100"
      :onChange="value => onSelectChange('autoSaveDelay', value)"
    ></range>
    <cur-select
      v-if="!isOsx"
      description="Title bar style. (Restart required)."
      :value="titleBarStyle"
      :options="titleBarStyleOptions"
      :onChange="value => onSelectChange('titleBarStyle', value)"
    ></cur-select>
    <separator></separator>
    <bool
      description="Open files in new window."
      :bool="openFilesInNewWindow"
      :onChange="value => onSelectChange('openFilesInNewWindow', value)"
    ></bool>
    <bool
      description="Open folders in new window."
      :bool="openFolderInNewWindow"
      :onChange="value => onSelectChange('openFolderInNewWindow', value)"
    ></bool>
    <bool
      description="Hide scrollbars."
      :bool="hideScrollbar"
      :onChange="value => onSelectChange('hideScrollbar', value)"
    ></bool>
    <bool
      description="Word wrap in table of contents."
      :bool="wordWrapInToc"
      :onChange="value => onSelectChange('wordWrapInToc', value)"
    ></bool>

Review comment (suggestion):
```suggestion
      description="Title bar style (restart required)."
```

Code after:
<template>
  <div class="pref-general">
    <h4>General</h4>
    <bool
      description="Automatically save document changes."
      :bool="autoSave"
      :onChange="value => onSelectChange('autoSave', value)"
    ></bool>
    <range
      description="Delay following document edit before automatically saving (milliseconds)."
      :value="autoSaveDelay"
      :min="1000"
      :max="10000"
      unit="ms"
      :step="100"
      :onChange="value => onSelectChange('autoSaveDelay', value)"
    ></range>
    <cur-select
      v-if="!isOsx"
      description="Title bar style (requires restart)."
      :value="titleBarStyle"
      :options="titleBarStyleOptions"
      :onChange="value => onSelectChange('titleBarStyle', value)"
    ></cur-select>
    <separator></separator>
    <bool
      description="Open files in new window."
      :bool="openFilesInNewWindow"
      :onChange="value => onSelectChange('openFilesInNewWindow', value)"
    ></bool>
    <bool
      description="Open folders in new window."
      :bool="openFolderInNewWindow"
      :onChange="value => onSelectChange('openFolderInNewWindow', value)"
    ></bool>
    <bool
      description="Hide scrollbars."
      :bool="hideScrollbar"
      :onChange="value => onSelectChange('hideScrollbar', value)"
    ></bool>
    <bool
      description="Wrap text in table of contents."
      :bool="wordWrapInToc"
      :onChange="value => onSelectChange('wordWrapInToc', value)"
    ></bool>