QEditor don't show 'code' label on paragraph toolbar dropdown button

[lugrinder]

What happened?

In the QEditor component, when using the toolbar dropdown button for paragraph format like:

        :toolbar="[{
          label: $q.lang.editor.formatting,
          icon: $q.iconSet.editor.formatting,
          list: 'no-icons',
          options: ['p', 'h3', 'h4', 'h5', 'h6', 'code']
        }]"

When you select any of the paragraph options, labels are show correctly in list and button (selected), except for code that is shown in list, but not in button.

What did you expect to happen?

Show the label for 'code' option like in list.

Reproduction URL

https://codepen.io/Lugrinder/pen/wvmjbqR

How to reproduce?

1. Go to the provided link.
2. Click on paragraph dropdown button.
3. Select 'code'.
4. Label for 'code' in button is not shown.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 14.19.3

Global packages
  NPM - 6.14.17
  yarn - Not installed
  @quasar/cli - 1.3.2
  @quasar/icongenie - 2.5.3
  cordova - Not installed

Important local packages
  quasar - 2.7.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.9 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.1 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14 -- > This is the repository for Vue Router 4 (for Vue 3)
  pinia - 2.0.13 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.14.6 -- Babel compiler core.
  webpack - 5.74.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to
 preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.5.3 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  quasar-app-extension-ide-helper - 1.0.0 -- Quasar framework extension which enables IDE features like autocomplete by generating helper files for IDE to index.

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @lugrinder! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[bekmuradov]

Hi. code is built in q-editor command. If you want to update / overwrite commands you can redefine them by using definitions prop. It may look something like this.

:definitions="{
  code: {
    tip: 'Code',
    icon: null,
    label: 'Code'
  }
}"

It will just update the label. If you also want to update the method, then you need to include handler field.

:definitions="{
  code: {
    tip: 'Code',
    icon: null,
    label: 'Code',
    handler: codeCommandHandler
  }
}"

Read documentation here.

[lugrinder]

Ok, thanks for your answer, but I know about this. To solve, I'm doing:

:definitions="{
  code: {
    tip: $q.lang.editor.code
  }
}"

But I think that this was missing in the original code:

code: { cmd: 'formatBlock', param: 'PRE', icon: i.code, htmlTip: `<code>${ e.code }</code>` },

Should be:

code: { cmd: 'formatBlock', param: 'PRE', icon: i.code, tip: e.code, htmlTip: `<code>${ e.code }</code>` },

But I don't know If this was intentionally not added for any reason.