QEditor definitions prop type

[cirolosapio]

What happened?

QEditorProps interface is defined as:

export interface QEditorProps {
  ...
  definitions?:
    | {
        /**
         * Label of the button
         */
        label?: string;
        /**
         * Text to be displayed as a tooltip on hover
         */
        tip?: string
  ...

What did you expect to happen?

the definitions prop should be Record<string, { ... }>

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-po3wz7?file=src%2Fcomponents%2FTestComp.ts

How to reproduce?

1. Go to the provided reproduction link
2. See type error on definitions computed

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), TypeScript Support

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[yusufkandemir]

Thank you for reporting this. This is probably the last one of the type errors. It was annoying me for a while, but couldn't find the right time and kept forgetting to open a ticket or fix it.

[cirolosapio]

i want to contribute but can't find those files
can you please tell me where are they?

[yusufkandemir]

@heartbeatLV

quasar/ui/src/components/editor/QEditor.json

Lines 72 to 150 in efdff8b

	"definitions": {
	"type": "Object",
	"desc": "Definition of commands and their buttons to be included in the 'toolbar' prop",
	"examples": [
	":definitions=\"{ save: { tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork }, upload: { tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: uploadIt } }\""
	],
	"definition": {
	"label": {
	"type": "String",
	"desc": "Label of the button",
	"examples": [ "Addresses" ]
	},
	"tip": {
	"type": "String",
	"desc": "Text to be displayed as a tooltip on hover",
	"examples": [ "Add a contact from the Address Book" ]
	},
	"htmlTip": {
	"type": "String",
	"desc": "HTML formatted text to be displayed within a tooltip on hover",
	"examples": [ "Add a <span class=\"red\">user</span> from the address book" ]
	},
	"icon": {
	"type": "String",
	"desc": "Icon of the button",
	"examples": [ "fas fa-address-book" ]
	},
	"key": {
	"type": "Number",
	"desc": "Keycode of a key to be used together with the <ctrl> key for use as a shortcut to trigger this element",
	"examples": [ "12", "36" ]
	},
	"handler": {
	"type": "Function",
	"desc": "Either this or \"cmd\" is required. Function for when button gets clicked/tapped.",
	"params": null,
	"returns": null,
	"examples": [ "() => this.uploadFile()" ]
	},
	"cmd": {
	"type": "String",
	"desc": "Either this or \"handler\" is required. This must be a valid execCommand method according to the designMode API.",
	"examples": [ "insertHTML", "justifyFull" ]
	},
	"param": {
	"type": "String",
	"desc": "Only set a param if using a \"cmd\". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.",
	"examples": [ "<img src=\"://uploads/001.jpg\" alt=\"nice pic\" />" ]
	},
	"disable": {
	"type": [ "Boolean", "Function" ],
	"desc": "Is button disabled?",
	"returns": {
	"type": "Boolean",
	"desc": "If true, the button will be disabled"
	},
	"examples": [ "!user.active", "() => !checkIfUserIsActive()" ]
	},
	"type": {
	"type": "String",
	"desc": "Pass the value \"no-state\" if the button should not have an \"active\" state",
	"values": [ null, "no-state" ],
	"examples": [ "no-state" ]
	},
	"fixedLabel": {
	"type": "Boolean",
	"desc": "Lock the button label, so it doesn't change based on the child option selected."
	},
	"fixedIcon": {
	"type": "Boolean",
	"desc": "Lock the button icon, so it doesn't change based on the child option selected."
	},
	"highlight": {
	"type": "Boolean",
	"desc": "Highlight the toolbar button, when a child option has been selected."
	}
	},
	"category": "toolbar"
	},

[rstoenescu]

Enhancement will be available in Quasar 2.8.0